@scality/core-ui 0.170.0 → 0.172.0

package/dist/components/text/Text.component.d.ts

@@ -1,4 +1,5 @@
 import { CoreUITheme } from '../../style/theme';
+export type TextVariant = 'ChartTitle' | 'Basic' | 'Smaller' | 'Larger' | 'Large' | 'Small';
 type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
 type Props = {
     children: React.ReactNode | string;
@@ -22,7 +23,7 @@ export declare const GentleEmphaseSecondaryText: import("styled-components").Sty
     alignRight?: boolean;
 }, never>;
 export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    variant?: "ChartTitle" | "Basic" | "Smaller" | "Larger" | "Large";
+    variant?: TextVariant;
     color?: keyof CoreUITheme;
     isEmphazed?: boolean;
     isGentleEmphazed?: boolean;

package/dist/components/text/Text.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO;YACzD,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SA2C3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}
+{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,WAAW,GACnB,YAAY,GACZ,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,OAAO,CAAC;AAEZ,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,WAAW;YACb,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SAgD3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}

package/dist/components/text/Text.component.js

@@ -116,7 +116,12 @@ export const Text = styled.span `
   line-height: 1.4;
   letter-spacing: 2%;// to be defined, percentage value is not valid
       `
-            : `
+            : props.variant === 'Small'
+                ? `
+  font-size: 0.85rem;
+  line-height: 1.4;
+      `
+                : `
   font-size: 1rem;
   line-height: ${spacing.r24};
       `}

package/dist/next.d.ts

@@ -14,9 +14,11 @@ export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, BarchartSortFn, BarchartTooltipFn, } from './components/barchartv2/Barchart.component';
-export { ChartTooltip } from './components/barchartv2/ChartTooltip';
-export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { BarchartTooltip } from './components/barchartv2/BarchartTooltip';
+export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charttooltip/ChartTooltip';
 export { CoreUITheme } from './style/theme';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';
 //# sourceMappingURL=next.d.ts.map

package/dist/next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EACL,kBAAkB,EAClB,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC"}

package/dist/next.js

@@ -14,7 +14,9 @@ export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, } from './components/barchartv2/Barchart.component';
-export { ChartTooltip } from './components/barchartv2/ChartTooltip';
-export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { BarchartTooltip } from './components/barchartv2/BarchartTooltip';
+export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charttooltip/ChartTooltip';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.170.0",
+  "version": "0.172.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -20,7 +20,7 @@
     "prepare": "npm run build",
     "postbuild": "npm run copy-files",
     "test": "jest",
-    "storybook": "storybook dev -p 3000",
+    "storybook": "storybook dev -p 3001",
     "build-storybook": "storybook build",
     "storybook:deploy": "npm run build-storybook && gh-pages -d storybook-static -u \"github-actions-bot <support+actions@github.com>\""
   },
@@ -61,6 +61,7 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "copyfiles": "^2.4.1",
@@ -109,6 +110,7 @@
     "recharts": "^3.0.2",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
+    "uuid": "^13.0.0",
     "vega": "^5.17.3",
     "vega-embed": "6.0.0",
     "vega-lite": "5.0.0",

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -20,17 +20,17 @@ import { FormattedDateTime } from '../date/FormattedDateTime';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { ChartTooltip } from './ChartTooltip';
+import { BarchartTooltip } from './BarchartTooltip';
 import { UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
-  TICK_WIDTH_OFFSET: 5,
+  TICK_WIDTH_OFFSET: 4,
   BAR_SIZE: 12,
   MIN_POINT_SIZE: 3,
   DEFAULT_HEIGHT: 200,
   CHART_MARGIN: {
     left: 0,
-    right: 0,
+    right: -10,
     top: 0,
     bottom: 0,
   },
@@ -393,12 +393,13 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
 
             <Tooltip
               content={(props: TooltipContentProps<number, string>) => (
-                <ChartTooltip
+                <BarchartTooltip
                   type={type}
                   colorSet={colorSet}
                   tooltipProps={props}
                   hoveredValue={hoveredValue}
                   tooltip={tooltip}
+                  unitLabel={unitLabel}
                 />
               )}
               cursor={false}

package/src/lib/components/barchartv2/{ChartTooltip.test.tsx → BarchartTooltip.test.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ChartTooltip } from './ChartTooltip';
+import { BarchartTooltip } from './BarchartTooltip';
 
 const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
 const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
@@ -27,12 +27,13 @@ describe('ChartTooltip', () => {
     successValue: () => screen.queryByText(SUCCESS_VALUE),
     failed: () => screen.queryByText(/Failed/),
     failedValue: () => screen.queryByText(FAILED_VALUE),
-    date: () => screen.queryByText(/Monday, 01 July 2024/),
-    time: () => screen.queryByText(/00:00/),
+    longDate: () => screen.queryByText(/01 July 2024/),
+    date: () => screen.queryByText(/\b01 Jul\b/),
+    time: () => screen.queryByText(/00:00:00/),
   };
-  it('should render the ChartTooltip component', () => {
+  it('should render the BarchartTooltip component', () => {
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{ type: 'category' }}
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
@@ -47,7 +48,7 @@ describe('ChartTooltip', () => {
   });
   it('should render tooltip when tooltip is provided', () => {
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{ type: 'category' }}
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
@@ -58,7 +59,7 @@ describe('ChartTooltip', () => {
   });
   it('should not render tooltip when tooltipProps is not active', () => {
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{ type: 'category' }}
         tooltipProps={{ ...testTooltipProps, active: false }}
         hoveredValue="Success"
@@ -71,7 +72,7 @@ describe('ChartTooltip', () => {
     // timestamp for Mon Jul 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
     const label = date;
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{
           type: 'time',
           timeRange: {
@@ -84,19 +85,18 @@ describe('ChartTooltip', () => {
         hoveredValue="Success"
       />,
     );
-
     expect(selectors.success()).toBeInTheDocument();
     expect(selectors.successValue()).toBeInTheDocument();
     expect(selectors.failed()).toBeInTheDocument();
     expect(selectors.failedValue()).toBeInTheDocument();
-
-    expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.date()).not.toBeInTheDocument();
+    expect(selectors.longDate()).toBeInTheDocument();
     expect(selectors.time()).not.toBeInTheDocument();
   });
   it('should render time tooltip when type is time and interval is one hour', () => {
     const label = date;
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{
           type: 'time',
           timeRange: {
@@ -114,6 +114,29 @@ describe('ChartTooltip', () => {
     expect(selectors.failed()).toBeInTheDocument();
     expect(selectors.failedValue()).toBeInTheDocument();
     expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.longDate()).not.toBeInTheDocument();
     expect(selectors.time()).toBeInTheDocument();
   });
+  it('should render with correctly formatted values when unitLabel is provided', () => {
+    const FREE_VALUE = 123.456789;
+    const USED_VALUE = 20;
+    const tooltipProps = {
+      ...testTooltipProps,
+      payload: [
+        { name: 'Free', value: FREE_VALUE },
+        { name: 'Used', value: USED_VALUE },
+      ],
+    };
+    render(
+      <BarchartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={tooltipProps}
+        hoveredValue="Success"
+        unitLabel="kB"
+      />,
+    );
+
+    expect(screen.getByText('123.46 kB')).toBeInTheDocument();
+    expect(screen.getByText('20 kB')).toBeInTheDocument();
+  });
 });

package/src/lib/components/barchartv2/BarchartTooltip.tsx

@@ -0,0 +1,89 @@
+import {
+  BarchartBars,
+  BarchartTooltipFn,
+  CategoryType,
+  TimeType,
+} from './Barchart.component';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+import { TooltipContentProps } from 'recharts';
+import { getCurrentPoint } from './utils';
+import {
+  ChartTooltipContainer,
+  ChartTooltipItem,
+  ChartTooltipHeader,
+  ChartTooltipItemsContainer,
+} from '../charttooltip/ChartTooltip';
+import { LegendShape } from '../chartlegend/ChartLegend';
+
+export const BarchartTooltip = <T extends BarchartBars>({
+  type,
+  tooltipProps,
+  colorSet,
+  hoveredValue,
+  tooltip,
+  unitLabel,
+}: {
+  type: TimeType | CategoryType;
+  tooltipProps: TooltipContentProps<number, string>;
+  colorSet?: Record<string, string>;
+  hoveredValue: string | undefined;
+  tooltip?: BarchartTooltipFn<T>;
+  unitLabel?: string;
+}) => {
+  const { active } = tooltipProps;
+
+  if (!active) {
+    return null;
+  }
+
+  const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
+  if (tooltip) {
+    return tooltip(currentPoint);
+  }
+
+  return (
+    <ChartTooltipContainer>
+      <ChartTooltipHeader>
+        {type.type === 'time' ? (
+          <FormattedDateTime
+            format={
+              type.timeRange.interval < 24 * 60 * 60 * 1000
+                ? 'day-month-abbreviated-hour-minute-second'
+                : 'long-date-without-weekday'
+            }
+            value={new Date(currentPoint.category)}
+          />
+        ) : (
+          currentPoint.category
+        )}
+      </ChartTooltipHeader>
+      <ChartTooltipItemsContainer>
+        {currentPoint.values.map((value) => {
+          const legendIcon = colorSet && (
+            <LegendShape
+              color={colorSet[value.label as keyof typeof colorSet]}
+              shape="rectangle"
+              chartColors={colorSet}
+            />
+          );
+
+          const formattedValue = Number.isInteger(value.value)
+            ? `${value.value}`
+            : value.value.toFixed(2);
+          const valueWithUnit = unitLabel
+            ? `${formattedValue} ${unitLabel}`
+            : formattedValue;
+          return (
+            <ChartTooltipItem
+              key={value.label}
+              label={value.label}
+              value={valueWithUnit}
+              isHovered={value.isHovered}
+              legendIcon={legendIcon}
+            />
+          );
+        })}
+      </ChartTooltipItemsContainer>
+    </ChartTooltipContainer>
+  );
+};

package/src/lib/components/chartlegend/ChartLegend.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useChartLegend } from './ChartLegendWrapper';
-import { Text } from '../text/Text.component';
+import { Text, TextVariant } from '../text/Text.component';
 import { chartColors } from '../../style/theme';
 import { useCallback } from 'react';
 
@@ -8,6 +8,7 @@ type ChartLegendProps = {
   shape: 'line' | 'rectangle';
   disabled?: boolean;
   direction?: 'horizontal' | 'vertical';
+  legendSize?: TextVariant;
 };
 
 const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
@@ -65,6 +66,7 @@ export const ChartLegend = ({
   shape,
   disabled = false,
   direction = 'horizontal',
+  legendSize = 'Basic',
 }: ChartLegendProps) => {
   const {
     listResources,
@@ -132,7 +134,7 @@ export const ChartLegend = ({
               shape={shape}
               chartColors={chartColors}
             />
-            <Text variant="Basic">{resource}</Text>
+            <Text variant={legendSize}>{resource}</Text>
           </LegendItem>
         );
       })}

package/src/lib/components/chartlegend/ChartLegendWrapper.test.tsx

@@ -0,0 +1,197 @@
+import { render, screen } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import {
+  ChartLegendWrapper,
+  useChartId,
+  useChartLegend,
+} from './ChartLegendWrapper';
+import { ChartLegend } from './ChartLegend';
+import userEvent from '@testing-library/user-event';
+
+describe('ChartLegendWrapper', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const TestChart = ({ seriesNames }: { seriesNames: string[] }) => {
+    const chartId = useChartId();
+    const { register } = useChartLegend();
+
+    useEffect(() => {
+      register(chartId, seriesNames);
+    }, [chartId, register, seriesNames]);
+
+    return <div data-testid={`chart-${chartId}`}>Test Chart</div>;
+  };
+
+  const generateColors = (seriesNames: string[]) => {
+    const colors: Record<string, string> = {};
+    const colorPalette = ['red', 'blue', 'green', 'yellow', 'purple'];
+    seriesNames.forEach((name, index) => {
+      colors[name] = colorPalette[index % colorPalette.length];
+    });
+    return colors;
+  };
+
+  describe('Dynamic Color Generation', () => {
+    it('should generate colors dynamically based on registered series', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU', 'Memory']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    });
+
+    it('should handle multiple charts with overlapping series', () => {
+      const TestChart1 = () => {
+        const chartId = useChartId();
+        const { register } = useChartLegend();
+
+        useEffect(() => {
+          register(chartId, ['CPU', 'Memory']);
+        }, [chartId, register]);
+
+        return <div data-testid={`chart1-${chartId}`}>Test Chart 1</div>;
+      };
+
+      const TestChart2 = () => {
+        const chartId = useChartId();
+        const { register } = useChartLegend();
+
+        useEffect(() => {
+          register(chartId, ['CPU', 'Disk']);
+        }, [chartId, register]);
+
+        return <div data-testid={`chart2-${chartId}`}>Test Chart 2</div>;
+      };
+
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart1 />
+          <TestChart2 />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should show unique series from both charts
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+
+      // All should be selected by default
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should handle empty series registration', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={[]} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should not crash and should render empty legend
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should maintain selection state when new series are added', () => {
+      const { rerender } = render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Initially only CPU
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+
+      // Select only CPU
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+
+      // Add more series
+      rerender(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU', 'Memory']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // New series should be added and all should be selected (reset behavior)
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    });
+
+    it('should work with different chart configurations', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['Series1', 'Series2', 'Series3']} />
+          <ChartLegend shape="rectangle" direction="vertical" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('Series1')).toBeInTheDocument();
+      expect(screen.getByText('Series2')).toBeInTheDocument();
+      expect(screen.getByText('Series3')).toBeInTheDocument();
+    });
+  });
+
+  describe('Static Color Set', () => {
+    const staticColorSet = {
+      CPU: 'red',
+      Memory: 'blue',
+      Disk: 'green',
+    };
+
+    it('should work with static color sets', () => {
+      render(
+        <ChartLegendWrapper colorSet={staticColorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+    });
+
+    it('should ignore registration when using static color sets', () => {
+      render(
+        <ChartLegendWrapper colorSet={staticColorSet}>
+          <TestChart seriesNames={['DifferentSeries']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should only show static color set items, not registered series
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+      expect(screen.queryByText('DifferentSeries')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should throw error when useChartLegend is used outside wrapper', () => {
+      const TestComponent = () => {
+        useChartLegend();
+        return <div>Test</div>;
+      };
+
+      expect(() => render(<TestComponent />)).toThrow(
+        'useChartLegend must be used within a ChartLegendWrapper',
+      );
+    });
+  });
+});