🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React Liquid Gauge component heavily inspired by D3 Liquid Fill Gauge and react-liquidchart.

Chart_Graph React

Documentation

react-liquid-gauge build status Coverage Status

NPM

React Liquid Gauge component. It's heavily inspired by D3 Liquid Fill Gauge and react-liquidchart.

react-liquid-gauge

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


You May Also Like