@scality/core-ui 0.164.0 → 0.166.0

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

@@ -41,7 +41,7 @@ export type BarchartProps<T extends BarchartBars> = {
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;
     unitRange?: UnitRange;
-    helpTooltip?: string;
+    helpTooltip?: React.ReactNode;
     stacked?: boolean;
     /**
      * Sort the bars by default or by legend order
@@ -57,5 +57,24 @@ export type BarchartProps<T extends BarchartBars> = {
     isLoading?: boolean;
     isError?: boolean;
 };
+interface CustomTickProps {
+    x: number;
+    y: number;
+    payload: {
+        value: number;
+    };
+    visibleTicksCount: number;
+    width: number;
+    type: TimeType;
+}
+/**
+ * Formats a date based on the interval
+ * @param timestamp - Timestamp
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+export declare const formatDate: (timestamp: number, interval: number) => React.ReactNode;
+export declare const CustomTick: ({ x, y, payload, visibleTicksCount, width, type, }: CustomTickProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# 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":"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"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
@@ -11,6 +11,7 @@ import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { renderTooltipContent, useChartData } from './utils';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 5,
     BAR_SIZE: 12,
@@ -24,11 +25,38 @@ const CHART_CONSTANTS = {
     },
 };
 /* ---------------------------------- COMPONENTS ---------------------------------- */
-const CustomTick = ({ x, y, payload, visibleTicksCount, width, }) => {
+/**
+ * Formats a date based on the interval
+ * @param timestamp - Timestamp
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+export const formatDate = (timestamp, interval) => {
+    const date = new Date(timestamp);
+    // More than 24 hours interval - use day and time format
+    if (interval > 24 * 60 * 60 * 1000) {
+        return (_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "chart-date", value: date }), ' ', _jsx(FormattedDateTime, { format: "time", value: date })] }));
+    }
+    else if (interval === 24 * 60 * 60 * 1000) {
+        // Daily interval - use day format
+        return _jsx(FormattedDateTime, { format: "chart-date", value: date });
+    }
+    else if (interval >= 60 * 1000) {
+        //Hourly and minute intervals - use minute format
+        return _jsx(FormattedDateTime, { format: "time", value: date });
+    }
+    else {
+        // minute interval or less - use full timestamp
+        return timestamp;
+    }
+};
+export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) => {
     const theme = useTheme();
     const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
     const centerX = x - tickWidth / 2;
-    return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { text: _jsx(Text, { variant: "Smaller", color: "textSecondary", children: String(payload.value) }), centered: true, tooltipStyle: {
+    return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time'
+                    ? formatDate(payload.value, type.timeRange.interval)
+                    : String(payload.value) }), centered: true, tooltipStyle: {
                 backgroundColor: theme.backgroundLevel1,
                 padding: spacing.r10,
                 borderRadius: spacing.r8,
@@ -43,7 +71,7 @@ const StyledResponsiveContainer = styled(ResponsiveContainer) `
   }
 `;
 const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
-    return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && (_jsx(IconHelp, { tooltipMessage: helpTooltip, title: helpTooltip })), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
+    return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && _jsx(IconHelp, { tooltipMessage: helpTooltip }), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
                             marginLeft: spacing.r8,
                         }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
 };
@@ -85,7 +113,7 @@ export const Barchart = (props) => {
                                 fontSize: fontSize.smaller,
                             }, tickLine: false, label: {
                                 fill: theme.textSecondary,
-                            }, orientation: "right" }), _jsx(ReferenceLine, { y: roundReferenceValue, fill: theme.border, strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
+                            }, orientation: "right" }), _jsx(ReferenceLine, { y: roundReferenceValue, fill: theme.border, strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props, type: type }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
                                 stroke: theme.textSecondary,
                             }, axisLine: {
                                 stroke: theme.textSecondary,

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

@@ -0,0 +1,18 @@
+import { BarchartBars } from './Barchart.component';
+export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ChartTooltipItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isHovered: boolean;
+}, never>;
+export declare const ChartTooltip: <T extends BarchartBars>({ type, currentPoint, colorSet, }: {
+    type: "time" | "category";
+    currentPoint: {
+        category: string | number;
+        values: {
+            label: T[number]["label"];
+            value: number;
+            isHovered: boolean;
+        }[];
+    };
+    colorSet: Record<string, string>;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/ChartTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKpD,eAAO,MAAM,qBAAqB,yGAYjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAM9D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,qCAIhD;IACD,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1B,YAAY,EAAE;QACZ,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;QAC1B,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,SAAS,EAAE,OAAO,CAAA;SAAE,EAAE,CAAC;KAC5E,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,4CAkCA,CAAC"}

package/dist/components/barchartv2/ChartTooltip.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { Text } from '../text/Text.component';
+import { fontSize, fontWeight } from '../../style/theme';
+import { LegendShape } from '../chartlegend/ChartLegend';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+export const ChartTooltipContainer = styled.div `
+  background-color: ${({ theme }) => theme.backgroundLevel1};
+  padding: ${spacing.r4} ${spacing.r8};
+  border-radius: 4px;
+  width: max-content;
+  max-width: 40rem;
+  border: 1px solid ${({ theme }) => theme.border};
+  display: flex;
+  font-size: ${fontSize.small};
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+`;
+export const ChartTooltipItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: ${({ isHovered }) => isHovered ? fontWeight.bold : fontWeight.base};
+`;
+export const ChartTooltip = ({ type, currentPoint, colorSet, }) => {
+    return (_jsxs(ChartTooltipContainer, { children: [_jsx(Text, { isEmphazed: true, children: type === 'time' ? (_jsx(FormattedDateTime, { format: "long-date", value: new Date(currentPoint.category) })) : (currentPoint.category) }), _jsx(Stack, { direction: "vertical", gap: "r8", style: { width: '100%' }, children: currentPoint.values.map((value) => {
+                    return (_jsxs(Wrap, { children: [_jsxs(ChartTooltipItem, { isHovered: value.isHovered, children: [_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }), value.label] }), _jsx(ChartTooltipItem, { isHovered: value.isHovered, children: value.value })] }, value.label));
+                }) })] }));
+};

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":"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"}

package/dist/components/barchartv2/utils.js

@@ -1,4 +1,3 @@
-import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
 import { chartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 export const getRoundReferenceValue = (value) => {
@@ -62,31 +61,6 @@ const generateTimeRanges = (startDate, endDate, 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
@@ -105,9 +79,8 @@ export const transformTimeData = (bars, type, barDataKeys) => {
     const categoryMap = new Map();
     // Initialize all ranges with zeros
     timeRanges.forEach((range) => {
-        const categoryDisplay = formatDate(range.start, type.timeRange.interval);
         const initialData = {
-            category: categoryDisplay,
+            category: range.start.getTime(),
         };
         barDataKeys.forEach((dataKey) => {
             initialData[dataKey] = 0;

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

@@ -3,6 +3,15 @@ type ChartLegendProps = {
     disabled?: boolean;
     direction?: 'horizontal' | 'vertical';
 };
+export declare const LegendItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    disabled?: boolean;
+    selected?: boolean;
+}, never>;
+export declare const LegendShape: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color?: string;
+    shape: "line" | "rectangle";
+    chartColors: Record<string, string>;
+}, never>;
 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

@@ -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;AAkDF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAgDlB,CAAC"}
+{"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,4CA+ElB,CAAC"}

package/dist/components/chartlegend/ChartLegend.js

@@ -10,7 +10,7 @@ const Legend = styled.div `
   gap: ${({ direction }) => (direction === 'horizontal' ? '16px' : '8px')};
   flex-wrap: wrap;
 `;
-const LegendItem = styled.div `
+export const LegendItem = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -22,7 +22,7 @@ const LegendItem = styled.div `
     opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   }
 `;
-const LegendShape = styled.div `
+export const LegendShape = styled.div `
   ${({ shape, color, chartColors }) => {
     if (shape === 'line') {
         return `
@@ -45,21 +45,50 @@ const LegendShape = styled.div `
 }}
 `;
 export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
-    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, } = useChartLegend();
+    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, getAllResourcesCount, getSelectedCount, selectOnlyResource, } = useChartLegend();
     const resources = listResources();
-    const handleLegendClick = useCallback((resource) => {
+    const handleLegendClick = useCallback((resource, event) => {
         if (disabled)
             return;
-        if (isSelected(resource)) {
-            removeSelectedResource(resource);
+        const isModifierClick = event.metaKey || event.ctrlKey;
+        const itemIsSelected = isSelected(resource);
+        if (isModifierClick) {
+            if (itemIsSelected) {
+                if (getSelectedCount() === 1) {
+                    selectAllResources();
+                }
+                else {
+                    removeSelectedResource(resource);
+                }
+            }
+            else {
+                addSelectedResource(resource);
+            }
         }
         else {
-            addSelectedResource(resource);
+            if (getSelectedCount() === getAllResourcesCount()) {
+                selectOnlyResource(resource);
+            }
+            else if (itemIsSelected) {
+                selectAllResources();
+            }
+            else {
+                selectOnlyResource(resource);
+            }
         }
-    }, [disabled, isSelected, addSelectedResource, removeSelectedResource]);
+    }, [
+        disabled,
+        isSelected,
+        addSelectedResource,
+        removeSelectedResource,
+        selectAllResources,
+        selectOnlyResource,
+        getAllResourcesCount,
+        getSelectedCount,
+    ]);
     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));
+            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));
         }) }));
 };

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

@@ -4,9 +4,13 @@ export type ChartLegendState = {
     selectedResources: string[];
     addSelectedResource: (resource: string) => void;
     removeSelectedResource: (resource: string) => void;
+    selectAllResources: () => void;
+    selectOnlyResource: (resource: string) => void;
     isSelected: (resource: string) => boolean;
     getColor: (resource: string) => string | undefined;
     listResources: () => string[];
+    getAllResourcesCount: () => number;
+    getSelectedCount: () => number;
 };
 export type ChartLegendWrapperProps = {
     children: ReactNode;

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,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"}
+{"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,oBAAoB,EAAE,MAAM,MAAM,CAAC;IACnC,gBAAgB,EAAE,MAAM,MAAM,CAAC;CAChC,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,4CAwFzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}

package/dist/components/chartlegend/ChartLegendWrapper.js

@@ -1,14 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useMemo, useCallback } from 'react';
+import { createContext, useContext, useState, useMemo, useCallback, } from 'react';
 const ChartLegendContext = createContext(null);
 export const ChartLegendWrapper = ({ children, colorSet, }) => {
-    const [selectedResources, setSelectedResources] = useState([]);
+    const allResources = Object.keys(colorSet);
+    const [selectedResources, setSelectedResources] = useState(allResources);
     const addSelectedResource = useCallback((resource) => {
         setSelectedResources((prev) => prev.includes(resource) ? prev : [...prev, resource]);
     }, []);
     const removeSelectedResource = useCallback((resource) => {
         setSelectedResources((prev) => prev.filter((r) => r !== resource));
     }, []);
+    const selectAllResources = useCallback(() => {
+        setSelectedResources(allResources);
+    }, [allResources]);
+    const selectOnlyResource = useCallback((resource) => {
+        setSelectedResources([resource]);
+    }, []);
+    const getAllResourcesCount = useCallback(() => {
+        return allResources.length;
+    }, [allResources]);
+    const getSelectedCount = useCallback(() => {
+        return selectedResources.length;
+    }, [selectedResources]);
     const isSelected = useCallback((resource) => {
         return selectedResources.includes(resource);
     }, [selectedResources]);
@@ -27,16 +40,24 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         selectedResources,
         addSelectedResource,
         removeSelectedResource,
+        selectAllResources,
+        selectOnlyResource,
         isSelected,
         getColor,
         listResources,
+        getAllResourcesCount,
+        getSelectedCount,
     }), [
         selectedResources,
         addSelectedResource,
         removeSelectedResource,
+        selectAllResources,
+        selectOnlyResource,
         isSelected,
         getColor,
         listResources,
+        getAllResourcesCount,
+        getSelectedCount,
     ]);
     return (_jsx(ChartLegendContext.Provider, { value: chartLegendState, children: children }));
 };

package/dist/components/constants.d.ts

@@ -19,6 +19,8 @@ export type QueryTimeSpan = {
     query: string;
     label: string;
     duration: number;
+    interval: number;
+    /** @deprecated Use `interval` instead */
     frequency: number;
 };
 export declare const queryTimeSpansCodes: QueryTimeSpan[];

package/dist/components/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/components/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAE;KAAG,GAAG,IAAI,IAAI,GAAG,GAAG;CAQ7C,CAAC;AACF,MAAM,MAAM,IAAI,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAG7E,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAC9C,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AACtD,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C,eAAO,MAAM,+BAA+B,QAAmB,CAAC;AAChE,eAAO,MAAM,sCAAsC,QAAe,CAAC;AACnE,eAAO,MAAM,6BAA6B,QAAU,CAAC;AAErD,eAAO,MAAM,gCAAgC,QAAU,CAAC;AACxD,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAC3D,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,MAAM,CAAC;IAEjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAmB9C,CAAC;AACF,eAAO,MAAM,UAAU,QAAQ,CAAC;AAEhC,eAAO,MAAM,eAAe,aAAa,CAAC;AAC1C,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,WAAW,SAAS,CAAC;AAClC,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,WAAW,SAAS,CAAC;AAElC,MAAM,MAAM,MAAM,GACd,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/components/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAE;KAAG,GAAG,IAAI,IAAI,GAAG,GAAG;CAQ7C,CAAC;AACF,MAAM,MAAM,IAAI,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAG7E,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAC9C,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AACtD,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C,eAAO,MAAM,+BAA+B,QAAmB,CAAC;AAChE,eAAO,MAAM,sCAAsC,QAAe,CAAC;AACnE,eAAO,MAAM,6BAA6B,QAAU,CAAC;AAErD,eAAO,MAAM,gCAAgC,QAAU,CAAC;AACxD,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAC3D,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,MAAM,CAAC;IAEjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAyB9C,CAAC;AAEF,eAAO,MAAM,UAAU,QAAQ,CAAC;AAEhC,eAAO,MAAM,eAAe,aAAa,CAAC;AAC1C,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,WAAW,SAAS,CAAC;AAClC,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,WAAW,SAAS,CAAC;AAElC,MAAM,MAAM,MAAM,GACd,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,CAAC"}

package/dist/components/constants.js

@@ -29,18 +29,24 @@ export const queryTimeSpansCodes = [
         query: QUERY_LAST_SEVEN_DAYS,
         label: LAST_SEVEN_DAYS,
         duration: SAMPLE_DURATION_LAST_SEVEN_DAYS,
+        interval: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
+        /** @deprecated Use `interval` instead */
         frequency: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
     },
     {
         query: QUERY_LAST_TWENTY_FOUR_HOURS,
         label: LAST_TWENTY_FOUR_HOURS,
         duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+        interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+        /** @deprecated Use `interval` instead */
         frequency: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
     },
     {
         query: QUERY_LAST_ONE_HOUR,
         label: LAST_ONE_HOUR,
         duration: SAMPLE_DURATION_LAST_ONE_HOUR,
+        interval: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
+        /** @deprecated Use `interval` instead */
         frequency: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
     },
 ];

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

