Add graph line settings to aid accessibility (#548)

* Use foundation fork of Smoothie to support line style * Add graph line style settings * Add graph line thickness setting * Add preview graph to settings dialog --------- Co-authored-by: Matt Hillsdon <[email protected]>
microbit-foundation · Nov 29, 2024 · 4af9ec3 · 4af9ec3
1 parent ff7c692
commit 4af9ec3
Show file tree

Hide file tree

Showing 11 changed files with 274 additions and 29 deletions.
diff --git a/lang/ui.en.json b/lang/ui.en.json
@@ -731,6 +731,30 @@
     "defaultMessage": "Default (red, blue, green)",
     "description": "Graph colour scheme option"
   },
+  "graph-line-scheme": {
+    "defaultMessage": "Graph line style",
+    "description": "Graph line scheme setting label"
+  },
+  "graph-line-scheme-accessible": {
+    "defaultMessage": "Accessible lines (solid, dashed, dots)",
+    "description": "Graph line scheme option"
+  },
+  "graph-line-scheme-solid": {
+    "defaultMessage": "Solid lines",
+    "description": "Graph line scheme option"
+  },
+  "graph-line-weight": {
+    "defaultMessage": "Graph line thickness",
+    "description": "Graph line weight setting label"
+  },
+  "graph-line-weight-default": {
+    "defaultMessage": "Default",
+    "description": "Graph line weight option"
+  },
+  "graph-line-weight-thick": {
+    "defaultMessage": "Thick",
+    "description": "Graph line weight option"
+  },
   "help-label": {
     "defaultMessage": "Help",
     "description": "Help icon aria label"
@@ -1659,4 +1683,4 @@
     "defaultMessage": "unplug and replug the USB cable",
     "description": "WebUSB error dialog"
   }
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "@microbit/makecode-embed": "^0.0.0-alpha.7",
     "@microbit/microbit-connection": "^0.0.0-alpha.29",
     "@microbit/ml-header-generator": "^0.4.3",
+    "@microbit/smoothie": "^1.37.0-microbit.2",
     "@tensorflow/tfjs": "^4.20.0",
     "@types/w3c-web-serial": "^1.0.6",
     "@types/w3c-web-usb": "^1.0.6",
@@ -81,7 +82,6 @@
     "react-intl": "^6.6.8",
     "react-router": "^6.24.0",
     "react-router-dom": "^6.24.0",
-    "smoothie": "^1.36.1",
     "zustand": "^4.5.5"
   }
 }
diff --git a/src/components/LiveGraph.tsx b/src/components/LiveGraph.tsx
@@ -2,14 +2,15 @@ import { HStack, usePrevious } from "@chakra-ui/react";
 import { useSize } from "@chakra-ui/react-use-size";
 import { AccelerometerDataEvent } from "@microbit/microbit-connection";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { SmoothieChart, TimeSeries } from "smoothie";
+import { SmoothieChart, TimeSeries } from "@microbit/smoothie";
 import { useConnectActions } from "../connect-actions-hooks";
 import { ConnectionStatus } from "../connect-status-hooks";
 import { useConnectionStage } from "../connection-stage-hooks";
 import { useGraphColors } from "../hooks/use-graph-colors";
 import { maxAccelerationScaleForGraphs } from "../mlConfig";
 import { useSettings, useStore } from "../store";
 import LiveGraphLabels from "./LiveGraphLabels";
