@scality/core-ui 0.174.0 → 0.176.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/barchartv2/Barchart.component.d.ts +4 -4
- package/dist/components/barchartv2/Barchart.component.d.ts.map +1 -1
- package/dist/components/barchartv2/Barchart.component.js +22 -32
- package/dist/components/barchartv2/BarchartTooltip.d.ts +1 -1
- package/dist/components/barchartv2/BarchartTooltip.d.ts.map +1 -1
- package/dist/components/barchartv2/BarchartTooltip.js +6 -6
- package/dist/components/barchartv2/utils.d.ts.map +1 -1
- package/dist/components/chartlegend/ChartLegendWrapper.js +1 -1
- package/dist/components/charttooltip/ChartTooltip.d.ts +6 -0
- package/dist/components/charttooltip/ChartTooltip.d.ts.map +1 -1
- package/dist/components/charttooltip/ChartTooltip.js +22 -0
- package/dist/components/date/FormattedDateTime.d.ts +23 -8
- package/dist/components/date/FormattedDateTime.d.ts.map +1 -1
- package/dist/components/date/FormattedDateTime.js +51 -7
- package/dist/components/icon/Icon.component.d.ts +1 -0
- package/dist/components/icon/Icon.component.d.ts.map +1 -1
- package/dist/components/icon/Icon.component.js +1 -0
- package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts +2 -1
- package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map +1 -1
- package/dist/components/linetimeseriechart/linetimeseriechart.component.js +19 -17
- package/dist/components/linetimeseriechart/utils.d.ts +1 -1
- package/dist/components/linetimeseriechart/utils.d.ts.map +1 -1
- package/dist/components/linetimeseriechart/utils.js +13 -13
- package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map +1 -1
- package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.js +2 -0
- package/dist/components/sparkline/sparkline.component.d.ts +2 -1
- package/dist/components/sparkline/sparkline.component.d.ts.map +1 -1
- package/dist/components/sparkline/sparkline.component.js +3 -3
- package/package.json +1 -1
- package/src/lib/components/barchartv2/Barchart.component.test.tsx +23 -25
- package/src/lib/components/barchartv2/Barchart.component.tsx +36 -45
- package/src/lib/components/barchartv2/BarchartTooltip.test.tsx +3 -3
- package/src/lib/components/barchartv2/BarchartTooltip.tsx +14 -18
- package/src/lib/components/barchartv2/utils.ts +1 -5
- package/src/lib/components/chartlegend/ChartLegendWrapper.tsx +1 -1
- package/src/lib/components/charttooltip/ChartTooltip.tsx +40 -0
- package/src/lib/components/date/FormattedDateTime.tsx +73 -8
- package/src/lib/components/icon/Icon.component.tsx +1 -0
- package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx +43 -34
- package/src/lib/components/linetimeseriechart/utils.test.ts +30 -68
- package/src/lib/components/linetimeseriechart/utils.ts +14 -18
- package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx +3 -1
- package/src/lib/components/sparkline/sparkline.component.tsx +5 -3
- package/stories/formattedate.stories.tsx +2 -0
- package/stories/linetimeseriechart.stories.tsx +1 -0
- package/stories/sparkline.stories.tsx +19 -0
|
@@ -72,13 +72,13 @@ interface CustomTickProps {
|
|
|
72
72
|
type: TimeType;
|
|
73
73
|
}
|
|
74
74
|
/**
|
|
75
|
-
*
|
|
76
|
-
* @param
|
|
77
|
-
* @param interval - Interval in milliseconds
|
|
75
|
+
* Get the format of the date based on the duration
|
|
76
|
+
* @param duration - Duration in milliseconds
|
|
78
77
|
* @returns Formatted string
|
|
79
78
|
*/
|
|
80
|
-
export declare const formatDate: (
|
|
79
|
+
export declare const formatDate: (duration: number) => "time" | "day-month-abbreviated" | "chart-long-term-date";
|
|
81
80
|
export declare const CustomTick: ({ x, y, payload, visibleTicksCount, width, type, }: CustomTickProps) => import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
export declare const StyledResponsiveContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("recharts").ResponsiveContainerProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
82
82
|
export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
83
83
|
export {};
|
|
84
84
|
//# sourceMappingURL=Barchart.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAC;AAiBlD,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;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,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,YAAY,GAAG,QAAQ,CAAC;IAC9B,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,KAAK,CAAC,SAAS,CAAC;IAC9B,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;AAEF,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;CAChB;AAID;;;;GAIG;AACH,eAAO,MAAM,UAAU,aACX,MAAM,KACf,MAAM,GAAG,uBAAuB,GAAG,sBAQrC,CAAC;AAEF,eAAO,MAAM,UAAU,uDAOpB,eAAe,4CA4CjB,CAAC;AAEF,eAAO,MAAM,yBAAyB,0OAKrC,CAAC;AAoEF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CAmJvE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { Bar, BarChart, CartesianGrid,
|
|
3
|
+
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
|
|
4
4
|
import styled, { useTheme } from 'styled-components';
|
|
5
5
|
import { spacing, Stack, Wrap } from '../../spacing';
|
|
6
6
|
import { chartColors, fontSize } from '../../style/theme';
|
|
@@ -27,37 +27,29 @@ const CHART_CONSTANTS = {
|
|
|
27
27
|
};
|
|
28
28
|
/* ---------------------------------- COMPONENTS ---------------------------------- */
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
31
|
-
* @param
|
|
32
|
-
* @param interval - Interval in milliseconds
|
|
30
|
+
* Get the format of the date based on the duration
|
|
31
|
+
* @param duration - Duration in milliseconds
|
|
33
32
|
* @returns Formatted string
|
|
34
33
|
*/
|
|
35
|
-
export const formatDate = (
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if (interval > 24 * 60 * 60 * 1000) {
|
|
39
|
-
return (_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "chart-date", value: date }), ' ', _jsx(FormattedDateTime, { format: "time", value: date })] }));
|
|
34
|
+
export const formatDate = (duration) => {
|
|
35
|
+
if (duration <= 24 * 60 * 60 * 1000) {
|
|
36
|
+
return 'time';
|
|
40
37
|
}
|
|
41
|
-
else if (
|
|
42
|
-
|
|
43
|
-
return _jsx(FormattedDateTime, { format: "chart-date", value: date });
|
|
44
|
-
}
|
|
45
|
-
else if (interval >= 60 * 1000) {
|
|
46
|
-
//Hourly and minute intervals - use minute format
|
|
47
|
-
return _jsx(FormattedDateTime, { format: "time", value: date });
|
|
38
|
+
else if (duration <= 7 * 24 * 60 * 60 * 1000) {
|
|
39
|
+
return 'day-month-abbreviated';
|
|
48
40
|
}
|
|
49
41
|
else {
|
|
50
|
-
|
|
51
|
-
return timestamp;
|
|
42
|
+
return 'chart-long-term-date';
|
|
52
43
|
}
|
|
53
44
|
};
|
|
54
45
|
export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) => {
|
|
55
46
|
const theme = useTheme();
|
|
56
47
|
const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
|
|
57
48
|
const centerX = x - tickWidth / 2;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
49
|
+
const duration = type.type === 'time'
|
|
50
|
+
? type.timeRange.endDate.getTime() - type.timeRange.startDate.getTime()
|
|
51
|
+
: 0;
|
|
52
|
+
return (_jsx("foreignObject", { x: centerX, y: y - 8, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: formatDate(duration), value: new Date(payload.value) })) : (String(payload.value)) }), centered: true, tooltipStyle: {
|
|
61
53
|
backgroundColor: theme.backgroundLevel1,
|
|
62
54
|
padding: spacing.r10,
|
|
63
55
|
borderRadius: spacing.r8,
|
|
@@ -65,7 +57,7 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) =
|
|
|
65
57
|
position: 'absolute',
|
|
66
58
|
} }) }));
|
|
67
59
|
};
|
|
68
|
-
const StyledResponsiveContainer = styled(ResponsiveContainer) `
|
|
60
|
+
export const StyledResponsiveContainer = styled(ResponsiveContainer) `
|
|
69
61
|
// Avoid tooltip over constrained text to be cut off
|
|
70
62
|
& .recharts-surface {
|
|
71
63
|
overflow: visible;
|
|
@@ -105,22 +97,20 @@ export const Barchart = (props) => {
|
|
|
105
97
|
return acc;
|
|
106
98
|
}, {});
|
|
107
99
|
const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
|
|
108
|
-
return (_jsxs(Stack, { direction: "vertical",
|
|
100
|
+
return (_jsxs(Stack, { direction: "vertical", 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: type.type === 'category'
|
|
109
101
|
? type.gap === 0
|
|
110
102
|
? undefined
|
|
111
103
|
: CHART_CONSTANTS.BAR_SIZE
|
|
112
|
-
: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical:
|
|
104
|
+
: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), rechartsBars.map((bar) => {
|
|
113
105
|
const { fill, dataKey, stackId } = bar;
|
|
114
106
|
return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, isAnimationActive: false, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
|
|
115
|
-
}), _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
|
|
116
|
-
, axisLine:
|
|
107
|
+
}), _jsx(YAxis, { tickCount: 1, interval: 0, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
|
|
108
|
+
, axisLine: { stroke: theme.border }, tick: {
|
|
117
109
|
fill: theme.textSecondary,
|
|
118
110
|
fontSize: fontSize.smaller,
|
|
119
|
-
},
|
|
120
|
-
|
|
121
|
-
}, 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: {
|
|
122
|
-
stroke: theme.textSecondary,
|
|
111
|
+
}, orientation: "right" }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props, type: type }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
|
|
112
|
+
stroke: theme.border,
|
|
123
113
|
}, axisLine: {
|
|
124
|
-
stroke: theme.
|
|
114
|
+
stroke: theme.border,
|
|
125
115
|
} }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel })), cursor: false })] }) }))] }));
|
|
126
116
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
|
|
2
1
|
import { TooltipContentProps } from 'recharts';
|
|
2
|
+
import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
|
|
3
3
|
export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }: {
|
|
4
4
|
type: TimeType | CategoryType;
|
|
5
5
|
tooltipProps: TooltipContentProps<number, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAS/C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,YAAY,uEAOnD;IACD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,iIAqDA,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { FormattedDateTime } from '../date/FormattedDateTime';
|
|
3
|
-
import { getCurrentPoint } from './utils';
|
|
4
|
-
import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
|
|
5
2
|
import { LegendShape } from '../chartlegend/ChartLegend';
|
|
3
|
+
import { ChartTooltipContainer, ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, TooltipHeader, } from '../charttooltip/ChartTooltip';
|
|
4
|
+
import { getCurrentPoint } from './utils';
|
|
6
5
|
export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }) => {
|
|
7
6
|
const { active } = tooltipProps;
|
|
8
7
|
if (!active) {
|
|
@@ -12,9 +11,10 @@ export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, to
|
|
|
12
11
|
if (tooltip) {
|
|
13
12
|
return tooltip(currentPoint);
|
|
14
13
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
const duration = type.type === 'time'
|
|
15
|
+
? type.timeRange.startDate.getTime() - type.timeRange.endDate.getTime()
|
|
16
|
+
: 0;
|
|
17
|
+
return (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(TooltipHeader, { duration: duration, value: currentPoint.category })) : (currentPoint.category) }), _jsx(ChartTooltipItemsContainer, { children: currentPoint.values.map((value) => {
|
|
18
18
|
const legendIcon = colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }));
|
|
19
19
|
const formattedValue = Number.isInteger(value.value)
|
|
20
20
|
? `${value.value}`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
|
|
@@ -64,7 +64,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
|
|
|
64
64
|
return color;
|
|
65
65
|
}, [internalColorSet]);
|
|
66
66
|
const listResources = useCallback(() => {
|
|
67
|
-
return Object.keys(internalColorSet);
|
|
67
|
+
return Object.keys(internalColorSet).sort();
|
|
68
68
|
}, [internalColorSet]);
|
|
69
69
|
const chartLegendState = useMemo(() => ({
|
|
70
70
|
selectedResources,
|
|
@@ -9,5 +9,11 @@ interface ChartTooltipItemProps {
|
|
|
9
9
|
export declare const ChartTooltipItem: React.FC<ChartTooltipItemProps>;
|
|
10
10
|
export declare const ChartTooltipHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
11
|
export declare const ChartTooltipItemsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
+
export declare const ChartTooltipSeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
+
export type TooltipDateFormat = 'day-month-abbreviated-year-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'day-month-abbreviated-hour-minute';
|
|
14
|
+
export declare const TooltipHeader: ({ duration, value, }: {
|
|
15
|
+
duration: number;
|
|
16
|
+
value: string | number;
|
|
17
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
12
18
|
export {};
|
|
13
19
|
//# sourceMappingURL=ChartTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,qBAAqB,yGAUjC,CAAC;AA+BF,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAe5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAK9B,CAAC;AAEF,eAAO,MAAM,0BAA0B,yGAKtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAKjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,wCAAwC,GACxC,0CAA0C,GAC1C,mCAAmC,CAAC;AAcxC,eAAO,MAAM,aAAa,yBAGvB;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,4CAOA,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { spacing } from '../../spacing';
|
|
4
4
|
import { fontSize, fontWeight } from '../../style/theme';
|
|
5
|
+
import { FormattedDateTime } from '../date/FormattedDateTime';
|
|
5
6
|
export const ChartTooltipContainer = styled.div `
|
|
6
7
|
border: 1px solid ${({ theme }) => theme.border};
|
|
7
8
|
background-color: ${({ theme }) => theme.backgroundLevel1};
|
|
@@ -47,3 +48,24 @@ export const ChartTooltipItemsContainer = styled.div `
|
|
|
47
48
|
gap: ${spacing.r8};
|
|
48
49
|
width: 100%;
|
|
49
50
|
`;
|
|
51
|
+
export const ChartTooltipSeparator = styled.div `
|
|
52
|
+
height: 1px;
|
|
53
|
+
background-color: ${({ theme }) => theme.border};
|
|
54
|
+
margin: ${spacing.r4} 0;
|
|
55
|
+
width: 100%;
|
|
56
|
+
`;
|
|
57
|
+
const getTooltipDateFormat = (duration) => {
|
|
58
|
+
if (duration <= 60 * 60 * 1000) {
|
|
59
|
+
return 'day-month-abbreviated-hour-minute-second';
|
|
60
|
+
}
|
|
61
|
+
else if (duration <= 7 * 24 * 60 * 60 * 1000) {
|
|
62
|
+
return 'day-month-abbreviated-hour-minute';
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
return 'day-month-abbreviated-year-hour-minute';
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
export const TooltipHeader = ({ duration, value, }) => {
|
|
69
|
+
const timeFormat = getTooltipDateFormat(duration);
|
|
70
|
+
return (_jsx(ChartTooltipHeader, { children: _jsx(FormattedDateTime, { format: timeFormat, value: new Date(value) }) }));
|
|
71
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
|
|
3
|
-
* @example Wednesday
|
|
3
|
+
* @example Wednesday 06 October 2025
|
|
4
4
|
*/
|
|
5
5
|
export declare const LONG_DATE_FORMATER: Intl.DateTimeFormat;
|
|
6
6
|
/**
|
|
@@ -15,7 +15,7 @@ export declare const LONG_DATE_FORMATER_WITHOUT_WEEKDAY: Intl.DateTimeFormat;
|
|
|
15
15
|
export declare const DATE_FORMATER: Intl.DateTimeFormat;
|
|
16
16
|
/**
|
|
17
17
|
* @description Day month formatter, with weekday, day and month. Used for describing long term date.
|
|
18
|
-
* @example Wed
|
|
18
|
+
* @example Wed 06 Oct
|
|
19
19
|
*/
|
|
20
20
|
export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
|
|
21
21
|
/**
|
|
@@ -28,16 +28,31 @@ export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
|
|
|
28
28
|
* @example 18:33
|
|
29
29
|
*/
|
|
30
30
|
export declare const TIME_FORMATER: Intl.DateTimeFormat;
|
|
31
|
+
/**
|
|
32
|
+
* @description Day month abbreviated formatter. Used for describing long term date.
|
|
33
|
+
* @example 06 Oct
|
|
34
|
+
*/
|
|
35
|
+
export declare const DAY_MONTH_ABBREVIATED: Intl.DateTimeFormat;
|
|
36
|
+
/**
|
|
37
|
+
* @description Day month abbreviated formatter. Used for describing long term date.
|
|
38
|
+
* @example 06 Oct 25
|
|
39
|
+
*/
|
|
40
|
+
export declare const DAY_MONTH_ABBREVIATED_YEAR: Intl.DateTimeFormat;
|
|
31
41
|
/**
|
|
32
42
|
* @description Day month abbreviated hour minute second formatter. Used for describing long term date.
|
|
33
|
-
* @example
|
|
43
|
+
* @example 06 Oct 18:33:00
|
|
34
44
|
*/
|
|
35
45
|
export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
|
|
36
46
|
/**
|
|
37
47
|
* @description Day month abbreviated hour minute formatter. Used for describing long term date.
|
|
38
|
-
* @example
|
|
48
|
+
* @example 06 Oct 18:33
|
|
39
49
|
*/
|
|
40
50
|
export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
|
|
51
|
+
/**
|
|
52
|
+
* @description Day month abbreviated year hour minute formatter. Used for describing long term date.
|
|
53
|
+
* @example 06 Oct 2025 18:33
|
|
54
|
+
*/
|
|
55
|
+
export declare const DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE: Intl.DateTimeFormat;
|
|
41
56
|
/**
|
|
42
57
|
* @description Year month day formatter, without time. Used for describing long term date.
|
|
43
58
|
* @example 2025-01-01
|
|
@@ -49,7 +64,7 @@ export declare const YEAR_MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
|
|
|
49
64
|
*/
|
|
50
65
|
export declare const MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
|
|
51
66
|
type FormattedDateTimeProps = {
|
|
52
|
-
format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'long-date-without-weekday' | 'chart-date' | 'year-month-day' | 'month-day';
|
|
67
|
+
format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'day-month-abbreviated-year-hour-minute' | 'long-date' | 'long-date-without-weekday' | 'chart-date' | 'year-month-day' | 'month-day' | 'day-month-abbreviated' | 'chart-long-term-date';
|
|
53
68
|
value: Date;
|
|
54
69
|
};
|
|
55
70
|
/**
|
|
@@ -61,10 +76,10 @@ type FormattedDateTimeProps = {
|
|
|
61
76
|
* time: '00:00'
|
|
62
77
|
* 'time-second': '00:00:00'
|
|
63
78
|
* relative: '1 month ago'
|
|
64
|
-
* 'day-month-abbreviated-hour-minute': '
|
|
65
|
-
* 'day-month-abbreviated-hour-minute-second': '
|
|
79
|
+
* 'day-month-abbreviated-hour-minute': '06 Oct 18:33'
|
|
80
|
+
* 'day-month-abbreviated-hour-minute-second': '06 Oct 18:33:00'
|
|
66
81
|
* 'long-date': 'Wednesday 6 October 2025'
|
|
67
|
-
* 'chart-date': '
|
|
82
|
+
* 'chart-date': '06 Oct'
|
|
68
83
|
* 'year-month-day': '2025-10-06'
|
|
69
84
|
*/
|
|
70
85
|
export declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,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,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,qBAAqB,qBAIhC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,0BAA0B,qBAKrC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,sCAAsC,qBAUlD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,wCAAwC,GACxC,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,GACX,uBAAuB,GACvB,sBAAsB,CAAC;IAE3B,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CA+JxB,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { getDateDaysDiff } from './dateDiffer';
|
|
|
3
3
|
import { Tooltip } from '../tooltip/Tooltip.component';
|
|
4
4
|
/**
|
|
5
5
|
* @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
|
|
6
|
-
* @example Wednesday
|
|
6
|
+
* @example Wednesday 06 October 2025
|
|
7
7
|
*/
|
|
8
8
|
export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
|
|
9
9
|
weekday: 'long',
|
|
@@ -32,7 +32,7 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
|
|
|
32
32
|
});
|
|
33
33
|
/**
|
|
34
34
|
* @description Day month formatter, with weekday, day and month. Used for describing long term date.
|
|
35
|
-
* @example Wed
|
|
35
|
+
* @example Wed 06 Oct
|
|
36
36
|
*/
|
|
37
37
|
export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
|
|
38
38
|
weekday: 'short',
|
|
@@ -58,9 +58,28 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
|
|
|
58
58
|
hour: '2-digit',
|
|
59
59
|
minute: '2-digit',
|
|
60
60
|
});
|
|
61
|
+
/**
|
|
62
|
+
* @description Day month abbreviated formatter. Used for describing long term date.
|
|
63
|
+
* @example 06 Oct
|
|
64
|
+
*/
|
|
65
|
+
export const DAY_MONTH_ABBREVIATED = Intl.DateTimeFormat('en-GB', {
|
|
66
|
+
day: '2-digit',
|
|
67
|
+
month: 'short',
|
|
68
|
+
hour12: false,
|
|
69
|
+
});
|
|
70
|
+
/**
|
|
71
|
+
* @description Day month abbreviated formatter. Used for describing long term date.
|
|
72
|
+
* @example 06 Oct 25
|
|
73
|
+
*/
|
|
74
|
+
export const DAY_MONTH_ABBREVIATED_YEAR = Intl.DateTimeFormat('en-GB', {
|
|
75
|
+
day: '2-digit',
|
|
76
|
+
month: 'short',
|
|
77
|
+
year: '2-digit',
|
|
78
|
+
hour12: false,
|
|
79
|
+
});
|
|
61
80
|
/**
|
|
62
81
|
* @description Day month abbreviated hour minute second formatter. Used for describing long term date.
|
|
63
|
-
* @example
|
|
82
|
+
* @example 06 Oct 18:33:00
|
|
64
83
|
*/
|
|
65
84
|
export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-GB', {
|
|
66
85
|
day: '2-digit',
|
|
@@ -72,7 +91,7 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-
|
|
|
72
91
|
});
|
|
73
92
|
/**
|
|
74
93
|
* @description Day month abbreviated hour minute formatter. Used for describing long term date.
|
|
75
|
-
* @example
|
|
94
|
+
* @example 06 Oct 18:33
|
|
76
95
|
*/
|
|
77
96
|
export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
|
|
78
97
|
day: '2-digit',
|
|
@@ -81,6 +100,18 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
|
|
|
81
100
|
minute: '2-digit',
|
|
82
101
|
hour12: false,
|
|
83
102
|
});
|
|
103
|
+
/**
|
|
104
|
+
* @description Day month abbreviated year hour minute formatter. Used for describing long term date.
|
|
105
|
+
* @example 06 Oct 2025 18:33
|
|
106
|
+
*/
|
|
107
|
+
export const DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
|
|
108
|
+
day: '2-digit',
|
|
109
|
+
month: 'short',
|
|
110
|
+
year: 'numeric',
|
|
111
|
+
hour: '2-digit',
|
|
112
|
+
minute: '2-digit',
|
|
113
|
+
hour12: false,
|
|
114
|
+
});
|
|
84
115
|
/**
|
|
85
116
|
* @description Year month day formatter, without time. Used for describing long term date.
|
|
86
117
|
* @example 2025-01-01
|
|
@@ -115,10 +146,10 @@ const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
|
|
|
115
146
|
* time: '00:00'
|
|
116
147
|
* 'time-second': '00:00:00'
|
|
117
148
|
* relative: '1 month ago'
|
|
118
|
-
* 'day-month-abbreviated-hour-minute': '
|
|
119
|
-
* 'day-month-abbreviated-hour-minute-second': '
|
|
149
|
+
* 'day-month-abbreviated-hour-minute': '06 Oct 18:33'
|
|
150
|
+
* 'day-month-abbreviated-hour-minute-second': '06 Oct 18:33:00'
|
|
120
151
|
* 'long-date': 'Wednesday 6 October 2025'
|
|
121
|
-
* 'chart-date': '
|
|
152
|
+
* 'chart-date': '06 Oct'
|
|
122
153
|
* 'year-month-day': '2025-10-06'
|
|
123
154
|
*/
|
|
124
155
|
export const FormattedDateTime = ({ format, value, }) => {
|
|
@@ -176,6 +207,19 @@ export const FormattedDateTime = ({ format, value, }) => {
|
|
|
176
207
|
return _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
|
|
177
208
|
case 'month-day':
|
|
178
209
|
return _jsx(_Fragment, { children: MONTH_DAY_FORMATTER.format(value) });
|
|
210
|
+
case 'day-month-abbreviated-year-hour-minute':
|
|
211
|
+
return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE.format(value)
|
|
212
|
+
.replace(',', '')
|
|
213
|
+
.replace(/Sept/g, 'Sep') }));
|
|
214
|
+
case 'day-month-abbreviated':
|
|
215
|
+
return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED.format(value)
|
|
216
|
+
.replace(',', '')
|
|
217
|
+
.replace(/Sept/g, 'Sep') }));
|
|
218
|
+
case 'chart-long-term-date':
|
|
219
|
+
return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_YEAR.format(value)
|
|
220
|
+
.replace(/[ ,]/g, '')
|
|
221
|
+
// replace Sept with Sep to keep 3 letter month
|
|
222
|
+
.replace(/Sept/g, 'Sep') }));
|
|
179
223
|
default:
|
|
180
224
|
return _jsx(_Fragment, {});
|
|
181
225
|
}
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIrB,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"}
|
|
@@ -133,6 +133,7 @@ export const iconTable = {
|
|
|
133
133
|
Mail: 'fas faEnvelope',
|
|
134
134
|
ThumbsUp: 'far faThumbsUp',
|
|
135
135
|
ThumbsDown: 'far faThumbsDown',
|
|
136
|
+
Sidebar: 'fas faColumns',
|
|
136
137
|
};
|
|
137
138
|
export const customIcons = {
|
|
138
139
|
'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TooltipContentProps } from 'recharts';
|
|
2
|
+
import React from 'react';
|
|
2
3
|
export type Serie = {
|
|
3
4
|
resource: string;
|
|
4
5
|
data: [number, number | string | null][];
|
|
@@ -37,7 +38,7 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
|
|
|
37
38
|
timeFormat?: 'date-time' | 'date';
|
|
38
39
|
yAxisTitle?: string;
|
|
39
40
|
helpText?: string;
|
|
40
|
-
renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string,
|
|
41
|
+
renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, duration?: number) => React.ReactNode;
|
|
41
42
|
};
|
|
42
43
|
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;
|
|
43
44
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAiD,MAAM,OAAO,CAAC;AAqCtE,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,QAAQ,CAAC,EAAE,MAAM,KACd,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AAkGF,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,2CA4WhB"}
|
|
@@ -1,36 +1,35 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CartesianGrid, Line, LineChart, ReferenceLine,
|
|
3
|
-
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
|
|
3
|
+
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import styled, { useTheme } from 'styled-components';
|
|
5
5
|
import { spacing } from '../../spacing';
|
|
6
6
|
import { fontSize } from '../../style/theme';
|
|
7
7
|
import { Box } from '../box/Box';
|
|
8
8
|
import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
|
|
9
|
-
import { FormattedDateTime } from '../date/FormattedDateTime';
|
|
10
9
|
import { Icon } from '../icon/Icon.component';
|
|
11
10
|
import { addMissingDataPoint, getUnitLabel, } from '../linetemporalchart/ChartUtil';
|
|
12
11
|
import { Loader } from '../loader/Loader.component';
|
|
13
|
-
import { ChartTitleText,
|
|
12
|
+
import { ChartTitleText, Text } from '../text/Text.component';
|
|
14
13
|
import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
|
|
15
14
|
import { formatXAxisLabel } from './utils';
|
|
16
|
-
import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
|
|
15
|
+
import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, ChartTooltipSeparator, TooltipHeader, } from '../charttooltip/ChartTooltip';
|
|
17
16
|
import { LegendShape } from '../chartlegend/ChartLegend';
|
|
17
|
+
import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
|
|
18
18
|
const LineTemporalChartWrapper = styled.div `
|
|
19
19
|
display: flex;
|
|
20
20
|
flex-direction: column;
|
|
21
21
|
justify-content: flex-start;
|
|
22
|
-
flex: 1;
|
|
23
22
|
`;
|
|
24
23
|
const ChartHeader = styled.div `
|
|
25
24
|
display: flex;
|
|
26
25
|
align-items: center;
|
|
27
26
|
`;
|
|
28
|
-
const LineTimeSerieChartTooltip = ({ unitLabel,
|
|
27
|
+
const LineTimeSerieChartTooltip = ({ unitLabel, duration, isChartActive, tooltipProps, renderTooltip, hoveredValue, isSymmetrical, }) => {
|
|
29
28
|
const { active, payload, label } = tooltipProps;
|
|
30
29
|
if (!active || !payload || !payload.length || !label || !isChartActive)
|
|
31
30
|
return null;
|
|
32
31
|
if (renderTooltip) {
|
|
33
|
-
return renderTooltip(tooltipProps, unitLabel,
|
|
32
|
+
return renderTooltip(tooltipProps, unitLabel, duration);
|
|
34
33
|
}
|
|
35
34
|
// We can't use the default itemSorter method because it's a custom tooltip.
|
|
36
35
|
// Sort the payload here instead
|
|
@@ -45,15 +44,18 @@ const LineTimeSerieChartTooltip = ({ unitLabel, timeFormat, isChartActive, toolt
|
|
|
45
44
|
}
|
|
46
45
|
return bValue - aValue; // Positives before negatives
|
|
47
46
|
});
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
// Find the transition point between positive and negative values
|
|
48
|
+
const separatorIndex = sortedPayload.findIndex((entry) => entry.value < 0);
|
|
49
|
+
const hasBothPositiveAndNegative = separatorIndex > 0 && separatorIndex < sortedPayload.length;
|
|
50
|
+
return (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: _jsx(TooltipHeader, { duration: duration, value: label }) }), _jsx(ChartTooltipItemsContainer, { children: sortedPayload.map((entry, index) => {
|
|
51
51
|
const legendIcon = (_jsx(LegendShape, { color: entry.color, shape: "line", chartColors: { [entry.color]: entry.color } }));
|
|
52
52
|
const isHovered = entry.name === hoveredValue;
|
|
53
53
|
const formattedValue = !Number.isFinite(entry.value)
|
|
54
54
|
? '-'
|
|
55
55
|
: `${entry.value.toFixed(2)} ${unitLabel}`;
|
|
56
|
-
return (
|
|
56
|
+
return (_jsxs(React.Fragment, { children: [isSymmetrical &&
|
|
57
|
+
hasBothPositiveAndNegative &&
|
|
58
|
+
index === separatorIndex && _jsx(ChartTooltipSeparator, {}), _jsx(ChartTooltipItem, { label: entry.name, value: formattedValue, legendIcon: legendIcon, isHovered: isHovered })] }, index));
|
|
57
59
|
}) })] }));
|
|
58
60
|
};
|
|
59
61
|
const isSymmetricalSeries = (series) => {
|
|
@@ -219,11 +221,11 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
|
|
|
219
221
|
};
|
|
220
222
|
}, [series, getColor, selectedResources]);
|
|
221
223
|
// Format time for display the tick in the x axis
|
|
222
|
-
const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp,
|
|
223
|
-
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(
|
|
224
|
+
const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, duration), [duration]);
|
|
225
|
+
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(Text, { 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(StyledResponsiveContainer, { 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), accessibilityLayer: true, 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: {
|
|
224
226
|
fill: theme.textSecondary,
|
|
225
227
|
fontSize: fontSize.smaller,
|
|
226
|
-
}, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right",
|
|
228
|
+
}, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", label: {
|
|
227
229
|
value: yAxisTitle,
|
|
228
230
|
angle: 90,
|
|
229
231
|
position: 'insideRight',
|
|
@@ -239,8 +241,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
|
|
|
239
241
|
: [0, topValue], axisLine: { stroke: theme.border }, tick: {
|
|
240
242
|
fill: theme.textSecondary,
|
|
241
243
|
fontSize: fontSize.smaller,
|
|
242
|
-
}, tickFormatter: (value) =>
|
|
244
|
+
}, tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)), tickCount: 5, interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, duration: duration, renderTooltip: renderTooltip, isSymmetrical: yAxisType === 'symmetrical', tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
|
|
243
245
|
const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
|
|
244
|
-
return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
|
|
246
|
+
return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, strokeDasharray: serie.isLineDashed ? '4 4' : undefined, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
|
|
245
247
|
}))] }) }) })] }));
|
|
246
248
|
}
|
|
@@ -12,5 +12,5 @@ export type ChartDataPoint = {
|
|
|
12
12
|
* @param chartData - The chart data to determine time range for optimal formatting
|
|
13
13
|
* @returns Formatted string for display on X-axis
|
|
14
14
|
*/
|
|
15
|
-
export declare const formatXAxisLabel: (timestamp: number,
|
|
15
|
+
export declare const formatXAxisLabel: (timestamp: number, duration: number) => string;
|
|
16
16
|
//# sourceMappingURL=utils.d.ts.map
|