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
import { color } from 'd3-color'; import { interpolateRgb } from 'd3-interpolate'; import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import LiquidFillGauge from 'react-liquid-gauge'; class App extends Component { state = { value: 50 }; startColor = '#6495ed'; // cornflowerblue endColor = '#dc143c'; // crimson render() { const radius = 200; const interpolate = interpolateRgb(this.startColor, this.endColor); const fillColor = interpolate(this.state.value / 100); const gradientStops = [ { key: '0%', stopColor: color(fillColor).darker(0.5).toString(), stopOpacity: 1, offset: '0%' }, { key: '50%', stopColor: fillColor, stopOpacity: 0.75, offset: '50%' }, { key: '100%', stopColor: color(fillColor).brighter(0.5).toString(), stopOpacity: 0.5, offset: '100%' } ]; return ( <div> <LiquidFillGauge style={{ margin: '0 auto' }} width={radius * 2} height={radius * 2} value={this.state.value} percent="%" textSize={1} textOffsetX={0} textOffsetY={0} textRenderer={(props) => { const value = Math.round(props.value); const radius = Math.min(props.height / 2, props.width / 2); const textPixels = (props.textSize * radius / 2); const valueStyle = { fontSize: textPixels }; const percentStyle = { fontSize: textPixels * 0.6 }; return ( <tspan> <tspan className="value" style={valueStyle}>{value}</tspan> <tspan style={percentStyle}>{props.percent}</tspan> </tspan> ); }} riseAnimation waveAnimation waveFrequency={2} waveAmplitude={1} gradient gradientStops={gradientStops} circleStyle={{ fill: fillColor }} waveStyle={{ fill: fillColor }} textStyle={{ fill: color('#444').toString(), fontFamily: 'Arial' }} waveTextStyle={{ fill: color('#fff').toString(), fontFamily: 'Arial' }} onClick={() => { this.setState({ value: Math.random() * 100 }); }} /> <div style={{ margin: '20px auto', width: 120 }} > <button type="button" className="btn btn-default btn-block" onClick={() => { this.setState({ value: Math.random() * 100 }); }} > Refresh </button> </div> </div> ); } } ReactDOM.render( <App />, document.getElementById('container') );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
