React D3 Gauge

Content Type: Widget
Categories: User Interface

Overview

A gauge chart based on React utilizing the Mendix Pluggable widgets API and the D3 charting library. This widget is a rewrite of the original version based on Dojo: https://marketplace.mendix.com/link/component/8677

Documentation

Demo urlhttps://d3gaugechart.mxapps.io/index.html?profile=Responsive

ReactGauge

A fully customizable Gauge Chart / Speedometer based on D3 and React.

Features

This Gauge chart is based on React utilizing the Mendix Pluggable widgets API and the D3 charting library for creating a fully customizable Gauge chart.

This widget is a rewrite of the original version based on Dojo: https://marketplace.mendix.com/link/component/8677

Usage

  • Step 1: Create a non-persistent GaugeWrapper entity in which at least three Decimal type attributes should be present: Value, MinValue and MaxValue.
  • Step 2: Add a dataview to your page, populated by a datasource microflow that creates this GaugeWrapper entity.
  • Step 3: Configure the widget.
    • Below only the settings that could need a bit more elaboration are added.
    • For the rest the description in the widget settings should be descriptive enough.

WIDGET SETTINGS

General - Appearance

  • Size: set the size of the Gauge chart. Can either be in different dimension (pixel, percentage, etc), see 'Dimension Unit';
  • Dimension: determine the dimension of the size here, so typical selection would be either px (pixel) or pc (percentage);
  • Fluid Width: if set to 'Yes', will take adjust itself to the full parent container width;

General - data source

  • Value: select the Decimal attribute to display;
  • Minimum Value: select the Decimal attribute value at which the gauge chart should start;
  • Maximum Value: select the Decimal attribute value at which the gauge chart should end;

General - Label

  • Label Formatting: with this setting it is possible to add text to the value displayed below the needle. The actual value is referred to as ${value}, which is also the default value. Text can be added before and after the value, i.e. 'Current Value: ${value} %'

Arc - Custom Ranges

  • Color Gauge Sections: Set colors per sections of the gauge. Irrelevant of what minimum and maximum value are set, stick to a percentage from 0 to 100 here. Range Start: The starting percentage of this section of the gauge Range End: The ending percentage of this section of the gauge Color: The color for the section. Example colors: Red: #F02828, Orange: #FE6A00, Yellow: #E8DD11, Lightgreen: #82E042, Green: #089F50

Arc - Gradient

  • Gradient Color: if a fluid color range is needed, set this option to 'Yes'. If set to 'Yes' the widget will also pick up the values selected at 'Gradient No of Segments' and 'Gradient Max Segment Labels'

Demo project

https://d3gaugechart.mxapps.io/index.html?profile=Responsive

Issues, suggestions and feature requests

https://github.com/ivosturm/ReactD3Gauge/issues

Development and contribution

This widget uses the react-d3-speedometer library, see https://www.npmjs.com/package/react-d3-speedometer for more details.

Releases

Version: 1.0.0
Framework Version: 9.1.1
Release Notes: Gauge chart widget based on React utilizing the Mendix Pluggable widgets API and the D3 charting library for creating a fully customizable Gauge chart.