@scality/core-ui 0.174.0 → 0.176.0

package/dist/components/linetimeseriechart/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,eACL,WAAW,GAAG,MAAM,cACrB,cAAc,EAAE,KAC1B,MAgBF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,YACP,MAAM,KACf,MAaF,CAAC"}

package/dist/components/linetimeseriechart/utils.js

@@ -1,4 +1,4 @@
-import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, YEAR_MONTH_DAY_FORMATTER, MONTH_DAY_FORMATTER, } from '../date/FormattedDateTime';
+import { TIME_FORMATER, DAY_MONTH_ABBREVIATED, DAY_MONTH_ABBREVIATED_YEAR, } from '../date/FormattedDateTime';
 export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
 /**
  * Formats timestamp for X-axis labels based on time format and data range:
@@ -10,19 +10,19 @@ export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
  * @param chartData - The chart data to determine time range for optimal formatting
  * @returns Formatted string for display on X-axis
  */
-export const formatXAxisLabel = (timestamp, timeFormat = 'date-time', chartData = []) => {
+export const formatXAxisLabel = (timestamp, duration) => {
     const date = new Date(timestamp);
-    if (!chartData.length) {
-        return YEAR_MONTH_DAY_FORMATTER.format(date);
+    if (duration <= 24 * 60 * 60) {
+        return TIME_FORMATER.format(date);
     }
-    if (timeFormat === 'date-time') {
-        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+    else if (duration <= 7 * 24 * 60 * 60) {
+        return DAY_MONTH_ABBREVIATED.format(date)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep');
+    }
+    else {
+        return DAY_MONTH_ABBREVIATED_YEAR.format(date)
+            .replace(/[ ,]/g, '')
+            .replace(/Sept/g, 'Sep');
     }
-    const timestamps = chartData.map((d) => d.timestamp);
-    const minTimestamp = Math.min(...timestamps);
-    const maxTimestamp = Math.max(...timestamps);
-    const timeRangeMilliseconds = maxTimestamp - minTimestamp;
-    return timeRangeMilliseconds >= ONE_YEAR_MILLISECONDS
-        ? YEAR_MONTH_DAY_FORMATTER.format(date)
-        : MONTH_DAY_FORMATTER.format(date);
 };

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAmDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAqDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.js

@@ -20,6 +20,7 @@ ${(props) => {
         width: 4px;
         height: 4px;
         min-height: 20px;
+        background: ${brand.border}; // fallback for gradient themes
         background: ${brand.buttonSecondary};
         border-radius: 4px;
         -webkit-border-radius: 4px;
@@ -42,6 +43,7 @@ ${(props) => {
       }
 
       // Firefox
+      scrollbar-color: ${brand.border} ${brand.backgroundLevel3}; // fallback for gradient themes
       scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
       scrollbar-width: thin;
     }

package/dist/components/sparkline/sparkline.component.d.ts

@@ -6,11 +6,12 @@ type SparklineProps = {
     startingTimeStamp: number;
     sampleDuration: number;
     sampleInterval: number;
+    yAxisType?: 'default' | 'percentage';
 };
 /**
  * Sparkline is a simple dynamically sized area chart.
  * Used to show trends in data over time.
  */
-export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=sparkline.component.d.ts.map

package/dist/components/sparkline/sparkline.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,cAAc,2CAiCrG"}
+{"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,cAAc,2CAkChH"}

package/dist/components/sparkline/sparkline.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
 import { useTheme } from "styled-components";
 import { chartColors } from "../../style/theme";
 import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
@@ -8,7 +8,7 @@ import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
  * Sparkline is a simple dynamically sized area chart.
  * Used to show trends in data over time.
  */
-export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }) {
+export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }) {
     var _a;
     const data = useMemo(() => {
         const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
@@ -16,5 +16,5 @@ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInte
     }, [serie.data]);
     const color = (_a = serie.color) !== null && _a !== void 0 ? _a : chartColors.lineColor1;
     const strokeGridColor = useTheme().border;
-    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false })] }) }));
+    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false }), yAxisType === 'percentage' && _jsx(YAxis, { domain: [0, 100], hide: true })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.174.0",
+  "version": "0.176.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

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

