feat(dashboard): add colors to trendcursors

awslabs · Dec 18, 2023 · a890c7d · a890c7d
1 parent bfbe7b2
commit a890c7d
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 45 deletions.
diff --git a/packages/react-components/src/components/chart/legend/legend.css b/packages/react-components/src/components/chart/legend/legend.css
@@ -56,3 +56,8 @@
   flex-direction: column;
   align-items: center;
 }
+
+.base-chart-legend-tc-header-color {
+  width: 100%;
+  height: 4px;
+}
diff --git a/packages/react-components/src/components/chart/legend/useChartsLegend.tsx b/packages/react-components/src/components/chart/legend/useChartsLegend.tsx
@@ -1,6 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { TableProps } from '@cloudscape-design/components/table/interfaces';
-import { GraphicComponentTextOption } from 'echarts/types/src/component/graphic/GraphicModel';
+import {
+  GraphicComponentGroupOption,
+  GraphicComponentTextOption,
+} from 'echarts/types/src/component/graphic/GraphicModel';
 import { SeriesOption } from 'echarts';
 import { LineSeriesOption } from 'echarts/types/src/chart/line/LineSeries';
 import { DataStream } from '@iot-app-kit/core';
@@ -105,11 +108,16 @@ 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>
-  );
+  const getHeaderNode = (g: InternalGraphicComponentGroupOption) => {
+    const headerGroup = g.children[1] as GraphicComponentGroupOption;
+    const text = headerGroup.children.find((c) => c.type === 'text') as GraphicComponentTextOption;
+    return (
+      <div className='base-chart-legend-tc-header-container'>
+        <div>{getTcHeader(text?.style?.text ?? '')}</div>
+        <div className='base-chart-legend-tc-header-color' style={{ backgroundColor: g.color }} />
+      </div>
+    );
+  };
 
   const [columnDefinitions, setColumnDefinitions] = useState<Array<TableProps.ColumnDefinition<object>>>([
     legendColumnDefinition,

diff --git a/...act-components/src/components/chart/trendCursor/getTrendCursor/components/header/index.ts b/...act-components/src/components/chart/trendCursor/getTrendCursor/components/header/index.ts
@@ -1,4 +1,3 @@
-import { GraphicComponentTextOption } from 'echarts/types/src/component/graphic/GraphicModel';
 import {
   TREND_CURSOR_HEADER_BACKGROUND_COLOR,
   TREND_CURSOR_HEADER_OFFSET,
@@ -8,26 +7,47 @@ import {
 } from '../../../constants';
 import { getTrendCursorHeaderTimestampText } from '../../../calculations/timestamp';
 
-export const addTCHeader = (uId: string, timestampInMs: number): GraphicComponentTextOption => ({
-  type: 'text',
-  z: TREND_CURSOR_Z_INDEX + 1,
-  id: `text-${uId}`,
+export const addTCHeader = (uId: string, timestampInMs: number, color?: string) => ({
+  type: 'group',
+  id: `header-${uId}`,
   draggable: 'horizontal' as const,
-  style: {
-    y: TREND_CURSOR_HEADER_OFFSET,
-    text: getTrendCursorHeaderTimestampText(timestampInMs),
-    fill: TREND_CURSOR_HEADER_TEXT_COLOR,
-    align: 'center',
-    rich: {
-      timestamp: {
-        width: TREND_CURSOR_HEADER_WIDTH,
-        backgroundColor: TREND_CURSOR_HEADER_BACKGROUND_COLOR,
-        height: 16,
-        fontSize: 9,
-        fontWeight: 'bold',
-        align: 'left',
-        padding: [1, 0, 0, 5],
+  children: [
+    {
+      type: 'text',
+      z: TREND_CURSOR_Z_INDEX + 1,
+      id: `text-${uId}`,
+      style: {
+        y: TREND_CURSOR_HEADER_OFFSET,
+        text: getTrendCursorHeaderTimestampText(timestampInMs),
+        fill: TREND_CURSOR_HEADER_TEXT_COLOR,
+        align: 'center',
+        rich: {
+          timestamp: {
+            width: TREND_CURSOR_HEADER_WIDTH,
+            backgroundColor: TREND_CURSOR_HEADER_BACKGROUND_COLOR,
+            height: 16,
+            fontSize: 9,
+            fontWeight: 'bold',
+            align: 'left',
+            padding: [1, 0, 0, 5],
+          },
+        },
       },
     },
-  },
+    {
+      type: 'rect',
+      id: `header-rect-${uId}`,
+      z: TREND_CURSOR_Z_INDEX + 2,
+      shape: {
+        x: -TREND_CURSOR_HEADER_WIDTH / 2 - 2.5,
+        y: TREND_CURSOR_HEADER_OFFSET + 17,
+        width: TREND_CURSOR_HEADER_WIDTH + 5,
+        height: 6,
+      },
+      style: {
+        fill: color,
+        lineWidth: 0,
+      },
+    },
+  ],
 });
diff --git a/packages/react-components/src/components/chart/trendCursor/getTrendCursor/getTrendCursor.ts b/packages/react-components/src/components/chart/trendCursor/getTrendCursor/getTrendCursor.ts
@@ -23,6 +23,7 @@ export const getNewTrendCursor = ({
   chartRef,
   visualization,
   significantDigits,
+  color,
 }: GetNewTrendCursorProps) => {
   const posX = e?.offsetX ?? x ?? 0;
   const uId = tcId ? tcId.split('trendCursor-')[1] : uuid();
@@ -51,6 +52,7 @@ export const getNewTrendCursor = ({
     timestampInMs,
     yAxisMarkerValue: trendCursorsSeriesMakersValue,
     x: boundedX,
+    color,
     // update the Y of the series markers
     //   childIndex --> purpose
     // -----------------------------
@@ -60,7 +62,7 @@ export const getNewTrendCursor = ({
     // from index 3 --> series markers
     children: [
       addTCLine(uId, size),
-      addTCHeader(uId, timestampInMs),
+      addTCHeader(uId, timestampInMs, color),
       addTCDeleteButton(uId),
       ...addTCMarkers(uId, trendCursorsSeriesMakersInPixels, series),
     ],

diff --git a/...ges/react-components/src/components/chart/trendCursor/mouseEvents/handlers/drag/update.ts b/...ges/react-components/src/components/chart/trendCursor/mouseEvents/handlers/drag/update.ts
@@ -21,13 +21,23 @@ const onDragUpdateTrendCursorLine = (elements: GraphicComponentElementOption[])
 };
 const onDragUpdateTrendCursorHeaderText = (elements: GraphicComponentElementOption[], timeInMs: number) => {
   const headerGraphic = elements[TREND_CURSOR_HEADER_GRAPHIC_INDEX];
+  headerGraphic.x = 0;
+
+  const children = headerGraphic.children ?? [];
+  const textGraphic = children.find((c) => c.type === 'text');
+  const restGraphic = children.filter((c) => c.type !== 'text');
+  if (!textGraphic) return headerGraphic;
+
   // update the timestamp on the header
-  (headerGraphic as GraphicComponentTextOption).style = {
-    ...(headerGraphic as GraphicComponentTextOption).style,
+  (textGraphic as GraphicComponentTextOption).style = {
+    ...(textGraphic as GraphicComponentTextOption).style,
     text: getTrendCursorHeaderTimestampText(timeInMs),
   };
-  headerGraphic.x = 0;
-  return headerGraphic;
+
+  return {
+    ...headerGraphic,
+    children: [textGraphic, ...restGraphic],
+  };
 };
 export const onDragUpdateTrendCursorElements = ({
   elements,

diff --git a/...es/react-components/src/components/chart/trendCursor/mouseEvents/useTrendCursorsEvents.ts b/...es/react-components/src/components/chart/trendCursor/mouseEvents/useTrendCursorsEvents.ts
@@ -27,6 +27,7 @@ const useTrendCursorsEvents = ({
   onContextMenu,
   visualization,
   significantDigits,
+  getColor,
 }: UseEventsProps) => {
   // sync mode actions
   const addTrendCursorsToSyncState = useDataStore((state) => state.addTrendCursors);
@@ -75,6 +76,7 @@ const useTrendCursorsEvents = ({
             chartRef,
             visualization: visualizationRef.current,
             significantDigits: significantDigitsRef.current,
+            color: getColor(),
           });
 
           if (newTc) {
@@ -89,7 +91,7 @@ const useTrendCursorsEvents = ({
         });
       }
     },
-    [chartRef, addTrendCursorsToSyncState, groupId]
+    [chartRef, addTrendCursorsToSyncState, groupId, getColor]
   );
 
   // shared delete function between the context menu and on click actions

diff --git a/packages/react-components/src/components/chart/trendCursor/sync/useHandleSync.ts b/packages/react-components/src/components/chart/trendCursor/sync/useHandleSync.ts
@@ -16,6 +16,7 @@ const useHandleSync = ({
   groupId,
   visualization,
   significantDigits,
+  getColor,
 }: UseSyncProps) => {
   const syncedTrendCursors = useDataStore((state) => state.trendCursorGroups[groupId ?? '']);
 
@@ -41,6 +42,7 @@ const useHandleSync = ({
             chartRef,
             visualization,
             significantDigits,
+            color: getColor(),
           });
           if (newTC) {
             graphic.push(newTC);

diff --git a/packages/react-components/src/components/chart/trendCursor/tests/getTrendCursor.spec.tsx b/packages/react-components/src/components/chart/trendCursor/tests/getTrendCursor.spec.tsx
@@ -113,7 +113,7 @@ describe('Testing getNewTrendCursor file', () => {
     });
     it('addTCHeader', () => {
       const newTTCHeader = addTCHeader('ID', 0);
-      expect(newTTCHeader.id).toBe('text-ID');
+      expect(newTTCHeader.id).toBe('header-ID');
     });
     it('addTCDeleteButton', () => {
       const newTCDeleteButton = addTCDeleteButton('ID');

diff --git a/packages/react-components/src/components/chart/trendCursor/tests/handleSync.spec.tsx b/packages/react-components/src/components/chart/trendCursor/tests/handleSync.spec.tsx
@@ -6,6 +6,7 @@ import useDataStore from '../../../../store';
 import { useECharts } from '../../../../hooks/useECharts';
 import { DEFAULT_CHART_VISUALIZATION } from '../../eChartsConstants';
 import { InternalGraphicComponentGroupOption } from '../types';
+import { Colorizer } from '@iot-app-kit/core-util';
 
 describe('handleSync', () => {
   const setGraphicStub = jest.fn();
@@ -29,6 +30,7 @@ describe('handleSync', () => {
       useHandleSync({
         chartRef: result.current.chartRef,
         ...useSyncProps,
+        getColor: Colorizer().next,
       })
     );
 
@@ -59,6 +61,7 @@ describe('handleSync', () => {
             children: [{}, {}, {}, {}],
           } as InternalGraphicComponentGroupOption,
         ],
+        getColor: Colorizer().next,
       })
     );
 
@@ -91,6 +94,7 @@ describe('handleSync', () => {
             children: [{}, {}, {}, {}],
           } as InternalGraphicComponentGroupOption,
         ],
+        getColor: Colorizer().next,
       })
     );
 

diff --git a/...es/react-components/src/components/chart/trendCursor/tests/useTrendCursorsEvents.spec.tsx b/...es/react-components/src/components/chart/trendCursor/tests/useTrendCursorsEvents.spec.tsx
@@ -6,6 +6,7 @@ import { useECharts } from '../../../../hooks/useECharts';
 import React from 'react';
 import { DEFAULT_CHART_VISUALIZATION } from '../../eChartsConstants';
 import { InternalGraphicComponentGroupOption } from '../types';
+import { Colorizer } from '@iot-app-kit/core-util';
 
 describe('useTrendCursorsEvents', () => {
   const { result } = renderHook(() => useECharts('dark'));
@@ -25,6 +26,7 @@ describe('useTrendCursorsEvents', () => {
         isInSyncMode: false,
         onContextMenu: jest.fn(),
         visualization: DEFAULT_CHART_VISUALIZATION,
+        getColor: Colorizer().next,
       })
     );
 
@@ -44,6 +46,7 @@ describe('useTrendCursorsEvents', () => {
         isInSyncMode: false,
         onContextMenu: jest.fn(),
         visualization: DEFAULT_CHART_VISUALIZATION,
+        getColor: Colorizer().next,
       })
     );
 

diff --git a/packages/react-components/src/components/chart/trendCursor/types/index.ts b/packages/react-components/src/components/chart/trendCursor/types/index.ts
@@ -11,6 +11,7 @@ export type InternalGraphicComponentGroupOption = {
   timestampInMs: number;
   yAxisMarkerValue: number[];
   dragDeltaInPixels?: number;
+  color?: string;
 } & GraphicComponentGroupOption;
 
 export interface TrendCursorProps {
@@ -37,10 +38,12 @@ export interface UseEventsProps extends TrendCursorProps {
   isInCursorAddMode: boolean;
   isInSyncMode: boolean;
   onContextMenu: (e: ElementEvent) => void;
+  getColor: () => string | undefined;
 }
 
 export interface UseSyncProps extends TrendCursorProps {
   isInSyncMode: boolean;
+  getColor: () => string | undefined;
 }
 
 export interface UseTrendCursorsProps {
@@ -66,6 +69,7 @@ export interface GetNewTrendCursorProps {
   chartRef: MutableRefObject<ECharts | null>;
   visualization: Visualization;
   significantDigits?: number;
+  color?: string;
 }
 
 export interface SyncChanges {

diff --git a/packages/react-components/src/components/chart/trendCursor/useTrendCursors.ts b/packages/react-components/src/components/chart/trendCursor/useTrendCursors.ts
@@ -1,3 +1,4 @@
+import { Colorizer } from '@iot-app-kit/core-util';
 import useDataStore from '../../../store';
 import useHandleResize from './resize/useHandleResize';
 import useHandleSync from './sync/useHandleSync';
@@ -13,6 +14,8 @@ import { useHandleSeries } from './series/useHandleSeries';
 import { useHandleChartOptions } from './chartOptions/handleOptions';
 import { KeyMap } from 'react-hotkeys';
 
+const TRENDCURSOR_COLOR_PALETTE = ['#7492e7', '#da7596', '#2ea597', '#a783e1', '#e07941'];
+
 const useTrendCursors = ({
   chartRef,
   size,
@@ -39,6 +42,10 @@ const useTrendCursors = ({
   const [graphic, setGraphic] = useState(initialGraphic ?? []);
   const [isInCursorAddMode, setIsInCursorAddMode] = useState(false);
 
+  const colorer = Colorizer(TRENDCURSOR_COLOR_PALETTE);
+  const existingColors = graphic.map((g) => g.color).filter((color): color is string => color != null);
+  colorer.remove(existingColors);
+
   // hook for handling all user events
   const { onContextMenuClickHandler } = useTrendCursorsEvents({
     chartRef,
@@ -52,6 +59,7 @@ const useTrendCursors = ({
     onContextMenu,
     visualization,
     significantDigits,
+    getColor: colorer.next,
   });
 
   // for handling the resize of chart
@@ -68,6 +76,7 @@ const useTrendCursors = ({
     groupId,
     visualization,
     significantDigits,
+    getColor: colorer.next,
   });
 
   useHandleViewport({ graphic, setGraphic, chartRef, series, visualization, significantDigits, viewportInMs, size });
@@ -87,7 +96,10 @@ const useTrendCursors = ({
     commandDown: () => setIsInCursorAddMode(true),
     commandUp: () => setIsInCursorAddMode(false),
   };
-  return { onContextMenuClickHandler, trendCursorKeyMap, trendCursorHandlers, trendCursors: graphic };
+
+  const orderedTrendCursors = graphic.sort((a, b) => a.timestampInMs - b.timestampInMs);
+
+  return { onContextMenuClickHandler, trendCursorKeyMap, trendCursorHandlers, trendCursors: orderedTrendCursors };
 };
 
 export default useTrendCursors;
diff --git a/packages/react-components/stories/chart/base-chart.stories.tsx b/packages/react-components/stories/chart/base-chart.stories.tsx
@@ -46,16 +46,7 @@ export const BaseChartExample: ComponentStory<FC<StoryInputs>> = ({ id, signific
             viewport={viewport ?? VIEWPORT}
             queries={[MOCK_TIME_SERIES_DATA_QUERY]}
             theme='light'
-            thresholds={[
-              {
-                value: 10,
-                color: '#eb4034',
-                comparisonOperator: 'GT',
-                visible: true,
-                fill: 'asdf',
-              },
-            ]}
-            legend={{}}
+            legend={{ visible: true }}
           />
         ))}
       </div>
@@ -106,7 +97,7 @@ export const SiteWiseConnectedBaseChartExample: ComponentStory<FC<StoryInputs>>
             viewport={viewport ?? { duration: '5m' }}
             queries={[getTimeSeriesDataQuery()]}
             theme='light'
-            legend={{}}
+            legend={{ visible: true }}
           />
         ))}
       </div>