feat(react-components): calculate min/max and store value in store fo…

…r chart to consume

packages/react-components/src/components/chart/hooks/useDataStreamMaxMin.ts

@@ -0,0 +1,19 @@
+import isEqual from 'lodash.isequal';
+import { useChartStore } from '../store';
+
+export const useDataStreamMaxMin = () => {
+  const dataStreamMaxes = useChartStore(
+    (state) => state.dataStreamMaxes,
+    isEqual
+  );
+
+  const dataStreamMins = useChartStore(
+    (state) => state.dataStreamMins,
+    isEqual
+  );
+
+  return {
+    dataStreamMaxes,
+    dataStreamMins,
+  };
+};

packages/react-components/src/components/chart/store/dataStreamMinMaxStore.ts

@@ -0,0 +1,30 @@
+import { StateCreator } from 'zustand';
+
+export type MinMaxMap = { [key in string]: number | undefined };
+
+export interface MinMaxData {
+  dataStreamMaxes: MinMaxMap;
+  dataStreamMins: MinMaxMap;
+}
+
+export interface MinMaxState extends MinMaxData {
+  setMaxes: (datastreamMaxes: MinMaxMap) => void;
+  setMins: (datastreamMins: MinMaxMap) => void;
+}
+
+export const createMinMaxSlice: StateCreator<MinMaxState> = (set) => ({
+  dataStreamMaxes: {},
+  dataStreamMins: {},
+  setMaxes: (datastreamMaxes) =>
+    set(() => ({
+      dataStreamMaxes: {
+        ...datastreamMaxes,
+      },
+    })),
+  setMins: (datastreamMins) =>
+    set(() => ({
+      dataStreamMins: {
+        ...datastreamMins,
+      },
+    })),
+});

packages/react-components/src/components/chart/store/store.ts

@@ -2,9 +2,11 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { createMultiYAxisSlice, MultiYAxisState } from './multiYAxis';
 import { createDataStreamsSlice, DataStreamsState } from './contextDataStreams';
+import { createMinMaxSlice, MinMaxState } from './dataStreamMinMaxStore';
 
 export type StateData = DataStreamsState &
-  MultiYAxisState & { chartId: string };
+  MultiYAxisState &
+  MinMaxState & { chartId: string };
 
 export const createChartStore = (
   initProps: Partial<StateData> & Required<Pick<Partial<StateData>, 'chartId'>>
@@ -16,6 +18,7 @@ export const createChartStore = (
           ...initProps,
           ...createMultiYAxisSlice(...args),
           ...createDataStreamsSlice(...args),
+          ...createMinMaxSlice(...args),
         }),
         { name: `chart-store-${initProps?.chartId}` }
       )

packages/react-components/src/echarts/configure.ts

@@ -1,9 +1,14 @@
 import * as echartsCore from 'echarts/core';
 
 // Custom Extensions
-import { yAxisSyncExtension, trendCursorsExtension } from './extensions';
+import {
+  yAxisSyncExtension,
+  trendCursorsExtension,
+  dataStreamMinMaxSyncExtension,
+} from './extensions';
 
 export const configureEchartsPlugins = () => {
   echartsCore.use(yAxisSyncExtension);
   echartsCore.use(trendCursorsExtension);
+  echartsCore.use(dataStreamMinMaxSyncExtension);
 };

packages/react-components/src/echarts/extensions/index.ts

@@ -1,2 +1,3 @@
 export * from './yAxisSync';
 export * from './trendCursors';
+export * from './minMaxDataStreamValues';

packages/react-components/src/echarts/extensions/minMaxDataStreamValues/index.ts

@@ -0,0 +1 @@
+export * from './updateDataStreamMinMax';

packages/react-components/src/echarts/extensions/minMaxDataStreamValues/minMaxDataStreamSync.ts

@@ -0,0 +1,32 @@
+import SeriesModel from 'echarts/types/src/model/Series';
+import { SeriesOption, DefaultStatesMixin } from 'echarts/types/src/util/types';
+
+export const findMinMax = (
+  series: SeriesModel<SeriesOption<unknown, DefaultStatesMixin>>,
+  start: number,
+  end: 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];
+      }
+      if (min === undefined || dataPoint[1] < min) {
+        min = dataPoint[1];
+      }
+    }
+  });
+  return { max, min };
+};
+
+/* We are checking if the data is within the x-axis of the viewport 
+  Currently, the dataZoom also filters the points so that the series 
+  only contains the points seen in the viewport, but this decouples
+  the functinality in case of changes to useDataZoom in the future.
+*/
+const contains = (start: number, end: number, value: number) => {
+  return value > start && value < end;
+};

packages/react-components/src/echarts/extensions/minMaxDataStreamValues/updateDataStreamMinMax.ts

@@ -0,0 +1,69 @@
+import { EChartsExtensionInstallRegisters } from 'echarts/types/src/extension';
+import { findMinMax } from './minMaxDataStreamSync';
+import useDataStore from '../../../store';
+import throttle from 'lodash.throttle';
+import Grid from 'echarts/types/src/coord/cartesian/Grid';
+import { LifecycleEvents } from 'echarts/types/src/core/lifecycle';
+
+const THROTTLE_RATE = 2000;
+
+// Echarts core use type does not map correctly to the echarts extension type so exporting as any
+// eslint-disable-next-line
+export const dataStreamMinMaxSyncExtension: any = (registers: EChartsExtensionInstallRegisters) => {
+  const dataStreamMinMaxCallback = (
+    ...args: LifecycleEvents['series:afterupdate']
+  ) => {
+    const [ecModel, api, params] = args;
+    const appKitChartId = ecModel.option.appKitChartId as string; // widget-id
+    const grid = api
+      ?.getCoordinateSystems()
+      .find((a) => a.model?.type === 'grid') as Grid;
+
+    if (!grid) return; // grid not found, return early
+
+    const axis = grid?.getAxis('x'); //get X axis object from echarts
+    if (!axis) return; // axis not found, return early
+
+    const startDateXCoordinateValue = axis?.coordToData(
+      axis.toLocalCoord(axis?.getExtent()[0])
+    ); // start date coordinate value for x as number
+    const endDateXCoordinateValue = axis?.coordToData(
+      axis.toLocalCoord(axis?.getExtent()[1])
+    ); // end date coordinate value for x as number
+
+    if (
+      !params.updatedSeries ||
+      startDateXCoordinateValue === undefined ||
+      endDateXCoordinateValue === undefined ||
+      startDateXCoordinateValue > endDateXCoordinateValue
+    )
+      return;
+
+    const minValues: Record<string, number | undefined> = {}; // each value will be {dsId: min}
+    const maxValues: Record<string, number | undefined> = {}; // each value will be {dsId: max}
+
+    params.updatedSeries?.forEach((series) => {
+      const id = `${series.option.id}`; // datastream-id
+      const { max, min } = findMinMax(
+        series,
+        startDateXCoordinateValue,
+        endDateXCoordinateValue
+      );
+      minValues[id] = min;
+      maxValues[id] = max;
+    });
+    // add min/max values to the appropriate chart store
+    const storeState = useDataStore.getState();
+    const stores = storeState.chartStores;
+    const store = stores[appKitChartId]; //get store for widget
+    if (!store) return;
+    const state = store.getState();
+    state.setMaxes(maxValues);
+    state.setMins(minValues);
+  };
+
+  registers.registerUpdateLifecycle(
+    'series:afterupdate',
+    throttle(dataStreamMinMaxCallback, THROTTLE_RATE)
+  );
+};