fix(react-components): updating echarts ux

awslabs · Sep 11, 2023 · ddfc9c8 · ddfc9c8
1 parent 7c0eaf4
commit ddfc9c8
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 80 deletions.
diff --git a/packages/dashboard/src/customization/widgets/barChart/component.tsx b/packages/dashboard/src/customization/widgets/barChart/component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { BarChart, Chart, getConfigValue } from '@iot-app-kit/react-components';
+import { BarChart } from '@iot-app-kit/react-components';
 
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
@@ -16,7 +16,6 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
   const readOnly = useSelector((state: DashboardState) => state.readOnly);
   const dashboardSignificantDigits = useSelector((state: DashboardState) => state.significantDigits);
   const chartSize = useChartSize(widget);
-  const showEcharts = getConfigValue('useEcharts');
 
   const {
     queryConfig,
@@ -28,33 +27,10 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
   } = widget.properties;
 
   const { iotSiteWiseQuery } = useQueries();
-
   const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
   const key = computeQueryConfigKey(viewport, queryConfig);
   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
-        defaultVisualizationType='bar'
-        key={key}
-        queries={queries}
-        viewport={viewport}
-        gestures={readOnly}
-        axis={axis}
-        aggregationType={aggregateToString(aggregation)}
-        styleSettings={styleSettings}
-        thresholds={thresholds}
-        thresholdSettings={thresholdSettings}
-        significantDigits={significantDigits}
-        size={size}
-      />
-    );
-  }
 
   return (
     <BarChart

diff --git a/packages/react-components/src/components/chart/baseChart.tsx b/packages/react-components/src/components/chart/baseChart.tsx
@@ -107,8 +107,8 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
 
   // adapt chart options into echarts options
   const convertedOptions = useConvertedOptions({
-    ...options,
-    title: series.length === 0 ? 'No data present' : '',
+    series,
+    options,
   });
 
   // determine the set option settings

diff --git a/packages/react-components/src/components/chart/converters/convertOptions.ts b/packages/react-components/src/components/chart/converters/convertOptions.ts
@@ -1,40 +1,42 @@
-import { ChartOptions } from '../types';
-import { EChartsOption } from 'echarts';
-import { DEFAULT_DATA_ZOOM, DEFAULT_TOOL_BOX } from '../eChartsConstants';
+import { DEFAULT_TOOL_BOX } from '../eChartsConstants';
 import { convertGrid } from './convertGrid';
 import { convertTooltip } from './convertTooltip';
 import { useMemo } from 'react';
+import { ChartOptions } from '../types';
+import { EChartsOption, SeriesOption } from 'echarts';
 
 type ConvertChartOptions = Pick<
   ChartOptions,
-  'backgroundColor' | 'axis' | 'gestures' | 'legend' | 'significantDigits'
-> & { title?: string };
-
-/**
- * @param options options object to adapt to the echarts
- * @returns adapted echarts options
- */
-export const convertOptions = (options: ConvertChartOptions): EChartsOption => {
-  const { backgroundColor, legend, significantDigits, title } = options;
-  return {
-    title: {
-      text: title, // options.seriesLength === 0 ? 'No data present' : '',
-    },
-    backgroundColor,
-    grid: convertGrid(legend),
-    dataZoom: { ...DEFAULT_DATA_ZOOM },
-    tooltip: convertTooltip(significantDigits),
-    toolbox: DEFAULT_TOOL_BOX,
-  };
-};
+  'backgroundColor' | 'axis' | 'gestures' | 'legend' | 'significantDigits' | 'titleText' | 'defaultVisualizationType'
+>;
 
 /**
  * Hook that adapts chart options to echarts options.
  *
  * @param options options object to adapt to the echarts
+ * @param series options object to adapt to the echarts
  * @returns memoized adapted echarts options
  */
-export const useConvertedOptions = (options: ConvertChartOptions) => {
-  const { backgroundColor, axis, gestures, significantDigits, title } = options;
-  return useMemo(() => convertOptions(options), [backgroundColor, axis, gestures, significantDigits, title]);
+export const useConvertedOptions = ({
+  series,
+  options,
+}: {
+  options: ConvertChartOptions;
+  series: SeriesOption[];
+}): EChartsOption => {
+  const { backgroundColor, axis, significantDigits, titleText, defaultVisualizationType } = options;
+  const text = series.length === 0 ? 'No data present' : titleText ?? defaultVisualizationType ?? '';
+  return useMemo(
+    () => ({
+      title: {
+        text,
+        top: 10,
+      },
+      backgroundColor,
+      grid: convertGrid(options.legend),
+      tooltip: convertTooltip(significantDigits),
+      toolbox: DEFAULT_TOOL_BOX,
+    }),
+    [backgroundColor, axis, significantDigits, text]
+  );
 };
diff --git a/packages/react-components/src/components/chart/converters/converters.spec.ts b/packages/react-components/src/components/chart/converters/converters.spec.ts
@@ -4,11 +4,12 @@ import { convertYAxis } from './convertAxis';
 import { convertDataPoint } from './convertDataPoint';
 import { convertGrid } from './convertGrid';
 import { convertLegend } from './convertLegend';
-import { convertOptions } from './convertOptions';
 import { convertSeriesAndYAxis } from './convertSeriesAndYAxis';
 import { convertTooltip } from './convertTooltip';
 import { convertStyles } from './convertStyles';
 import { convertThresholds } from './convertThresholds';
+import { useConvertedOptions } from './convertOptions';
+import { renderHook } from '@testing-library/react';
 
 const MOCK_AXIS = {
   yAxisLabel: 'Y Value',
@@ -73,15 +74,15 @@ describe('testing converters', () => {
   });
 
   it('converts chart options to echarts options', async () => {
-    const convertedOptions = convertOptions({
-      backgroundColor: 'white',
-      axis: MOCK_AXIS,
-      legend: MOCK_LEGEND,
-      significantDigits: 2,
-    });
-
-    expect(convertedOptions).toHaveProperty('backgroundColor', 'white');
-    expect(convertedOptions).toHaveProperty('grid.bottom', 50);
+    const { result } = renderHook(() =>
+      useConvertedOptions({
+        options: { backgroundColor: 'white', axis: MOCK_AXIS, legend: MOCK_LEGEND, significantDigits: 2 },
+        series: [],
+      })
+    );
+
+    expect(result.current).toHaveProperty('backgroundColor', 'white');
+    expect(result.current).toHaveProperty('grid.bottom', 50);
   });
   it('converts empty series data to echarts data', async () => {
     const options = {

diff --git a/packages/react-components/src/components/chart/eChartsConstants.ts b/packages/react-components/src/components/chart/eChartsConstants.ts
@@ -97,7 +97,9 @@ export const TREND_CURSOR_LINE_MARKERS_GRAPHIC_INDEX = 3;
 // resize constants
 export const CHART_RESIZE_INITIAL_FACTOR = 0.75;
 export const CHART_RESIZE_MIN_FACTOR = 0.3;
-export const CHART_RESIZE_MAX_FACTOR = 0.75;
+
+// this is an arbitrary value, so that user can almost "close" the legend section if they want to
+export const CHART_RESIZE_MAX_FACTOR = 0.85;
 
 export const MULTI_Y_AXIS_LEGEND_WIDTH = 172;
 

diff --git a/packages/react-components/src/components/chart/types.ts b/packages/react-components/src/components/chart/types.ts
@@ -97,6 +97,7 @@ export type ChartOptions = {
   theme?: string;
   groupId?: string;
   id?: string;
+  titleText?: string;
 };
 
 export interface ViewportInMs {

diff --git a/packages/react-components/stories/chart/base-chart.stories.tsx b/packages/react-components/stories/chart/base-chart.stories.tsx
@@ -5,7 +5,7 @@ import { TimeSelection, TimeSync, useViewport, Chart } from '../../src';
 import { getTimeSeriesDataQuery, queryConfigured } from '../utils/query';
 import { ChartOptions, Visualization } from '../../src/components/chart/types';
 
-const chartTypes: Visualization[] = ['line', 'scatter', 'bar', 'step-start', 'step-middle', 'step-end'];
+const chartTypes: Visualization[] = ['line', 'scatter', 'step-start', 'step-middle', 'step-end']; // removing bar for now
 export default {
   title: 'Widgets/Base Chart',
   component: Chart,
@@ -36,20 +36,17 @@ export const BaseChartExample: ComponentStory<FC<StoryInputs>> = ({ id, signific
         <TimeSelection />
         <br />
         {chartTypes.map((chartType, index) => (
-          <>
-            <h3>{chartType}</h3>
-            <Chart
-              key={index}
-              id={id}
-              defaultVisualizationType={chartType}
-              significantDigits={significantDigits}
-              size={size}
-              styleSettings={styleSettings}
-              viewport={viewport ?? VIEWPORT}
-              queries={[MOCK_TIME_SERIES_DATA_QUERY]}
-              theme='light'
-            />
-          </>
+          <Chart
+            key={index}
+            id={id}
+            defaultVisualizationType={chartType}
+            significantDigits={significantDigits}
+            size={size}
+            styleSettings={styleSettings}
+            viewport={viewport ?? VIEWPORT}
+            queries={[MOCK_TIME_SERIES_DATA_QUERY]}
+            theme='light'
+          />
         ))}
       </div>
     </TimeSync>

diff --git a/packages/react-components/stories/trend-cursor-sync/timesync.stories.tsx b/packages/react-components/stories/trend-cursor-sync/timesync.stories.tsx
@@ -5,7 +5,7 @@ import { Chart } from '../../src';
 import { MOCK_TIME_SERIES_DATA_QUERY, VIEWPORT } from '../chart/mock-data';
 import { Visualization } from '../../src/components/chart/types';
 
-const chartTypes: Visualization[] = ['line', 'scatter', 'bar', 'step-start', 'step-middle', 'step-end'];
+const chartTypes: Visualization[] = ['line', 'scatter', 'step-start', 'step-middle', 'step-end'];
 export default {
   title: 'Builder Components/TrendCursorSync/TrendCursorSync',
   component: TrendCursorSync,