feat: updated the chart legend ux(spacing, legend border color, width…

…, tooltip)

packages/react-components/src/components/chart/baseChart.tsx

@@ -165,7 +165,7 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
       </Resizable>
       {options.legend && (
         <div style={{ height, width: rightLegendWidth }}>
-          <Legend series={series} graphic={trendCursors} datastreams={dataStreams} />
+          <Legend series={series} graphic={trendCursors} datastreams={dataStreams} width={rightLegendWidth} />
         </div>
       )}
     </div>

packages/react-components/src/components/chart/chart.css

@@ -16,7 +16,7 @@
   bottom: 5%;
   right: 0;
   cursor: ew-resize;
-  border-right: 2px solid #d6dbdb;
+  border-right: 2px solid #e9ebed;
 }
 
 .base-chart-element {

packages/react-components/src/components/chart/eChartsConstants.ts

@@ -84,7 +84,7 @@ export const TREND_CURSOR_CLOSE_GRAPHIC_INDEX = 2;
 export const TREND_CURSOR_LINE_MARKERS_GRAPHIC_INDEX = 3;
 
 // resize constants
-export const CHART_RESIZE_INITIAL_FACTOR = 0.75;
+export const CHART_RESIZE_INITIAL_FACTOR = 0.7;
 export const CHART_RESIZE_MIN_FACTOR = 0.3;
 
 // this is an arbitrary value, so that user can almost "close" the legend section if they want to
@@ -99,3 +99,6 @@ export const DEEMPHASIZE_OPACITY = 0.25;
 // Zoom constants
 
 export const ECHARTS_ZOOM_DEBOUNCE_MS = 300;
+
+// Legend constants
+export const CHART_LEGEND_WRAPPER_WIDTH = 100;

packages/react-components/src/components/chart/hooks/useChartsLegend.tsx

@@ -1,23 +1,30 @@
-import { InternalGraphicComponentGroupOption } from '../types';
-import React, { useEffect, useState } from 'react';
+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 { SeriesOption } from 'echarts';
 import { LineSeriesOption } from 'echarts/types/src/chart/line/LineSeries';
 import { DataStream } from '@iot-app-kit/core';
 import { useHover } from 'react-use';
 
-import { borderRadiusDropdown, colorBackgroundDropdownItemHover, spaceScaledS } from '@cloudscape-design/design-tokens';
+import {
+  borderRadiusDropdown,
+  colorBackgroundDropdownItemHover,
+  spaceStaticXxs,
+} from '@cloudscape-design/design-tokens';
 
+import { InternalGraphicComponentGroupOption } from '../types';
 import { useChartStore } from '../store';
 import { isDataStreamInList } from '../../../utils/isDataStreamInList';
+import { CHART_LEGEND_WRAPPER_WIDTH } from '../eChartsConstants';
 
-const LegendCell = (e: { datastream: DataStream; lineColor: string; name: string }) => {
-  const { datastream, lineColor, name } = e;
+const LegendCell = (e: { datastream: DataStream; lineColor: string; name: string; width: number }) => {
+  const { datastream, lineColor, name, width } = e;
   const highlightDataStream = useChartStore((state) => state.highlightDataStream);
   const unHighlightDataStream = useChartStore((state) => state.unHighlightDataStream);
   const highlightedDataStreams = useChartStore((state) => state.highlightedDataStreams);
   const isDataStreamHighlighted = isDataStreamInList(highlightedDataStreams);
+  const nameRef = useRef<HTMLDivElement | null>(null);
+  const [isNameTruncated, setIsNameTruncated] = useState(false);
 
   const toggleHighlighted = () => {
     if (isDataStreamHighlighted(datastream)) {
@@ -47,10 +54,27 @@ const LegendCell = (e: { datastream: DataStream; lineColor: string; name: string
     </div>
   ));
 
+  useEffect(() => {
+    if (nameRef.current) {
+      setIsNameTruncated(nameRef.current.scrollWidth > nameRef.current.clientWidth);
+    }
+  }, [name, width]);
+
   return (
     <div className='base-chart-legend-row-data-container'>
       {lineIcon}
-      <div style={{ marginBlock: spaceScaledS }}>{name}</div>
+      <div
+        className='base-chart-legend-row-data'
+        style={{
+          marginBlock: spaceStaticXxs,
+          width: `${width - CHART_LEGEND_WRAPPER_WIDTH}px`,
+          maxWidth: `${width - CHART_LEGEND_WRAPPER_WIDTH}px`,
+        }}
+        ref={nameRef}
+        title={isNameTruncated ? name : undefined}
+      >
+        {name}
+      </div>
     </div>
   );
 };
@@ -59,15 +83,17 @@ const useChartsLegend = ({
   datastreams,
   graphic,
   series,
+  width,
 }: {
   datastreams: DataStream[];
   graphic: InternalGraphicComponentGroupOption[];
   series: SeriesOption[];
+  width: number;
 }) => {
   const legendColumnDefinition = {
     id: 'Legends',
     header: <div className='base-chart-legend-col-header'>Properties</div>,
-    cell: (e: { datastream: DataStream; lineColor: string; name: string }) => <LegendCell {...e} />,
+    cell: (e: { datastream: DataStream; lineColor: string; name: string; width: number }) => <LegendCell {...e} />,
     isRowHeader: true,
   };
 
@@ -112,6 +138,7 @@ const useChartsLegend = ({
         // TODO: may need to update this for non-line type graphs
         lineColor: (lineItem as LineSeriesOption)?.lineStyle?.color ?? '',
         datastream: datastreams.find((ds) => lineItem.id === ds.id),
+        width,
         ...values,
       };
     });

packages/react-components/src/components/chart/legend/legend.css

@@ -1,6 +1,6 @@
 .base-chart-legend-table-container {
   padding: 0 16px;
-  height: 99%;
+  height: 92%;
   overflow-y: auto;
 }
 
@@ -19,6 +19,12 @@
   grid-template-columns: max-content 1fr;
 }
 
+.base-chart-legend-row-data {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .base-chart-legend-row-line-ind {
   height: 4px;
   width: 20px;

packages/react-components/src/components/chart/legend/legend.tsx

@@ -12,6 +12,7 @@ const Legend = (legendOptions: {
   datastreams: DataStream[];
   series: SeriesOption[];
   graphic: InternalGraphicComponentGroupOption[];
+  width: number;
 }) => {
   const { items: allItems, columnDefinitions } = useChartsLegend(legendOptions);