Colored Thresholds for Gauge Charts Configuration

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

How-to Guide

Author:

Fluent Commerce

Changed on:

8 Feb 2024

Key Points

Shows Implementers how to configure colored thresholds for gauge charts.
All configurations are described for the Sources and Feeds reference manifest fragments.

Steps

Prerequisites

The Gauge Chart wrapper is configured in the manifest.
Mutations createSetting and updateSetting are enabled in the manifest.
The User has an assigned role with the following permissions
- SETTING_VIEW
- SETTING_CREATE
- SETTING_UPDATE

Create required setting

Create a setting on an ACCOUNT or RETAILER level.

Note

To configure custom colors for the gauge charts on the Sources and Feeds dashboard, the settings should be named:

For the gauge chart on the Feeds dashboard: `fc.chart.gauge.feeds.dashboard`
For the gauge chart on the Sources dashboard: `fc.chart.gauge.sources.dashboard`

In case you want to customize values for your custom gauge charts, you need to validate:

the Gauge Chart wrapper is configured in the manifest;
the setting name is the same as the gauge chart wrapper’s settingName in the manifest.

Populate required setting values

Select JSON value and fill the value with the following data:

percentage - set percentage
color - set color for a threshold in HEX format.

Color Palette

You can select one of the colors here or use your own.

threshold - set an amount per hour. When the threshold is reached, the percentage and color change.

Scaling Logic

For other values of the Time filter, the threshold values are scaled accordingly, e.g. 30 minutes → theshold/2; 8 hours → threshold*8.

1[
2  {
3    "percentage": 25,
4    "color": "#D23B3B",
5    "threshold": 0
6  },
7  {
8    "percentage": 75,
9    "color": "#EF8F00",
10    "threshold": 3000
11  },
12  {
13   "percentage": 100,
14   "color": "#4CAF50",
15   "threshold": 4000
16  }
17]

Note

In case the setting is not set, the data is displayed based on default values (configuration) in the example above.

Colored Thresholds for Gauge Charts Configuration

Key Points

Steps

Prerequisites

Create required setting

Populate required setting values

Related content

Settings Creation and Editing Mutations

Fluent Commerce

Building Blocks

By Type

Helpful Resources

Quick Links