Skip to content

Commit ff628a9

Browse files
Mash707Mash707
authored
chore(patterns): convert to typescript (#11898)
* chore(patterns): convert to typescript * converted remaining examples
1 parent 57bcc41 commit ff628a9

7 files changed

Lines changed: 350 additions & 179 deletions

File tree

‎packages/react-charts/src/victory/components/Patterns/examples/PatternsBarChart.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import {
2+
Chart,
3+
ChartAxis,
4+
ChartBar,
5+
ChartGroup,
6+
ChartThemeColor,
7+
ChartVoronoiContainer
8+
} from '@patternfly/react-charts/victory';
9+
10+
interface PetData {
11+
x?: string;
12+
y?: number;
13+
name?: string;
14+
}
15+
16+
export const PatternsBarChart: React.FunctionComponent = () => {
17+
const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];
18+
const data1: PetData[] = [
19+
{ name: 'Cats', x: '2015', y: 1 },
20+
{ name: 'Cats', x: '2016', y: 2 },
21+
{ name: 'Cats', x: '2017', y: 5 },
22+
{ name: 'Cats', x: '2018', y: 3 }
23+
];
24+
25+
const data2: PetData[] = [
26+
{ name: 'Dogs', x: '2015', y: 2 },
27+
{ name: 'Dogs', x: '2016', y: 1 },
28+
{ name: 'Dogs', x: '2017', y: 7 },
29+
{ name: 'Dogs', x: '2018', y: 4 }
30+
];
31+
32+
const data3: PetData[] = [
33+
{ name: 'Birds', x: '2015', y: 4 },
34+
{ name: 'Birds', x: '2016', y: 4 },
35+
{ name: 'Birds', x: '2017', y: 9 },
36+
{ name: 'Birds', x: '2018', y: 7 }
37+
];
38+
39+
const data4: PetData[] = [
40+
{ name: 'Mice', x: '2015', y: 3 },
41+
{ name: 'Mice', x: '2016', y: 3 },
42+
{ name: 'Mice', x: '2017', y: 8 },
43+
{ name: 'Mice', x: '2018', y: 5 }
44+
];
45+
46+
return (
47+
<div style={{ height: '275px', width: '450px' }}>
48+
<Chart
49+
ariaDesc="Average number of pets"
50+
ariaTitle="Bar chart example"
51+
containerComponent={
52+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
53+
}
54+
domainPadding={{ x: [30, 25] }}
55+
legendData={legendData}
56+
legendPosition="bottom"
57+
hasPatterns
58+
height={275}
59+
name="chart2"
60+
padding={{
61+
bottom: 75, // Adjusted to accommodate legend
62+
left: 50,
63+
right: 50,
64+
top: 50
65+
}}
66+
themeColor={ChartThemeColor.purple}
67+
width={450}
68+
>
69+
<ChartAxis />
70+
<ChartAxis dependentAxis showGrid />
71+
<ChartGroup offset={11}>
72+
<ChartBar data={data1} />
73+
<ChartBar data={data2} />
74+
<ChartBar data={data3} />
75+
<ChartBar data={data4} />
76+
</ChartGroup>
77+
</Chart>
78+
</div>
79+
);
80+
};

‎packages/react-charts/src/victory/components/Patterns/examples/PatternsBasicPieChart.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { ChartPie } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const PatternsBasicPieChart: React.FunctionComponent = () => {
10+
const data: PetData[] = [
11+
{ x: 'Cats', y: 35 },
12+
{ x: 'Dogs', y: 55 },
13+
{ x: 'Birds', y: 10 }
14+
];
15+
const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];
16+
17+
return (
18+
<div style={{ height: '230px', width: '350px' }}>
19+
<ChartPie
20+
ariaDesc="Average number of pets"
21+
ariaTitle="Pie chart example"
22+
constrainToVisibleArea
23+
data={data}
24+
hasPatterns
25+
height={230}
26+
labels={({ datum }) => `${datum.x}: ${datum.y}`}
27+
legendData={legendData}
28+
legendOrientation="vertical"
29+
legendPosition="right"
30+
name="chart1"
31+
padding={{
32+
bottom: 20,
33+
left: 20,
34+
right: 140, // Adjusted to accommodate legend
35+
top: 20
36+
}}
37+
width={350}
38+
/>
39+
</div>
40+
);
41+
};

‎packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutChart.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const PatternsDonutChart: React.FunctionComponent = () => {
10+
const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];
11+
12+
const data: PetData[] = [
13+
{ x: 'Cats', y: 35 },
14+
{ x: 'Dogs', y: 55 },
15+
{ x: 'Birds', y: 10 }
16+
];
17+
18+
return (
19+
<div style={{ height: '230px', width: '350px' }}>
20+
<ChartDonut
21+
ariaDesc="Average number of pets"
22+
ariaTitle="Donut chart example"
23+
constrainToVisibleArea
24+
data={data}
25+
hasPatterns
26+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
27+
legendData={legendData}
28+
legendOrientation="vertical"
29+
legendPosition="right"
30+
name="chart4"
31+
padding={{
32+
bottom: 20,
33+
left: 20,
34+
right: 140, // Adjusted to accommodate legend
35+
top: 20
36+
}}
37+
subTitle="Pets"
38+
title="100"
39+
themeColor={ChartThemeColor.yellow}
40+
width={350}
41+
/>
42+
</div>
43+
);
44+
};

