VI. Adding visualization metrics

To complete the Customers page, we will add some visualization metrics.

Let’s add a Pie Chart to display the Orders of the Customer grouped by their status:

1. Drag a Chart onto the canvas

2. Change its type to Pie chart

3. In the Data field, assign the action {{actions.customerOrders.data}}

4. On the Series section, specify Status in the X-axis, grouped by Value. For Y-axis, specify orderNumber, grouped by Count.

Configuring a Pie Chart

Next, we'll add a Metric showing the total amount of payments made by a Customer.

1. Add a Metric to the working area.

2. Add a new Action - Load Table. Specify Payments table as a resource for the Action

3. Configure selected record fields as Customer Number ={{ activeRoute.queryParams.id}}

4. In the Data field, assign the Action {{ actions.customerPayments.data }}

5. Set a name to the Metric - Payments, total

6. Configure the Metric: the main field is Amount, grouped by Sum. An additional field is not required and can be skipped. In the Group by field, set Don't Group.

7. Check the Metric - you can see the sum of all payments made by a selected Customer.

Configuring the Metric

Great job so far! 😎 You have created a new page to display all the necessary Customer information and added some visualization components. Your dashboard looks awesome! As the last step, you can share it with your colleagues.