web: MqttComponents: snap to specified y-axis dimensions

As of now the y-Axis auto-scales to match the values in the plot.
This means it expands the axis to arbitrarily small values, making
every bit of ADC noise look huge.

Specify explicit ranges to snap to instead. The selected values are not
completely random. The DUT voltage ranges for example are choosen just
above typical supply voltages (5V, 12V, 24V, 48V).

Signed-off-by: Leonard Göhrs <l.goehrs@pengutronix.de>

Author: hnez

web/src/DashboardDut.tsx

@@ -106,13 +106,17 @@ export default function DashboardDut() {
             <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
               title="DUT Current"
               topic="/v1/dut/feedback/current"
+              maxSnapPoints={[0.5, 1, 2, 3, 4, 5]}
+              minSnapPoints={[-0.1, -1]}
             />
           </Box>
         </ColumnLayout>
@@ -248,6 +252,8 @@ export default function DashboardDut() {
                 <MqttChart
                   title={`OUT_${port} Voltage`}
                   topic={`/v1/output/out_${port}/feedback/voltage`}
+                  maxSnapPoints={[4, 6]}
+                  minSnapPoints={[-4, -6]}
                 />
               </UnloadingSection>
             </SpaceBetween>
@@ -316,6 +322,8 @@ export default function DashboardDut() {
               <MqttChart
                 title="IOBus current"
                 topic="/v1/iobus/feedback/current"
+                maxSnapPoints={[0.25]}
+                minSnapPoints={[0]}
               />
             </UnloadingSection>
             <MqttBarMeter
@@ -333,6 +341,8 @@ export default function DashboardDut() {
               <MqttChart
                 title="IOBus current"
                 topic="/v1/iobus/feedback/voltage"
+                maxSnapPoints={[13]}
+                minSnapPoints={[0]}
               />
             </UnloadingSection>
           </SpaceBetween>
@@ -397,6 +407,8 @@ export default function DashboardDut() {
                     <MqttChart
                       title={`Port ${port} current`}
                       topic={`/v1/usb/host/port${port}/feedback/current`}
+                      maxSnapPoints={[0.5]}
+                      minSnapPoints={[0]}
                     />
                   </UnloadingSection>
                 </SpaceBetween>

web/src/MqttComponents.tsx

@@ -262,6 +262,8 @@ function measToPoint(m: Measurement) {
 interface MqttChartProps {
   title: string;
   topic: string;
+  maxSnapPoints: Array<number>;
+  minSnapPoints: Array<number>;
 }
 
 export function MqttChart(props: MqttChartProps) {
@@ -272,6 +274,26 @@ 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> = {
@@ -291,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
       />