Skip to content

Commit 3ff2e05

Browse files
Mash707Mash707
authored
chore(chart bullet): convert to typescript part two (#11758)
* chore(chart bullet): convert to typescript part two * added remaining examples * added variables
1 parent 7d676cf commit 3ff2e05

9 files changed

+711
-516
lines changed

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md

Lines changed: 16 additions & 516 deletions
Large diffs are not rendered by default.

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletCustomLabels.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ChartAxis, ChartBullet } from '@patternfly/react-charts/victory';
2+
3+
interface ChartData {
4+
name: string;
5+
y?: number;
6+
}
7+
8+
export const ChartBulletCustomLabels: React.FunctionComponent = () => {
9+
const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 88 }];
10+
const primarySegmentedMeasureData: ChartData[] = [{ name: 'Measure', y: 60 }];
11+
const qualitativeRangeData: ChartData[] = [
12+
{ name: 'Range', y: 50 },
13+
{ name: 'Range', y: 75 }
14+
];
15+
16+
return (
17+
<div style={{ height: '150px', width: '600px' }}>
18+
<ChartBullet
19+
ariaDesc="Storage capacity"
20+
ariaTitle="Bullet chart example"
21+
axisComponent={
22+
<ChartAxis
23+
tickValues={[0, 25, 50, 75, 100]}
24+
tickFormat={(val) => {
25+
switch (val) {
26+
case 0:
27+
return 'New';
28+
case 25:
29+
return 'Beginner';
30+
case 50:
31+
return 'Intermediate';
32+
case 75:
33+
return 'Advanced';
34+
case 100:
35+
return 'Expert';
36+
}
37+
}}
38+
/>
39+
}
40+
comparativeWarningMeasureData={comparativeWarningMeasureData}
41+
constrainToVisibleArea
42+
height={150}
43+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
44+
maxDomain={{ y: 100 }}
45+
name="chart12"
46+
primarySegmentedMeasureData={primarySegmentedMeasureData}
47+
qualitativeRangeData={qualitativeRangeData}
48+
width={600}
49+
/>
50+
</div>
51+
);
52+
};

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletCustomSize.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { ChartBullet } from '@patternfly/react-charts/victory';
2+
3+
interface ChartData {
4+
name: string;
5+
y?: number;
6+
}
7+
8+
export const ChartBulletCustomSize: React.FunctionComponent = () => {
9+
const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 88 }];
10+
const comparativeWarningMeasureLegendData: ChartData[] = [{ name: 'Warning' }];
11+
const primarySegmentedMeasureData: ChartData[] = [{ name: 'Measure', y: 60 }];
12+
const primarySegmentedMeasureLegendData: ChartData[] = [{ name: 'Measure 1' }];
13+
const qualitativeRangeData: ChartData[] = [
14+
{ name: 'Range', y: 50 },
15+
{ name: 'Range', y: 75 }
16+
];
17+
const qualitativeRangeLegendData: ChartData[] = [{ name: 'Range 1' }, { name: 'Range 2' }];
18+
19+
return (
20+
<div style={{ height: '200px', width: '600px' }}>
21+
<ChartBullet
22+
ariaDesc="Storage capacity"
23+
ariaTitle="Bullet chart example"
24+
bulletSize={160}
25+
comparativeWarningMeasureData={comparativeWarningMeasureData}
26+
comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
27+
height={200}
28+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
29+
maxDomain={{ y: 100 }}
30+
name="chart13"
31+
padding={{
32+
bottom: 50,
33+
left: 150, // Adjusted to accommodate labels
34+
right: 50,
35+
top: 50
36+
}}
37+
primarySegmentedMeasureData={primarySegmentedMeasureData}
38+
primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
39+
qualitativeRangeData={qualitativeRangeData}
40+
qualitativeRangeLegendData={qualitativeRangeLegendData}
41+
subTitle="Measure details"
42+
title="Text label"
43+
width={600}
44+
/>
45+
</div>
46+
);
47+
};

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletHorizontalGroup.tsx

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { ChartBullet, ChartContainer } from '@patternfly/react-charts/victory';
2+
3+
interface ChartData {
4+
name: string;
5+
y?: number;
6+
}
7+
8+
export const ChartBulletHorizontalGroup: React.FunctionComponent = () => {
9+
const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 78 }];
10+
const primarySegmentedMeasureData: ChartData[] = [
11+
{ name: 'Measure', y: 15 },
12+
{ name: 'Measure', y: 50 }
13+
];
14+
const qualitativeRangeData: ChartData[] = [
15+
{ name: 'Range', y: 40 },
16+
{ name: 'Range', y: 65 }
17+
];
18+
19+
return (
20+
<div style={{ height: '500px', width: '600px' }}>
21+
<ChartContainer title="Bullet chart example" height={500} width={600}>
22+
<ChartBullet
23+
comparativeWarningMeasureData={comparativeWarningMeasureData}
24+
constrainToVisibleArea
25+
height={500}
26+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
27+
maxDomain={{ y: 100 }}
28+
name="chart14"
29+
padding={{
30+
bottom: 100, // Adjusted to accommodate legend
31+
left: 150, // Adjusted to accommodate labels
32+
right: 50,
33+
top: 75
34+
}}
35+
primarySegmentedMeasureData={primarySegmentedMeasureData}
36+
qualitativeRangeData={qualitativeRangeData}
37+
standalone={false}
38+
subTitle="Measure details"
39+
title="Text label"
40+
width={600}
41+
/>
42+
<ChartBullet
43+
comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}
44+
constrainToVisibleArea
45+
height={500}
46+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
47+
maxDomain={{ y: 100 }}
48+
name="chart15"
49+
padding={{
50+
bottom: 100, // Adjusted to accommodate legend
51+
left: 150, // Adjusted to accommodate labels
52+
right: 50,
53+
top: 300
54+
}}
55+
primarySegmentedMeasureData={[
56+
{ name: 'Measure', y: 25 },
57+
{ name: 'Measure', y: 60 }
58+
]}
59+
qualitativeRangeData={[
60+
{ name: 'Range', y: 50 },
61+
{ name: 'Range', y: 75 }
62+
]}
63+
standalone={false}
64+
subTitle="Measure details"
65+
title="Text label"
66+
width={600}
67+
/>
68+
<ChartBullet
69+
comparativeWarningMeasureData={[{ name: 'Warning', y: 98 }]}
70+
constrainToVisibleArea
71+
height={500}
72+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
73+
maxDomain={{ y: 100 }}
74+
name="chart16"
75+
padding={{
76+
bottom: 100, // Adjusted to accommodate legend
77+
left: 150, // Adjusted to accommodate labels
78+
right: 50,
79+
top: 525
80+
}}
81+
primarySegmentedMeasureData={[
82+
{ name: 'Measure', y: 35 },
83+
{ name: 'Measure', y: 70 }
84+
]}
85+
qualitativeRangeData={[
86+
{ name: 'Range', y: 60 },
87+
{ name: 'Range', y: 85 }
88+
]}
89+
standalone={false}
90+
subTitle="Measure details"
91+
title="Text label"
92+
width={600}
93+
/>
94+
<ChartBullet
95+
comparativeWarningMeasureData={comparativeWarningMeasureData}
96+
comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
97+
constrainToVisibleArea
98+
height={500}
99+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
100+
maxDomain={{ y: 100 }}
101+
name="chart17"
102+
padding={{
103+
bottom: 100, // Adjusted to accommodate legend
104+
left: 150, // Adjusted to accommodate labels
105+
right: 50,
106+
top: 750
107+
}}
108+
primarySegmentedMeasureData={primarySegmentedMeasureData}
109+
primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
110+
qualitativeRangeData={qualitativeRangeData}
111+
qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
112+
standalone={false}
113+
subTitle="Measure details"
114+
title="Text label"
115+
width={600}
116+
/>
117+
</ChartContainer>
118+
</div>
119+
);
120+
};