@@ -1,12 +1,14 @@
 import { $PropertyType } from 'utility-types';
 import { Props as TooltipProps } from '../tooltip/Tooltip.component';
+import { CoreUITheme } from '../../style/theme';
 type Props = {
     text: string | number | JSX.Element | JSX.Element[];
     tooltipStyle?: $PropertyType<TooltipProps, 'overlayStyle'>;
     tooltipPlacement?: $PropertyType<TooltipProps, 'placement'>;
     lineClamp?: number;
     centered?: boolean;
+    color?: keyof CoreUITheme;
 };
-declare function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp, centered, }: Props): JSX.Element;
+declare function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp, color, 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;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"}
+{"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;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,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;IACnB,KAAK,CAAC,EAAE,MAAM,WAAW,CAAC;CAC3B,CAAC;AAwDF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,EACb,KAAK,EACL,QAAgB,GACjB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqCrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -38,11 +38,11 @@ function isEllipsisActive(element) {
 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, centered = false, }) {
+function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp = 1, color, 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, centered) }) })) : (_jsx(Text, { children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) })) }));
+    return (_jsx(BlockTooltip, { children: displayToolTip ? (_jsx(Tooltip, { overlay: text, overlayStyle: tooltipStyle, placement: tooltipPlacement, children: _jsx(Text, { color: color, children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) }) })) : (_jsx(Text, { color: color, children: getConstrainedTextContainer(constrainedTextRef, lineClamp, text, centered) })) }));
 }
 export { ConstrainedText };

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

