Evolution-graph NPM

Examples of Usage

React

Vanilla JavaScript

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

React Usage

Install

$ npm install evolution-graph

$ 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

animated chart component css customizable dependency-free evolution evolution-chart evolution-graph front-end graph javascript js react react-component responsive vanilla vanilla-javascript vanilla-js

@everything-registry/sub-chunk-1624 @infinitebrahmanuniverse/nolb-evo

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago