In this tutorial, we will extend our dashboard with more indicators, and we'll learn about additional dashboard features and formatting.
...
Our dashboard contains two indicators we've added in the previous tutorial - turnover_indicator
and customers_indicator
. They're both each in a single separate block row. Using the blockRow
object, we can put two indicators in one row, and thus save some space on the dashboard.
...
online_ | online_ | ||||
|
| ||||
offline_ | offline_ | ||||
|
|
This metric tells us what portion of our business is realised through the online/offline channel. This can done by using function_divide
and dividing the number of online transactions by the number of all transactions. You can think of this type of metric as a fraction. The numerator is the number of online/offline transactions, and the denominator is the number of all transactions.
The indicators have a different format
object. We want to format the metric as a percentage
with fraction
of 1. We also used a different distribution - uniform
.
Add these 4 object using addMetadata
.
Extend the dashboard similar to what we've done earlier. We will use the blockRow
object, again but we'll set the layout of these indicator to secondary
. This means they will appear smaller on the dashboard.
Expand the code block below to see the updated dashboard
Code Block | ||||
---|---|---|---|---|
| ||||
{ "id": "ltvoi2nghm4dt4jr", "name": "business_overview_dashboard", "type": "dashboard", "content": { "blockRows": [ { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=turnover_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" }, { "type": "blockRow", "blocks": [ { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=online_turnover_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=offline_turnover_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" } ] }, { "type": "blockRow", "blocks": [ { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=online_ratio_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "secondary" }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=offline_ratio_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "secondary" } ] }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=customers_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" } ] }, "accessInfo": { "createdAt": "2020-06-25T12:58:05Z", "modifiedAt": "2020-06-29T06:14:41Z", "createdBy": "/rest/accounts/00ubfu7fdyIoFKxXm0h7", "modifiedBy": "/rest/accounts/00ubfu7fdyIoFKxXm0h7" }, "links": [ { "rel": "self", "href": "/rest/projects/k5t8mf2a80tay2ng/md/dashboards/ltvoi2nghm4dt4jr" } ] } |
Use pushProject
to update the dashboard.
Indicator group
It's possible to group indicators into collapsible indicator groups. Each indicatorGroup
must have a title
and can have a description
.
...
What's important is the dashboard syntax update. We will add a the indicatorGroup
object containing these three indicators to the blockRows
array.
Expand the code block below to see the updated dashboard
Code Block | ||||
---|---|---|---|---|
| ||||
{ "id": "ltvoi2nghm4dt4jr", "name": "business_overview_dashboard", "type": "dashboard", "content": { "blockRows": [ { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=turnover_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" }, { "type": "blockRow", "blocks": [ { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=online_turnover_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=offline_turnover_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" } ] }, { "type": "blockRow", "blocks": [ { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=online_ratio_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "secondary" }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=offline_ratio_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "secondary" } ] }, { "type": "indicatorGroup", "title": "Transactions", "blockRows": [ { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=transactions_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=transactions_per_customer_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=average_transaction_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" } ] }, { "type": "indicator", "indicator": "/rest/projects/$projectId/md/indicators?name=customers_indicator", "indicatorDrill": "/rest/projects/$projectId/md/indicatorDrills?name=empty_indicator_drill", "layout": "primary" } ] }, "accessInfo": { "createdAt": "2020-06-25T12:58:05Z", "modifiedAt": "2020-06-29T06:14:41Z", "createdBy": "/rest/accounts/00ubfu7fdyIoFKxXm0h7", "modifiedBy": "/rest/accounts/00ubfu7fdyIoFKxXm0h7" }, "links": [ { "rel": "self", "href": "/rest/projects/k5t8mf2a80tay2ng/md/dashboards/ltvoi2nghm4dt4jr" } ] } |
...