1 files changed, 68 insertions, 0 deletions
diff --git a/web/plot.js b/web/plot.js
new file mode 100644
index 0000000..6f7e536
--- /dev/null
+++ b/web/plot.js
@@ -0,0 +1,68 @@
+import './lib/d3.v7.min.js';
+
+let POINTS = [];
+
+const x = d3.scaleLinear([0, 350]);
+const y = d3.scaleLinear([0, 120]).nice(30);
+
+// Declare the line generator.
+const line = d3.line()
+  .x((d, i) => x(i))
+  .y((d, i) => y(d));
+
+const margin = 40;
+
+const svg = d3.select('#plot');
+
+// Add the x-axis.
+const xa = svg.append('g');
+
+// Add the y-axis.
+const ya = svg.append('g');
+
+// add the plot.
+const plot = svg.append('path')
+  .attr('fill', 'none')
+  .attr('stroke', 'black')
+  .attr('stroke-width', '2');
+
+const sec = d3.format('02');
+const min = d3.format(' ');
+const minsec = v => `${min(Math.floor(v / 60))}:${sec(v % 60)}`;
+
+const update = () => {
+  x.domain([0, Math.max(POINTS.length, 120)]).nice(30);
+  y.domain(d3.extent([...d3.extent(POINTS), 0, 350]));
+
+  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
+  ya.transition().call(d3.axisLeft(y))
+  plot.transition().attr('d', line(POINTS));
+};
+
+export const clear = () => {
+  POINTS = [];
+  update();
+};
+
+export const addPoint = (temp) => {
+  POINTS.push(temp);
+  update();
+};
+
+const onresize = () => {
+  const width = svg.node().clientWidth;
+  const height = svg.node().clientHeight;
+  svg
+    .attr('width', width)
+    .attr('height', height);
+
+  x.range([margin, width-2*margin]);
+  y.range([height-2*margin, margin]);
+
+  xa.attr('transform', `translate(0, ${height - 2*margin})`);
+  ya.attr('transform', `translate(${margin}, 0)`);
+};
+window.addEventListener('resize', onresize);
+
+onresize();
+update();