@scality/core-ui 0.192.0 → 0.194.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/charts/barchart/Barchart.d.ts.map +1 -1
- package/dist/components/charts/barchart/Barchart.js +29 -19
- package/dist/components/charts/common/chartUtils.d.ts +7 -2
- package/dist/components/charts/common/chartUtils.d.ts.map +1 -1
- package/dist/components/charts/common/chartUtils.js +55 -20
- package/dist/components/charts/index.d.ts +1 -1
- package/dist/components/charts/index.d.ts.map +1 -1
- package/dist/components/charts/linetimeseries/LineTimeSerieChart.d.ts +12 -47
- package/dist/components/charts/linetimeseries/LineTimeSerieChart.d.ts.map +1 -1
- package/dist/components/charts/linetimeseries/LineTimeSerieChart.js +46 -220
- package/dist/components/charts/linetimeseries/LineTimeSerieChart.types.d.ts +77 -0
- package/dist/components/charts/linetimeseries/LineTimeSerieChart.types.d.ts.map +1 -0
- package/dist/components/charts/linetimeseries/LineTimeSerieChart.types.js +6 -0
- package/dist/components/charts/linetimeseries/LineTimeSerieChartTooltip.d.ts +18 -0
- package/dist/components/charts/linetimeseries/LineTimeSerieChartTooltip.d.ts.map +1 -0
- package/dist/components/charts/linetimeseries/LineTimeSerieChartTooltip.js +65 -0
- package/dist/components/charts/linetimeseries/useChartData.d.ts +44 -0
- package/dist/components/charts/linetimeseries/useChartData.d.ts.map +1 -0
- package/dist/components/charts/linetimeseries/useChartData.js +207 -0
- package/dist/components/charts/linetimeseries/useChartHover.d.ts +15 -0
- package/dist/components/charts/linetimeseries/useChartHover.d.ts.map +1 -0
- package/dist/components/charts/linetimeseries/useChartHover.js +29 -0
- package/dist/components/checkbox/Checkbox.component.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.component.js +15 -7
- package/dist/components/constrainedtext/Constrainedtext.component.js +2 -2
- package/dist/components/dropdown/Dropdown.component.d.ts.map +1 -1
- package/dist/components/dropdown/Dropdown.component.js +3 -0
- package/dist/components/error-pages/ErrorPage401.component.js +1 -1
- package/dist/components/error-pages/ErrorPage404.component.js +1 -1
- package/dist/components/error-pages/ErrorPage500.component.js +1 -1
- package/dist/components/icon/CustomsIcons.d.ts +10 -0
- package/dist/components/icon/CustomsIcons.d.ts.map +1 -1
- package/dist/components/icon/CustomsIcons.js +8 -0
- package/dist/components/icon/Icon.component.d.ts +0 -1
- package/dist/components/icon/Icon.component.d.ts.map +1 -1
- package/dist/components/icon/Icon.component.js +5 -2
- package/dist/components/infomessage/InfoMessage.component.js +1 -1
- package/dist/components/tablev2/Tablestyle.d.ts.map +1 -1
- package/dist/components/tablev2/Tablestyle.js +2 -3
- package/dist/components/tooltip/Tooltip.component.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/utils.d.ts +14 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +25 -0
- package/package.json +1 -1
- package/src/lib/components/charts/barchart/Barchart.tsx +123 -106
- package/src/lib/components/charts/common/chartUtils.test.ts +27 -12
- package/src/lib/components/charts/common/chartUtils.ts +67 -23
- package/src/lib/components/charts/index.ts +1 -1
- package/src/lib/components/charts/linetimeseries/LineTimeSerieChart.tsx +136 -516
- package/src/lib/components/charts/linetimeseries/LineTimeSerieChart.types.ts +93 -0
- package/src/lib/components/charts/linetimeseries/LineTimeSerieChartTooltip.tsx +137 -0
- package/src/lib/components/charts/linetimeseries/useChartData.ts +322 -0
- package/src/lib/components/charts/linetimeseries/useChartHover.ts +35 -0
- package/src/lib/components/checkbox/Checkbox.component.tsx +19 -20
- package/src/lib/components/constrainedtext/Constrainedtext.component.tsx +2 -2
- package/src/lib/components/dropdown/Dropdown.component.tsx +3 -0
- package/src/lib/components/error-pages/ErrorPage401.component.tsx +1 -1
- package/src/lib/components/error-pages/ErrorPage404.component.tsx +1 -1
- package/src/lib/components/error-pages/ErrorPage500.component.tsx +1 -1
- package/src/lib/components/icon/CustomsIcons.tsx +36 -0
- package/src/lib/components/icon/Icon.component.tsx +9 -2
- package/src/lib/components/infomessage/InfoMessage.component.tsx +1 -1
- package/src/lib/components/tablev2/Tablestyle.tsx +2 -4
- package/src/lib/components/tooltip/Tooltip.component.tsx +1 -1
- package/src/lib/index.ts +1 -0
- package/src/lib/utils.ts +38 -0
- package/stories/GlobalHealthBar/globalhealthbar.stories.tsx +1 -1
- package/stories/banner.stories.tsx +1 -1
- package/stories/linetimeseriechart.stories.tsx +325 -6
|
@@ -14,3 +14,11 @@ export const RemoteGroup = ({ ariaLabel, color, size }) => {
|
|
|
14
14
|
const getColor = useGetColor(color);
|
|
15
15
|
return (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: getColor }), _jsx("path", { d: "M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z", fill: getColor })] }));
|
|
16
16
|
};
|
|
17
|
+
export const Bucket = ({ ariaLabel, color, size }) => {
|
|
18
|
+
const getColor = useGetColor(color);
|
|
19
|
+
return (_jsx("svg", { viewBox: "0 0 32 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: _jsx("path", { d: "M30.0239 0C31.2114 0 32.1489 1.125 31.9614 2.3125L28.5239 24.5625C28.2114 26.5625 26.5239 28 24.5239 28H7.46143C5.46143 28 3.77393 26.5625 3.52393 24.5625L0.0239303 2.3125C-0.16357 1.125 0.77393 0 2.02393 0H30.0239ZM27.6489 4H4.33643L6.21143 16H25.7739L27.6489 4Z", fill: getColor }) }));
|
|
20
|
+
};
|
|
21
|
+
export const Buckets = ({ ariaLabel, color, size }) => {
|
|
22
|
+
const getColor = useGetColor(color);
|
|
23
|
+
return (_jsx("svg", { viewBox: "0 0 37 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: _jsx("path", { d: "M35.1063 9.33301C35.9032 9.33313 36.5329 10.0834 36.4071 10.875L34.0995 25.708C33.8897 27.0412 32.7571 27.9999 31.4149 28H24.1278C26.417 27.5019 28.221 25.649 28.5985 23.2334V23.2305L29.0975 20H32.2538L33.5126 12H30.3329L30.745 9.33301H35.1063ZM28.0223 0C29.1305 0.000168028 30.0049 1.04998 29.8299 2.1582L26.6219 22.9248C26.3303 24.7915 24.7552 26.1338 22.8885 26.1338H6.96373C5.09707 26.1338 3.52226 24.7915 3.28893 22.9248L0.0223272 2.1582C-0.152604 1.04996 0.721996 0.000113715 1.88854 0H28.0223ZM4.04674 3.7334L5.79674 14.9336H24.0555L25.8055 3.7334H4.04674ZM22.4901 12H17.8671L18.0135 12.9336H15.2987L14.9725 10.875C14.8467 10.0834 15.4756 9.33323 16.3143 9.33301H22.9071L22.4901 12Z", fill: getColor }) }));
|
|
24
|
+
};
|
|
@@ -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,CAC9B,MAAM,EACN,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAc/D,CAAC;AAkBF,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"}
|
|
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
3
3
|
import { useEffect, useState, } from 'react';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
import { Loader } from '../loader/Loader.component';
|
|
6
|
-
import { RemoteGroup, RemoteUser } from './CustomsIcons';
|
|
6
|
+
import { Bucket, Buckets, RemoteGroup, RemoteUser } from './CustomsIcons';
|
|
7
7
|
// Module-level cache for imported icons
|
|
8
8
|
const iconCache = {};
|
|
9
9
|
export const iconTable = {
|
|
@@ -15,7 +15,6 @@ export const iconTable = {
|
|
|
15
15
|
'Node-pdf': 'fas faDatabase',
|
|
16
16
|
'Volume-pdf': 'fas faCompactDisc',
|
|
17
17
|
Network: 'fas faProjectDiagram',
|
|
18
|
-
Bucket: 'fas faGlassWhiskey',
|
|
19
18
|
'Cloud-backend': 'fas faCloud',
|
|
20
19
|
Datacenter: 'fas faWarehouse',
|
|
21
20
|
'Simple-user': 'fas faUser',
|
|
@@ -139,9 +138,13 @@ export const iconTable = {
|
|
|
139
138
|
export const customIcons = {
|
|
140
139
|
'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
|
|
141
140
|
'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteGroup, { ariaLabel: ariaLabel, color: color, size: size })),
|
|
141
|
+
Bucket: ({ 'aria-label': ariaLabel, color, size }) => (_jsx(Bucket, { ariaLabel: ariaLabel, color: color, size: size })),
|
|
142
|
+
Buckets: ({ 'aria-label': ariaLabel, color, size }) => (_jsx(Buckets, { ariaLabel: ariaLabel, color: color, size: size })),
|
|
142
143
|
};
|
|
143
144
|
customIcons['Remote-user'].displayName = 'RemoteUser';
|
|
144
145
|
customIcons['Remote-group'].displayName = 'RemoteGroup';
|
|
146
|
+
customIcons['Bucket'].displayName = 'Bucket';
|
|
147
|
+
customIcons['Buckets'].displayName = 'Buckets';
|
|
145
148
|
const IconStyled = styled(FontAwesomeIcon) `
|
|
146
149
|
${(props) => {
|
|
147
150
|
const theme = props.theme;
|
|
@@ -16,5 +16,5 @@ const InfoMessageContainer = styled.div `
|
|
|
16
16
|
export const InfoMessage = ({ title, content, link, linkText }) => {
|
|
17
17
|
const { containerRef, backgroundColor } = useComputeBackgroundColor();
|
|
18
18
|
const theme = useTheme();
|
|
19
|
-
return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: [linkText || 'More info', " ", _jsx(Icon, { name: "External-link" })] }))] }));
|
|
19
|
+
return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { color: "textPrimary", isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: [linkText || 'More info', " ", _jsx(Icon, { name: "External-link" })] }))] }));
|
|
20
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM1C,eAAO,MAAM,aAAa,0GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB,0GAG5B,CAAC;AACF,eAAO,MAAM,WAAW;mBACP,MAAM,GAAG,MAAM;cACpB,MAAM,GAAG,SAAS;SAkB7B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,kHAkBnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,QAAQ,mHAmCpB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,uBAAuB,kIAqBnC,CAAC;AAEF,eAAO,MAAM,SAAS,yGAKrB,CAAC;AACF,eAAO,MAAM,YAAY,yGAKxB,CAAC;AACF,eAAO,MAAM,cAAc,yGAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,yCAGvC;IACD,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAC/B,mDAgBA,CAAC"}
|
|
@@ -46,7 +46,6 @@ export const HeadRow = styled.div `
|
|
|
46
46
|
overflow: hidden;
|
|
47
47
|
border-bottom: 1px solid
|
|
48
48
|
${(props) => props.theme[props.separationLineVariant]};
|
|
49
|
-
padding-right: ${borderSize};
|
|
50
49
|
padding-left: ${spacing.r16};
|
|
51
50
|
`;
|
|
52
51
|
export const TableRow = styled.div `
|
|
@@ -80,7 +79,7 @@ export const TableRow = styled.div `
|
|
|
80
79
|
if (props.selectedId && props.isSelected) {
|
|
81
80
|
return css `
|
|
82
81
|
background-color: ${props.theme.highlight};
|
|
83
|
-
|
|
82
|
+
box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
|
|
84
83
|
`;
|
|
85
84
|
}
|
|
86
85
|
}}
|
|
@@ -94,7 +93,7 @@ export const TableRowMultiSelectable = styled.div `
|
|
|
94
93
|
if (props.isSelected) {
|
|
95
94
|
return css `
|
|
96
95
|
background-color: ${(props) => props.theme.highlight};
|
|
97
|
-
|
|
96
|
+
box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
|
|
98
97
|
`;
|
|
99
98
|
}
|
|
100
99
|
}}
|
|
@@ -34,7 +34,7 @@ const TooltipOverLayContainer = styled.div `
|
|
|
34
34
|
font-size: ${(props) => (props && props.style && props.style.fontSize) || fontSize.small};
|
|
35
35
|
vertical-align: middle;
|
|
36
36
|
padding: ${spacing.r4} ${spacing.r8};
|
|
37
|
-
max-width:
|
|
37
|
+
max-width: 20rem;
|
|
38
38
|
`;
|
|
39
39
|
const TooltipText = styled.div `
|
|
40
40
|
width: 100%;
|
package/dist/index.d.ts
CHANGED
|
@@ -49,4 +49,5 @@ export { InputList } from './components/inputlist/InputList.component';
|
|
|
49
49
|
export { InlineInput } from './components/inlineinput/InlineInput';
|
|
50
50
|
export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
|
|
51
51
|
export { CoreUITheme } from './style/theme';
|
|
52
|
+
export { formatISONumber } from './utils';
|
|
52
53
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -52,3 +52,4 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
|
|
|
52
52
|
export { InputList } from './components/inputlist/InputList.component';
|
|
53
53
|
export { InlineInput } from './components/inlineinput/InlineInput';
|
|
54
54
|
export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
|
|
55
|
+
export { formatISONumber } from './utils';
|
package/dist/utils.d.ts
CHANGED
|
@@ -6,4 +6,18 @@ export declare const getThemePropSelector: (key: any) => (props: any) => any;
|
|
|
6
6
|
export declare const getThemeVariantSelector: () => (props: any) => any;
|
|
7
7
|
export declare const hex2RGB: (str: string) => [number, number, number];
|
|
8
8
|
export declare const convertRemToPixels: (rem: number) => number;
|
|
9
|
+
type FormatISONumberOptions = {
|
|
10
|
+
decimals?: number;
|
|
11
|
+
compact?: boolean;
|
|
12
|
+
fixedDecimals?: boolean;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Formats a number to ISO 80000-1 format:
|
|
16
|
+
* - Space as thousands separator
|
|
17
|
+
* - Dot as decimal separator
|
|
18
|
+
* - Optional compact notation (10K, 1M, etc.)
|
|
19
|
+
* - Very small values (< 0.001): scientific notation
|
|
20
|
+
*/
|
|
21
|
+
export declare const formatISONumber: (value: number, options?: FormatISONumberOptions) => string;
|
|
22
|
+
export {};
|
|
9
23
|
//# sourceMappingURL=utils.d.ts.map
|
package/dist/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAYA;mCACmC;AACnC,eAAO,MAAM,oBAAoB,mCAGhC,CAAC;AAEF;mCACmC;AACnC,eAAO,MAAM,uBAAuB,2BAInC,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAc5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAS,MAAM,KAAG,MAahD,CAAC"}
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAYA;mCACmC;AACnC,eAAO,MAAM,oBAAoB,mCAGhC,CAAC;AAEF;mCACmC;AACnC,eAAO,MAAM,uBAAuB,2BAInC,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAc5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAS,MAAM,KAAG,MAahD,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,UACnB,MAAM,YACJ,sBAAsB,KAC9B,MAoBF,CAAC"}
|
package/dist/utils.js
CHANGED
|
@@ -44,3 +44,28 @@ export const convertRemToPixels = (rem) => {
|
|
|
44
44
|
}
|
|
45
45
|
return 0;
|
|
46
46
|
};
|
|
47
|
+
/**
|
|
48
|
+
* Formats a number to ISO 80000-1 format:
|
|
49
|
+
* - Space as thousands separator
|
|
50
|
+
* - Dot as decimal separator
|
|
51
|
+
* - Optional compact notation (10K, 1M, etc.)
|
|
52
|
+
* - Very small values (< 0.001): scientific notation
|
|
53
|
+
*/
|
|
54
|
+
export const formatISONumber = (value, options = {}) => {
|
|
55
|
+
const { decimals = 2, compact = false, fixedDecimals = false } = options;
|
|
56
|
+
if (value === 0)
|
|
57
|
+
return '0';
|
|
58
|
+
const absValue = Math.abs(value);
|
|
59
|
+
if (absValue < 0.001) {
|
|
60
|
+
return value.toExponential();
|
|
61
|
+
}
|
|
62
|
+
// ISO format: space as thousands separator, dot as decimal separator
|
|
63
|
+
// With optional compact notation (10K, 1M, etc.)
|
|
64
|
+
return new Intl.NumberFormat('fr-FR', {
|
|
65
|
+
minimumFractionDigits: fixedDecimals ? decimals : undefined,
|
|
66
|
+
maximumFractionDigits: decimals,
|
|
67
|
+
notation: compact ? 'compact' : 'standard',
|
|
68
|
+
})
|
|
69
|
+
.format(value)
|
|
70
|
+
.replace(',', '.');
|
|
71
|
+
};
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useState, useRef } from 'react';
|
|
1
|
+
import { useState, useRef, useMemo, useCallback } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
Bar,
|
|
4
4
|
BarChart as RechartsBarChart,
|
|
@@ -13,7 +13,7 @@ import { Stack } from '../../../spacing';
|
|
|
13
13
|
import { chartColors, ChartColors, fontSize } from '../../../style/theme';
|
|
14
14
|
import { useChartLegend } from '../legend/ChartLegendWrapper';
|
|
15
15
|
import { BarchartTooltip } from './BarchartTooltip';
|
|
16
|
-
import {
|
|
16
|
+
import { formatTickValue, getTicks } from '../common/chartUtils';
|
|
17
17
|
import { useChartData } from './Barchart.utils';
|
|
18
18
|
import {
|
|
19
19
|
ChartHeader,
|
|
@@ -112,15 +112,19 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
|
|
|
112
112
|
} = props;
|
|
113
113
|
|
|
114
114
|
// Create colorSet from ChartLegendWrapper
|
|
115
|
-
const colorSet =
|
|
116
|
-
(
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
115
|
+
const colorSet = useMemo(
|
|
116
|
+
() =>
|
|
117
|
+
bars?.reduce(
|
|
118
|
+
(acc, bar) => {
|
|
119
|
+
const color = getColor(bar.label);
|
|
120
|
+
if (color) {
|
|
121
|
+
acc[bar.label] = color;
|
|
122
|
+
}
|
|
123
|
+
return acc;
|
|
124
|
+
},
|
|
125
|
+
{} as Record<string, ChartColors | string>,
|
|
126
|
+
),
|
|
127
|
+
[bars, getColor],
|
|
124
128
|
);
|
|
125
129
|
|
|
126
130
|
const {
|
|
@@ -139,6 +143,113 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
|
|
|
139
143
|
stackedBarSort,
|
|
140
144
|
);
|
|
141
145
|
const titleWithUnit = unitLabel ? `${title} (${unitLabel})` : title;
|
|
146
|
+
|
|
147
|
+
const tickFormatter = useCallback(
|
|
148
|
+
(value: number) => formatTickValue(value, roundReferenceValue),
|
|
149
|
+
[roundReferenceValue],
|
|
150
|
+
);
|
|
151
|
+
|
|
152
|
+
const renderChartContent = () => {
|
|
153
|
+
if (isError || (!bars && !isLoading)) {
|
|
154
|
+
return <ChartError height={height} />;
|
|
155
|
+
}
|
|
156
|
+
if (isLoading) {
|
|
157
|
+
return <ChartLoading height={height} />;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
return (
|
|
161
|
+
<StyledResponsiveContainer ref={chartRef} width="100%" height={height}>
|
|
162
|
+
<RechartsBarChart
|
|
163
|
+
data={rechartsData}
|
|
164
|
+
accessibilityLayer
|
|
165
|
+
barSize={
|
|
166
|
+
type.type === 'category'
|
|
167
|
+
? type.gap === 0
|
|
168
|
+
? undefined
|
|
169
|
+
: CHART_CONSTANTS.BAR_SIZE
|
|
170
|
+
: CHART_CONSTANTS.BAR_SIZE
|
|
171
|
+
}
|
|
172
|
+
height={height}
|
|
173
|
+
margin={CHART_CONSTANTS.CHART_MARGIN}
|
|
174
|
+
barCategoryGap={type.type === 'category' ? type.gap : undefined}
|
|
175
|
+
>
|
|
176
|
+
<CartesianGrid
|
|
177
|
+
vertical={true}
|
|
178
|
+
horizontal={true}
|
|
179
|
+
verticalPoints={[0]}
|
|
180
|
+
horizontalPoints={[0]}
|
|
181
|
+
stroke={theme.border}
|
|
182
|
+
fill={theme.backgroundLevel4}
|
|
183
|
+
strokeWidth={1}
|
|
184
|
+
/>
|
|
185
|
+
{rechartsBars.map((bar) => {
|
|
186
|
+
const { fill, dataKey, stackId } = bar;
|
|
187
|
+
return (
|
|
188
|
+
<Bar
|
|
189
|
+
key={dataKey}
|
|
190
|
+
dataKey={dataKey}
|
|
191
|
+
fill={chartColors[fill] || fill}
|
|
192
|
+
minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
|
|
193
|
+
stackId={stackId}
|
|
194
|
+
isAnimationActive={false}
|
|
195
|
+
onMouseOver={() => setHoveredValue(dataKey)}
|
|
196
|
+
onMouseLeave={() => setHoveredValue(undefined)}
|
|
197
|
+
/>
|
|
198
|
+
);
|
|
199
|
+
})}
|
|
200
|
+
|
|
201
|
+
<YAxis
|
|
202
|
+
interval={0}
|
|
203
|
+
domain={[0, topDomain]}
|
|
204
|
+
ticks={getTicks(roundReferenceValue, false)}
|
|
205
|
+
tickFormatter={tickFormatter}
|
|
206
|
+
axisLine={{ stroke: theme.border }}
|
|
207
|
+
tick={{
|
|
208
|
+
fill: theme.textSecondary,
|
|
209
|
+
fontSize: fontSize.smaller,
|
|
210
|
+
}}
|
|
211
|
+
orientation="right"
|
|
212
|
+
/>
|
|
213
|
+
|
|
214
|
+
<XAxis
|
|
215
|
+
dataKey="category"
|
|
216
|
+
tick={(props) => (
|
|
217
|
+
<CustomTick
|
|
218
|
+
{...props}
|
|
219
|
+
type={type}
|
|
220
|
+
tickWidthOffset={CHART_CONSTANTS.TICK_WIDTH_OFFSET}
|
|
221
|
+
/>
|
|
222
|
+
)}
|
|
223
|
+
type="category"
|
|
224
|
+
interval={0}
|
|
225
|
+
allowDataOverflow={true}
|
|
226
|
+
tickLine={{
|
|
227
|
+
stroke: theme.border,
|
|
228
|
+
}}
|
|
229
|
+
axisLine={{
|
|
230
|
+
stroke: theme.border,
|
|
231
|
+
}}
|
|
232
|
+
/>
|
|
233
|
+
|
|
234
|
+
<Tooltip
|
|
235
|
+
content={(props: TooltipContentProps<number, string>) => (
|
|
236
|
+
<BarchartTooltip
|
|
237
|
+
type={type}
|
|
238
|
+
colorSet={colorSet}
|
|
239
|
+
tooltipProps={props}
|
|
240
|
+
hoveredValue={hoveredValue}
|
|
241
|
+
tooltip={tooltip}
|
|
242
|
+
unitLabel={unitLabel}
|
|
243
|
+
chartContainerRef={chartRef}
|
|
244
|
+
/>
|
|
245
|
+
)}
|
|
246
|
+
cursor={false}
|
|
247
|
+
/>
|
|
248
|
+
</RechartsBarChart>
|
|
249
|
+
</StyledResponsiveContainer>
|
|
250
|
+
);
|
|
251
|
+
};
|
|
252
|
+
|
|
142
253
|
return (
|
|
143
254
|
<Stack direction="vertical" style={{ gap: '0' }}>
|
|
144
255
|
<ChartHeader
|
|
@@ -147,101 +258,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
|
|
|
147
258
|
helpTooltip={helpTooltip}
|
|
148
259
|
rightTitle={rightTitle}
|
|
149
260
|
/>
|
|
150
|
-
{
|
|
151
|
-
<ChartError height={height} />
|
|
152
|
-
) : isLoading ? (
|
|
153
|
-
<ChartLoading height={height} />
|
|
154
|
-
) : (
|
|
155
|
-
<StyledResponsiveContainer ref={chartRef} width="100%" height={height}>
|
|
156
|
-
<RechartsBarChart
|
|
157
|
-
data={rechartsData}
|
|
158
|
-
accessibilityLayer
|
|
159
|
-
barSize={
|
|
160
|
-
type.type === 'category'
|
|
161
|
-
? type.gap === 0
|
|
162
|
-
? undefined
|
|
163
|
-
: CHART_CONSTANTS.BAR_SIZE
|
|
164
|
-
: CHART_CONSTANTS.BAR_SIZE
|
|
165
|
-
}
|
|
166
|
-
height={height}
|
|
167
|
-
margin={CHART_CONSTANTS.CHART_MARGIN}
|
|
168
|
-
barCategoryGap={type.type === 'category' ? type.gap : undefined}
|
|
169
|
-
>
|
|
170
|
-
<CartesianGrid
|
|
171
|
-
vertical={true}
|
|
172
|
-
horizontal={true}
|
|
173
|
-
verticalPoints={[0]}
|
|
174
|
-
horizontalPoints={[0]}
|
|
175
|
-
stroke={theme.border}
|
|
176
|
-
fill={theme.backgroundLevel4}
|
|
177
|
-
strokeWidth={1}
|
|
178
|
-
/>
|
|
179
|
-
{rechartsBars.map((bar) => {
|
|
180
|
-
const { fill, dataKey, stackId } = bar;
|
|
181
|
-
return (
|
|
182
|
-
<Bar
|
|
183
|
-
key={dataKey}
|
|
184
|
-
dataKey={dataKey}
|
|
185
|
-
fill={chartColors[fill] || fill}
|
|
186
|
-
minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
|
|
187
|
-
stackId={stackId}
|
|
188
|
-
isAnimationActive={false}
|
|
189
|
-
onMouseOver={() => setHoveredValue(dataKey)}
|
|
190
|
-
onMouseLeave={() => setHoveredValue(undefined)}
|
|
191
|
-
/>
|
|
192
|
-
);
|
|
193
|
-
})}
|
|
194
|
-
|
|
195
|
-
<YAxis
|
|
196
|
-
interval={0}
|
|
197
|
-
domain={[0, topDomain]}
|
|
198
|
-
ticks={getTicks(roundReferenceValue, false)}
|
|
199
|
-
tickFormatter={(value) => formatToISONumber(value)}
|
|
200
|
-
axisLine={{ stroke: theme.border }}
|
|
201
|
-
tick={{
|
|
202
|
-
fill: theme.textSecondary,
|
|
203
|
-
fontSize: fontSize.smaller,
|
|
204
|
-
}}
|
|
205
|
-
orientation="right"
|
|
206
|
-
/>
|
|
207
|
-
|
|
208
|
-
<XAxis
|
|
209
|
-
dataKey="category"
|
|
210
|
-
tick={(props) => (
|
|
211
|
-
<CustomTick
|
|
212
|
-
{...props}
|
|
213
|
-
type={type}
|
|
214
|
-
tickWidthOffset={CHART_CONSTANTS.TICK_WIDTH_OFFSET}
|
|
215
|
-
/>
|
|
216
|
-
)}
|
|
217
|
-
type="category"
|
|
218
|
-
interval={0}
|
|
219
|
-
allowDataOverflow={true}
|
|
220
|
-
tickLine={{
|
|
221
|
-
stroke: theme.border,
|
|
222
|
-
}}
|
|
223
|
-
axisLine={{
|
|
224
|
-
stroke: theme.border,
|
|
225
|
-
}}
|
|
226
|
-
/>
|
|
227
|
-
|
|
228
|
-
<Tooltip
|
|
229
|
-
content={(props: TooltipContentProps<number, string>) => (
|
|
230
|
-
<BarchartTooltip
|
|
231
|
-
type={type}
|
|
232
|
-
colorSet={colorSet}
|
|
233
|
-
tooltipProps={props}
|
|
234
|
-
hoveredValue={hoveredValue}
|
|
235
|
-
tooltip={tooltip}
|
|
236
|
-
unitLabel={unitLabel}
|
|
237
|
-
chartContainerRef={chartRef}
|
|
238
|
-
/>
|
|
239
|
-
)}
|
|
240
|
-
cursor={false}
|
|
241
|
-
/>
|
|
242
|
-
</RechartsBarChart>
|
|
243
|
-
</StyledResponsiveContainer>
|
|
244
|
-
)}
|
|
261
|
+
{renderChartContent()}
|
|
245
262
|
</Stack>
|
|
246
263
|
);
|
|
247
264
|
};
|
|
@@ -23,16 +23,16 @@ describe('getRoundReferenceValue', () => {
|
|
|
23
23
|
expect(getRoundReferenceValue(9)).toBe(9); // 9 → 9.9 → 9 (magnitude 1, remainder 0.9)
|
|
24
24
|
|
|
25
25
|
// Larger values get 10% buffer applied
|
|
26
|
-
expect(getRoundReferenceValue(15)).toBe(
|
|
27
|
-
expect(getRoundReferenceValue(35)).toBe(
|
|
26
|
+
expect(getRoundReferenceValue(15)).toBe(15); // 15 → increment 5, remainder 0, return 15
|
|
27
|
+
expect(getRoundReferenceValue(35)).toBe(35); // 35 → increment 5, remainder 0, return 35
|
|
28
28
|
expect(getRoundReferenceValue(75)).toBe(80); // 75 → 82.5, remainder 5, incremented 80 <= 82.5, so round up to 80
|
|
29
|
-
expect(getRoundReferenceValue(150)).toBe(150); //
|
|
30
|
-
expect(getRoundReferenceValue(350)).toBe(350); //
|
|
31
|
-
expect(getRoundReferenceValue(750)).toBe(
|
|
32
|
-
expect(getRoundReferenceValue(1500)).toBe(1500); //
|
|
33
|
-
expect(getRoundReferenceValue(3500)).toBe(3500); //
|
|
34
|
-
expect(getRoundReferenceValue(7500)).toBe(
|
|
35
|
-
expect(getRoundReferenceValue(15000)).toBe(15000); //
|
|
29
|
+
expect(getRoundReferenceValue(150)).toBe(150); // increment 50, remainder 0
|
|
30
|
+
expect(getRoundReferenceValue(350)).toBe(350); // increment 50, remainder 0
|
|
31
|
+
expect(getRoundReferenceValue(750)).toBe(800); // increment 100, remainder 50, rounds up
|
|
32
|
+
expect(getRoundReferenceValue(1500)).toBe(1500); // increment 500, remainder 0
|
|
33
|
+
expect(getRoundReferenceValue(3500)).toBe(3500); // increment 500, remainder 0
|
|
34
|
+
expect(getRoundReferenceValue(7500)).toBe(8000); // increment 1000, remainder 500, rounds up
|
|
35
|
+
expect(getRoundReferenceValue(15000)).toBe(15000); // increment 5000, remainder 0
|
|
36
36
|
});
|
|
37
37
|
});
|
|
38
38
|
|
|
@@ -95,8 +95,23 @@ describe('getUnitLabel', () => {
|
|
|
95
95
|
});
|
|
96
96
|
|
|
97
97
|
describe('addMissingDataPoint', () => {
|
|
98
|
+
it('should generate placeholder timestamps when original data is empty', () => {
|
|
99
|
+
const result = addMissingDataPoint([], 0, 100, 10);
|
|
100
|
+
expect(result).toEqual([
|
|
101
|
+
[0, NAN_STRING],
|
|
102
|
+
[10, NAN_STRING],
|
|
103
|
+
[20, NAN_STRING],
|
|
104
|
+
[30, NAN_STRING],
|
|
105
|
+
[40, NAN_STRING],
|
|
106
|
+
[50, NAN_STRING],
|
|
107
|
+
[60, NAN_STRING],
|
|
108
|
+
[70, NAN_STRING],
|
|
109
|
+
[80, NAN_STRING],
|
|
110
|
+
[90, NAN_STRING],
|
|
111
|
+
]);
|
|
112
|
+
});
|
|
113
|
+
|
|
98
114
|
it('should return empty array for invalid inputs', () => {
|
|
99
|
-
expect(addMissingDataPoint([], 0, 100, 10)).toEqual([]);
|
|
100
115
|
expect(addMissingDataPoint([[10, 5]], undefined, 100, 10)).toEqual([]);
|
|
101
116
|
expect(addMissingDataPoint([[10, 5]], 0, 0, 10)).toEqual([]);
|
|
102
117
|
expect(addMissingDataPoint([[10, 5]], -1, 100, 10)).toEqual([]);
|
|
@@ -264,8 +279,8 @@ describe('normalizeChartDataWithUnits', () => {
|
|
|
264
279
|
);
|
|
265
280
|
|
|
266
281
|
expect(result.unitLabel).toBe('B');
|
|
267
|
-
// 680 / 1 = 680 → getRoundReferenceValue(680) =
|
|
268
|
-
expect(result.topValue).toBe(
|
|
282
|
+
// 680 / 1 = 680 → getRoundReferenceValue(680) = 700 (rounds up since 80 >= 50)
|
|
283
|
+
expect(result.topValue).toBe(700);
|
|
269
284
|
expect(result.rechartsData).toEqual([
|
|
270
285
|
{ category: 'category1', success: 680 },
|
|
271
286
|
]);
|