@scality/core-ui 0.162.0 → 0.164.0

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

@@ -1,4 +1,3 @@
-import { ChartColors } from '../../style/theme';
 import { UnitRange } from './utils';
 export type TimeType = {
     type: 'time';
@@ -38,18 +37,25 @@ export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['
 }) => 1 | -1 | 0;
 export type BarchartProps<T extends BarchartBars> = {
     type: 'category' | TimeType;
-    bars: T;
-    colorSet: Record<T[number]['label'], ChartColors | (string & {})>;
+    bars?: T;
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;
     unitRange?: UnitRange;
     helpTooltip?: string;
     stacked?: boolean;
+    /**
+     * Sort the bars by default or by legend order
+     * legend will sort the bars by the order of the colorSet property of the ChartLegendWrapper component
+     * default will sort the bars by average values in descending order (biggest values will be at bottom)
+     * @default 'default'
+     */
+    stackedBarSort?: 'default' | 'legend';
     title?: string;
     secondaryTitle?: string;
     rightTitle?: React.ReactNode;
     height?: number;
     isLoading?: boolean;
+    isError?: 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

@@ -1 +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"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAwB,SAAS,EAAgB,MAAM,SAAS,CAAC;AAkBxE,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,CAAC,EAAE,CAAC,CAAC;IACT,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;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,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;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgIF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CAwIvE,CAAC"}

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

@@ -10,10 +10,11 @@ import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { renderTooltipContent, useChartData } from './utils';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 5,
     BAR_SIZE: 12,
-    MIN_POINT_SIZE: 1,
+    MIN_POINT_SIZE: 3,
     DEFAULT_HEIGHT: 200,
     CHART_MARGIN: {
         left: 0,
@@ -46,6 +47,13 @@ const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
                             marginLeft: spacing.r8,
                         }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
 };
