react-liquid-gauge

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-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 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={400}
                    height={400}
                    value={this.state.value}
                    textOffsetX={0}
                    textOffsetY={0}
                    riseAnimation
                    waveAnimation
                    waveFrequency={2}
                    waveAmplitude={1}
                    gradient
                    gradientStops={gradientStops}
                    circleStyle={{ fill: fillColor }}
                    waveStyle={{ fill: fillColor }}
                    textStyle={{ fill: 'rgb(0, 0, 0)' }}
                    waveTextStyle={{ fill: 'rgb(255, 255, 255)' }}
                    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
width	Number	400	The width of the component.
height	Number	400	The height of the component.
value	Number	0	The percentage value (0-100).
percentageSymbol	String	'%'	The percentage symbol (%).
textSize	Number	1	The relative height of the text to display in the wave circle. 1 = 50%.
textOffsetX	Number	0
textOffsetY	Number	0
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		Progress callback function.
riseAnimationOnComplete	Function		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		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 fill and stroke of the outer circle.
waveStyle	Object	{ fill: 'rgb(23, 139, 202)' }	The fill and stroke of the fill wave.
textStyle	Object	{ fill: 'rgb(0, 0, 0)' }	The fill and stroke of the value text when the wave does not overlap it.
waveTextStyle	Object	{ fill: 'rgb(255, 255, 255)' }	The fill and stroke of the value text when the wave overlaps it.

License

MIT