Merge pull request #25 from hnez/chart-y-scaling

web: MqttComponents: Snap MqttChart y-axis dimensions to a list of fixed values

Author: hnez

web/src/DashboardDut.tsx

@@ -103,11 +103,21 @@ export default function DashboardDut() {
         <ColumnLayout columns={2} variant="text-grid">
           <Box>
             <Box variant="awsui-key-label">DUT voltage (V)</Box>
-            <MqttChart topic="/v1/dut/feedback/voltage" />
+            <MqttChart
+              title="DUT Voltage"
+              topic="/v1/dut/feedback/voltage"
+              maxSnapPoints={[6, 13, 25, 50]}
+              minSnapPoints={[-1]}
+            />
           </Box>
           <Box>
             <Box variant="awsui-key-label">DUT current (A)</Box>
-            <MqttChart topic="/v1/dut/feedback/current" />
+            <MqttChart
+              title="DUT Current"
+              topic="/v1/dut/feedback/current"
+              maxSnapPoints={[0.5, 1, 2, 3, 4, 5]}
+              minSnapPoints={[-0.1, -1]}
+            />
           </Box>
         </ColumnLayout>
         <ColumnLayout columns={4} variant="text-grid">
@@ -239,7 +249,12 @@ export default function DashboardDut() {
                 additionalInfo="The absolute voltage is independent of pin orientation"
               />
               <UnloadingSection header={`OUT_${port} voltage plot (V)`}>
-                <MqttChart topic={`/v1/output/out_${port}/feedback/voltage`} />
+                <MqttChart
+                  title={`OUT_${port} Voltage`}
+                  topic={`/v1/output/out_${port}/feedback/voltage`}
+                  maxSnapPoints={[4, 6]}
+                  minSnapPoints={[-4, -6]}
+                />
               </UnloadingSection>
             </SpaceBetween>
           </ColumnLayout>
@@ -304,7 +319,12 @@ export default function DashboardDut() {
               additionalInfo="Too many devices may overload the bus"
             />
             <UnloadingSection header="IOBus current plot">
-              <MqttChart topic="/v1/iobus/feedback/current" />
+              <MqttChart
+                title="IOBus current"
+                topic="/v1/iobus/feedback/current"
+                maxSnapPoints={[0.25]}
+                minSnapPoints={[0]}
+              />
             </UnloadingSection>
             <MqttBarMeter
               topic="/v1/iobus/feedback/voltage"
@@ -318,7 +338,12 @@ export default function DashboardDut() {
               additionalInfo="The voltage will go down if the bus is overloaded"
             />
             <UnloadingSection header="IOBus voltage plot">
-              <MqttChart topic="/v1/iobus/feedback/voltage" />
+              <MqttChart
+                title="IOBus current"
+                topic="/v1/iobus/feedback/voltage"
+                maxSnapPoints={[13]}
+                minSnapPoints={[0]}
+              />
             </UnloadingSection>
           </SpaceBetween>
         </ColumnLayout>
@@ -380,7 +405,10 @@ export default function DashboardDut() {
                   />
                   <UnloadingSection header={`USB Port ${port} current plot`}>
                     <MqttChart
+                      title={`Port ${port} current`}
                       topic={`/v1/usb/host/port${port}/feedback/current`}
+                      maxSnapPoints={[0.5]}
+                      minSnapPoints={[0]}
                     />
                   </UnloadingSection>
                 </SpaceBetween>

web/src/MqttComponents.tsx

@@ -260,7 +260,10 @@ function measToPoint(m: Measurement) {
 }
 
 interface MqttChartProps {
+  title: string;
   topic: string;
+  maxSnapPoints: Array<number>;
+  minSnapPoints: Array<number>;
 }
 
 export function MqttChart(props: MqttChartProps) {
@@ -271,11 +274,31 @@ export function MqttChart(props: MqttChartProps) {
   );
   let values = history.current;
 
+  // Find y-axis snap points that are smaller/larger than all samples in view.
+  let minSnap = 0;
+  let maxSnap = 0;
+
+  for (let i = 0; i < values.length; i++) {
+    while (
+      minSnap < props.minSnapPoints.length - 1 &&
+      values[i]["y"] < props.minSnapPoints[minSnap]
+    ) {
+      minSnap++;
+    }
+
+    while (
+      maxSnap < props.maxSnapPoints.length - 1 &&
+      values[i]["y"] > props.maxSnapPoints[maxSnap]
+    ) {
+      maxSnap++;
+    }
+  }
+
   let end = values.length >= 1 ? values[values.length - 1]["x"] : new Date();
 
   let series: MixedLineBarChartProps.ChartSeries<Date> = {
     type: "line",
-    title: "eh",
+    title: props.title,
     data: values,
   };
 
@@ -290,6 +313,7 @@ export function MqttChart(props: MqttChartProps) {
             ((Number(e) - Number(end)) / 1000).toFixed(1) + "s",
         }}
         height={200}
+        yDomain={[props.minSnapPoints[minSnap], props.maxSnapPoints[maxSnap]]}
         hideFilter
         hideLegend
       />