d3 speedometer sample

Content Type: Sample

Categories: Utility,User Interface,Data

Overview

The d3 Speedometer Sample is a ready-to-run module that shows the d3 Speedometer widget in action. Import it into your app, open one page, and try every setting of the widget live: change a value in a form and watch the gauge update. It is the quickest way to learn what the widget can do and to find the right settings before you build your own page.

What is included

- A Home_Web page with a speedometer gauge and a "Features" panel below it.

- 30 input fields in the Features panel, one for every widget property: value, range, segments, colours, needle, dimensions, labels and formatting.

- A non-persistable entity, d3Speedometer, with an attribute for every property. Nothing is stored in your database.

- A data source microflow that opens the gauge with ready-made demo values: value 250 on a 0–500 scale, 5 segments with labels, 400 px wide.

- A link to the react-d3-speedometer documentation for further reading.

- The d3 Speedometer widget 1.0.1 itself, so no separate widget download is needed.

Documentation

Typical usage scenario

The d3 Speedometer Sample is a ready-to-run demo of the d3 Speedometer widget. Use it to:

- Learn the widget quickly: open one page and see the gauge with working demo values, without building anything.

- Experiment before you build: try values, ranges, segment colours, threshold zones, labels and needle animations in a form, and see the result straight away.

- Find the right settings: work out which colours, custom stops or label JSON you need, then use the same values in your own app.

- Start from a working example: copy the entity, data source microflow and page as a template for your own gauges.

- Demonstrate the widget to colleagues or customers before you commit to it.

It solves the usual "how do I configure this?" problem. With 30 properties, many entered as text (comma-separated lists or JSON), it is much faster to try settings live than to read about them.

Features and limitations

Features

- The page Home_Web shows a speedometer gauge and a Features panel with 30 input fields, one for every widget property.

- A non-persistable entity, d3Speedometer, has an attribute for every property, so nothing is stored in your database.

- The data source microflow DS_d3Speedometer opens the gauge with demo values: value 250, range 0–500, 5 segments with 5 labels, 400 px wide.

- A button opens the react-d3-speedometer documentation.

- The module role User is already set up for the page, the microflow and the entity.

- Bundled widgets: d3 Speedometer 1.0.1 and Tooltip 1.4.2, so no separate downloads are needed.

Limitations

- It is a demo: the values are not saved and are reset each time the page opens.

- Web profiles only; the d3 Speedometer widget does not support native mobile.

- The widget's own limitations apply. Values of 0 or below fall back to the defaults, so negative ranges are not possible, and value, minimum and maximum are whole numbers only.

Dependencies

- Mendix Studio Pro 10.24.17 or a later 10.24 version.

Installation

1. Download d3speedometer.mpk.

2. In Studio Pro, choose File > Import Module Package and select the file.

3. If Studio Pro reports that a widget package already exists (for example Tooltip), keep the newer version.

4. The module d3speedometer now appears in the App Explorer. Both widgets are added to your widgets folder.

Configuration

1. Security: open App > Security > User roles and give the user roles that should see the demo the module role d3speedometer.User. Without it, the page and its data source are not accessible.

2. Navigation: add the page d3speedometer.Home_Web to your navigation menu, or open it from a button on an existing page.

3. Run the app, log in with a user who has that role, and open the page.

4. Change any field in the Features panel and watch the gauge update.

Things to try:

- Segment colours: red,orange,green

- Custom segment stops: 0,300,450,500

- Value text: ${value} km/h

- Needle transition: easeElastic

Known bugs

None.

Report to https://github.com/bharathidas/d3_speedometer/issues

Frequently Asked Questions

Do I need to download the d3 Speedometer widget separately?

No. The sample includes widget 1.0.1.

The page says I have no access. What should I do?

Give your user role the module role d3speedometer.User under App > Security.

Are my changes saved?

No. The entity is non-persistable, so the page always starts with the demo values.

Can I use the sample page in production?

It is meant for learning and testing. Copy the approach into your own entity and page instead.

Can I remove the sample later?

Yes. Delete the d3speedometer module; the widget stays in your widgets folder and keeps working on your own pages.

Which Mendix version do I need?

Studio Pro 10.24.17 or a later 10.24 version. For Mendix 9.12.4, use the older sample app d3_speedometer.mpk from the GitHub release Version1.1.

Releases

Version: 1.0.1

Framework Version: 10.24.17

Release Notes:

## d3 Speedometer 1.0.1

Widget version: **1.0.1** (same as this GitHub release tag)

### Compatibility

- Mendix Studio Pro **10.24.17**

- Built with `@mendix/pluggable-widgets-tools` 10.16.0

- Rendering library react-d3-speedometer 2.2.1 (unchanged)

`Speedometer.xml` is byte-identical to 1.0.0, so existing widget instances keep their configuration. Source changes are lint-only; the package is now a minified production build (72 KB instead of 428 KB).

### Install

Download `mendix.Speedometer.mpk` from this release and import it into your Mendix app.

