data-plotter 1.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2019-2021 OHZI Interactive
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# OHZI Data Plotter
+
+Data Plotter is a tiny javascript library that allows you to draw live data in a 2D graph.
+
+
+### Dependencies
+
+Data Plotter has no external dependencies
+
+### Installation
+
+```sh
+$ npm install data-plotter --save
+```
+
+
+### Usage
+
+```javascript
+import { DataPlotter } from 'data-plotter';
+
+class AwesomeGraph
+{
+  constructor()
+  {
+    this.graph = new DataPlotter({ name:'Graph of Sine function' });
+  }
+
+  update(sample)
+  {
+    this.graph.draw_dynamic_live_array(sample, 0, true, '#70b9fc');
+  }
+}
+
+class RenderLoop
+{
+  start()
+  {
+    this.awesome_graph = new AwesomeGraph();
+    this.t = 0;
+
+    this.update();
+  }
+
+  update()
+  {
+    this.awesome_graph.update(Math.sin(this.t));
+
+    this.t += 0.016;
+
+    requestAnimationFrame(this.update.bind(this));
+  }
+}
+
+new RenderLoop().start();
+```
+
+### API
+
+- `draw_function(func: any, min_x?: number, max_x?: number, graph_height?: number, color?: string, thick?: number): void;`
+
+- `draw_array(array: any, graph_height?: number, baseline?: number, centered_origin?: boolean, color?: string, thick?: number): void;`
+
+- `draw_static_live_array(value: any, graph_height?: number, baseline?: number, centered_origin?: boolean, color?: string, thick?: number): void;`
+
+- `draw_dynamic_live_array(value: any, baseline?: number, centered_origin?: boolean, color?: string, thick?: number): void;`
+
+
+### Running the examples
+You can check out the examples folder, all you need to do is set up an http server for it to work, using something like `http-server` package.
+
+```sh
+npm install -g http-server
+cd examples
+http-server -p 1234
+```
+This will mount an http server on the examples folder on port 1234
+
+License
+----
+
+MIT

package/examples/build/data-plotter.js

