@scality/core-ui 0.166.0 → 0.167.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/.storybook/preview.js +6 -4
- package/README.md +27 -80
- package/dist/components/barchart/BarChart.component.d.ts +5 -0
- package/dist/components/barchart/BarChart.component.d.ts.map +1 -1
- package/dist/components/barchart/BarChart.component.js +5 -0
- package/dist/components/button/Button.component.d.ts +2 -1
- package/dist/components/button/Button.component.d.ts.map +1 -1
- package/dist/components/button/Button.component.js +2 -1
- package/dist/components/chartlegend/ChartLegend.d.ts.map +1 -1
- package/dist/components/chartlegend/ChartLegend.js +7 -13
- package/dist/components/chartlegend/ChartLegendWrapper.d.ts +1 -2
- package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map +1 -1
- package/dist/components/chartlegend/ChartLegendWrapper.js +4 -9
- package/dist/components/icon/Icon.component.d.ts +9 -11
- package/dist/components/icon/Icon.component.d.ts.map +1 -1
- package/dist/components/icon/Icon.component.js +2 -0
- package/dist/components/linetemporalchart/ChartUtil.d.ts +3 -2
- package/dist/components/linetemporalchart/ChartUtil.d.ts.map +1 -1
- package/dist/components/linetemporalchart/ChartUtil.js +24 -20
- package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts +4 -0
- package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts.map +1 -1
- package/dist/components/linetemporalchart/LineTemporalChart.component.js +4 -0
- package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts +1 -1
- package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map +1 -1
- package/dist/index.d.ts +1 -11
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -11
- package/dist/next.d.ts +1 -0
- package/dist/next.d.ts.map +1 -1
- package/jest.config.js +1 -0
- package/package.json +16 -37
- package/src/lib/components/barchart/BarChart.component.tsx +5 -0
- package/src/lib/components/button/Button.component.tsx +2 -1
- package/src/lib/components/chartlegend/ChartLegend.test.tsx +17 -0
- package/src/lib/components/chartlegend/ChartLegend.tsx +6 -12
- package/src/lib/components/chartlegend/ChartLegendWrapper.tsx +5 -13
- package/src/lib/components/icon/Icon.component.tsx +12 -1
- package/src/lib/components/linetemporalchart/ChartUtil.test.ts +23 -35
- package/src/lib/components/linetemporalchart/ChartUtil.ts +32 -26
- package/src/lib/components/linetemporalchart/LineTemporalChart.component.tsx +19 -15
- package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx +5 -5
- package/src/lib/components/selectv2/selectv2.test.tsx +1 -1
- package/src/lib/components/toast/useMutationsHandler.test.tsx +22 -32
- package/src/lib/index.ts +6 -11
- package/src/lib/next.ts +1 -0
- package/stories/barchart.stories.tsx +1 -1
- package/stories/card.stories.tsx +7 -5
- package/stories/controls.ts +19 -20
- package/stories/linecharttemporal.stories.tsx +1 -1
- package/stories/linetimeseriechart.stories.tsx +49 -0
- package/stories/navbar.stories.tsx +103 -0
- package/stories/tabsv2.stories.tsx +51 -56
- package/dist/components/areachart/AreaChart.component.d.ts +0 -13
- package/dist/components/areachart/AreaChart.component.d.ts.map +0 -1
- package/dist/components/areachart/AreaChart.component.js +0 -27
- package/dist/components/chips/Chips.component.d.ts +0 -21
- package/dist/components/chips/Chips.component.d.ts.map +0 -1
- package/dist/components/chips/Chips.component.js +0 -105
- package/dist/components/cloudprogressbar/CloudProgressBar.component.d.ts +0 -10
- package/dist/components/cloudprogressbar/CloudProgressBar.component.d.ts.map +0 -1
- package/dist/components/cloudprogressbar/CloudProgressBar.component.js +0 -38
- package/dist/components/collapsiblepanel/CollapsiblePanel.component.d.ts +0 -9
- package/dist/components/collapsiblepanel/CollapsiblePanel.component.d.ts.map +0 -1
- package/dist/components/collapsiblepanel/CollapsiblePanel.component.js +0 -44
- package/dist/components/linechart/LineChart.component.d.ts +0 -21
- package/dist/components/linechart/LineChart.component.d.ts.map +0 -1
- package/dist/components/linechart/LineChart.component.js +0 -109
- package/dist/components/multiselect/MultiSelect.component.d.ts +0 -28
- package/dist/components/multiselect/MultiSelect.component.d.ts.map +0 -1
- package/dist/components/multiselect/MultiSelect.component.js +0 -73
- package/dist/components/select/Select.component.d.ts +0 -14
- package/dist/components/select/Select.component.d.ts.map +0 -1
- package/dist/components/select/Select.component.js +0 -71
- package/dist/components/spacedbox/SpacedBox.d.ts +0 -34
- package/dist/components/spacedbox/SpacedBox.d.ts.map +0 -1
- package/dist/components/spacedbox/SpacedBox.js +0 -64
- package/dist/components/sparkline/SparkLine.component.d.ts +0 -18
- package/dist/components/sparkline/SparkLine.component.d.ts.map +0 -1
- package/dist/components/sparkline/SparkLine.component.js +0 -148
- package/dist/components/vegachart/VegaChart.component.d.ts +0 -13
- package/dist/components/vegachart/VegaChart.component.d.ts.map +0 -1
- package/dist/components/vegachart/VegaChart.component.js +0 -120
- package/plopfile.js +0 -38
- package/src/lib/components/areachart/AreaChart.component.tsx +0 -49
- package/src/lib/components/chips/Chips.component.tsx +0 -169
- package/src/lib/components/cloudprogressbar/CloudProgressBar.component.tsx +0 -105
- package/src/lib/components/collapsiblepanel/CollapsiblePanel.component.tsx +0 -77
- package/src/lib/components/linechart/LineChart.component.tsx +0 -152
- package/src/lib/components/multiselect/MultiSelect.component.tsx +0 -158
- package/src/lib/components/select/Select.component.tsx +0 -98
- package/src/lib/components/spacedbox/SpacedBox.ts +0 -116
- package/src/lib/components/sparkline/SparkLine.component.tsx +0 -176
- package/src/lib/components/vegachart/VegaChart.component.tsx +0 -146
- package/stories/areachart.stories.tsx +0 -120
- package/stories/chips.stories.tsx +0 -107
- package/stories/cloudprogressbar.stories.tsx +0 -93
- package/stories/collapsiblepanel.stories.tsx +0 -57
- package/stories/data/areachart.ts +0 -122
- package/stories/data/sparklinechart.ts +0 -164
- package/stories/linechart.stories.tsx +0 -319
- package/stories/multiselect.stories.tsx +0 -126
- package/stories/select.stories.tsx +0 -52
- package/stories/sparkline.stories.tsx +0 -85
- package/stories/vegachart.stories.tsx +0 -98
package/.storybook/preview.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { QueryClient, QueryClientProvider } from 'react-query';
|
|
3
3
|
import { CoreUiThemeProvider } from '../src/lib/next';
|
|
4
|
-
import {
|
|
4
|
+
import { coreUIAvailableThemes } from '../src/lib/style/theme';
|
|
5
5
|
import { Wrapper } from '../stories/common';
|
|
6
6
|
import { ToastProvider } from '../src/lib';
|
|
7
7
|
|
|
@@ -72,9 +72,11 @@ export const parameters = {
|
|
|
72
72
|
controls: {
|
|
73
73
|
//All props with color in name will automatically have a control 'color'
|
|
74
74
|
//with colors presets to theme colors, possible to have the color name from theme in control
|
|
75
|
-
presetColors: Object.entries(
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
presetColors: Object.entries(coreUIAvailableThemes.darkRebrand).map(
|
|
76
|
+
(color) => {
|
|
77
|
+
return { color: color[1], title: color[0] };
|
|
78
|
+
},
|
|
79
|
+
),
|
|
78
80
|
matchers: {
|
|
79
81
|
color: /color/i,
|
|
80
82
|
},
|
package/README.md
CHANGED
|
@@ -11,38 +11,21 @@ Core-UI is a component library containing all components, layouts, icons and the
|
|
|
11
11
|
- Add `@scality/core-ui` in the `package.json`'s dependencies of your project.
|
|
12
12
|
|
|
13
13
|
```json
|
|
14
|
-
"@scality/core-ui": "0.
|
|
14
|
+
"@scality/core-ui": "^0.165.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
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
|
24
|
-
"@fortawesome/react-fontawesome": "^0.1.14",
|
|
25
|
-
"@js-temporal/polyfill": "^0.4.4",
|
|
26
|
-
"polished": "3.4.1",
|
|
27
|
-
"pretty-bytes": "^5.6.0",
|
|
28
|
-
"react": "^17.0.2",
|
|
29
|
-
"react-debounce-input": "3.2.2",
|
|
30
|
-
"react-dom": "^17.0.2",
|
|
31
|
-
"react-dropzone": "^14.2.3",
|
|
20
|
+
"react": "^18.0.0",
|
|
21
|
+
"react-dom": "^18.0.0",
|
|
22
|
+
// to provides a Provider to the components using react-query
|
|
32
23
|
"react-query": "^3.34.0",
|
|
33
|
-
|
|
34
|
-
"react-router
|
|
35
|
-
"react-
|
|
36
|
-
|
|
37
|
-
"
|
|
38
|
-
"react-virtualized-auto-sizer": "^1.0.5",
|
|
39
|
-
"react-window": "^1.8.6",
|
|
40
|
-
"styled-components": "^4.1.2",
|
|
41
|
-
"styled-system": "^5.1.5",
|
|
42
|
-
"vega": "^5.17.3",
|
|
43
|
-
"vega-embed": "^6.0.0",
|
|
44
|
-
"vega-lite": "^5.0.0",
|
|
45
|
-
"vega-tooltip": "^0.27.0"
|
|
24
|
+
// for the components using react router
|
|
25
|
+
"react-router": "^7.0.1",
|
|
26
|
+
"react-router-dom": "^7.0.1",
|
|
27
|
+
// for legacy chart components
|
|
28
|
+
"canvas": "^2.10.1",
|
|
46
29
|
```
|
|
47
30
|
|
|
48
31
|
- Install the dependencies :
|
|
@@ -90,51 +73,23 @@ import { coreUIAvailableThemes as themes } from '@scality/core-ui/dist/style/the
|
|
|
90
73
|
|
|
91
74
|
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)
|
|
92
75
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
You can also modify or create a new theme. In this case make sure to respect this type :
|
|
76
|
+
You can also modify or create a new theme but make sure to extend this type:
|
|
96
77
|
|
|
97
78
|
```tsx
|
|
98
|
-
|
|
99
|
-
statusHealthy: string;
|
|
100
|
-
statusHealthyRGB: string;
|
|
101
|
-
statusWarning: string;
|
|
102
|
-
statusWarningRGB: string;
|
|
103
|
-
statusCritical: string;
|
|
104
|
-
statusCriticalRGB: string;
|
|
105
|
-
selectedActive: string;
|
|
106
|
-
highlight: string;
|
|
107
|
-
border: string;
|
|
108
|
-
buttonPrimary: string;
|
|
109
|
-
buttonSecondary: string;
|
|
110
|
-
buttonDelete: string;
|
|
111
|
-
infoPrimary: string;
|
|
112
|
-
infoSecondary: string;
|
|
113
|
-
backgroundLevel1: string;
|
|
114
|
-
backgroundLevel2: string;
|
|
115
|
-
backgroundLevel3: string;
|
|
116
|
-
backgroundLevel4: string;
|
|
117
|
-
textPrimary: string;
|
|
118
|
-
textSecondary: string;
|
|
119
|
-
textTertiary: string;
|
|
120
|
-
textReverse: string;
|
|
121
|
-
textLink: string;
|
|
122
|
-
};
|
|
79
|
+
import { CoreUITheme } from "@scality/core-ui/dist/next";
|
|
123
80
|
```
|
|
124
81
|
|
|
125
|
-
<br />
|
|
126
|
-
|
|
127
82
|
## Development
|
|
128
83
|
|
|
129
84
|
This project is built with [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/), and styled with [styled-components](https://styled-components.com/).
|
|
130
85
|
|
|
131
|
-
To start contributing to core-ui, clone the repository
|
|
86
|
+
To start contributing to core-ui, clone the repository:
|
|
132
87
|
|
|
133
88
|
```sh
|
|
134
89
|
git clone git@github.com:scality/core-ui.git
|
|
135
90
|
```
|
|
136
91
|
|
|
137
|
-
then install the dependancies
|
|
92
|
+
then install the dependancies:
|
|
138
93
|
|
|
139
94
|
```sh
|
|
140
95
|
npm install
|
|
@@ -142,7 +97,7 @@ npm install
|
|
|
142
97
|
|
|
143
98
|
### Create a new branch
|
|
144
99
|
|
|
145
|
-
Give your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with
|
|
100
|
+
Give your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with:
|
|
146
101
|
|
|
147
102
|
- feature/ for new component or major component update : `feature/TICKET-123-some-feature`
|
|
148
103
|
- improvement/ for code improvement, component update : `improvement/TICKET-456-some-improvement`
|
|
@@ -183,7 +138,7 @@ When creating a new version of an existing component, expose it in `src/lib/next
|
|
|
183
138
|
|
|
184
139
|
You can use storybook to help with the development.
|
|
185
140
|
Storybook helps to test and vizualize component in isolation.
|
|
186
|
-
If it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component
|
|
141
|
+
If it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component:
|
|
187
142
|
|
|
188
143
|
```jsx
|
|
189
144
|
// in stories/example/example.stories.tsx
|
|
@@ -200,10 +155,9 @@ type Story = StoryObj<typeof Example>;
|
|
|
200
155
|
export const Default: Story = {
|
|
201
156
|
render: () => <Example />,
|
|
202
157
|
};
|
|
203
|
-
|
|
204
158
|
```
|
|
205
159
|
|
|
206
|
-
|
|
160
|
+
Then launch storybook:
|
|
207
161
|
|
|
208
162
|
```sh
|
|
209
163
|
npm run storybook
|
|
@@ -213,7 +167,7 @@ Storybook will be launched on `http://localhost:3000`.
|
|
|
213
167
|
|
|
214
168
|
### Lint
|
|
215
169
|
|
|
216
|
-
To make sure your code is correctly lint, run
|
|
170
|
+
To make sure your code is correctly lint, run:
|
|
217
171
|
|
|
218
172
|
```sh
|
|
219
173
|
npm run lint
|
|
@@ -225,13 +179,13 @@ It will run ESLint by using `eslint-config-react-app` which is a shareable ESLin
|
|
|
225
179
|
|
|
226
180
|
Build tests with [jest](https://jestjs.io/)
|
|
227
181
|
|
|
228
|
-
Make sure to write tests that cover all cases, then you can run all tests with
|
|
182
|
+
Make sure to write tests that cover all cases, then you can run all tests with:
|
|
229
183
|
|
|
230
184
|
```sh
|
|
231
185
|
npm run test
|
|
232
186
|
```
|
|
233
187
|
|
|
234
|
-
|
|
188
|
+
Or run a specific test with:
|
|
235
189
|
|
|
236
190
|
```sh
|
|
237
191
|
npm run test Example.test.tsx
|
|
@@ -241,7 +195,6 @@ npm run test Example.test.tsx
|
|
|
241
195
|
|
|
242
196
|
Core-UI uses [storybook](https://storybook.js.org/) for its documentation. \
|
|
243
197
|
Illustrate use cases and state variations with [stories](https://storybook.js.org/docs/writing-stories).
|
|
244
|
-
All stories should be type.
|
|
245
198
|
|
|
246
199
|
If possible create or update the component guideline.
|
|
247
200
|
This guideline is an MDX file containing details about the component usage and is illustrated with the stories write in stories.tsx file.
|
|
@@ -259,29 +212,23 @@ import * as ExampleStories from './Example.stories';
|
|
|
259
212
|
An Example component is used for example.
|
|
260
213
|
|
|
261
214
|
<Canvas of={ExampleStories.Default} />
|
|
262
|
-
|
|
263
215
|
```
|
|
264
216
|
|
|
265
|
-
###
|
|
266
|
-
|
|
267
|
-
Push your code on the repository
|
|
268
|
-
|
|
269
|
-
```sh
|
|
270
|
-
git push origin <branch-name>
|
|
271
|
-
```
|
|
217
|
+
### Contributing
|
|
272
218
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
219
|
+
- Push your code on a branch following the [branch naming convention](#create-a-new-branch)
|
|
220
|
+
- Create a pull request.
|
|
221
|
+
- Obtain the approval of at least one reviewer.
|
|
222
|
+
- Then comment with `/approve` to merge the PR.
|
|
276
223
|
|
|
277
224
|
### Release
|
|
278
225
|
|
|
279
226
|
After merging one or more PR in Core-UI, it is possible to plublish a new release.
|
|
280
|
-
In the Core-UI repo, follow these steps
|
|
227
|
+
In the Core-UI repo, follow these steps:
|
|
281
228
|
|
|
282
229
|
1. Go on `Releases` then `Draft a new release`
|
|
283
|
-
2. In the select menu `Choose a tag
|
|
284
|
-
3. You can now `Generate release notes
|
|
230
|
+
2. In the select menu `Choose a tag`: Create a new tag (the current tag increment by 1).
|
|
231
|
+
3. You can now `Generate release notes`: it will add all the PR infos since the last release. \
|
|
285
232
|
You can add details if necessary.
|
|
286
233
|
4. `Publish release`
|
|
287
234
|
5. It will create a PR that need to be approved.
|
|
@@ -7,6 +7,11 @@ type Props = {
|
|
|
7
7
|
height?: number;
|
|
8
8
|
barConfig?: Record<string, any>;
|
|
9
9
|
};
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use Barchart v2 instead
|
|
12
|
+
* @example import { Barchart } from '@scality/core-ui/dist/next';
|
|
13
|
+
|
|
14
|
+
*/
|
|
10
15
|
declare function BarChart({ id, data, xAxis, yAxis, color, height, barConfig, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
16
|
export { BarChart };
|
|
12
17
|
//# sourceMappingURL=BarChart.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchart/BarChart.component.tsx"],"names":[],"mappings":"AACA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAS,GACV,EAAE,KAAK,2CAwBP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"BarChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchart/BarChart.component.tsx"],"names":[],"mappings":"AACA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAS,GACV,EAAE,KAAK,2CAwBP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { VegaChart } from '../vegachartv2/VegaChartV2.component';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use Barchart v2 instead
|
|
5
|
+
* @example import { Barchart } from '@scality/core-ui/dist/next';
|
|
6
|
+
|
|
7
|
+
*/
|
|
3
8
|
function BarChart({ id, data, xAxis, yAxis, color, height = 200, barConfig, }) {
|
|
4
9
|
const spec = {
|
|
5
10
|
mark: {
|
|
@@ -19,8 +19,9 @@ export declare const ButtonText: import("styled-components").StyledComponent<"sp
|
|
|
19
19
|
export declare const ButtonContent: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
20
20
|
/**
|
|
21
21
|
* @deprecated
|
|
22
|
+
* Used only in Dropdown.component.tsx, can be removed after refactoring
|
|
22
23
|
* You should use ButtonV2 with
|
|
23
|
-
* import { Button } from '@scality/core-ui/dist/next';
|
|
24
|
+
* @example import { Button } from '@scality/core-ui/dist/next';
|
|
24
25
|
*/
|
|
25
26
|
declare function Button({ text, href, icon, size, variant, outlined, disabled, onClick, title, isLoading, type, inverted, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
|
|
26
27
|
export { Button };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button/Button.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IAIZ,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,YAAY,4GA+LxB,CAAC;AACF,eAAO,MAAM,UAAU,0GAStB,CAAC;AACF,eAAO,MAAM,UAAU,0GAItB,CAAC;AACF,eAAO,MAAM,aAAa,0GAEzB,CAAC;AAGF
|
|
1
|
+
{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button/Button.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IAIZ,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,YAAY,4GA+LxB,CAAC;AACF,eAAO,MAAM,UAAU,0GAStB,CAAC;AACF,eAAO,MAAM,UAAU,0GAItB,CAAC;AACF,eAAO,MAAM,aAAa,0GAEzB,CAAC;AAGF;;;;;GAKG;AACH,iBAAS,MAAM,CAAC,EACd,IAAS,EACT,IAAS,EACT,IAAW,EACX,IAAa,EACb,OAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,KAAU,EACV,SAAiB,EACjB,IAAe,EACf,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,2CAgDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -218,8 +218,9 @@ export const ButtonContent = styled.span `
|
|
|
218
218
|
const Anchor = ButtonStyled.withComponent('a');
|
|
219
219
|
/**
|
|
220
220
|
* @deprecated
|
|
221
|
+
* Used only in Dropdown.component.tsx, can be removed after refactoring
|
|
221
222
|
* You should use ButtonV2 with
|
|
222
|
-
* import { Button } from '@scality/core-ui/dist/next';
|
|
223
|
+
* @example import { Button } from '@scality/core-ui/dist/next';
|
|
223
224
|
*/
|
|
224
225
|
function Button({ text = '', href = '', icon = null, size = 'base', variant = 'buttonPrimary', outlined = false, disabled = false, onClick, title = '', isLoading = false, type = 'button', inverted = false, ...rest }) {
|
|
225
226
|
return href && href.length ? (_jsxs(Anchor, { className: "sc-button", href: href, variant: variant, outlined: outlined, disabled: disabled, size: size, title: title, ...rest, children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })) : (_jsx(ButtonStyled, { className: "sc-button", variant: variant, outlined: outlined, disabled: disabled || isLoading, size: size, onClick: onClick, title: title, isLoading: isLoading, type: type, inverted: inverted, icon: icon, text: text, ...rest, children: _jsxs(ButtonContent, { children: [isLoading && _jsx(Loader, { size: size }), _jsxs("span", { className: "sc-button-text", children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAyElB,CAAC"}
|
|
@@ -45,7 +45,7 @@ export const LegendShape = styled.div `
|
|
|
45
45
|
}}
|
|
46
46
|
`;
|
|
47
47
|
export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
|
|
48
|
-
const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources,
|
|
48
|
+
const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, selectOnlyResource, isOnlyOneSelected, } = useChartLegend();
|
|
49
49
|
const resources = listResources();
|
|
50
50
|
const handleLegendClick = useCallback((resource, event) => {
|
|
51
51
|
if (disabled)
|
|
@@ -54,7 +54,7 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
|
|
|
54
54
|
const itemIsSelected = isSelected(resource);
|
|
55
55
|
if (isModifierClick) {
|
|
56
56
|
if (itemIsSelected) {
|
|
57
|
-
if (
|
|
57
|
+
if (isOnlyOneSelected()) {
|
|
58
58
|
selectAllResources();
|
|
59
59
|
}
|
|
60
60
|
else {
|
|
@@ -65,16 +65,11 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
|
|
|
65
65
|
addSelectedResource(resource);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
+
else if (itemIsSelected && isOnlyOneSelected()) {
|
|
69
|
+
selectAllResources();
|
|
70
|
+
}
|
|
68
71
|
else {
|
|
69
|
-
|
|
70
|
-
selectOnlyResource(resource);
|
|
71
|
-
}
|
|
72
|
-
else if (itemIsSelected) {
|
|
73
|
-
selectAllResources();
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
selectOnlyResource(resource);
|
|
77
|
-
}
|
|
72
|
+
selectOnlyResource(resource);
|
|
78
73
|
}
|
|
79
74
|
}, [
|
|
80
75
|
disabled,
|
|
@@ -83,8 +78,7 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
|
|
|
83
78
|
removeSelectedResource,
|
|
84
79
|
selectAllResources,
|
|
85
80
|
selectOnlyResource,
|
|
86
|
-
|
|
87
|
-
getSelectedCount,
|
|
81
|
+
isOnlyOneSelected,
|
|
88
82
|
]);
|
|
89
83
|
return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
|
|
90
84
|
const color = getColor(resource);
|
|
@@ -9,8 +9,7 @@ export type ChartLegendState = {
|
|
|
9
9
|
isSelected: (resource: string) => boolean;
|
|
10
10
|
getColor: (resource: string) => string | undefined;
|
|
11
11
|
listResources: () => string[];
|
|
12
|
-
|
|
13
|
-
getSelectedCount: () => number;
|
|
12
|
+
isOnlyOneSelected: () => boolean;
|
|
14
13
|
};
|
|
15
14
|
export type ChartLegendWrapperProps = {
|
|
16
15
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,
|
|
1
|
+
{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;CAClC,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CAiFzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}
|
|
@@ -16,11 +16,8 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
|
|
|
16
16
|
const selectOnlyResource = useCallback((resource) => {
|
|
17
17
|
setSelectedResources([resource]);
|
|
18
18
|
}, []);
|
|
19
|
-
const
|
|
20
|
-
return
|
|
21
|
-
}, [allResources]);
|
|
22
|
-
const getSelectedCount = useCallback(() => {
|
|
23
|
-
return selectedResources.length;
|
|
19
|
+
const isOnlyOneSelected = useCallback(() => {
|
|
20
|
+
return selectedResources.length === 1;
|
|
24
21
|
}, [selectedResources]);
|
|
25
22
|
const isSelected = useCallback((resource) => {
|
|
26
23
|
return selectedResources.includes(resource);
|
|
@@ -45,8 +42,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
|
|
|
45
42
|
isSelected,
|
|
46
43
|
getColor,
|
|
47
44
|
listResources,
|
|
48
|
-
|
|
49
|
-
getSelectedCount,
|
|
45
|
+
isOnlyOneSelected,
|
|
50
46
|
}), [
|
|
51
47
|
selectedResources,
|
|
52
48
|
addSelectedResource,
|
|
@@ -56,8 +52,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
|
|
|
56
52
|
isSelected,
|
|
57
53
|
getColor,
|
|
58
54
|
listResources,
|
|
59
|
-
|
|
60
|
-
getSelectedCount,
|
|
55
|
+
isOnlyOneSelected,
|
|
61
56
|
]);
|
|
62
57
|
return (_jsx(ChartLegendContext.Provider, { value: chartLegendState, children: children }));
|
|
63
58
|
};
|
|
@@ -127,18 +127,16 @@ export declare const iconTable: {
|
|
|
127
127
|
Play: string;
|
|
128
128
|
Mail: string;
|
|
129
129
|
};
|
|
130
|
-
|
|
131
|
-
'
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
'Remote-group': ({ "aria-label": ariaLabel, color, size }: {
|
|
137
|
-
"aria-label": any;
|
|
138
|
-
color: any;
|
|
139
|
-
size: any;
|
|
140
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
130
|
+
type IconProps = {
|
|
131
|
+
'aria-label'?: string;
|
|
132
|
+
color?: string;
|
|
133
|
+
size?: string;
|
|
134
|
+
icon?: string;
|
|
135
|
+
title?: string;
|
|
141
136
|
};
|
|
137
|
+
export declare const customIcons: Record<string, ((props: IconProps) => JSX.Element) & {
|
|
138
|
+
displayName?: string;
|
|
139
|
+
}>;
|
|
142
140
|
export type IconName = keyof typeof iconTable | keyof typeof customIcons;
|
|
143
141
|
export type IconColor = keyof CoreUITheme;
|
|
144
142
|
type Props = {
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -136,6 +136,8 @@ export const customIcons = {
|
|
|
136
136
|
'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
|
|
137
137
|
'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteGroup, { ariaLabel: ariaLabel, color: color, size: size })),
|
|
138
138
|
};
|
|
139
|
+
customIcons['Remote-user'].displayName = 'RemoteUser';
|
|
140
|
+
customIcons['Remote-group'].displayName = 'RemoteGroup';
|
|
139
141
|
const IconStyled = styled(FontAwesomeIcon) `
|
|
140
142
|
${(props) => {
|
|
141
143
|
const theme = props.theme;
|
|
@@ -25,14 +25,15 @@ export declare function getUnitLabel(unitRange: {
|
|
|
25
25
|
};
|
|
26
26
|
/**
|
|
27
27
|
* This function manually adds the missing data points with `null` value caused by downtime of the VMs
|
|
28
|
+
* Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
|
|
28
29
|
*
|
|
29
30
|
* @param {array} orginalValues - The array of the data points are already sorted according to the time series
|
|
30
31
|
* @param {number} startingTimeStamp - The starting timestamp in seconds
|
|
31
32
|
* @param {number} sampleDuration - The time span value in seconds
|
|
32
|
-
* @param {number}
|
|
33
|
+
* @param {number} sampleInterval - The time difference between two data points in seconds
|
|
33
34
|
*
|
|
34
35
|
*/
|
|
35
|
-
export declare function addMissingDataPoint(orginalValues: [number, string | null][], startingTimeStamp
|
|
36
|
+
export declare function addMissingDataPoint(orginalValues: [number, number | string | null][], startingTimeStamp?: number, sampleDuration?: number, sampleInterval?: number): [number, number | string | null][];
|
|
36
37
|
export declare const getRelativeValue: (value: number, base: number) => number;
|
|
37
38
|
export declare const relativeDatumToOriginalDatum: <T>(datum: T, base: number) => T;
|
|
38
39
|
export declare const getAbsoluteValue: (relativeValue: number, base: number) => number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;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,CAkCA;AAED
|
|
1
|
+
{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;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,CAkCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}
|
|
@@ -65,42 +65,46 @@ export function getUnitLabel(unitRange, maxValue) {
|
|
|
65
65
|
}
|
|
66
66
|
/**
|
|
67
67
|
* This function manually adds the missing data points with `null` value caused by downtime of the VMs
|
|
68
|
+
* Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
|
|
68
69
|
*
|
|
69
70
|
* @param {array} orginalValues - The array of the data points are already sorted according to the time series
|
|
70
71
|
* @param {number} startingTimeStamp - The starting timestamp in seconds
|
|
71
72
|
* @param {number} sampleDuration - The time span value in seconds
|
|
72
|
-
* @param {number}
|
|
73
|
+
* @param {number} sampleInterval - The time difference between two data points in seconds
|
|
73
74
|
*
|
|
74
75
|
*/
|
|
75
|
-
export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDuration,
|
|
76
|
+
export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDuration, sampleInterval) {
|
|
76
77
|
if (!orginalValues ||
|
|
77
78
|
startingTimeStamp === undefined ||
|
|
78
79
|
!sampleDuration ||
|
|
79
|
-
!
|
|
80
|
+
!sampleInterval ||
|
|
80
81
|
startingTimeStamp < 0 ||
|
|
81
82
|
sampleDuration <= 0 ||
|
|
82
|
-
|
|
83
|
+
sampleInterval <= 0) {
|
|
83
84
|
return [];
|
|
84
85
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
let samplingPointTime = startingTimeStamp;
|
|
88
|
-
// initialize the array with all "NAN" value, in order for the tooltip to display dash(-)
|
|
89
|
-
for (let i = 0; i < numberOfDataPoints; i++) {
|
|
90
|
-
newValues.push([samplingPointTime, NAN_STRING]);
|
|
91
|
-
samplingPointTime += sampleFrequency;
|
|
92
|
-
}
|
|
93
|
-
// copy the existing data points from `orginalValue` array to `newValues`
|
|
94
|
-
if (newValues.length === 0)
|
|
86
|
+
// If there are no original values, return empty array
|
|
87
|
+
if (orginalValues.length === 0) {
|
|
95
88
|
return [];
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
89
|
+
}
|
|
90
|
+
const newValues = [];
|
|
91
|
+
// Process all but the last element
|
|
92
|
+
for (let i = 0; i < orginalValues.length - 1; i++) {
|
|
93
|
+
// Always add the current data point
|
|
94
|
+
newValues.push(orginalValues[i]);
|
|
95
|
+
const currentTimestamp = orginalValues[i][0];
|
|
96
|
+
const nextTimestamp = orginalValues[i + 1][0];
|
|
97
|
+
const gap = nextTimestamp - currentTimestamp;
|
|
98
|
+
// Calculate how many missing points to add
|
|
99
|
+
const missingIntervals = Math.floor(gap / sampleInterval) - 1;
|
|
100
|
+
// Add missing data points with NAN_STRING (only executes if missingIntervals > 0)
|
|
101
|
+
for (let j = 1; j <= missingIntervals; j++) {
|
|
102
|
+
const missingTimestamp = currentTimestamp + j * sampleInterval;
|
|
103
|
+
newValues.push([missingTimestamp, NAN_STRING]);
|
|
102
104
|
}
|
|
103
105
|
}
|
|
106
|
+
// Add the last element
|
|
107
|
+
newValues.push(orginalValues[orginalValues.length - 1]);
|
|
104
108
|
return newValues;
|
|
105
109
|
}
|
|
106
110
|
// get the value for the based value
|
|
@@ -37,6 +37,10 @@ export type LineChartProps = {
|
|
|
37
37
|
unitLabel: string;
|
|
38
38
|
}, tooltipData: any) => string;
|
|
39
39
|
};
|
|
40
|
+
/**
|
|
41
|
+
* @deprecated Use LineTimeSerieChart instead
|
|
42
|
+
* @example import { LineTimeSerieChart } from '@scality/core-ui/dist/next';
|
|
43
|
+
*/
|
|
40
44
|
declare function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange, isLoading, isLegendHidden, yAxisType, yAxisTitle, helpText, renderTooltipSerie, onHover, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
|
|
41
45
|
export { LineTemporalChart };
|
|
42
46
|
//# sourceMappingURL=LineTemporalChart.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,2CAomBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,2CAomBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -94,6 +94,10 @@ const colorRange = [
|
|
|
94
94
|
darken(0.3, lineColor8),
|
|
95
95
|
];
|
|
96
96
|
// Note: we need to make sure the start time and end timefor the prometheus query between the series are the same.
|
|
97
|
+
/**
|
|
98
|
+
* @deprecated Use LineTimeSerieChart instead
|
|
99
|
+
* @example import { LineTimeSerieChart } from '@scality/core-ui/dist/next';
|
|
100
|
+
*/
|
|
97
101
|
function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange, isLoading = false, isLegendHidden = false, yAxisType = 'default', yAxisTitle, helpText, renderTooltipSerie, onHover, ...rest }) {
|
|
98
102
|
// property validation
|
|
99
103
|
if (!['default', 'percentage', 'symmetrical'].includes(yAxisType)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA0FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA0FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAiEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CAoShB"}
|