New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

react-liquidchart

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-liquidchart

A Reusable liquid chart made with d3 and react


Version published
Maintainers
1
Created

React-liquidchart

A Nice looking liquid chart done with d3 and react, based off http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

I will put up an example page when I am finished with all the graph types that I want to do and use - about 4 -5 more.

Install from NPM

npm install react-liquidchart

Usage

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

class ChartLiquid 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: '100%',
          height: '500px',
        }}
      >
        <Chart
          responsive
          gradient="liquid"
        >
          <Liquid
            animate
            animateWaves
            onClick={this.onClick}
            amplitude={4}
            value={this.state.value}

          />
          <Gradient />
        </Chart>
      </div>
    );
  }
}
render(<ChartLiquid />, document.getElementById('app'));

Components

This chart is broken down into components but I will make a easy to use single component that will make it easier to use, later on.

Chart

This is the container that renders the SVG element and the children. It can keep the chart responsive so you dont have to worry about the width and heigth if you have a responsive layout.

Chart PropTypes

NameTypeDefaultDescription
responsivebooleantrueRerenders the chart on screen resize
gradientbooleanfalseIf you want a more watery liquid you can add a lineargradient but you have to set this value to true and also add the component

Liquid

This is the main element that renders all the visable elements in the chart along with one defs for the clipPath.

Liquid PropTypes

NameTypeDefaultDescription
Valuenumber65The value
animateboolfalseIf true then the chart is animated
animateWavesboolfalseif true then the waves will loop between the liquid radius and 0 forever, still a minor bug in this.
outerRadiusnumber0.9This is the outerRadius of the chart where 1 would be 100% of the radius and 0 would be 0% of the radius..
innerRadiusnumber0.8The innerwidth of the outerpath surronding the liquid, again 0.8 would be 80% of the radius.
marginnumber0.025The margin between the outer path and the liquid, here 0.025 would be 2.5%
easefunctiond3.ease.easeCubicInOuteasing function for the animation will change this to string eventually.
animationTimenumber2000milliseconds for animation length
amplitudenumber2The Amplitude X * sine(frequency) part of the formula
frequencynumber4Still have to fix this one, this is actually the inverse of frequency it's sine(x/freq) so the higher the number the smoother the wave.
waveScaleLimitbooltrueThis is in the original, this will create a scale that limits the wave height close to 0 or 100
outerArcStyleshape{ fill: 'rgb(23,139,202)'}The style of the outerarc fill and stroke
liquidshape{ fill: 'rgb(23, 139, 202)'}The style of the liquid, fill and stroke
liquidNumbershape{fill: 'rgb(164, 219, 248)'}The style of the number that is in the liquid, fill and stroke
numbershape{fill: 'rgb(4, 86, 129)',}The style of the number that is not in the liquid, fill and stroke

Gradient

This component is nothing more than an ultra thin wrapper around a linearGradient defs.

It takes in stop to create the gradient effect.

But by default it uses shades of the liquid.fill color to create a ultra simple gradient.

Gradient PropTypes

NameTypeDefaultDescription
x1number0The X start coordinate
x2number100The X end coordinate
y1number0The Y start coordinate
y2number0The Y end coordinate

TODO

  1. Write tests

This software was available initially under the BSD-3-Clause and it still is.

Keywords

FAQs

Package last updated on 13 Dec 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts