Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nathanssantos/evolution-graph
Highly customizable, animated, responsive and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.
https://github.com/nathanssantos/evolution-graph
animated chart css customizable dependency-free evolution evolution-chart evolution-graph graph javascript js react responsive vanilla vanilla-javascript vanilla-js
Last synced: about 2 months ago
JSON representation
Highly customizable, animated, responsive and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.
- Host: GitHub
- URL: https://github.com/nathanssantos/evolution-graph
- Owner: nathanssantos
- License: mit
- Created: 2022-02-04T22:48:54.000Z (almost 3 years ago)
- Default Branch: develop
- Last Pushed: 2024-01-31T20:19:21.000Z (12 months ago)
- Last Synced: 2024-04-27T01:02:07.592Z (9 months ago)
- Topics: animated, chart, css, customizable, dependency-free, evolution, evolution-chart, evolution-graph, graph, javascript, js, react, responsive, vanilla, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/evolution-graph
- Size: 1.62 MB
- Stars: 43
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Evolution Graph
Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.## Examples of Usage
### React
[Custom graph demo](https://nathanssantos.github.io/evolution-graph-react-demo) | [Repository](https://github.com/nathanssantos/evolution-graph-react-demo)
### Vanilla JavaScript
[Custom graph demo](https://nathanssantos.github.io/evolution-graph-demo) | [Repository](https://github.com/nathanssantos/evolution-graph-demo)
Thanks to [Abraham Hernandez](https://github.com/abranhe) for the [programming-languages-logos](https://github.com/abranhe/programming-languages-logos), used in the above demos.
## React Usage
### Install
```shell
$ npm install evolution-graph
```or
```shell
$ yarn add evolution-graph
```### Code Example
```jsx
import React from "react";
import EvolutionGraph from "evolution-graph";
import "evolution-graph/src/css/styles.css";const data = [
{
label: "Python",
className: "python",
color: "#387EB8",
image: "./assets/images/python.svg",
values: [0, 3, 4, 7, 8, 9, 9, 10, 11, 12, 13, 15],
},
{
label: "Ruby",
className: "ruby",
color: "#E82609",
image: "./assets/images/ruby.svg",
values: [0, 2, 4, 5, 6, 8, 10, 13, 14, 17, 20, 21],
},
{
label: "JavaScript",
className: "javascript",
color: "#F0DB4F",
image: "./assets/images/javascript.svg",
values: [0, 2, 3, 6, 7, 10, 14, 20, 20, 24, 28, 32],
},
];const labels = [
"01/01/2021",
"01/02/2021",
"01/03/2021",
"01/04/2021",
"01/05/2021",
"01/06/2021",
"01/07/2021",
"01/08/2021",
"01/09/2021",
"01/10/2021",
"01/11/2021",
"01/12/2021",
];const App = () => {
let graph = null;// graph.goToNextStep()
// graph.goToPreviousStep()
// graph.pause()
// graph.play()
// graph.setCurrentStep(3)return (
{
graph = controllerInstance;
}}
onChange={(currentStep) => {
console.log(currentStep);
}}
renderBarValue={(value) => `${value}k`}
renderGraphTitle={(title) => `Date - ${title}`}
/>
);
};export default App;
```## Vanilla JavaScript Usage
### Install
[Download the latest package version](https://github.com/nathanssantos/evolution-graph/archive/refs/heads/main.zip) and unpack it in your project.
### Code Example
```html
Evolution Graph
import EvolutionGraph from "./vendor/evolution-graph/Controller.js";const data = [
{
label: "Python",
className: "python",
color: "#387EB8",
image: "./assets/images/python.svg",
values: [0, 3, 4, 7, 8, 9, 9, 10, 11, 12, 13, 15],
},
{
label: "Ruby",
className: "ruby",
color: "#E82609",
image: "./assets/images/ruby.svg",
values: [0, 2, 4, 5, 6, 8, 10, 13, 14, 17, 20, 21],
},
{
label: "JavaScript",
className: "javascript",
color: "#F0DB4F",
image: "./assets/images/javascript.svg",
values: [0, 2, 3, 6, 7, 10, 14, 20, 20, 24, 28, 32],
},
];const labels = [
"01/01/2021",
"01/02/2021",
"01/03/2021",
"01/04/2021",
"01/05/2021",
"01/06/2021",
"01/07/2021",
"01/08/2021",
"01/09/2021",
"01/10/2021",
"01/11/2021",
"01/12/2021",
];const graph = new EvolutionGraph({
data,
labels,
autoPlay: false,
barDataGap: 4,
barLabelWidth: 100,
barThickness: 20,
barTransitionTopInterval: 750,
className: "custom-evolution-graph",
gap: 10,
order: "desc",
showActionButtons: true,
stepInterval: 1500,
timelineTrackColor: "#cecece",
timelineTrackFillColor: "#0984e3",
timelineMarkerColor: "#cecece",
timelineMarkerSize: 14,
timelineTrackThickness: 4,
onChange: (currentStep) => {
console.log(currentStep);
},
renderBarValue: (value) => `${value}k`,
renderGraphTitle: (title) => `Date - ${title}`,
});// graph.goToNextStep()
// graph.goToPreviousStep()
// graph.pause()
// graph.play()
// graph.setCurrentStep(3)graph.render("#evolution-graph-example");
```
## Required Props
### **`data`**
**type:** _Array_
Array of objects, each representing one bar on the graph. Must have the same length as `labels`.
### **`labels`**
**type:** _Array_
Array of strings, each representing one label on the graph timeline. Must have the same length as `data`.
## Optional Props
### **`autoPlay`**
**type:** _Boolean_
**default:** `false`
Play the graph on component mount.
### **`barDataGap`**
**type:** _Number_
**default:** `4`
Gap between bar and bar data, in pixels.
### **`barLabelWidth`**
**type:** _Number_
**default:** `100`
Width of the bar labels, in pixels.
### **`barThickness`**
**type:** _Number_
**default:** `20`
Bar thickness, in pixels.
### **`barTransitionTopInterval`**
**type:** _Number_
**default:** `stepInterval / 2`
Bar transition top time, in milliseconds.
### **`className`**
**type:** _String_
**default:** `""`
Custom CSS class applied to the graph container.
### **`gap`**
**type:** _Number_
**default:** `"desc"`
Gap between graph bars, in pixels.
### **`order`**
**type:** _String_
**default:** `"desc"`
Graph bars order. Can be either "desc" or "asc".
### **`showActionButtons`**
**type:** _Boolean_
**default:** `true`
Action buttons visibility.
### **`stepInterval`**
**type:** _Number_
**default:** `1500`
Step transition time, in milliseconds.
### **`timelineTrackColor`**
**type:** _String_
**default:** `"#cecece"`
Background color of the timeline track.
### **`timelineTrackFillColor`**
**type:** _String_
**default:** `"#0984e3"`
Background color of the timeline track fill.
### **`timelineMarkerColor`**
**type:** _String_
**default:** `"#cecece"`
Background color of the timeline markers.
### **`timelineMarkerSize`**
**type:** _Number_
**default:** `14`
Width and height of the timeline markers, in pixels.
### **`timelineTrackThickness`**
**type:** _Number_
**default:** `4`
Height of the timeline track, in pixels.
## Callback Props
### **`getController`**
**default:** `(controller:Controller) => controller`
Returns the graph controller instance. **React prop only**.
### **`onChange`**
**default:** `(currentStep:Number) => currentStep`
Returns the current step when the graph changes.
### **`renderBarValue`**
**default:** `(value:Number) => value`
Returns the current bar value for handling.
### **`renderGraphTitle`**
**default:** `(title:String) => title`
Returns the current graph title for handling.
## API Methods
### **`goToNextStep`**
Go to the next step.
### **`goToPreviousStep`**
Go to the previous step.
### **`pause`**
Pause the graph if it is playing.
### **`play`**
Play step by step.
### **`render`**
**argument:** `selector`
**argument type:** _String_
Create and append the graph as a child of the element selected by the selector passed as an argument.
### **`setCurrentStep`**
**argument:** `step`
**argument type:** _Number_
Set the current step using the index passed as argument.
## To Do
- renderBarLabel callback prop
- playIcon prop
- pauseIcon prop
- previousIcon prop
- nextIcon prop
- manage labels exibition on window resize
- Global types declaration
- Tests
- showBarLabel prop
- showBarValue prop
- showBarImage prop
- onClickTimelineLabel prop
- onClickBar prop