Skip to content

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.

License

Notifications You must be signed in to change notification settings

nathanssantos/evolution-graph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 | Repository

Vanilla JavaScript

Custom graph demo | Repository

Thanks to Abraham Hernandez for the programming-languages-logos, used in the above demos.

React Usage

Install

$ npm install evolution-graph

or

$ yarn add evolution-graph

Code Example

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 (
    <div className="app">
      <EvolutionGraph
        data={data}
        labels={labels}
        autoPlay={false}
        barDataGap={4}
        barLabelWidth={100}
        barThickness={20}
        barTransitionTopInterval={750}
        className="custom-evolution-graph"
        gap={10}
        order="desc"
        stepInterval={1500}
        showActionButtons
        timelineTrackColor="#cecece"
        timelineTrackFillColor="#0984e3"
        timelineMarkerColor="#cecece"
        timelineMarkerSize={14}
        timelineTrackThickness={4}
        getController={(controllerInstance) => {
          graph = controllerInstance;
        }}
        onChange={(currentStep) => {
          console.log(currentStep);
        }}
        renderBarValue={(value) => `${value}k`}
        renderGraphTitle={(title) => `Date - ${title}`}
      />
    </div>
  );
};

export default App;

Vanilla JavaScript Usage

Install

Download the latest package version and unpack it in your project.

Code Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./vendor/evolution-graph/src/css/styles.css" />
    <title>Evolution Graph</title>
  </head>
  <body>
    <div id="evolution-graph-example"></div>
    <script type="module">
      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");
    </script>
  </body>
</html>

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

About

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.

Topics

Resources

License

Stars

Watchers

Forks