@scality/core-ui 0.167.0 → 0.168.0

package/dist/components/barchartv2/Barchart.component.d.ts

@@ -7,6 +7,10 @@ export type TimeType = {
         interval: number;
     };
 };
+export type CategoryType = {
+    type: 'category';
+    gap?: number;
+};
 export type Point = {
     key: string | number;
     values: {
@@ -36,7 +40,7 @@ export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['
     category: string | number;
 }) => 1 | -1 | 0;
 export type BarchartProps<T extends BarchartBars> = {
-    type: 'category' | TimeType;
+    type: CategoryType | TimeType;
     bars?: T;
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/Barchart.component.js

@@ -94,7 +94,7 @@ export const Barchart = (props) => {
     const theme = useTheme();
     const { getColor } = useChartLegend();
     const [hoveredValue, setHoveredValue] = useState();
-    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
+    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = { type: 'category' }, unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
     // Create colorSet from ChartLegendWrapper
     const colorSet = bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
         const color = getColor(bar.label);
@@ -104,7 +104,11 @@ export const Barchart = (props) => {
         return acc;
     }, {});
     const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
-    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
+    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
+                        ? type.gap === 0
+                            ? undefined
+                            : CHART_CONSTANTS.BAR_SIZE
+                        : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
                             const { fill, dataKey, stackId } = bar;
                             return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
                         }), _jsx(YAxis, { tickCount: 1, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator

package/dist/components/barchartv2/utils.js

@@ -174,10 +174,10 @@ const getRechartsBarsAndBarDataKeys = (bars, colorSet, stacked) => {
  */
 export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort, legendOrder) => {
     const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(bars, colorSet, stacked);
-    let data = type !== 'category' && type.type === 'time'
+    let data = type.type !== 'category' && type.type === 'time'
         ? transformTimeData(bars, type, barDataKeys)
         : transformCategoryData(bars, barDataKeys);
-    if (type === 'category' && defaultSort) {
+    if (type.type === 'category' && defaultSort) {
         data = applySortingToData(data, barDataKeys, defaultSort);
     }
     const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked, legendOrder);

package/dist/components/date/FormattedDateTime.d.ts

@@ -5,8 +5,13 @@ export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
 export declare const TIME_FORMATER: Intl.DateTimeFormat;
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export declare const YEAR_MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
 type FormattedDateTimeProps = {
-    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'chart-date';
+    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'chart-date' | 'year-month-day';
     value: Date;
 };
 export declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/date/FormattedDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,YAAY,CAAC;IAEjB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAqHxB,CAAC"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,YAAY,GACZ,gBAAgB,CAAC;IAErB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAuHxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -44,6 +44,15 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
     minute: '2-digit',
     hour12: false,
 });
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+});
 const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
     if (timeDiff > 0) {
         return `${stringToBeFormatted} ago`;
@@ -93,6 +102,8 @@ export const FormattedDateTime = ({ format, value, }) => {
             return _jsx(_Fragment, { children: LONG_DATE_FORMATER.format(value) });
         case 'chart-date':
             return _jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '') });
+        case 'year-month-day':
+            return _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
         default:
             return _jsx(_Fragment, {});
     }

package/dist/components/linetemporalchart/ChartUtil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAkCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}
+{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAwCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}

package/dist/components/linetemporalchart/ChartUtil.js

@@ -43,6 +43,12 @@ export function convertDataBaseValue(data, base) {
  * @returns {any}
  */
 export function getUnitLabel(unitRange, maxValue) {
+    if (!unitRange || unitRange.length === 0) {
+        return {
+            valueBase: 1,
+            unitLabel: '',
+        };
+    }
     // first sort the unitRange
     unitRange.sort((unitA, unitB) => {
         return unitA.threshold - unitB.threshold;

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

@@ -27,9 +27,15 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
         label: string;
     }[];
     isLoading?: boolean;
+    /**
+     * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
+     * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
+     * This will affect the format of the tooltip as well
+     */
+    timeFormat?: 'date-time' | 'date';
     yAxisTitle?: string;
     helpText?: string;
 };
-export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=linetimeseriechart.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA0FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAiEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CAoShB"}
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA2FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAuEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CA6ShB"}

package/dist/components/linetimeseriechart/linetimeseriechart.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, } from 'recharts';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
@@ -12,7 +12,7 @@ import { spacing } from '../../spacing';
 import { getUnitLabel } from '../linetemporalchart/ChartUtil';
 import { Icon } from '../icon/Icon.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
-import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, FormattedDateTime, } from '../date/FormattedDateTime';
+import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, FormattedDateTime, YEAR_MONTH_DAY_FORMATTER, } from '../date/FormattedDateTime';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
   flex-direction: column;