@@ -0,0 +1,217 @@
+class DataPlotter
+{
+  constructor({ name = '', container_class = undefined, width = 400, height = 100 })
+  {
+    let graph_container = document.querySelector(`.${container_class}`);
+
+    if (!graph_container)
+    {
+      graph_container = document.createElement('div');
+      graph_container.classList.add('data-plotter');
+      graph_container.style.display = 'flex';
+
+      graph_container.style['flex-direction'] = 'column';
+      graph_container.style['z-index'] = 999;
+      graph_container.style['pointer-events'] = 'none';
+      graph_container.style['flex-wrap'] = 'wrap';
+
+      graph_container.style.width = 'fit-content';
+      graph_container.style.position = 'relative';
+
+      document.body.appendChild(graph_container);
+    }
+
+    const name_label = document.createElement('div');
+    name_label.textContent = name;
+    name_label.style.color = '#000000';
+    name_label.style.marginLeft = '5px';
+    name_label.style.marginTop = '5px';
+    name_label.style.fontFamily = 'Arial';
+    graph_container.appendChild(name_label);
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width * window.devicePixelRatio;
+    canvas.height = height * window.devicePixelRatio;
+
+    canvas.style.width  = width + 'px';
+    canvas.style.height = height + 'px';
+    canvas.style.margin = '5px';
+    canvas.style.marginTop = '2px';
+    graph_container.appendChild(canvas);
+
+    this.raw_data_label = document.createElement('div');
+    this.raw_data_label.style.position = 'absolute';
+    this.raw_data_label.style.bottom = '6px';
+    this.raw_data_label.style.right = '10px';
+    this.raw_data_label.style['font-family'] = 'Arial';
+    this.raw_data_label.style['font-size'] = '12px';
+    graph_container.appendChild(this.raw_data_label);
+
+    this.ctx = canvas.getContext('2d');
+
+    this.live_data_array = [];
+
+    for (let i = 0; i < width; i++)
+    {
+      this.live_data_array.push(0);
+    }
+  }
+
+  draw_function(func, min_x = 0, max_x = 1, graph_height = 1, color = '#FF0000', thick = 1)
+  {
+    let ctx = this.ctx;
+    let canvas_length = ctx.canvas.width;
+
+    ctx.fillStyle = '#888888';
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    this.showAxes();
+
+    ctx.beginPath();
+    ctx.lineWidth = thick;
+    ctx.strokeStyle = color;
+
+    for (let i = 0; i < canvas_length; i++)
+    {
+      let result = func(this.lerp(min_x, max_x, i / canvas_length)) / graph_height;
+
+      let y = ctx.canvas.height - result * (ctx.canvas.height - thick);
+
+      if (i === 0)
+      {
+        ctx.moveTo(i, y);
+      }
+      else
+      {
+        ctx.lineTo(i, y);
+      }
+    }
+
+    ctx.stroke();
+  }
+
+  draw_array(array, graph_height = 1, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)
+  {
+    let ctx = this.ctx;
+    let canvas_length = ctx.canvas.width;
+
+    ctx.fillStyle = '#f2f2f2';
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    ctx.beginPath();
+    ctx.lineWidth = thick;
+    ctx.strokeStyle = color;
+
+    let use_center = centered_origin === true ? 0.5 : 1;
+
+    for (let i = 0; i < canvas_length; i++)
+    {
+      let array_i = Math.floor((i / canvas_length) * array.length);
+      let result = (array[array_i] - baseline) / graph_height;
+
+      let y = ctx.canvas.height * use_center - result * (ctx.canvas.height * use_center - thick);
+
+      if (i === 0)
+      {
+        ctx.moveTo(i, y);
+      }
+      else
+      {
+        ctx.lineTo(i, y);
+      }
+    }
+
+    ctx.stroke();
+
+    if (centered_origin)
+    {
+      this.draw_min_max_labels(graph_height);
+    }
+    else
+    {
+      this.draw_max_label(graph_height);
+    }
+  }
+
+  draw_static_live_array(value, graph_height = 1, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)
+  {
+    this.raw_data_label.textContent = value.toFixed(2);
+
+    this.live_data_array.push(value);
+    this.live_data_array.shift();
+    this.draw_array(this.live_data_array, graph_height, baseline, centered_origin, color, thick);
+    if (centered_origin)
+    {
+      this.draw_min_max_labels(graph_height);
+    }
+    else
+    {
+      this.draw_max_label(graph_height);
+    }
+  }
+
+  draw_dynamic_live_array(value, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)
+  {
+    this.raw_data_label.textContent = value.toFixed(2);
+
+    this.live_data_array.push(value);
+    this.live_data_array.shift();
+
+    let max_value = 1;
+    for (let i = 0; i < this.live_data_array.length; i++)
+    {
+      if (Math.abs(this.live_data_array[i]) > max_value)
+      {
+        max_value = Math.abs(this.live_data_array[i]);
+      }
+    }
+
+    this.draw_array(this.live_data_array, max_value, baseline, centered_origin, color, thick);
+
+    if (centered_origin)
+    {
+      this.draw_min_max_labels(max_value);
+    }
+    else
+    {
+      this.draw_max_label(max_value);
+    }
+  }
+
+  draw_min_max_labels(value)
+  {
+    const top_bottom_padding = 12;
+    const left_right_padding = 10;
+
+    this.ctx.font = '20px Arial';
+    this.ctx.fillStyle  = '#000000';
+    this.ctx.textBaseline = 'alphabetic';
+    this.ctx.fillText('-' + value.toFixed(1), left_right_padding, this.ctx.canvas.height - top_bottom_padding);
+    this.ctx.textBaseline = 'hanging';
+    this.ctx.fillText(value.toFixed(1), left_right_padding, top_bottom_padding);
+
+    // Center line
+    this.ctx.beginPath();
+    this.ctx.lineWidth = 1;
+    this.ctx.strokeStyle = '#BBBBBB';
+    this.ctx.moveTo(0, this.ctx.canvas.height / 2);
+    this.ctx.lineTo(this.ctx.canvas.width, this.ctx.canvas.height / 2);
+    this.ctx.stroke();
+  }
+
+  draw_max_label(value)
+  {
+    this.ctx.font = '20px Arial';
+    this.ctx.fillStyle  = '#000000';
+    this.ctx.textBaseline = 'hanging';
+    this.ctx.fillText(value.toFixed(1), 5, 8);
+  }
+
+  lerp(a, b, t)
+  {
+    return (1 - t) * a + b * t;
+  }
+}
+
+export { DataPlotter };
+//# sourceMappingURL=data-plotter.js.map

