feat(react-components): add data quality to xy-plot

packages/dashboard/jest-setup.js

@@ -1,6 +1,10 @@
 import '@testing-library/jest-dom';
 import { server } from './src/msw/server';
 
+import { TextDecoder, TextEncoder } from 'util';
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+
 beforeAll(() => {
   disableLogging();
   server.listen();

packages/react-components/jest-setup.js

@@ -1,2 +1,6 @@
 import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
+
+import { TextDecoder, TextEncoder } from 'util';
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;

packages/react-components/package.json

@@ -94,6 +94,7 @@
     "babel-plugin-formatjs": "10.5.3",
     "copyfiles": "^2.4.1",
     "cytoscape": "^3.25.0",
+    "date-fns": "^3.4.0",
     "eslint-config-iot-app-kit": "10.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "flush-promises": "^1.0.2",

packages/react-components/src/components/chart/baseChart.tsx

@@ -28,6 +28,10 @@ import {
   TIMESTAMP_WIDTH_FACTOR,
   TIMESTAMP_WIDTH_FACTOR_BOTTOM,
 } from './eChartsConstants';
+import { DataQualityPreferencesModal } from './preferences/dataQualityModal';
+import { useModalVisibility } from '../../hooks/useModalVisibility/useModalVisibility';
+import { PreferencesModalToggle } from './preferences/toggle';
+import { useDataQuality } from './hooks/useDataQuality';
 
 /**
  * Developer Notes:
@@ -54,6 +58,18 @@ const BaseChart = ({
   size = { width: 500, height: 500 },
   ...options
 }: ChartOptions) => {
+  const {
+    visible: dataQualityPreferencesVisible,
+    onHide: onHideDataQualityPreferences,
+    onShow: onShowDataQualityPreferences,
+  } = useModalVisibility();
+  const {
+    showBadDataIcons,
+    showUncertainDataIcons,
+    handleChangeBadDataIconsVisibility,
+    handleChangeUncertainDataIconsVisibility,
+  } = useDataQuality({ ...options.dataQuality, onChartOptionsChange });
+
   const isLegendVisible = options.legend?.visible;
   const isLegendPositionLeft = options.legend?.position === 'left';
   const isLegendPositionBottom = options.legend?.position === 'bottom';
@@ -130,6 +146,8 @@ const BaseChart = ({
   };
 
   const { dataStreamMetaData } = useChartConfiguration(chartRef, {
+    showBadDataIcons,
+    showUncertainDataIcons,
     group,
     isLoading,
     dataStreams,
@@ -227,6 +245,17 @@ const BaseChart = ({
                 width: chartWidth,
               }}
             />
+            <PreferencesModalToggle onShow={onShowDataQualityPreferences} />
+            <DataQualityPreferencesModal
+              onHide={onHideDataQualityPreferences}
+              visible={dataQualityPreferencesVisible}
+              showBadDataIcons={showBadDataIcons}
+              showUncertainDataIcons={showUncertainDataIcons}
+              onChangeShowBadDataIcons={handleChangeBadDataIconsVisibility}
+              onChangeShowUncertainDataIcons={
+                handleChangeUncertainDataIconsVisibility
+              }
+            />
             {/*TODO: should not show when in dashboard */}
             <ChartContextMenu
               targetTrigger={ref}

packages/react-components/src/components/chart/chartOptions/converters.spec.ts

@@ -4,8 +4,6 @@ import { convertYAxis } from './axes/yAxis';
 import { convertSeriesAndYAxis } from './seriesAndYAxis/convertSeriesAndYAxis';
 import { convertStyles } from './style/convertStyles';
 import { convertThresholds } from './convertThresholds';
-import { useTooltip } from './convertTooltip';
-import { renderHook } from '@testing-library/react';
 
 const MOCK_AXIS = {
   yAxisLabel: 'Y Value',
@@ -94,7 +92,6 @@ describe('testing converters', () => {
     const convertedSeriesAndYAxisFunc = convertSeriesAndYAxis(styles);
     const result = convertedSeriesAndYAxisFunc(datastream);
 
-    expect(result).toHaveProperty('series.itemStyle.color', 'red');
     expect(result).toHaveProperty('series.step', 'middle');
   });
 
@@ -134,23 +131,6 @@ describe('testing converters', () => {
     expect(result.series.name).toEqual('abc-1');
     expect(result).toHaveProperty('series.step', false);
   });
-
-  it('converts tooltip', async () => {
-    const { result } = renderHook(() => useTooltip(2));
-    const convertedTooltip = result.current;
-    expect(convertedTooltip.valueFormatter).toBeFunction();
-    const valueFormatter = convertedTooltip.valueFormatter;
-    if (valueFormatter) expect(valueFormatter(300)).toBe('300');
-  });
-
-  it('converts tooltip with value array', async () => {
-    const { result } = renderHook(() => useTooltip(2));
-    const convertedTooltip = result.current;
-    expect(convertedTooltip.valueFormatter).toBeFunction();
-    const valueFormatter = convertedTooltip.valueFormatter;
-    if (valueFormatter)
-      expect(valueFormatter([300, 10, 20000])).toBe('300, 10, 20000');
-  });
 });
 
 it('converts thresholds to echarts markLine and markArea', async () => {

packages/react-components/src/components/chart/chartOptions/seriesAndYAxis/convertColor.spec.ts

@@ -0,0 +1,87 @@
+import {
+  BAD_DATA_ICON_COLOR,
+  UNCERTAIN_DATA_ICON_COLOR,
+} from '../../eChartsConstants';
+import { convertColor, ConvertColorOptions } from './convertColor';
+
+const DEFAULT_ECHARTS_PARAMS = {
+  componentType: '',
+  componentSubType: '',
+  componentIndex: 0,
+  name: '',
+  dataIndex: 0,
+  data: '',
+  value: '',
+  $vars: [],
+};
+
+const GOOD_POINT = {
+  ...DEFAULT_ECHARTS_PARAMS,
+  data: {
+    x: 1,
+    y: 1,
+    quality: 'GOOD',
+  },
+};
+
+const BAD_POINT = {
+  ...DEFAULT_ECHARTS_PARAMS,
+  data: {
+    x: 1,
+    y: 1,
+    quality: 'BAD',
+  },
+};
+
+const UNCERTAIN_POINT = {
+  ...DEFAULT_ECHARTS_PARAMS,
+  data: {
+    x: 1,
+    y: 1,
+    quality: 'UNCERTAIN',
+  },
+};
+
+const setup = (props?: Partial<ConvertColorOptions>) => {
+  const mergedProps = {
+    color: 'pink',
+    showBadDataIcons: true,
+    showUncertainDataIcons: true,
+    ...props,
+  };
+  const callback = convertColor(mergedProps)?.color;
+  if (callback === undefined || typeof callback !== 'function') {
+    throw new Error('echarts callback function type unexpected');
+  }
+  return callback;
+};
+
+describe('convertColor', () => {
+  it('returns the symbol color by default', () => {
+    const convertColor = setup({ color: 'blue' });
+    expect(convertColor(GOOD_POINT)).toEqual('blue');
+  });
+
+  it('returns the bad data symbol color if the point is bad data', () => {
+    const convertColor = setup();
+    expect(convertColor(BAD_POINT)).toEqual(BAD_DATA_ICON_COLOR);
+  });
+
+  it('returns the uncertain data symbol color if the point is bad data', () => {
+    const convertColor = setup();
+    expect(convertColor(UNCERTAIN_POINT)).toEqual(UNCERTAIN_DATA_ICON_COLOR);
+  });
+
+  it('returns the symbol color if the point is bad data but show bad data is false', () => {
+    const convertColor = setup({ showBadDataIcons: false, color: 'blue' });
+    expect(convertColor(BAD_POINT)).toEqual('blue');
+  });
+
+  it('returns the symbol color if the point is uncertain data but show uncertain data is false', () => {
+    const convertColor = setup({
+      showUncertainDataIcons: false,
+      color: 'blue',
+    });
+    expect(convertColor(UNCERTAIN_POINT)).toEqual('blue');
+  });
+});

packages/react-components/src/components/chart/chartOptions/seriesAndYAxis/convertColor.ts

@@ -0,0 +1,26 @@
+import { LineSeriesOption } from 'echarts';
+import {
+  BAD_DATA_ICON_COLOR,
+  UNCERTAIN_DATA_ICON_COLOR,
+} from '../../eChartsConstants';
+import { DataPoint } from '@iot-app-kit/core';
+import { ChartDataQuality } from '../../types';
+
+export type ConvertColorOptions = { color?: string } & ChartDataQuality;
+export const convertColor = ({
+  color = '',
+  showBadDataIcons,
+  showUncertainDataIcons,
+}: ConvertColorOptions): LineSeriesOption['itemStyle'] => ({
+  color: (params) => {
+    const quality = (params.data as DataPoint | undefined)?.quality;
+
+    if (showUncertainDataIcons && quality === 'UNCERTAIN') {
+      return UNCERTAIN_DATA_ICON_COLOR;
+    } else if (showBadDataIcons && quality === 'BAD') {
+      return BAD_DATA_ICON_COLOR;
+    }
+
+    return color;
+  },
+});