Smoothen recording graph data (#205)

Author: microbit-grace

src/__tests__/smoothenXYZData.test.ts

@@ -0,0 +1,34 @@
+/**
+ * @vitest-environment jsdom
+ */
+/**
+ * (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import { smoothenXYZData } from '../script/smoothenXYZData';
+
+describe('smoothenXYZData', () => {
+  test('smoothen empty data', () => {
+    const xyz = {
+      x: [],
+      y: [],
+      z: [],
+    };
+    expect(smoothenXYZData(xyz)).toEqual(xyz);
+  });
+  test('smoothen xyz data', () => {
+    const xyz = {
+      x: [1, 1, 1, 1, 1],
+      y: [4, 4, 12, 10, 10],
+      z: [8, 8, 24, 20, 20],
+    };
+    const smoothXYZData = {
+      x: [1, 1, 1, 1, 1],
+      y: [4, 4, 6, 7, 7.75],
+      z: [8, 8, 12, 14, 15.5],
+    };
+    expect(smoothenXYZData(xyz)).toEqual(smoothXYZData);
+  });
+});

src/components/graphs/RecordingGraph.svelte

@@ -17,9 +17,11 @@
     PointElement,
   } from 'chart.js';
   import RecordingInspector from '../3d-inspector/RecordingInspector.svelte';
+  import { smoothenXYZData } from '../../script/smoothenXYZData';
 
   export let data: { x: number[]; y: number[]; z: number[] };
 
+  const smoothData = smoothenXYZData(data);
   let verticalLineX = NaN;
   let hoverIndex = NaN;
   let modalPosition = { x: 0, y: 0 };
@@ -34,9 +36,9 @@
       return { x: 0, y: 0, z: 0 };
     }
     return {
-      x: data.x[index],
-      y: data.y[index],
-      z: data.z[index],
+      x: smoothData.x[index],
+      y: smoothData.y[index],
+      z: smoothData.z[index],
     };
   };
 
@@ -86,10 +88,10 @@
     const x: { x: number; y: number }[] = [];
     const y: { x: number; y: number }[] = [];
     const z: { x: number; y: number }[] = [];
-    for (let i = 1; i < data.x.length; i++) {
-      x.push({ x: i, y: data.x[i - 1] });
-      y.push({ x: i, y: data.y[i - 1] });
-      z.push({ x: i, y: data.z[i - 1] });
+    for (let i = 1; i < smoothData.x.length; i++) {
+      x.push({ x: i, y: smoothData.x[i - 1] });
+      y.push({ x: i, y: smoothData.y[i - 1] });
+      z.push({ x: i, y: smoothData.z[i - 1] });
     }
     return {
       type: 'line',
@@ -133,7 +135,7 @@
           x: {
             type: 'linear',
             min: 0,
-            max: data.x.length,
+            max: smoothData.x.length,
             grid: {
               drawTicks: false,
               display: false,

src/script/smoothenXYZData.ts

@@ -0,0 +1,34 @@
+/**
+ * (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+interface XYZData {
+  x: number[];
+  y: number[];
+  z: number[];
+}
+
+const smoothen = (d: number[]): number[] => {
+  if (d.length === 0) {
+    return d;
+  }
+  const newData: number[] = [];
+  let prevValue = d[0];
+  d.forEach(v => {
+    const newValue = v * 0.25 + prevValue * 0.75;
+    newData.push(newValue);
+    prevValue = newValue;
+  });
+  return newData;
+};
+
+// Smoothen data
+export function smoothenXYZData(d: XYZData): XYZData {
+  return {
+    x: smoothen(d.x),
+    y: smoothen(d.y),
+    z: smoothen(d.z),
+  };
+}