Added dropdown to Legend for dataPointThreshold

Author: ignis-sec

src/App.tsx

@@ -43,6 +43,7 @@ export default function App() {
           serialPort: serialPortExtracted,
           connected,
           generate,
+          dataPointThreshold,
         } = message.data.monitorUISettings || {};
 
         let updateTitle = false;
@@ -130,6 +131,10 @@ export default function App() {
               typeof generate === "undefined"
                 ? prevConfig?.monitorUISettings?.generate
                 : generate,
+            dataPointThreshold:
+              typeof dataPointThreshold === "undefined"
+                ? prevConfig?.monitorUISettings?.dataPointThreshold
+                : dataPointThreshold,
           },
         }));
 
@@ -195,6 +200,9 @@ export default function App() {
           serialPort: urlParams.get("serialPort") || "/serial/port/address",
           connected: urlParams.get("connected") === "true",
           generate: urlParams.get("generate") === "true",
+          dataPointThreshold: parseInt(
+            urlParams.get("dataPointThreshold") || "50"
+          ),
         },
       };
 

src/ChartPlotter.tsx

@@ -43,7 +43,9 @@ function _Chart(
   const [connected, setConnected] = useState(
     config?.monitorUISettings?.connected
   );
-  const [dataPointThreshold] = useState(50);
+  const [dataPointThreshold, setDataPointThreshold] = useState<number>(
+    config?.monitorUISettings?.dataPointThreshold || 50
+  );
   const [cubicInterpolationMode, setCubicInterpolationMode] = useState<
     "default" | "monotone"
   >(config?.monitorUISettings?.interpolate ? "monotone" : "default");
@@ -230,6 +232,8 @@ function _Chart(
           wsSend={wsSend}
           setPause={togglePause}
           setInterpolate={setInterpolate}
+          dataPointThreshold={dataPointThreshold}
+          setDataPointThreshold={setDataPointThreshold}
         />
         <div className="canvas-container">
           <Line data={initialData} ref={chartRef as any} options={opts} />

src/Legend.tsx

@@ -4,6 +4,7 @@ import { LegendItem } from "./LegendItem";
 import { MonitorSettings, PluggableMonitor } from "./utils";
 import { Scrollbars } from "react-custom-scrollbars";
 import Switch from "react-switch";
+import Select from "react-select";
 import classNames from "classnames";
 
 export function Legend({
@@ -14,16 +15,20 @@ export function Legend({
   wsSend,
   setPause,
   setInterpolate,
+  dataPointThreshold,
+  setDataPointThreshold,
 }: {
   chartRef: ChartJSOrUndefined<"line">;
   pause: boolean;
   config: Partial<MonitorSettings>;
   cubicInterpolationMode: "monotone" | "default";
+  dataPointThreshold: number;
   wsSend: (
     clientCommand: PluggableMonitor.Protocol.ClientCommandMessage
   ) => void;
   setPause: (pause: boolean) => void;
   setInterpolate: (interpolate: boolean) => void;
+  setDataPointThreshold: (dataPointThreshold: number) => void;
 }): React.ReactElement {
   const scrollRef = useRef<Scrollbars>(null);
 
@@ -131,6 +136,41 @@ export function Legend({
         )}
       </div>
       <div className="actions">
+        <label className="interpolate">
+          <span>Number of Datapoints</span>
+          <Select
+            className="singleselect datapointscount"
+            classNamePrefix="select"
+            value={{
+              value: dataPointThreshold,
+              label: dataPointThreshold.toString(),
+            }}
+            name="datapointscount"
+            options={[
+              { value: 50, label: "50" },
+              { value: 100, label: "100" },
+              { value: 200, label: "200" },
+              { value: 500, label: "500" },
+              { value: 1000, label: "1000" },
+              { value: 5000, label: "5000" },
+            ]}
+            menuPlacement="top"
+            onChange={(event) => {
+              if (event) {
+                setDataPointThreshold(event.value);
+                wsSend({
+                  command:
+                    PluggableMonitor.Protocol.ClientCommand.CHANGE_SETTINGS,
+                  data: {
+                    monitorUISettings: {
+                      dataPointThreshold: event.value,
+                    },
+                  },
+                });
+              }
+            }}
+          />
+        </label>
         <label className="interpolate">
           <span>Interpolate</span>
           <Switch

src/utils.ts

@@ -32,6 +32,7 @@ interface MonitorModelState {
   serialPort: string;
   connected: boolean;
   generate?: boolean;
+  dataPointThreshold: number;
 }
 
 export interface MonitorSettings {