@scality/core-ui 0.170.0 → 0.171.0

package/__mocks__/uuid.js

@@ -0,0 +1,11 @@
+// Mock uuid module for Jest tests
+let counter = 0;
+
+const v4 = () => {
+  counter += 1;
+  return `mock-uuid-${Math.random().toString(36)}-${counter}`;
+};
+
+module.exports = {
+  v4,
+};

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

@@ -14,13 +14,13 @@ import { Text } from '../text/Text.component';
 import { ChartTooltip } from './ChartTooltip';
 import { useChartData } from './utils';
 const CHART_CONSTANTS = {
-    TICK_WIDTH_OFFSET: 5,
+    TICK_WIDTH_OFFSET: 4,
     BAR_SIZE: 12,
     MIN_POINT_SIZE: 3,
     DEFAULT_HEIGHT: 200,
     CHART_MARGIN: {
         left: 0,
-        right: 0,
+        right: -10,
         top: 0,
         bottom: 0,
     },

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

@@ -1,7 +1,9 @@
+import { TextVariant } from '../text/Text.component';
 type ChartLegendProps = {
     shape: 'line' | 'rectangle';
     disabled?: boolean;
     direction?: 'horizontal' | 'vertical';
+    legendSize?: TextVariant;
 };
 export declare const LegendItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     disabled?: boolean;
@@ -12,6 +14,6 @@ export declare const LegendShape: import("styled-components").StyledComponent<"d
     shape: "line" | "rectangle";
     chartColors: Record<string, string>;
 }, never>;
-export declare const ChartLegend: ({ shape, disabled, direction, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartLegend: ({ shape, disabled, direction, legendSize, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChartLegend.d.ts.map

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

@@ -1 +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;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAyElB,CAAC"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAI3D,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,gDAKrB,gBAAgB,4CAyElB,CAAC"}

package/dist/components/chartlegend/ChartLegend.js

@@ -44,7 +44,7 @@ export const LegendShape = styled.div `
     }
 }}
 `;
-export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
+export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', legendSize = 'Basic', }) => {
     const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, selectOnlyResource, isOnlyOneSelected, } = useChartLegend();
     const resources = listResources();
     const handleLegendClick = useCallback((resource, event) => {
@@ -83,6 +83,6 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
     return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
             const color = getColor(resource);
             const selected = isSelected(resource);
-            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, "aria-label": `${resource} ${selected ? 'selected' : 'not selected'}`, onClick: (event) => handleLegendClick(resource, event), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: "Basic", children: resource })] }, resource));
+            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, "aria-label": `${resource} ${selected ? 'selected' : 'not selected'}`, onClick: (event) => handleLegendClick(resource, event), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: legendSize, children: resource })] }, resource));
         }) }));
 };

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ChartColors } from '../../style/theme';
+export declare const useChartId: () => string;
 export type ChartLegendState = {
     selectedResources: string[];
     addSelectedResource: (resource: string) => void;
@@ -10,10 +11,11 @@ export type ChartLegendState = {
     getColor: (resource: string) => string | undefined;
     listResources: () => string[];
     isOnlyOneSelected: () => boolean;
+    register: (chartId: string, seriesNames: string[]) => void;
 };
 export type ChartLegendWrapperProps = {
     children: ReactNode;
-    colorSet: Record<string, ChartColors | string>;
+    colorSet: Record<string, ChartColors | string> | ((seriesNames: string[]) => Record<string, ChartColors | string>);
 };
 export declare const ChartLegendWrapper: ({ children, colorSet, }: ChartLegendWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useChartLegend: () => ChartLegendState;

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

@@ -1 +1 @@
-{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,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,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,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;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;CAClC,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,4CAiFzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}
+{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,eAAO,MAAM,UAAU,QAAO,MAQ7B,CAAC;AAEF,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,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,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;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5D,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,GACpC,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC;CACvE,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CA0HzB,CAAC;AAEF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}

package/dist/components/chartlegend/ChartLegendWrapper.js

@@ -1,9 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useMemo, useCallback, } from 'react';
+import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef, } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+export const useChartId = () => {
+    const idRef = useRef(null);
+    if (idRef.current === null) {
+        idRef.current = uuidv4();
+    }
+    return idRef.current;
+};
 const ChartLegendContext = createContext(null);
 export const ChartLegendWrapper = ({ children, colorSet, }) => {
-    const allResources = Object.keys(colorSet);
+    const [registeredColorSets, setRegisteredColorSets] = useState({});
+    const [internalColorSet, setInternalColorSet] = useState(() => {
+        return typeof colorSet === 'function' ? {} : colorSet;
+    });
+    useEffect(() => {
+        if (typeof colorSet === 'function') {
+            const allUniqueSeriesNames = Array.from(new Set(Object.values(registeredColorSets).flat()));
+            if (allUniqueSeriesNames.length > 0) {
+                const newColorSet = colorSet(allUniqueSeriesNames);
+                setInternalColorSet(newColorSet);
+            }
+        }
+        else {
+            setInternalColorSet(colorSet);
+        }
+    }, [registeredColorSets, colorSet]);
+    const allResources = useMemo(() => Object.keys(internalColorSet), [internalColorSet]);
     const [selectedResources, setSelectedResources] = useState(allResources);
+    useEffect(() => {
+        setSelectedResources(allResources);
+    }, [allResources]);
+    const register = useCallback((chartId, seriesNames) => {
+        setRegisteredColorSets((prev) => ({
+            ...prev,
+            [chartId]: seriesNames,
+        }));
+    }, []);
     const addSelectedResource = useCallback((resource) => {
         setSelectedResources((prev) => prev.includes(resource) ? prev : [...prev, resource]);
     }, []);
@@ -11,8 +44,8 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         setSelectedResources((prev) => prev.filter((r) => r !== resource));
     }, []);
     const selectAllResources = useCallback(() => {
-        setSelectedResources(allResources);
-    }, [allResources]);
+        setSelectedResources(Object.keys(internalColorSet));
+    }, [internalColorSet]);
     const selectOnlyResource = useCallback((resource) => {
         setSelectedResources([resource]);
     }, []);
