@scality/core-ui 0.161.0 → 0.163.0

package/dist/components/barchartv2/utils.js

@@ -0,0 +1,337 @@
+import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
+import { chartColors } from '../../style/theme';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+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);
+};
+/**
+ * Filters both chart data and recharts bars to only include selected resources from legend
+ * @param data - Array of chart data objects with category and resource values
+ * @param rechartsBars - Array of recharts bar configurations
+ * @param selectedResources - Array of selected resource names
+ * @returns Object containing filtered data and recharts bars
+ */
+export const filterChartDataAndBarsByLegendSelection = (data, rechartsBars, selectedResources) => {
+    // If no resources are selected, show all data and bars (default behavior)
+    if (selectedResources.length === 0) {
+        return { filteredData: data, filteredRechartsBars: rechartsBars };
+    }
+    // Filter recharts bars
+    const filteredRechartsBars = rechartsBars.filter((bar) => selectedResources.includes(bar.dataKey));
+    // Filter data to only include selected resources
+    const filteredData = data.map((item) => {
+        const filteredItem = {
+            category: item.category,
+        };
+        selectedResources.forEach((resource) => {
+            if (resource in item) {
+                filteredItem[resource] = item[resource];
+            }
+        });
+        return filteredItem;
+    });
+    return { filteredData, filteredRechartsBars };
+};
+export const useChartData = (bars, type, colorSet, stacked, defaultSort, unitRange) => {
+    const { selectedResources } = useChartLegend();
+    const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(bars, type, colorSet, stacked, defaultSort);
+    // Filter both data and bars to only include selected resources for accurate maxValue calculation
+    const { filteredData, filteredRechartsBars } = filterChartDataAndBarsByLegendSelection(data, rechartsBars, selectedResources);
+    const maxValue = getMaxBarValue(filteredData, stacked);
+    const { unitLabel, roundReferenceValue, rechartsData } = computeUnitLabelAndRoundReferenceValue(filteredData, maxValue, unitRange);
+    return {
+        rechartsBars: filteredRechartsBars,
+        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"}

package/dist/components/chartlegend/ChartLegend.d.ts

@@ -0,0 +1,8 @@
+type ChartLegendProps = {
+    shape: 'line' | 'rectangle';
+    disabled?: boolean;
+    direction?: 'horizontal' | 'vertical';
+};
+export declare const ChartLegend: ({ shape, disabled, direction, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChartLegend.d.ts.map

package/dist/components/chartlegend/ChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAkDF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAgDlB,CAAC"}

package/dist/components/chartlegend/ChartLegend.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useChartLegend } from './ChartLegendWrapper';
+import { Text } from '../text/Text.component';
+import { chartColors } from '../../style/theme';
+import { useCallback } from 'react';
+const Legend = styled.div `
+  display: flex;
+  flex-direction: ${({ direction }) => direction === 'horizontal' ? 'row' : 'column'};
+  gap: ${({ direction }) => (direction === 'horizontal' ? '16px' : '8px')};
+  flex-wrap: wrap;
+`;
+const LegendItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ selected, disabled }) => (disabled ? 0.5 : selected ? 1 : 0.7)};
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  }
+`;
+const LegendShape = styled.div `
+  ${({ shape, color, chartColors }) => {
+    if (shape === 'line') {
+        return `
+        width: 20px;
+        height: 2px;
+        background-color: ${chartColors[color] || color};
+      `;
+    }
+    else if (shape === 'rectangle') {
+        return `
+        width: 12px;
+        height: 12px;
+        background-color: ${chartColors[color] || color};
+        border-radius: 2px;
+      `;
+    }
+    else {
+        console.error('The shape is not valid. Please use "line" or "rectangle".');
+    }
+}}
+`;
+export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
+    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, } = useChartLegend();
+    const resources = listResources();
+    const handleLegendClick = useCallback((resource) => {
+        if (disabled)
+            return;
+        if (isSelected(resource)) {
+            removeSelectedResource(resource);
+        }
+        else {
+            addSelectedResource(resource);
+        }
+    }, [disabled, isSelected, addSelectedResource, removeSelectedResource]);
+    return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
+            const color = getColor(resource);
+            const selected = isSelected(resource);
+            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, onClick: () => handleLegendClick(resource), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: "Basic", children: resource })] }, resource));
+        }) }));
+};

package/dist/components/chartlegend/ChartLegendWrapper.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ChartColors } from '../../style/theme';
+export type ChartLegendState = {
+    selectedResources: string[];
+    addSelectedResource: (resource: string) => void;
+    removeSelectedResource: (resource: string) => void;
+    isSelected: (resource: string) => boolean;
+    getColor: (resource: string) => string | undefined;
+    listResources: () => string[];
+};
+export type ChartLegendWrapperProps = {
+    children: ReactNode;
+    colorSet: Record<string, ChartColors | string>;
+};
+export declare const ChartLegendWrapper: ({ children, colorSet, }: ChartLegendWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useChartLegend: () => ChartLegendState;
+//# sourceMappingURL=ChartLegendWrapper.d.ts.map

package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,SAAS,EAAwB,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;CAC/B,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CAqDzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}

package/dist/components/chartlegend/ChartLegendWrapper.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useMemo, useCallback } from 'react';
+const ChartLegendContext = createContext(null);
+export const ChartLegendWrapper = ({ children, colorSet, }) => {
+    const [selectedResources, setSelectedResources] = useState([]);
+    const addSelectedResource = useCallback((resource) => {
+        setSelectedResources((prev) => prev.includes(resource) ? prev : [...prev, resource]);
+    }, []);
+    const removeSelectedResource = useCallback((resource) => {
+        setSelectedResources((prev) => prev.filter((r) => r !== resource));
+    }, []);
+    const isSelected = useCallback((resource) => {
+        return selectedResources.includes(resource);
+    }, [selectedResources]);
+    const getColor = useCallback((resource) => {
+        const color = colorSet[resource];
+        if (!color) {
+            console.warn(`ChartLegendWrapper: No color defined for resource "${resource}"`);
+            return undefined;
+        }
+        return color;
+    }, [colorSet]);
+    const listResources = useCallback(() => {
+        return Object.keys(colorSet);
+    }, [colorSet]);
+    const chartLegendState = useMemo(() => ({
+        selectedResources,
+        addSelectedResource,
+        removeSelectedResource,
+        isSelected,
+        getColor,
+        listResources,
+    }), [
+        selectedResources,
+        addSelectedResource,
+        removeSelectedResource,
+        isSelected,
+        getColor,
+        listResources,
+    ]);
+    return (_jsx(ChartLegendContext.Provider, { value: chartLegendState, children: children }));
+};
+// Hook for accessing legend state in custom components
+export const useChartLegend = () => {
+    const context = useContext(ChartLegendContext);
+    if (!context) {
+        throw new Error('useChartLegend must be used within a ChartLegendWrapper');
+    }
+    return context;
+};

package/dist/components/constrainedtext/Constrainedtext.component.d.ts

@@ -5,7 +5,8 @@ type Props = {
     tooltipStyle?: $PropertyType<TooltipProps, 'overlayStyle'>;
     tooltipPlacement?: $PropertyType<TooltipProps, 'placement'>;
     lineClamp?: number;
+    centered?: boolean;
 };
-declare function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp, }: Props): JSX.Element;
+declare function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp, centered, }: Props): JSX.Element;
 export { ConstrainedText };
 //# sourceMappingURL=Constrainedtext.component.d.ts.map

package/dist/components/constrainedtext/Constrainedtext.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiDF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,GACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2BrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwDF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,EACb,QAAgB,GACjB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqCrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/constrainedtext/Constrainedtext.component.js

@@ -9,6 +9,7 @@ import { Text } from '../text/Text.component';
 const ConstrainedTextContainer = styled.div `
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: ${(props) => (props.centered ? 'center' : 'left')};
 
   ${(props) => props.lineClamp > 1
     ? `
@@ -34,14 +35,14 @@ function isEllipsisActive(element) {
         (element.offsetWidth < element.scrollWidth ||
             element.offsetHeight < element.scrollHeight));
 }
-function getConstrainedTextContainer(constrainedTextRef, lineClamp, text) {
-    return (_jsx(ConstrainedTextContainer, { ref: constrainedTextRef, className: "sc-constrainedtext", lineClamp: lineClamp, children: text }));
+function getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) {
+    return (_jsx(ConstrainedTextContainer, { ref: constrainedTextRef, className: "sc-constrainedtext", lineClamp: lineClamp, centered: centered, children: text }));
 }
-function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp = 1, }) {
+function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp = 1, centered = false, }) {
     const [displayToolTip, setDisplayToolTip] = useState(false);
     const constrainedTextRef = useCallback((element) => {
         element && text && setDisplayToolTip(isEllipsisActive(element));
     }, [text]);
-    return (_jsx(BlockTooltip, { children: displayToolTip ? (_jsx(Tooltip, { overlay: text, overlayStyle: tooltipStyle, placement: tooltipPlacement, children: _jsx(Text, { children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text) }) })) : (_jsx(Text, { children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text) })) }));
+    return (_jsx(BlockTooltip, { children: displayToolTip ? (_jsx(Tooltip, { overlay: text, overlayStyle: tooltipStyle, placement: tooltipPlacement, children: _jsx(Text, { children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) }) })) : (_jsx(Text, { children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) })) }));
 }
 export { ConstrainedText };

package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CoreUITheme } from '../../style/theme';
 type Props = {
     theme: CoreUITheme;

package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoreUiThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAmB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,mBAAmB,wBAAyB,KAAK,4CAStD,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"CoreUiThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,mBAAmB,wBAAyB,KAAK,4CAStD,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -1,8 +1,11 @@
 export declare const DATE_FORMATER: Intl.DateTimeFormat;
+export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
 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;
 type FormattedDateTimeProps = {
-    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative';
+    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second';
     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,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAqGxB,CAAC"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,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,CAAC;IAC/C,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAiHxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -7,6 +7,11 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
     day: '2-digit',
     hour12: false,
 });
+export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
+    weekday: 'short',
+    day: '2-digit',
+    month: 'short',
+});
 export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
     hour12: false,
     hour: '2-digit',
@@ -18,6 +23,21 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
     hour: '2-digit',
     minute: '2-digit',
 });
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-GB', {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+});
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+});
 const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
     if (timeDiff > 0) {
         return `${stringToBeFormatted} ago`;
@@ -59,7 +79,10 @@ export const FormattedDateTime = ({ format, value, }) => {
                 return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: isItFutureOrIsItPast(minuteDiff, `${Math.abs(minuteDiff)} minute${Math.abs(minuteDiff) > 1 ? 's' : ''}`) }));
             }
             return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: "few seconds ago" }));
-        //TO FINISH
+        case 'day-month-abbreviated-hour-minute':
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '') }));
+        case 'day-month-abbreviated-hour-minute-second':
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(',', '') }));
         default:
             return _jsx(_Fragment, {});
     }

package/dist/components/date/FormattedDateTime.spec.js

@@ -137,4 +137,16 @@ describe('FormatttedDateTime', () => {
         //V
         expect(screen.getByText('2022-12-12 11:57:26')).toBeInTheDocument();
     });
+    it('should display the date in the expected format of the xaxis tick in the chart', () => {
+        //S
+        render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date('2022-10-06T18:33:00Z') }));
+        //V
+        expect(screen.getByText('6 Oct 18:33')).toBeInTheDocument();
+    });
+    it('should display the date in the expected format of date in the chart', () => {
+        //S
+        render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date('2022-10-06T18:33:00Z') }));
+        //V
+        expect(screen.getByText('6 Oct 18:33:00')).toBeInTheDocument();
+    });
 });

package/dist/components/emptytable/Emptytable.component.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 type Props = {
     children: Node | React.ReactNode;
     useDiv?: boolean;

package/dist/components/emptytable/Emptytable.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Emptytable.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptytable/Emptytable.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAuDF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,2CAY/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Emptytable.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptytable/Emptytable.component.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAuDF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,2CAY/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}