data-plotter 1.0.1 → 1.2.0

package/README.md

@@ -1,82 +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
+# 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

@@ -1,216 +1,252 @@
-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;
-  }
+class DataPlotter
+{
+  constructor({
+    id = '',
+    name = '',
+    container_selector = undefined,
+    width = 400,
+    height = 100,
+    raw_data_suffix = '',
+    background_color = '#FFFFFF',
+    text_color = '#000000',
+    center_line_color = '#808080'
+  })
+  {
+    let parent = document.querySelector(container_selector);
+    if (!parent)
+    {
+      parent = document.createElement('div');
+      parent.classList.add('data-plotter');
+      parent.style.display = 'flex';
+
+      parent.style['flex-direction'] = 'column';
+      parent.style['z-index'] = 999;
+      parent.style['pointer-events'] = 'none';
+      parent.style['flex-wrap'] = 'wrap';
+
+      parent.style.width = 'fit-content';
+
+      document.body.appendChild(parent);
+    }
+
+    this.background_color = background_color;
+    this.text_color = text_color;
+    this.center_line_color = center_line_color;
+
+    this.container = document.createElement('div');
+
+    if (id)
+    {
+      this.container.dataset.id = id;
+    }
+
+    this.container.style.position = 'relative';
+    this.container.style.margin = '5px';
+    this.container.style.marginTop = '2px';
+    parent.appendChild(this.container);
+
+    const name_label = document.createElement('div');
+    name_label.textContent = name;
+    name_label.style.color = text_color;
+    name_label.style.marginLeft = '5px';
+    name_label.style.marginTop = '5px';
+    name_label.style.marginBottom = '5px';
+    name_label.style.fontFamily = 'Arial';
+    this.container.appendChild(name_label);
+
+    this.canvas = document.createElement('canvas');
+    this.canvas.style.display = 'flex';
+
+    this.on_resize(width, height);
+
+    this.container.appendChild(this.canvas);
+
+    this.raw_data_label = document.createElement('div');
+    this.raw_data_label.classList.add('data-plotter__raw-data');
+    this.raw_data_label.style.position = 'absolute';
+    this.raw_data_label.style.bottom = '4px';
+    this.raw_data_label.style.right = '4px';
+    this.raw_data_label.style.color = text_color;
+    this.raw_data_label.style['font-family'] = 'Arial';
+    this.raw_data_label.style['font-size'] = '12px';
+    this.container.appendChild(this.raw_data_label);
+
+    this.raw_data_suffix = raw_data_suffix;
+
+    this.ctx = this.canvas.getContext('2d');
+
+    this.live_data_array = [];
+
+    for (let i = 0; i < width; i++)
+    {
+      this.live_data_array.push(0);
+    }
+  }
+
+  on_resize(width, height)
+  {
+    this.canvas.width = width * window.devicePixelRatio;
+    this.canvas.height = height * window.devicePixelRatio;
+
+    this.canvas.style.width  = width + 'px';
+    this.canvas.style.height = height + 'px';
+  }
+
+  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 = this.background_color;
+    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 = this.background_color;
+
+    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.raw_data_suffix}`;
+
+    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.raw_data_suffix}`;
+
+    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  = this.text_color;
+    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 = this.center_line_color;
+    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  = this.text_color;
+    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/examples/build/data-plotter.js.map

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

package/package.json