Sample module: download [`d3speedometer.mpk`](https://github.com/bharathidas/d3_speedometer/raw/Version1.0.1/d3speedometer.mpk) from the repository (Studio Pro 10.24.17, bundles widget 1.0.1), import it via *File > Import Module Package* and open `d3speedometer.Home_Web`.

### Known behavior (carried over from 1.0.0)

- Values of 0 or below are ignored for value, minValue, maxValue and the other numeric attributes, and the default is used instead. A negative minValue is therefore not possible.

- If customSegmentLabels is set while maxSegmentLabels is empty, the widget passes 0 and numeric segment labels render at `rotate(NaN)`, stacking at the center. Set maxSegmentLabels to the segment count to avoid this.

### Previous version (Mendix 9.12.4, widget 1.0.0)

- [Version1.0](https://github.com/bharathidas/d3_speedometer/releases/tag/Version1.0) — widget `mendix.Speedometer.mpk` 1.0.0

- [Version1.1](https://github.com/bharathidas/d3_speedometer/releases/tag/Version1.1) — sample app `d3_speedometer.mpk`

Version: 1.0.0

Framework Version: 9.24.12

Release Notes: Used for showing speedometer like gauge using d3. **Features** **General**: • **Value** - Make sure your value is between your minValue and maxValue. Default is 0 • **minValue** - Min Value. Default is 0 • **maxValue** - Max Value. Default is 1000 • **forceRender** - After initial rendering/mounting, when props change, only the value is changed and animated to maintain smooth visualization. But, if you want to force rerender the whole component like change in segments, colors, dimensions etc, you can use this option to force rerender of the whole component on props change. Default is true. • **currentValueText** - Should be provided a string which should have ${value} placeholder which will be replaced with current value. By default, current value is shown (formatted with valueFormat). For example, if current Value is 333 if you would like to show Current Value: 333, you should provide a string Current Value: ${value} • **currentValuePlaceholderStyle** - Should be provided a placeholder string which will be replaced with current value • **svgAriaLabel** - SVG aria-label property for Accessibility purposes. Default is "React d3 speedometer" **Dimensions**: • **Width** - diameter of the speedometer and the width of the svg element. Default is 300. • **Height** - height of the svg element. The height of the speedometer is always half the width since it is a semi-circle. Default is 300. • **dimension Unit** - Possible values - "em" , "ex" , "px" , "in" , "cm" , "mm" , "pt" , ,"pc". Default is "px" for width/height. • **fluidWidth** - If true takes the width of the parent component. Default is false. • **paddingHorizontal** - Provides right/left space for the label text. Takes a number (without explicit unit, unit will be taken from dimension Unit config which defaults to px). Helpful when using a bigger font size for label texts. Default is 0. • **paddingVertical** - Provides top/bottom space for the current value label text below the needle. Takes a number (without explicit unit, unit will be taken from dimensionUnit config which defaults to px). Helpful when using a bigger font size for label texts. Default is 0. • **ringWidth** - Width of the speedometer ring. Default is 60. **Segments**: • **segments** - Number of segments in the speedometer. • **maxSegmentLabels** - Limit the number of segment labels displayed. • **segmentColors** - Custom segment colors can be given with this option. Should be an array of valid color codes. If this option is given startColor and endColor options will be ignored. • **customSegmentStops** - Array of values starting at min value and ending at max value. This configuration is useful if you would like to split the segments at custom points or have unequal segments at preferred values. If the values do not begin and end with min and max value respectively, an error will be thrown. This configuration will override segments prop, since total number of segments will be length – 1 • **customSegmentLabels** - Takes an array of CustomSegmentLabel objects. Each object has the following keys for custom rendering of labels - text, fontSize, color, position: OUTSIDE/INSIDE. **Colors**: • **needleColor** - Should be a valid color code - colorname, hexadecimal name or rgb value. Default is "steelblue" • **startColor** - Should be a valid color code - colorname, hexadecimal name or rgb value. Default is "#FF471A" • **endColor** - Should be a valid color code - colorname, hexadecimal name or rgb value. Default is "#33CC33" **Needle**: • **needleTransition** - easeLinear, easeQuadIn, easeQuadOut, easeQuadInOut, easeCubicIn, easeCubicOut, easeCubicInOut, easePolyIn, easePolyOut, easePolyInOut, easeSinIn, easeSinOut, easeSinInOut, easeExpIn, easeExpOut, easeExpInOut, easeCircleIn, easeCircleOut, easeCircleInOut, easeBounceIn, easeBounceOut, easeBounceInOut, easeBackIn, easeBackOut, easeBackInOut, easeElasticIn, easeElasticOut, easeElasticInOut, easeElastic. Default is "easeQuadInOut" • **needleTransitionDuration** - Time in milliseconds. Default is 500. • **needleHeightRatio** - Control the height of the needle by giving a decimal between 0 and 1. Default height ratio is 0.9. **Labels**: • **textColor** - Should be a valid color code - color name, hexadecimal name or rgb value. Used for both showing the current value and the segment values. Default is #666 • **valueFormat** - should be a valid format for d3-format. By default, no formatter is used. You can use a valid d3 format identifier (for eg: d to convert float to integers), to format the values. Note: This formatter affects all the values (current value, segment values) displayed in the speedometer • **labelFontSize** - Font size for segment labels/legends. Default is 14px • **valueTextFontSize** - Font size for current value text. Default is 16px • **valueTextFontWeight** - Font weight for current value text. Any valid font weight identifier (500, bold etc.) can be used. Default is bold **Demo URL:** [https://github.com/bharathidas/d3_speedometer/issues](https://d3-speedometer-sandbox.mxapps.io/login.html?profile=Responsive) demo_administrator VKrsc19rRtwY **Dependencies:** • Mendix modeler 9.12.4. **Issues, suggestions and feature requests** [https://github.com/bharathidas/d3_speedometer/issues](https://github.com/bharathidas/d3_speedometer/issues) **Screenshots:** ![Screenshot_7](https://github.com/user-attachments/assets/e37ba10e-6e4b-433a-a180-276db364e5f7) ![Screenshot_8](https://github.com/user-attachments/assets/ec8d67d5-d62d-4a24-880b-0981a7c247b3)