‎packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationChart.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
3+
interface Data {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const PatternsDonutUtilizationChart: React.FunctionComponent = () => {
10+
const data: Data = { x: 'Storage capacity', y: 45 };
11+
const legendData: Data[] = [{ name: `Storage capacity: 45%` }, { name: 'Unused' }];
12+
13+
return (
14+
<div style={{ height: '275px', width: '300px' }}>
15+
<ChartDonutUtilization
16+
ariaDesc="Storage capacity"
17+
ariaTitle="Donut utilization chart example"
18+
constrainToVisibleArea
19+
data={data}
20+
hasPatterns
21+
height={275}
22+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
23+
legendData={legendData}
24+
legendPosition="bottom"
25+
name="chart5"
26+
padding={{
27+
bottom: 65, // Adjusted to accommodate legend
28+
left: 20,
29+
right: 20,
30+
top: 20
31+
}}
32+
subTitle="of 100 GBps"
33+
title="45%"
34+
themeColor={ChartThemeColor.green}
35+
thresholds={[{ value: 60 }, { value: 90 }]}
36+
width={300}
37+
/>
38+
</div>
39+
);
40+
};

‎packages/react-charts/src/victory/components/Patterns/examples/PatternsDonutUtilizationThreshold.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
3+
interface Data {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const PatternsDonutUtilizationThreshold: React.FunctionComponent = () => {
10+
const data1: Data[] = [
11+
{ x: 'Warning at 60%', y: 60 },
12+
{ x: 'Danger at 90%', y: 90 }
13+
];
14+
const data2: Data = { x: 'Storage capacity', y: 45 };
15+
const legendData: Data[] = [
16+
{ name: `Storage capacity: 45%` },
17+
{ name: 'Warning threshold at 60%' },
18+
{ name: 'Danger threshold at 90%' }
19+
];
20+
21+
return (
22+
<div style={{ height: '275px', width: '675px' }}>
23+
<ChartDonutThreshold
24+
ariaDesc="Storage capacity"
25+
ariaTitle="Donut utilization chart with static threshold example"
26+
constrainToVisibleArea
27+
data={data1}
28+
hasPatterns
29+
height={275}
30+
labels={({ datum }) => (datum.x ? datum.x : null)}
31+
name="chart6"
32+
padding={{
33+
bottom: 65, // Adjusted to accommodate legend
34+
left: 20,
35+
right: 20,
36+
top: 20
37+
}}
38+
width={675}
39+
>
40+
<ChartDonutUtilization
41+
data={data2}
42+
labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
43+
legendData={legendData}
44+
legendPosition="bottom"
45+
subTitle="of 100 GBps"
46+
title="45%"
47+
themeColor={ChartThemeColor.orange}
48+
/>
49+
</ChartDonutThreshold>
50+
</div>
51+
);
52+
};

‎packages/react-charts/src/victory/components/Patterns/examples/PatternsStackChart.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import {
2+
Chart,
3+
ChartAxis,
4+
ChartBar,
5+
ChartStack,
6+
ChartThemeColor,
7+
ChartVoronoiContainer
8+
} from '@patternfly/react-charts/victory';
9+
10+
interface PetData {
11+
x?: string;
12+
y?: number;
13+
name?: string;
14+
}
15+
16+
export const PatternsStackChart: React.FunctionComponent = () => {
17+
const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];
18+
const data1: PetData[] = [
19+
{ name: 'Cats', x: '2015', y: 1 },
20+
{ name: 'Cats', x: '2016', y: 2 },
21+
{ name: 'Cats', x: '2017', y: 5 },
22+
{ name: 'Cats', x: '2018', y: 3 }
23+
];
24+
25+
const data2: PetData[] = [
26+
{ name: 'Dogs', x: '2015', y: 2 },
27+
{ name: 'Dogs', x: '2016', y: 1 },
28+
{ name: 'Dogs', x: '2017', y: 7 },
29+
{ name: 'Dogs', x: '2018', y: 4 }
30+
];
31+
32+
const data3: PetData[] = [
33+
{ name: 'Birds', x: '2015', y: 4 },
34+
{ name: 'Birds', x: '2016', y: 4 },
35+
{ name: 'Birds', x: '2017', y: 9 },
36+
{ name: 'Birds', x: '2018', y: 7 }
37+
];
38+
39+
const data4: PetData[] = [
40+
{ name: 'Mice', x: '2015', y: 3 },
41+
{ name: 'Mice', x: '2016', y: 3 },
42+
{ name: 'Mice', x: '2017', y: 8 },
43+
{ name: 'Mice', x: '2018', y: 5 }
44+
];
45+
46+
return (
47+
<div style={{ height: '250px', width: '600px' }}>
48+
<Chart
49+
ariaDesc="Average number of pets"
50+
ariaTitle="Stack chart example"
51+
containerComponent={
52+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
53+
}
54+
domainPadding={{ x: [30, 25] }}
55+
legendData={legendData}
56+
legendOrientation="vertical"
57+
legendPosition="right"
58+
hasPatterns
59+
height={250}
60+
name="chart3"
61+
padding={{
62+
bottom: 50,
63+
left: 50,
64+
right: 200, // Adjusted to accommodate legend
65+
top: 50
66+
}}
67+
themeColor={ChartThemeColor.green}
68+
width={600}
69+
>
70+
<ChartAxis />
71+
<ChartAxis dependentAxis showGrid />
72+
<ChartStack>
73+
<ChartBar data={data1} />
74+
<ChartBar data={data2} />
75+
<ChartBar data={data3} />
76+
<ChartBar data={data4} />
77+
</ChartStack>
78+
</Chart>
79+
</div>
80+
);
81+
};

0 commit comments

Comments
 (0)