@@ -67,7 +67,7 @@ const TooltipName = styled.div `
 const TooltipInstanceValue = styled.div `
   justify-content: flex-end;
 `;
-const CustomTooltip = ({ active, payload, label, unitLabel, }) => {
+const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
     if (!active || !payload || !payload.length || !label)
         return null;
     // We can't use the default itemSorter method because it's a custom tooltip.
@@ -83,14 +83,16 @@ const CustomTooltip = ({ active, payload, label, unitLabel, }) => {
         }
         return bValue - aValue; // Positives before negatives
     });
-    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsxs(TooltipContent, { children: [_jsx(TooltipName, { children: entry.name }), _jsx(TooltipInstanceValue, { children: isNaN(Number(entry.value))
+    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: timeFormat === 'date-time'
+                        ? 'day-month-abbreviated-hour-minute-second'
+                        : 'long-date', value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsxs(TooltipContent, { children: [_jsx(TooltipName, { children: entry.name }), _jsx(TooltipInstanceValue, { children: isNaN(Number(entry.value))
                                     ? '-'
                                     : `${Number(entry.value).toFixed(2)}${unitLabel}` })] })] }, index)))] }));
 };
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
 };
-export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
     const theme = useTheme();
     const { getColor } = useChartLegend();
     const chartRef = useRef(null);
@@ -217,11 +219,15 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
         };
     }, [series, getColor]);
     // Format time for display the tick in the x axis
-    const formatTime = useMemo(() => (timestamp) => {
+    const formatXAxisLabel = useCallback((timestamp) => {
         const date = new Date(timestamp);
-        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
-    }, []);
-    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatTime, tickCount: 5, tick: {
+        return timeFormat === 'date-time'
+            ? DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '')
+            : timeFormat === 'date'
+                ? YEAR_MONTH_DAY_FORMATTER.format(date)
+                : '';
+    }, [timeFormat]);
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabel, tickCount: 5, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
                             }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
@@ -240,8 +246,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
                                     : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
-                            }, tickFormatter: (value) => Math.round(value).toString() }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { unitLabel: unitLabel }) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
+                            }, tickFormatter: (value) => Math.round(value).toString() }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat }) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
                             const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
-                            return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false }, `${title}-${resource}-${serieIndex}`));
+                            return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false }, `${title}-${resource}-${serieIndex}`));
                         }))] }) })] }));
 }

package/package.json

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

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

@@ -60,7 +60,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={testBars} />
+            <Barchart type={{ type: 'category' }} bars={testBars} />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -98,7 +98,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={[]} isError />
+            <Barchart type={{ type: 'category' }} bars={[]} isError />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -111,7 +111,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={[]} isLoading />
+            <Barchart type={{ type: 'category' }} bars={[]} isLoading />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -122,7 +122,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={undefined} />
+            <Barchart type={{ type: 'category' }} bars={undefined} />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -316,7 +316,11 @@ describe('Barchart', () => {
     render(
       <Wrapper>
         <ChartLegendWrapper colorSet={{ ...testColorSet, Failed: 'red' }}>
-          <Barchart type="category" bars={testStackedBars} stacked={true} />
+          <Barchart
+            type={{ type: 'category' }}
+            bars={testStackedBars}
+            stacked
+          />
         </ChartLegendWrapper>
       </Wrapper>,
     );
@@ -344,7 +348,7 @@ describe('Barchart', () => {
       <Wrapper>
         <ChartLegendWrapper colorSet={testColorSet}>
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={testBars}
             defaultSort={(pointA, pointB) => {
               const valueA = pointA.Success;
@@ -369,7 +373,7 @@ describe('Barchart', () => {
       <Wrapper>
         <ChartLegendWrapper colorSet={testColorSet}>
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={[]}
             title="Test Title"
             secondaryTitle="Test Secondary Title"

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

@@ -45,6 +45,11 @@ export type TimeType = {
     interval: number;
   };
 };
+
+export type CategoryType = {
+  type: 'category';
+  gap?: number;
+};
 export type Point = {
   key: string | number;
   values: { label: string; value: number }[];
@@ -70,7 +75,7 @@ export type BarchartSortFn<T extends BarchartBars> = (
 ) => 1 | -1 | 0;
 
 export type BarchartProps<T extends BarchartBars> = {
-  type: 'category' | TimeType;
+  type: CategoryType | TimeType;
   bars?: T;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
@@ -260,7 +265,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   const {
     height = CHART_CONSTANTS.DEFAULT_HEIGHT,
     bars,
-    type = 'category',
+    type = { type: 'category' },
     unitRange,
     stacked,
     stackedBarSort = 'default',
@@ -314,9 +319,16 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
           <BarChart
             data={rechartsData}
             accessibilityLayer
-            barSize={CHART_CONSTANTS.BAR_SIZE}
+            barSize={
+              type.type === 'category'
+                ? type.gap === 0
+                  ? undefined
+                  : CHART_CONSTANTS.BAR_SIZE
+                : CHART_CONSTANTS.BAR_SIZE
+            }
             height={height}
             margin={CHART_CONSTANTS.CHART_MARGIN}
+            barCategoryGap={type.type === 'category' ? type.gap : undefined}
           >
             <CartesianGrid
               vertical={false}

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

@@ -570,7 +570,7 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
 
     const result = formatPrometheusDataToRechartsDataAndBars(
       bars,
-      'category',
+      { type: 'category' },
       {
         Success: coreUIAvailableThemes.darkRebrand.statusHealthy,
         Failed: coreUIAvailableThemes.darkRebrand.statusCritical,
@@ -647,7 +647,7 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
 
     const result = formatPrometheusDataToRechartsDataAndBars(
       bars,
-      'category',
+      { type: 'category' },
       mockTheme,
       false,
       (pointA, pointB) => {

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

@@ -271,11 +271,11 @@ export const formatPrometheusDataToRechartsDataAndBars = <
   );
 
   let data =
-    type !== 'category' && type.type === 'time'
+    type.type !== 'category' && type.type === 'time'
       ? transformTimeData(bars, type, barDataKeys)
       : transformCategoryData(bars, barDataKeys);
 
-  if (type === 'category' && defaultSort) {
+  if (type.type === 'category' && defaultSort) {
     data = applySortingToData(data, barDataKeys, defaultSort);
   }
 

package/src/lib/components/date/FormattedDateTime.tsx

@@ -54,6 +54,16 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   hour12: false,
 });
 
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -65,7 +75,8 @@ type FormattedDateTimeProps = {
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
     | 'long-date'
-    | 'chart-date';
+    | 'chart-date'
+    | 'year-month-day';
 
   value: Date;
 };
@@ -198,6 +209,8 @@ export const FormattedDateTime = ({
       return <>{LONG_DATE_FORMATER.format(value)}</>;
     case 'chart-date':
       return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
+    case 'year-month-day':
+      return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
     default:
       return <></>;
   }

package/src/lib/components/linetemporalchart/ChartUtil.ts

@@ -72,6 +72,12 @@ export function getUnitLabel(
   valueBase: number;
   unitLabel: string;
 } {
+  if (!unitRange || unitRange.length === 0) {
+    return {
+      valueBase: 1,
+      unitLabel: '',
+    };
+  }
   // first sort the unitRange
   unitRange.sort(
     (

package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx

@@ -8,7 +8,7 @@ import {
   YAxis,
   CartesianGrid,
 } from 'recharts';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
@@ -23,6 +23,7 @@ import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
 import {
   DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
   FormattedDateTime,
+  YEAR_MONTH_DAY_FORMATTER,
 } from '../date/FormattedDateTime';
 
 const LineTemporalChartWrapper = styled.div`
