Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
react-liquidchart
Advanced tools
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.
npm install react-liquidchart
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'));
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.
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.
Name | Type | Default | Description |
---|---|---|---|
responsive | boolean | true | Rerenders the chart on screen resize |
gradient | boolean | false | If 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 |
This is the main element that renders all the visable elements in the chart along with one defs for the clipPath.
Name | Type | Default | Description |
---|---|---|---|
Value | number | 65 | The value |
animate | bool | false | If true then the chart is animated |
animateWaves | bool | false | if true then the waves will loop between the liquid radius and 0 forever, still a minor bug in this. |
outerRadius | number | 0.9 | This is the outerRadius of the chart where 1 would be 100% of the radius and 0 would be 0% of the radius.. |
innerRadius | number | 0.8 | The innerwidth of the outerpath surronding the liquid, again 0.8 would be 80% of the radius. |
margin | number | 0.025 | The margin between the outer path and the liquid, here 0.025 would be 2.5% |
ease | function | d3.ease.easeCubicInOut | easing function for the animation will change this to string eventually. |
animationTime | number | 2000 | milliseconds for animation length |
amplitude | number | 2 | The Amplitude X * sine(frequency) part of the formula |
frequency | number | 4 | Still 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. |
waveScaleLimit | bool | true | This is in the original, this will create a scale that limits the wave height close to 0 or 100 |
outerArcStyle | shape | { fill: 'rgb(23,139,202)'} | The style of the outerarc fill and stroke |
liquid | shape | { fill: 'rgb(23, 139, 202)'} | The style of the liquid, fill and stroke |
liquidNumber | shape | {fill: 'rgb(164, 219, 248)'} | The style of the number that is in the liquid, fill and stroke |
number | shape | {fill: 'rgb(4, 86, 129)',} | The style of the number that is not in the liquid, fill and stroke |
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.
Name | Type | Default | Description |
---|---|---|---|
x1 | number | 0 | The X start coordinate |
x2 | number | 100 | The X end coordinate |
y1 | number | 0 | The Y start coordinate |
y2 | number | 0 | The Y end coordinate |
This software was available initially under the BSD-3-Clause and it still is.
FAQs
A Reusable liquid chart made with d3 and react
We found that react-liquidchart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.