How to create and configure an enterprise management data dashboard using existing form data-DataV(DataV)-阿里云帮助中心

This topic describes how to create and configure a data dashboard for an enterprise management system using data from the customer database and contract forms.For a video tutorial, see Yida data dashboard tutorial.

Create an enterprise management system

Follow these steps:

Log on to the Yida system. Create an application from a blank template and name it Enterprise Management System.
Create two basic forms for enterprise management: Customer Database and Contract Form. The Customer Database form includes fields such as Name, Industry, Contact Information, Customer Source, Address, and Longitude and Latitude.
The Contract Form includes fields such as Signing Date, Contract ID, Customer Name, Contract Name, Our Signatory, Customer Signatory, Contract Amount, Unit, Payment Received, Payment Outstanding, Customer Address, and Signing Details.
Enter some sample data into the Customer Database and Contract Form for use in the data dashboard.
On the Enterprise Management System page, click the icon next to the search box in the upper-left corner. From the drop-down list, select New Data Dashboard (Beta).
On the Select a Data Dashboard Template page, select the Group Data Dashboard template from the Template List and click Select.
After the data dashboard is created, click the title at the top of the data dashboard editor and rename it to Enterprise Business Data Dashboard.
In the data dashboard editor, the areas from left to right are Layers, Widgets, Canvas, and Page Configuration. When you click a widget on the canvas, its configuration panel appears on the right.
If necessary, delete unnecessary widgets, such as the General Title and Ticker Board widgets for Employee Count. On the canvas, select the Ticker Board widget for 2017 Cumulative Sales. In the Configuration panel on the right, change the Title to 2022 Cumulative Contract Value. Use the same method to rename other ticker boards.

Note
To delete multiple widgets, hold down Ctrl (on Windows) or Command (on Mac), click the widgets, and then press Delete.
Click the General Title widget for Company Count on the canvas. In the Data panel, click Configure Data Source. In the Set Data Source section, change the value of the Static Data to Customer Count.
Note
- You can select a widget by clicking it on the canvas or in the Layers panel on the left.
- If a large layer, such as the Basic Flat Map widget, covers other widgets, you can right-click the large layer and select Lock. This makes the covered widgets, such as a Column Chart, visible and selectable. To unlock the layer, select the Basic Flat Map widget in the Layers panel on the left, right-click it, and select Unlock.
Use the same methods to configure the other widgets and complete the enterprise business data dashboard. The following figure shows the final data dashboard. The left side shows the group's contract overview and employee contract rankings. The center shows the customer distribution map. The bottom shows the total contract value by region for 2022. The right side shows the product type distribution, customer acquisition channels, and contract details.

Configure data dashboard widgets with customer database data

This section describes how to configure the following data dashboard widgets using data from the customer database: Ticker Board, Carousel Pie Chart, and Basic Flat Map.

Configure the ticker board widget

Follow these steps to configure the ticker board widget:

Open the Enterprise Business Data dashboard. In the upper-right corner, click Edit Dashboard to open the editor.
Select the Ticker Board widget for 2022 Cumulative Customer Count. In the panel on the right, click the Data tab, and then click Configure Data Source.
In the Set Data Source section, click the Data Source Type drop-down list, select Yida Data Source, and click Configure.
In the Chart Data Configuration dialog box:
- Dataset configuration: Set Dataset to Customer Database.
- Value configuration: Drag the Name field from the left side of the dataset into the Value field in the Chart Field Mapping section. Click the icon next to the Name field and select the Count function to count the number of customers.
- Filter configuration: Use the same method to drag the creation_time field to the Filter section. Set the time range from January 1, 2022, to January 1, 2023.
You can preview the chart in the Chart Preview area on the right. Click OK in the lower-right corner.
Return to the Configuration panel. Select Ticker Board > Suffix, and enter the desired unit for the data.

Configure the carousel pie chart widget

Follow these steps to configure the carousel pie chart widget:

On the canvas, select the Pie Chart widget for Customer Acquisition Channel. In the panel on the right, click the Data tab, click Configure Data Source, select Yida Data Source, and click Configure.
In the Chart Data Configuration dialog box, set Dataset to Customer Library. Drag the customer_source_chinese field to Category Name and the name field to Value Description. Set the aggregation method to Count. After you verify that the chart preview is correct, click OK in the lower-right corner.

Configure the basic flat map widget

Follow these steps to configure the basic flat map widget:

On the canvas, select the Basic Flat Map widget for customer distribution. In the Configuration panel on the right, click + Sub-widget Management to open the sub-widget management panel. Select Scatter Layer and click + Add Sub-widget at the bottom of the panel.
In the sub-widget management area, select the Scatter Layer sub-widget. Switch to the Data panel for the Scatter Layer. Click Configure Data Source, select Yida Data Source, and click Configure.
In the Chart Data Configuration dialog box, set Dataset to Customer Library. Drag the lat field to Latitude and the lng field to Longitude. After you verify that the chart preview is correct, click OK in the lower-right corner.
Note
If the scatter points do not appear on the map after you configure the scatter layer, check the Configuration panel of the scatter layer. In the Series Configuration section, the Type Filter Value may be set to ok.

In the Set Data Source section of the Data panel for the scatter layer, check Data Filter. Add a data filter and configure its code as shown in the following figure. The following code provides an example:
```
data.forEach(item=>{
  item.type = "ok"
}
```
After you configure the filter, the scatter layer data is filtered, and the points that meet the filter criteria are displayed on the map.

Configure data dashboard widgets with contract form data

This section describes how to configure the following data dashboard widgets using data from the contract form: Carousel List Column Chart, Basic Column Chart, and List Carousel.

Configure the carousel list column chart widget

Follow these steps to configure the carousel list column chart widget:

Open the Enterprise Business Data dashboard. In the upper-right corner, click Edit Dashboard to open the editor.
Select the Carousel List Column Chart widget for Contract Ranking. In the panel on the right, click the Data tab, click Configure Data Source, select Yida Data Source, and click Configure.
In the Chart Data Configuration dialog box, set Dataset to Contract Table. Drag the Contract Amount field to Value and the Our Signatory field to Content. After you verify that the chart preview is correct, click OK.

Note
The carousel list column chart is sorted in descending order by default.

Configure the basic column chart widget

Follow these steps to configure the basic column chart widget:

On the canvas, select the Basic Column Chart widget for Product Type Distribution. In the panel on the right, click the Data tab, click Configure Data Source, select Yida Data Source, and click Configure.
In the Chart Data Configuration dialog box, set Dataset to Contract Signing Table.Contract Signing Details. Drag the Product Category field to Category and the Quantity field to Value. Set the Sort option to sort by the Quantity field. After you verify that the chart preview is correct, click OK.

Add and configure the list carousel widget

Follow these steps to add and configure the list carousel widget:

On the canvas, from the All Assets panel, add a List Carousel widget for Contract Detail Information.
In the Configuration panel on the right, set the Number of Table Rows, Table Header, Row Configuration, and Serial Number Background Color.
- Number of table rows: Click the Global configuration item to open the drop-down list. Set Number of Table Rows to 5.
- Table header background color: Click the Table Header configuration item to open the drop-down list. Configure the background color of the table header as shown in the following figure.
- Odd and even row background color: Click Row Configuration to open the drop-down list. Configure the background colors for odd and even rows as shown in the following figure.
- Serial number column background color: Click the Serial Number configuration item to open the drop-down list. Configure the background color of the serial number column as shown in the following figure.
Click the Custom Columns configuration item to open the drop-down list. In the chart data configuration dialog box, configure the data fields for the columns.
In the Chart Data Configuration dialog box, set Dataset to Contract Form. Drag the our_signatory, customer_signatory, contract_amount, and signing_date fields to the column fields area. By default, the data is sorted by signing_date in descending order. Click OK.
Return to the configuration page and open the Data panel. Add several custom column labels. Copy the values from the fields in the Data Response and paste them into the corresponding custom column label fields.
The enterprise business data dashboard is now complete. The final result is shown in the following figure.