fix(echarts): improved x+y axis min and max

awslabs · Oct 13, 2023 · 38741e2 · 38741e2
1 parent 0af5465
commit 38741e2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/packages/react-components/src/components/chart/baseChart.tsx b/packages/react-components/src/components/chart/baseChart.tsx
@@ -88,7 +88,7 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
 
   const viewportInMs = useViewportToMS(utilizedViewport);
 
-  const xAxis = getXAxis(viewportInMs, options.axis);
+  const xAxis = getXAxis(options.axis);
 
   // this will handle all the Trend Cursors operations
   const { onContextMenuClickHandler, trendCursors, hotKeyHandlers } = useTrendCursors({

diff --git a/packages/react-components/src/components/chart/converters/convertSeriesAndYAxis.ts b/packages/react-components/src/components/chart/converters/convertSeriesAndYAxis.ts
@@ -11,7 +11,7 @@ import { StyleSettingsMap, getChartStyleSettingsFromMap } from './convertStyles'
 import { convertYAxis as convertChartYAxis } from './convertAxis';
 import { convertThresholds } from './convertThresholds';
 import { ChartStyleSettingsWithDefaults } from '../utils/getStyles';
-import { DEEMPHASIZE_OPACITY, EMPHASIZE_SCALE_CONSTANT } from '../eChartsConstants';
+import { DEEMPHASIZE_OPACITY, DEFAULT_Y_AXIS, EMPHASIZE_SCALE_CONSTANT } from '../eChartsConstants';
 import { padYAxis, validateValue } from './padYAxis';
 
 const yAxisLegendGenerator =
@@ -215,6 +215,11 @@ export const useSeriesAndYAxis = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datastreamDeps, defaultYAxis, getStyles]);
 
+  const allSeriesEmpty = series.every((series: SeriesOption) => {
+    const data = series.data as Array<number[]>;
+    return data?.length === 0;
+  });
+
   let paddedYAxis: NonNullable<YAXisComponentOption | undefined>[] = yAxis;
   if (yMins.length === 0 && yMaxs.length === 0 && yAxis.length === 1) {
     const yAxisLabel: YAxisOptions = {
@@ -230,5 +235,5 @@ export const useSeriesAndYAxis = (
     series[0].markLine = convertedThresholds.markLine;
   }
 
-  return { series, yAxis: paddedYAxis, yMaxs, yMins };
+  return { series, yAxis: allSeriesEmpty ? [{ ...DEFAULT_Y_AXIS, min: 0, max: 10000 }] : paddedYAxis, yMaxs, yMins };
 };
diff --git a/packages/react-components/src/components/chart/hooks/useDataZoom.ts b/packages/react-components/src/components/chart/hooks/useDataZoom.ts
@@ -21,6 +21,8 @@ const onDataZoomEvent = (chart: EChartsType, setViewport: (viewport: Viewport, l
   }
 };
 
+// This hook handles all of the viewport related things, including:
+// panning, zooming, live mode
 export const useDataZoom = (chartRef: MutableRefObject<EChartsType | null>, viewportInMs: ViewportInMs) => {
   const { lastUpdatedBy, setViewport } = useViewport();
   const [isScrolling, setIsScrolling] = useState(false);
@@ -30,13 +32,12 @@ export const useDataZoom = (chartRef: MutableRefObject<EChartsType | null>, view
     viewportInMsRef.current = viewportInMs;
   }, [viewportInMs]);
 
-  // handle live mode
   useEffect(() => {
     const chart = chartRef.current;
     if (chart && (!isScrolling || lastUpdatedBy === 'date-picker')) {
       setIsScrolling(false);
       chart.setOption({
-        dataZoom: { ...DEFAULT_DATA_ZOOM, startValue: viewportInMs.initial, end: 100 },
+        dataZoom: { ...DEFAULT_DATA_ZOOM, startValue: viewportInMs.initial, endValue: viewportInMs.end },
       });
     }
     // ignoring because refs dont need to be in dependency array

diff --git a/packages/react-components/src/components/chart/utils/getXAxis.ts b/packages/react-components/src/components/chart/utils/getXAxis.ts
@@ -1,8 +1,8 @@
-import { ChartAxisOptions, ViewportInMs } from '../types';
+import { ChartAxisOptions } from '../types';
 import { DEFAULT_X_AXIS, DEFAULT_X_AXIS_ID } from '../eChartsConstants';
 import { XAXisOption } from 'echarts/types/dist/shared';
 
-export const getXAxis = (viewportInMs: ViewportInMs, axis?: ChartAxisOptions): XAXisOption => {
+export const getXAxis = (axis?: ChartAxisOptions): XAXisOption => {
   return {
     id: DEFAULT_X_AXIS_ID,
     show: axis?.showX ?? DEFAULT_X_AXIS.show,
@@ -18,7 +18,8 @@ export const getXAxis = (viewportInMs: ViewportInMs, axis?: ChartAxisOptions): X
       },
     },
     splitNumber: 6,
+    // hardcoding the x axis so that all viewport logic is managed exclusively by useDataZoom hooks
     min: 0,
-    max: viewportInMs.isDurationViewport ? viewportInMs.end : undefined,
+    max: 4102513200000, // Jan 01 2100 19:00:00 UTC
   };
 };