Tutorial 3: Setting up dashboard

In this tutorial, we will extend our dashboard with more indicators, and we'll learn about additional dashboard features and formatting.

We'll also learn new metric functions and syntax.

What you'll create

Extended dashboard full of new features and indicators.

Block rows

Our dashboard contains two indicators we've added in the previous tutorial - turnover_indicator and customers_indicator. They're both in a single block row. Using the blockRow object, we can put two indicators in one row, and thus save some space on the dashboard.

Let's add two more metrics and two more indicators:

  • online_turnover_indicator.json
  • online_turnover_metric.json
  • offline_turnover_indicator.json
  • offline_turnover_metric.json

These metrics use the filterBy option, which allows you to filter metric results based on value of some property. In this case, we'll split our metrics based on the value of transactions.channel property, which is either "Online" or "Offline".

The indicators are similar to turnover_indicator, we've just edited the title and description keys. Add these 4 object using addMetadata.

Now, we have to add these new indicators on the dashboard. We will use the blockRow object, which allows us to put put two indicators in one row.

Expand the code block below to see the updated dashboard

Use pushProject to update the dashboard.

Indicator layout

So far, we used only the primary layout of indicators. Let's have a look at the secondary layout, and some more metrics.

Let's add two more metrics and two more indicators:

  • online_ratio_indicator.json
  • online_ratio_metric.json
  • offline_ratio_indicator.json
  • offline_ratio_metric.json

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

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.

Our indicatorGroup "Transactions" analyzes the transactions using 3 new indicators and metrics. These are:

  • transactions_indicator.json
  • transactions_metric.json
  • transactions_per_customer_indicator.json
  • transactions_per_customer_metric.json
  • average_transaction_indicator.json
  • average_transaction_metric.json





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.

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

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.

Categories can split the result of an indicator based on a dataset's property. Similar to how we split online and offline transactions earlier - we'll split customers based on sex.

We don't need to add a new indicator, instead we'll use the customers_indicator from the first tutorial. So just add the categories object at the end of the blockRows array.

Expand the code block below to see the updated dashboard