GoodData Plugins #2: Gauge Chart

GoodData Dashboard Plugins enable builders to customise GoodData Dashboards in accordance with their particular person wants or enterprise objectives. If you wish to develop your personal plugin, try this tutorial.

Be aware: Missed the primary article on this sequence masking our Dashboard Description plugin? Learn it right here.Additionally, test the subsequent article from the dashboard plugins sequence, which focuses on Perception Teams.

This text describes the Gauge Chart plugin. A Gauge Chart is a kind of chart that makes use of a radial scale to current information within the type of a dial. Sometimes, the dimensions in a Gauge Chart is split into segments to offer a extra detailed illustration of the dimensions. These segments will be color-coded to shortly point out whether or not the given worth falls beneath or exceeds the anticipated/commonplace vary.

If you wish to use the plugin (Gauge Chart) in your GoodData dashboard, it signifies that the plugin will have an effect on all Bullet charts within the following manner:

• Every Bullet Chart should include precisely one major metric and one goal metric, with the comparative metric and ‘view by’ attribute left empty.
• These visualizations are then changed by the gauge element.
• The utmost worth of the Gauge Chart corresponds to the goal worth of the unique Bullet Chart.
• The needle on the Gauge Chart signifies the first metric of the unique Bullet Chart.
• The minimal worth within the Gauge chart element is all the time set to 0.

Create Your Gauge Chart Plugin

If you wish to create your personal Gauge Chart plugin, beneath are the steps to do it.

Step 1: Clone dashboard-plugin-examples repository

git clone https://github.com/gooddata/gooddata-dashboard-plugins.git

Step 2: Navigate to gauge_chart_plugin

cd gauge_chart_plugin

Step 3: Set setting variables

Be sure to have your .env and .env.secrets and techniques information with the proper values. After you clone the repository, you will notice a .env.secrets and techniques.template file within the gauge_chart_plugin folder. You have to take away “template” from the filename to arrange every thing appropriately.

For .env, you will want to outline 4 variables:

# GoodData backend (code title)
BACKEND_TYPE=tiger

# GoodData host
BACKEND_URL=

# GoodData workspace id
WORKSPACE=

# GoodData dashboard id
DASHBOARD_ID=

In case you open a GoodData dashboard, yow will discover the BACKEND_URL, WORKSPACE_ID, and the DASHBOARD_ID within the URL like this:

https://<BACKEND_URL>/dashboards/#/workspace/<WORKSPACE_ID>/dashboard/<DASHBOARD_ID>

For .env.secrets and techniques, you will want just one variable:

# GoodData API token
TIGER_API_TOKEN=

Test Create an API token documentation for extra info.

Step 4: Test dependencies

Guarantee that dependencies within the package deal.json file are aligned with the model of the SDK dashboard element you utilize in your challenge (if you’re embedding the dashboards with the GoodData SDK).

{

  ...

  "@gooddata/sdk-ui-dashboard": "^9.2.0" <-- should match within the plugin and your challenge 

  ...

}

Step 5: Construct a manufacturing model

Construct a manufacturing model of the plugin utilizing the command npm run build-plugin, or yarn build-plugin. When you have already constructed this plugin, first delete the dist folder.

Step 6: Add the constructed plugin

Add the constructed plugin to your internet hosting. GoodData doesn’t present internet hosting in your plugin builds. If you construct your plugin, you need to host it your self in a publicly accessible location that helps HTTPS.

Additionally, be sure the internet hosting of your plugin is included within the allowed plugin hosts by CSP Coverage (documentation).

Step 7: Create plugin metadata object

Create a plugin metadata object utilizing npm run add-plugin or yarn add-plugin command. For extra info, run the npm run add-plugin –assist, or yarn add-plugin –help command.

Copy the plugin object-id famous within the console output for the subsequent step.

Step 8: Hyperlink the plugin to the dashboard

Run npm run link-plugin —–with-parameters, or yarn link-plugin —–with-parameterscommand.

This can open the textual content editor the place you paste the next string:

{
    "prefixes":"gauge",
    "showLabels":false, 
    "format":"%"
}

• prefixes: you’ll be able to specify naming prefixes you need the plugin to use, separated by areas. If not specified, the default prefix ‘gauge’ is used.
• format: the format parameter accepts ‘#’ to indicate values in numeral illustration or ‘%’ to show the share of the worth. If an empty or invalid worth is entered, the share format is used.
• showLabels: signifies whether or not to show the minimal and most worth labels. If not specified, labels are hidden.

As soon as the plugin is linked to the dashboard, it turns into seen, and you can begin utilizing it!

What’s Subsequent?

If you wish to strive dashboard plugins, try our free trial. If you want to debate dashboard plugins, or no matter you could have in your thoughts, attain out to us on our neighborhood Slack.