@@ -23,16 +56,16 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         return selectedResources.includes(resource);
     }, [selectedResources]);
     const getColor = useCallback((resource) => {
-        const color = colorSet[resource];
+        const color = internalColorSet[resource];
         if (!color) {
             console.warn(`ChartLegendWrapper: No color defined for resource "${resource}"`);
             return undefined;
         }
         return color;
-    }, [colorSet]);
+    }, [internalColorSet]);
     const listResources = useCallback(() => {
-        return Object.keys(colorSet);
-    }, [colorSet]);
+        return Object.keys(internalColorSet);
+    }, [internalColorSet]);
     const chartLegendState = useMemo(() => ({
         selectedResources,
         addSelectedResource,
@@ -43,6 +76,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         getColor,
         listResources,
         isOnlyOneSelected,
+        register,
     }), [
         selectedResources,
         addSelectedResource,
@@ -53,10 +87,10 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         getColor,
         listResources,
         isOnlyOneSelected,
+        register,
     ]);
     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) {

package/dist/components/icon/Icon.component.d.ts

@@ -126,6 +126,8 @@ export declare const iconTable: {
     Stop: string;
     Play: string;
     Mail: string;
+    ThumbsUp: string;
+    ThumbsDown: string;
 };
 type IconProps = {
     'aria-label'?: string;

package/dist/components/icon/Icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js

@@ -131,6 +131,8 @@ export const iconTable = {
     Stop: 'fas faStop',
     Play: 'fas faPlay',
     Mail: 'fas faEnvelope',
+    ThumbsUp: 'fas faThumbsUp',
+    ThumbsDown: 'fas faThumbsDown',
 };
 export const customIcons = {
     'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),

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,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"}
+{"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,CAoEpC;AAID,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

@@ -94,8 +94,16 @@ export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDura
         return [];
     }
     const newValues = [];
+    // add missing data points for the starting time
+    for (let i = startingTimeStamp; i < orginalValues[0][0]; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
     // Process all but the last element
     for (let i = 0; i < orginalValues.length - 1; i++) {
+        if (orginalValues[i][0] < startingTimeStamp ||
+            orginalValues[i][0] > startingTimeStamp + sampleDuration) {
+            continue;
+        }
         // Always add the current data point
         newValues.push(orginalValues[i]);
         const currentTimestamp = orginalValues[i][0];
@@ -111,6 +119,10 @@ export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDura
     }
     // Add the last element
     newValues.push(orginalValues[orginalValues.length - 1]);
+    // add missing data points for the ending time
+    for (let i = orginalValues[orginalValues.length - 1][0] + sampleInterval; i < startingTimeStamp + sampleDuration; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
     return newValues;
 }
 // get the value for the based value

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

@@ -1,3 +1,6 @@
+import { TooltipContentProps } from 'recharts';
+export declare const TooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TooltipTime: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export type Serie = {
     resource: string;
     data: [number, number | string | null][];
@@ -7,14 +10,14 @@ export type Serie = {
 };
 type NonSymmetricalChartSerie = {
     yAxisType?: 'default' | 'percentage';
-    series: Serie[];
+    series: Serie[] | undefined;
 };
 type SymmetricalChartSerie = {
     yAxisType: 'symmetrical';
     series: {
-        above: Serie[];
-        below: Serie[];
-    };
+        above: Serie[] | undefined;
+        below: Serie[] | undefined;
+    } | undefined;
 };
 export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie) & {
     title: string;
@@ -26,6 +29,7 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
         threshold: number;
         label: string;
     }[];
+    syncId?: string;
     isLoading?: boolean;
     /**
      * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
@@ -35,7 +39,8 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
     timeFormat?: 'date-time' | 'date';
     yAxisTitle?: string;
     helpText?: string;
+    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, timeFormat?: 'date-time' | 'date') => React.ReactNode;
 };
-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 declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, syncId, renderTooltip, ...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":"AAoGA,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;AAkEF,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"}
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AA8BlB,eAAO,MAAM,gBAAgB,yGAO5B,CAAC;AAEF,eAAO,MAAM,WAAW,yGAMvB,CAAC;AAwCF,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,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,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;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6EF,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,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CAmWhB"}

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

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, } from 'recharts';
-import { useCallback, useMemo, useRef } from 'react';
-import { useTheme } from 'styled-components';
-import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
-import styled from 'styled-components';
+import { CartesianGrid, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
+import { Box } from '../box/Box';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { ChartTitleText, SmallerText } from '../text/Text.component';
-import { Loader } from '../loader/Loader.component';
-import { spacing } from '../../spacing';
-import { getUnitLabel } from '../linetemporalchart/ChartUtil';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 import { Icon } from '../icon/Icon.component';
+import { addMissingDataPoint, getUnitLabel, } from '../linetemporalchart/ChartUtil';
+import { Loader } from '../loader/Loader.component';
+import { ChartTitleText, SmallerText } from '../text/Text.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { Box } from '../box/Box';
 import { formatXAxisLabel } from './utils';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
@@ -25,7 +23,7 @@ const ChartHeader = styled.div `
   display: flex;
   align-items: center;
 `;
-const TooltipContainer = styled.div `
+export const TooltipContainer = styled.div `
   background-color: ${(props) => props.theme.backgroundLevel1};
   padding: ${spacing.r8};
   border: 1px solid ${(props) => props.theme.border};
@@ -33,7 +31,7 @@ const TooltipContainer = styled.div `
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   max-width: 250px;
 `;
-const TooltipTime = styled.div `
+export const TooltipTime = styled.div `
   margin-bottom: ${spacing.r8};
   color: ${(props) => props.theme.textPrimary};
   font-size: ${fontSize.smaller};
@@ -73,9 +71,13 @@ const TooltipInstanceValue = styled.div `
   flex-shrink: 0;
   text-align: right;
 `;
-const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
-    if (!active || !payload || !payload.length || !label)
+const CustomTooltip = ({ unitLabel, timeFormat, isChartActive, tooltipProps, renderTooltip, }) => {
+    const { active, payload, label, ...rest } = tooltipProps;
+    if (!active || !payload || !payload.length || !label || !isChartActive)
         return null;
+    if (renderTooltip) {
+        return renderTooltip(tooltipProps, unitLabel, timeFormat);
+    }
     // We can't use the default itemSorter method because it's a custom tooltip.
     // Sort the payload here instead
     const sortedPayload = [...payload].sort((a, b) => {
@@ -98,23 +100,42 @@ const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
 };
-export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, syncId, renderTooltip, ...rest }) {
     const theme = useTheme();
-    const { getColor } = useChartLegend();
+    const { getColor, selectedResources } = useChartLegend();
     const chartRef = useRef(null);
+    const [isChartActive, setIsChartActive] = useState(false);
     const chartData = useMemo(() => {
+        // Guard against empty/undefined series data
+        if (!series || (Array.isArray(series) && series.length === 0)) {
+            return [];
+        }
+        // Handle symmetrical series with empty above/below arrays
+        if (isSymmetricalSeries(series)) {
+            if ((!series.above || series.above.length === 0) &&
+                (!series.below || series.below.length === 0)) {
+                return [];
+            }
+        }
         // 1. Add missing data points
         const normalizedSeries = yAxisType === 'symmetrical' && isSymmetricalSeries(series)
             ? {
-                above: series.above.map((line) => ({
-                    ...line,
-                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
-                })),
+                above: series.above
+                    ? series.above.map((line) => ({
+                        ...line,
+                        data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
+                    }))
+                    : [],
                 // Convert positive values to negative values
-                below: series.below.map((line) => ({
-                    ...line,
-                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval).map(([timestamp, value]) => [timestamp, value === null ? null : `-${Number(value)}`]),
-                })),
+                below: series.below
+                    ? series.below.map((line) => ({
+                        ...line,
+                        data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval).map(([timestamp, value]) => [
+                            timestamp,
+                            value === null ? null : `-${Number(value)}`,
+                        ]),
+                    }))
+                    : [],
             }
             : series.map((line) => ({
                 ...line,
@@ -177,6 +198,14 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
             return !isNaN(num) && num !== null ? num : null;
         })
             .filter((value) => value !== null));
+        // Guard against empty values array
+        if (values.length === 0) {
+            return {
+                topValue: 100, // Default value for empty charts
+                unitLabel: '',
+                rechartsData: [],
+            };
+        }
         const top = Math.abs(Math.max(...values));
         const bottom = Math.abs(Math.min(...values));
         const maxValue = Math.max(top, bottom);
@@ -196,11 +225,17 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
     // Group series by resource and create color mapping
     const { colorMapping, groupedSeries } = useMemo(() => {
         const mapping = {};
+        // Guard against empty/undefined series
+        if (!series) {
+            return { colorMapping: mapping, groupedSeries: {} };
+        }
         const allSeries = isSymmetricalSeries(series)
-            ? [...series.above, ...series.below]
+            ? [...(series.above || []), ...(series.below || [])]
             : series;
         // Group series by resource
-        const groups = allSeries.reduce((acc, serie) => {
+        const groups = allSeries
+            .filter((serie) => selectedResources.includes(serie.resource))
+            .reduce((acc, serie) => {
             const key = serie.resource;
             if (!acc[key]) {
                 acc[key] = [];
@@ -222,30 +257,30 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
             colorMapping: mapping,
             groupedSeries: groups,
         };
-    }, [series, getColor]);
+    }, [series, getColor, selectedResources]);
     // Format time for display the tick in the x axis
     const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, timeFormat, chartData), [timeFormat, chartData]);
-    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _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: formatXAxisLabelCallback, tickCount: 5, tick: {
-                                fill: theme.textSecondary,
-                                fontSize: fontSize.smaller,
-                            }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
-                                value: yAxisTitle,
-                                angle: 90,
-                                position: 'insideRight',
-                                style: {
-                                    textAnchor: 'middle',
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _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}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), 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: formatXAxisLabelCallback, tickCount: 5, tick: {
+                                    fill: theme.textSecondary,
+                                    fontSize: fontSize.smaller,
+                                }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
+                                    value: yAxisTitle,
+                                    angle: 90,
+                                    position: 'insideRight',
+                                    style: {
+                                        textAnchor: 'middle',
+                                        fill: theme.textSecondary,
+                                        fontSize: fontSize.smaller,
+                                    },
+                                }, domain: yAxisType === 'percentage'
+                                    ? [0, 100]
+                                    : yAxisType === 'symmetrical'
+                                        ? [-topValue, topValue]
+                                        : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                },
-                            }, domain: yAxisType === 'percentage'
-                                ? [0, 100]
-                                : yAxisType === 'symmetrical'
-                                    ? [-topValue, topValue]
-                                    : [0, topValue], axisLine: { stroke: theme.border }, tick: {
-                                fill: theme.textSecondary,
-                                fontSize: fontSize.smaller,
-                            }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _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, isAnimationActive: false }, `${title}-${resource}-${serieIndex}`));
-                        }))] }) })] }));
+                                }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: (props) => (_jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive })) }), 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, isAnimationActive: false }, `${title}-${resource}-${serieIndex}`));
+                            }))] }) }) })] }));
 }

package/dist/components/text/Text.component.d.ts

@@ -1,4 +1,5 @@
 import { CoreUITheme } from '../../style/theme';
+export type TextVariant = 'ChartTitle' | 'Basic' | 'Smaller' | 'Larger' | 'Large';
 type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
 type Props = {
     children: React.ReactNode | string;
@@ -22,7 +23,7 @@ export declare const GentleEmphaseSecondaryText: import("styled-components").Sty
     alignRight?: boolean;
 }, never>;
 export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    variant?: "ChartTitle" | "Basic" | "Smaller" | "Larger" | "Large";
+    variant?: TextVariant;
     color?: keyof CoreUITheme;
     isEmphazed?: boolean;
     isGentleEmphazed?: boolean;

package/dist/components/text/Text.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO;YACzD,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SA2C3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}
+{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,WAAW,GACnB,YAAY,GACZ,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,CAAC;AAEZ,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,WAAW;YACb,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SA2C3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}

package/dist/next.d.ts

@@ -15,7 +15,7 @@ export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, BarchartSortFn, BarchartTooltipFn, } from './components/barchartv2/Barchart.component';
 export { ChartTooltip } from './components/barchartv2/ChartTooltip';
-export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
 export { CoreUITheme } from './style/theme';

package/dist/next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EACL,kBAAkB,EAClB,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/next.js

@@ -15,6 +15,6 @@ export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, } from './components/barchartv2/Barchart.component';
 export { ChartTooltip } from './components/barchartv2/ChartTooltip';
-export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.170.0",
+  "version": "0.171.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -61,6 +61,7 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "copyfiles": "^2.4.1",
@@ -109,6 +110,7 @@
     "recharts": "^3.0.2",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
+    "uuid": "^13.0.0",
     "vega": "^5.17.3",
     "vega-embed": "6.0.0",
     "vega-lite": "5.0.0",

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

@@ -24,13 +24,13 @@ import { ChartTooltip } from './ChartTooltip';
 import { UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
-  TICK_WIDTH_OFFSET: 5,
+  TICK_WIDTH_OFFSET: 4,
   BAR_SIZE: 12,
   MIN_POINT_SIZE: 3,
   DEFAULT_HEIGHT: 200,
   CHART_MARGIN: {
     left: 0,
-    right: 0,
+    right: -10,
     top: 0,
     bottom: 0,
   },