node package manager

react-d3-speedometer

react-d3-speedometer

react-d3-speedometer is a react component for showing speedometer like gauge using d3.

Build Status

NPM

react-d3-speedometer

Usage:

NPM: npm install --save react-d3-speedometer

Yarn: yarn add react-d3-speedometer

// import the component 
import ReactSpeedometer from "react-d3-speedometer";
// and just use it 
<ReactSpeedometer />

Configuration Options:

prop type default comments
value number 0 Make sure your value is between your minValue and maxValue
minValue number 0
maxValue number 1000
segments number 5 Number of segments in the speedometer
width number 300 diameter of the speedometer and the width of the svg element
height number 300 height of the svg element. Height of the speedometer is always half the width since it is a semi-circle. For fluid width, please refere to fluidWidth config
fluidWidth boolean false If true takes the width of the parent component. See Live Example for more details
needleColor string steelblue Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
startColor string #FF471A Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
endColor string #33CC33 Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
needleTransition string easeQuadInOut d3-easing-identifiers - 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
needleTransitionDuration number 500 Time in milliseconds.
ringWidth number 60 Width of the speedometer ring.
textColor string #666 Should be a valid color code - colorname, hexadecimal name or rgb value. Used for both showing the current value and the segment values

Examples

You can view Live Examples here

Default with no config - Live Example
<ReactSpeedometer />
With configurations - Live Example
<ReactSpeedometer
    maxValue={500}
    value={473}
    needleColor="red"
    startColor="green"
    segments={10}
    endColor="blue"
/>
Fluid Width Example - Live Example
// Speedometer will take the width of the parent div (500) 
// any width passed will be ignored 
<div style={{
    width: "500px",
    height: "300px",
    background: "#EFEFEF"
}}>
    <ReactSpeedometer
        fluidWidth={true}
        minValue={100}
        maxValue={500}
        value={473}
        needleColor="steelblue"
    />
</div>
Needle Transition Example - Live Example
<ReactSpeedometer
    value={333}
    needleColor="steelblue"
    needleTransitionDuration={4000}
    needleTransition="easeElastic"
/>

This is the needle transition used in the sample image


Todos:

  • Test coverage (with enzyme)
  • Convert entire code base to ES6

Tests:

react-d3-speedometer comes with a test suite using enzyme.

// navigate to root folder and run 
npm test
// or 'yarn test' if you are using yarn 

Changelog:

View Changelog


Credits:

react-d3-speedometer was started as a react port of the following d3 snippet - http://bl.ocks.org/msqr/3202712. Component template bootstrapped with React CDK. Also, many thanks to d3 and react ecosystem contributors.


License:

MIT