react-liquidchart

React-Liquidchart

A Nice looking liquid chart done with d3 and react

Usage

Download the package from npm

npm i -S react-liquidchart

import React, { Component } from 'react';
import { render } from 'react-dom';
import Liquid from 'react-liquidchart';

class Chart extends Component {
  constructor() {
    super();
    this.onClick = this.onClick.bind(this);
    this.state = {
      value: Math.random() * 100,
    };
  }
  onClick() {
    this.setState({ value: Math.random() * 100 });
  }

  render() {
    return (
      <div
        style={{
          width: '800px',
          height: '350px',
          marginLeft: 'auto',
          marginRight: 'auto',
        }}
      >
        <Liquid
          onClick={this.onClick}
          value={this.state.value}
          animate
        />
      </div>
    );
  }
}
render(<Chart />, document.getElementById('app'));

PropTypes

value : number

a percentage from 0 to 100

animate : boolean

if true then animate

animateWaves : boolean

if true then animate waves

onEnd : function

A function that is called when animation is done

outerArcStyle : Object { fill: string, stroke: string }

A fill and stroke for the outer arc, defaults to fill: 'rgb(23, 139, 202)'

liquid : Object { fill: string, stroke: string }

A fill and stroke for the liquid, defaults to fill: 'rgb(23, 139, 202)'

liquidNumber : Object { fill: string, stroke: string }

A fill and stroke for the part of the number that is in liquid defaults to fill: 'rgb(164, 219, 248)',

number : Object { fill: string, stroke: string }

A fill and stroke for the 'dry' part of the number default to fill: 'rgb(4, 86, 129)'

amplitude : number

the wave height

frequency : number

The inverse of frequency actually, the higher the number the smother the wave

responsive : boolean

Makes the chart listen to changes in screen size and resize the chart on screen resize

fontSize : string

The font size attribute for the number

smallFontSize : string

font size for the percentage sign

Development

Testing done with Jest

npm run test

Run the webpack dev server

npm run start

#Credits This is a react remake and slightly altered version of http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

So a big thanks to Chris Bratton for making the original