@scality/core-ui 0.161.0 → 0.163.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/README.md +15 -15
- package/dist/components/accordion/Accordion.component.d.ts +0 -1
- package/dist/components/accordion/Accordion.component.d.ts.map +1 -1
- package/dist/components/barchartv2/Barchart.component.d.ts +53 -0
- package/dist/components/barchartv2/Barchart.component.d.ts.map +1 -0
- package/dist/components/barchartv2/Barchart.component.js +86 -0
- package/dist/components/barchartv2/utils.d.ts +118 -0
- package/dist/components/barchartv2/utils.d.ts.map +1 -0
- package/dist/components/barchartv2/utils.js +337 -0
- package/dist/components/buttonv2/Buttonv2.component.d.ts +1 -1
- package/dist/components/buttonv2/Buttonv2.component.d.ts.map +1 -1
- package/dist/components/chartlegend/ChartLegend.d.ts +8 -0
- package/dist/components/chartlegend/ChartLegend.d.ts.map +1 -0
- package/dist/components/chartlegend/ChartLegend.js +65 -0
- package/dist/components/chartlegend/ChartLegendWrapper.d.ts +17 -0
- package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map +1 -0
- package/dist/components/chartlegend/ChartLegendWrapper.js +50 -0
- package/dist/components/constrainedtext/Constrainedtext.component.d.ts +2 -1
- package/dist/components/constrainedtext/Constrainedtext.component.d.ts.map +1 -1
- package/dist/components/constrainedtext/Constrainedtext.component.js +5 -4
- package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts +0 -1
- package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts.map +1 -1
- package/dist/components/date/FormattedDateTime.d.ts +4 -1
- package/dist/components/date/FormattedDateTime.d.ts.map +1 -1
- package/dist/components/date/FormattedDateTime.js +24 -1
- package/dist/components/date/FormattedDateTime.spec.js +12 -0
- package/dist/components/emptytable/Emptytable.component.d.ts +0 -1
- package/dist/components/emptytable/Emptytable.component.d.ts.map +1 -1
- package/dist/components/emptytable/Emptytable.component.js +1 -0
- package/dist/components/error-pages/ErrorPage401.component.d.ts +0 -1
- package/dist/components/error-pages/ErrorPage401.component.d.ts.map +1 -1
- package/dist/components/error-pages/ErrorPage404.component.d.ts +0 -1
- package/dist/components/error-pages/ErrorPage404.component.d.ts.map +1 -1
- package/dist/components/error-pages/ErrorPage500.component.d.ts +0 -1
- package/dist/components/error-pages/ErrorPage500.component.d.ts.map +1 -1
- package/dist/components/error-pages/ErrorPageAuth.component.d.ts.map +1 -1
- package/dist/components/form/Form.component.d.ts +2 -2
- package/dist/components/form/Form.component.d.ts.map +1 -1
- package/dist/components/icon/Icon.component.d.ts +5 -5
- package/dist/components/icon/Icon.component.d.ts.map +1 -1
- package/dist/components/icon/Icon.component.js +33 -31
- package/dist/components/infomessage/InfoMessage.component.d.ts +0 -1
- package/dist/components/infomessage/InfoMessage.component.d.ts.map +1 -1
- package/dist/components/lateralnavbarlayout/LateralNavbarLayout.component.d.ts.map +1 -1
- package/dist/components/layout/Layout.component.d.ts.map +1 -1
- package/dist/components/layout/v2/panels.d.ts.map +1 -1
- package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts +33 -0
- package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map +1 -0
- package/dist/components/linetimeseriechart/linetimeseriechart.component.js +249 -0
- package/dist/components/modal/Modal.component.js +2 -2
- package/dist/components/navbar/Navbar.component.js +2 -2
- package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts +0 -1
- package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map +1 -1
- package/dist/components/searchinput/SearchInput.component.d.ts +1 -2
- package/dist/components/searchinput/SearchInput.component.d.ts.map +1 -1
- package/dist/components/selectv2/Selectv2.component.d.ts +5 -5
- package/dist/components/selectv2/Selectv2.component.d.ts.map +1 -1
- package/dist/components/selectv2/Selectv2.component.js +11 -6
- package/dist/components/statuswrapper/Statuswrapper.component.d.ts +0 -1
- package/dist/components/statuswrapper/Statuswrapper.component.d.ts.map +1 -1
- package/dist/components/steppers/Stepper.component.d.ts.map +1 -1
- package/dist/components/steppers/Stepper.component.js +9 -8
- package/dist/components/tablev2/Search.js +2 -2
- package/dist/components/tablev2/SingleSelectableContent.d.ts +1 -2
- package/dist/components/tablev2/SingleSelectableContent.d.ts.map +1 -1
- package/dist/components/tablev2/TableCommon.d.ts +2 -2
- package/dist/components/tablev2/TableCommon.d.ts.map +1 -1
- package/dist/components/tablev2/TableSync.d.ts +8 -0
- package/dist/components/tablev2/TableSync.d.ts.map +1 -0
- package/dist/components/tablev2/TableSync.js +11 -0
- package/dist/components/tablev2/Tablev2.component.d.ts +2 -1
- package/dist/components/tablev2/Tablev2.component.d.ts.map +1 -1
- package/dist/components/tablev2/Tablev2.component.js +10 -9
- package/dist/components/tabsv2/ScrollButton.d.ts +1 -2
- package/dist/components/tabsv2/ScrollButton.d.ts.map +1 -1
- package/dist/components/tabsv2/ScrollButton.js +2 -2
- package/dist/components/tabsv2/Tabsv2.component.d.ts +2 -2
- package/dist/components/tabsv2/Tabsv2.component.d.ts.map +1 -1
- package/dist/components/tabsv2/Tabsv2.component.js +2 -2
- package/dist/components/text/Text.component.d.ts +0 -1
- package/dist/components/text/Text.component.d.ts.map +1 -1
- package/dist/components/textarea/TextArea.component.d.ts +3 -3
- package/dist/components/textarea/TextArea.component.d.ts.map +1 -1
- package/dist/components/textbadge/TextBadge.component.d.ts +0 -1
- package/dist/components/textbadge/TextBadge.component.d.ts.map +1 -1
- package/dist/components/toast/Toast.component.d.ts +1 -1
- package/dist/components/toast/Toast.component.d.ts.map +1 -1
- package/dist/components/toast/ToastProvider.d.ts.map +1 -1
- package/dist/components/toast/ToastProvider.js +4 -5
- package/dist/components/vegachartv2/SyncedCursorCharts.d.ts +1 -2
- package/dist/components/vegachartv2/SyncedCursorCharts.d.ts.map +1 -1
- package/dist/components/vegachartv2/SyncedCursorCharts.js +3 -5
- package/dist/components/vegachartv2/VegaChartV2.component.d.ts +1 -2
- package/dist/components/vegachartv2/VegaChartV2.component.d.ts.map +1 -1
- package/dist/components/vegachartv2/VegaChartV2.component.js +2 -2
- package/dist/icons/branding.d.ts.map +1 -1
- package/dist/icons/scality-loading.d.ts.map +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/next.d.ts +2 -0
- package/dist/next.d.ts.map +1 -1
- package/dist/next.js +2 -0
- package/dist/style/theme.d.ts +20 -0
- package/dist/style/theme.d.ts.map +1 -1
- package/dist/style/theme.js +46 -1
- package/package.json +7 -4
- package/setupTests.js +6 -0
- package/src/lib/components/accordion/Accordion.component.tsx +1 -1
- package/src/lib/components/accordion/Accordion.test.tsx +7 -15
- package/src/lib/components/barchartv2/Barchart.component.test.tsx +364 -0
- package/src/lib/components/barchartv2/Barchart.component.tsx +321 -0
- package/src/lib/components/barchartv2/utils.test.ts +899 -0
- package/src/lib/components/barchartv2/utils.ts +534 -0
- package/src/lib/components/buttonv2/Buttonv2.component.tsx +1 -1
- package/src/lib/components/chartlegend/ChartLegend.tsx +113 -0
- package/src/lib/components/chartlegend/ChartLegendWrapper.tsx +85 -0
- package/src/lib/components/constrainedtext/Constrainedtext.component.tsx +22 -3
- package/src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx +0 -1
- package/src/lib/components/date/FormattedDateTime.spec.tsx +24 -0
- package/src/lib/components/date/FormattedDateTime.tsx +42 -2
- package/src/lib/components/emptytable/Emptytable.component.tsx +1 -1
- package/src/lib/components/error-pages/ErrorPage401.component.tsx +0 -1
- package/src/lib/components/error-pages/ErrorPage404.component.tsx +0 -1
- package/src/lib/components/error-pages/ErrorPage500.component.tsx +0 -1
- package/src/lib/components/error-pages/ErrorPageAuth.component.tsx +0 -1
- package/src/lib/components/form/Form.component.tsx +1 -1
- package/src/lib/components/healthselectorv2/HealthSelector.component.test.tsx +3 -3
- package/src/lib/components/icon/Icon.component.tsx +48 -60
- package/src/lib/components/infomessage/InfoMessage.component.tsx +0 -1
- package/src/lib/components/inlineinput/InlineInput.test.tsx +22 -19
- package/src/lib/components/inputlist/InputList.test.tsx +21 -19
- package/src/lib/components/lateralnavbarlayout/LateralNavbarLayout.component.tsx +0 -1
- package/src/lib/components/layout/Layout.component.tsx +0 -1
- package/src/lib/components/layout/v2/panels.tsx +1 -1
- package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx +502 -0
- package/src/lib/components/modal/Modal.component.tsx +2 -2
- package/src/lib/components/navbar/Navbar.component.tsx +2 -2
- package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx +0 -1
- package/src/lib/components/searchinput/SearchInput.component.tsx +0 -1
- package/src/lib/components/searchinput/SearchInput.test.tsx +3 -7
- package/src/lib/components/selectv2/Selectv2.component.tsx +24 -14
- package/src/lib/components/selectv2/selectv2.test.tsx +62 -57
- package/src/lib/components/sidebar/Sidebar.component.tsx +1 -1
- package/src/lib/components/statuswrapper/Statuswrapper.component.tsx +0 -1
- package/src/lib/components/steppers/Stepper.component.tsx +10 -8
- package/src/lib/components/tablev2/Search.tsx +2 -2
- package/src/lib/components/tablev2/SingleSelectableContent.tsx +2 -2
- package/src/lib/components/tablev2/TableCommon.tsx +1 -1
- package/src/lib/components/tablev2/TableSync.test.tsx +28 -0
- package/src/lib/components/tablev2/TableSync.tsx +36 -0
- package/src/lib/components/tablev2/Tablev2.component.tsx +11 -9
- package/src/lib/components/tablev2/Tablev2.test.tsx +36 -37
- package/src/lib/components/tabsv2/ScrollButton.tsx +2 -2
- package/src/lib/components/tabsv2/Tabsv2.component.tsx +6 -6
- package/src/lib/components/text/Text.component.tsx +4 -5
- package/src/lib/components/textarea/TextArea.component.tsx +3 -2
- package/src/lib/components/textbadge/TextBadge.component.tsx +0 -1
- package/src/lib/components/toast/Toast.component.tsx +1 -1
- package/src/lib/components/toast/ToastProvider.tsx +17 -7
- package/src/lib/components/vegachartv2/SyncedCursorCharts.tsx +5 -7
- package/src/lib/components/vegachartv2/VegaChartV2.component.tsx +2 -2
- package/src/lib/icons/branding.tsx +0 -2
- package/src/lib/icons/scality-loading.tsx +0 -2
- package/src/lib/index.ts +1 -0
- package/src/lib/next.ts +6 -0
- package/src/lib/style/theme.ts +53 -1
- package/stories/BarChart/barchart.stories.tsx +822 -0
- package/stories/areachart.stories.tsx +0 -1
- package/stories/format.mdx +4 -2
- package/stories/linetimeseriechart.stories.tsx +485 -0
- package/stories/tablev2.stories.tsx +41 -0
- package/tsconfig.json +5 -2
package/README.md
CHANGED
|
@@ -8,13 +8,13 @@ Core-UI is a component library containing all components, layouts, icons and the
|
|
|
8
8
|
|
|
9
9
|
#### Manual installation
|
|
10
10
|
|
|
11
|
-
- Add
|
|
11
|
+
- Add `@scality/core-ui` in the `package.json`'s dependencies of your project.
|
|
12
12
|
|
|
13
13
|
```json
|
|
14
14
|
"@scality/core-ui": "0.115.0",
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
-
|
|
17
|
+
- `@scality/core-ui` requires the peerDependencies below. Make sure that you have them in the `package.json`'s dependencies.
|
|
18
18
|
|
|
19
19
|
```json
|
|
20
20
|
"@fortawesome/fontawesome-free": "^5.10.2",
|
|
@@ -53,7 +53,7 @@ npm install
|
|
|
53
53
|
|
|
54
54
|
### Usage
|
|
55
55
|
|
|
56
|
-
- Import a component from
|
|
56
|
+
- Import a component from `@scality/core-ui/dist/next'` or `@scality/core-ui`
|
|
57
57
|
|
|
58
58
|
- Use props to change its appearance and behaviour
|
|
59
59
|
|
|
@@ -61,8 +61,12 @@ npm install
|
|
|
61
61
|
import { Button } from '@scality/core-ui/dist/next';
|
|
62
62
|
import { Icon } from '@scality/core-ui';
|
|
63
63
|
|
|
64
|
-
<Button
|
|
65
|
-
|
|
64
|
+
<Button
|
|
65
|
+
variant="primary"
|
|
66
|
+
onClick={handleClick}
|
|
67
|
+
label="Save"
|
|
68
|
+
icon={<Icon name="Save" />}
|
|
69
|
+
/>;
|
|
66
70
|
```
|
|
67
71
|
|
|
68
72
|
To learn more about the available components, you can read the [documentation](https://scality.github.io/core-ui/)
|
|
@@ -73,17 +77,15 @@ Components are themable by using the [styled-components theming concept](https:/
|
|
|
73
77
|
Wrap your app in a `ThemeProvider` and provide it a theme :
|
|
74
78
|
|
|
75
79
|
```jsx
|
|
76
|
-
|
|
77
80
|
import { ThemeProvider } from 'styled-components';
|
|
78
81
|
import { Layout } from '@scality/core-ui';
|
|
79
82
|
import { coreUIAvailableThemes as themes } from '@scality/core-ui/dist/style/theme';
|
|
80
83
|
|
|
81
84
|
<ThemeProvider theme={themes.darkRebrand}>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</ThemeProvider
|
|
86
|
-
|
|
85
|
+
<Layout sidebar={sidebar} navbar={navbar}>
|
|
86
|
+
...
|
|
87
|
+
</Layout>
|
|
88
|
+
</ThemeProvider>;
|
|
87
89
|
```
|
|
88
90
|
|
|
89
91
|
There is 2 default theme available in Core-UI : you can find them [here](https://github.com/scality/core-ui/pull/684#:~:text=https%3A//github.com/scality/core%2Dui/blob/development/1.0/src/lib/style/theme.ts)
|
|
@@ -93,7 +95,6 @@ There is 2 default theme available in Core-UI : you can find them [here](https:/
|
|
|
93
95
|
You can also modify or create a new theme. In this case make sure to respect this type :
|
|
94
96
|
|
|
95
97
|
```tsx
|
|
96
|
-
|
|
97
98
|
export type CoreUITheme = {
|
|
98
99
|
statusHealthy: string;
|
|
99
100
|
statusHealthyRGB: string;
|
|
@@ -119,7 +120,6 @@ export type CoreUITheme = {
|
|
|
119
120
|
textReverse: string;
|
|
120
121
|
textLink: string;
|
|
121
122
|
};
|
|
122
|
-
|
|
123
123
|
```
|
|
124
124
|
|
|
125
125
|
<br />
|
|
@@ -272,7 +272,7 @@ git push origin <branch-name>
|
|
|
272
272
|
|
|
273
273
|
then create a `Pull Request`.
|
|
274
274
|
Pull request needs to be approved by at least one reviewer.
|
|
275
|
-
After your PR is approved you can comment `/approve`
|
|
275
|
+
After your PR is approved you can comment `/approve`
|
|
276
276
|
|
|
277
277
|
### Release
|
|
278
278
|
|
|
@@ -282,7 +282,7 @@ In the Core-UI repo, follow these steps :
|
|
|
282
282
|
1. Go on `Releases` then `Draft a new release`
|
|
283
283
|
2. In the select menu `Choose a tag` : Create a new tag (the current tag increment by 1).
|
|
284
284
|
3. You can now `Generate release notes` : it will add all the PR infos since the last release. \
|
|
285
|
-
You can add details if necessary.
|
|
285
|
+
You can add details if necessary.
|
|
286
286
|
4. `Publish release`
|
|
287
287
|
5. It will create a PR that need to be approved.
|
|
288
288
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgDF,eAAO,MAAM,SAAS,sDAOnB,cAAc,4CA4DhB,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { UnitRange } from './utils';
|
|
2
|
+
export type TimeType = {
|
|
3
|
+
type: 'time';
|
|
4
|
+
timeRange: {
|
|
5
|
+
startDate: Date;
|
|
6
|
+
endDate: Date;
|
|
7
|
+
interval: number;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export type Point = {
|
|
11
|
+
key: string | number;
|
|
12
|
+
values: {
|
|
13
|
+
label: string;
|
|
14
|
+
value: number;
|
|
15
|
+
}[];
|
|
16
|
+
};
|
|
17
|
+
export type BarchartBars = readonly {
|
|
18
|
+
readonly label: string;
|
|
19
|
+
/**
|
|
20
|
+
* When using a time type, the data should be an array of [Date, value]
|
|
21
|
+
* so use Date instead of timestamp for transformation data in format fn
|
|
22
|
+
*/
|
|
23
|
+
readonly data: readonly (readonly [string | Date, number | string])[];
|
|
24
|
+
}[];
|
|
25
|
+
export type BarchartTooltipFn<T extends BarchartBars> = (currentPoint: {
|
|
26
|
+
category: string | number;
|
|
27
|
+
values: {
|
|
28
|
+
label: T[number]['label'];
|
|
29
|
+
value: number;
|
|
30
|
+
isHovered: boolean;
|
|
31
|
+
}[];
|
|
32
|
+
}) => React.ReactNode;
|
|
33
|
+
export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['label'], number> & {
|
|
34
|
+
category: string | number;
|
|
35
|
+
}, pointB: Record<T[number]['label'], number> & {
|
|
36
|
+
category: string | number;
|
|
37
|
+
}) => 1 | -1 | 0;
|
|
38
|
+
export type BarchartProps<T extends BarchartBars> = {
|
|
39
|
+
type: 'category' | TimeType;
|
|
40
|
+
bars: T;
|
|
41
|
+
tooltip?: BarchartTooltipFn<T>;
|
|
42
|
+
defaultSort?: BarchartSortFn<T>;
|
|
43
|
+
unitRange?: UnitRange;
|
|
44
|
+
helpTooltip?: string;
|
|
45
|
+
stacked?: boolean;
|
|
46
|
+
title?: string;
|
|
47
|
+
secondaryTitle?: string;
|
|
48
|
+
rightTitle?: React.ReactNode;
|
|
49
|
+
height?: number;
|
|
50
|
+
isLoading?: boolean;
|
|
51
|
+
};
|
|
52
|
+
export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
//# sourceMappingURL=Barchart.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAwB,SAAS,EAAgB,MAAM,SAAS,CAAC;AAkBxE,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC;CACvE,EAAE,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,YAAY,EAAE;IACrE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAC5E,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,YAAY,IAAI,CACnD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC1E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KACvE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,IAAI;IAClD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAiHF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CA4HvE,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
|
|
4
|
+
import styled, { useTheme } from 'styled-components';
|
|
5
|
+
import { spacing, Stack, Wrap } from '../../spacing';
|
|
6
|
+
import { chartColors, fontSize } from '../../style/theme';
|
|
7
|
+
import { Box } from '../box/Box';
|
|
8
|
+
import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
|
|
9
|
+
import { IconHelp } from '../iconhelper/IconHelper';
|
|
10
|
+
import { Loader } from '../loader/Loader.component';
|
|
11
|
+
import { Text } from '../text/Text.component';
|
|
12
|
+
import { renderTooltipContent, useChartData } from './utils';
|
|
13
|
+
import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
|
|
14
|
+
const CHART_CONSTANTS = {
|
|
15
|
+
TICK_WIDTH_OFFSET: 5,
|
|
16
|
+
BAR_SIZE: 12,
|
|
17
|
+
MIN_POINT_SIZE: 1,
|
|
18
|
+
DEFAULT_HEIGHT: 200,
|
|
19
|
+
CHART_MARGIN: {
|
|
20
|
+
left: 0,
|
|
21
|
+
right: 0,
|
|
22
|
+
top: 0,
|
|
23
|
+
bottom: 0,
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
/* ---------------------------------- COMPONENTS ---------------------------------- */
|
|
27
|
+
const CustomTick = ({ x, y, payload, visibleTicksCount, width, }) => {
|
|
28
|
+
const theme = useTheme();
|
|
29
|
+
const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
|
|
30
|
+
const centerX = x - tickWidth / 2;
|
|
31
|
+
return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { text: _jsx(Text, { variant: "Smaller", color: "textSecondary", children: String(payload.value) }), centered: true, tooltipStyle: {
|
|
32
|
+
backgroundColor: theme.backgroundLevel1,
|
|
33
|
+
padding: spacing.r10,
|
|
34
|
+
borderRadius: spacing.r8,
|
|
35
|
+
border: `1px solid ${theme.border}`,
|
|
36
|
+
position: 'absolute',
|
|
37
|
+
} }) }));
|
|
38
|
+
};
|
|
39
|
+
const StyledResponsiveContainer = styled(ResponsiveContainer) `
|
|
40
|
+
// Avoid tooltip over constrained text to be cut off
|
|
41
|
+
& .recharts-surface {
|
|
42
|
+
overflow: visible;
|
|
43
|
+
}
|
|
44
|
+
`;
|
|
45
|
+
const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
|
|
46
|
+
return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && (_jsx(IconHelp, { tooltipMessage: helpTooltip, title: helpTooltip })), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
|
|
47
|
+
marginLeft: spacing.r8,
|
|
48
|
+
}, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
|
|
49
|
+
};
|
|
50
|
+
const Loading = ({ height }) => {
|
|
51
|
+
return (_jsx(Box, { height: height, style: {
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
justifyContent: 'center',
|
|
54
|
+
display: 'flex',
|
|
55
|
+
}, children: _jsx(Loader, { size: "larger", children: _jsx(Text, { children: "Loading Chart Data..." }) }) }));
|
|
56
|
+
};
|
|
57
|
+
/* ---------------------------------- MAIN COMPONENT ---------------------------------- */
|
|
58
|
+
export const Barchart = (props) => {
|
|
59
|
+
const theme = useTheme();
|
|
60
|
+
const { getColor } = useChartLegend();
|
|
61
|
+
const [hoveredValue, setHoveredValue] = useState();
|
|
62
|
+
const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', unitRange, stacked, defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, } = props;
|
|
63
|
+
// Create colorSet from ChartLegendWrapper
|
|
64
|
+
const colorSet = bars.reduce((acc, bar) => {
|
|
65
|
+
const color = getColor(bar.label);
|
|
66
|
+
if (color) {
|
|
67
|
+
acc[bar.label] = color;
|
|
68
|
+
}
|
|
69
|
+
return acc;
|
|
70
|
+
}, {});
|
|
71
|
+
const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
|
|
72
|
+
return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
|
|
73
|
+
const { fill, dataKey, stackId } = bar;
|
|
74
|
+
return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
|
|
75
|
+
}), _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
|
|
76
|
+
, axisLine: false, tick: {
|
|
77
|
+
fill: theme.textSecondary,
|
|
78
|
+
fontSize: fontSize.smaller,
|
|
79
|
+
}, tickLine: false, label: {
|
|
80
|
+
fill: theme.textSecondary,
|
|
81
|
+
}, orientation: "right" }), _jsx(ReferenceLine, { y: roundReferenceValue, fill: theme.border, strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
|
|
82
|
+
stroke: theme.textSecondary,
|
|
83
|
+
}, axisLine: {
|
|
84
|
+
stroke: theme.textSecondary,
|
|
85
|
+
} }), _jsx(Tooltip, { content: (props) => renderTooltipContent(props, tooltip, hoveredValue), cursor: false })] }) }))] }));
|
|
86
|
+
};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { BarchartProps, BarchartBars, BarchartTooltipFn } from './Barchart.component';
|
|
2
|
+
import { TooltipContentProps } from 'recharts';
|
|
3
|
+
import { ChartColors } from '../../style/theme';
|
|
4
|
+
export declare const getRoundReferenceValue: (value: number) => number;
|
|
5
|
+
export declare const getMaxBarValue: (data: {
|
|
6
|
+
[key: string]: string | number;
|
|
7
|
+
}[], stacked?: boolean) => number;
|
|
8
|
+
/**
|
|
9
|
+
* Transforms time-based data into chart format
|
|
10
|
+
*/
|
|
11
|
+
export declare const transformTimeData: <T extends BarchartBars>(bars: T, type: {
|
|
12
|
+
type: "time";
|
|
13
|
+
timeRange: {
|
|
14
|
+
startDate: Date;
|
|
15
|
+
endDate: Date;
|
|
16
|
+
interval: number;
|
|
17
|
+
};
|
|
18
|
+
}, barDataKeys: string[]) => {
|
|
19
|
+
[key: string]: string | number;
|
|
20
|
+
}[];
|
|
21
|
+
/**
|
|
22
|
+
* Transforms category-based data into chart format
|
|
23
|
+
*/
|
|
24
|
+
export declare const transformCategoryData: <T extends BarchartBars>(bars: T, barDataKeys: string[]) => {
|
|
25
|
+
[key: string]: string | number;
|
|
26
|
+
}[];
|
|
27
|
+
/**
|
|
28
|
+
* Applies custom sorting to chart data
|
|
29
|
+
*/
|
|
30
|
+
export declare const applySortingToData: <T extends BarchartBars>(data: {
|
|
31
|
+
[key: string]: string | number;
|
|
32
|
+
}[], barDataKeys: string[], defaultSort: BarchartProps<T>["defaultSort"]) => {
|
|
33
|
+
[key: string]: string | number;
|
|
34
|
+
}[];
|
|
35
|
+
/**
|
|
36
|
+
* Converts prometheus data to recharts data format
|
|
37
|
+
* @param bars - The bars to convert
|
|
38
|
+
* @param type - The chart type (category or time)
|
|
39
|
+
* @returns Recharts data format
|
|
40
|
+
*/
|
|
41
|
+
export declare const formatPrometheusDataToRechartsDataAndBars: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"]) => {
|
|
42
|
+
data: {
|
|
43
|
+
[key: string]: string | number;
|
|
44
|
+
}[];
|
|
45
|
+
rechartsBars: {
|
|
46
|
+
dataKey: string;
|
|
47
|
+
fill: string;
|
|
48
|
+
stackId?: string;
|
|
49
|
+
}[];
|
|
50
|
+
};
|
|
51
|
+
export type UnitRange = {
|
|
52
|
+
threshold: number;
|
|
53
|
+
label: string;
|
|
54
|
+
}[];
|
|
55
|
+
export declare const computeUnitLabelAndRoundReferenceValue: (data: any, maxValue: number, unitRange: UnitRange | undefined) => {
|
|
56
|
+
unitLabel: string;
|
|
57
|
+
roundReferenceValue: number;
|
|
58
|
+
rechartsData: any;
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Return the unit label base on the current dataset, and the valueBase which is used to convert the data
|
|
62
|
+
* @param {any} unitRange
|
|
63
|
+
* @param {any} maxValue the maximum value among the data set
|
|
64
|
+
* @returns {any}
|
|
65
|
+
*/
|
|
66
|
+
export declare function getUnitLabel(unitRange: {
|
|
67
|
+
threshold: number;
|
|
68
|
+
label: string;
|
|
69
|
+
}[], maxValue: number): {
|
|
70
|
+
valueBase: number;
|
|
71
|
+
unitLabel: string;
|
|
72
|
+
};
|
|
73
|
+
export declare const sortStackedBars: (rechartsBars: {
|
|
74
|
+
dataKey: string;
|
|
75
|
+
fill: string;
|
|
76
|
+
stackId?: string;
|
|
77
|
+
}[], data: {
|
|
78
|
+
[key: string]: string | number;
|
|
79
|
+
}[], stacked?: boolean) => {
|
|
80
|
+
dataKey: string;
|
|
81
|
+
fill: string;
|
|
82
|
+
stackId?: string;
|
|
83
|
+
}[];
|
|
84
|
+
export declare const renderTooltipContent: <T extends BarchartBars>(props: TooltipContentProps<number, string>, tooltip: BarchartTooltipFn<T> | undefined, hoveredValue: string | undefined) => import("react").ReactNode;
|
|
85
|
+
/**
|
|
86
|
+
* Filters both chart data and recharts bars to only include selected resources from legend
|
|
87
|
+
* @param data - Array of chart data objects with category and resource values
|
|
88
|
+
* @param rechartsBars - Array of recharts bar configurations
|
|
89
|
+
* @param selectedResources - Array of selected resource names
|
|
90
|
+
* @returns Object containing filtered data and recharts bars
|
|
91
|
+
*/
|
|
92
|
+
export declare const filterChartDataAndBarsByLegendSelection: (data: {
|
|
93
|
+
[key: string]: string | number;
|
|
94
|
+
}[], rechartsBars: {
|
|
95
|
+
dataKey: string;
|
|
96
|
+
fill: string;
|
|
97
|
+
stackId?: string;
|
|
98
|
+
}[], selectedResources: string[]) => {
|
|
99
|
+
filteredData: {
|
|
100
|
+
[key: string]: string | number;
|
|
101
|
+
}[];
|
|
102
|
+
filteredRechartsBars: {
|
|
103
|
+
dataKey: string;
|
|
104
|
+
fill: string;
|
|
105
|
+
stackId?: string;
|
|
106
|
+
}[];
|
|
107
|
+
};
|
|
108
|
+
export declare const useChartData: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"], unitRange?: UnitRange) => {
|
|
109
|
+
rechartsBars: {
|
|
110
|
+
dataKey: string;
|
|
111
|
+
fill: string;
|
|
112
|
+
stackId?: string;
|
|
113
|
+
}[];
|
|
114
|
+
unitLabel: string;
|
|
115
|
+
roundReferenceValue: number;
|
|
116
|
+
rechartsData: any;
|
|
117
|
+
};
|
|
118
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
|