@scality/core-ui 0.165.0 → 0.167.0

package/dist/index.js

@@ -1,8 +1,6 @@
 export { Banner } from './components/banner/Banner.component';
 export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
-export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
-export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
 export { LOADER_SIZE, STATUS_CRITICAL, STATUS_WARNING, STATUS_SUCCESS, STATUS_HEALTHY, STATUS_INFO, STATUS_UNKNOWN, STATUS_NONE, } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
@@ -11,22 +9,14 @@ export { Modal } from './components/modal/Modal.component';
 export { Navbar } from './components/navbar/Navbar.component';
 export { Notifications } from './components/notifications/Notifications.component';
 export { SearchInput } from './components/searchinput/SearchInput.component';
-export { Select } from './components/select/Select.component';
 export { Sidebar } from './components/sidebar/Sidebar.component';
 export { Steppers } from './components/steppers/Steppers.component';
 export { Toggle } from './components/toggle/Toggle.component';
 export { Tooltip } from './components/tooltip/Tooltip.component';
-export { MultiSelect } from './components/multiselect/MultiSelect.component';
-export { VegaChart } from './components/vegachart/VegaChart.component';
-export { LineChart } from './components/linechart/LineChart.component';
 export { ProgressBar } from './components/progressbar/ProgressBar.component';
 export { TextArea } from './components/textarea/TextArea.component';
-export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
-export { Sparkline } from './components/sparkline/SparkLine.component';
 export { BarChart } from './components/barchart/BarChart.component';
 export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
-export { AreaChart } from './components/areachart/AreaChart.component';
-export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
 export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
 export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
 export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
@@ -38,7 +28,6 @@ export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
 export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
 export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
 export { TextBadge } from './components/textbadge/TextBadge.component';
-export { SpacedBox } from './components/spacedbox/SpacedBox';
 export { Layout as Layout2 } from './components/layout/v2';
 export { TwoPanelLayout } from './components/layout/v2/panels';
 export { AppContainer } from './components/layout/v2/AppContainer';

package/dist/next.d.ts

@@ -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, 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';
+export { CoreUITheme } from './style/theme';
 //# 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,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;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,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/jest.config.js

@@ -5,4 +5,5 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less)$': 'identity-obj-proxy',
   },
+  testEnvironment: 'jsdom'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.165.0",
+  "version": "0.167.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -19,12 +19,10 @@
     "lint": "eslint src/* --ext .js --no-error-on-unmatched-pattern",
     "prepare": "npm run build",
     "postbuild": "npm run copy-files",
-    "plop": "plop",
     "test": "jest",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "storybook:deploy": "storybook-to-ghpages",
-    "preview": "jest-preview"
+    "storybook:deploy": "storybook-to-ghpages"
   },
   "keywords": [],
   "browserslist": [
@@ -40,23 +38,19 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-actions": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-mdx-gfm": "^8.6.14",
+    "@storybook/addon-storysource": "^8.6.14",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
@@ -70,21 +64,17 @@
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "csstype": "^3.1.0",
     "eslint": "^8.15.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-storybook": "^0.10.1",
     "husky": "^3.0.5",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "jest": "^30.0.5",
     "jest-canvas-mock": "^2.3.1",
-    "jest-preview": "^0.3.1",
-    "plop": "^2.4.0",
+    "jest-environment-jsdom": "^30.0.5",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
     "source-map-explorer": "^2.0.1",
-    "storybook": "^8.3.6",
+    "storybook": "^8.6.14",
     "typescript": "^5.3.2"
   },
   "husky": {
@@ -92,15 +82,6 @@
       "pre-commit": "npm run lint"
     }
   },
-  "jest": {
-    "setupFiles": [
-      "jest-canvas-mock"
-    ],
-    "transform": {
-      "^.+\\.[tj]sx?$": "babel-jest",
-      "^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
-    }
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react": "^0.26.28",
@@ -112,19 +93,16 @@
     "@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",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
-    "react-router": "7.0.1",
-    "react-router-dom": "7.0.1",
+    "react-router": "7.8.1",
+    "react-router-dom": "7.8.1",
     "react-select": "4.3.1",
     "react-table": "^7.7.0",
     "react-test-renderer": "^18.3.1",
-    "react-virtualized": "9.22.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",
     "recharts": "^3.0.2",

package/src/lib/components/barchart/BarChart.component.tsx

@@ -9,6 +9,11 @@ type Props = {
   barConfig?: Record<string, any>;
 };
 
+/**
+ * @deprecated Use Barchart v2 instead
+ * @example import { Barchart } from '@scality/core-ui/dist/next';
+
+ */
 function BarChart({
   id,
   data,

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/button/Button.component.tsx

@@ -242,8 +242,9 @@ const Anchor = ButtonStyled.withComponent('a');
 
 /**
  * @deprecated
+ * Used only in Dropdown.component.tsx, can be removed after refactoring
  * You should use ButtonV2 with
- * import { Button } from '@scality/core-ui/dist/next';
+ * @example import { Button } from '@scality/core-ui/dist/next';
  */
 function Button({
   text = '',