Dashboard Chart Configuration - AtlasOfLivingAustralia/biocollect GitHub Wiki

Overview

This wiki page describes how a hub's dashboard charts can be configured. Almost all front end changes can be carried out by changing the chart configuration which allows high flexibility without changing code.

For NESP hub, charts can be found at https://biocollect.ala.org.au/nesp/report/chartList. It can only be viewed by ALA admins and hub admins.

Chart Config Location

Chart config should be set in Static pages under fielddata.dashboard.dashboardConfig section for a hub. For example, in NESP hub it should be set in fielddata.dashboard.dashboardConfig on https://biocollect.ala.org.au/nesp/admin/staticPages. Chart config should be a valid JSON object.

Configuring charts

How do I configure the number of charts to show per row?

This can be changed at "chartjsPerRowSelected" variable. Currently it is set at 3

How do I add a new chart?

All charts are contained in a JSON array called chartList. A new chart will be adding a new JSOn object to the array.

"chartList": [ { // CHART 1 }, { // CHART 2 } ]

How do I configure the chart type?

Chart type can be configured under chartOptions.type.

  "chartOptions": {
    "type": "pie",

How do I configure bar charts?

After specifying the chart type as above to 'bar', the axes of the chart needs to be specified as below in chartOptions.options.parsing.xAxisKey and chartOptions.options.parsing.yAxisKey

  "chartOptions": {
    "type": "bar",
    "minifyXLabel": 32,
    "options": {
      "parsing": {
        "xAxisKey": "group",
        "yAxisKey": "count"
      },

How do I configure pie charts?

In the case of pie charts the chart type can be configured as same as above by setting the type as pie. In addition, chartOptions.options.parsing.key should be set with the value 'count'

  "chartOptions": {
    "type": "pie",
    "options": {
      "parsing": {
        "key": "count"
      },

How do I configure chart title?

Chart title can be set under chartOptions.options.plugins.title.text. Any padding below chart title can be set in the padding section as below. Fonts can be adjusted in the font section.

  "chartOptions": {
      "plugins": {
        "title": {
          "display": true,
          "text": "Projects by phase",
          "padding": {
            "bottom": 30
          },
          "font": {
            "size": 20,
            "family": "sans-serif"
          }

How do I show different colours in the sections of pie/ bar chart?

image

This can set at 'backgroundColor' section as an array. The values can be specified wither as rgb or Hex values

  "backgroundColor": ["rgb(255, 99, 132)","rgb(54, 162, 235)"]

How do I show quantum values on charts?

image

Quantum values can be configured under chartOtions.options.plugins.datalabels

 "chartOptions": {
    "options": {
      "plugins": {
        "datalabels": {
          "color": "#36A2EB",
          "anchor": "end",
          "align": "end",
          "labels": {
            "value": {
              "color": "#565656"
            }
          }
        }

How do I set padding around charts?

This can be configured in chartOptions.options.layout.padding "chartOptions": { "options": { "layout": { "padding": 50 }

How do I wrap long x axis labels and change label orientation?

image

To display chart as above maximum number of characters needs to be specified in chartOptions.minifyXLabel Label orientation angle can be set under chartOptions.options.scales.x.ticks.maxRotation and chartOptions.options.scales.x.ticks.minRotation

  "chartOptions": {
    "minifyXLabel": 20,
    "options": {
      "scales": {
        "x": {
          "ticks": {
            "autoSkip": false,
            "maxRotation": 70,
            "minRotation": 70
          }
        }
      }

How to set chart backend configurations?

All backend related configurations can be set in 'configuration' section in the chart config.

Any chart specific filters can be specified in configuration.query section as follows "configuration": { "query": "-role:logo AND -role:mainImage AND -role:\"\"",