@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.
Files changed (173) hide show
  1. package/README.md +15 -15
  2. package/dist/components/accordion/Accordion.component.d.ts +0 -1
  3. package/dist/components/accordion/Accordion.component.d.ts.map +1 -1
  4. package/dist/components/barchartv2/Barchart.component.d.ts +53 -0
  5. package/dist/components/barchartv2/Barchart.component.d.ts.map +1 -0
  6. package/dist/components/barchartv2/Barchart.component.js +86 -0
  7. package/dist/components/barchartv2/utils.d.ts +118 -0
  8. package/dist/components/barchartv2/utils.d.ts.map +1 -0
  9. package/dist/components/barchartv2/utils.js +337 -0
  10. package/dist/components/buttonv2/Buttonv2.component.d.ts +1 -1
  11. package/dist/components/buttonv2/Buttonv2.component.d.ts.map +1 -1
  12. package/dist/components/chartlegend/ChartLegend.d.ts +8 -0
  13. package/dist/components/chartlegend/ChartLegend.d.ts.map +1 -0
  14. package/dist/components/chartlegend/ChartLegend.js +65 -0
  15. package/dist/components/chartlegend/ChartLegendWrapper.d.ts +17 -0
  16. package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map +1 -0
  17. package/dist/components/chartlegend/ChartLegendWrapper.js +50 -0
  18. package/dist/components/constrainedtext/Constrainedtext.component.d.ts +2 -1
  19. package/dist/components/constrainedtext/Constrainedtext.component.d.ts.map +1 -1
  20. package/dist/components/constrainedtext/Constrainedtext.component.js +5 -4
  21. package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts +0 -1
  22. package/dist/components/coreuithemeprovider/CoreUiThemeProvider.d.ts.map +1 -1
  23. package/dist/components/date/FormattedDateTime.d.ts +4 -1
  24. package/dist/components/date/FormattedDateTime.d.ts.map +1 -1
  25. package/dist/components/date/FormattedDateTime.js +24 -1
  26. package/dist/components/date/FormattedDateTime.spec.js +12 -0
  27. package/dist/components/emptytable/Emptytable.component.d.ts +0 -1
  28. package/dist/components/emptytable/Emptytable.component.d.ts.map +1 -1
  29. package/dist/components/emptytable/Emptytable.component.js +1 -0
  30. package/dist/components/error-pages/ErrorPage401.component.d.ts +0 -1
  31. package/dist/components/error-pages/ErrorPage401.component.d.ts.map +1 -1
  32. package/dist/components/error-pages/ErrorPage404.component.d.ts +0 -1
  33. package/dist/components/error-pages/ErrorPage404.component.d.ts.map +1 -1
  34. package/dist/components/error-pages/ErrorPage500.component.d.ts +0 -1
  35. package/dist/components/error-pages/ErrorPage500.component.d.ts.map +1 -1
  36. package/dist/components/error-pages/ErrorPageAuth.component.d.ts.map +1 -1
  37. package/dist/components/form/Form.component.d.ts +2 -2
  38. package/dist/components/form/Form.component.d.ts.map +1 -1
  39. package/dist/components/icon/Icon.component.d.ts +5 -5
  40. package/dist/components/icon/Icon.component.d.ts.map +1 -1
  41. package/dist/components/icon/Icon.component.js +33 -31
  42. package/dist/components/infomessage/InfoMessage.component.d.ts +0 -1
  43. package/dist/components/infomessage/InfoMessage.component.d.ts.map +1 -1
  44. package/dist/components/lateralnavbarlayout/LateralNavbarLayout.component.d.ts.map +1 -1
  45. package/dist/components/layout/Layout.component.d.ts.map +1 -1
  46. package/dist/components/layout/v2/panels.d.ts.map +1 -1
  47. package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts +33 -0
  48. package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map +1 -0
  49. package/dist/components/linetimeseriechart/linetimeseriechart.component.js +249 -0
  50. package/dist/components/modal/Modal.component.js +2 -2
  51. package/dist/components/navbar/Navbar.component.js +2 -2
  52. package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts +0 -1
  53. package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map +1 -1
  54. package/dist/components/searchinput/SearchInput.component.d.ts +1 -2
  55. package/dist/components/searchinput/SearchInput.component.d.ts.map +1 -1
  56. package/dist/components/selectv2/Selectv2.component.d.ts +5 -5
  57. package/dist/components/selectv2/Selectv2.component.d.ts.map +1 -1
  58. package/dist/components/selectv2/Selectv2.component.js +11 -6
  59. package/dist/components/statuswrapper/Statuswrapper.component.d.ts +0 -1
  60. package/dist/components/statuswrapper/Statuswrapper.component.d.ts.map +1 -1
  61. package/dist/components/steppers/Stepper.component.d.ts.map +1 -1
  62. package/dist/components/steppers/Stepper.component.js +9 -8
  63. package/dist/components/tablev2/Search.js +2 -2
  64. package/dist/components/tablev2/SingleSelectableContent.d.ts +1 -2
  65. package/dist/components/tablev2/SingleSelectableContent.d.ts.map +1 -1
  66. package/dist/components/tablev2/TableCommon.d.ts +2 -2
  67. package/dist/components/tablev2/TableCommon.d.ts.map +1 -1
  68. package/dist/components/tablev2/TableSync.d.ts +8 -0
  69. package/dist/components/tablev2/TableSync.d.ts.map +1 -0
  70. package/dist/components/tablev2/TableSync.js +11 -0
  71. package/dist/components/tablev2/Tablev2.component.d.ts +2 -1
  72. package/dist/components/tablev2/Tablev2.component.d.ts.map +1 -1
  73. package/dist/components/tablev2/Tablev2.component.js +10 -9
  74. package/dist/components/tabsv2/ScrollButton.d.ts +1 -2
  75. package/dist/components/tabsv2/ScrollButton.d.ts.map +1 -1
  76. package/dist/components/tabsv2/ScrollButton.js +2 -2
  77. package/dist/components/tabsv2/Tabsv2.component.d.ts +2 -2
  78. package/dist/components/tabsv2/Tabsv2.component.d.ts.map +1 -1
  79. package/dist/components/tabsv2/Tabsv2.component.js +2 -2
  80. package/dist/components/text/Text.component.d.ts +0 -1
  81. package/dist/components/text/Text.component.d.ts.map +1 -1
  82. package/dist/components/textarea/TextArea.component.d.ts +3 -3
  83. package/dist/components/textarea/TextArea.component.d.ts.map +1 -1
  84. package/dist/components/textbadge/TextBadge.component.d.ts +0 -1
  85. package/dist/components/textbadge/TextBadge.component.d.ts.map +1 -1
  86. package/dist/components/toast/Toast.component.d.ts +1 -1
  87. package/dist/components/toast/Toast.component.d.ts.map +1 -1
  88. package/dist/components/toast/ToastProvider.d.ts.map +1 -1
  89. package/dist/components/toast/ToastProvider.js +4 -5
  90. package/dist/components/vegachartv2/SyncedCursorCharts.d.ts +1 -2
  91. package/dist/components/vegachartv2/SyncedCursorCharts.d.ts.map +1 -1
  92. package/dist/components/vegachartv2/SyncedCursorCharts.js +3 -5
  93. package/dist/components/vegachartv2/VegaChartV2.component.d.ts +1 -2
  94. package/dist/components/vegachartv2/VegaChartV2.component.d.ts.map +1 -1
  95. package/dist/components/vegachartv2/VegaChartV2.component.js +2 -2
  96. package/dist/icons/branding.d.ts.map +1 -1
  97. package/dist/icons/scality-loading.d.ts.map +1 -1
  98. package/dist/index.d.ts +1 -0
  99. package/dist/index.d.ts.map +1 -1
  100. package/dist/index.js +1 -0
  101. package/dist/next.d.ts +2 -0
  102. package/dist/next.d.ts.map +1 -1
  103. package/dist/next.js +2 -0
  104. package/dist/style/theme.d.ts +20 -0
  105. package/dist/style/theme.d.ts.map +1 -1
  106. package/dist/style/theme.js +46 -1
  107. package/package.json +7 -4
  108. package/setupTests.js +6 -0
  109. package/src/lib/components/accordion/Accordion.component.tsx +1 -1
  110. package/src/lib/components/accordion/Accordion.test.tsx +7 -15
  111. package/src/lib/components/barchartv2/Barchart.component.test.tsx +364 -0
  112. package/src/lib/components/barchartv2/Barchart.component.tsx +321 -0
  113. package/src/lib/components/barchartv2/utils.test.ts +899 -0
  114. package/src/lib/components/barchartv2/utils.ts +534 -0
  115. package/src/lib/components/buttonv2/Buttonv2.component.tsx +1 -1
  116. package/src/lib/components/chartlegend/ChartLegend.tsx +113 -0
  117. package/src/lib/components/chartlegend/ChartLegendWrapper.tsx +85 -0
  118. package/src/lib/components/constrainedtext/Constrainedtext.component.tsx +22 -3
  119. package/src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx +0 -1
  120. package/src/lib/components/date/FormattedDateTime.spec.tsx +24 -0
  121. package/src/lib/components/date/FormattedDateTime.tsx +42 -2
  122. package/src/lib/components/emptytable/Emptytable.component.tsx +1 -1
  123. package/src/lib/components/error-pages/ErrorPage401.component.tsx +0 -1
  124. package/src/lib/components/error-pages/ErrorPage404.component.tsx +0 -1
  125. package/src/lib/components/error-pages/ErrorPage500.component.tsx +0 -1
  126. package/src/lib/components/error-pages/ErrorPageAuth.component.tsx +0 -1
  127. package/src/lib/components/form/Form.component.tsx +1 -1
  128. package/src/lib/components/healthselectorv2/HealthSelector.component.test.tsx +3 -3
  129. package/src/lib/components/icon/Icon.component.tsx +48 -60
  130. package/src/lib/components/infomessage/InfoMessage.component.tsx +0 -1
  131. package/src/lib/components/inlineinput/InlineInput.test.tsx +22 -19
  132. package/src/lib/components/inputlist/InputList.test.tsx +21 -19
  133. package/src/lib/components/lateralnavbarlayout/LateralNavbarLayout.component.tsx +0 -1
  134. package/src/lib/components/layout/Layout.component.tsx +0 -1
  135. package/src/lib/components/layout/v2/panels.tsx +1 -1
  136. package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx +502 -0
  137. package/src/lib/components/modal/Modal.component.tsx +2 -2
  138. package/src/lib/components/navbar/Navbar.component.tsx +2 -2
  139. package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx +0 -1
  140. package/src/lib/components/searchinput/SearchInput.component.tsx +0 -1
  141. package/src/lib/components/searchinput/SearchInput.test.tsx +3 -7
  142. package/src/lib/components/selectv2/Selectv2.component.tsx +24 -14
  143. package/src/lib/components/selectv2/selectv2.test.tsx +62 -57
  144. package/src/lib/components/sidebar/Sidebar.component.tsx +1 -1
  145. package/src/lib/components/statuswrapper/Statuswrapper.component.tsx +0 -1
  146. package/src/lib/components/steppers/Stepper.component.tsx +10 -8
  147. package/src/lib/components/tablev2/Search.tsx +2 -2
  148. package/src/lib/components/tablev2/SingleSelectableContent.tsx +2 -2
  149. package/src/lib/components/tablev2/TableCommon.tsx +1 -1
  150. package/src/lib/components/tablev2/TableSync.test.tsx +28 -0
  151. package/src/lib/components/tablev2/TableSync.tsx +36 -0
  152. package/src/lib/components/tablev2/Tablev2.component.tsx +11 -9
  153. package/src/lib/components/tablev2/Tablev2.test.tsx +36 -37
  154. package/src/lib/components/tabsv2/ScrollButton.tsx +2 -2
  155. package/src/lib/components/tabsv2/Tabsv2.component.tsx +6 -6
  156. package/src/lib/components/text/Text.component.tsx +4 -5
  157. package/src/lib/components/textarea/TextArea.component.tsx +3 -2
  158. package/src/lib/components/textbadge/TextBadge.component.tsx +0 -1
  159. package/src/lib/components/toast/Toast.component.tsx +1 -1
  160. package/src/lib/components/toast/ToastProvider.tsx +17 -7
  161. package/src/lib/components/vegachartv2/SyncedCursorCharts.tsx +5 -7
  162. package/src/lib/components/vegachartv2/VegaChartV2.component.tsx +2 -2
  163. package/src/lib/icons/branding.tsx +0 -2
  164. package/src/lib/icons/scality-loading.tsx +0 -2
  165. package/src/lib/index.ts +1 -0
  166. package/src/lib/next.ts +6 -0
  167. package/src/lib/style/theme.ts +53 -1
  168. package/stories/BarChart/barchart.stories.tsx +822 -0
  169. package/stories/areachart.stories.tsx +0 -1
  170. package/stories/format.mdx +4 -2
  171. package/stories/linetimeseriechart.stories.tsx +485 -0
  172. package/stories/tablev2.stories.tsx +41 -0
  173. 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 ```@scality/core-ui``` in the ```package.json```'s dependencies of your project.
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
- - ```@scality/core-ui``` requires the peerDependencies below. Make sure that you have them in the ```package.json```'s dependencies.
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 ```@scality/core-ui/dist/next'``` or ```@scality/core-ui```
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 variant="primary" onClick={handleClick} label="Save" icon={<Icon name="Save" />} />
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
- <Layout sidebar={sidebar} navbar={navbar}>
83
- ...
84
- </Layout>
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,4 +1,3 @@
1
- import React from 'react';
2
1
  export type AccordionProps = {
3
2
  title: string;
4
3
  id: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,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"}
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":"AAAA,OAAO,EACL,aAAa,EACb,YAAY,EACZ,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,UAAW,MAAM,KAAG,MActD,CAAC;AAEF,eAAO,MAAM,cAAc,SACnB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,YAChC,OAAO,WAuBlB,CAAC;AA8EF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,YAAY,QAChD,CAAC,QACD;IACJ,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,eACY,MAAM,EAAE;;GA0CtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,YAAY,QACpD,CAAC,eACM,MAAM,EAAE;;GA2BtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,YAAY,QACjD;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,eAC7B,MAAM,EAAE,eACR,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;;GAqB7C,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,yCAAyC,GACpD,CAAC,SAAS,YAAY,QAEhB,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,KAC5C;IACD,IAAI,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,YAAY,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAuBrE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,eAAO,MAAM,sCAAsC,SAC3C,GAAG,YACC,MAAM,aACL,SAAS,GAAG,SAAS;;;;CAoBjC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAmCA;AAID,eAAO,MAAM,eAAe,iBACZ;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,EAAE,QACG;IACJ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC,EAAE,YACO,OAAO;aAPN,MAAM;UACT,MAAM;cACF,MAAM;GAuBnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,YAAY,SAClD,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,WACjC,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,gBAC3B,MAAM,GAAG,SAAS,8BAwBjC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uCAAuC,SAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,gBAC5B;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,qBAChD,MAAM,EAAE;;;;;iBADF,MAAM;cAAQ,MAAM;kBAAY,MAAM;;CA2BhE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,QAC3C,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,cACjC,SAAS;;iBAnCI,MAAM;cAAQ,MAAM;kBAAY,MAAM;;;;;CAiEhE,CAAC"}