Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-liquid-gauge
React Liquid Gauge component
https://github.com/trendmicro-frontend/react-liquid-gauge
Last synced: 27 days ago
JSON representation
React Liquid Gauge component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-liquid-gauge
- Owner: trendmicro-frontend
- License: mit
- Created: 2016-12-07T09:32:20.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-09-22T14:08:29.000Z (about 1 year ago)
- Last Synced: 2024-10-18T20:58:25.494Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-liquid-gauge
- Size: 1.37 MB
- Stars: 97
- Watchers: 20
- Forks: 19
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-liquid-gauge - React Liquid Gauge component ([demo](https://trendmicro-frontend.github.io/react-liquid-gauge/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-liquid-gauge - React Liquid Gauge component ([demo](https://trendmicro-frontend.github.io/react-liquid-gauge/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-liquid-gauge - React Liquid Gauge component ([demo](https://trendmicro-frontend.github.io/react-liquid-gauge/)). (Trend Micro / React Components)
README
# react-liquid-gauge [](https://travis-ci.org/trendmicro-frontend/react-liquid-gauge) [](https://coveralls.io/github/trendmicro-frontend/react-liquid-gauge?branch=master)
[](https://www.npmjs.com/package/react-liquid-gauge)
React Liquid Gauge component. It's heavily inspired by [D3 Liquid Fill Gauge](http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) and [react-liquidchart](https://github.com/arnthor3/react-liquidchart).
[](http://trendmicro-frontend.github.io/react-liquid-gauge)
Demo: http://trendmicro-frontend.github.io/react-liquid-gauge
The [sample code](https://github.com/trendmicro-frontend/react-liquid-gauge/blob/master/examples/index.jsx) can be found in the [examples](https://github.com/trendmicro-frontend/react-liquid-gauge/tree/master/examples) directory.
## Installation
```
npm install --save react react-dom react-liquid-gauge
```
### Usage
```js
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 (
{
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 (
{value}
{props.percent}
);
}}
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 });
}}
/>
{
this.setState({ value: Math.random() * 100 });
}}
>
Refresh
);
}
}
ReactDOM.render(
,
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