Skip to content

Commit 57bcc41

Browse files
Mash707Mash707
authored
chore(patterns): convert to typescript part two (#11899)
* chore(patterns): convert to typescript * converted remaining examples
1 parent d7e7e05 commit 57bcc41

7 files changed

Lines changed: 563 additions & 505 deletions

File tree

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
import { getResizeObserver } from '@patternfly/react-core';
3+
import { useEffect, useRef, useState } from 'react';
4+
5+
interface PetData {
6+
x?: string;
7+
y?: number;
8+
name?: string;
9+
}
10+
11+
export const PatternsAll: React.FunctionComponent = () => {
12+
const containerRef = useRef(null);
13+
const observer = useRef(() => {});
14+
const [extraHeight, setExtraHeight] = useState(0);
15+
const [width, setWidth] = useState(0);
16+
17+
const handleResize = () => {
18+
if (containerRef.current && containerRef.current.clientWidth) {
19+
setWidth(containerRef.current.clientWidth);
20+
}
21+
};
22+
const handleLegendAllowWrap = (newExtraHeight) => {
23+
if (newExtraHeight !== extraHeight) {
24+
setExtraHeight(newExtraHeight);
25+
}
26+
};
27+
const getHeight = (baseHeight) => baseHeight + extraHeight;
28+
29+
useEffect(() => {
30+
observer.current = getResizeObserver(containerRef.current, handleResize);
31+
handleResize();
32+
33+
return () => {
34+
observer.current();
35+
};
36+
}, []);
37+
38+
const height = getHeight(260);
39+
40+
const data: PetData[] = [
41+
{ x: 'Cats', y: 6 },
42+
{ x: 'Dogs', y: 6 },
43+
{ x: 'Birds', y: 6 },
44+
{ x: 'Fish', y: 6 },
45+
{ x: 'Rabbits', y: 6 },
46+
{ x: 'Squirels', y: 6 },
47+
{ x: 'Chipmunks', y: 6 },
48+
{ x: 'Bats', y: 6 },
49+
{ x: 'Ducks', y: 6 },
50+
{ x: 'Geese', y: 6 },
51+
{ x: 'Bobcats', y: 6 },
52+
{ x: 'Foxes', y: 6 },
53+
{ x: 'Coyotes', y: 6 },
54+
{ x: 'Deer', y: 6 },
55+
{ x: 'Bears', y: 10 }
56+
];
57+
58+
const legendData: PetData[] = [
59+
{ name: 'Cats: 6' },
60+
{ name: 'Dogs: 6' },
61+
{ name: 'Birds: 6' },
62+
{ name: 'Fish: 6' },
63+
{ name: 'Rabbits: 6' },
64+
{ name: 'Squirels: 6' },
65+
{ name: 'Chipmunks: 6' },
66+
{ name: 'Bats: 6' },
67+
{ name: 'Ducks: 6' },
68+
{ name: 'Geese: 6' },
69+
{ name: 'Bobcat: 6' },
70+
{ name: 'Foxes: 6' },
71+
{ name: 'Coyotes: 6' },
72+
{ name: 'Deer: 6' },
73+
{ name: 'Bears: 6' }
74+
];
75+
76+
return (
77+
<div ref={containerRef} style={{ height: height + 'px' }}>
78+
<ChartPie
79+
ariaDesc="Average number of pets"
80+
ariaTitle="Pie chart example"
81+
constrainToVisibleArea
82+
data={data}
83+
hasPatterns
84+
height={height}
85+
labels={({ datum }) => `${datum.x}: ${datum.y}`}
86+
legendData={legendData}
87+
legendAllowWrap={handleLegendAllowWrap}
88+
legendPosition="bottom"
89+
name="chart12"
90+
padding={{
91+
bottom: getHeight(50), // This must be adjusted to maintain the aspec ratio
92+
left: 20,
93+
right: 20,
94+
top: 20
95+
}}
96+
themeColor={ChartThemeColor.multiOrdered}
97+
width={width}
98+
/>
99+
</div>
100+
);
101+
};

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

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

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
3+
import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
4+
5+
interface PetData {
6+
x?: string;
7+
y?: number;
8+
name?: string;
9+
}
10+
11+
export const PatternsCustomDefs: React.FunctionComponent = () => {
12+
const data: PetData[] = [
13+
{ x: 'Cats', y: 35 },
14+
{ x: 'Dogs', y: 55 },
15+
{ x: 'Birds', y: 10 }
16+
];
17+
const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];
18+
19+
return (
20+
<div style={{ height: '230px', width: '350px' }}>
21+
<svg aria-hidden height="0" width="0" style={{ display: 'block' }}>
22+
<defs>
23+
<pattern
24+
id="pattern1"
25+
patternUnits="userSpaceOnUse"
26+
patternContentUnits="userSpaceOnUse"
27+
width="10"
28+
height="10"
29+
x="0"
30+
y="0"
31+
>
32+
<path d="M 0 0 L 5 10 L 10 0" stroke={chart_color_blue_300.value} strokeWidth="2" fill="none"></path>
33+
</pattern>
34+
<pattern
35+
id="pattern2"
36+
patternUnits="userSpaceOnUse"
37+
patternContentUnits="userSpaceOnUse"
38+
width="10"
39+
height="10"
40+
x="0"
41+
y="0"
42+
>
43+
<path
44+
d="M 0 3 L 5 3 L 5 0 M 5 10 L 5 7 L 10 7"
45+
stroke={chart_color_green_300.value}
46+
strokeWidth="2"
47+
fill="none"
48+
></path>
49+
</pattern>
50+
</defs>
51+
</svg>
52+
<ChartPie
53+
ariaDesc="Average number of pets"
54+
ariaTitle="Pie chart example"
55+
constrainToVisibleArea
56+
data={data}
57+
height={230}
58+
labels={({ datum }) => `${datum.x}: ${datum.y}`}
59+
legendData={legendData}
60+
legendOrientation="vertical"
61+
legendPosition="right"
62+
name="chart11"
63+
padding={{
64+
bottom: 20,
65+
left: 20,
66+
right: 140, // Adjusted to accommodate legend
67+
top: 20
68+
}}
69+
patternScale={['url("#pattern1")', 'url("#pattern2")', null]}
70+
themeColor={ChartThemeColor.multiUnordered}
71+
width={350}
72+
/>
73+
</div>
74+
);
75+
};

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

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

0 commit comments

Comments
 (0)