fix: min max is sortable and not present on widget add

awslabs · Feb 28, 2024 · 7578a2e · 7578a2e
1 parent c168fb4
commit 7578a2e
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 27 deletions.
diff --git a/packages/dashboard/e2e/tests/configPanel/ConfigPanel.ts b/packages/dashboard/e2e/tests/configPanel/ConfigPanel.ts
@@ -11,6 +11,8 @@ export class ConfigPanel {
   readonly showYAxisToggle: Locator;
   readonly showLegendToggle: Locator;
   readonly decimalPlaceInput: Locator;
+  readonly maxValueCheckbox: Locator;
+  readonly minValueCheckbox: Locator;
 
   constructor({ page }: { page: Page }) {
     this.page = page;
@@ -31,5 +33,11 @@ export class ConfigPanel {
     this.decimalPlaceInput = this.container
       .getByTestId('decimal-place-config')
       .locator('input');
+    this.maxValueCheckbox = this.container
+      .getByTestId('Maximum Value')
+      .locator('input[type=checkbox]');
+    this.minValueCheckbox = this.container
+      .getByTestId('Minimum Value')
+      .locator('input[type=checkbox]');
   }
 }
diff --git a/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMaxes.spec.ts b/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMaxes.spec.ts
@@ -44,7 +44,7 @@ const setupTest = async (page: Page) => {
 };
 
 test.describe('Data Stream Maxes', () => {
-  test('max value is present', async ({ page }) => {
+  test('max value is present', async ({ page, configPanel }) => {
     const lineWidget = await setupTest(page);
 
     const bounds = await lineWidget.boundingBox();
@@ -53,6 +53,10 @@ test.describe('Data Stream Maxes', () => {
       throw new Error('Line widget has no bounds');
     }
 
+    // check Max Value checkbox
+    await configPanel.collapsedButton.click();
+    await configPanel.maxValueCheckbox.check();
+
     // cloudscape table makes 2 instances of the header
     await expect(page.getByTestId(MAX_VALUE_TABLE_HEADER)).toHaveCount(2);
 
@@ -78,6 +82,10 @@ test.describe('Data Stream Maxes', () => {
       throw new Error('Line widget has no bounds');
     }
 
+    // check Max Value
+    await configPanel.collapsedButton.click();
+    await configPanel.maxValueCheckbox.check();
+
     // pause for data load + echarts lifecycle to re-render
     await page.waitForTimeout(2000);
 
@@ -89,7 +97,6 @@ test.describe('Data Stream Maxes', () => {
     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

diff --git a/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMins.spec.ts b/packages/dashboard/e2e/tests/dataStreamMinMax/dataStreamMins.spec.ts
@@ -43,8 +43,8 @@ const setupTest = async (page: Page) => {
   return lineWidget;
 };
 
-test.describe('Data Stream Maxes', () => {
-  test('min value is present', async ({ page }) => {
+test.describe('Data Stream Mins', () => {
+  test('min value is present', async ({ page, configPanel }) => {
     const lineWidget = await setupTest(page);
 
     const bounds = await lineWidget.boundingBox();
@@ -53,6 +53,10 @@ test.describe('Data Stream Maxes', () => {
       throw new Error('Line widget has no bounds');
     }
 
+    // check Min Value checkbox
+    await configPanel.collapsedButton.click();
+    await configPanel.minValueCheckbox.check();
+
     // cloudscape table makes 2 instances of the header
     await expect(page.getByTestId(MIN_VALUE_TABLE_HEADER)).toHaveCount(2);
 
@@ -78,6 +82,10 @@ test.describe('Data Stream Maxes', () => {
       throw new Error('Line widget has no bounds');
     }
 
+    // check Min Value checkbox
+    await configPanel.collapsedButton.click();
+    await configPanel.minValueCheckbox.check();
+
     // pause for data load + echarts lifecycle to re-render
     await page.waitForTimeout(2000);
 
@@ -89,7 +97,6 @@ test.describe('Data Stream Maxes', () => {
     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

diff --git a/packages/dashboard/src/customization/propertiesSections/components/legendDisplaySection.tsx b/packages/dashboard/src/customization/propertiesSections/components/legendDisplaySection.tsx
@@ -42,6 +42,7 @@ export const LegendDisplaySection: FC<LegendDisplaySectionProps> = ({
           }
           disabled={disabled}
           key={value}
+          data-testid={label}
         >
           {label}
         </Checkbox>

diff --git a/packages/dashboard/src/customization/widgets/lineScatterChart/plugin.tsx b/packages/dashboard/src/customization/widgets/lineScatterChart/plugin.tsx
@@ -39,9 +39,9 @@ export const lineScatterChartPlugin: DashboardPlugin = {
           visibleContent: {
             unit: true,
             asset: true,
-            maxValue: true,
-            minValue: true,
             latestValue: true,
+            maxValue: false,
+            minValue: false,
           },
         },
       }),

diff --git a/packages/react-components/src/components/chart/legend/table/columnDefinitions/factory.tsx b/packages/react-components/src/components/chart/legend/table/columnDefinitions/factory.tsx
@@ -24,13 +24,16 @@ const createDataStreamColumnDefinition = (
 
 const createMaximumColumnDefinition =
   (): LegendTableColumnDefinitions[number] => ({
-    id: 'AssetName',
-    sortingField: 'assetName',
+    id: 'MaxColumn',
     header: <MaximumColumnHeader />,
     cell: (item) => {
       return <MaximumCell {...item} />;
     },
-    isRowHeader: true,
+    sortingComparator: (a, b) => {
+      const aValue = typeof a.maxValue === 'number' ? a.maxValue : 0;
+      const bValue = typeof b.maxValue === 'number' ? b.maxValue : 0;
+      return aValue - bValue;
+    },
   });
 const createLatestValueColumnDefinition = (
   significantDigits: ChartOptions['significantDigits']
@@ -51,13 +54,16 @@ const createLatestValueColumnDefinition = (
 
 const createMinimumColumnDefinition =
   (): LegendTableColumnDefinitions[number] => ({
-    id: 'AssetName',
-    sortingField: 'assetName',
+    id: 'MinColumn',
     header: <MinimumColumnHeader />,
     cell: (item) => {
       return <MinimumCell {...item} />;
     },
-    isRowHeader: true,
+    sortingComparator: (a, b) => {
+      const aValue = typeof a.minValue === 'number' ? a.minValue : 0;
+      const bValue = typeof b.minValue === 'number' ? b.minValue : 0;
+      return aValue - bValue;
+    },
   });
 
 const createTrendCursorColumnDefinition = ({

diff --git a/...mponents/src/components/chart/legend/table/columnDefinitions/maximumValue/maximumCell.tsx b/...mponents/src/components/chart/legend/table/columnDefinitions/maximumValue/maximumCell.tsx
@@ -1,14 +1,10 @@
 import React, { useMemo } from 'react';
 import { DataStream } from '@iot-app-kit/core';
 import { useVisibleDataStreams } from '../../../../hooks/useVisibleDataStreams';
-import { useDataStreamMaxMin } from '../../../../hooks/useDataStreamMaxMin';
 import { DataStreamInformation } from '../../types';
 
-export const MaximumCell = ({ id }: DataStreamInformation) => {
+export const MaximumCell = ({ id, maxValue }: DataStreamInformation) => {
   const { isDataStreamHidden } = useVisibleDataStreams();
-  const { dataStreamMaxes } = useDataStreamMaxMin();
-
-  const max = dataStreamMaxes[id];
 
   const isVisible = useMemo(
     () => !isDataStreamHidden({ id: id } as DataStream),
@@ -17,7 +13,7 @@ export const MaximumCell = ({ id }: DataStreamInformation) => {
 
   return (
     <div data-testid='max-value' className={!isVisible ? 'hidden-legend' : ''}>
-      {max ?? '-'}
+      {maxValue ?? '-'}
     </div>
   );
 };
diff --git a/...mponents/src/components/chart/legend/table/columnDefinitions/minimumValue/minimumCell.tsx b/...mponents/src/components/chart/legend/table/columnDefinitions/minimumValue/minimumCell.tsx
@@ -1,14 +1,10 @@
 import React, { useMemo } from 'react';
 import { DataStream } from '@iot-app-kit/core';
 import { useVisibleDataStreams } from '../../../../hooks/useVisibleDataStreams';
-import { useDataStreamMaxMin } from '../../../../hooks/useDataStreamMaxMin';
 import { DataStreamInformation } from '../../types';
 
-export const MinimumCell = ({ id }: DataStreamInformation) => {
+export const MinimumCell = ({ id, minValue }: DataStreamInformation) => {
   const { isDataStreamHidden } = useVisibleDataStreams();
-  const { dataStreamMins } = useDataStreamMaxMin();
-
-  const min = dataStreamMins[id];
 
   const isVisible = useMemo(
     () => !isDataStreamHidden({ id: id } as DataStream),
@@ -17,7 +13,7 @@ export const MinimumCell = ({ id }: DataStreamInformation) => {
 
   return (
     <div data-testid='min-value' className={!isVisible ? 'hidden-legend' : ''}>
-      {min ?? '-'}
+      {minValue ?? '-'}
     </div>
   );
 };
diff --git a/...nents/src/components/chart/legend/table/columnDefinitions/trendCursor/trendCursorCell.tsx b/...nents/src/components/chart/legend/table/columnDefinitions/trendCursor/trendCursorCell.tsx
@@ -5,7 +5,7 @@ import { DataStream } from '@iot-app-kit/core';
 
 type TrendCursorCellOptions = Omit<
   DataStreamInformation,
-  'trendCursorValues' | 'latestValue'
+  'trendCursorValues' | 'maxValue' | 'minValue' | 'latestValue'
 > & { trendCursorValue?: number };
 
 export const TrendCursorCell = ({

diff --git a/packages/react-components/src/components/chart/legend/table/legendTableAdapter.tsx b/packages/react-components/src/components/chart/legend/table/legendTableAdapter.tsx
@@ -4,19 +4,25 @@ import { ChartLegend, ChartOptions } from '../../types';
 import { ChartLegendTable } from './table';
 import { DataStreamInformation, TrendCursor } from './types';
 import { TrendCursorValues } from '../../../../echarts/extensions/trendCursors/store';
+import { useDataStreamMaxMin } from '../../hooks/useDataStreamMaxMin';
+import { MinMaxMap } from '../../store/dataStreamMinMaxStore';
 
 const mapDataStreamInformation = ({
   datastreams,
   trendCursorValues,
   chartId,
   visibleContent,
+  dataStreamMaxes,
+  dataStreamMins,
 }: {
   datastreams: (Pick<DataStream, 'id' | 'color' | 'name' | 'unit'> & {
     latestValue: Primitive | undefined;
   })[];
   trendCursorValues: TrendCursorValues[];
   chartId: string;
   visibleContent: ChartLegend['visibleContent'];
+  dataStreamMaxes: MinMaxMap;
+  dataStreamMins: MinMaxMap;
 }): DataStreamInformation[] =>
   datastreams.map(({ id, name, color, unit, latestValue }) => {
     const values = trendCursorValues.reduce<
@@ -30,13 +36,17 @@ const mapDataStreamInformation = ({
     }, {});
 
     const dataStreamName = visibleContent?.unit ? `${name} (${unit})` : name;
+    const maxValue = dataStreamMaxes[id] ?? '-';
+    const minValue = dataStreamMins[id] ?? '-';
 
     return {
       id,
       name: dataStreamName,
       color,
       latestValue,
       trendCursorValues: values,
+      maxValue,
+      minValue,
     };
   });
 
@@ -59,11 +69,14 @@ export const ChartLegendTableAdapter = ({
   significantDigits,
   ...options
 }: ChartLegendTableAdapterOptions) => {
+  const { dataStreamMaxes, dataStreamMins } = useDataStreamMaxMin();
   const datastreamItems = mapDataStreamInformation({
     datastreams,
     trendCursorValues,
     chartId,
     visibleContent,
+    dataStreamMaxes,
+    dataStreamMins,
   });
 
   return (

diff --git a/packages/react-components/src/components/chart/legend/table/table.spec.tsx b/packages/react-components/src/components/chart/legend/table/table.spec.tsx
@@ -25,13 +25,17 @@ describe('legend table', () => {
         color: 'black',
         trendCursorValues: {},
         latestValue: 111,
+        maxValue: undefined,
+        minValue: undefined,
       },
       {
         id: 'datastream-2',
         name: 'fake datastream 2',
         color: 'black',
         trendCursorValues: {},
         latestValue: 222,
+        maxValue: undefined,
+        minValue: undefined,
       },
     ];
     const table = render(
@@ -59,6 +63,8 @@ describe('legend table', () => {
           'trendcursor-2': 333,
         },
         latestValue: 111,
+        maxValue: undefined,
+        minValue: undefined,
       },
     ];
     const trendCursors: TrendCursor[] = [

diff --git a/packages/react-components/src/components/chart/legend/table/types.ts b/packages/react-components/src/components/chart/legend/table/types.ts
@@ -7,6 +7,10 @@ export type DataStreamInformation = Pick<
 > & {
   trendCursorValues: TrendCursorValues;
   latestValue: Primitive | undefined;
-};
+} & DataStreamMinMax;
 
 export type TrendCursor = { id: string; date: number; color?: string };
+export type DataStreamMinMax = {
+  maxValue: number | string | undefined;
+  minValue: number | string | undefined;
+};