@scality/core-ui 0.161.0 → 0.162.0

package/README.md

@@ -8,13 +8,13 @@ Core-UI is a component library containing all components, layouts, icons and the
 
 #### Manual installation
 
-- Add ```@scality/core-ui``` in the ```package.json```'s dependencies of your project.
+- Add `@scality/core-ui` in the `package.json`'s dependencies of your project.
 
 ```json
     "@scality/core-ui": "0.115.0",
 ```
 
-- ```@scality/core-ui``` requires the peerDependencies below. Make sure that you have them in the ```package.json```'s dependencies.
+- `@scality/core-ui` requires the peerDependencies below. Make sure that you have them in the `package.json`'s dependencies.
 
 ```json
     "@fortawesome/fontawesome-free": "^5.10.2",
@@ -53,7 +53,7 @@ npm install
 
 ### Usage
 
-- Import a component from ```@scality/core-ui/dist/next'``` or ```@scality/core-ui```
+- Import a component from `@scality/core-ui/dist/next'` or `@scality/core-ui`
 
 - Use props to change its appearance and behaviour
 
@@ -61,8 +61,12 @@ npm install
 import { Button } from '@scality/core-ui/dist/next';
 import { Icon } from '@scality/core-ui';
 
-<Button variant="primary" onClick={handleClick} label="Save" icon={<Icon name="Save" />} />
-
+<Button
+  variant="primary"
+  onClick={handleClick}
+  label="Save"
+  icon={<Icon name="Save" />}
+/>;
 ```
 
 To learn more about the available components, you can read the [documentation](https://scality.github.io/core-ui/)
@@ -73,17 +77,15 @@ Components are themable by using the [styled-components theming concept](https:/
 Wrap your app in a `ThemeProvider` and provide it a theme :
 
 ```jsx
-
 import { ThemeProvider } from 'styled-components';
 import { Layout } from '@scality/core-ui';
 import { coreUIAvailableThemes as themes } from '@scality/core-ui/dist/style/theme';
 
 <ThemeProvider theme={themes.darkRebrand}>
-    <Layout sidebar={sidebar} navbar={navbar}>
-        ...
-    </Layout>
-</ThemeProvider>
-
+  <Layout sidebar={sidebar} navbar={navbar}>
+    ...
+  </Layout>
+</ThemeProvider>;
 ```
 
 There is 2 default theme available in Core-UI : you can find them [here](https://github.com/scality/core-ui/pull/684#:~:text=https%3A//github.com/scality/core%2Dui/blob/development/1.0/src/lib/style/theme.ts)
@@ -93,7 +95,6 @@ There is 2 default theme available in Core-UI : you can find them [here](https:/
 You can also modify or create a new theme. In this case make sure to respect this type :
 
 ```tsx
