@scality/core-ui 0.168.0 → 0.169.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/.github/workflows/github-pages.yml +5 -3
- package/.storybook/preview.js +1 -0
- package/dist/components/barchartv2/Barchart.component.d.ts.map +1 -1
- package/dist/components/barchartv2/Barchart.component.js +6 -5
- package/dist/components/barchartv2/ChartTooltip.d.ts +9 -13
- package/dist/components/barchartv2/ChartTooltip.d.ts.map +1 -1
- package/dist/components/barchartv2/ChartTooltip.js +14 -4
- package/dist/components/barchartv2/utils.d.ts +9 -2
- package/dist/components/barchartv2/utils.d.ts.map +1 -1
- package/dist/components/barchartv2/utils.js +12 -16
- package/dist/components/buttonv2/Buttonv2.component.d.ts.map +1 -1
- package/dist/components/buttonv2/Buttonv2.component.js +27 -6
- package/dist/components/date/FormattedDateTime.d.ts +15 -1
- package/dist/components/date/FormattedDateTime.d.ts.map +1 -1
- package/dist/components/date/FormattedDateTime.js +25 -0
- package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map +1 -1
- package/dist/components/linetimeseriechart/linetimeseriechart.component.js +30 -32
- package/dist/components/linetimeseriechart/utils.d.ts +16 -0
- package/dist/components/linetimeseriechart/utils.d.ts.map +1 -0
- package/dist/components/linetimeseriechart/utils.js +28 -0
- package/dist/style/theme.d.ts +2 -2
- package/dist/style/theme.d.ts.map +1 -1
- package/dist/style/theme.js +26 -0
- package/package.json +5 -4
- package/src/lib/components/barchartv2/Barchart.component.test.tsx +1 -1
- package/src/lib/components/barchartv2/Barchart.component.tsx +14 -6
- package/src/lib/components/barchartv2/ChartTooltip.test.tsx +119 -0
- package/src/lib/components/barchartv2/ChartTooltip.tsx +49 -19
- package/src/lib/components/barchartv2/utils.test.ts +29 -44
- package/src/lib/components/barchartv2/utils.ts +22 -29
- package/src/lib/components/buttonv2/Buttonv2.component.tsx +27 -6
- package/src/lib/components/date/FormattedDateTime.tsx +30 -1
- package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx +61 -57
- package/src/lib/components/linetimeseriechart/linetimeseriechart.test.tsx +58 -55
- package/src/lib/components/linetimeseriechart/utils.test.ts +87 -0
- package/src/lib/components/linetimeseriechart/utils.ts +43 -0
- package/src/lib/style/theme.ts +26 -0
- package/stories/BarChart/barchart.stories.tsx +1 -1
- package/stories/color.mdx +12 -0
|
@@ -11,7 +11,9 @@ jobs:
|
|
|
11
11
|
- uses: actions/setup-node@v4
|
|
12
12
|
with:
|
|
13
13
|
node-version: 20
|
|
14
|
-
- run:
|
|
15
|
-
|
|
14
|
+
- run: |
|
|
15
|
+
git remote set-url origin https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY
|
|
16
|
+
npm ci
|
|
17
|
+
npm run storybook:deploy
|
|
16
18
|
env:
|
|
17
|
-
|
|
19
|
+
STORYBOOK_DISABLE_TELEMETRY: 1
|
package/.storybook/preview.js
CHANGED
|
@@ -18,6 +18,7 @@ export const globalTypes = {
|
|
|
18
18
|
{ value: 'darkRebrand', title: ' A-Dark', icon: 'moon' },
|
|
19
19
|
{ value: 'artescaLight', title: 'A-Light', icon: 'sun' },
|
|
20
20
|
{ value: 'ring9dark', title: 'R-Dark', icon: 'moon' },
|
|
21
|
+
{ value: 'G-Dark', title: 'G-Dark', icon: 'moon' },
|
|
21
22
|
],
|
|
22
23
|
},
|
|
23
24
|
},
|
|
@@ -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":"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"}
|
|
@@ -5,13 +5,14 @@ import styled, { useTheme } from 'styled-components';
|
|
|
5
5
|
import { spacing, Stack, Wrap } from '../../spacing';
|
|
6
6
|
import { chartColors, fontSize } from '../../style/theme';
|
|
7
7
|
import { Box } from '../box/Box';
|
|
8
|
+
import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
|
|
8
9
|
import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
|
|
10
|
+
import { FormattedDateTime } from '../date/FormattedDateTime';
|
|
9
11
|
import { IconHelp } from '../iconhelper/IconHelper';
|
|
10
12
|
import { Loader } from '../loader/Loader.component';
|
|
11
13
|
import { Text } from '../text/Text.component';
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import { FormattedDateTime } from '../date/FormattedDateTime';
|
|
14
|
+
import { ChartTooltip } from './ChartTooltip';
|
|
15
|
+
import { useChartData } from './utils';
|
|
15
16
|
const CHART_CONSTANTS = {
|
|
16
17
|
TICK_WIDTH_OFFSET: 5,
|
|
17
18
|
BAR_SIZE: 12,
|
|
@@ -110,7 +111,7 @@ export const Barchart = (props) => {
|
|
|
110
111
|
: CHART_CONSTANTS.BAR_SIZE
|
|
111
112
|
: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
|
|
112
113
|
const { fill, dataKey, stackId } = bar;
|
|
113
|
-
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));
|
|
114
|
+
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));
|
|
114
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
|
|
115
116
|
, axisLine: false, tick: {
|
|
116
117
|
fill: theme.textSecondary,
|
|
@@ -121,5 +122,5 @@ export const Barchart = (props) => {
|
|
|
121
122
|
stroke: theme.textSecondary,
|
|
122
123
|
}, axisLine: {
|
|
123
124
|
stroke: theme.textSecondary,
|
|
124
|
-
} }), _jsx(Tooltip, { content: (props) =>
|
|
125
|
+
} }), _jsx(Tooltip, { content: (props) => (_jsx(ChartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip })), cursor: false })] }) }))] }));
|
|
125
126
|
};
|
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
import { BarchartBars } from './Barchart.component';
|
|
1
|
+
import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
|
|
2
|
+
import { TooltipContentProps } from 'recharts';
|
|
2
3
|
export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
4
|
export declare const ChartTooltipItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
4
5
|
isHovered: boolean;
|
|
5
6
|
}, never>;
|
|
6
|
-
export declare const ChartTooltip: <T extends BarchartBars>({ type,
|
|
7
|
-
type:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
isHovered: boolean;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
colorSet: Record<string, string>;
|
|
17
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const ChartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, }: {
|
|
8
|
+
type: TimeType | CategoryType;
|
|
9
|
+
tooltipProps: TooltipContentProps<number, string>;
|
|
10
|
+
colorSet?: Record<string, string>;
|
|
11
|
+
hoveredValue: string | undefined;
|
|
12
|
+
tooltip?: BarchartTooltipFn<T>;
|
|
13
|
+
}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
18
14
|
//# sourceMappingURL=ChartTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/ChartTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/ChartTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,qBAAqB,yGAYjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAM9D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,4DAMhD;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;CAChC,iIAwDA,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { spacing, Stack, Wrap } from '../../spacing';
|
|
4
4
|
import { Text } from '../text/Text.component';
|
|
5
5
|
import { fontSize, fontWeight } from '../../style/theme';
|
|
6
6
|
import { LegendShape } from '../chartlegend/ChartLegend';
|
|
7
7
|
import { FormattedDateTime } from '../date/FormattedDateTime';
|
|
8
|
+
import { getCurrentPoint } from './utils';
|
|
8
9
|
export const ChartTooltipContainer = styled.div `
|
|
9
10
|
background-color: ${({ theme }) => theme.backgroundLevel1};
|
|
10
11
|
padding: ${spacing.r4} ${spacing.r8};
|
|
@@ -24,8 +25,17 @@ export const ChartTooltipItem = styled.div `
|
|
|
24
25
|
gap: 8px;
|
|
25
26
|
font-weight: ${({ isHovered }) => isHovered ? fontWeight.bold : fontWeight.base};
|
|
26
27
|
`;
|
|
27
|
-
export const ChartTooltip = ({ type,
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
export const ChartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, }) => {
|
|
29
|
+
const { active } = tooltipProps;
|
|
30
|
+
if (!active) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
|
|
34
|
+
if (tooltip) {
|
|
35
|
+
return tooltip(currentPoint);
|
|
36
|
+
}
|
|
37
|
+
return (_jsxs(ChartTooltipContainer, { children: [_jsx(Text, { isEmphazed: true, children: type.type === 'time' ? (_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "long-date", value: new Date(currentPoint.category) }), ' ', type.type === 'time' &&
|
|
38
|
+
type.timeRange.interval < 24 * 60 * 60 * 1000 && (_jsx(FormattedDateTime, { format: "time", value: new Date(currentPoint.category) }))] })) : (currentPoint.category) }), _jsx(Stack, { direction: "vertical", gap: "r8", style: { width: '100%' }, children: currentPoint.values.map((value) => {
|
|
39
|
+
return (_jsxs(Wrap, { gap: spacing.r32, children: [_jsxs(ChartTooltipItem, { isHovered: value.isHovered, children: [colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet })), value.label] }), _jsx(ChartTooltipItem, { isHovered: value.isHovered, children: value.value })] }, value.label));
|
|
30
40
|
}) })] }));
|
|
31
41
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BarchartProps, BarchartBars
|
|
1
|
+
import { BarchartProps, BarchartBars } from './Barchart.component';
|
|
2
2
|
import { TooltipContentProps } from 'recharts';
|
|
3
3
|
import { ChartColors } from '../../style/theme';
|
|
4
4
|
export declare const getRoundReferenceValue: (value: number) => number;
|
|
@@ -81,7 +81,6 @@ export declare const sortStackedBars: (rechartsBars: {
|
|
|
81
81
|
fill: string;
|
|
82
82
|
stackId?: string;
|
|
83
83
|
}[];
|
|
84
|
-
export declare const renderTooltipContent: <T extends BarchartBars>(props: TooltipContentProps<number, string>, tooltip: BarchartTooltipFn<T> | undefined, hoveredValue: string | undefined) => import("react").ReactNode;
|
|
85
84
|
/**
|
|
86
85
|
* Filters both chart data and recharts bars to only include selected resources from legend
|
|
87
86
|
* @param data - Array of chart data objects with category and resource values
|
|
@@ -115,4 +114,12 @@ export declare const useChartData: <T extends BarchartBars>(bars: T, type: Barch
|
|
|
115
114
|
roundReferenceValue: number;
|
|
116
115
|
rechartsData: any;
|
|
117
116
|
};
|
|
117
|
+
export declare const getCurrentPoint: <T extends BarchartBars>(props: TooltipContentProps<number, string>, hoveredValue: string | undefined) => {
|
|
118
|
+
category: string | number;
|
|
119
|
+
values: {
|
|
120
|
+
label: T[number]["label"];
|
|
121
|
+
value: number;
|
|
122
|
+
isHovered: boolean;
|
|
123
|
+
}[];
|
|
124
|
+
};
|
|
118
125
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,YAAY,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
|
|
@@ -270,22 +270,6 @@ export const sortStackedBars = (rechartsBars, data, stacked, legendOrder) => {
|
|
|
270
270
|
// Remove the average property and keep only the bar data
|
|
271
271
|
return barAverages.map(({ average, ...bar }) => bar);
|
|
272
272
|
};
|
|
273
|
-
export const renderTooltipContent = (props, tooltip, hoveredValue) => {
|
|
274
|
-
const { active, payload, label } = props;
|
|
275
|
-
if (!active || !tooltip) {
|
|
276
|
-
return null;
|
|
277
|
-
}
|
|
278
|
-
const tooltipValues = payload.map((item) => ({
|
|
279
|
-
label: item.name,
|
|
280
|
-
value: item.value,
|
|
281
|
-
isHovered: item.name === hoveredValue,
|
|
282
|
-
}));
|
|
283
|
-
const currentPoint = {
|
|
284
|
-
category: label,
|
|
285
|
-
values: tooltipValues,
|
|
286
|
-
};
|
|
287
|
-
return tooltip(currentPoint);
|
|
288
|
-
};
|
|
289
273
|
/**
|
|
290
274
|
* Filters both chart data and recharts bars to only include selected resources from legend
|
|
291
275
|
* @param data - Array of chart data objects with category and resource values
|
|
@@ -330,3 +314,15 @@ export const useChartData = (bars, type, colorSet, stacked, defaultSort, unitRan
|
|
|
330
314
|
rechartsData,
|
|
331
315
|
};
|
|
332
316
|
};
|
|
317
|
+
export const getCurrentPoint = (props, hoveredValue) => {
|
|
318
|
+
const { payload, label } = props;
|
|
319
|
+
const tooltipValues = payload.map((item) => ({
|
|
320
|
+
label: item.name,
|
|
321
|
+
value: item.value,
|
|
322
|
+
isHovered: item.name === hoveredValue,
|
|
323
|
+
}));
|
|
324
|
+
return {
|
|
325
|
+
category: label,
|
|
326
|
+
values: tooltipValues,
|
|
327
|
+
};
|
|
328
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY,+
|
|
1
|
+
{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY,+GA0KxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -35,8 +35,10 @@ export const ButtonStyled = styled.button `
|
|
|
35
35
|
switch (props.variant) {
|
|
36
36
|
case 'primary':
|
|
37
37
|
return css `
|
|
38
|
-
background
|
|
39
|
-
|
|
38
|
+
background: ${brand.buttonPrimary};
|
|
39
|
+
background-clip: padding-box, border-box;
|
|
40
|
+
border: ${spacing.r1} solid transparent;
|
|
41
|
+
border-color: ${brand.buttonPrimary};
|
|
40
42
|
color: ${brand.textPrimary};
|
|
41
43
|
&:hover:enabled {
|
|
42
44
|
cursor: pointer;
|
|
@@ -56,8 +58,10 @@ export const ButtonStyled = styled.button `
|
|
|
56
58
|
`;
|
|
57
59
|
case 'secondary':
|
|
58
60
|
return css `
|
|
59
|
-
background
|
|
60
|
-
|
|
61
|
+
background: ${brand.buttonSecondary};
|
|
62
|
+
background-clip: padding-box, border-box;
|
|
63
|
+
border: ${spacing.r1} solid transparent;
|
|
64
|
+
border-color: ${brand.buttonSecondary};
|
|
61
65
|
color: ${brand.textPrimary};
|
|
62
66
|
&:hover:enabled {
|
|
63
67
|
cursor: pointer;
|
|
@@ -71,7 +75,8 @@ export const ButtonStyled = styled.button `
|
|
|
71
75
|
&:active:enabled {
|
|
72
76
|
cursor: pointer;
|
|
73
77
|
color: ${brand.textPrimary};
|
|
74
|
-
border: ${spacing.r1} solid
|
|
78
|
+
border: ${spacing.r1} solid transparent;
|
|
79
|
+
border-color: ${brand.buttonSecondary};
|
|
75
80
|
}
|
|
76
81
|
`;
|
|
77
82
|
case 'danger':
|
|
@@ -93,13 +98,18 @@ export const ButtonStyled = styled.button `
|
|
|
93
98
|
`;
|
|
94
99
|
case 'outline':
|
|
95
100
|
return css `
|
|
96
|
-
border: ${spacing.r1} solid
|
|
101
|
+
border: ${spacing.r1} solid transparent;
|
|
102
|
+
border-color: ${brand.buttonSecondary};
|
|
97
103
|
background-color: transparent;
|
|
98
104
|
color: ${brand.textPrimary};
|
|
99
105
|
&:hover:enabled {
|
|
100
106
|
cursor: pointer;
|
|
101
107
|
border-color: ${brand.infoPrimary};
|
|
102
108
|
color: ${brand.textPrimary};
|
|
109
|
+
|
|
110
|
+
&::before {
|
|
111
|
+
background-image: ${brand.buttonPrimary};
|
|
112
|
+
}
|
|
103
113
|
}
|
|
104
114
|
&:focus-visible:enabled {
|
|
105
115
|
${FocusVisibleStyle}
|
|
@@ -110,6 +120,17 @@ export const ButtonStyled = styled.button `
|
|
|
110
120
|
border: ${spacing.r1} solid ${brand.infoSecondary};
|
|
111
121
|
color: ${brand.textPrimary};
|
|
112
122
|
}
|
|
123
|
+
&::before {
|
|
124
|
+
content: '';
|
|
125
|
+
position: absolute;
|
|
126
|
+
inset: 0;
|
|
127
|
+
padding: ${spacing.r1};
|
|
128
|
+
background-image: ${brand.buttonSecondary};
|
|
129
|
+
border-radius: inherit;
|
|
130
|
+
mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
|
|
131
|
+
mask-composite: exclude;
|
|
132
|
+
pointer-events: none;
|
|
133
|
+
}
|
|
113
134
|
`;
|
|
114
135
|
default:
|
|
115
136
|
}
|
|
@@ -1,17 +1,31 @@
|
|
|
1
1
|
export declare const LONG_DATE_FORMATER: Intl.DateTimeFormat;
|
|
2
|
+
/**
|
|
3
|
+
* @description Long date formatter, without weekday.
|
|
4
|
+
* @example 01 September 2025
|
|
5
|
+
*/
|
|
6
|
+
export declare const LONG_DATE_FORMATER_WITHOUT_WEEKDAY: Intl.DateTimeFormat;
|
|
2
7
|
export declare const DATE_FORMATER: Intl.DateTimeFormat;
|
|
3
8
|
export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
|
|
4
9
|
export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
|
|
5
10
|
export declare const TIME_FORMATER: Intl.DateTimeFormat;
|
|
6
11
|
export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
|
|
12
|
+
/**
|
|
13
|
+
* @description Day month abbreviated hour minute formatter, without second.
|
|
14
|
+
* @example 15 Sept 14:30
|
|
15
|
+
*/
|
|
7
16
|
export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
|
|
8
17
|
/**
|
|
9
18
|
* @description Year month day formatter, without time. Used for describing long term date.
|
|
10
19
|
* @example 2025-01-01
|
|
11
20
|
*/
|
|
12
21
|
export declare const YEAR_MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
|
|
22
|
+
/**
|
|
23
|
+
* @description Month day formatter, without year. Used for short term date ranges.
|
|
24
|
+
* @example 01-15
|
|
25
|
+
*/
|
|
26
|
+
export declare const MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
|
|
13
27
|
type FormattedDateTimeProps = {
|
|
14
|
-
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' | 'year-month-day';
|
|
28
|
+
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';
|
|
15
29
|
value: Date;
|
|
16
30
|
};
|
|
17
31
|
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,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;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,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,GACZ,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,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;;;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;IAEhB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CA2HxB,CAAC"}
|
|
@@ -7,6 +7,15 @@ export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
|
|
|
7
7
|
month: 'long',
|
|
8
8
|
day: 'numeric',
|
|
9
9
|
});
|
|
10
|
+
/**
|
|
11
|
+
* @description Long date formatter, without weekday.
|
|
12
|
+
* @example 01 September 2025
|
|
13
|
+
*/
|
|
14
|
+
export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
|
|
15
|
+
year: 'numeric',
|
|
16
|
+
month: 'long',
|
|
17
|
+
day: '2-digit',
|
|
18
|
+
});
|
|
10
19
|
export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
|
|
11
20
|
year: 'numeric',
|
|
12
21
|
month: '2-digit',
|
|
@@ -37,6 +46,10 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-
|
|
|
37
46
|
second: '2-digit',
|
|
38
47
|
hour12: false,
|
|
39
48
|
});
|
|
49
|
+
/**
|
|
50
|
+
* @description Day month abbreviated hour minute formatter, without second.
|
|
51
|
+
* @example 15 Sept 14:30
|
|
52
|
+
*/
|
|
40
53
|
export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
|
|
41
54
|
day: 'numeric',
|
|
42
55
|
month: 'short',
|
|
@@ -53,6 +66,14 @@ export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
|
|
|
53
66
|
month: '2-digit',
|
|
54
67
|
day: '2-digit',
|
|
55
68
|
});
|
|
69
|
+
/**
|
|
70
|
+
* @description Month day formatter, without year. Used for short term date ranges.
|
|
71
|
+
* @example 01-15
|
|
72
|
+
*/
|
|
73
|
+
export const MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
|
|
74
|
+
month: '2-digit',
|
|
75
|
+
day: '2-digit',
|
|
76
|
+
});
|
|
56
77
|
const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
|
|
57
78
|
if (timeDiff > 0) {
|
|
58
79
|
return `${stringToBeFormatted} ago`;
|
|
@@ -100,10 +121,14 @@ export const FormattedDateTime = ({ format, value, }) => {
|
|
|
100
121
|
return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(',', '') }));
|
|
101
122
|
case 'long-date':
|
|
102
123
|
return _jsx(_Fragment, { children: LONG_DATE_FORMATER.format(value) });
|
|
124
|
+
case 'long-date-without-weekday':
|
|
125
|
+
return _jsx(_Fragment, { children: LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value) });
|
|
103
126
|
case 'chart-date':
|
|
104
127
|
return _jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '') });
|
|
105
128
|
case 'year-month-day':
|
|
106
129
|
return _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
|
|
130
|
+
case 'month-day':
|
|
131
|
+
return _jsx(_Fragment, { children: MONTH_DAY_FORMATTER.format(value) });
|
|
107
132
|
default:
|
|
108
133
|
return _jsx(_Fragment, {});
|
|
109
134
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAoGA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAkEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CA6ShB"}
|
|
@@ -12,7 +12,9 @@ import { spacing } from '../../spacing';
|
|
|
12
12
|
import { getUnitLabel } from '../linetemporalchart/ChartUtil';
|
|
13
13
|
import { Icon } from '../icon/Icon.component';
|
|
14
14
|
import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
|
|
15
|
-
import {
|
|
15
|
+
import { FormattedDateTime } from '../date/FormattedDateTime';
|
|
16
|
+
import { Box } from '../box/Box';
|
|
17
|
+
import { formatXAxisLabel } from './utils';
|
|
16
18
|
const LineTemporalChartWrapper = styled.div `
|
|
17
19
|
display: flex;
|
|
18
20
|
flex-direction: column;
|
|
@@ -44,6 +46,8 @@ const TooltipValue = styled.div `
|
|
|
44
46
|
color: ${(props) => props.theme.textSecondary};
|
|
45
47
|
display: flex;
|
|
46
48
|
align-items: flex-start;
|
|
49
|
+
justify-content: space-between;
|
|
50
|
+
width: 100%;
|
|
47
51
|
`;
|
|
48
52
|
const TooltipLegend = styled.div `
|
|
49
53
|
width: 12px;
|
|
@@ -53,19 +57,21 @@ const TooltipLegend = styled.div `
|
|
|
53
57
|
flex-shrink: 0;
|
|
54
58
|
margin-top: 8px;
|
|
55
59
|
`;
|
|
56
|
-
const
|
|
60
|
+
const TooltipLeftGroup = styled.div `
|
|
57
61
|
display: flex;
|
|
62
|
+
align-items: flex-start;
|
|
58
63
|
min-width: 0;
|
|
59
64
|
flex: 1;
|
|
60
65
|
`;
|
|
61
66
|
const TooltipName = styled.div `
|
|
62
|
-
margin-right: 4px;
|
|
63
67
|
word-wrap: break-word;
|
|
64
68
|
word-break: break-word;
|
|
65
|
-
|
|
69
|
+
flex: 1;
|
|
66
70
|
`;
|
|
67
71
|
const TooltipInstanceValue = styled.div `
|
|
68
|
-
|
|
72
|
+
margin-left: 16px;
|
|
73
|
+
flex-shrink: 0;
|
|
74
|
+
text-align: right;
|
|
69
75
|
`;
|
|
70
76
|
const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
|
|
71
77
|
if (!active || !payload || !payload.length || !label)
|
|
@@ -73,8 +79,8 @@ const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
|
|
|
73
79
|
// We can't use the default itemSorter method because it's a custom tooltip.
|
|
74
80
|
// Sort the payload here instead
|
|
75
81
|
const sortedPayload = [...payload].sort((a, b) => {
|
|
76
|
-
const aValue =
|
|
77
|
-
const bValue =
|
|
82
|
+
const aValue = a.value;
|
|
83
|
+
const bValue = b.value;
|
|
78
84
|
if (aValue >= 0 && bValue >= 0) {
|
|
79
85
|
return bValue - aValue; // Higher positive values first
|
|
80
86
|
}
|
|
@@ -85,9 +91,9 @@ const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
|
|
|
85
91
|
});
|
|
86
92
|
return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: timeFormat === 'date-time'
|
|
87
93
|
? 'day-month-abbreviated-hour-minute-second'
|
|
88
|
-
: 'long-date', value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsx(TooltipLegend, { color: entry.color }),
|
|
89
|
-
|
|
90
|
-
|
|
94
|
+
: 'long-date-without-weekday', value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsxs(TooltipLeftGroup, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsx(TooltipName, { children: entry.name })] }), _jsx(TooltipInstanceValue, { children: !Number.isFinite(entry.value)
|
|
95
|
+
? '-'
|
|
96
|
+
: `${entry.value.toFixed(2)} ${unitLabel}` })] }, index)))] }));
|
|
91
97
|
};
|
|
92
98
|
const isSymmetricalSeries = (series) => {
|
|
93
99
|
return 'above' in series && 'below' in series;
|
|
@@ -137,25 +143,24 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
|
|
|
137
143
|
// Convert object to array for Recharts
|
|
138
144
|
return Object.values(dataPointsByTime).sort((a, b) => a.timestamp - b.timestamp);
|
|
139
145
|
}, [series, startingTimeStamp, duration, interval, yAxisType]);
|
|
140
|
-
// Calculate
|
|
146
|
+
// Calculate evenly spaced ticks that avoid the very beginning and end
|
|
141
147
|
const xAxisTicks = useMemo(() => {
|
|
142
148
|
if (!chartData || chartData.length === 0)
|
|
143
149
|
return [];
|
|
144
150
|
const timestamps = chartData.map((d) => d.timestamp);
|
|
145
151
|
const minTimestamp = Math.min(...timestamps);
|
|
146
152
|
const maxTimestamp = Math.max(...timestamps);
|
|
147
|
-
// Calculate 5 perfectly evenly spaced ticks
|
|
148
153
|
const timeRange = maxTimestamp - minTimestamp;
|
|
149
|
-
|
|
150
|
-
const
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
return
|
|
154
|
+
// Add padding to avoid labels at the very edges (10% padding on each side)
|
|
155
|
+
const padding = timeRange * 0.1;
|
|
156
|
+
const paddedStart = minTimestamp + padding;
|
|
157
|
+
const paddedEnd = maxTimestamp - padding;
|
|
158
|
+
const paddedRange = paddedEnd - paddedStart;
|
|
159
|
+
// Create 5 evenly spaced ticks within the padded range
|
|
160
|
+
const numTicks = 5;
|
|
161
|
+
const tickInterval = paddedRange / (numTicks - 1);
|
|
162
|
+
const evenlySpacedTicks = Array.from({ length: numTicks }, (_, index) => paddedStart + index * tickInterval);
|
|
163
|
+
return evenlySpacedTicks;
|
|
159
164
|
}, [chartData]);
|
|
160
165
|
// 3. Transform the data base on the valuebase
|
|
161
166
|
const { topValue, unitLabel, rechartsData } = useMemo(() => {
|
|
@@ -219,15 +224,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
|
|
|
219
224
|
};
|
|
220
225
|
}, [series, getColor]);
|
|
221
226
|
// Format time for display the tick in the x axis
|
|
222
|
-
const
|
|
223
|
-
|
|
224
|
-
return timeFormat === 'date-time'
|
|
225
|
-
? DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '')
|
|
226
|
-
: timeFormat === 'date'
|
|
227
|
-
? YEAR_MONTH_DAY_FORMATTER.format(date)
|
|
228
|
-
: '';
|
|
229
|
-
}, [timeFormat]);
|
|
230
|
-
return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabel, tickCount: 5, tick: {
|
|
227
|
+
const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, timeFormat, chartData), [timeFormat, chartData]);
|
|
228
|
+
return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
|
|
231
229
|
fill: theme.textSecondary,
|
|
232
230
|
fontSize: fontSize.smaller,
|
|
233
231
|
}, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
|
|
@@ -246,7 +244,7 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
|
|
|
246
244
|
: [0, topValue], axisLine: { stroke: theme.border }, tick: {
|
|
247
245
|
fill: theme.textSecondary,
|
|
248
246
|
fontSize: fontSize.smaller,
|
|
249
|
-
}, tickFormatter: (value) => Math.round(value).toString() }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat }) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
|
|
247
|
+
}, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat }) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
|
|
250
248
|
const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
|
|
251
249
|
return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false }, `${title}-${resource}-${serieIndex}`));
|
|
252
250
|
}))] }) })] }));
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const ONE_YEAR_MILLISECONDS: number;
|
|
2
|
+
export type ChartDataPoint = {
|
|
3
|
+
timestamp: number;
|
|
4
|
+
} & Record<string, number | null>;
|
|
5
|
+
/**
|
|
6
|
+
* Formats timestamp for X-axis labels based on time format and data range:
|
|
7
|
+
* For 'date-time' format, return day-month-abbreviated-hour-minute format
|
|
8
|
+
* For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
|
|
9
|
+
*
|
|
10
|
+
* @param timestamp - The timestamp to format in milliseconds
|
|
11
|
+
* @param timeFormat - The format type ('date-time' or 'date')
|
|
12
|
+
* @param chartData - The chart data to determine time range for optimal formatting
|
|
13
|
+
* @returns Formatted string for display on X-axis
|
|
14
|
+
*/
|
|
15
|
+
export declare const formatXAxisLabel: (timestamp: number, timeFormat?: "date-time" | "date", chartData?: ChartDataPoint[]) => string;
|
|
16
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,eACL,WAAW,GAAG,MAAM,cACrB,cAAc,EAAE,KAC1B,MAgBF,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, YEAR_MONTH_DAY_FORMATTER, MONTH_DAY_FORMATTER, } from '../date/FormattedDateTime';
|
|
2
|
+
export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
|
|
3
|
+
/**
|
|
4
|
+
* Formats timestamp for X-axis labels based on time format and data range:
|
|
5
|
+
* For 'date-time' format, return day-month-abbreviated-hour-minute format
|
|
6
|
+
* For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
|
|
7
|
+
*
|
|
8
|
+
* @param timestamp - The timestamp to format in milliseconds
|
|
9
|
+
* @param timeFormat - The format type ('date-time' or 'date')
|
|
10
|
+
* @param chartData - The chart data to determine time range for optimal formatting
|
|
11
|
+
* @returns Formatted string for display on X-axis
|
|
12
|
+
*/
|
|
13
|
+
export const formatXAxisLabel = (timestamp, timeFormat = 'date-time', chartData = []) => {
|
|
14
|
+
const date = new Date(timestamp);
|
|
15
|
+
if (!chartData.length) {
|
|
16
|
+
return YEAR_MONTH_DAY_FORMATTER.format(date);
|
|
17
|
+
}
|
|
18
|
+
if (timeFormat === 'date-time') {
|
|
19
|
+
return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
|
|
20
|
+
}
|
|
21
|
+
const timestamps = chartData.map((d) => d.timestamp);
|
|
22
|
+
const minTimestamp = Math.min(...timestamps);
|
|
23
|
+
const maxTimestamp = Math.max(...timestamps);
|
|
24
|
+
const timeRangeMilliseconds = maxTimestamp - minTimestamp;
|
|
25
|
+
return timeRangeMilliseconds >= ONE_YEAR_MILLISECONDS
|
|
26
|
+
? YEAR_MONTH_DAY_FORMATTER.format(date)
|
|
27
|
+
: MONTH_DAY_FORMATTER.format(date);
|
|
28
|
+
};
|
package/dist/style/theme.d.ts
CHANGED
|
@@ -52,7 +52,7 @@ export type CoreUITheme = {
|
|
|
52
52
|
textReverse: string;
|
|
53
53
|
textLink: string;
|
|
54
54
|
};
|
|
55
|
-
export declare const coreUIAvailableThemesNames: readonly ["darkRebrand", "artescaLight", "ring9dark"];
|
|
55
|
+
export declare const coreUIAvailableThemesNames: readonly ["darkRebrand", "artescaLight", "ring9dark", "G-Dark"];
|
|
56
56
|
export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
|
|
57
57
|
export declare const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme>;
|
|
58
58
|
/**
|
|
@@ -62,7 +62,7 @@ export declare const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme>
|
|
|
62
62
|
*
|
|
63
63
|
* import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
|
|
64
64
|
*/
|
|
65
|
-
export declare const defaultTheme: Record<"darkRebrand" | "artescaLight" | "ring9dark", CoreUITheme>;
|
|
65
|
+
export declare const defaultTheme: Record<"darkRebrand" | "artescaLight" | "ring9dark" | "G-Dark", CoreUITheme>;
|
|
66
66
|
/**
|
|
67
67
|
* @deprecated
|
|
68
68
|
* Instead should use useTheme()
|