react-liquid-gauge
React Liquid Gauge component. It's heavily inspired by D3 Liquid Fill Gauge and react-liquidchart.
Demo: http://trendmicro-frontend.github.io/react-liquid-gauge
The sample code can be found in the examples directory.
Installation
npm install --save react react-dom react-liquid-gauge
Usage
;;;;; state = value: 50 ; startColor = '#6495ed'; // cornflowerblue endColor = '#dc143c'; // crimson { const radius = 200; const interpolate = ; const fillColor = ; const gradientStops = key: '0%' stopColor: stopOpacity: 1 offset: '0%' key: '50%' stopColor: fillColor stopOpacity: 075 offset: '50%' key: '100%' stopColor: stopOpacity: 05 offset: '100%' ; return <div> <LiquidFillGauge style= margin: '0 auto' width=radius * 2 height=radius * 2 value=thisstatevalue percent="%" textSize=1 textOffsetX=0 textOffsetY=0 textRenderer= { const value = Math; const radius = Math; const textPixels = propstextSize * radius / 2; const valueStyle = fontSize: textPixels ; const percentStyle = fontSize: textPixels * 06 ; return <tspan> <tspan className="value" style=valueStyle>value</tspan> <tspan style=percentStyle>propspercent</tspan> </tspan> ; } riseAnimation waveAnimation waveFrequency=2 waveAmplitude=1 gradient gradientStops=gradientStops circleStyle= fill: fillColor waveStyle= fill: fillColor textStyle= fill: fontFamily: 'Arial' waveTextStyle= fill: fontFamily: 'Arial' onClick= { this; } /> <div style= margin: '20px auto' width: 120 > <button type="button" className="btn btn-default btn-block" onClick= { this; } > Refresh </button> </div> </div> ; } ReactDOM;
API
Properties
Name | Type | Default | Description |
---|---|---|---|
id | String | A unique identifier (ID) to identify the element. Defaults to a unique random string. | |
width | Number | 400 | The width of the component. |
height | Number | 400 | The height of the component. |
value | Number | 0 | The percent value (0-100). |
percent | String|Node | '%' | The percent string (%) or SVG text element. |
textSize | Number | 1 | The relative height of the text to display in the wave circle. A value of 1 equals 50% of the radius of the outer circle. |
textOffsetX | Number | 0 | |
textOffsetY | Number | 0 | |
textRenderer | Function(props) | Specifies a custom text renderer for rendering a percent value. | |
riseAnimation | Boolean | false | Controls if the wave should rise from 0 to it's full height, or start at it's full height. |
riseAnimationTime | Number | 2000 | The amount of time in milliseconds for the wave to rise from 0 to it's final height. |
riseAnimationEasing | String | 'cubicInOut' | d3-ease options. See the easing explorer for a visual demostration. |
riseAnimationOnProgress | Function({ value, container }) | Progress callback function. | |
riseAnimationOnComplete | Function({ value, container }) | Complete callback function. | |
waveAnimation | Boolean | false | Controls if the wave scrolls or is static. |
waveAnimationTime | Number | 2000 | The amount of time in milliseconds for a full wave to enter the wave circle. |
waveAnimationEasing | String | 'linear' | d3-ease options. See the easing explorer for a visual demostration. |
waveAmplitude | Number | 1 | The wave height as a percentage of the radius of the wave circle. |
waveFrequency | Number | 2 | The number of full waves per width of the wave circle. |
gradient | Boolean | false | Whether to apply linear gradients to fill the wave circle. |
gradientStops | Node|Array | An array of the <stop> SVG element defines the ramp of colors to use on a gradient, which is a child element to either the <linearGradient> or the <radialGradient> element. | |
onClick | Function(event) | onClick event handler. | |
innerRadius | Number | 0.9 | The radius of the inner circle. A value of 0.9 equals 90% of the radius of the outer circle. |
outerRadius | Number | 1.0 | The radius of the outer circle. A value of 1 equals 100% of the radius of the outer circle. |
margin | Number | 0.025 | The size of the gap between the outer circle and wave circle as a percentage of the radius of the outer circle. A value of 0.025 equals 2.5% of the radius of the outer circle. |
circleStyle | Object |
{ fill: 'rgb(23, 139, 202)' } |
The style of the outer circle. |
waveStyle | Object |
{ fill: 'rgb(23, 139, 202)' } |
The style of the fill wave. |
textStyle | Object |
{ fill: 'rgb(0, 0, 0)' } |
The style of the text when the wave does not overlap it. |
waveTextStyle | Object |
{ fill: 'rgb(255, 255, 255)' } |
The style of the text when the wave overlaps it. |
License
MIT