Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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