{"id":20762036,"url":"https://github.com/donkeyclip/motorcortex-graphs","last_synced_at":"2025-07-05T00:34:22.460Z","repository":{"id":37338303,"uuid":"324958641","full_name":"donkeyclip/motorcortex-graphs","owner":"donkeyclip","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-14T04:59:18.000Z","size":12809,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T05:37:07.541Z","etag":null,"topics":["graphs","motorcortex","motorcortex-plugin"],"latest_commit_sha":null,"homepage":"","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/donkeyclip.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2020-12-28T08:43:30.000Z","updated_at":"2023-01-31T18:39:50.000Z","dependencies_parsed_at":"2023-02-18T22:01:09.834Z","dependency_job_id":"db9edebb-a9f5-4095-9e85-ed525c7ef249","html_url":"https://github.com/donkeyclip/motorcortex-graphs","commit_stats":{"total_commits":870,"total_committers":17,"mean_commits":51.1764705882353,"dds":0.4482758620689655,"last_synced_commit":"3fc8042cedef32204b7f674d63cf131abad47e35"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-graphs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-graphs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-graphs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donkeyclip%2Fmotorcortex-graphs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donkeyclip","download_url":"https://codeload.github.com/donkeyclip/motorcortex-graphs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251653758,"owners_count":21622184,"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","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":["graphs","motorcortex","motorcortex-plugin"],"created_at":"2024-11-17T10:28:46.916Z","updated_at":"2025-04-30T06:29:46.173Z","avatar_url":"https://github.com/donkeyclip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MotorCortex-Graphs\n\n**Table of Contents**\n\n- [MotorCortex-Graphs](#motorcortex-graphs)\n  - [Demo](#demo)\n- [Intro / Features](#intro--features)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Importing and Loading](#importing-and-loading)\n- [Creating Incidents](#creating-incidents)\n  - [BarChartSimple](#barchartsimple)\n  - [LineGraph](#linegraph)\n  - [PieChart](#piechart)\n  - [ProgressBar](#progressbar)\n- [Adding Incidents in your clip](#adding-incidents-in-your-clip)\n- [Contributing](#contributing)\n- [License](#license)\n- [Sponsored by](#sponsored-by)\n\n## Demo\n\n[Check it out here](https://donkeyclip.github.io/motorcortex-graphs/demo/)\n\n# Intro / Features\n\nUsing MotorCortex Graphs you can create fully configurable animations of graphs using real data. It allows you to control animation timing, coloring, sizing and font stylizing.\n\nThis Plugin exposes five Incidents:\n\n- BarChartSimple\n- LineGraph\n- PieChart\n- ProgressBar\n\n#### Browser compatibility\n\n| Chrome | Safari | IE / Edge | Firefox | Opera |\n| ------ | ------ | --------- | ------- | ----- |\n| 24+    | 6+     | 10+       | 32+     | 15+   |\n\n# Getting Started\n\n## Installation\n\n```bash\n$ npm install @donkeyclip/motorcortex-graphs\n# OR\n$ yarn add @donkeyclip/motorcortex-graphs\n```\n\n## Importing and loading\n\n```javascript\nimport { loadPlugin } from \"@donkeyclip/motorcortex\";\nimport MotorCortexGraph from \"@donkeyclip/motorcortex-graphs\";\nconst MCGraphs = loadPlugin(MotorCortexGraph);\n```\n\n# Creating Incidents\n\n## BarChartSimple\n\nTo create a bar chart, the necessary attribute parameter is the data object. The remaining parameters implement a customization of the graph and are all optional.\n\n```javascript\nconst newGraph = new MCGraphs.BarChartSimple(\n  {\n    data: data,\n    palette: {\n      primary: \"#75706E\",\n      secondary: \"#B2B1AE\",\n      tertiary: \"#434243\",\n      font: \"#100300\",\n      accent: \"#FFD800\",\n      background: \"#D3CDCD\",\n    },\n    font: {\n      url: \"https://fonts.googleapis.com/css2?family=Staatliches\u0026display=swap\",\n      size: \"1.7rem\",\n    },\n    grid: true,\n    timings: {\n      intro: 1000,\n      outro: 1000,\n      static: 1000,\n    },\n  },\n  {\n    selector: \"#htmlclip\",\n    containerParams: {\n      width: \"1200px\",\n      height: \"900px\",\n    },\n  }\n);\n```\n\n### BarChartSimple Attrs\n\n- `data`\n- `timings`\n- `palette`\n- `font`\n\n#### Data:\n\nAn object that contains the parameters with which the data are being displayed in the graph. The dataPoint array is a required entry, but all the rest are optional.\n\n| Name     | Description                                       |       Type       |\n| -------- | :------------------------------------------------ | :--------------: |\n| title    | The title of the graph (left)                     |      string      |\n| subtitle | The subtitle of the graph (right)                 |      string      |\n| showGrid | Toggle of grid line background                    |     boolean      |\n| maxValue | The max value for the y-axis of the graph         |     integer      |\n| data     | The datapoint array for the graph (example below) | Array[datapoint] |\n\nExample data:\n\n```json\n{\n  \"title\": \"Example Graph\",\n  \"subtitle\": \"Yearly data\",\n  \"showGrid\": true,\n  \"maxValue\": 100,\n  \"data\": [\n    {\n      \"name\": \"2019\",\n      \"value\": 34\n    },\n    {\n      \"name\": \"2020\",\n      \"value\": 15\n    },\n    {\n      \"name\": \"2021\",\n      \"value\": 89\n    }\n  ]\n}\n```\n\n#### Datapoints:\n\nThe data array of the graph contains `datapoint` objects. These Objects contain two (2) key-value pairs:\n\n| Key   | Description                                         | Value Type |\n| ----- | :-------------------------------------------------- | :--------: |\n| name  | The name (label) of the bar (up to 3 chars)         |   string   |\n| value | The value (y-axis) of the bar (2 significal digits) |   number   |\n\n#### Timings:\n\nThe `timings` object is an _optional_ attribute that contains three (3) parameters for setting the duration of the event. These parameters are:\n\n| Name   | Description                                               | Default | Value |\n| ------ | :-------------------------------------------------------- | :------ | ----: |\n| intro  | Duration of the intro animation                           | 0       |    ms |\n| static | Duration of the time that the graph should stay on screen | 1000    |    ms |\n| outro  | Duration of the outro animation                           | 0       |    ms |\n\n#### Palette:\n\nThe `palette` object is an optional parameter used to customize the colors used in the graph. The colors that can be set are:\n\n| Name       | Description                    |   Default   |            Value |\n| ---------- | :----------------------------- | :---------: | ---------------: |\n| primary    | The bar fill color             |   #75706E   | hex or css color |\n| secondary  | The gridlines' color           |   #B2B1AE   | hex or css color |\n| tertiary   | The axis' color                |   #434243   | hex or css color |\n| accent     | The font color                 |   #100300   | hex or css color |\n| font       | The titles \u0026 labels background |   #FFD800   | hex or css color |\n| background | The background color           | transparent | hex or css color |\n\n#### Font:\n\nThe `font` object is an optional parameter that contains three (3) values used for customizing the font. These parameters are:\n\n| Name       | Description                     | Default                                                         |     Value |\n| ---------- | :------------------------------ | :-------------------------------------------------------------- | --------: |\n| url        | A url pointing to a google font | https://fonts.googleapis.com/css2?family=Righteous\u0026display=swap |    string |\n| fontFamily | The font family to be used      | Righteous, cursive                                              |    string |\n| size       | The desired font size           | 1.7rem                                                          | px/rem/em |\n\n## LineGraph\n\nTo create a Line Graph, the necessary attribute parameter is the data object. The remaining parameters implement customization of the graph and are all optional.\n\n```javascript\nconst newGraph = new MCGraphs.LineGraph(\n  {\n    data: lineGraphData,\n    trace: {\n      toggle: false,\n      scale: 1.45,\n    },\n    legend: true,\n    grid: \"lines\",\n    timings: {\n      intro: 7000,\n      static: 1000,\n      outro: 7000,\n    },\n    font: {\n      size: \"1.7rem\",\n    },\n  },\n  {\n    selector: \"#html-hoverclip\",\n    containerParams: {\n      width: \"1024px\",\n      height: \"768px\",\n    },\n  }\n);\n```\n\n### LineGraph Attrs\n\n- `data`\n- `timings`\n- `grid`\n- `gridH`\n- `dataPointR`\n- `hover`\n- `grid`\n- `legend`\n- `trace`\n- `palette`\n- `font`\n\n#### Data:\n\nAn object that contains the parameters with which the data are being displayed in the graph. The dataPoint array is a required entry, but all the rest are optional.\n\n| Name     | Description                                              |       Type       |\n| -------- | :------------------------------------------------------- | :--------------: |\n| title    | The title of the graph (left)                            |      string      |\n| showGrid | Toggle of grid steles background                         |     boolean      |\n| interval | The number of units between each line on the grid        |     integer      |\n| maxValue | The max value for the y-axis of the graph                |     integer      |\n| unit     | The accompanying unit or character of the graph's labels |      string      |\n| hover    | Toggle for showing the labels only on hover \\*           |     boolean      |\n| data     | The datapoint array for the graph (example below)        | Array[datapoint] |\n| dataSets | Array that describes the colors/titles of the datasets   |  Array[dataset]  |\n\n\\* Ignores input and is set to true when data contains more than 1 line.\n\nExample data:\n\n```json\n{\n  \"title\": \"Example Line Chart\",\n  \"interval\": 4,\n  \"maxValue\": 100,\n  \"unit\": \"%\",\n  \"hover\": true,\n  \"data\": [\n    {\n      \"name\": \"2016\",\n      \"values\": [56, 4]\n    },\n    {\n      \"name\": \"2017\",\n      \"values\": [43, 89]\n    },\n    {\n      \"name\": \"2018\",\n      \"values\": [61, 75]\n    },\n    {\n      \"name\": \"2019\",\n      \"values\": [10, 32]\n    }\n  ],\n  \"dataSets\": [\n    {\n      \"title\": \"Set 1\",\n      \"color\": \"red\"\n    },\n    {\n      \"title\": \"Set 2\",\n      \"color\": \"blue\"\n    }\n  ]\n}\n```\n\n#### Datapoints:\n\nThe data array of the graph contains `datapoint` objects. These Objects contain two (2) key-value pairs:\n\n| Key   | Description                                             |  Value Type   |\n| ----- | :------------------------------------------------------ | :-----------: |\n| name  | The name (x-axis label) of the point (up to 4 chars)    |    string     |\n| value | The value (y-axis) of the point (2 significal digits)\\* | Array[Number] |\n\nThe length of the array should be equal to the number of lines in the graph. Each Array contains the n'th point of each line.\n\n```json\n\"data\": [\n    {\n    \"name\": \"2016\",\n    \"values\": [line1point1, line2point1]\n  },\n  {\n    \"name\": \"2017\",\n    \"values\": [line1point2, line2point2]\n  },\n]\n```\n\n\\* To avoid cluttering in the graph it is recommended to not enter more than 16 datapoints per line.\n\n#### DataSet:\n\nThe dataSet array of contains `dataSet` objects. These Objects contain two (2) key-value pairs:\n\n| Key   | Description                                  |    Value Type    |\n| ----- | :------------------------------------------- | :--------------: |\n| title | The title of the dataset                     |      string      |\n| color | The color of the dataset in the graph/legend | hex or css color |\n\nThe number of dataSet objects in this array should be equal to the length of any `values` object in the Data attribute.\n\n```json\n\"dataSets\": [\n    {\n      \"title\": \"Set 1\",\n      \"color\": \"red\"\n    },\n    {\n      \"title\": \"Set 2\",\n      \"color\": \"blue\"\n    },\n  ],\n```\n\n#### Trace:\n\nThe trace configuration object controls the zoom effect of the introduction. The scale option is not required for the zoom effect to play.\n\n| Key    | Description                       | Value Type |\n| ------ | :-------------------------------- | :--------: |\n| toggle | Toggles the zoom effect on or off |  boolean   |\n| scale  | The scale of the zoom effect      |   number   |\n\n#### Hover:\n\nThe hover option (`true`/`false`) allows the user to control if the labels of the points will be permenantly visible (and animated during intro/outtro durations), or will be hidden and shown only on hover. Note: When there are multiple datasets this option is automatically set to `true`.\n\n#### Legend:\n\nThe legend option (`true`/`false`) allows the user to control if the legend of the graph will be permenantly visible (and animated during intro/outtro durations), or will be hidden. Note: When there are multiple datasets this option is automatically set to `true`.\n\n#### DataPointR:\n\nThe dataPointR option allows the user to control the size of the line-graph's datapoints. The size is measured with percentages. Default value is 0.65\n\n#### Grid:\n\nThe grid option can take either the `steles` or `lines` values. If grid is set to steles, the grid will be raised as vertical dotted lines from each label on the x-axis. If grid is set to lines, a matrix of lines will occupy the grid spanning the entire length of the graph. Default option is lines.\n\n#### GridH:\n\nThe gridH option can take percentage values (0 - 1) and affects the height of the gridlines/gridsteles (based on the grid option). Default is set to 1.\n\n#### Timings:\n\nThe `timings` object is an _optional_ attribute that contains three (3) parameters for setting the duration of the event. These parameters are:\n\n| Name   | Description                                               | Default | Value |\n| ------ | :-------------------------------------------------------- | :------ | ----: |\n| intro  | Duration of the intro animation                           | 0       |    ms |\n| static | Duration of the time that the graph should stay on screen | 1000    |    ms |\n| outro  | Duration of the outro animation                           | 0       |    ms |\n\n#### Palette:\n\nThe `palette` object is an optional parameter used to customize the colors used in the graph. The colors that can be set are:\n\n| Name       | Description                         |   Default   |            Value |\n| ---------- | :---------------------------------- | :---------: | ---------------: |\n| primary    | The grid's color                    |   #75706E   | hex or css color |\n| secondary  | The graph's background shade        |   #B2B1AE   | hex or css color |\n| tertiary   | The lines' color                    |   #434243   | hex or css color |\n| quaternary | The graph labels' color             |   #EEEEEE   | hex or css color |\n| quinary    | The graph's legend background color |   #75706E   | hex or css color |\n| senary     | The graph's points' color           |   #100300   | hex or css color |\n| font       | The font color                      |   #100300   | hex or css color |\n| accent     | The titles \u0026 labels background      |   #FFD800   | hex or css color |\n| background | The background color                | transparent | hex or css color |\n\n#### Font:\n\nThe `font` object is an optional parameter that contains three (3) values used for customizing the font. These parameters are:\n\n| Name       | Description                     | Default                                                         |     Value |\n| ---------- | :------------------------------ | :-------------------------------------------------------------- | --------: |\n| url        | A url pointing to a google font | https://fonts.googleapis.com/css2?family=Righteous\u0026display=swap |    string |\n| fontFamily | The font family to be used      | Righteous, cursive                                              |    string |\n| size       | The desired font size           | 1.7rem                                                          | px/rem/em |\n\n## PieChart\n\n```javascript\nconst pieChart = new MCGraphs.PieChart(\n  {\n    data: {\n      title: \"My Pie Chart\",\n      data: [\n        {\n          name: \"Percentage 1\",\n          value: 50,\n          color: \"\",\n        },\n        {\n          name: \"Percentage 2\",\n          value: 15,\n          color: \"\",\n        },\n        {\n          name: \"Percentage 3\",\n          value: 10,\n          color: \"\",\n        },\n        {\n          name: \"Percentage 4\",\n          value: 5,\n          color: \"rgb(163, 255, 200)\",\n        },\n        {\n          name: \"Percentage 5\",\n          value: 20,\n          color: \"\",\n        },\n      ],\n    },\n    timings: {\n      intro: 2000,\n      static: 1500,\n      outro: 2000,\n    },\n    font: {\n      size: \"1.6rem\",\n    },\n  },\n  {\n    selector: \"#htmlclip\",\n    containerParams: {\n      width: \"1024px\",\n      height: \"768px\",\n    },\n  }\n);\n```\n\n### PieChart Attrs\n\n- `data`\n- `timings`\n- `palette`\n- `font`\n\n#### Data:\n\nAn object with two properties :\n| Name | Description | Values |\n| --- | --- | --- |\n| title | The title displayed at the top of the screen| string\n| data | An array of objects | PieChartDataEntry |\n\nType `PieChartDataEntry`:\n| Name | Description | Values |\n| --- | --- | --- |\n| name | The name displayed in the legend | string\n| value | The percentage value that the slice should take up | number (range 0-100)|\n|color| The color to display on that slice of the pie|string (rgb)|\n\n- Note:\n  The color attribute is optional but if your pie has more than five (5) values it is recommended you provide it because the pie will otherwise pick a random color from the built in palette.\n\n#### Timings:\n\nThe `timings` object is an optional object that contains three (3) values for setting the duration of the event. These values are:\n| Name | Description | Default | Values |\n| --- | --- | --- | --- |\n| intro | Duration of the intro animation | 0 | ms |\n| static | Duration of the the time that the graph should stay on screen | 1000 | ms |\n| outro | Duration of the outro animation | 0 | ms |\n\n#### Palette:\n\nThe `palette` object is an optional object used to customize the colors used in the graph. The colors that can be set are:\n| Name | Description | Default | Values |\n| --- | --- | --- | --- |\n| font | The font color | #100300 | hex or css color |\n\n#### Font:\n\nThe `font` object is an optional object that contains three (3) values used for customizing the font. These values are:\n| Name | Description | Default | Values |\n| --- | --- | --- | --- |\n| url |A url pointing to a google font|https://fonts.googleapis.com/css2?family=Righteous\u0026display=swap|string|\n| fontFamily | The font family to be used| Righteous, cursive | string|\n| size |The desired font size| 1.6rem | px/rem/em\n\n## ProgressBar\n\n```javascript\nconst newGraph = new MCGraphs.ProgressBar(\n  {\n    data: [\n      {\n        name: \"Percentage 1\",\n        value: 5,\n      },\n      {\n        name: \"Percentage 2\",\n        value: 34,\n      },\n      {\n        name: \"Percentage 3\",\n        value: 12.298374,\n      },\n      {\n        name: \"Percentage 4\",\n        value: 100,\n      },\n    ],\n    timings: {\n      intro: 1000,\n      static: 1000,\n      outro: 1000,\n    },\n    palette: {\n      background: \"#D3CDCD\",\n    },\n  },\n  {\n    selector: \"#htmlclip\",\n    containerParams: {\n      width: \"1024px\",\n      height: \"768px\",\n    },\n  }\n);\n```\n\n### ProgressBar Attrs\n\n- `data`\n- `timings`\n- `palette`\n- `font`\n- `options`\n\n#### Data:\n\nAn array of objects with the properties `name` and `value`.\n| Name | Description | Values |\n| --- | --- | --- |\n| name | The title displayed next to every progress bar| string\n| value | The percentage value that the bar should fill up to | number (range 0-100)|\n\n#### Timings:\n\nThe `timings` object is an optional object that contains three (3) values for setting the duration of the event. These values are:\n| Name | Description | Default | Values |\n| --- | --- | --- | --- |\n| intro | Duration of the intro animation | 0 | ms |\n| static | Duration of the the time that the graph should stay on screen | 1000 | ms |\n| outro | Duration of the outro animation | 0 | ms |\n\n#### Palette:\n\nThe `palette` object is an optional object used to customize the colors used in the graph. The colors that can be set are:\n| Name | Description | Default | Values |\n| --- | --- | --- | --- |\n| primary | The bar fill color | #B2B1AE | hex or css color |\n| secondary | The bar background color | #434243 | hex or css color |\n| accent | The bar outline color | #FFD800 | hex or css color |\n| font | The font color | #100300 | hex or css color |\n| background | The background color | transparent | hex or css color |\n\n#### Font:\n\nThe `font` object is an optional object that contains three (3) values used for customizing the font. These values are:\n| Name | Description | Default | Values |\n| --- | --- | --- | --- |\n| url |A url pointing to a google font|https://fonts.googleapis.com/css2?family=Righteous\u0026display=swap|string|\n| fontFamily | The font family to be used| Righteous, cursive | string|\n| size |The desired font size| 1.2rem | px/rem/em\n\n#### Options:\n\nThe `options` object is an optional object what contains miscellaneous graph configurations.\n| Name | Description | Default | Values |\n| --- | --- | --- | --- |\n| hidePercentage | Toggles the percentages next to the bars | false | boolean|\n\n# Adding Incidents in your clip\n\n```javascript\nclipName.addIncident(incidentName, startTime);\n```\n\n# Contributing\n\nIn general, we follow the \"fork-and-pull\" Git workflow, so if you want to submit patches and additions you should follow the next steps:\n\n1. **Fork** the repo on GitHub\n2. **Clone** the project to your own machine\n3. **Commit** changes to your own branch\n4. **Push** your work back up to your fork\n5. Submit a **Pull request** so that we can review your changes\n\n# License\n\n[MIT License](https://opensource.org/licenses/MIT)\n\n# Sponsored by\n\n[\u003cimg src=\"https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg\" width=250\u003e\u003c/img\u003e](https://donkeyclip.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-graphs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonkeyclip%2Fmotorcortex-graphs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonkeyclip%2Fmotorcortex-graphs/lists"}