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.

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.

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.

Last updated