fix(react-components): updating echarts with the fixes founf during b…

…ug bash
awslabs · Sep 18, 2023 · 9f32c21 · 9f32c21
1 parent 632f7a2
commit 9f32c21
Show file tree

Hide file tree

Showing 15 changed files with 26 additions and 67 deletions.
diff --git a/packages/dashboard/src/customization/widgets/scatterChart/component.tsx b/packages/dashboard/src/customization/widgets/scatterChart/component.tsx
@@ -44,7 +44,7 @@ const ScatterChartWidgetComponent: React.FC<ScatterChartWidget> = (widget) => {
     return (
       <WidgetTile widget={widget} removeable title='Scatter Chart'>
         <Chart
-          defaultVisualizationType='bar'
+          defaultVisualizationType='scatter'
           key={key}
           queries={queries}
           viewport={viewport}

diff --git a/packages/react-components/src/components/chart/chart.css b/packages/react-components/src/components/chart/chart.css
@@ -21,6 +21,7 @@
 
 .base-chart-element {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .base-chart-container {

diff --git a/packages/react-components/src/components/chart/converters/convertOptions.ts b/packages/react-components/src/components/chart/converters/convertOptions.ts
@@ -1,4 +1,3 @@
-import { DEFAULT_TOOL_BOX } from '../eChartsConstants';
 import { convertGrid } from './convertGrid';
 import { convertTooltip } from './convertTooltip';
 import { useMemo } from 'react';
@@ -7,7 +6,7 @@ import { EChartsOption, SeriesOption } from 'echarts';
 
 type ConvertChartOptions = Pick<
   ChartOptions,
-  'backgroundColor' | 'axis' | 'gestures' | 'legend' | 'significantDigits' | 'titleText' | 'defaultVisualizationType'
+  'backgroundColor' | 'axis' | 'gestures' | 'legend' | 'significantDigits' | 'titleText'
 >;
 
 /**
@@ -24,8 +23,8 @@ export const useConvertedOptions = ({
   options: ConvertChartOptions;
   series: SeriesOption[];
 }): EChartsOption => {
-  const { backgroundColor, axis, significantDigits, titleText, defaultVisualizationType } = options;
-  const text = series.length === 0 ? 'No data present' : titleText ?? defaultVisualizationType ?? '';
+  const { backgroundColor, axis, significantDigits, titleText } = options;
+  const text = series.length === 0 ? 'No data present' : titleText ?? '';
   return useMemo(
     () => ({
       aria: {
@@ -38,7 +37,6 @@ export const useConvertedOptions = ({
       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/eChartsConstants.ts b/packages/react-components/src/components/chart/eChartsConstants.ts
@@ -4,7 +4,6 @@ import type {
   LegendComponentOption,
   TooltipComponentOption,
   DataZoomComponentOption,
-  ToolboxComponentOption,
 } from 'echarts';
 
 export const DEFAULT_X_AXIS: XAXisComponentOption = {
@@ -51,16 +50,6 @@ export const DEFAULT_DATA_ZOOM: DataZoomComponentOption = {
   moveOnMouseWheel: false,
 };
 
-export const DEFAULT_TOOL_BOX: ToolboxComponentOption = {
-  show: true,
-  showTitle: false,
-  feature: {
-    saveAsImage: {},
-  },
-  top: 10,
-  right: 10,
-};
-
 export const DEFAULT_X_AXIS_ID = 'default-x-Axis';
 
 export const DEFAULT_CHART_VISUALIZATION = 'line' as const;

diff --git a/packages/react-components/src/components/chart/hooks/useChartsLegend.tsx b/packages/react-components/src/components/chart/hooks/useChartsLegend.tsx
@@ -76,7 +76,6 @@ const useChartsLegend = ({
   const getHeaderNode = (g: InternalGraphicComponentGroupOption) => (
     <div className='base-chart-legend-tc-header-container'>
       <div>{getTcHeader((g.children[1] as GraphicComponentTextOption)?.style?.text ?? '')}</div>
-      <div style={{ backgroundColor: g.headerColor }} className='base-chart-legend-tc-header-color-marker' />
     </div>
   );
 

diff --git a/packages/react-components/src/components/chart/hooks/useTrendCursors.ts b/packages/react-components/src/components/chart/hooks/useTrendCursors.ts
@@ -3,7 +3,7 @@ import useDataStore from '../../../store';
 import handleResize from '../utils/handleResize';
 import handleSync from '../utils/handleSync';
 import useTrendCursorsEvents from './useTrendCursorsEvents';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { handleViewport } from '../utils/handleViewport';
 import { DEBUG_TREND_CURSORS } from '../eChartsConstants';
 
@@ -54,7 +54,10 @@ const useTrendCursors = ({
 
   handleViewport({ graphic, setGraphic, viewportInMs, size, series, chartRef, visualization });
 
-  return { onContextMenuClickHandler, hotKeyHandlers, trendCursors: graphic };
+  return useMemo(
+    () => ({ onContextMenuClickHandler, hotKeyHandlers, trendCursors: graphic }),
+    [graphic, onContextMenuClickHandler, hotKeyHandlers]
+  );
 };
 
 export default useTrendCursors;
diff --git a/packages/react-components/src/components/chart/hooks/useTrendCursorsEvents.ts b/packages/react-components/src/components/chart/hooks/useTrendCursorsEvents.ts
@@ -9,8 +9,6 @@ import useDataStore from '../../../store';
 import { Action } from '../contextMenu/ChartContextMenu';
 import copy from 'copy-to-clipboard';
 
-let trendCursorStaticIndex = 0;
-
 const useTrendCursorsEvents = ({
   chartRef,
   graphic,
@@ -66,12 +64,10 @@ const useTrendCursorsEvents = ({
           groupId: groupId ?? '',
           tcId: `trendCursor-${uuid()}`,
           timestamp: timestampInMs,
-          tcHeaderColorIndex: trendCursorStaticIndex++,
         });
       } else {
         const newTc = getNewTrendCursor({
           size: sizeRef.current,
-          tcHeaderColorIndex: trendCursorStaticIndex++,
           series: seriesRef.current,
           x: posX,
           chartRef,

diff --git a/packages/react-components/src/components/chart/tests/getTrendCursor.spec.tsx b/packages/react-components/src/components/chart/tests/getTrendCursor.spec.tsx
@@ -50,14 +50,13 @@ describe('Testing getNewTrendCursor file', () => {
       const newTrendCursor = getNewTrendCursor({
         e: mockEvent,
         size: mockSize,
-        tcHeaderColorIndex: 0,
         series: mockSeries,
         chartRef: result.current.chartRef,
         visualization: DEFAULT_CHART_VISUALIZATION,
       });
 
       expect(newTrendCursor).not.toBeNull();
-      expect(newTrendCursor.children.length).toBe(4);
+      expect(newTrendCursor?.children.length).toBe(4);
     });
   });
 
@@ -68,7 +67,6 @@ describe('Testing getNewTrendCursor file', () => {
       const newTrendCursor = getNewTrendCursor({
         e: mockEvent,
         size: mockSize,
-        tcHeaderColorIndex: 0,
         series: mockSeries,
         chartRef: result.current.chartRef,
         visualization: DEFAULT_CHART_VISUALIZATION,
@@ -86,7 +84,7 @@ describe('Testing getNewTrendCursor file', () => {
         visualization: DEFAULT_CHART_VISUALIZATION,
       });
       expect(newTrendCursor).not.toBeNull();
-      expect(newTrendCursor.timestampInMs).toBe(1689271200000);
+      expect(newTrendCursor?.timestampInMs).toBe(1689271200000);
     });
   });
 });
diff --git a/packages/react-components/src/components/chart/tests/handleSync.spec.tsx b/packages/react-components/src/components/chart/tests/handleSync.spec.tsx
@@ -40,7 +40,6 @@ describe('handleSync', () => {
         group1: {
           'trendCursor-1': {
             timestamp: Date.now(),
-            tcHeaderColorIndex: 0,
           },
         },
       },
@@ -70,7 +69,6 @@ describe('handleSync', () => {
         group1: {
           'trendCursor-1': {
             timestamp: newTime,
-            tcHeaderColorIndex: 0,
           },
         },
       },

diff --git a/packages/react-components/src/components/chart/tests/handleSyncTrendCursors.spec.ts b/packages/react-components/src/components/chart/tests/handleSyncTrendCursors.spec.ts
@@ -14,7 +14,7 @@ describe('calculateSyncDelta', () => {
   it('return toBeCreated when there is a new sync TC', () => {
     const timestamp = Date.parse('2023-07-13T16:00:00.000Z') + 1000 * 60 * 60 * 2; // 1689271200000
     const delta = calculateSyncDelta({
-      syncedTrendCursors: { 'trendCursor-1': { timestamp, tcHeaderColorIndex: 0 } },
+      syncedTrendCursors: { 'trendCursor-1': { timestamp } },
       graphic: [],
     });
     expect(delta).toStrictEqual({
@@ -27,7 +27,7 @@ describe('calculateSyncDelta', () => {
   it('return toBeUpdated the timestamps do not match', () => {
     const timestamp = Date.parse('2023-07-13T16:00:00.000Z') + 1000 * 60 * 60 * 2; // 1689271200000
     const delta = calculateSyncDelta({
-      syncedTrendCursors: { 'trendCursor-1': { timestamp, tcHeaderColorIndex: 0 } },
+      syncedTrendCursors: { 'trendCursor-1': { timestamp } },
       graphic: [
         {
           id: 'trendCursor-1',

diff --git a/packages/react-components/src/components/chart/types.ts b/packages/react-components/src/components/chart/types.ts
@@ -73,7 +73,6 @@ export type ChartStyleSettings = {
 export type InternalGraphicComponentGroupOption = {
   timestampInMs: number;
   yAxisMarkerValue: number[];
-  headerColor: string;
 } & GraphicComponentGroupOption;
 
 export type ChartEventType = { target: { id?: OptionId }; offsetX?: number };
@@ -141,7 +140,6 @@ export interface UseTrendCursorsProps {
 export interface GetNewTrendCursorProps {
   e?: ElementEvent;
   size: SizeConfig;
-  tcHeaderColorIndex: number;
   series: SeriesOption[];
   tcId?: string;
   x?: number;

diff --git a/packages/react-components/src/components/chart/utils/getTrendCursor.ts b/packages/react-components/src/components/chart/utils/getTrendCursor.ts
@@ -6,7 +6,6 @@ import {
   TREND_CURSOR_CLOSE_GRAPHIC_INDEX,
   TREND_CURSOR_DELETE_BUTTON_HEIGHT,
   TREND_CURSOR_HEADER_BACKGROUND_COLOR,
-  TREND_CURSOR_HEADER_COLORS,
   TREND_CURSOR_HEADER_GRAPHIC_INDEX,
   TREND_CURSOR_HEADER_OFFSET,
   TREND_CURSOR_HEADER_TEXT_COLOR,
@@ -134,15 +133,15 @@ const addTCLine = (uId: string, size: SizeConfig) => ({
   id: `line-${uId}`,
   draggable: 'horizontal' as const,
   shape: {
-    y1: DEFAULT_MARGIN,
+    y1: DEFAULT_MARGIN - 6,
     y2: size.height - DEFAULT_MARGIN,
   },
   style: {
     stroke: TREND_CURSOR_LINE_COLOR,
     lineWidth: TREND_CURSOR_LINE_WIDTH,
   },
 });
-const addTCHeader = (uId: string, timestampInMs: number, headerColor: string): GraphicComponentTextOption => ({
+const addTCHeader = (uId: string, timestampInMs: number): GraphicComponentTextOption => ({
   type: 'text',
   z: TREND_CURSOR_Z_INDEX + 1,
   id: `text-${uId}`,
@@ -152,11 +151,6 @@ const addTCHeader = (uId: string, timestampInMs: number, headerColor: string): G
     fill: TREND_CURSOR_HEADER_TEXT_COLOR,
     align: 'center',
     rich: {
-      title: {
-        width: TREND_CURSOR_HEADER_WIDTH + 5, // width plus padding
-        backgroundColor: headerColor,
-        height: 6,
-      },
       timestamp: {
         width: TREND_CURSOR_HEADER_WIDTH,
         backgroundColor: TREND_CURSOR_HEADER_BACKGROUND_COLOR,
@@ -217,7 +211,6 @@ const addTCMarkers = (uId: string, yAxisMarkers: number[], series: SeriesOption[
 export const getNewTrendCursor = ({
   e,
   size,
-  tcHeaderColorIndex,
   series,
   tcId,
   x,
@@ -227,26 +220,22 @@ export const getNewTrendCursor = ({
 }: GetNewTrendCursorProps) => {
   const posX = e?.offsetX ?? x ?? 0;
   const uId = tcId ? tcId.split('trendCursor-')[1] : uuid();
-  // TODO: test this once echarts live mode is supported
   const timestampInMs = timestamp ?? calculateTimeStamp(posX, chartRef);
-
   const boundedX = setXWithBounds(size, posX);
-  // TODO: test this once echarts live mode is supported
+
   const { trendCursorsSeriesMakersValue, trendCursorsSeriesMakersInPixels } = calculateTrendCursorsSeriesMakers(
     series,
     timestampInMs,
     chartRef,
     visualization
   );
   // rotate the colors in a round-robin fashion
-  const headerColor = TREND_CURSOR_HEADER_COLORS[tcHeaderColorIndex % TREND_CURSOR_HEADER_COLORS.length];
   return {
     id: tcId ?? `trendCursor-${uId}`,
     $action: 'merge' as const,
     type: 'group' as const,
     timestampInMs,
     yAxisMarkerValue: trendCursorsSeriesMakersValue,
-    headerColor,
     x: boundedX,
     // update the Y of the series markers
     //   childIndex --> purpose
@@ -257,7 +246,7 @@ export const getNewTrendCursor = ({
     // from index 3 --> series markers
     children: [
       addTCLine(uId, size),
-      addTCHeader(uId, timestampInMs, headerColor),
+      addTCHeader(uId, timestampInMs),
       addTCDeleteButton(uId),
       ...addTCMarkers(uId, trendCursorsSeriesMakersInPixels, series),
     ],

diff --git a/packages/react-components/src/components/chart/utils/handleSync.ts b/packages/react-components/src/components/chart/utils/handleSync.ts
@@ -23,7 +23,7 @@ const handleSync = ({
     });
 
     // if no changes, we skip setting the state
-    if (toBeAdded.length || toBeDeleted.length || toBeUpdated.length) {
+    if ((toBeAdded.length || toBeDeleted.length || toBeUpdated.length) && series.length > 0) {
       // add a new trend cursor
       if (toBeAdded.length) {
         toBeAdded.forEach((tcId) => {
@@ -33,7 +33,6 @@ const handleSync = ({
               tcId,
               timestamp,
               size,
-              tcHeaderColorIndex: (syncedTrendCursors ?? {})[tcId].tcHeaderColorIndex,
               series,
               x: calculateXFromTimestamp(timestamp, chartRef),
               chartRef,

diff --git a/packages/react-components/src/components/chart/utils/trendCursorCalculations.ts b/packages/react-components/src/components/chart/utils/trendCursorCalculations.ts
@@ -46,7 +46,6 @@ export const setXWithBounds = (size: SizeConfig, x: number) => {
 export const getTrendCursorHeaderTimestampText = (timestampInMs: number) => {
   return [
     `{timestamp|${new Date(timestampInMs).toLocaleDateString()} ${new Date(timestampInMs).toLocaleTimeString()}}`,
-    '{title|}',
   ].join('\n');
 };
 
@@ -87,8 +86,10 @@ export const calculateTrendCursorsSeriesMakers = (
     const { leftIndex, rightIndex } = getLeftRightIndexes(data, timestampInMs);
     let value = 0;
 
-    // There is no Left value , so we take the first available value
-    if (leftIndex < 0) {
+    if (data.length === 0) {
+      value = 0;
+    } else if (leftIndex < 0) {
+      // There is no Left value , so we take the first available value
       value = data[0][1];
     } else if (rightIndex === data.length) {
       // There is no right value , so we take the last available value

diff --git a/packages/react-components/src/store/trendCusorSlice.ts b/packages/react-components/src/store/trendCusorSlice.ts
@@ -3,7 +3,6 @@ import { StateCreator } from 'zustand';
 export interface TrendCursorGroup {
   [tcId: string]: {
     timestamp: number;
-    tcHeaderColorIndex: number;
   };
 }
 export interface TrendCursorGroups {
@@ -16,16 +15,7 @@ export interface TrendCursorsData {
 export interface TrendCursorsState extends TrendCursorsData {
   addTrendCursorsGroup: (groupId: string) => void;
   deleteTrendCursorsGroup: (groupId: string) => void;
-  addTrendCursors: ({
-    groupId,
-    tcId,
-    timestamp,
-  }: {
-    groupId: string;
-    tcId: string;
-    timestamp: number;
-    tcHeaderColorIndex: number;
-  }) => void;
+  addTrendCursors: ({ groupId, tcId, timestamp }: { groupId: string; tcId: string; timestamp: number }) => void;
   updateTrendCursors: ({ groupId, tcId, timestamp }: { groupId: string; tcId: string; timestamp: number }) => void;
   deleteTrendCursors: ({ groupId, tcId }: { groupId: string; tcId: string }) => void;
 }
@@ -40,12 +30,12 @@ export const createTrendCursorsSlice: StateCreator<TrendCursorsState> = (set) =>
       delete allGroups[groupId];
       return Object.assign({}, state, { trendCursorGroups: allGroups });
     }),
-  addTrendCursors: ({ groupId, tcId, timestamp, tcHeaderColorIndex }) =>
+  addTrendCursors: ({ groupId, tcId, timestamp }) =>
     set((state) =>
       Object.assign({}, state, {
         trendCursorGroups: {
           ...state.trendCursorGroups,
-          [groupId]: { ...state.trendCursorGroups[groupId], [tcId]: { timestamp, tcHeaderColorIndex } },
+          [groupId]: { ...state.trendCursorGroups[groupId], [tcId]: { timestamp } },
         },
       })
     ),