feat(react-component): adding config service to toggle echarts

awslabs · Aug 16, 2023 · 96d0351 · 96d0351
1 parent 08bea78
commit 96d0351
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dashboard/src/customization/widgets/lineChart/component.tsx b/packages/dashboard/src/customization/widgets/lineChart/component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { LineChart } from '@iot-app-kit/react-components';
+import { Chart, getConfigValue, LineChart } from '@iot-app-kit/react-components';
 
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
@@ -16,6 +16,7 @@ const LineChartWidgetComponent: React.FC<LineChartWidget> = (widget) => {
   const readOnly = useSelector((state: DashboardState) => state.readOnly);
   const chartSize = useChartSize(widget);
   const dashboardSignificantDigits = useSelector((state: DashboardState) => state.significantDigits);
+  const showEcharts = getConfigValue('useEcharts');
 
   const {
     queryConfig,
@@ -32,7 +33,26 @@ const LineChartWidgetComponent: React.FC<LineChartWidget> = (widget) => {
   const aggregation = getAggregation(queryConfig);
 
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
+  const grid = useSelector((state: DashboardState) => state.grid);
+  const size = { width: grid.cellSize * widget.width, height: grid.cellSize * widget.height };
 
+  if (showEcharts) {
+    return (
+      <Chart
+        key={key}
+        queries={queries}
+        viewport={viewport}
+        gestures={readOnly}
+        axis={axis}
+        aggregationType={aggregateToString(aggregation)}
+        styleSettings={styleSettings}
+        thresholds={thresholds}
+        thresholdSettings={thresholdSettings}
+        significantDigits={significantDigits}
+        size={size}
+      />
+    );
+  }
   return (
     <LineChart
       chartSize={chartSize}

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -67,9 +67,9 @@
     "@types/d3": "^7.4.0",
     "@types/dompurify": "3.0.2",
     "@types/jest": "^29.4.4",
-    "@types/lodash.omitby": "^4.6.7",
     "@types/lodash.maxby": "4.6.7",
     "@types/lodash.minby": "4.6.7",
+    "@types/lodash.omitby": "^4.6.7",
     "@types/react": "^18.2.12",
     "@types/react-cytoscapejs": "^1.2.2",
     "@types/react-dom": "^18.2.5",
@@ -107,9 +107,9 @@
     "d3-shape": "^3.2.0",
     "dompurify": "3.0.5",
     "echarts": "^5.4.3",
-    "lodash.omitby": "^4.6.0",
     "lodash.maxby": "4.6.0",
     "lodash.minby": "4.6.0",
+    "lodash.omitby": "^4.6.0",
     "parse-duration": "^1.0.3",
     "react-cytoscapejs": "^2.0.0",
     "react-error-boundary": "^4.0.10",

diff --git a/packages/react-components/src/components/chart/baseChart.tsx b/packages/react-components/src/components/chart/baseChart.tsx
@@ -43,7 +43,7 @@ import { useViewportToMS } from './hooks/useViewportToMS';
 /**
  * Base chart to display Line, Scatter, and Bar charts.
  */
-const Chart = ({ viewport, queries, size = { width: 500, height: 500 }, ...options }: ChartOptions) => {
+const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...options }: ChartOptions) => {
   // Setup instance of echarts
   const { ref, chartRef } = useECharts(options?.theme);
 
@@ -153,4 +153,4 @@ const Chart = ({ viewport, queries, size = { width: 500, height: 500 }, ...optio
   );
 };
 
-export default Chart;
+export default BaseChart;
diff --git a/...omponents/chart/baseChartWithProvider.tsx → ...components/src/components/chart/chart.tsx b/...omponents/chart/baseChartWithProvider.tsx → ...components/src/components/chart/chart.tsx
@@ -3,7 +3,7 @@ import { ChartOptions } from './types';
 import { ChartStoreProvider } from './store';
 import BaseChart from './baseChart';
 
-export const BaseChartWithProvider: React.FC<ChartOptions> = (options) => (
+export const Chart: React.FC<ChartOptions> = (options) => (
   <ChartStoreProvider>
     <BaseChart {...options} />
   </ChartStoreProvider>

diff --git a/packages/react-components/src/components/chart/close.svg b/packages/react-components/src/components/chart/close.svg
diff --git a/packages/react-components/src/components/chart/eChartsConstants.ts b/packages/react-components/src/components/chart/eChartsConstants.ts
@@ -82,11 +82,12 @@ export const MAX_TREND_CURSORS = 5;
 export const TREND_CURSOR_HEADER_TEXT_COLOR = 'white';
 export const TREND_CURSOR_HEADER_OFFSET = 28;
 export const TREND_CURSOR_HEADER_BACKGROUND_COLOR = 'black';
-export const TREND_CURSOR_CLOSE_BUTTON_Y_OFFSET = TREND_CURSOR_HEADER_OFFSET + 2.5;
+export const TREND_CURSOR_CLOSE_BUTTON_Y_OFFSET = TREND_CURSOR_HEADER_OFFSET + 3;
 export const TREND_CURSOR_CLOSE_BUTTON_X_OFFSET = 45;
 
 export const Y_AXIS_INTERPOLATED_VALUE_PRECISION = 2;
 export const TREND_CURSOR_MARKER_RADIUS = 5;
+export const TREND_CURSOR_DELETE_BUTTON_HEIGHT = 10;
 
 export const TREND_CURSOR_LINE_GRAPHIC_INDEX = 0;
 export const TREND_CURSOR_HEADER_GRAPHIC_INDEX = 1;

diff --git a/packages/react-components/src/components/chart/index.ts b/packages/react-components/src/components/chart/index.ts
@@ -1,3 +1 @@
-import { BaseChartWithProvider } from './baseChartWithProvider';
-
-export default BaseChartWithProvider;
+export { Chart } from './chart';
diff --git a/packages/react-components/src/components/chart/tests/baseChart.spec.tsx b/packages/react-components/src/components/chart/tests/baseChart.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mockTimeSeriesDataQuery } from '@iot-app-kit/testing-util';
 import { DataStream } from '@iot-app-kit/core';
-import Chart from '../index';
+import { Chart } from '../index';
 import { render } from '@testing-library/react';
 
 const VIEWPORT = { duration: '5m' };

diff --git a/packages/react-components/src/components/chart/utils/getInfo.ts b/packages/react-components/src/components/chart/utils/getInfo.ts
@@ -47,7 +47,6 @@ export const setXWithBounds = (size: SizeConfig, x: number) => {
 };
 
 export const getTrendCursorHeaderTimestampText = (timestampInMs: number) => {
-  // const title = previousText && previousText.split('\n')[0];
   return [
     `{timestamp|${new Date(timestampInMs).toLocaleDateString()} ${new Date(timestampInMs).toLocaleTimeString()}}`,
     '{title|}',

diff --git a/packages/react-components/src/components/chart/utils/getTrendCursor.ts b/packages/react-components/src/components/chart/utils/getTrendCursor.ts
@@ -4,6 +4,7 @@ import {
   TREND_CURSOR_CLOSE_BUTTON_X_OFFSET,
   TREND_CURSOR_CLOSE_BUTTON_Y_OFFSET,
   TREND_CURSOR_CLOSE_GRAPHIC_INDEX,
+  TREND_CURSOR_DELETE_BUTTON_HEIGHT,
   TREND_CURSOR_HEADER_BACKGROUND_COLOR,
   TREND_CURSOR_HEADER_COLORS,
   TREND_CURSOR_HEADER_GRAPHIC_INDEX,
@@ -24,10 +25,8 @@ import {
   ondragUpdateTrendCursorElementsProps,
   SizeConfig,
 } from '../types';
-import close from '../close.svg';
 import {
   GraphicComponentElementOption,
-  GraphicComponentImageOption,
   GraphicComponentTextOption,
   GraphicComponentZRPathOption,
 } from 'echarts/types/src/component/graphic/GraphicModel';
@@ -164,14 +163,26 @@ const addTCHeader = (uId: string, timestampInMs: number, headerColor: string): G
   silent: true,
 });
 
-const addTCDeleteButton = (uId: string): GraphicComponentImageOption => ({
-  id: `image-${uId}`,
-  type: 'image',
+const addTCDeleteButton = (uId: string): GraphicComponentZRPathOption => ({
+  id: `polyline-${uId}`,
+  type: 'polyline',
   z: TREND_CURSOR_Z_INDEX + 1,
   x: TREND_CURSOR_CLOSE_BUTTON_X_OFFSET,
   y: TREND_CURSOR_CLOSE_BUTTON_Y_OFFSET,
+  shape: {
+    points: [
+      [0, 0],
+      [TREND_CURSOR_DELETE_BUTTON_HEIGHT, TREND_CURSOR_DELETE_BUTTON_HEIGHT],
+      [TREND_CURSOR_DELETE_BUTTON_HEIGHT / 2, TREND_CURSOR_DELETE_BUTTON_HEIGHT / 2],
+      [TREND_CURSOR_DELETE_BUTTON_HEIGHT, 0],
+      [0, TREND_CURSOR_DELETE_BUTTON_HEIGHT],
+      [TREND_CURSOR_DELETE_BUTTON_HEIGHT / 2, TREND_CURSOR_DELETE_BUTTON_HEIGHT / 2],
+    ],
+  },
   style: {
-    image: close as unknown as string,
+    stroke: 'white',
+    opacity: 1,
+    lineWidth: 2,
   },
 });
 

diff --git a/packages/react-components/src/components/trend-cursor-sync/trendCursorSync.spec.tsx b/packages/react-components/src/components/trend-cursor-sync/trendCursorSync.spec.tsx
@@ -1,7 +1,7 @@
 import { describe, expect } from '@jest/globals';
 import { render } from '@testing-library/react';
 import TrendCursorSync from './index';
-import Chart from '../chart';
+import { Chart } from '../chart';
 import React from 'react';
 import { mockViewport } from '../chart/tests/getTrendCursor.spec';
 import { mockQuery } from '../chart/tests/baseChart.spec';

diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
@@ -24,5 +24,8 @@ export { AppKitConfig } from './components/iot-app-kit-config';
 export { useViewport } from './hooks/useViewport';
 export { useTimeSeriesData } from './hooks/useTimeSeriesData';
 export { useHasFeatureFlag } from './hooks/useHasFeatureFlag';
+export { getConfigValue } from './store/index';
+
+export { Chart } from './components/chart';
 
 export type { TableColumnDefinition, TableItem, TableItemRef } from './components/table';
diff --git a/packages/react-components/src/store/config.ts b/packages/react-components/src/store/config.ts
@@ -0,0 +1,11 @@
+import { StateCreator } from 'zustand/esm';
+
+export type Flags = 'useEcharts';
+export interface ConfigState {
+  config: Record<Flags, boolean>;
+}
+export const createConfigSlice: StateCreator<ConfigState> = () => ({
+  config: {
+    useEcharts: !!localStorage?.getItem('USE_ECHARTS'),
+  },
+});
diff --git a/packages/react-components/src/store/index.ts b/packages/react-components/src/store/index.ts
@@ -1,12 +1,16 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { createTrendCursorsSlice, TrendCursorsState } from './trendCusorSlice';
+import { ConfigState, createConfigSlice, Flags } from './config';
 
-export type StateData = TrendCursorsState;
+export type StateData = TrendCursorsState & ConfigState;
 const useDataStore = create<StateData>()(
   devtools((...args) => ({
     ...createTrendCursorsSlice(...args),
+    ...createConfigSlice(...args),
   }))
 );
 
 export default useDataStore;
+
+export const getConfigValue = (configName: Flags) => useDataStore((state) => state.config[configName]);
diff --git a/packages/react-components/stories/chart/base-chart.stories.tsx b/packages/react-components/stories/chart/base-chart.stories.tsx
@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { MOCK_TIME_SERIES_DATA_QUERY, VIEWPORT } from './mock-data';
-import { TimeSelection, TimeSync, useViewport } from '../../src';
-import Chart from '../../src/components/chart';
+import { TimeSelection, TimeSync, useViewport, Chart } from '../../src';
 import { getTimeSeriesDataQuery, queryConfigured } from '../utils/query';
 import { ChartOptions } from '../../src/components/chart/types';
 

diff --git a/packages/react-components/stories/trend-cursor-sync/timesync.stories.tsx b/packages/react-components/stories/trend-cursor-sync/timesync.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import TrendCursorSync from '../../src/components/trend-cursor-sync';
-import Chart from '../../src/components/chart';
+import { Chart } from '../../src';
 import { MOCK_TIME_SERIES_DATA_QUERY, VIEWPORT } from '../chart/mock-data';
 
 export default {