package/examples/build/data-plotter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-plotter.js","sources":["../../src/DataPlotter.js"],"sourcesContent":["class DataPlotter\n{\n  constructor({ name = '', container_class = undefined, width = 400, height = 100 })\n  {\n    let graph_container = document.querySelector(`.${container_class}`);\n\n    if (!graph_container)\n    {\n      graph_container = document.createElement('div');\n      graph_container.classList.add('data-plotter');\n      graph_container.style.display = 'flex';\n\n      graph_container.style['flex-direction'] = 'column';\n      graph_container.style['z-index'] = 999;\n      graph_container.style['pointer-events'] = 'none';\n      graph_container.style['flex-wrap'] = 'wrap';\n\n      graph_container.style.width = 'fit-content';\n      graph_container.style.position = 'relative';\n\n      document.body.appendChild(graph_container);\n    }\n\n    const name_label = document.createElement('div');\n    name_label.textContent = name;\n    name_label.style.color = '#000000';\n    name_label.style.marginLeft = '5px';\n    name_label.style.marginTop = '5px';\n    name_label.style.fontFamily = 'Arial';\n    graph_container.appendChild(name_label);\n\n    const canvas = document.createElement('canvas');\n    canvas.width = width * window.devicePixelRatio;\n    canvas.height = height * window.devicePixelRatio;\n\n    canvas.style.width  = width + 'px';\n    canvas.style.height = height + 'px';\n    canvas.style.margin = '5px';\n    canvas.style.marginTop = '2px';\n    graph_container.appendChild(canvas);\n\n    this.raw_data_label = document.createElement('div');\n    this.raw_data_label.style.position = 'absolute';\n    this.raw_data_label.style.bottom = '6px';\n    this.raw_data_label.style.right = '10px';\n    this.raw_data_label.style['font-family'] = 'Arial';\n    this.raw_data_label.style['font-size'] = '12px';\n    graph_container.appendChild(this.raw_data_label);\n\n    this.ctx = canvas.getContext('2d');\n\n    this.live_data_array = [];\n\n    for (let i = 0; i < width; i++)\n    {\n      this.live_data_array.push(0);\n    }\n  }\n\n  draw_function(func, min_x = 0, max_x = 1, graph_height = 1, color = '#FF0000', thick = 1)\n  {\n    let ctx = this.ctx;\n    let canvas_length = ctx.canvas.width;\n\n    ctx.fillStyle = '#888888';\n    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n    this.showAxes();\n\n    ctx.beginPath();\n    ctx.lineWidth = thick;\n    ctx.strokeStyle = color;\n\n    for (let i = 0; i < canvas_length; i++)\n    {\n      let result = func(this.lerp(min_x, max_x, i / canvas_length)) / graph_height;\n\n      let y = ctx.canvas.height - result * (ctx.canvas.height - thick);\n\n      if (i === 0)\n      {\n        ctx.moveTo(i, y);\n      }\n      else\n      {\n        ctx.lineTo(i, y);\n      }\n    }\n\n    ctx.stroke();\n  }\n\n  draw_array(array, graph_height = 1, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)\n  {\n    let ctx = this.ctx;\n    let canvas_length = ctx.canvas.width;\n\n    ctx.fillStyle = '#f2f2f2';\n    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n    ctx.beginPath();\n    ctx.lineWidth = thick;\n    ctx.strokeStyle = color;\n\n    let use_center = centered_origin === true ? 0.5 : 1;\n\n    for (let i = 0; i < canvas_length; i++)\n    {\n      let array_i = Math.floor((i / canvas_length) * array.length);\n      let result = (array[array_i] - baseline) / graph_height;\n\n      let y = ctx.canvas.height * use_center - result * (ctx.canvas.height * use_center - thick);\n\n      if (i === 0)\n      {\n        ctx.moveTo(i, y);\n      }\n      else\n      {\n        ctx.lineTo(i, y);\n      }\n    }\n\n    ctx.stroke();\n\n    if (centered_origin)\n    {\n      this.draw_min_max_labels(graph_height);\n    }\n    else\n    {\n      this.draw_max_label(graph_height);\n    }\n  }\n\n  draw_static_live_array(value, graph_height = 1, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)\n  {\n    this.raw_data_label.textContent = value.toFixed(2);\n\n    this.live_data_array.push(value);\n    this.live_data_array.shift();\n    this.draw_array(this.live_data_array, graph_height, baseline, centered_origin, color, thick);\n    if (centered_origin)\n    {\n      this.draw_min_max_labels(graph_height);\n    }\n    else\n    {\n      this.draw_max_label(graph_height);\n    }\n  }\n\n  draw_dynamic_live_array(value, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)\n  {\n    this.raw_data_label.textContent = value.toFixed(2);\n\n    this.live_data_array.push(value);\n    this.live_data_array.shift();\n\n    let max_value = 1;\n    for (let i = 0; i < this.live_data_array.length; i++)\n    {\n      if (Math.abs(this.live_data_array[i]) > max_value)\n      {\n        max_value = Math.abs(this.live_data_array[i]);\n      }\n    }\n\n    this.draw_array(this.live_data_array, max_value, baseline, centered_origin, color, thick);\n\n    if (centered_origin)\n    {\n      this.draw_min_max_labels(max_value);\n    }\n    else\n    {\n      this.draw_max_label(max_value);\n    }\n  }\n\n  draw_min_max_labels(value)\n  {\n    const top_bottom_padding = 12;\n    const left_right_padding = 10;\n\n    this.ctx.font = '20px Arial';\n    this.ctx.fillStyle  = '#000000';\n    this.ctx.textBaseline = 'alphabetic';\n    this.ctx.fillText('-' + value.toFixed(1), left_right_padding, this.ctx.canvas.height - top_bottom_padding);\n    this.ctx.textBaseline = 'hanging';\n    this.ctx.fillText(value.toFixed(1), left_right_padding, top_bottom_padding);\n\n    // Center line\n    this.ctx.beginPath();\n    this.ctx.lineWidth = 1;\n    this.ctx.strokeStyle = '#BBBBBB';\n    this.ctx.moveTo(0, this.ctx.canvas.height / 2);\n    this.ctx.lineTo(this.ctx.canvas.width, this.ctx.canvas.height / 2);\n    this.ctx.stroke();\n  }\n\n  draw_max_label(value)\n  {\n    this.ctx.font = '20px Arial';\n    this.ctx.fillStyle  = '#000000';\n    this.ctx.textBaseline = 'hanging';\n    this.ctx.fillText(value.toFixed(1), 5, 8);\n  }\n\n  lerp(a, b, t)\n  {\n    return (1 - t) * a + b * t;\n  }\n}\n\nexport { DataPlotter };\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "data-plotter",
+  "version": "1.0.0",
+  "description": "2D Data Plotter",
+  "source": "src/index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "examples/build",
+    "LICENSE",
+    "src",
+    "types",
+    "package.json"
+  ],
+  "scripts": {
+    "start": "rollup -w -c",
+    "build": "rollup -c",
+    "create-tag": "cross-var git tag -a \"v$npm_package_version\" -m \"Release Version $npm_package_version\" && cross-var git push origin \"v$npm_package_version\"",
+    "update-version": "cross-var echo \"v$npm_package_version\" > .version",
+    "fix-syntax": "standardx --fix",
+    "generate-types": "npx -p typescript tsc src/* --declaration --allowJs --emitDeclarationOnly --outDir types"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ohzinteractive/data-plotter.git"
+  },
+  "keywords": [
+    "ohzi",
+    "2d plotter",
+    "data plotter",
+    "function plotter"
+  ],
+  "author": "OHZI Interactive",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ohzinteractive/core/issues"
+  },
+  "homepage": "https://github.com/ohzinteractive/core#readme",
+  "devDependencies": {
+    "cross-var": "^1.1.0",
+    "rollup": "^2.44.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "standardx": "^7.0.0",
+    "typescript": "^4.4.3"
+  }
+}

