Skip to content
React Liquid Gauge component
Branch: master
Clone or download
Latest commit c8b24bd Nov 28, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Update examples Nov 28, 2017
examples Update examples Nov 28, 2017
scripts Update bowersync Dec 29, 2016
src Add a transition polyfill to workaround the issue of `this.wave.attr(… Nov 28, 2017
test Initial commit Dec 7, 2016
.babelrc Initial commit Dec 7, 2016
.eslintrc Update .eslintrc Dec 12, 2016
.gitignore Initial commit Dec 7, 2016
.npmignore Initial commit Dec 7, 2016
.travis.yml Initial commit Dec 7, 2016
LICENSE Update LICENSE Dec 12, 2016
README.md Update README.md Dec 27, 2016
bower.json Update bower.json Apr 19, 2017
package.json v1.2.4 Nov 28, 2017

README.md

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 can’t perform that action at this time.