@scality/core-ui 0.165.0 → 0.166.0

package/dist/components/toast/Toast.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,aAAa,EAAkB,MAAM,wBAAwB,CAAC;AAKvE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,WAAY,MAAM,WAYnD,CAAC;AA6DF,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAsB,EACtB,MAAe,EACf,WAAkB,EAClB,QAAe,EACf,IAAsC,EACtC,KAAqB,EACrB,eAAuB,EACvB,KAAK,GACN,EAAE,UAAU,kDAmEZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Toast.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,aAAa,EAAkB,MAAM,wBAAwB,CAAC;AAKvE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,WAAY,MAAM,WAYnD,CAAC;AAsFF,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAsB,EACtB,MAAe,EACf,WAAkB,EAClB,QAAe,EACf,IAAsC,EACtC,KAAqB,EACrB,eAAuB,EACvB,KAAK,GACN,EAAE,UAAU,kDAmDZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/toast/Toast.component.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { Box } from '../box/Box';
@@ -75,6 +74,29 @@ const ContentContainer = styled.div `
   padding: 0px 16px;
   position: relative;
 `;
+const FadingToast = styled.div `
+  align-items: flex-end;
+  background-color: ${props => props.theme.backgroundLevel1};
+  border: 1px solid ${props => props.theme.border};
+  box-shadow: 0px 4px 10px 4px #000;
+  display: flex;
+  border-radius: 4px;
+  position: relative;
+
+  @keyframes toastEnter {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+const ToastEnter = styled(FadingToast) `
+  animation: toastEnter 0.3s ease forwards;
+`;
 function Toast({ open, message, onClose, position = 'top-right', status = 'info', autoDismiss = true, duration = 5000, icon = _jsx(DefaultIcon, { status: status }), width = DEFAULT_WIDTH, withProgressBar = false, style, }) {
     const ref = useRef(null);
     const { params } = useToastParameters({
@@ -85,7 +107,6 @@ function Toast({ open, message, onClose, position = 'top-right', status = 'info'
     const positionStyle = positionOutput[position];
     const bgColor = useGetBackgroundColor(status);
     const rgbBgColor = useGetRgbBackgroundColor(status);
-    const theme = useTheme();
     if (!open) {
         return null;
     }
@@ -93,14 +114,6 @@ function Toast({ open, message, onClose, position = 'top-right', status = 'info'
             position: 'fixed',
             ...(style || positionStyle),
             width,
-        }, children: [_jsxs(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: { duration: 0.3 }, style: {
-                    alignItems: 'flex-end',
-                    backgroundColor: theme.backgroundLevel1,
-                    border: `1px solid ${theme.border}`,
-                    boxShadow: '0px 4px 10px 4px #000',
-                    display: 'flex',
-                    borderRadius: '4px',
-                    position: 'relative',
-                }, children: [_jsx(IconContainer, { bgColor: rgbBgColor, children: icon }), _jsx(ContentContainer, { children: _jsx(BasicText, { children: message }) }), _jsx(Box, { display: "flex", alignItems: "center", alignSelf: "stretch", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close", size: "lg", color: "textSecondary" }), onClick: params === null || params === void 0 ? void 0 : params.onClose, "aria-label": "Close", tooltip: { overlay: 'Close', placement: 'top' } }) })] }, "toast"), withProgressBar && (_jsx(DurationBasedProgressBar, { duration: autoDismiss ? duration : null, color: bgColor }))] }));
+        }, children: [_jsxs(ToastEnter, { children: [_jsx(IconContainer, { bgColor: rgbBgColor, children: icon }), _jsx(ContentContainer, { children: _jsx(BasicText, { children: message }) }), _jsx(Box, { display: "flex", alignItems: "center", alignSelf: "stretch", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close", size: "lg", color: "textSecondary" }), onClick: params === null || params === void 0 ? void 0 : params.onClose, "aria-label": "Close", tooltip: { overlay: 'Close', placement: 'top' } }) })] }), withProgressBar && (_jsx(DurationBasedProgressBar, { duration: autoDismiss ? duration : null, color: bgColor }))] }));
 }
 export { Toast };

package/dist/next.d.ts

@@ -14,6 +14,7 @@ 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 { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

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,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,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,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"}

package/dist/next.js

@@ -14,6 +14,7 @@ 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 { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.165.0",
+  "version": "0.166.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -112,7 +112,6 @@
     "@js-temporal/polyfill": "^0.4.4",
     "@storybook/preview-api": "^8.3.6",
     "downshift": "^7.0.5",
-    "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
     "react-debounce-input": "3.2.2",

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

@@ -1,7 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { getWrapper } from '../../testUtils';
-import { Barchart } from './Barchart.component';
+import { Barchart, CustomTick, formatDate } from './Barchart.component';
 import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
+import React from 'react';
 
 const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
 const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
@@ -384,4 +385,101 @@ describe('Barchart', () => {
     expect(screen.getByText('Test Right Title')).toBeInTheDocument();
     expect(screen.getByLabelText('Info')).toBeInTheDocument();
   });
+  describe('formatDate', () => {
+    it('should render the CustomTick component with over a day interval', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: 2 * ONE_DAY_IN_MILLISECONDS,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText('Fri05Jul 10:00')).toBeInTheDocument();
+    });
+
+    it('should render the CustomTick component with day format', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: ONE_DAY_IN_MILLISECONDS,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+    });
+    it('should render the CustomTick component with hour format', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: ONE_HOUR_IN_MILLISECONDS,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText('10:00')).toBeInTheDocument();
+    });
+    it('should render the CustomTick component with minute format', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: 1000 * 30,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(
+        screen.getByText(new Date('2024-07-05T10:00:00').getTime()),
+      ).toBeInTheDocument();
+    });
+  });
 });

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

@@ -18,13 +18,9 @@ import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import {
-  formatDate,
-  renderTooltipContent,
-  UnitRange,
-  useChartData,
-} from './utils';
+import { renderTooltipContent, UnitRange, useChartData } from './utils';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
@@ -37,7 +33,7 @@ const CHART_CONSTANTS = {
     top: 0,
     bottom: 0,
   },
-} as const;
+};
 
 /* ---------------------------------- TYPE ---------------------------------- */
 
@@ -100,7 +96,7 @@ interface CustomTickProps {
   x: number;
   y: number;
   payload: {
-    value: string | number;
+    value: number;
   };
   visibleTicksCount: number;
   width: number;
@@ -109,7 +105,38 @@ interface CustomTickProps {
 
 /* ---------------------------------- COMPONENTS ---------------------------------- */
 
-const CustomTick = ({
+/**
+ * Formats a date based on the interval
+ * @param timestamp - Timestamp
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+export const formatDate = (
+  timestamp: number,
+  interval: number,
+): React.ReactNode => {
+  const date = new Date(timestamp);
+  // More than 24 hours interval - use day and time format
+  if (interval > 24 * 60 * 60 * 1000) {
+    return (
+      <>
+        <FormattedDateTime format="chart-date" value={date} />{' '}
+        <FormattedDateTime format="time" value={date} />
+      </>
+    );
+  } else if (interval === 24 * 60 * 60 * 1000) {
+    // Daily interval - use day format
+    return <FormattedDateTime format="chart-date" value={date} />;
+  } else if (interval >= 60 * 1000) {
+    //Hourly and minute intervals - use minute format
+    return <FormattedDateTime format="time" value={date} />;
+  } else {
+    // minute interval or less - use full timestamp
+    return timestamp;
+  }
+};
+
+export const CustomTick = ({
   x,
   y,
   payload,
@@ -131,10 +158,11 @@ const CustomTick = ({
       overflow="visible"
     >
       <ConstrainedText
+        color="textSecondary"
         text={
-          <Text variant="Smaller" color="textSecondary">
+          <Text variant="Smaller">
             {type.type === 'time'
-              ? formatDate(new Date(payload.value), type.timeRange.interval)
+              ? formatDate(payload.value, type.timeRange.interval)
               : String(payload.value)}
           </Text>
         }

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

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { Text } from '../text/Text.component';
+import { BarchartBars } from './Barchart.component';
+import { fontSize, fontWeight } from '../../style/theme';
+import { LegendShape } from '../chartlegend/ChartLegend';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+
+export const ChartTooltipContainer = styled.div`
+  background-color: ${({ theme }) => theme.backgroundLevel1};
+  padding: ${spacing.r4} ${spacing.r8};
+  border-radius: 4px;
+  width: max-content;
+  max-width: 40rem;
+  border: 1px solid ${({ theme }) => theme.border};
+  display: flex;
+  font-size: ${fontSize.small};
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+`;
+
+export const ChartTooltipItem = styled.div<{ isHovered: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: ${({ isHovered }) =>
+    isHovered ? fontWeight.bold : fontWeight.base};
+`;
+
+export const ChartTooltip = <T extends BarchartBars>({
+  type,
+  currentPoint,
+  colorSet,
+}: {
+  type: 'time' | 'category';
+  currentPoint: {
+    category: string | number;
+    values: { label: T[number]['label']; value: number; isHovered: boolean }[];
+  };
+  colorSet: Record<string, string>;
+}) => {
+  return (
+    <ChartTooltipContainer>
+      <Text isEmphazed>
+        {type === 'time' ? (
+          <FormattedDateTime
+            format="long-date"
+            value={new Date(currentPoint.category)}
+          />
+        ) : (
+          currentPoint.category
+        )}
+      </Text>
+      <Stack direction="vertical" gap="r8" style={{ width: '100%' }}>
+        {currentPoint.values.map((value) => {
+          return (
+            <Wrap key={value.label}>
+              <ChartTooltipItem isHovered={value.isHovered}>
+                <LegendShape
+                  color={colorSet[value.label as keyof typeof colorSet]}
+                  shape="rectangle"
+                  chartColors={colorSet}
+                />
+                {value.label}
+              </ChartTooltipItem>
+              <ChartTooltipItem isHovered={value.isHovered}>
+                {value.value}
+              </ChartTooltipItem>
+            </Wrap>
+          );
+        })}
+      </Stack>
+    </ChartTooltipContainer>
+  );
+};

