Skip to content

Commit 56e154c

Browse files
jperalsjperals
authored
chore: Create smaller dev pages for Bar chart (#3363)
1 parent 38d9b39 commit 56e154c

6 files changed

+313
-0
lines changed

‎pages/bar-chart/horizontal-bars-permutations.page.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import BarChart, { BarChartProps } from '~components/bar-chart';
6+
7+
import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
8+
import createPermutations from '../utils/permutations';
9+
import PermutationsView from '../utils/permutations-view';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const permutations = createPermutations<BarChartProps<string>>([
13+
{
14+
i18nStrings: [commonProps.i18nStrings],
15+
ariaLabel: ['Test chart'],
16+
height: [200],
17+
series: [multipleBarsData, [multipleBarsData[0], multipleBarsData[1]]],
18+
xScaleType: ['categorical'],
19+
xDomain: [undefined, ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']],
20+
yDomain: [undefined, [0, 15]],
21+
horizontalBars: [true],
22+
stackedBars: [false],
23+
xTitle: ['X Title'],
24+
yTitle: ['Y Title'],
25+
},
26+
]);
27+
28+
export default function () {
29+
return (
30+
<>
31+
<h1>Bar chart permutations - horizontal bars</h1>
32+
<ScreenshotArea disableAnimations={true}>
33+
<PermutationsView permutations={permutations} render={permutation => <BarChart<any> {...permutation} />} />
34+
</ScreenshotArea>
35+
</>
36+
);
37+
}

‎pages/bar-chart/horizontal-stacked-bars-permutations.page.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import BarChart, { BarChartProps } from '~components/bar-chart';
6+
7+
import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
8+
import createPermutations from '../utils/permutations';
9+
import PermutationsView from '../utils/permutations-view';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const permutations = createPermutations<BarChartProps<string>>([
13+
{
14+
i18nStrings: [commonProps.i18nStrings],
15+
ariaLabel: ['Test chart'],
16+
height: [200],
17+
series: [multipleBarsData, [multipleBarsData[0], multipleBarsData[1]]],
18+
xScaleType: ['categorical'],
19+
xDomain: [undefined, ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']],
20+
yDomain: [undefined, [0, 15]],
21+
horizontalBars: [true],
22+
stackedBars: [true],
23+
xTitle: ['X Title'],
24+
yTitle: ['Y Title'],
25+
},
26+
]);
27+
28+
export default function () {
29+
return (
30+
<>
31+
<h1>Bar chart permutations - horizontal stacked bars</h1>
32+
<ScreenshotArea disableAnimations={true}>
33+
<PermutationsView permutations={permutations} render={permutation => <BarChart<any> {...permutation} />} />
34+
</ScreenshotArea>
35+
</>
36+
);
37+
}

‎pages/bar-chart/other-permutations.page.tsx

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import BarChart, { BarChartProps } from '~components/bar-chart';
6+
import { colorChartsThresholdInfo, colorChartsThresholdNeutral } from '~design-tokens';
7+
8+
import {
9+
commonProps,
10+
data1,
11+
data2,
12+
dateTimeFormatter,
13+
latencyData,
14+
multipleNegativeBarsData,
15+
negativeData,
16+
} from '../mixed-line-bar-chart/common';
17+
import createPermutations from '../utils/permutations';
18+
import PermutationsView from '../utils/permutations-view';
19+
import ScreenshotArea from '../utils/screenshot-area';
20+
import { smallBarsData } from './common';
21+
22+
const timeLatencyData = latencyData.map(({ time, p90 }) => ({ x: time, y: p90 }));
23+
24+
const stringPermutations = createPermutations<BarChartProps<string>>([
25+
// Skipping things like empty states because these are already covered extensively for line and mixed charts
26+
27+
// Stacked bars with mix of positive/negative numbers
28+
{
29+
i18nStrings: [commonProps.i18nStrings],
30+
ariaLabel: ['Test chart'],
31+
height: [200],
32+
series: [multipleNegativeBarsData],
33+
xScaleType: ['categorical'],
34+
xDomain: [['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']],
35+
yDomain: [[-6, 10]],
36+
horizontalBars: [true, false],
37+
stackedBars: [true],
38+
xTitle: ['X Title'],
39+
yTitle: ['Y Title'],
40+
},
41+
]);
42+
43+
const timePermutations = createPermutations<BarChartProps<Date>>([
44+
// Date/time series
45+
{
46+
i18nStrings: [{ ...commonProps.i18nStrings, xTickFormatter: dateTimeFormatter }],
47+
ariaLabel: ['Test chart'],
48+
height: [200],
49+
series: [
50+
[
51+
{ title: 'Series 1', type: 'bar', data: timeLatencyData },
52+
{ title: 'Series 2', type: 'bar', data: timeLatencyData },
53+
{ title: 'Threshold', type: 'threshold', y: 150, color: colorChartsThresholdNeutral },
54+
],
55+
],
56+
xScaleType: ['categorical'],
57+
yDomain: [[100, 300]],
58+
xTitle: ['Time'],
59+
yTitle: ['Latency (ms)'],
60+
hideFilter: [true],
61+
hideLegend: [true],
62+
},
63+
// Negative data
64+
{
65+
i18nStrings: [{ ...commonProps.i18nStrings, xTickFormatter: dateTimeFormatter }],
66+
ariaLabel: ['Test chart'],
67+
height: [200],
68+
series: [[{ title: 'Series 1', type: 'bar', data: negativeData }]],
69+
xScaleType: ['categorical'],
70+
yDomain: [[-10000, 50000]],
71+
horizontalBars: [false, true],
72+
xTitle: ['X axis'],
73+
yTitle: ['Y axis'],
74+
hideFilter: [true],
75+
hideLegend: [true],
76+
},
77+
]);
78+
79+
const numberPermutations = createPermutations<BarChartProps<number>>([
80+
// Categorical with numbers
81+
{
82+
i18nStrings: [commonProps.i18nStrings],
83+
ariaLabel: ['Test chart'],
84+
height: [200],
85+
series: [
86+
[
87+
{ title: 'Series 1', type: 'bar', data: data2 },
88+
{ title: 'Series 2', type: 'bar', data: data1 },
89+
{ title: 'Threshold', type: 'threshold', y: 150, color: colorChartsThresholdInfo },
90+
],
91+
],
92+
xScaleType: ['categorical'],
93+
yDomain: [[0, 310]],
94+
xTitle: ['Food'],
95+
yTitle: ['Calories'],
96+
hideFilter: [true],
97+
hideLegend: [true],
98+
},
99+
]);
100+
101+
const smallGroupsPermutations = createPermutations<BarChartProps<string>>([
102+
{
103+
i18nStrings: [commonProps.i18nStrings],
104+
ariaLabel: ['Test chart'],
105+
height: [200],
106+
series: [smallBarsData],
107+
xScaleType: ['categorical'],
108+
xDomain: [['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']],
109+
yDomain: [[0, 1000]],
110+
horizontalBars: [true, false],
111+
stackedBars: [true],
112+
xTitle: ['X Title'],
113+
yTitle: ['Y Title'],
114+
},
115+
]);
116+
117+
const permutations = [...stringPermutations, ...timePermutations, ...numberPermutations, ...smallGroupsPermutations];
118+
119+
export default function () {
120+
return (
121+
<>
122+
<h1>Bar chart permutations</h1>
123+
<ScreenshotArea disableAnimations={true}>
124+
<PermutationsView permutations={permutations} render={permutation => <BarChart<any> {...permutation} />} />
125+
</ScreenshotArea>
126+
</>
127+
);
128+
}

‎pages/bar-chart/threshold-permutations.page.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import BarChart, { BarChartProps } from '~components/bar-chart';
6+
7+
import { commonProps, multipleNegativeBarsDataWithThreshold } from '../mixed-line-bar-chart/common';
8+
import createPermutations from '../utils/permutations';
9+
import PermutationsView from '../utils/permutations-view';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const permutations = createPermutations<BarChartProps<string>>([
13+
{
14+
i18nStrings: [commonProps.i18nStrings],
15+
ariaLabel: ['Test chart'],
16+
height: [200],
17+
series: [multipleNegativeBarsDataWithThreshold],
18+
xScaleType: ['categorical'],
19+
xDomain: [['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']],
20+
yDomain: [[-6, 10]],
21+
horizontalBars: [true, false],
22+
stackedBars: [true, false],
23+
xTitle: ['X Title'],
24+
yTitle: ['Y Title'],
25+
},
26+
]);
27+
28+
export default function () {
29+
return (
30+
<>
31+
<h1>Bar chart permutations - thresholds</h1>
32+
<ScreenshotArea disableAnimations={true}>
33+
<PermutationsView permutations={permutations} render={permutation => <BarChart<any> {...permutation} />} />
34+
</ScreenshotArea>
35+
</>
36+
);
37+
}

‎pages/bar-chart/vertical-bars-permutations.page.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import BarChart, { BarChartProps } from '~components/bar-chart';
6+
7+
import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
8+
import createPermutations from '../utils/permutations';
9+
import PermutationsView from '../utils/permutations-view';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const permutations = createPermutations<BarChartProps<string>>([
13+
{
14+
i18nStrings: [commonProps.i18nStrings],
15+
ariaLabel: ['Test chart'],
16+
height: [200],
17+
series: [multipleBarsData, [multipleBarsData[0], multipleBarsData[1]]],
18+
xScaleType: ['categorical'],
19+
xDomain: [undefined, ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']],
20+
yDomain: [undefined, [0, 15]],
21+
horizontalBars: [false],
22+
stackedBars: [false],
23+
xTitle: ['X Title'],
24+
yTitle: ['Y Title'],
25+
},
26+
]);
27+
28+
export default function () {
29+
return (
30+
<>
31+
<h1>Bar chart permutations - vertical bars</h1>
32+
<ScreenshotArea disableAnimations={true}>
33+
<PermutationsView permutations={permutations} render={permutation => <BarChart<any> {...permutation} />} />
34+
</ScreenshotArea>
35+
</>
36+
);
37+
}

‎pages/bar-chart/vertical-stacked-bars-permutations.page.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import BarChart, { BarChartProps } from '~components/bar-chart';
6+
7+
import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
8+
import createPermutations from '../utils/permutations';
9+
import PermutationsView from '../utils/permutations-view';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const permutations = createPermutations<BarChartProps<string>>([
13+
{
14+
i18nStrings: [commonProps.i18nStrings],
15+
ariaLabel: ['Test chart'],
16+
height: [200],
17+
series: [multipleBarsData, [multipleBarsData[0], multipleBarsData[1]]],
18+
xScaleType: ['categorical'],
19+
xDomain: [undefined, ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']],
20+
yDomain: [undefined, [0, 15]],
21+
horizontalBars: [false],
22+
stackedBars: [true],
23+
xTitle: ['X Title'],
24+
yTitle: ['Y Title'],
25+
},
26+
]);
27+
28+
export default function () {
29+
return (
30+
<>
31+
<h1>Bar chart permutations - vertical stacked bars</h1>
32+
<ScreenshotArea disableAnimations={true}>
33+
<PermutationsView permutations={permutations} render={permutation => <BarChart<any> {...permutation} />} />
34+
</ScreenshotArea>
35+
</>
36+
);
37+
}

0 commit comments

Comments
 (0)