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.

Related content

Settings Creation and Editing Mutations

Edited 592 days ago

Fluent Commerce

Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.

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]

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

Prerequisites

Create required setting

Populate required setting values