package/src/lib/components/barchartv2/utils.ts

@@ -3,7 +3,6 @@ import {
   BarchartBars,
   BarchartTooltipFn,
 } from './Barchart.component';
-import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
 import { TooltipContentProps } from 'recharts';
 import { chartColors, ChartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
@@ -84,31 +83,6 @@ const generateTimeRanges = (
   return ranges;
 };
 
-/**
- * Formats a date based on the interval
- * @param date - Date object
- * @param interval - Interval in milliseconds
- * @returns Formatted string
- */
-export const formatDate = (date: Date, interval: number): string => {
-  if (interval > 24 * 60 * 60 * 1000) {
-    return (
-      DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
-      ' ' +
-      TIME_FORMATER.format(date)
-    );
-  } else if (interval === 24 * 60 * 60 * 1000) {
-    // Daily or longer intervals - use day format
-    return DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '');
-  } else if (interval >= 60 * 1000) {
-    //Handle hourly and minute intervals - use minute format
-    return TIME_FORMATER.format(date);
-  } else {
-    // Second intervals or less - use full timestamp
-    return date.toISOString();
-  }
-};
-
 /**
  * Finds the time range that contains the given date
  * @param date - Data point date
@@ -149,17 +123,12 @@ export const transformTimeData = <T extends BarchartBars>(
     type.timeRange.interval,
   );
 
-  const categoryMap = new Map<
-    string | number,
-    { [key: string]: string | number }
-  >();
+  const categoryMap = new Map<number, { [key: string]: string | number }>();
 
   // Initialize all ranges with zeros
   timeRanges.forEach((range) => {
-    // const categoryDisplay = formatDate(range.start, type.timeRange.interval);
-    const categoryDisplay = range.start.getTime();
     const initialData: { [key: string]: string | number } = {
-      category: categoryDisplay,
+      category: range.start.getTime(),
     };
     barDataKeys.forEach((dataKey) => {
       initialData[dataKey] = 0;

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

@@ -0,0 +1,218 @@
+import { render, screen } from '@testing-library/react';
+import { ChartLegend } from './ChartLegend';
+import React from 'react';
+import { ChartLegendWrapper } from './ChartLegendWrapper';
+import userEvent from '@testing-library/user-event';
+
+const colorSet = {
+  CPU: 'red',
+  Memory: 'blue',
+  Disk: 'green',
+};
+
+describe('ChartLegend', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render all legend items', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" />
+      </ChartLegendWrapper>,
+    );
+    expect(screen.getByText('CPU')).toBeInTheDocument();
+    expect(screen.getByText('Memory')).toBeInTheDocument();
+    expect(screen.getByText('Disk')).toBeInTheDocument();
+  });
+
+  it('should have all items selected by default', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" />
+      </ChartLegendWrapper>,
+    );
+
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+  });
+  it('should not respond to clicks when disabled', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" disabled />
+      </ChartLegendWrapper>,
+    );
+
+    userEvent.click(screen.getByText('CPU'));
+    // If disabled, should not select any items
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('Memory'), { metaKey: true });
+    // If disabled, should not select any items
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+  });
+  describe('Normal Click Behavior', () => {
+    it('should select only clicked item when all are selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+
+      // Click on CPU should select only CPU
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should select all items when clicking on the only selected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // First click to select only CPU
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      // Second click should select all
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should select only clicked item when clicking unselected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByLabelText('CPU selected'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Click on unselected Memory should select only Memory
+      userEvent.click(screen.getByText('Memory'));
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+  });
+
+  describe('Cmd+Click Behavior', () => {
+    it('should add unselected item to selection when cmd+clicking', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Cmd+click Memory should add it to selection
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should remove selected item from selection when cmd+clicking with multiple selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Start with all selected, select only CPU, then add Memory
+      userEvent.click(screen.getByText('CPU'));
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+
+      // Cmd+click CPU should remove it
+      userEvent.click(screen.getByText('CPU'), { metaKey: true });
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should select all when cmd+clicking the only selected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+
+      // Cmd+click the only selected item should select all
+      userEvent.click(screen.getByText('CPU'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should work with ctrl+click on Windows/Linux', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByText('CPU'));
+
+      // Ctrl+click Memory should add it to selection
+      userEvent.click(screen.getByText('Memory'), { ctrlKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should handle mixed normal and cmd+clicks correctly', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Normal click to select CPU only
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Cmd+click to add Memory
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+
+      // Normal click on Disk should select only Disk
+      userEvent.click(screen.getByText('Disk'));
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+  });
+});