@@ -1,46 +1,47 @@
-{
-  "name": "data-plotter",
-  "version": "1.0.1",
-  "description": "2D Data Plotter",
-  "module": "examples/build/data-plotter.js",
-  "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/data-plotter/issues"
-  },
-  "homepage": "https://github.com/ohzinteractive/data-plotter",
-  "devDependencies": {
-    "cross-var": "^1.1.0",
-    "rollup": "^2.44.0",
-    "rollup-plugin-sourcemaps": "^0.6.3",
-    "standardx": "^7.0.0",
-    "typescript": "^4.4.3"
-  }
-}
+{
+  "name": "data-plotter",
+  "version": "1.2.0",
+  "description": "2D Data Plotter",
+  "module": "examples/build/data-plotter.js",
+  "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/data-plotter/issues"
+  },
+  "homepage": "https://github.com/ohzinteractive/data-plotter",
+  "devDependencies": {
+    "cross-var": "^1.1.0",
+    "rollup": "^2.44.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "standardx": "^7.0.0",
+    "typescript": "^4.4.3"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

package/src/DataPlotter.js

@@ -1,216 +1,252 @@
-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 };
+class DataPlotter
+{
+  constructor({
+    id = '',
+    name = '',
+    container_selector = undefined,
+    width = 400,
+    height = 100,
+    raw_data_suffix = '',
+    background_color = '#FFFFFF',
+    text_color = '#000000',
+    center_line_color = '#808080'
+  })
+  {
+    let parent = document.querySelector(container_selector);
+    if (!parent)
+    {
+      parent = document.createElement('div');
+      parent.classList.add('data-plotter');
+      parent.style.display = 'flex';
+
+      parent.style['flex-direction'] = 'column';
+      parent.style['z-index'] = 999;
+      parent.style['pointer-events'] = 'none';
+      parent.style['flex-wrap'] = 'wrap';
+
+      parent.style.width = 'fit-content';
+
+      document.body.appendChild(parent);
+    }
+
+    this.background_color = background_color;
+    this.text_color = text_color;
+    this.center_line_color = center_line_color;
+
+    this.container = document.createElement('div');
+
+    if (id)
+    {
+      this.container.dataset.id = id;
+    }
+
+    this.container.style.position = 'relative';
+    this.container.style.margin = '5px';
+    this.container.style.marginTop = '2px';
+    parent.appendChild(this.container);
+
+    const name_label = document.createElement('div');
+    name_label.textContent = name;
+    name_label.style.color = text_color;
+    name_label.style.marginLeft = '5px';
+    name_label.style.marginTop = '5px';
+    name_label.style.marginBottom = '5px';
+    name_label.style.fontFamily = 'Arial';
+    this.container.appendChild(name_label);
+
+    this.canvas = document.createElement('canvas');
+    this.canvas.style.display = 'flex';
+
+    this.on_resize(width, height);
+
+    this.container.appendChild(this.canvas);
+
+    this.raw_data_label = document.createElement('div');
+    this.raw_data_label.classList.add('data-plotter__raw-data');
+    this.raw_data_label.style.position = 'absolute';
+    this.raw_data_label.style.bottom = '4px';
+    this.raw_data_label.style.right = '4px';
+    this.raw_data_label.style.color = text_color;
+    this.raw_data_label.style['font-family'] = 'Arial';
+    this.raw_data_label.style['font-size'] = '12px';
+    this.container.appendChild(this.raw_data_label);
+
+    this.raw_data_suffix = raw_data_suffix;
+
+    this.ctx = this.canvas.getContext('2d');
+
+    this.live_data_array = [];
+
+    for (let i = 0; i < width; i++)
+    {
+      this.live_data_array.push(0);
+    }
+  }
+
+  on_resize(width, height)
+  {
+    this.canvas.width = width * window.devicePixelRatio;
+    this.canvas.height = height * window.devicePixelRatio;
+
+    this.canvas.style.width  = width + 'px';
+    this.canvas.style.height = height + 'px';
+  }
+
+  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 = this.background_color;
+    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 = this.background_color;
+
+    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.raw_data_suffix}`;
+
+    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.raw_data_suffix}`;
+
+    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  = this.text_color;
+    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 = this.center_line_color;
+    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  = this.text_color;
+    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/types/{DataPlotter.ts → DataPlotter.d.ts}

@@ -1,9 +1,21 @@
-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;
-}
+export class DataPlotter {
+    constructor({ id, name, container_selector, width, height, raw_data_suffix }: {
+        id?: string;
+        name?: string;
+        container_selector?: any;
+        width?: number;
+        height?: number;
+        raw_data_suffix?: string;
+    });
+    container: HTMLDivElement;
+    canvas: HTMLCanvasElement;
+    raw_data_label: HTMLDivElement;
+    raw_data_suffix: string;
+    ctx: CanvasRenderingContext2D;
+    live_data_array: number[];
+    on_resize(width: any, height: any): void;
+    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

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