-
 export type CoreUITheme = {
   statusHealthy: string;
   statusHealthyRGB: string;
@@ -119,7 +120,6 @@ export type CoreUITheme = {
   textReverse: string;
   textLink: string;
 };
-
 ```
 
 <br />
@@ -272,7 +272,7 @@ git push origin <branch-name>
 
 then create a `Pull Request`.
 Pull request needs to be approved by at least one reviewer.
-After your PR is approved you can comment `/approve`  
+After your PR is approved you can comment `/approve`
 
 ### Release
 
@@ -282,7 +282,7 @@ In the Core-UI repo, follow these steps :
 1. Go on `Releases` then `Draft a new release`
 2. In the select menu `Choose a tag` : Create a new tag (the current tag increment by 1).
 3. You can now `Generate release notes` : it will add all the PR infos since the last release. \
-You can add details if necessary.
+   You can add details if necessary.
 4. `Publish release`
 5. It will create a PR that need to be approved.
 

package/dist/components/accordion/Accordion.component.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export type AccordionProps = {
     title: string;
     id: string;

package/dist/components/accordion/Accordion.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgDF,eAAO,MAAM,SAAS,sDAOnB,cAAc,4CA4DhB,CAAC"}
+{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgDF,eAAO,MAAM,SAAS,sDAOnB,cAAc,4CA4DhB,CAAC"}

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

@@ -0,0 +1,55 @@
+import { ChartColors } from '../../style/theme';
+import { UnitRange } from './utils';
+export type TimeType = {
+    type: 'time';
+    timeRange: {
+        startDate: Date;
+        endDate: Date;
+        interval: number;
+    };
+};
+export type Point = {
+    key: string | number;
+    values: {
+        label: string;
+        value: number;
+    }[];
+};
+export type BarchartBars = readonly {
+    readonly label: string;
+    /**
+     * When using a time type, the data should be an array of [Date, value]
+     * so use Date instead of timestamp for transformation data in format fn
+     */
+    readonly data: readonly (readonly [string | Date, number | string])[];
+}[];
+export type BarchartTooltipFn<T extends BarchartBars> = (currentPoint: {
+    category: string | number;
+    values: {
+        label: T[number]['label'];
+        value: number;
+        isHovered: boolean;
+    }[];
+}) => React.ReactNode;
+export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['label'], number> & {
+    category: string | number;
+}, pointB: Record<T[number]['label'], number> & {
+    category: string | number;
+}) => 1 | -1 | 0;
+export type BarchartProps<T extends BarchartBars> = {
+    type: 'category' | TimeType;
+    bars: T;
+    colorSet: Record<T[number]['label'], ChartColors | (string & {})>;
+    tooltip?: BarchartTooltipFn<T>;
+    defaultSort?: BarchartSortFn<T>;
+    unitRange?: UnitRange;
+    helpTooltip?: string;
+    stacked?: boolean;
+    title?: string;
+    secondaryTitle?: string;
+    rightTitle?: React.ReactNode;
+    height?: number;
+    isLoading?: boolean;
+};
+export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Barchart.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,WAAW,EAAY,MAAM,mBAAmB,CAAC;AAMvE,OAAO,EAAwB,SAAS,EAAgB,MAAM,SAAS,CAAC;AAiBxE,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC;CACvE,EAAE,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,YAAY,EAAE;IACrE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAC5E,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,YAAY,IAAI,CACnD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC1E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KACvE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,IAAI;IAClD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAiHF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CAgHvE,CAAC"}

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import styled, { useTheme } from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { chartColors, fontSize } from '../../style/theme';
+import { Box } from '../box/Box';
+import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+import { IconHelp } from '../iconhelper/IconHelper';
+import { Loader } from '../loader/Loader.component';
+import { Text } from '../text/Text.component';
+import { renderTooltipContent, useChartData } from './utils';
+const CHART_CONSTANTS = {
+    TICK_WIDTH_OFFSET: 5,
+    BAR_SIZE: 12,
+    MIN_POINT_SIZE: 1,
+    DEFAULT_HEIGHT: 200,
+    CHART_MARGIN: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+    },
+};
+/* ---------------------------------- COMPONENTS ---------------------------------- */
+const CustomTick = ({ x, y, payload, visibleTicksCount, width, }) => {
+    const theme = useTheme();
+    const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
+    const centerX = x - tickWidth / 2;
+    return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { text: _jsx(Text, { variant: "Smaller", color: "textSecondary", children: String(payload.value) }), centered: true, tooltipStyle: {
+                backgroundColor: theme.backgroundLevel1,
+                padding: spacing.r10,
+                borderRadius: spacing.r8,
+                border: `1px solid ${theme.border}`,
+                position: 'absolute',
+            } }) }));
+};
+const StyledResponsiveContainer = styled(ResponsiveContainer) `
+  // Avoid tooltip over constrained text to be cut off
+  & .recharts-surface {
+    overflow: visible;
+  }
+`;
+const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
+    return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && (_jsx(IconHelp, { tooltipMessage: helpTooltip, title: helpTooltip })), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
+                            marginLeft: spacing.r8,
+                        }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
+};
+const Loading = ({ height }) => {
+    return (_jsx(Box, { height: height, style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+        }, children: _jsx(Loader, { size: "larger", children: _jsx(Text, { children: "Loading Chart Data..." }) }) }));
+};
+/* ---------------------------------- MAIN COMPONENT ---------------------------------- */
+export const Barchart = (props) => {
+    const theme = useTheme();
+    const [hoveredValue, setHoveredValue] = useState();
+    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', colorSet, unitRange, stacked, defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, } = props;
+    const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
+    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), 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) => {
+                            const { fill, dataKey, stackId } = bar;
+                            return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: 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
+                            , axisLine: false, tick: {
+                                fill: theme.textSecondary,
+                                fontSize: fontSize.smaller,
+                            }, tickLine: false, label: {
+                                fill: theme.textSecondary,
+                            }, orientation: "right" }), _jsx(ReferenceLine, { y: roundReferenceValue, fill: theme.border, strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
+                                stroke: theme.textSecondary,
+                            }, axisLine: {
+                                stroke: theme.textSecondary,
+                            } }), _jsx(Tooltip, { content: (props) => renderTooltipContent(props, tooltip, hoveredValue), cursor: false })] }) }))] }));
+};

package/dist/components/barchartv2/utils.d.ts

@@ -0,0 +1,95 @@
+import { BarchartProps, BarchartBars, BarchartTooltipFn } from './Barchart.component';
+import { TooltipContentProps } from 'recharts';
+import { ChartColors } from '../../style/theme';
+export declare const getRoundReferenceValue: (value: number) => number;
+export declare const getMaxBarValue: (data: {
+    [key: string]: string | number;
+}[], stacked?: boolean) => number;
+/**
+ * Transforms time-based data into chart format
+ */
+export declare const transformTimeData: <T extends BarchartBars>(bars: T, type: {
+    type: "time";
+    timeRange: {
+        startDate: Date;
+        endDate: Date;
+        interval: number;
+    };
+}, barDataKeys: string[]) => {
+    [key: string]: string | number;
+}[];
+/**
+ * Transforms category-based data into chart format
+ */
+export declare const transformCategoryData: <T extends BarchartBars>(bars: T, barDataKeys: string[]) => {
+    [key: string]: string | number;
+}[];
+/**
+ * Applies custom sorting to chart data
+ */
+export declare const applySortingToData: <T extends BarchartBars>(data: {
+    [key: string]: string | number;
+}[], barDataKeys: string[], defaultSort: BarchartProps<T>["defaultSort"]) => {
+    [key: string]: string | number;
+}[];
+/**
+ * Converts prometheus data to recharts data format
+ * @param bars - The bars to convert
+ * @param type - The chart type (category or time)
+ * @returns Recharts data format
+ */
+export declare const formatPrometheusDataToRechartsDataAndBars: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<T[number]["label"], ChartColors | (string & {})>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"]) => {
+    data: {
+        [key: string]: string | number;
+    }[];
+    rechartsBars: {
+        dataKey: string;
+        fill: string;
+        stackId?: string;
+    }[];
+};
+export type UnitRange = {
+    threshold: number;
+    label: string;
+}[];
+export declare const computeUnitLabelAndRoundReferenceValue: (data: any, maxValue: number, unitRange: UnitRange | undefined) => {
+    unitLabel: string;
+    roundReferenceValue: number;
+    rechartsData: any;
+};
+/**
+ * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
+ * @param {any} unitRange
+ * @param {any} maxValue the maximum value among the data set
+ * @returns {any}
+ */
+export declare function getUnitLabel(unitRange: {
+    threshold: number;
+    label: string;
+}[], maxValue: number): {
+    valueBase: number;
+    unitLabel: string;
+};
+export declare const sortStackedBars: (rechartsBars: {
+    dataKey: string;
+    fill: string;
+    stackId?: string;
+}[], data: {
+    [key: string]: string | number;
+}[], stacked?: boolean) => {
+    dataKey: string;
+    fill: string;
+    stackId?: string;
+}[];
+export declare const renderTooltipContent: <T extends BarchartBars>(props: TooltipContentProps<number, string>, tooltip: BarchartTooltipFn<T> | undefined, hoveredValue: string | undefined) => import("react").ReactNode;
+export declare const useChartData: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<T[number]["label"], ChartColors | (string & {})>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"], unitRange?: UnitRange) => {
+    rechartsBars: {
+        dataKey: string;
+        fill: string;
+        stackId?: string;
+    }[];
+    unitLabel: string;
+    roundReferenceValue: number;
+    rechartsData: any;
+};
+//# sourceMappingURL=utils.d.ts.map

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

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

package/dist/components/barchartv2/utils.js

@@ -0,0 +1,305 @@
+import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
+import { chartColors } from '../../style/theme';
+export const getRoundReferenceValue = (value) => {
+    if (value <= 0)
+        return 10; // Default for zero or negative values
+    // Get the magnitude (10^n where n is the number of digits - 1)
+    const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    // Normalized value between 1 and 10
+    const normalized = value / magnitude;
+    // Round to nice numbers based on normalized value
+    if (normalized <= 1)
+        return magnitude;
+    if (normalized <= 2.5)
+        return 2.5 * magnitude;
+    if (normalized <= 5)
+        return 5 * magnitude;
+    return 10 * magnitude;
+};
+export const getMaxBarValue = (data, stacked) => {
+    const values = data.map((item) => {
+        // If stacked, we need to filter out category and sum the values in the same object
+        if (stacked) {
+            // Get objects keys except category
+            const filterOutCategory = Object.keys(item).filter((key) => key !== 'category');
+            // Sum the values in the same object (corresponding to one bar) based on the keys
+            const sumValues = filterOutCategory.reduce((acc, curr) => {
+                return acc + Number(item[curr]);
+            }, 0);
+            return sumValues;
+        }
+        //filter out the category key
+        const numberValues = Object.keys(item)
+            .filter((key) => key !== 'category')
+            .map((key) => Number(item[key]));
+        // Get the max value among the values in the object (corresponding to one bar)
+        return Math.max(...numberValues);
+    });
+    return Math.max(...values);
+};
+/**
+ * Generates time ranges between start and end dates based on the given interval
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @param interval - Interval in milliseconds
+ * @returns Array of time ranges with start and end properties as Date objects
+ */
+const generateTimeRanges = (startDate, endDate, interval) => {
+    const ranges = [];
+    if (!startDate || !endDate || !interval) {
+        return ranges;
+    }
+    let currentDate = new Date(startDate.getTime());
+    while (currentDate.getTime() <= endDate.getTime()) {
+        const rangeEnd = new Date(currentDate.getTime() + interval);
+        ranges.push({
+            start: new Date(currentDate.getTime()),
+            end: rangeEnd,
+        });
+        currentDate = new Date(currentDate.getTime() + interval);
+    }
+    return ranges;
+};
+/**
+ * Formats a date based on the interval
+ * @param date - Date object
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+const formatDate = (date, interval) => {
+    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
+ * @param ranges - Array of time ranges
+ * @returns The range that contains the date, or null if not found
+ */
+const findRangeForDate = (date, ranges) => {
+    const timestamp = date.getTime();
+    return (ranges.find((range) => timestamp >= range.start.getTime() && timestamp < range.end.getTime()) || null);
+};
+/**
+ * Transforms time-based data into chart format
+ */
+export const transformTimeData = (bars, type, barDataKeys) => {
+    const timeRanges = generateTimeRanges(type.timeRange.startDate, type.timeRange.endDate, type.timeRange.interval);
+    const categoryMap = new Map();
+    // Initialize all ranges with zeros
+    timeRanges.forEach((range) => {
+        const categoryDisplay = formatDate(range.start, type.timeRange.interval);
+        const initialData = {
+            category: categoryDisplay,
+        };
+        barDataKeys.forEach((dataKey) => {
+            initialData[dataKey] = 0;
+        });
+        categoryMap.set(range.start.getTime(), initialData);
+    });
+    // Populate with actual data
+    bars.forEach((bar) => {
+        bar.data.forEach(([dateValue, value]) => {
+            // Convert to Date if it's not already a Date object
+            const date = dateValue instanceof Date
+                ? dateValue
+                : new Date(dateValue);
+            const range = findRangeForDate(date, timeRanges);
+            if (range) {
+                const existingData = categoryMap.get(range.start.getTime());
+                existingData[bar.label] = value;
+            }
+        });
+    });
+    return Array.from(categoryMap.values());
+};
+/**
+ * Transforms category-based data into chart format
+ */
+export const transformCategoryData = (bars, barDataKeys) => {
+    const categoryMap = new Map();
+    bars.forEach((bar) => {
+        bar.data.forEach(([key, value]) => {
+            const categoryKey = String(key);
+            if (!categoryMap.has(categoryKey)) {
+                const newData = {
+                    category: categoryKey,
+                };
+                barDataKeys.forEach((dataKey) => {
+                    newData[dataKey] = 0;
+                });
+                categoryMap.set(categoryKey, newData);
+            }
+            const existingData = categoryMap.get(categoryKey);
+            existingData[bar.label] = value;
+        });
+    });
+    return Array.from(categoryMap.values());
+};
+/**
+ * Applies custom sorting to chart data
+ */
+export const applySortingToData = (data, barDataKeys, defaultSort) => {
+    const points = data.map((item) => {
+        const point = { category: item.category };
+        barDataKeys.forEach((dataKey) => {
+            point[dataKey] = Number(item[dataKey]) || 0;
+        });
+        return point;
+    });
+    points.sort(defaultSort);
+    return points.map((point) => {
+        const dataItem = {
+            category: point.category,
+        };
+        barDataKeys.forEach((dataKey) => {
+            dataItem[dataKey] = point[dataKey];
+        });
+        return dataItem;
+    });
+};
+const getRechartsBarsAndBarDataKeys = (bars, colorSet, stacked) => {
+    const rechartsBars = [];
+    const barDataKeys = [];
+    bars.forEach((bar) => {
+        const colorName = colorSet[bar.label];
+        const rechartsBar = {
+            dataKey: bar.label,
+            fill: chartColors[colorName] || colorName,
+            stackId: stacked ? 'stacked' : undefined,
+        };
+        rechartsBars.push(rechartsBar);
+        barDataKeys.push(bar.label);
+    });
+    return {
+        rechartsBars,
+        barDataKeys,
+    };
+};
+/**
+ * Converts prometheus data to recharts data format
+ * @param bars - The bars to convert
+ * @param type - The chart type (category or time)
+ * @returns Recharts data format
+ */
+export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort) => {
+    const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(bars, colorSet, stacked);
+    let data = type !== 'category' && type.type === 'time'
+        ? transformTimeData(bars, type, barDataKeys)
+        : transformCategoryData(bars, barDataKeys);
+    if (type === 'category' && defaultSort) {
+        data = applySortingToData(data, barDataKeys, defaultSort);
+    }
+    const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked);
+    return {
+        rechartsBars: sortedRechartsBars,
+        data,
+    };
+};
+export const computeUnitLabelAndRoundReferenceValue = (data, maxValue, unitRange) => {
+    if (!unitRange) {
+        const roundReferenceValue = getRoundReferenceValue(maxValue);
+        return { unitLabel: '', roundReferenceValue, rechartsData: data };
+    }
+    const { valueBase, unitLabel } = getUnitLabel(unitRange !== null && unitRange !== void 0 ? unitRange : [], maxValue);
+    const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+    const roundReferenceValue = getRoundReferenceValue(topValue);
+    const rechartsData = data.map((dataPoint) => {
+        const normalizedDataPoint = { ...dataPoint };
+        Object.entries(dataPoint).forEach(([key, value]) => {
+            if (key !== 'category' && typeof value === 'number') {
+                normalizedDataPoint[key] = value / valueBase;
+            }
+        });
+        return normalizedDataPoint;
+    });
+    return { unitLabel, roundReferenceValue, rechartsData };
+};
+/**
+ * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
+ * @param {any} unitRange
+ * @param {any} maxValue the maximum value among the data set
+ * @returns {any}
+ */
+export function getUnitLabel(unitRange, maxValue) {
+    // first sort the unitRange
+    unitRange.sort((unitA, unitB) => {
+        return unitA.threshold - unitB.threshold;
+    });
+    let index = unitRange.findIndex((range) => range.threshold > maxValue);
+    // last unit
+    if (index === -1) {
+        index = unitRange.length;
+    }
+    if (index === 0) {
+        return {
+            valueBase: unitRange[index].threshold,
+            unitLabel: unitRange[index].label,
+        };
+    }
+    return {
+        // if the threshold is 0, we use 1 as the value base to avoid division by 0
+        valueBase: unitRange[index - 1].threshold || 1,
+        unitLabel: unitRange[index - 1].label,
+    };
+}
+// Sort stacked bars by their average values in descending order
+// This ensures the largest bars appear at the bottom of the stack
+export const sortStackedBars = (rechartsBars, data, stacked) => {
+    if (!stacked) {
+        return rechartsBars;
+    }
+    const barAverages = rechartsBars.map((bar) => {
+        const values = data
+            .map((item) => Number(item[bar.dataKey]) || 0)
+            .filter((value) => !isNaN(value));
+        const average = values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+        return { ...bar, average };
+    });
+    // Sort by average in descending order (largest first, which will be at bottom in stack)
+    barAverages.sort((a, b) => b.average - a.average);
+    // Remove the average property and keep only the bar data
+    return barAverages.map(({ average, ...bar }) => bar);
+};
+export const renderTooltipContent = (props, tooltip, hoveredValue) => {
+    const { active, payload, label } = props;
+    if (!active || !tooltip) {
+        return null;
+    }
+    const tooltipValues = payload.map((item) => ({
+        label: item.name,
+        value: item.value,
+        isHovered: item.name === hoveredValue,
+    }));
+    const currentPoint = {
+        category: label,
+        values: tooltipValues,
+    };
+    return tooltip(currentPoint);
+};
+export const useChartData = (bars, type, colorSet, stacked, defaultSort, unitRange) => {
+    const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(bars, type, colorSet, stacked, defaultSort);
+    const maxValue = getMaxBarValue(data, stacked);
+    const { unitLabel, roundReferenceValue, rechartsData } = computeUnitLabelAndRoundReferenceValue(data, maxValue, unitRange);
+    return {
+        rechartsBars,
+        unitLabel,
+        roundReferenceValue,
+        rechartsData,
+    };
+};

package/dist/components/buttonv2/Buttonv2.component.d.ts

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import { Loader } from '../loader/Loader.component';
 import { Props as TooltipProps } from '../tooltip/Tooltip.component';
 export declare const FocusVisibleStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;

package/dist/components/buttonv2/Buttonv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY,+GAqJxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY,+GAqJxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}