@@ -1,3 +1,4 @@
+export declare const LONG_DATE_FORMATER: Intl.DateTimeFormat;
 export declare const DATE_FORMATER: Intl.DateTimeFormat;
 export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
 export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
@@ -5,7 +6,7 @@ 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' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second';
+    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'chart-date';
     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,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"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,YAAY,CAAC;IAEjB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAqHxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -1,6 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { getDateDaysDiff } from './dateDiffer';
 import { Tooltip } from '../tooltip/Tooltip.component';
+export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+});
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
     year: 'numeric',
     month: '2-digit',
@@ -83,6 +89,10 @@ export const FormattedDateTime = ({ format, value, }) => {
             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(',', '') }));
+        case 'long-date':
+            return _jsx(_Fragment, { children: LONG_DATE_FORMATER.format(value) });
+        case 'chart-date':
+            return _jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '') });
         default:
             return _jsx(_Fragment, {});
     }

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

@@ -20,6 +20,8 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
     title: string;
     height: number;
     startingTimeStamp: number;
+    interval: number;
+    duration: number;
     unitRange?: {
         threshold: number;
         label: string;
@@ -28,6 +30,6 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
     yAxisTitle?: string;
     helpText?: string;
 };
-export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, unitRange, isLoading, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=linetimeseriechart.component.d.ts.map

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

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

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

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, } from 'recharts';
 import { useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
-import { useMetricsTimeSpan } from '../linetemporalchart/MetricTimespanProvider';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
 import { fontSize, fontWeight } from '../../style/theme';
@@ -91,9 +90,8 @@ const CustomTooltip = ({ active, payload, label, unitLabel, }) => {
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
 };
-export function LineTimeSerieChart({ series, title, height, startingTimeStamp, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
     const theme = useTheme();
-    const { frequency, duration } = useMetricsTimeSpan();
     const { getColor } = useChartLegend();
     const chartRef = useRef(null);
     const chartData = useMemo(() => {
@@ -102,17 +100,17 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, u
             ? {
                 above: series.above.map((line) => ({
                     ...line,
-                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency),
+                    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, frequency).map(([timestamp, value]) => [timestamp, value === null ? null : `-${Number(value)}`]),
+                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval).map(([timestamp, value]) => [timestamp, value === null ? null : `-${Number(value)}`]),
                 })),
             }
             : series.map((line) => ({
                 ...line,
-                data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency),
+                data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
             }));
         // 2. Convert directly to Recharts format
         // Initialize an object to hold data points by timestamp
@@ -136,7 +134,7 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, u
         });
         // Convert object to array for Recharts
         return Object.values(dataPointsByTime).sort((a, b) => a.timestamp - b.timestamp);
-    }, [series, startingTimeStamp, duration, frequency, yAxisType]);
+    }, [series, startingTimeStamp, duration, interval, yAxisType]);
     // Calculate 5 perfectly evenly spaced ticks
     const xAxisTicks = useMemo(() => {
         if (!chartData || chartData.length === 0)