+import { useGraphLineStyles } from "../hooks/use-graph-line-styles";
 
 export const smoothenDataPoint = (curr: number, next: number) => {
   // TODO: Factor out so that recording graph can do the same
@@ -20,13 +21,16 @@ export const smoothenDataPoint = (curr: number, next: number) => {
 const LiveGraph = () => {
   const { isConnected, status } = useConnectionStage();
   const connectActions = useConnectActions();
-  const [{ graphColorScheme }] = useSettings();
+  const [{ graphColorScheme, graphLineScheme, graphLineWeight }] =
+    useSettings();
 
   const colors = useGraphColors(graphColorScheme);
+  const lineStyles = useGraphLineStyles(graphLineScheme);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
+  // When we update the chart we re-run the effect that syncs it with the connection state.
   const [chart, setChart] = useState<SmoothieChart | undefined>(undefined);
-  const lineWidth = 2;
+  const lineWidth = graphLineWeight === "default" ? 2 : 3;
 
   const liveGraphContainerRef = useRef(null);
   const { width, height } = useSize(liveGraphContainerRef) ?? {
@@ -58,9 +62,21 @@ const LiveGraph = () => {
       enableDpiScaling: false,
     });
 
-    smoothieChart.addTimeSeries(lineX, { lineWidth, strokeStyle: colors.x });
-    smoothieChart.addTimeSeries(lineY, { lineWidth, strokeStyle: colors.y });
-    smoothieChart.addTimeSeries(lineZ, { lineWidth, strokeStyle: colors.z });
+    smoothieChart.addTimeSeries(lineX, {
+      lineWidth,
+      strokeStyle: colors.x,
+      lineDash: lineStyles.x,
+    });
+    smoothieChart.addTimeSeries(lineY, {
+      lineWidth,
+      strokeStyle: colors.y,
+      lineDash: lineStyles.y,
+    });
+    smoothieChart.addTimeSeries(lineZ, {
+      lineWidth,
+      strokeStyle: colors.z,
+      lineDash: lineStyles.z,
+    });
 
     smoothieChart.addTimeSeries(recordLines, {
       lineWidth: 3,
@@ -73,7 +89,19 @@ const LiveGraph = () => {
     return () => {
       smoothieChart.stop();
     };
-  }, [colors.x, colors.y, colors.z, lineX, lineY, lineZ, recordLines]);
+  }, [
+    colors.x,
+    colors.y,
+    colors.z,
+    lineStyles.x,
+    lineStyles.y,
+    lineStyles.z,
+    lineWidth,
+    lineX,
+    lineY,
+    lineZ,
+    recordLines,
+  ]);
 
   useEffect(() => {
     if (isConnected || status === ConnectionStatus.ReconnectingAutomatically) {

diff --git a/src/components/RecordingGraph.tsx b/src/components/RecordingGraph.tsx
@@ -8,30 +8,45 @@ import {
   registerables,
 } from "chart.js";
 import { useEffect, useRef } from "react";
+import { useGraphColors } from "../hooks/use-graph-colors";
+import { useGraphLineStyles } from "../hooks/use-graph-line-styles";
 import { XYZData } from "../model";
 import { getConfig as getRecordingChartConfig } from "../recording-graph";
-import { useGraphColors } from "../hooks/use-graph-colors";
 import { useSettings } from "../store";
 
 interface RecordingGraphProps extends BoxProps {
   data: XYZData;
+  responsive?: boolean;
 }
 
-const RecordingGraph = ({ data, children, ...rest }: RecordingGraphProps) => {
-  const [{ graphColorScheme }] = useSettings();
+const RecordingGraph = ({
+  data,
+  responsive = false,
+  children,
+  ...rest
+}: RecordingGraphProps) => {
+  const [{ graphColorScheme, graphLineScheme, graphLineWeight }] =
+    useSettings();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const colors = useGraphColors(graphColorScheme);
+  const lineStyles = useGraphLineStyles(graphLineScheme);
   useEffect(() => {
     Chart.unregister(...registerables);
     Chart.register([LinearScale, LineController, PointElement, LineElement]);
     const chart = new Chart(
       canvasRef.current?.getContext("2d") ?? new HTMLCanvasElement(),
-      getRecordingChartConfig(data, colors)
+      getRecordingChartConfig(
+        data,
+        responsive,
+        colors,
+        lineStyles,
+        graphLineWeight
+      )
     );
     return () => {
       chart.destroy();
     };
-  }, [colors, data]);
+  }, [colors, data, graphLineWeight, lineStyles, responsive]);
 
   return (
     <Box
@@ -43,7 +58,8 @@ const RecordingGraph = ({ data, children, ...rest }: RecordingGraphProps) => {
       position="relative"
       {...rest}
     >
-      <canvas width="158px" height="95px" ref={canvasRef} />
+      {/* canvas dimensions must account for parent border width */}
+      <canvas width="156px" height="92px" ref={canvasRef} />
       {children}
     </Box>
   );

diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
@@ -13,17 +13,26 @@ import {
   ModalOverlay,
 } from "@chakra-ui/modal";
 import {
+  AspectRatio,
   FormControl,
   FormHelperText,
+  Text,
   useDisclosure,
   VStack,
 } from "@chakra-ui/react";
 import { useCallback, useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { defaultSettings, graphColorSchemeOptions } from "../settings";
+import {
+  defaultSettings,
+  graphColorSchemeOptions,
+  graphLineSchemeOptions,
+  graphLineWeightOptions,
+} from "../settings";
 import { useSettings } from "../store";
-import SelectFormControl, { createOptions } from "./SelectFormControl";
+import { previewGraphData } from "../utils/preview-graph-data";
 import { ConfirmDialog } from "./ConfirmDialog";
+import RecordingGraph from "./RecordingGraph";
+import SelectFormControl, { createOptions } from "./SelectFormControl";
 
 interface SettingsDialogProps {
   isOpen: boolean;
@@ -64,6 +73,16 @@ export const SettingsDialog = ({
         "graph-color-scheme",
         intl
       ),
+      graphLineScheme: createOptions(
+        graphLineSchemeOptions,
+        "graph-line-scheme",
+        intl
+      ),
+      graphLineWeight: createOptions(
+        graphLineWeightOptions,
+        "graph-line-weight",
+        intl
+      ),
     };
   }, [intl]);
   return (
@@ -107,6 +126,44 @@ export const SettingsDialog = ({
                     })
                   }
                 />
+                <SelectFormControl
+                  id="graphLineScheme"
+                  label={intl.formatMessage({ id: "graph-line-scheme" })}
+                  options={options.graphLineScheme}
+                  value={settings.graphLineScheme}
+                  onChange={(graphLineScheme) =>
+                    setSettings({
+                      ...settings,
+                      graphLineScheme,
+                    })
+                  }
+                />
+                <SelectFormControl
+                  id="graphLineWeight"
+                  label={intl.formatMessage({ id: "graph-line-weight" })}
+                  options={options.graphLineWeight}
+                  value={settings.graphLineWeight}
+                  onChange={(graphLineWeight) =>
+                    setSettings({
+                      ...settings,
+                      graphLineWeight,
+                    })
+                  }
+                />
+                <VStack alignItems="flex-start" w="full">
+                  <Text>Graph preview</Text>
+                  <AspectRatio ratio={526 / 92} w="full">
+                    <RecordingGraph
+                      responsive
+                      data={previewGraphData}
+                      role="img"
+                      w="full"
+                      aria-label={intl.formatMessage({
+                        id: "recording-graph-label",
+                      })}
+                    />
+                  </AspectRatio>
+                </VStack>
                 <FormControl>
                   <Button variant="link" onClick={handleResetToDefault}>
                     <FormattedMessage id="restore-defaults-action" />

diff --git a/src/hooks/use-graph-line-styles.ts b/src/hooks/use-graph-line-styles.ts
@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { GraphLineScheme } from "../settings";
+
+export interface GraphLineStyles {
+  x: undefined | number[];
+  y: undefined | number[];
+  z: undefined | number[];
+}
+
+export const useGraphLineStyles = (
+  graphLineScheme: GraphLineScheme
+): GraphLineStyles => {
+  return useMemo(() => {
+    switch (graphLineScheme) {
+      case "accessible": {
+        return {
+          x: undefined,
+          y: [10, 5],
+          z: [2, 2],
+        };
+      }
+      default: {
+        return {
+          x: undefined,
+          y: undefined,
+          z: undefined,
+        };
+      }
+    }
+  }, [graphLineScheme]);
+};