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-dom react-liquid-gauge

Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import LiquidFillGauge from 'react-liquid-gauge';

const rgbcolor = (value) => {
    const startColor = {
        red: 0x64,
        green: 0x95,
        blue: 0xed
    };
    const endColor = {
        red: 0xdc,
        green: 0x14,
        blue: 0x3c
    };

    const diffRed = endColor.red - startColor.red;
    const diffGreen = endColor.green - startColor.green;
    const diffBlue = endColor.blue - startColor.blue;
    const percentFade = value / 100;

    return [
        Math.floor(diffRed * percentFade) + startColor.red,
        Math.floor(diffGreen * percentFade) + startColor.green,
        Math.floor(diffBlue * percentFade) + startColor.blue
    ];
};

class App extends Component {
    state = {
        value: Math.round(Math.random() * 100)
    };

    render() {
        const fillColor = `rgb(${rgbcolor(this.state.value).join(',')})`;

        return (
            <div>
                <LiquidFillGauge
                    animate
                    onAnimationProgress={(options) => {
                        const { value, outerArc, liquid } = options;
                        const fillColor = `rgb(${rgbcolor(value).join(',')})`;
                        outerArc.attr('fill', fillColor);
                        liquid.attr('fill', fillColor);
                    }}
                    outerArcStyle={{
                        fill: fillColor
                    }}
                    liquidStyle={{
                        fill: fillColor
                    }}
                    liquidNumberStyle={{
                        fill: 'rgb(255, 255, 255)'
                    }}
                    numberStyle={{
                        fill: 'rgb(0, 0, 0)'
                    }}
                    width={240}
                    height={240}
                    style={{ margin: '0 auto' }}
                    value={this.state.value}
                    textOffsetX={0}
                    textOffsetY={0}
                    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
value	Number	100
animate	Boolean	false
onAnimationProgress	Function(options)
onAnimationEnd	Function(options)
onClick	Function(event)
outerRadius	Number	1.0
innerRadius	Number	0.9
margin	Number	0.025
ease	Function
animationTime	Number	2000
amplitude	Number	1
frequency	Number	5
outerArcStyle	Shape	{ fill: 'rgb(23, 139, 202)' }
liquidStyle	Shape	{ fill: 'rgb(23, 139, 202)' }
liquidNumberStyle	Shape	{ fill: 'rgb(164, 219, 248)' }
numberStyle	Shape	{ fill: 'rgb(4, 86, 129)' }
offsetX	Number	1
offsetY	Number	1
textSize	Number	1
textOffsetX	Number	0
textOffsetY	Number	0
percentageSymbol	String	%