Skip to content

Commit ff17d47

Browse files
Mil4n0rMil4n0r
authored
Merge branch 'master' into gomezivann/select-update
2 parents 189381d + b063530 commit ff17d47

File tree

17 files changed

+1156
-181
lines changed

17 files changed

+1156
-181
lines changed

‎lib/babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
2-
presets: ["@babel/react", "@babel/env", "@babel/preset-typescript"],
2+
presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
33
plugins: [
44
"@babel/plugin-proposal-optional-chaining",
55
"@babel/plugin-proposal-nullish-coalescing-operator",

‎lib/jest.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@ module.exports = {
55
"\\.(png)$": "<rootDir>/test/mocks/pngMock.js",
66
},
77
testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)", "!**/?(*.)+(accessibility.)(spec|test).[jt]s?(x)"],
8+
transformIgnorePatterns: ["/node_modules/(?!(jest-)?@cloudscape-design)/"],
9+
transform: {
10+
"^.+\\.[tj]sx?$": "babel-jest",
11+
},
812
};

‎lib/package-lock.json‎

Lines changed: 354 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"styled-components": "^5.0.1"
1919
},
2020
"dependencies": {
21+
"@cloudscape-design/components": "^3.0.632",
2122
"@radix-ui/react-popover": "^1.0.7",
2223
"@radix-ui/react-tooltip": "^1.0.7",
2324
"color": "^3.1.3",

‎lib/src/bar-chart/BarChart.stories.tsx‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
import React from "react";
2+
import Title from "../../.storybook/components/Title";
3+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
4+
import DxcBarChart from "./BarChart";
5+
import { userEvent, within } from "@storybook/test";
6+
7+
export default {
8+
title: "Bar Chart",
9+
component: DxcBarChart,
10+
};
11+
12+
const series = [
13+
{
14+
title: "Series 1",
15+
type: "bar",
16+
data: [
17+
{ x: 0, y: 100000 },
18+
{ x: 1, y: 200000 },
19+
{ x: 2, y: 300000 },
20+
{ x: 3, y: 400000 },
21+
{ x: 4, y: 500000 },
22+
],
23+
},
24+
{
25+
title: "Series 2",
26+
type: "bar",
27+
data: [
28+
{ x: 0, y: 50000 },
29+
{ x: 1, y: 100000 },
30+
{ x: 2, y: 150000 },
31+
{ x: 3, y: 200000 },
32+
{ x: 4, y: 250000 },
33+
],
34+
},
35+
{
36+
title: "Series 3",
37+
type: "bar",
38+
data: [
39+
{ x: 0, y: 200000 },
40+
{ x: 1, y: 400000 },
41+
{ x: 2, y: 600000 },
42+
{ x: 3, y: 800000 },
43+
{ x: 4, y: 1000000 },
44+
],
45+
},
46+
{
47+
title: "Series 4",
48+
type: "bar",
49+
data: [
50+
{ x: 0, y: 100000 },
51+
{ x: 1, y: 200000 },
52+
{ x: 2, y: 400000 },
53+
{ x: 3, y: 700000 },
54+
{ x: 4, y: 900000 },
55+
],
56+
},
57+
{
58+
title: "Series 5",
59+
type: "bar",
60+
data: [
61+
{ x: 0, y: 50000 },
62+
{ x: 1, y: 500000 },
63+
{ x: 2, y: 800000 },
64+
{ x: 3, y: 900000 },
65+
{ x: 4, y: 100000 },
66+
],
67+
},
68+
{
69+
title: "Series 6",
70+
type: "bar",
71+
data: [
72+
{ x: 0, y: 10000 },
73+
{ x: 1, y: 250000 },
74+
{ x: 2, y: 550000 },
75+
{ x: 3, y: 750000 },
76+
{ x: 4, y: 950000 },
77+
],
78+
},
79+
{
80+
title: "Average",
81+
type: "threshold",
82+
y: 400000,
83+
},
84+
];
85+
86+
const BarChart = () => (
87+
<>
88+
<Title title="Basic bar chart" theme="light" level={4} />
89+
<ExampleContainer>
90+
<DxcBarChart
91+
series={[
92+
{
93+
title: "Series 1",
94+
type: "bar",
95+
data: [
96+
{ x: 0, y: 100000 },
97+
{ x: 1, y: 200000 },
98+
{ x: 2, y: 300000 },
99+
{ x: 3, y: 400000 },
100+
{ x: 4, y: 500000 },
101+
],
102+
},
103+
{
104+
title: "Average",
105+
type: "threshold",
106+
y: 300000,
107+
},
108+
]}
109+
xDomain={[0, 1, 2, 3, 4]}
110+
yDomain={[0, 600000]}
111+
/>
112+
</ExampleContainer>
113+
<Title title="Horizontal bar chart" theme="light" level={4} />
114+
<ExampleContainer>
115+
<DxcBarChart
116+
series={[
117+
{
118+
title: "Series 1",
119+
type: "bar",
120+
data: [
121+
{ x: 0, y: 100000 },
122+
{ x: 1, y: 200000 },
123+
{ x: 2, y: 300000 },
124+
],
125+
},
126+
{
127+
title: "Series 2",
128+
type: "bar",
129+
data: [
130+
{ x: 0, y: 50000 },
131+
{ x: 1, y: 100000 },
132+
{ x: 2, y: 150000 },
133+
],
134+
},
135+
]}
136+
xDomain={[0, 1, 2]}
137+
yDomain={[0, 600000]}
138+
horizontalBars
139+
/>
140+
</ExampleContainer>
141+
<Title title="Stacked bar chart" theme="light" level={4} />
142+
<ExampleContainer>
143+
<DxcBarChart series={series as any} xDomain={[0, 1, 2, 3, 4]} yDomain={[0, 5000000]} stackedBars />
144+
</ExampleContainer>
145+
<Title title="Stacked & horizontal bar chart" theme="light" level={4} />
146+
<ExampleContainer>
147+
<DxcBarChart series={series as any} xDomain={[0, 1, 2, 3, 4]} yDomain={[0, 5000000]} stackedBars horizontalBars />
148+
</ExampleContainer>
149+
<Title title="Complete bar chart" theme="light" level={4} />
150+
<ExampleContainer>
151+
<DxcBarChart
152+
chartTitle="Bar Chart"
153+
series={series as any}
154+
xDomain={[0, 1, 2, 3, 4]}
155+
yDomain={[0, 1000000]}
156+
xTitle="X Axis"
157+
yTitle="Y Axis"
158+
showFilter
159+
showLegend
160+
legendTitle="Legend"
161+
/>
162+
</ExampleContainer>
163+
<Title title="Error state" theme="light" level={4} />
164+
<ExampleContainer>
165+
<DxcBarChart series={[]} error="Error loading data." />
166+
</ExampleContainer>
167+
<Title title="Error state with 'Retry' action" theme="light" level={4} />
168+
<ExampleContainer>
169+
<DxcBarChart series={[]} error="Error loading data." onRetry={() => {}} />
170+
</ExampleContainer>
171+
<Title title="Loading state" theme="light" level={4} />
172+
<ExampleContainer>
173+
<DxcBarChart series={[]} loading />
174+
</ExampleContainer>
175+
<Title title="No data" theme="light" level={4} />
176+
<ExampleContainer>
177+
<DxcBarChart series={[]} />
178+
</ExampleContainer>
179+
<Title title="No matching data" theme="light" level={4} />
180+
<ExampleContainer>
181+
<DxcBarChart
182+
series={[
183+
{
184+
title: "Series 1",
185+
type: "bar",
186+
data: [
187+
{ x: 0, y: 100000 },
188+
{ x: 1, y: 200000 },
189+
{ x: 2, y: 300000 },
190+
{ x: 3, y: 400000 },
191+
{ x: 4, y: 500000 },
192+
],
193+
},
194+
{
195+
title: "Series 2",
196+
type: "bar",
197+
data: [
198+
{ x: 0, y: 50000 },
199+
{ x: 1, y: 100000 },
200+
{ x: 2, y: 150000 },
201+
{ x: 3, y: 200000 },
202+
{ x: 4, y: 250000 },
203+
],
204+
},
205+
{
206+
title: "Series 3",
207+
type: "bar",
208+
data: [
209+
{ x: 0, y: 200000 },
210+
{ x: 1, y: 400000 },
211+
{ x: 2, y: 600000 },
212+
{ x: 3, y: 800000 },
213+
{ x: 4, y: 1000000 },
214+
],
215+
},
216+
{
217+
title: "Series 4",
218+
type: "bar",
219+
data: [
220+
{ x: 0, y: 100000 },
221+
{ x: 1, y: 200000 },
222+
{ x: 2, y: 400000 },
223+
{ x: 3, y: 700000 },
224+
{ x: 4, y: 900000 },
225+
],
226+
},
227+
{
228+
title: "Series 5",
229+
type: "bar",
230+
data: [
231+
{ x: 0, y: 50000 },
232+
{ x: 1, y: 500000 },
233+
{ x: 2, y: 800000 },
234+
{ x: 3, y: 900000 },
235+
{ x: 4, y: 100000 },
236+
],
237+
},
238+
{
239+
title: "Series 6",
240+
type: "bar",
241+
data: [
242+
{ x: 0, y: 10000 },
243+
{ x: 1, y: 250000 },
244+
{ x: 2, y: 550000 },
245+
{ x: 3, y: 750000 },
246+
{ x: 4, y: 950000 },
247+
],
248+
},
249+
{
250+
title: "Series 7",
251+
type: "bar",
252+
data: [
253+
{ x: 0, y: 20000 },
254+
{ x: 1, y: 150000 },
255+
{ x: 2, y: 350000 },
256+
{ x: 3, y: 450000 },
257+
{ x: 4, y: 750000 },
258+
],
259+
},
260+
{
261+
title: "Average",
262+
type: "threshold",
263+
y: 400000,
264+
},
265+
]}
266+
xDomain={[0, 1, 2, 3, 4]}
267+
yDomain={[0, 1000000]}
268+
showFilter
269+
xTitle="X Axis"
270+
yTitle="Y Axis"
271+
legendTitle="Legend"
272+
/>
273+
</ExampleContainer>
274+
</>
275+
);
276+
277+
export const Chromatic = BarChart.bind({});
278+
Chromatic.play = async ({ canvasElement }) => {
279+
const canvas = within(canvasElement);
280+
await userEvent.click(canvas.getAllByTitle("Clear selection")[1]);
281+
};

0 commit comments

Comments
 (0)