+const Error = ({ height }) => {
+    return (_jsx(Box, { height: height, style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+        }, children: _jsx(Text, { children: "Chart data is not available" }) }));
+};
 const Loading = ({ height }) => {
     return (_jsx(Box, { height: height, style: {
             alignItems: 'center',
@@ -56,12 +64,21 @@ const Loading = ({ height }) => {
 /* ---------------------------------- MAIN COMPONENT ---------------------------------- */
 export const Barchart = (props) => {
     const theme = useTheme();
+    const { getColor } = useChartLegend();
     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 { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
+    // Create colorSet from ChartLegendWrapper
+    const colorSet = bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
+        const color = getColor(bar.label);
+        if (color) {
+            acc[bar.label] = color;
+        }
+        return acc;
+    }, {});
+    const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
+    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
                             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));
+                            return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
                         }), _jsx(YAxis, { tickCount: 1, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
                             , axisLine: false, tick: {
                                 fill: theme.textSecondary,

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

@@ -38,7 +38,7 @@ export declare const applySortingToData: <T extends BarchartBars>(data: {
  * @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"]) => {
+export declare const formatPrometheusDataToRechartsDataAndBars: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"], legendOrder?: string[]) => {
     data: {
         [key: string]: string | number;
     }[];
@@ -76,13 +76,36 @@ export declare const sortStackedBars: (rechartsBars: {
     stackId?: string;
 }[], data: {
     [key: string]: string | number;
-}[], stacked?: boolean) => {
+}[], stacked?: boolean, legendOrder?: string[]) => {
     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) => {
+/**
+ * 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 declare const filterChartDataAndBarsByLegendSelection: (data: {
+    [key: string]: string | number;
+}[], rechartsBars: {
+    dataKey: string;
+    fill: string;
+    stackId?: string;
+}[], selectedResources: string[]) => {
+    filteredData: {
+        [key: string]: string | number;
+    }[];
+    filteredRechartsBars: {
+        dataKey: string;
+        fill: string;
+        stackId?: string;
+    }[];
+};
+export declare const useChartData: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"], unitRange?: UnitRange, stackedBarSort?: "default" | "legend") => {
     rechartsBars: {
         dataKey: string;
         fill: string;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,YAAY,EACZ,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,UAAW,MAAM,KAAG,MAkBtD,CAAC;AAEF,eAAO,MAAM,cAAc,SACnB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,YAChC,OAAO,WAuBlB,CAAC;AA2EF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,YAAY,QAChD,CAAC,QACD;IACJ,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,eACY,MAAM,EAAE;;GA0CtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,YAAY,QACpD,CAAC,eACM,MAAM,EAAE;;GA2BtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,YAAY,QACjD;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,eAC7B,MAAM,EAAE,eACR,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;;GAqB7C,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,yCAAyC,GACpD,CAAC,SAAS,YAAY,QAEhB,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,gBAC/B,MAAM,EAAE,KACrB;IACD,IAAI,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,YAAY,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CA4BrE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,eAAO,MAAM,sCAAsC,SAC3C,GAAG,YACC,MAAM,aACL,SAAS,GAAG,SAAS;;;;CAoBjC,CAAC;AAEF;;;;;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,CAmCA;AAID,eAAO,MAAM,eAAe,iBACZ;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,EAAE,QACG;IACJ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC,EAAE,YACO,OAAO,gBACH,MAAM,EAAE;aARX,MAAM;UACT,MAAM;cACF,MAAM;GA8CnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,YAAY,SAClD,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,WACjC,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,gBAC3B,MAAM,GAAG,SAAS,8BAwBjC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uCAAuC,SAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,gBAC5B;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,qBAChD,MAAM,EAAE;;;;;iBADF,MAAM;cAAQ,MAAM;kBAAY,MAAM;;CA2BhE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,QAC3C,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,cACjC,SAAS,mBACJ,SAAS,GAAG,QAAQ;;iBApCZ,MAAM;cAAQ,MAAM;kBAAY,MAAM;;;;;CAuEhE,CAAC"}

package/dist/components/barchartv2/utils.js

@@ -1,5 +1,6 @@
 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
@@ -8,13 +9,17 @@ export const getRoundReferenceValue = (value) => {
     // Normalized value between 1 and 10
     const normalized = value / magnitude;
     // Round to nice numbers based on normalized value
+    let result;
     if (normalized <= 1)
-        return magnitude;
-    if (normalized <= 2.5)
-        return 2.5 * magnitude;
-    if (normalized <= 5)
-        return 5 * magnitude;
-    return 10 * magnitude;
+        result = magnitude;
+    else if (normalized <= 2.5)
+        result = 2.5 * magnitude;
+    else if (normalized <= 5)
+        result = 5 * magnitude;
+    else
+        result = 10 * magnitude;
+    // Ensure minimum value of 5 for better chart appearance
+    return Math.max(result, 5);
 };
 export const getMaxBarValue = (data, stacked) => {
     const values = data.map((item) => {
@@ -33,9 +38,9 @@ export const getMaxBarValue = (data, stacked) => {
             .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(...numberValues, 0); // Ensure we don't get -Infinity
     });
-    return Math.max(...values);
+    return Math.max(...values, 0);
 };
 /**
  * Generates time ranges between start and end dates based on the given interval
@@ -46,9 +51,6 @@ export const getMaxBarValue = (data, stacked) => {
  */
 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);
@@ -197,7 +199,7 @@ const getRechartsBarsAndBarDataKeys = (bars, colorSet, stacked) => {
  * @param type - The chart type (category or time)
  * @returns Recharts data format
  */
-export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort) => {
+export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort, legendOrder) => {
     const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(bars, colorSet, stacked);
     let data = type !== 'category' && type.type === 'time'
         ? transformTimeData(bars, type, barDataKeys)
@@ -205,7 +207,7 @@ export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet,
     if (type === 'category' && defaultSort) {
         data = applySortingToData(data, barDataKeys, defaultSort);
     }
-    const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked);
+    const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked, legendOrder);
     return {
         rechartsBars: sortedRechartsBars,
         data,
@@ -216,7 +218,7 @@ export const computeUnitLabelAndRoundReferenceValue = (data, maxValue, unitRange
         const roundReferenceValue = getRoundReferenceValue(maxValue);
         return { unitLabel: '', roundReferenceValue, rechartsData: data };
     }
-    const { valueBase, unitLabel } = getUnitLabel(unitRange !== null && unitRange !== void 0 ? unitRange : [], maxValue);
+    const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
     const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
     const roundReferenceValue = getRoundReferenceValue(topValue);
     const rechartsData = data.map((dataPoint) => {
@@ -258,12 +260,31 @@ export function getUnitLabel(unitRange, maxValue) {
         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) => {
+// Sort stacked bars by their average values in descending order or by legend order
+// This ensures the largest bars appear at the bottom of the stack (default) or follow legend order
+export const sortStackedBars = (rechartsBars, data, stacked, legendOrder) => {
     if (!stacked) {
         return rechartsBars;
     }
+    // If legend order is provided, sort by legend order
+    if (legendOrder && legendOrder.length > 0) {
+        return [...rechartsBars].sort((a, b) => {
+            const indexA = legendOrder.indexOf(a.dataKey);
+            const indexB = legendOrder.indexOf(b.dataKey);
+            // If both items are in legend order, sort by their position
+            if (indexA !== -1 && indexB !== -1) {
+                return indexA - indexB;
+            }
+            // If only one item is in legend order, prioritize it
+            if (indexA !== -1)
+                return -1;
+            if (indexB !== -1)
+                return 1;
+            // If neither is in legend order, maintain original order
+            return 0;
+        });
+    }
+    // Default behavior: sort by average values
     const barAverages = rechartsBars.map((bar) => {
         const values = data
             .map((item) => Number(item[bar.dataKey]) || 0)
@@ -292,12 +313,45 @@ export const renderTooltipContent = (props, tooltip, hoveredValue) => {
     };
     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);
+/**
+ * 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, stackedBarSort) => {
+    const { selectedResources, listResources } = useChartLegend();
+    // Get legend order when stackedBarSort is 'legend'
+    const legendOrder = stackedBarSort === 'legend' ? listResources() : undefined;
+    const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(bars, type, colorSet, stacked, defaultSort, legendOrder);
+    // 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,
+        rechartsBars: filteredRechartsBars,
         unitLabel,
         roundReferenceValue,
         rechartsData,

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/date/FormattedDateTime.d.ts

@@ -2,8 +2,10 @@ 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,kBAAkB,qBAI7B,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

@@ -23,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`;
@@ -64,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/icon/Icon.component.d.ts

@@ -128,13 +128,13 @@ export declare const iconTable: {
     Mail: string;
 };
 export declare const customIcons: {
-    'Remote-user': ({ ariaLabel, color, size }: {
-        ariaLabel: any;
+    'Remote-user': ({ "aria-label": ariaLabel, color, size }: {
+        "aria-label": any;
         color: any;
         size: any;
     }) => import("react/jsx-runtime").JSX.Element;
-    'Remote-group': ({ ariaLabel, color, size }: {
-        ariaLabel: any;
+    'Remote-group': ({ "aria-label": ariaLabel, color, size }: {
+        "aria-label": any;
         color: any;
         size: any;
     }) => import("react/jsx-runtime").JSX.Element;
@@ -148,7 +148,7 @@ type Props = {
     ariaLabel?: string;
     withWrapper?: boolean;
     style?: CSSProperties;
-    onClick?: (event: MouseEvent) => void;
+    onClick?: (event: React.MouseEvent) => void;
     title?: string;
 };
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {

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;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,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,UAAU,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAyEF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,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"}