@@ -89,9 +89,9 @@ describe('Barchart', () => {
         </Wrapper>,
       );
 
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
+      expect(screen.getByText('06 Jul')).toBeInTheDocument();
+      expect(screen.getByText('07 Jul')).toBeInTheDocument();
     });
     it('should render the Barchart component with error state', async () => {
       const { Wrapper } = getWrapper();
@@ -153,11 +153,11 @@ describe('Barchart', () => {
           </ChartLegendWrapper>
         </Wrapper>,
       );
-      expect(screen.getByText('Wed03Jul')).toBeInTheDocument();
-      expect(screen.getByText('Thu04Jul')).toBeInTheDocument();
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+      expect(screen.getByText('03 Jul')).toBeInTheDocument();
+      expect(screen.getByText('04 Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
+      expect(screen.getByText('06 Jul')).toBeInTheDocument();
+      expect(screen.getByText('07 Jul')).toBeInTheDocument();
     });
     it('should render when there are missing data in the time range', async () => {
       const bars = [
@@ -203,10 +203,10 @@ describe('Barchart', () => {
 
       // Check that all days are present
       await waitFor(() => {
-        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
-        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
+        expect(screen.getByText('05 Jul')).toBeInTheDocument();
+        expect(screen.getByText('06 Jul')).toBeInTheDocument();
+        expect(screen.getByText('07 Jul')).toBeInTheDocument();
+        expect(screen.getByText('08 Jul')).toBeInTheDocument();
       });
     });
     it('should render for a specific time range', async () => {
@@ -244,13 +244,13 @@ describe('Barchart', () => {
         </Wrapper>,
       );
       await waitFor(() => {
-        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
-        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
-        expect(screen.getByText('Tue09Jul')).toBeInTheDocument();
-        expect(screen.getByText('Wed10Jul')).toBeInTheDocument();
-        expect(screen.getByText('Thu11Jul')).toBeInTheDocument();
+        expect(screen.getByText('05 Jul')).toBeInTheDocument();
+        expect(screen.getByText('06 Jul')).toBeInTheDocument();
+        expect(screen.getByText('07 Jul')).toBeInTheDocument();
+        expect(screen.getByText('08 Jul')).toBeInTheDocument();
+        expect(screen.getByText('09 Jul')).toBeInTheDocument();
+        expect(screen.getByText('10 Jul')).toBeInTheDocument();
+        expect(screen.getByText('11 Jul')).toBeInTheDocument();
       });
     });
     it('should render the Barchart component with hourly intervals', async () => {
@@ -411,7 +411,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('Fri05Jul 10:00')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
 
     it('should render the CustomTick component with day format', () => {
@@ -435,7 +435,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
     it('should render the CustomTick component with hour format', () => {
       const { Wrapper } = getWrapper();
@@ -458,7 +458,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('10:00')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
     it('should render the CustomTick component with minute format', () => {
       const { Wrapper } = getWrapper();
@@ -481,9 +481,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(
-        screen.getByText(new Date('2024-07-05T10:00:00').getTime()),
-      ).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
   });
 });

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

@@ -3,7 +3,6 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
-  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   TooltipContentProps,
@@ -112,33 +111,19 @@ interface CustomTickProps {
 /* ---------------------------------- COMPONENTS ---------------------------------- */
 
 /**
- * Formats a date based on the interval
- * @param timestamp - Timestamp
- * @param interval - Interval in milliseconds
+ * Get the format of the date based on the duration
+ * @param duration - Duration 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} />;
+  duration: number,
+): 'time' | 'day-month-abbreviated' | 'chart-long-term-date' => {
+  if (duration <= 24 * 60 * 60 * 1000) {
+    return 'time';
+  } else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+    return 'day-month-abbreviated';
   } else {
-    // minute interval or less - use full timestamp
-    return timestamp;
+    return 'chart-long-term-date';
   }
 };
 
@@ -155,10 +140,15 @@ export const CustomTick = ({
     width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
   const centerX = x - tickWidth / 2;
 
+  const duration =
+    type.type === 'time'
+      ? type.timeRange.endDate.getTime() - type.timeRange.startDate.getTime()
+      : 0;
+
   return (
     <foreignObject
       x={centerX}
-      y={y}
+      y={y - 8}
       width={tickWidth}
       color={theme.textSecondary}
       overflow="visible"
@@ -167,9 +157,14 @@ export const CustomTick = ({
         color="textSecondary"
         text={
           <Text variant="Smaller">
-            {type.type === 'time'
-              ? formatDate(payload.value, type.timeRange.interval)
-              : String(payload.value)}
+            {type.type === 'time' ? (
+              <FormattedDateTime
+                format={formatDate(duration)}
+                value={new Date(payload.value)}
+              />
+            ) : (
+              String(payload.value)
+            )}
           </Text>
         }
         centered
@@ -185,7 +180,7 @@ export const CustomTick = ({
   );
 };
 
-const StyledResponsiveContainer = styled(ResponsiveContainer)`
+export const StyledResponsiveContainer = styled(ResponsiveContainer)`
   // Avoid tooltip over constrained text to be cut off
   & .recharts-surface {
     overflow: visible;
@@ -304,7 +299,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     );
 
   return (
-    <Stack direction="vertical" gap="r8">
+    <Stack direction="vertical">
       <ChartHeader
         title={title}
         secondaryTitle={secondaryTitle}
@@ -332,9 +327,13 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             barCategoryGap={type.type === 'category' ? type.gap : undefined}
           >
             <CartesianGrid
-              vertical={false}
-              horizontal={false}
-              fill={theme.backgroundLevel1}
+              vertical={true}
+              horizontal={true}
+              verticalPoints={[0]}
+              horizontalPoints={[0]}
+              stroke={theme.border}
+              fill={theme.backgroundLevel4}
+              strokeWidth={1}
             />
             {rechartsBars.map((bar) => {
               const { fill, dataKey, stackId } = bar;
@@ -354,29 +353,21 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
 
             <YAxis
               tickCount={1}
+              interval={0}
               unit={` ${unitLabel}`}
               domain={[0, roundReferenceValue]}
               tickFormatter={
                 (value) =>
                   new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
               }
-              axisLine={false}
+              axisLine={{ stroke: theme.border }}
               tick={{
                 fill: theme.textSecondary,
                 fontSize: fontSize.smaller,
               }}
-              tickLine={false}
-              label={{
-                fill: theme.textSecondary,
-              }}
               orientation="right"
             />
 
-            <ReferenceLine
-              y={roundReferenceValue}
-              fill={theme.border}
-              strokeWidth={0.5} // Reduce stroke width to make it less visible
-            />
             <XAxis
               dataKey="category"
               tick={(props) => <CustomTick {...props} type={type} />}
@@ -384,10 +375,10 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
               interval={0}
               allowDataOverflow={true}
               tickLine={{
-                stroke: theme.textSecondary,
+                stroke: theme.border,
               }}
               axisLine={{
-                stroke: theme.textSecondary,
+                stroke: theme.border,
               }}
             />
 

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

@@ -30,6 +30,7 @@ describe('ChartTooltip', () => {
     longDate: () => screen.queryByText(/01 July 2024/),
     date: () => screen.queryByText(/\b01 Jul\b/),
     time: () => screen.queryByText(/00:00:00/),
+    dateTime: () => screen.queryByText(/01 Jul 00:00:00/),
   };
   it('should render the BarchartTooltip component', () => {
     render(
@@ -89,9 +90,8 @@ describe('ChartTooltip', () => {
     expect(selectors.successValue()).toBeInTheDocument();
     expect(selectors.failed()).toBeInTheDocument();
     expect(selectors.failedValue()).toBeInTheDocument();
-    expect(selectors.date()).not.toBeInTheDocument();
-    expect(selectors.longDate()).toBeInTheDocument();
-    expect(selectors.time()).not.toBeInTheDocument();
+
+    expect(selectors.dateTime()).toBeInTheDocument();
   });
   it('should render time tooltip when type is time and interval is one hour', () => {
     const label = date;

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

@@ -1,19 +1,19 @@
+import { TooltipContentProps } from 'recharts';
+import { LegendShape } from '../chartlegend/ChartLegend';
+import {
+  ChartTooltipContainer,
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  ChartTooltipItemsContainer,
+  TooltipHeader,
+} from '../charttooltip/ChartTooltip';
 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,
@@ -40,19 +40,15 @@ export const BarchartTooltip = <T extends BarchartBars>({
   if (tooltip) {
     return tooltip(currentPoint);
   }
-
+  const duration =
+    type.type === 'time'
+      ? type.timeRange.startDate.getTime() - type.timeRange.endDate.getTime()
+      : 0;
   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)}
-          />
+          <TooltipHeader duration={duration} value={currentPoint.category} />
         ) : (
           currentPoint.category
         )}

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

@@ -1,8 +1,4 @@
-import {
-  BarchartProps,
-  BarchartBars,
-  BarchartTooltipFn,
-} from './Barchart.component';
+import { BarchartProps, BarchartBars } from './Barchart.component';
 import { TooltipContentProps } from 'recharts';
 import { chartColors, ChartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';

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

@@ -133,7 +133,7 @@ export const ChartLegendWrapper = ({
   );
 
   const listResources = useCallback(() => {
-    return Object.keys(internalColorSet);
+    return Object.keys(internalColorSet).sort();
   }, [internalColorSet]);
 
   const chartLegendState = useMemo(

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

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 
 export const ChartTooltipContainer = styled.div`
   border: 1px solid ${({ theme }) => theme.border};
@@ -81,3 +82,42 @@ export const ChartTooltipItemsContainer = styled.div`
   gap: ${spacing.r8};
   width: 100%;
 `;
+
+export const ChartTooltipSeparator = styled.div`
+  height: 1px;
+  background-color: ${({ theme }) => theme.border};
+  margin: ${spacing.r4} 0;
+  width: 100%;
+`;
+
+export type TooltipDateFormat =
+  | 'day-month-abbreviated-year-hour-minute'
+  | 'day-month-abbreviated-hour-minute-second'
+  | 'day-month-abbreviated-hour-minute';
+
+const getTooltipDateFormat: (duration: number) => TooltipDateFormat = (
+  duration: number,
+) => {
+  if (duration <= 60 * 60 * 1000) {
+    return 'day-month-abbreviated-hour-minute-second';
+  } else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+    return 'day-month-abbreviated-hour-minute';
+  } else {
+    return 'day-month-abbreviated-year-hour-minute';
+  }
+};
+
+export const TooltipHeader = ({
+  duration,
+  value,
+}: {
+  duration: number;
+  value: string | number;
+}) => {
+  const timeFormat = getTooltipDateFormat(duration);
+  return (
+    <ChartTooltipHeader>
+      <FormattedDateTime format={timeFormat} value={new Date(value)} />
+    </ChartTooltipHeader>
+  );
+};