fix: min/max values have correct significant digits

awslabs · Feb 28, 2024 · 50e183d · 50e183d
1 parent 69ba923
commit 50e183d
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 36 deletions.
diff --git a/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMaxes.spec.ts b/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMaxes.spec.ts
@@ -1,4 +1,5 @@
-import { test, expect, Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
+import { test } from '../test';
 import {
   MODELED_TAB,
   TEST_PAGE,
@@ -8,6 +9,7 @@ import {
 } from '../constants';
 import { gridUtil } from '../utils/grid';
 import { resourceExplorerUtil } from '../utils/resourceExplorer';
+import { getDecimalPlaces } from '../utils/getDecimalPlaces';
 
 const setupTest = async (page: Page) => {
   await page.goto(TEST_PAGE);
@@ -41,25 +43,64 @@ const setupTest = async (page: Page) => {
   return lineWidget;
 };
 
-test('max value is present', async ({ page }) => {
-  const lineWidget = await setupTest(page);
+test.describe('Data Stream Maxes', () => {
+  test('max value is present', async ({ page }) => {
+    const lineWidget = await setupTest(page);
 
-  const bounds = await lineWidget.boundingBox();
+    const bounds = await lineWidget.boundingBox();
 
-  if (!bounds) {
-    throw new Error('Line widget has no bounds');
-  }
+    if (!bounds) {
+      throw new Error('Line widget has no bounds');
+    }
 
-  // cloudscape table makes 2 instances of the header
-  await expect(page.getByTestId(MAX_VALUE_TABLE_HEADER)).toHaveCount(2);
+    // cloudscape table makes 2 instances of the header
+    await expect(page.getByTestId(MAX_VALUE_TABLE_HEADER)).toHaveCount(2);
 
-  // pause for data load + echarts lifecycle to re-render
-  await page.waitForTimeout(2000);
+    // pause for data load + echarts lifecycle to re-render
+    await page.waitForTimeout(2000);
 
-  const updatedMaxValueString = await page
-    .getByTestId(MAX_TABLE_CELL)
-    .first()
-    .innerText();
+    const updatedMaxValueString = await page
+      .getByTestId(MAX_TABLE_CELL)
+      .first()
+      .innerText();
 
-  expect(updatedMaxValueString).not.toEqual('-');
+    expect(updatedMaxValueString).not.toEqual('-');
+  });
+
+  test('Max value has correct significant digits', async ({
+    page,
+    configPanel,
+  }) => {
+    const lineWidget = await setupTest(page);
+    const bounds = await lineWidget.boundingBox();
+
+    if (!bounds) {
+      throw new Error('Line widget has no bounds');
+    }
+
+    // pause for data load + echarts lifecycle to re-render
+    await page.waitForTimeout(2000);
+
+    const initialMaxValueString = await page
+      .getByTestId(MAX_TABLE_CELL)
+      .first()
+      .innerText();
+
+    expect(getDecimalPlaces(initialMaxValueString)).toBe(3);
+
+    //change sig digits to 1
+    await configPanel.collapsedButton.click();
+    await configPanel.decimalPlaceInput.fill('1');
+
+    // pause for data load + echarts lifecycle to re-render
+    await page.waitForTimeout(2000);
+
+    //confirm that value has one decimal place
+    const updatedMaxValueString = await page
+      .getByTestId(MAX_TABLE_CELL)
+      .first()
+      .innerText();
+    console.log('value', updatedMaxValueString);
+    expect(getDecimalPlaces(updatedMaxValueString)).toBe(1);
+  });
 });
diff --git a/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMins.spec.ts b/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMins.spec.ts
@@ -1,4 +1,5 @@
-import { test, expect, Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
+import { test } from '../test';
 import {
   MODELED_TAB,
   TEST_PAGE,
@@ -8,6 +9,7 @@ import {
 } from '../constants';
 import { gridUtil } from '../utils/grid';
 import { resourceExplorerUtil } from '../utils/resourceExplorer';
+import { getDecimalPlaces } from '../utils/getDecimalPlaces';
 
 const setupTest = async (page: Page) => {
   await page.goto(TEST_PAGE);
@@ -41,25 +43,63 @@ const setupTest = async (page: Page) => {
   return lineWidget;
 };
 
-test('min value is present', async ({ page }) => {
-  const lineWidget = await setupTest(page);
+test.describe('Data Stream Maxes', () => {
+  test('min value is present', async ({ page }) => {
+    const lineWidget = await setupTest(page);
 
-  const bounds = await lineWidget.boundingBox();
+    const bounds = await lineWidget.boundingBox();
 
-  if (!bounds) {
-    throw new Error('Line widget has no bounds');
-  }
+    if (!bounds) {
+      throw new Error('Line widget has no bounds');
+    }
 
-  // cloudscape table makes 2 instances of the header
-  await expect(page.getByTestId(MIN_VALUE_TABLE_HEADER)).toHaveCount(2);
+    // cloudscape table makes 2 instances of the header
+    await expect(page.getByTestId(MIN_VALUE_TABLE_HEADER)).toHaveCount(2);
 
-  // pause for data load + echarts lifecycle to re-render
-  await page.waitForTimeout(2000);
+    // pause for data load + echarts lifecycle to re-render
+    await page.waitForTimeout(2000);
 
-  const updatedMinValueString = await page
-    .getByTestId(MIN_TABLE_CELL)
-    .first()
-    .innerText();
+    const updatedMinValueString = await page
+      .getByTestId(MIN_TABLE_CELL)
+      .first()
+      .innerText();
 
-  expect(updatedMinValueString).not.toEqual('-');
+    expect(updatedMinValueString).not.toEqual('-');
+  });
+
+  test('Min value has correct significant digits', async ({
+    page,
+    configPanel,
+  }) => {
+    const lineWidget = await setupTest(page);
+    const bounds = await lineWidget.boundingBox();
+
+    if (!bounds) {
+      throw new Error('Line widget has no bounds');
+    }
+
+    // pause for data load + echarts lifecycle to re-render
+    await page.waitForTimeout(2000);
+
+    const initialMaxValueString = await page
+      .getByTestId(MIN_TABLE_CELL)
+      .first()
+      .innerText();
+
+    expect(getDecimalPlaces(initialMaxValueString)).toBe(3);
+
+    //change sig digits to 1
+    await configPanel.collapsedButton.click();
+    await configPanel.decimalPlaceInput.fill('1');
+
+    // pause for data load + echarts lifecycle to re-render
+    await page.waitForTimeout(2000);
+
+    //confirm that value has one decimal place
+    const updatedMaxValueString = await page
+      .getByTestId(MIN_TABLE_CELL)
+      .first()
+      .innerText();
+    expect(getDecimalPlaces(updatedMaxValueString)).toBe(1);
+  });
 });
diff --git a/packages/react-components/src/components/chart/chartOptions/useChartConfiguration.ts b/packages/react-components/src/components/chart/chartOptions/useChartConfiguration.ts
@@ -202,6 +202,7 @@ export const useChartConfiguration = (
     chart.setOption(
       {
         appKitChartId: id,
+        appKitSignificantDigits: significantDigits,
         backgroundColor,
         xAxis,
         tooltip,
@@ -217,6 +218,7 @@ export const useChartConfiguration = (
     chartRef,
     id,
     backgroundColor,
+    significantDigits,
     xAxis,
     tooltip,
     title,

diff --git a/...es/react-components/src/echarts/extensions/minMaxDataStreamValues/minMaxDataStreamSync.ts b/...es/react-components/src/echarts/extensions/minMaxDataStreamValues/minMaxDataStreamSync.ts
@@ -1,21 +1,23 @@
 import SeriesModel from 'echarts/types/src/model/Series';
 import { SeriesOption, DefaultStatesMixin } from 'echarts/types/src/util/types';
+import { round } from '@iot-app-kit/core-util';
 
 export const findMinMax = (
   series: SeriesModel<SeriesOption<unknown, DefaultStatesMixin>>,
   start: number,
-  end: number
+  end: number,
+  appKitSignificantDigits: number
 ) => {
   let max: number | undefined = undefined;
   let min: number | undefined = undefined;
   series.getData().each((dims) => {
     const dataPoint = series.getData().getValues(dims) as number[];
     if (contains(start, end, dataPoint[0])) {
       if (max === undefined || dataPoint[1] > max) {
-        max = dataPoint[1];
+        max = round(dataPoint[1], appKitSignificantDigits);
       }
       if (min === undefined || dataPoint[1] < min) {
-        min = dataPoint[1];
+        min = round(dataPoint[1], appKitSignificantDigits);
       }
     }
   });

diff --git a/.../react-components/src/echarts/extensions/minMaxDataStreamValues/updateDataStreamMinMax.ts b/.../react-components/src/echarts/extensions/minMaxDataStreamValues/updateDataStreamMinMax.ts
@@ -15,6 +15,8 @@ export const dataStreamMinMaxSyncExtension: any = (registers: EChartsExtensionIn
   ) => {
     const [ecModel, api, params] = args;
     const appKitChartId = ecModel.option.appKitChartId as string; // widget-id
+    const appKitSignificantDigits = ecModel.option
+      .appKitSignificantDigits as number; //significant digits
     const grid = api
       ?.getCoordinateSystems()
       .find((a) => a.model?.type === 'grid') as Grid;
@@ -47,7 +49,8 @@ export const dataStreamMinMaxSyncExtension: any = (registers: EChartsExtensionIn
       const { max, min } = findMinMax(
         series,
         startDateXCoordinateValue,
-        endDateXCoordinateValue
+        endDateXCoordinateValue,
+        appKitSignificantDigits
       );
       minValues[id] = min;
       maxValues[id] = max;