{"id":22485131,"url":"https://github.com/nathanssantos/evolution-graph","last_synced_at":"2025-12-30T10:02:04.077Z","repository":{"id":43287207,"uuid":"455719011","full_name":"nathanssantos/evolution-graph","owner":"nathanssantos","description":"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.","archived":false,"fork":false,"pushed_at":"2024-01-31T20:19:21.000Z","size":1699,"stargazers_count":46,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-07-11T14:42:13.883Z","etag":null,"topics":["animated","chart","css","customizable","dependency-free","evolution","evolution-chart","evolution-graph","graph","javascript","js","react","responsive","vanilla","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/evolution-graph","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathanssantos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-04T22:48:54.000Z","updated_at":"2025-04-02T11:24:24.000Z","dependencies_parsed_at":"2023-01-20T04:33:33.937Z","dependency_job_id":"a9643fca-8d76-4589-a38a-8853eea66ed3","html_url":"https://github.com/nathanssantos/evolution-graph","commit_stats":{"total_commits":147,"total_committers":4,"mean_commits":36.75,"dds":0.5578231292517006,"last_synced_commit":"9eb3ada2eabc1f9008c3eeec1c8bcb4868354aeb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nathanssantos/evolution-graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanssantos%2Fevolution-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanssantos%2Fevolution-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanssantos%2Fevolution-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanssantos%2Fevolution-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathanssantos","download_url":"https://codeload.github.com/nathanssantos/evolution-graph/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanssantos%2Fevolution-graph/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268432796,"owners_count":24249621,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","chart","css","customizable","dependency-free","evolution","evolution-chart","evolution-graph","graph","javascript","js","react","responsive","vanilla","vanilla-javascript","vanilla-js"],"created_at":"2024-12-06T17:12:03.959Z","updated_at":"2025-12-30T10:02:03.990Z","avatar_url":"https://github.com/nathanssantos.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eEvolution Graph\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/evolution-graph\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/evolution-graph.svg\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Made%20with-JavaScript-f0db4f.svg\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nHighly 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.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nathanssantos.github.io/evolution-graph-react-demo/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/nathanssantos/evolution-graph-demo/main/assets/demo.gif\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Examples of Usage\n\n### React\n\n[Custom graph demo](https://nathanssantos.github.io/evolution-graph-react-demo) | [Repository](https://github.com/nathanssantos/evolution-graph-react-demo)\n\n### Vanilla JavaScript\n\n[Custom graph demo](https://nathanssantos.github.io/evolution-graph-demo) | [Repository](https://github.com/nathanssantos/evolution-graph-demo)\n\nThanks to [Abraham Hernandez](https://github.com/abranhe) for the [programming-languages-logos](https://github.com/abranhe/programming-languages-logos), used in the above demos.\n\n## React Usage\n\n### Install\n\n```shell\n$ npm install evolution-graph\n```\n\nor\n\n```shell\n$ yarn add evolution-graph\n```\n\n### Code Example\n\n```jsx\nimport React from \"react\";\nimport EvolutionGraph from \"evolution-graph\";\nimport \"evolution-graph/src/css/styles.css\";\n\nconst data = [\n  {\n    label: \"Python\",\n    className: \"python\",\n    color: \"#387EB8\",\n    image: \"./assets/images/python.svg\",\n    values: [0, 3, 4, 7, 8, 9, 9, 10, 11, 12, 13, 15],\n  },\n  {\n    label: \"Ruby\",\n    className: \"ruby\",\n    color: \"#E82609\",\n    image: \"./assets/images/ruby.svg\",\n    values: [0, 2, 4, 5, 6, 8, 10, 13, 14, 17, 20, 21],\n  },\n  {\n    label: \"JavaScript\",\n    className: \"javascript\",\n    color: \"#F0DB4F\",\n    image: \"./assets/images/javascript.svg\",\n    values: [0, 2, 3, 6, 7, 10, 14, 20, 20, 24, 28, 32],\n  },\n];\n\nconst labels = [\n  \"01/01/2021\",\n  \"01/02/2021\",\n  \"01/03/2021\",\n  \"01/04/2021\",\n  \"01/05/2021\",\n  \"01/06/2021\",\n  \"01/07/2021\",\n  \"01/08/2021\",\n  \"01/09/2021\",\n  \"01/10/2021\",\n  \"01/11/2021\",\n  \"01/12/2021\",\n];\n\nconst App = () =\u003e {\n  let graph = null;\n\n  // graph.goToNextStep()\n  // graph.goToPreviousStep()\n  // graph.pause()\n  // graph.play()\n  // graph.setCurrentStep(3)\n\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cEvolutionGraph\n        data={data}\n        labels={labels}\n        autoPlay={false}\n        barDataGap={4}\n        barLabelWidth={100}\n        barThickness={20}\n        barTransitionTopInterval={750}\n        className=\"custom-evolution-graph\"\n        gap={10}\n        order=\"desc\"\n        stepInterval={1500}\n        showActionButtons\n        timelineTrackColor=\"#cecece\"\n        timelineTrackFillColor=\"#0984e3\"\n        timelineMarkerColor=\"#cecece\"\n        timelineMarkerSize={14}\n        timelineTrackThickness={4}\n        getController={(controllerInstance) =\u003e {\n          graph = controllerInstance;\n        }}\n        onChange={(currentStep) =\u003e {\n          console.log(currentStep);\n        }}\n        renderBarValue={(value) =\u003e `${value}k`}\n        renderGraphTitle={(title) =\u003e `Date - ${title}`}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Vanilla JavaScript Usage\n\n### Install\n\n[Download the latest package version](https://github.com/nathanssantos/evolution-graph/archive/refs/heads/main.zip) and unpack it in your project.\n\n### Code Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003clink rel=\"stylesheet\" href=\"./vendor/evolution-graph/src/css/styles.css\" /\u003e\n    \u003ctitle\u003eEvolution Graph\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"evolution-graph-example\"\u003e\u003c/div\u003e\n    \u003cscript type=\"module\"\u003e\n      import EvolutionGraph from \"./vendor/evolution-graph/Controller.js\";\n\n      const data = [\n        {\n          label: \"Python\",\n          className: \"python\",\n          color: \"#387EB8\",\n          image: \"./assets/images/python.svg\",\n          values: [0, 3, 4, 7, 8, 9, 9, 10, 11, 12, 13, 15],\n        },\n        {\n          label: \"Ruby\",\n          className: \"ruby\",\n          color: \"#E82609\",\n          image: \"./assets/images/ruby.svg\",\n          values: [0, 2, 4, 5, 6, 8, 10, 13, 14, 17, 20, 21],\n        },\n        {\n          label: \"JavaScript\",\n          className: \"javascript\",\n          color: \"#F0DB4F\",\n          image: \"./assets/images/javascript.svg\",\n          values: [0, 2, 3, 6, 7, 10, 14, 20, 20, 24, 28, 32],\n        },\n      ];\n\n      const labels = [\n        \"01/01/2021\",\n        \"01/02/2021\",\n        \"01/03/2021\",\n        \"01/04/2021\",\n        \"01/05/2021\",\n        \"01/06/2021\",\n        \"01/07/2021\",\n        \"01/08/2021\",\n        \"01/09/2021\",\n        \"01/10/2021\",\n        \"01/11/2021\",\n        \"01/12/2021\",\n      ];\n\n      const graph = new EvolutionGraph({\n        data,\n        labels,\n        autoPlay: false,\n        barDataGap: 4,\n        barLabelWidth: 100,\n        barThickness: 20,\n        barTransitionTopInterval: 750,\n        className: \"custom-evolution-graph\",\n        gap: 10,\n        order: \"desc\",\n        showActionButtons: true,\n        stepInterval: 1500,\n        timelineTrackColor: \"#cecece\",\n        timelineTrackFillColor: \"#0984e3\",\n        timelineMarkerColor: \"#cecece\",\n        timelineMarkerSize: 14,\n        timelineTrackThickness: 4,\n        onChange: (currentStep) =\u003e {\n          console.log(currentStep);\n        },\n        renderBarValue: (value) =\u003e `${value}k`,\n        renderGraphTitle: (title) =\u003e `Date - ${title}`,\n      });\n\n      // graph.goToNextStep()\n      // graph.goToPreviousStep()\n      // graph.pause()\n      // graph.play()\n      // graph.setCurrentStep(3)\n\n      graph.render(\"#evolution-graph-example\");\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Required Props\n\n### **`data`**\n\n**type:** _Array_\n\nArray of objects, each representing one bar on the graph. Must have the same length as `labels`.\n\n### **`labels`**\n\n**type:** _Array_\n\nArray of strings, each representing one label on the graph timeline. Must have the same length as `data`.\n\n## Optional Props\n\n### **`autoPlay`**\n\n**type:** _Boolean_\n\n**default:** `false`\n\nPlay the graph on component mount.\n\n### **`barDataGap`**\n\n**type:** _Number_\n\n**default:** `4`\n\nGap between bar and bar data, in pixels.\n\n### **`barLabelWidth`**\n\n**type:** _Number_\n\n**default:** `100`\n\nWidth of the bar labels, in pixels.\n\n### **`barThickness`**\n\n**type:** _Number_\n\n**default:** `20`\n\nBar thickness, in pixels.\n\n### **`barTransitionTopInterval`**\n\n**type:** _Number_\n\n**default:** `stepInterval / 2`\n\nBar transition top time, in milliseconds.\n\n### **`className`**\n\n**type:** _String_\n\n**default:** `\"\"`\n\nCustom CSS class applied to the graph container.\n\n### **`gap`**\n\n**type:** _Number_\n\n**default:** `\"desc\"`\n\nGap between graph bars, in pixels.\n\n### **`order`**\n\n**type:** _String_\n\n**default:** `\"desc\"`\n\nGraph bars order. Can be either \"desc\" or \"asc\".\n\n### **`showActionButtons`**\n\n**type:** _Boolean_\n\n**default:** `true`\n\nAction buttons visibility.\n\n### **`stepInterval`**\n\n**type:** _Number_\n\n**default:** `1500`\n\nStep transition time, in milliseconds.\n\n### **`timelineTrackColor`**\n\n**type:** _String_\n\n**default:** `\"#cecece\"`\n\nBackground color of the timeline track.\n\n### **`timelineTrackFillColor`**\n\n**type:** _String_\n\n**default:** `\"#0984e3\"`\n\nBackground color of the timeline track fill.\n\n### **`timelineMarkerColor`**\n\n**type:** _String_\n\n**default:** `\"#cecece\"`\n\nBackground color of the timeline markers.\n\n### **`timelineMarkerSize`**\n\n**type:** _Number_\n\n**default:** `14`\n\nWidth and height of the timeline markers, in pixels.\n\n### **`timelineTrackThickness`**\n\n**type:** _Number_\n\n**default:** `4`\n\nHeight of the timeline track, in pixels.\n\n## Callback Props\n\n### **`getController`**\n\n**default:** `(controller:Controller) =\u003e controller`\n\nReturns the graph controller instance. **React prop only**.\n\n### **`onChange`**\n\n**default:** `(currentStep:Number) =\u003e currentStep`\n\nReturns the current step when the graph changes.\n\n### **`renderBarValue`**\n\n**default:** `(value:Number) =\u003e value`\n\nReturns the current bar value for handling.\n\n### **`renderGraphTitle`**\n\n**default:** `(title:String) =\u003e title`\n\nReturns the current graph title for handling.\n\n## API Methods\n\n### **`goToNextStep`**\n\nGo to the next step.\n\n### **`goToPreviousStep`**\n\nGo to the previous step.\n\n### **`pause`**\n\nPause the graph if it is playing.\n\n### **`play`**\n\nPlay step by step.\n\n### **`render`**\n\n**argument:** `selector`\n\n**argument type:** _String_\n\nCreate and append the graph as a child of the element selected by the selector passed as an argument.\n\n### **`setCurrentStep`**\n\n**argument:** `step`\n\n**argument type:** _Number_\n\nSet the current step using the index passed as argument.\n\n## To Do\n\n- renderBarLabel callback prop\n- playIcon prop\n- pauseIcon prop\n- previousIcon prop\n- nextIcon prop\n- manage labels exibition on window resize\n- Global types declaration\n- Tests\n- showBarLabel prop\n- showBarValue prop\n- showBarImage prop\n- onClickTimelineLabel prop\n- onClickBar prop\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanssantos%2Fevolution-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanssantos%2Fevolution-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanssantos%2Fevolution-graph/lists"}