U-way low-code practice: statistical view

 

U-way low-code technology column is a brand-new, technology-based column written by members of U-way technical committee. Based on U-way’s 7-year low-code technology research and development and operation and maintenance achievements, it mainly introduces the technical principles and architecture related to low-code Logic, the purpose is to provide a platform for technical exchange and learning for the majority of operation and maintenance personnel.

---

The 10th serialization of U-way low-code practice

"Statistics View"

▽

Visual Builder provides a lot of icon-type components, which are convenient for users to do some data statistics. They can also be widely used in large-screen projects. Next, we simply modify our layout and make a suggested data statistics chart. bar~

1. Add a chart component

Locate the general-card component of the task details routing page, delete all its subcomponents, and add our new chart component: chart-v2.bar-chart, the effect is as follows:

 Next, we received a request. In this icon, we want to show that the status of the task card is still being processed, or unprocessed, and display it. Here, our modifications are as follows:

2. Docking background data

数据名称: taskList
类型: Provider
Provider: providers-of-cmdb.instance-api-post-search-v3
Args:
  - TASK_FOR_VB_LESSON
  - fields:
      - assignee
      - state
    page: 1
    pageSize: 3000

3. Diagram layout modification

属性面板-属性:
  data: <% FN.computedTaskList(CTX.taskList) %>
  height: 450
  legends: false
  xField: assignee
  yField: unFinishTask

4. Newly added computedTaskList micro-application function

function computedTaskList({ list }: Params): ResultItem[] {
  const obj = {};
  list.forEach((item) => {
    if (item.state === "研发完成") return;
    if (obj[item.assignee]) {
      obj[item.assignee]++;
    } else {
      obj[item.assignee] = 1;
    }
  });


  const arr: ResultItem[] = [];


  Object.entries(obj).forEach(([key, value]) => {
    arr.push({
      assignee: key,
      unFinishTask: value as number,
    });
  });


  return arr;
}


interface Params {
  list: Array<any>;
}


interface ResultItem {
  assignee: string;
  unFinishTask: number;
}

After dealing with these, our icon can work as expected ~ see the preview image:

 5. Optimize the page style and add pictures

We simulate a requirement, this page is too monotonous, we want to add some pictures to enrich the content, so how do we do it?

First, select the picture tab in the left sidebar menu, enter the page, click the upload button in the upper right corner, upload the picture, and finally click build & push, and we can use the pictures we uploaded~ For details, please refer to the "Picture" chapter

 Then go back to our task details page and modify the arrangement, as shown in the figure below:

Among them, the src of img, each project, and each picture will be different. Please use the corresponding url in combination with your own projects.