npm - data-plotter - Versions diffs - 1.0.1 → 1.1.0 - Mend

data-plotter 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/examples/build/data-plotter.js +56 -28
package/examples/build/data-plotter.js.map +1 -1
package/package.json +1 -1
package/src/DataPlotter.js +56 -28
package/types/{DataPlotter.ts → DataPlotter.d.ts} +13 -1

package/examples/build/data-plotter.js CHANGED Viewed

@@ -1,53 +1,72 @@
 class DataPlotter
 {
-  constructor({ name = '', container_class = undefined, width = 400, height = 100 })
+  constructor({
+    id = '',
+    name = '',
+    container_selector = undefined,
+    width = 400,
+    height = 100,
+    raw_data_suffix = ''
+  })
   {
-    let graph_container = document.querySelector(`.${container_class}`);
+    let parent = document.querySelector(container_selector);
-    if (!graph_container)
+    if (!parent)
     {
-      graph_container = document.createElement('div');
-      graph_container.classList.add('data-plotter');
-      graph_container.style.display = 'flex';
+      parent = document.createElement('div');
+      parent.classList.add('data-plotter');
+      parent.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';
+      parent.style['flex-direction'] = 'column';
+      parent.style['z-index'] = 999;
+      parent.style['pointer-events'] = 'none';
+      parent.style['flex-wrap'] = 'wrap';
-      graph_container.style.width = 'fit-content';
-      graph_container.style.position = 'relative';
+      parent.style.width = 'fit-content';
-      document.body.appendChild(graph_container);
+      document.body.appendChild(parent);
     }
+    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 = '#000000';
     name_label.style.marginLeft = '5px';
     name_label.style.marginTop = '5px';
+    name_label.style.marginBottom = '5px';
     name_label.style.fontFamily = 'Arial';
-    graph_container.appendChild(name_label);
+    this.container.appendChild(name_label);
+    this.canvas = document.createElement('canvas');
+    this.canvas.style.display = 'flex';
-    const canvas = document.createElement('canvas');
-    canvas.width = width * window.devicePixelRatio;
-    canvas.height = height * window.devicePixelRatio;
+    this.on_resize(width, height);
-    canvas.style.width  = width + 'px';
-    canvas.style.height = height + 'px';
-    canvas.style.margin = '5px';
-    canvas.style.marginTop = '2px';
-    graph_container.appendChild(canvas);
+    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 = '6px';
-    this.raw_data_label.style.right = '10px';
+    this.raw_data_label.style.bottom = '4px';
+    this.raw_data_label.style.right = '4px';
     this.raw_data_label.style['font-family'] = 'Arial';
     this.raw_data_label.style['font-size'] = '12px';
-    graph_container.appendChild(this.raw_data_label);
+    this.container.appendChild(this.raw_data_label);
-    this.ctx = canvas.getContext('2d');
+    this.raw_data_suffix = raw_data_suffix;
+    this.ctx = this.canvas.getContext('2d');
     this.live_data_array = [];
@@ -57,6 +76,15 @@ class DataPlotter
     }
   }
+  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;
@@ -135,7 +163,7 @@ class DataPlotter
   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_label.textContent = `${value.toFixed(2)}${this.raw_data_suffix}`;
     this.live_data_array.push(value);
     this.live_data_array.shift();
@@ -152,7 +180,7 @@ class DataPlotter
   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_label.textContent = `${value.toFixed(2)}${this.raw_data_suffix}`;
     this.live_data_array.push(value);
     this.live_data_array.shift();

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

	@@ -1 +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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"}
