In this tutorial, we will extend our dashboard with more indicators, and we'll learn about additional dashboard features and formatting.
...
online_ratio_indicator.json | online_ratio_metric.json |
| Code Block |
|---|
{
"name": "online_ratio_indicator",
"type": "indicator",
"title": "Online channel ratio",
"description": "The ratio of online transactions and all transactions.",
"content": {
"metric": "/rest/projects/$projectId/md/metrics?name=online_ratio_metric",
"scale": "standard",
"distribution": "uniform",
"visualizations": {
"dotmap": true,
"heatmap": true,
"areas": true
},
"format": {
"type": "percentage",
"fraction": 1
}
}
}
|
|
| Code Block |
|---|
{
"name": "online_ratio_metric",
"type": "metric",
"content": {
"type": "function_divide",
"content": [
{
"type": "function_count",
"content": [
{
"type": "property",
"value": "transactions.transaction_id"
}
],
"options": {
"filterBy": [
{
"property": "transactions.channel",
"value": "Online",
"operator": "eq"
}
]
}
},
{
"type": "function_count",
"content": [
{
"type": "property",
"value": "transactions.transaction_id"
}
]
}
]
}
} |
|
offline_ratio_indicator.json | offline_ratio_metric.json |
| Code Block |
|---|
{
"name": "offline_ratio_indicator",
"type": "indicator",
"title": "Offline channel ratio",
"description": "The ratio of offline transactions and all transactions.",
"content": {
"metric": "/rest/projects/$projectId/md/metrics?name=offline_ratio_metric",
"scale": "standard",
"distribution": "uniform",
"visualizations": {
"dotmap": true,
"heatmap": true,
"areas": true
},
"format": {
"type": "percentage",
"fraction": 1
}
}
}
|
|
| Code Block |
|---|
{
"name": "offline_ratio_metric",
"type": "metric",
"content": {
"type": "function_divide",
"content": [
{
"type": "function_count",
"content": [
{
"type": "property",
"value": "transactions.transaction_id"
}
],
"options": {
"filterBy": [
{
"property": "transactions.channel",
"value": "Offline",
"operator": "eq"
}
]
}
},
{
"type": "function_count",
"content": [
{
"type": "property",
"value": "transactions.transaction_id"
}
]
}
]
}
} |
|
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 objects 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 |
|---|
| title | Expand the code block to see the updated dashboard |
|---|
|
| Code Block |
|---|
| title | Updated Business overview dashboard |
|---|
| {
"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.
...
There's no new syntax in case of transactions_indicator and transactions_metric objects. The transactions_per_customer_metric is a simple fraction. And in average_transaction_metric, we use a new function - function_avg.
Add these 6 objects using addMetadata.
What's important is the dashboard syntax update. We will add a the indicatorGroup object containing these three indicators to the blockRows array.
...
| Expand |
|---|
| title | Expand the code block to see the updated dashboard |
|---|
|
| Code Block |
|---|
| title | Updated Business overview dashboard |
|---|
| {
"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"
}
]
}
|
|
Use pushProject to update the dashboard.
Categories block
Now, we'll add categories block on our dashboard. Blocks are parts of the indicator drill object. So, this part of this tutorial is a actually sneak peek to the next part.
...
| Expand |
|---|
| title | Expand the code block to see the updated dashboard |
|---|
|
| Code Block |
|---|
| title | Updated Business overview dashboard |
|---|
| {
"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"
},
{
"type": "categories",
"title": "Number of customers by sex",
"description": "Number of customers by sex",
"splitProperty": "customers.sex",
"indicator": "/rest/projects/$projectId/md/indicators?name=customers_indicator"
}
]
},
"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.
| Info |
|---|
|
 That's it! You now have a beautiful dashboard in your project. In the next tutorial, we'll take a look at various ways of filtering the data.
|
...