‎packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletHorizontalGroupTitle.tsx

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { ChartBullet, ChartContainer } from '@patternfly/react-charts/victory';
2+
3+
interface ChartData {
4+
name: string;
5+
y?: number;
6+
}
7+
8+
export const ChartBulletHorizontalGroupTitle: React.FunctionComponent = () => {
9+
const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 78 }];
10+
const primarySegmentedMeasureData: ChartData[] = [
11+
{ name: 'Measure', y: 15 },
12+
{ name: 'Measure', y: 50 }
13+
];
14+
const qualitativeRangeData: ChartData[] = [
15+
{ name: 'Range', y: 40 },
16+
{ name: 'Range', y: 65 }
17+
];
18+
19+
return (
20+
<div style={{ height: '600px', width: '600px' }}>
21+
<ChartContainer title="Bullet chart example" height={600} width={600}>
22+
<ChartBullet
23+
comparativeWarningMeasureData={comparativeWarningMeasureData}
24+
constrainToVisibleArea
25+
groupSubTitle="Measure details"
26+
groupTitle="Text label"
27+
height={575}
28+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
29+
maxDomain={{ y: 100 }}
30+
name="chart22"
31+
padding={{
32+
bottom: 100, // Adjusted to accommodate legend
33+
left: 150, // Adjusted to accommodate labels
34+
right: 50,
35+
top: 275 // Adjusted to accommodate group labels
36+
}}
37+
primarySegmentedMeasureData={primarySegmentedMeasureData}
38+
qualitativeRangeData={qualitativeRangeData}
39+
standalone={false}
40+
subTitle="Measure details"
41+
title="Text label"
42+
width={600}
43+
/>
44+
<ChartBullet
45+
comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}
46+
constrainToVisibleArea
47+
height={600}
48+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
49+
maxDomain={{ y: 100 }}
50+
name="chart23"
51+
padding={{
52+
bottom: 100, // Adjusted to accommodate legend
53+
left: 150, // Adjusted to accommodate labels
54+
right: 50,
55+
top: 500 // Adjusted to accommodate group labels
56+
}}
57+
primarySegmentedMeasureData={[
58+
{ name: 'Measure', y: 25 },
59+
{ name: 'Measure', y: 60 }
60+
]}
61+
qualitativeRangeData={[
62+
{ name: 'Range', y: 50 },
63+
{ name: 'Range', y: 75 }
64+
]}
65+
standalone={false}
66+
subTitle="Measure details"
67+
title="Text label"
68+
width={600}
69+
/>
70+
<ChartBullet
71+
comparativeWarningMeasureData={[{ name: 'Warning', y: 98 }]}
72+
constrainToVisibleArea
73+
height={600}
74+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
75+
maxDomain={{ y: 100 }}
76+
name="chart24"
77+
padding={{
78+
bottom: 100, // Adjusted to accommodate legend
79+
left: 150, // Adjusted to accommodate labels
80+
right: 50,
81+
top: 725 // Adjusted to accommodate group labels
82+
}}
83+
primarySegmentedMeasureData={[
84+
{ name: 'Measure', y: 35 },
85+
{ name: 'Measure', y: 70 }
86+
]}
87+
qualitativeRangeData={[
88+
{ name: 'Range', y: 60 },
89+
{ name: 'Range', y: 85 }
90+
]}
91+
standalone={false}
92+
subTitle="Measure details"
93+
title="Text label"
94+
width={600}
95+
/>
96+
<ChartBullet
97+
comparativeWarningMeasureData={comparativeWarningMeasureData}
98+
comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
99+
constrainToVisibleArea
100+
height={600}
101+
labels={({ datum }) => `${datum.name}: ${datum.y}`}
102+
maxDomain={{ y: 100 }}
103+
name="chart25"
104+
padding={{
105+
bottom: 100, // Adjusted to accommodate legend
106+
left: 150, // Adjusted to accommodate labels
107+
right: 50,
108+
top: 950 // Adjusted to accommodate group labels
109+
}}
110+
primarySegmentedMeasureData={primarySegmentedMeasureData}
111+
primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
112+
qualitativeRangeData={qualitativeRangeData}
113+
qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
114+
standalone={false}
115+
subTitle="Measure details"
116+
title="Text label"
117+
width={600}
118+
/>
119+
</ChartContainer>
120+
</div>
121+
);
122+
};

0 commit comments

Comments
 (0)