1	+ {"version":3,"file":"data-plotter.js","sources":["../../src/DataPlotter.js"],"sourcesContent":["class DataPlotter\n{\n constructor({\n id = '',\n name = '',\n container_selector = undefined,\n width = 400,\n height = 100,\n raw_data_suffix = ''\n })\n {\n let parent = document.querySelector(container_selector);\n\n if (!parent)\n {\n parent = document.createElement('div');\n parent.classList.add('data-plotter');\n parent.style.display = 'flex';\n\n parent.style['flex-direction'] = 'column';\n parent.style['z-index'] = 999;\n parent.style['pointer-events'] = 'none';\n parent.style['flex-wrap'] = 'wrap';\n\n parent.style.width = 'fit-content';\n\n document.body.appendChild(parent);\n }\n\n this.container = document.createElement('div');\n\n if (id)\n {\n this.container.dataset.id = id;\n }\n\n this.container.style.position = 'relative';\n this.container.style.margin = '5px';\n this.container.style.marginTop = '2px';\n parent.appendChild(this.container);\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.marginBottom = '5px';\n name_label.style.fontFamily = 'Arial';\n this.container.appendChild(name_label);\n\n this.canvas = document.createElement('canvas');\n this.canvas.style.display = 'flex';\n\n this.on_resize(width, height);\n\n this.container.appendChild(this.canvas);\n\n this.raw_data_label = document.createElement('div');\n this.raw_data_label.classList.add('data-plotter__raw-data');\n this.raw_data_label.style.position = 'absolute';\n this.raw_data_label.style.bottom = '4px';\n this.raw_data_label.style.right = '4px';\n this.raw_data_label.style['font-family'] = 'Arial';\n this.raw_data_label.style['font-size'] = '12px';\n this.container.appendChild(this.raw_data_label);\n\n this.raw_data_suffix = raw_data_suffix;\n\n this.ctx = this.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 on_resize(width, height)\n {\n this.canvas.width = width * window.devicePixelRatio;\n this.canvas.height = height * window.devicePixelRatio;\n\n this.canvas.style.width = width + 'px';\n this.canvas.style.height = height + 'px';\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)}${this.raw_data_suffix}`;\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)}${this.raw_data_suffix}`;\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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "data-plotter",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "2D Data Plotter",
   "module": "examples/build/data-plotter.js",
   "source": "src/index.js",

package/src/DataPlotter.js CHANGED Viewed

@@ -1,53 +1,72 @@
 class DataPlotter
 {
-  constructor({ name = '', container_class = undefined, width = 400, height = 100 })
+  constructor({
+    id = '',
+    name = '',
+    container_selector = undefined,
+    width = 400,
+    height = 100,
+    raw_data_suffix = ''
+  })
   {
-    let graph_container = document.querySelector(`.${container_class}`);
+    let parent = document.querySelector(container_selector);
-    if (!graph_container)
+    if (!parent)
     {
-      graph_container = document.createElement('div');
-      graph_container.classList.add('data-plotter');
-      graph_container.style.display = 'flex';
+      parent = document.createElement('div');
+      parent.classList.add('data-plotter');
+      parent.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';
+      parent.style['flex-direction'] = 'column';
+      parent.style['z-index'] = 999;
+      parent.style['pointer-events'] = 'none';
+      parent.style['flex-wrap'] = 'wrap';
-      graph_container.style.width = 'fit-content';
-      graph_container.style.position = 'relative';
+      parent.style.width = 'fit-content';
-      document.body.appendChild(graph_container);
+      document.body.appendChild(parent);
     }
+    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 = '#000000';
     name_label.style.marginLeft = '5px';
     name_label.style.marginTop = '5px';
+    name_label.style.marginBottom = '5px';
     name_label.style.fontFamily = 'Arial';
-    graph_container.appendChild(name_label);
+    this.container.appendChild(name_label);
+    this.canvas = document.createElement('canvas');
+    this.canvas.style.display = 'flex';
-    const canvas = document.createElement('canvas');
-    canvas.width = width * window.devicePixelRatio;
-    canvas.height = height * window.devicePixelRatio;
+    this.on_resize(width, height);
-    canvas.style.width  = width + 'px';
-    canvas.style.height = height + 'px';
-    canvas.style.margin = '5px';
-    canvas.style.marginTop = '2px';
-    graph_container.appendChild(canvas);
+    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 = '6px';
-    this.raw_data_label.style.right = '10px';
+    this.raw_data_label.style.bottom = '4px';
+    this.raw_data_label.style.right = '4px';
     this.raw_data_label.style['font-family'] = 'Arial';
     this.raw_data_label.style['font-size'] = '12px';
-    graph_container.appendChild(this.raw_data_label);
+    this.container.appendChild(this.raw_data_label);
-    this.ctx = canvas.getContext('2d');
+    this.raw_data_suffix = raw_data_suffix;
+    this.ctx = this.canvas.getContext('2d');
     this.live_data_array = [];
@@ -57,6 +76,15 @@ class DataPlotter
     }
   }
+  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;
@@ -135,7 +163,7 @@ class DataPlotter
   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_label.textContent = `${value.toFixed(2)}${this.raw_data_suffix}`;
     this.live_data_array.push(value);
     this.live_data_array.shift();
@@ -152,7 +180,7 @@ class DataPlotter
   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_label.textContent = `${value.toFixed(2)}${this.raw_data_suffix}`;
     this.live_data_array.push(value);
     this.live_data_array.shift();

package/types/{DataPlotter.ts → DataPlotter.d.ts} RENAMED Viewed

@@ -1,7 +1,19 @@
 export class DataPlotter {
-    constructor(name?: string, width?: number, height?: number);
+    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;