package/src/DataPlotter.js

@@ -0,0 +1,216 @@
+class DataPlotter
+{
+  constructor({ name = '', container_class = undefined, width = 400, height = 100 })
+  {
+    let graph_container = document.querySelector(`.${container_class}`);
+
+    if (!graph_container)
+    {
+      graph_container = document.createElement('div');
+      graph_container.classList.add('data-plotter');
+      graph_container.style.display = 'flex';
+
+      graph_container.style['flex-direction'] = 'column';
+      graph_container.style['z-index'] = 999;
+      graph_container.style['pointer-events'] = 'none';
+      graph_container.style['flex-wrap'] = 'wrap';
+
+      graph_container.style.width = 'fit-content';
+      graph_container.style.position = 'relative';
+
+      document.body.appendChild(graph_container);
+    }
+
+    const name_label = document.createElement('div');
+    name_label.textContent = name;
+    name_label.style.color = '#000000';
+    name_label.style.marginLeft = '5px';
+    name_label.style.marginTop = '5px';
+    name_label.style.fontFamily = 'Arial';
+    graph_container.appendChild(name_label);
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width * window.devicePixelRatio;
+    canvas.height = height * window.devicePixelRatio;
+
+    canvas.style.width  = width + 'px';
+    canvas.style.height = height + 'px';
+    canvas.style.margin = '5px';
+    canvas.style.marginTop = '2px';
+    graph_container.appendChild(canvas);
+
+    this.raw_data_label = document.createElement('div');
+    this.raw_data_label.style.position = 'absolute';
+    this.raw_data_label.style.bottom = '6px';
+    this.raw_data_label.style.right = '10px';
+    this.raw_data_label.style['font-family'] = 'Arial';
+    this.raw_data_label.style['font-size'] = '12px';
+    graph_container.appendChild(this.raw_data_label);
+
+    this.ctx = canvas.getContext('2d');
+
+    this.live_data_array = [];
+
+    for (let i = 0; i < width; i++)
+    {
+      this.live_data_array.push(0);
+    }
+  }
+
+  draw_function(func, min_x = 0, max_x = 1, graph_height = 1, color = '#FF0000', thick = 1)
+  {
+    let ctx = this.ctx;
+    let canvas_length = ctx.canvas.width;
+
+    ctx.fillStyle = '#888888';
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    this.showAxes();
+
+    ctx.beginPath();
+    ctx.lineWidth = thick;
+    ctx.strokeStyle = color;
+
+    for (let i = 0; i < canvas_length; i++)
+    {
+      let result = func(this.lerp(min_x, max_x, i / canvas_length)) / graph_height;
+
+      let y = ctx.canvas.height - result * (ctx.canvas.height - thick);
+
+      if (i === 0)
+      {
+        ctx.moveTo(i, y);
+      }
+      else
+      {
+        ctx.lineTo(i, y);
+      }
+    }
+
+    ctx.stroke();
+  }
+
+  draw_array(array, graph_height = 1, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)
+  {
+    let ctx = this.ctx;
+    let canvas_length = ctx.canvas.width;
+
+    ctx.fillStyle = '#f2f2f2';
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    ctx.beginPath();
+    ctx.lineWidth = thick;
+    ctx.strokeStyle = color;
+
+    let use_center = centered_origin === true ? 0.5 : 1;
+
+    for (let i = 0; i < canvas_length; i++)
+    {
+      let array_i = Math.floor((i / canvas_length) * array.length);
+      let result = (array[array_i] - baseline) / graph_height;
+
+      let y = ctx.canvas.height * use_center - result * (ctx.canvas.height * use_center - thick);
+
+      if (i === 0)
+      {
+        ctx.moveTo(i, y);
+      }
+      else
+      {
+        ctx.lineTo(i, y);
+      }
+    }
+
+    ctx.stroke();
+
+    if (centered_origin)
+    {
+      this.draw_min_max_labels(graph_height);
+    }
+    else
+    {
+      this.draw_max_label(graph_height);
+    }
+  }
+
+  draw_static_live_array(value, graph_height = 1, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)
+  {
+    this.raw_data_label.textContent = value.toFixed(2);
+
+    this.live_data_array.push(value);
+    this.live_data_array.shift();
+    this.draw_array(this.live_data_array, graph_height, baseline, centered_origin, color, thick);
+    if (centered_origin)
+    {
+      this.draw_min_max_labels(graph_height);
+    }
+    else
+    {
+      this.draw_max_label(graph_height);
+    }
+  }
+
+  draw_dynamic_live_array(value, baseline = 0, centered_origin = false, color = '#70b9fc', thick = 1)
+  {
+    this.raw_data_label.textContent = value.toFixed(2);
+
+    this.live_data_array.push(value);
+    this.live_data_array.shift();
+
+    let max_value = 1;
+    for (let i = 0; i < this.live_data_array.length; i++)
+    {
+      if (Math.abs(this.live_data_array[i]) > max_value)
+      {
+        max_value = Math.abs(this.live_data_array[i]);
+      }
+    }
+
+    this.draw_array(this.live_data_array, max_value, baseline, centered_origin, color, thick);
+
+    if (centered_origin)
+    {
+      this.draw_min_max_labels(max_value);
+    }
+    else
+    {
+      this.draw_max_label(max_value);
+    }
+  }
+
+  draw_min_max_labels(value)
+  {
+    const top_bottom_padding = 12;
+    const left_right_padding = 10;
+
+    this.ctx.font = '20px Arial';
+    this.ctx.fillStyle  = '#000000';
+    this.ctx.textBaseline = 'alphabetic';
+    this.ctx.fillText('-' + value.toFixed(1), left_right_padding, this.ctx.canvas.height - top_bottom_padding);
+    this.ctx.textBaseline = 'hanging';
+    this.ctx.fillText(value.toFixed(1), left_right_padding, top_bottom_padding);
+
+    // Center line
+    this.ctx.beginPath();
+    this.ctx.lineWidth = 1;
+    this.ctx.strokeStyle = '#BBBBBB';
+    this.ctx.moveTo(0, this.ctx.canvas.height / 2);
+    this.ctx.lineTo(this.ctx.canvas.width, this.ctx.canvas.height / 2);
+    this.ctx.stroke();
+  }
+
+  draw_max_label(value)
+  {
+    this.ctx.font = '20px Arial';
+    this.ctx.fillStyle  = '#000000';
+    this.ctx.textBaseline = 'hanging';
+    this.ctx.fillText(value.toFixed(1), 5, 8);
+  }
+
+  lerp(a, b, t)
+  {
+    return (1 - t) * a + b * t;
+  }
+}
+
+export { DataPlotter };

package/src/index.js

@@ -0,0 +1,5 @@
+import { DataPlotter } from './DataPlotter';
+
+export {
+  DataPlotter
+};

package/types/DataPlotter.ts

@@ -0,0 +1,9 @@
+export class DataPlotter {
+    constructor(name?: string, width?: number, height?: number);
+    ctx: CanvasRenderingContext2D;
+    live_data_array: number[];
+    draw_function(func: any, min_x?: number, max_x?: number, graph_height?: number, color?: string, thick?: number): void;
+    draw_array(array: any, graph_height?: number, baseline?: number, centered_origin?: boolean, color?: string, thick?: number): void;
+    draw_static_live_array(value: any, graph_height?: number, baseline?: number, centered_origin?: boolean, color?: string, thick?: number): void;
+    draw_dynamic_live_array(value: any, baseline?: number, centered_origin?: boolean, color?: string, thick?: number): void;
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+import { DataPlotter } from './DataPlotter';
+export { DataPlotter };