@@ -129,6 +130,12 @@ export type LineChartProps = (
     label: string;
   }[];
   isLoading?: boolean;
+  /**
+   * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
+   * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
+   * This will affect the format of the tooltip as well
+   */
+  timeFormat?: 'date-time' | 'date';
   yAxisTitle?: string;
   helpText?: string;
 };
@@ -138,6 +145,7 @@ const CustomTooltip = ({
   payload,
   label,
   unitLabel,
+  timeFormat,
 }: {
   active?: boolean;
   payload?: Array<{
@@ -148,6 +156,7 @@ const CustomTooltip = ({
   }>;
   label?: string;
   unitLabel?: string;
+  timeFormat?: 'date-time' | 'date';
 }) => {
   if (!active || !payload || !payload.length || !label) return null;
   // We can't use the default itemSorter method because it's a custom tooltip.
@@ -169,7 +178,11 @@ const CustomTooltip = ({
     <TooltipContainer>
       <TooltipTime>
         <FormattedDateTime
-          format="day-month-abbreviated-hour-minute-second"
+          format={
+            timeFormat === 'date-time'
+              ? 'day-month-abbreviated-hour-minute-second'
+              : 'long-date'
+          }
           value={new Date(label)}
         />
       </TooltipTime>
@@ -205,6 +218,7 @@ export function LineTimeSerieChart({
   duration,
   unitRange,
   isLoading = false,
+  timeFormat = 'date-time',
   yAxisType = 'default',
   yAxisTitle,
   helpText,
@@ -393,12 +407,16 @@ export function LineTimeSerieChart({
   }, [series, getColor]);
 
   // Format time for display the tick in the x axis
-  const formatTime = useMemo(
-    () => (timestamp: number) => {
+  const formatXAxisLabel = useCallback(
+    (timestamp: number) => {
       const date = new Date(timestamp);
-      return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+      return timeFormat === 'date-time'
+        ? DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '')
+        : timeFormat === 'date'
+          ? YEAR_MONTH_DAY_FORMATTER.format(date)
+          : '';
     },
-    [],
+    [timeFormat],
   );
 
   return (
@@ -438,7 +456,7 @@ export function LineTimeSerieChart({
             type="number"
             domain={['dataMin', 'dataMax']}
             ticks={xAxisTicks}
-            tickFormatter={formatTime}
+            tickFormatter={formatXAxisLabel}
             tickCount={5}
             tick={{
               fill: theme.textSecondary,
@@ -473,7 +491,11 @@ export function LineTimeSerieChart({
             }}
             tickFormatter={(value) => Math.round(value).toString()}
           />
-          <Tooltip content={<CustomTooltip unitLabel={unitLabel} />} />
+          <Tooltip
+            content={
+              <CustomTooltip unitLabel={unitLabel} timeFormat={timeFormat} />
+            }
+          />
           {/* Add horizontal line at y=0 for symmetrical charts */}
           {yAxisType === 'symmetrical' && (
             <ReferenceLine y={0} stroke={theme.border} />
@@ -493,6 +515,7 @@ export function LineTimeSerieChart({
                   dataKey={label}
                   stroke={colorMapping[resource]}
                   dot={false}
+                  isAnimationActive={false}
                 />
               );
             }),

package/src/lib/components/linetimeseriechart/linetimeseriechart.test.tsx

@@ -0,0 +1,68 @@
+import { render } from "@testing-library/react";
+import { LineChartProps, LineTimeSerieChart } from "./linetimeseriechart.component";
+import { ChartLegendWrapper } from "../chartlegend/ChartLegendWrapper";
+import { ThemeProvider } from "styled-components";
+import { coreUIAvailableThemes } from "../../style/theme";
+
+const TestSeries = [
+    {
+        
+        resource: "Series 1",
+        getTooltipLabel: () => `Series 1`,
+        data: [
+            [1622505600000, 10],
+            [1622509200000, 20],
+            [1622512800000, 30],
+        ] as [number, number][],
+    },
+    {
+        resource: "Series 2",
+        getTooltipLabel: () => `Series 2`,
+        data: [
+            [1622505600000, 15],
+            [1622509200000, 25],
+            [1622512800000, 35],
+        ] as [number, number][],
+    },
+];
+
+const ColorSet = {
+    "Series 1": "#FF0000",
+    "Series 2": "#00FF00",
+};
+
+const renderLineTimeSerieChart = (props: Partial<LineChartProps> = {}) => {
+    return render(
+        <ThemeProvider theme={coreUIAvailableThemes.artescaLight}>
+            <ChartLegendWrapper colorSet={ColorSet}>
+                <LineTimeSerieChart
+                    {
+                        ...{
+                            title: "Test Chart",
+                            yAxisType: "default",
+                            series: TestSeries,
+                            height: 400,
+                            startingTimeStamp: TestSeries[0].data[0][0],
+                            interval: TestSeries[0].data[1][0] - TestSeries[0].data[0][0],
+                            duration: TestSeries[0].data[TestSeries[0].data.length - 1][0] - TestSeries[0].data[0][0],
+                            unitRange: [{ label: 'units', value: 1 }],
+                            ...props
+                        } as LineChartProps
+                    }
+                />
+            </ChartLegendWrapper>
+        </ThemeProvider>
+    );
+};
+
+describe('LineTimeSerieChart', () => {
+    it('should render when with basic parameters', async () => {
+        const { container } = renderLineTimeSerieChart();
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should render when no unitRange is provided', async () => {
+        const { container } = renderLineTimeSerieChart({ unitRange: undefined });
+        expect(container).toBeInTheDocument();
+    });
+});

package/stories/BarChart/barchart.stories.tsx

@@ -61,7 +61,7 @@ export const Playground: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type="category" bars={exampleData} />
+          <Barchart type={{ type: 'category' }} bars={exampleData} />
           <ChartLegend shape="rectangle" direction="horizontal" />
         </Stack>
       </ChartLegendWrapper>
@@ -332,7 +332,7 @@ export const CapacityWithUnitRange: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           bars={capacityDataWithUnitRange}
           unitRange={[
             {
@@ -402,7 +402,7 @@ export const Stacked: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type="category" bars={stackedData} stacked />
+          <Barchart type={{ type: 'category' }} bars={stackedData} stacked />
           <ChartLegend shape="rectangle" />
         </Stack>
       </ChartLegendWrapper>
@@ -453,7 +453,7 @@ export const DefaultSort: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           stacked
           bars={defaultSortData}
           defaultSort={customSort}
@@ -531,7 +531,7 @@ export const WithCustomTooltip: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
-              type="category"
+              type={{ type: 'category' }}
               bars={exampleData}
               tooltip={customTooltip}
               height={300}
@@ -602,7 +602,7 @@ export const StatusColors: Story = {
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={statusData}
             stacked
             title="System Health Metrics"
@@ -656,7 +656,7 @@ export const LegendShapes: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
-              type="category"
+              type={{ type: 'category' }}
               bars={exampleData}
               height={200}
               title="Horizontal Rectangle Legend"
@@ -673,7 +673,7 @@ export const LegendShapes: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
-              type="category"
+              type={{ type: 'category' }}
               bars={exampleData}
               height={200}
               title="Vertical Line Legend"
@@ -727,14 +727,14 @@ export const BarchartsWithSingleLegend: Story = {
           }}
         >
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={exampleData}
             height={200}
             title="Barchart 1"
           />
 
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={exampleData}
             height={200}
             title="Barchart 2"
@@ -757,7 +757,7 @@ export const ErrorState: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           bars={[]}
           isError
           title="Error State"
@@ -808,7 +808,7 @@ export const StackedBarSort: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           bars={statusesData}
           stacked
           stackedBarSort={sort}
@@ -883,7 +883,7 @@ export const CompleteExample: Story = {
           }}
         >
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             title="Loading BarChart"
             helpTooltip="Click on the button to load or unload data"
             secondaryTitle={isLoading ? 'Loading...' : 'Loaded data'}
@@ -911,3 +911,98 @@ export const CompleteExample: Story = {
     );
   },
 };
+
+export const Histogram: Story = {
+  render: () => {
+    const histogramData = [
+      {
+        label: 'Success',
+        data: [
+          ['0-10', 1],
+          ['10-20', 5],
+          ['20-30', 15],
+          ['30-40', 40],
+          ['40-50', 45],
+          ['50-60', 50],
+          ['60-70', 40],
+          ['70-80', 15],
+          ['80-90', 5],
+          ['90-100', 1],
+        ],
+      },
+    ] as const;
+    const theme = useTheme() as CoreUITheme;
+    return (
+      <div style={{ width: '50%', padding: spacing.r16 }}>
+        <ChartLegendWrapper
+          colorSet={{
+            Success: theme.statusHealthy,
+            Failed: theme.statusCritical,
+          }}
+        >
+          <Barchart
+            type={{ type: 'category', gap: 0 }}
+            bars={histogramData}
+            title="Histogram"
+          />
+        </ChartLegendWrapper>
+      </div>
+    );
+  },
+};
+
+export const StackedHistogram: Story = {
+  render: () => {
+    const histogramData = [
+      {
+        label: 'Test 1',
+        data: [
+          ['0-10', 1],
+          ['10-20', 5],
+          ['20-30', 15],
+          ['30-40', 40],
+          ['40-50', 45],
+          ['50-60', 50],
+          ['60-70', 40],
+          ['70-80', 15],
+          ['80-90', 5],
+          ['90-100', 1],
+        ],
+      },
+      {
+        label: 'Test 2',
+        data: [
+          ['0-10', 1],
+          ['10-20', 2],
+          ['20-30', 4],
+          ['30-40', 4],
+          ['40-50', 5],
+          ['50-60', 6],
+          ['60-70', 6],
+          ['70-80', 3],
+          ['80-90', 2],
+          ['90-100', 1],
+        ],
+      },
+    ] as const;
+    const theme = useTheme() as CoreUITheme;
+    return (
+      <div style={{ width: '50%', padding: spacing.r16 }}>
+        <ChartLegendWrapper
+          colorSet={{
+            'Test 1': theme.statusHealthy,
+            'Test 2': theme.statusWarning,
+          }}
+        >
+          <Barchart
+            type={{ type: 'category', gap: 0 }}
+            bars={histogramData}
+            title="Stacked Histogram"
+            stacked
+          />
+          <ChartLegend shape="rectangle" />
+        </ChartLegendWrapper>
+      </div>
+    );
+  },
+};

package/stories/linetimeseriechart.stories.tsx

@@ -64,6 +64,10 @@ const meta: Meta<typeof LineTimeSerieChart> = {
       options: ['default', 'percentage', 'symmetrical'],
     },
     yAxisTitle: { control: 'text' },
+    timeFormat: {
+      control: 'select',
+      options: ['date-time', 'date'],
+    },
   },
 };
 
@@ -405,6 +409,74 @@ const irregularIntervalData = [
   [1740424900, '46.92'], // +1100 seconds (18.3 minutes) - under 2 intervals
 ];
 
+// Data spanning several months - multi-month dataset
+const longTermPrometheusData: [number, string][] = [
+  // January 2025
+  [1735689600, '42.15'], // Jan 1, 2025
+  [1735776000, '38.92'], // Jan 2, 2025
+  [1735862400, '55.33'], // Jan 3, 2025
+  [1735948800, '67.88'], // Jan 4, 2025
+  [1736035200, '44.21'], // Jan 5, 2025
+  [1736121600, '72.15'], // Jan 6, 2025
+  [1736208000, '39.67'], // Jan 7, 2025
+  [1736294400, '58.44'], // Jan 8, 2025
+  [1736380800, '63.92'], // Jan 9, 2025
+  [1736467200, '41.33'], // Jan 10, 2025
+  [1736553600, '76.88'], // Jan 11, 2025
+  [1736640000, '52.15'], // Jan 12, 2025
+  [1736726400, '48.67'], // Jan 13, 2025
+  [1736812800, '69.33'], // Jan 14, 2025
+  [1736899200, '35.88'], // Jan 15, 2025
+  // February 2025
+  [1738368000, '81.15'], // Feb 1, 2025
+  [1738454400, '47.67'], // Feb 2, 2025
+  [1738540800, '54.33'], // Feb 3, 2025
+  [1738627200, '62.88'], // Feb 4, 2025
+  [1738713600, '38.15'], // Feb 5, 2025
+  [1738800000, '73.67'], // Feb 6, 2025
+  [1738886400, '45.33'], // Feb 7, 2025
+  [1738972800, '59.88'], // Feb 8, 2025
+  [1739059200, '51.15'], // Feb 9, 2025
+  [1739145600, '66.67'], // Feb 10, 2025
+  [1739232000, '43.33'], // Feb 11, 2025
+  [1739318400, '78.88'], // Feb 12, 2025
+  [1739404800, '36.15'], // Feb 13, 2025
+  [1739491200, '64.67'], // Feb 14, 2025
+  [1739577600, '49.33'], // Feb 15, 2025
+  // March 2025
+  [1740787200, '71.88'], // Mar 1, 2025
+  [1740873600, '42.15'], // Mar 2, 2025
+  [1740960000, '57.67'], // Mar 3, 2025
+  [1741046400, '68.33'], // Mar 4, 2025
+  [1741132800, '34.88'], // Mar 5, 2025
+  [1741219200, '75.15'], // Mar 6, 2025
+  [1741305600, '48.67'], // Mar 7, 2025
+  [1741392000, '53.33'], // Mar 8, 2025
+  [1741478400, '61.88'], // Mar 9, 2025
+  [1741564800, '37.15'], // Mar 10, 2025
+  [1741651200, '74.67'], // Mar 11, 2025
+  [1741737600, '44.33'], // Mar 12, 2025
+  [1741824000, '58.88'], // Mar 13, 2025
+  [1741910400, '52.15'], // Mar 14, 2025
+  [1741996800, '67.67'], // Mar 15, 2025
+  // April 2025
+  [1743465600, '41.33'], // Apr 1, 2025
+  [1743552000, '76.88'], // Apr 2, 2025
+  [1743638400, '35.15'], // Apr 3, 2025
+  [1743724800, '63.67'], // Apr 4, 2025
+  [1743811200, '50.33'], // Apr 5, 2025
+  [1743897600, '72.88'], // Apr 6, 2025
+  [1743984000, '39.15'], // Apr 7, 2025
+  [1744070400, '56.67'], // Apr 8, 2025
+  [1744156800, '65.33'], // Apr 9, 2025
+  [1744243200, '33.88'], // Apr 10, 2025
+  [1744329600, '77.15'], // Apr 11, 2025
+  [1744416000, '46.67'], // Apr 12, 2025
+  [1744502400, '54.33'], // Apr 13, 2025
+  [1744588800, '60.88'], // Apr 14, 2025
+  [1744675200, '49.22'], // Apr 15, 2025
+];
+
 export const PercentageChartExample: Story = {
   args: {
     series: [
@@ -425,6 +497,7 @@ export const PercentageChartExample: Story = {
     yAxisTitle: '',
     interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+    xAxisFormat: 'date-time',
   },
 };
 const UNIT_RANGE_BS = [
@@ -537,3 +610,27 @@ export const IrregularIntervalsExample: Story = {
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
   },
 };
+
+export const DateFormatExample: Story = {
+  args: {
+    series: [
+      {
+        data: longTermPrometheusData,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'Long term data',
+    height: 200,
+    startingTimeStamp: longTermPrometheusData[0][0],
+    isLoading: false,
+    isLegendHidden: false,
+    helpText: 'This is the help text',
+    interval: 60 * 60 * 24, // 1 day
+    duration:
+      longTermPrometheusData[longTermPrometheusData.length - 1][0] -
+      longTermPrometheusData[0][0],
+    timeFormat: 'date',
+  },
+};