Skip to content

Commit bf11f40

Browse files
Mash707Mash707
authored
chore(chart donut): convert to typescript (#11818)
* chore(chart donut): convert to typescript * convert remaining examples
1 parent f26b518 commit bf11f40

File tree

9 files changed

+328
-188
lines changed

9 files changed

+328
-188
lines changed

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

Lines changed: 15 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -16,216 +16,43 @@ The examples below are based on the [Victory](https://formidable.com/open-source
1616

1717
## Examples
1818
### Basic
19-
```js
20-
import { ChartDonut } from '@patternfly/react-charts/victory';
21-
22-
<div style={{ height: '230px', width: '230px' }}>
23-
<ChartDonut
24-
ariaDesc="Average number of pets"
25-
ariaTitle="Donut chart example"
26-
constrainToVisibleArea
27-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
28-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
29-
name="chart1"
30-
subTitle="Pets"
31-
title="100"
32-
/>
33-
</div>
19+
```ts file = "ChartDonutBasic.tsx"
20+
3421
```
3522

3623
### Right aligned legend
37-
```js
38-
import { ChartDonut } from '@patternfly/react-charts/victory';
39-
40-
<div style={{ height: '230px', width: '350px' }}>
41-
<ChartDonut
42-
ariaDesc="Average number of pets"
43-
ariaTitle="Donut chart example"
44-
constrainToVisibleArea
45-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
46-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
47-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
48-
legendOrientation="vertical"
49-
legendPosition="right"
50-
name="chart2"
51-
padding={{
52-
bottom: 20,
53-
left: 20,
54-
right: 140, // Adjusted to accommodate legend
55-
top: 20
56-
}}
57-
subTitle="Pets"
58-
title="100"
59-
width={350}
60-
/>
61-
</div>
24+
```ts file = "ChartDonutRightAlignedLegend.tsx"
25+
6226
```
6327

6428
### Multi-color (ordered) with right aligned legend
65-
```js
66-
import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
29+
```ts file = "ChartDonutMultiColor.tsx"
6730

68-
<div style={{ height: '230px', width: '350px' }}>
69-
<ChartDonut
70-
ariaDesc="Average number of pets"
71-
ariaTitle="Donut chart example"
72-
constrainToVisibleArea
73-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
74-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
75-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
76-
legendOrientation="vertical"
77-
legendPosition="right"
78-
name="chart3"
79-
padding={{
80-
bottom: 20,
81-
left: 20,
82-
right: 140, // Adjusted to accommodate legend
83-
top: 20
84-
}}
85-
subTitle="Pets"
86-
title="100"
87-
themeColor={ChartThemeColor.multiOrdered}
88-
width={350}
89-
/>
90-
</div>
9131
```
9232

9333
### Bottom aligned legend
94-
```js
95-
import { ChartDonut } from '@patternfly/react-charts/victory';
96-
97-
<div style={{ height: '275px', width: '300px' }}>
98-
<ChartDonut
99-
ariaDesc="Average number of pets"
100-
ariaTitle="Donut chart example"
101-
constrainToVisibleArea
102-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
103-
donutOrientation="top"
104-
height={275}
105-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
106-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
107-
legendPosition="bottom"
108-
legendWidth={225}
109-
name="chart4"
110-
padding={{
111-
bottom: 65, // Adjusted to accommodate legend
112-
left: 20,
113-
right: 20,
114-
top: 20
115-
}}
116-
subTitle="Pets"
117-
title="100"
118-
width={300}
119-
/>
120-
</div>
34+
```ts file = "ChartDonutBottomAlignedLegend.tsx"
35+
12136
```
12237

12338
### Small
124-
```js
125-
import { ChartDonut } from '@patternfly/react-charts/victory';
126-
127-
<div style={{ height: '150px', width: '150px' }}>
128-
<ChartDonut
129-
ariaDesc="Average number of pets"
130-
ariaTitle="Donut chart example"
131-
constrainToVisibleArea
132-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
133-
height={150}
134-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
135-
name="chart5"
136-
subTitle="Pets"
137-
title="100"
138-
width={150}
139-
/>
140-
</div>
39+
```ts file = "ChartDonutSmall.tsx"
40+
14141
```
14242

14343
### Small with right aligned legend
144-
```js
145-
import { ChartDonut } from '@patternfly/react-charts/victory';
146-
147-
<div style={{ height: '150px', width: '275px' }}>
148-
<ChartDonut
149-
ariaDesc="Average number of pets"
150-
ariaTitle="Donut chart example"
151-
constrainToVisibleArea
152-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
153-
height={150}
154-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
155-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
156-
legendOrientation="vertical"
157-
legendPosition="right"
158-
name="chart6"
159-
padding={{
160-
bottom: 20,
161-
left: 20,
162-
right: 145, // Adjusted to accommodate legend
163-
top: 20
164-
}}
165-
subTitle="Pets"
166-
title="100"
167-
width={275}
168-
/>
169-
</div>
44+
```ts file = "ChartDonutSmallRightLegend.tsx"
45+
17046
```
17147

17248
### Small with bottom aligned subtitle
173-
```js
174-
import { ChartDonut } from '@patternfly/react-charts/victory';
175-
176-
<div style={{ height: '165px', width: '275px' }}>
177-
<ChartDonut
178-
ariaDesc="Average number of pets"
179-
ariaTitle="Donut chart example"
180-
constrainToVisibleArea
181-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
182-
height={165}
183-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
184-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
185-
legendOrientation="vertical"
186-
legendPosition="right"
187-
name="chart7"
188-
padding={{
189-
bottom: 25, // Adjusted to accommodate subTitle
190-
left: 20,
191-
right: 145, // Adjusted to accommodate legend
192-
top: 20
193-
}}
194-
subTitle="Pets"
195-
subTitlePosition="bottom"
196-
title="100"
197-
width={275}
198-
/>
199-
</div>
49+
```ts file = "ChartDonutSmallBottomSubtitle.tsx"
50+
20051
```
20152

20253
### Small with right aligned subtitle
203-
```js
204-
import { ChartDonut } from '@patternfly/react-charts/victory';
205-
206-
<div style={{ height: '200px', width: '300px' }}>
207-
<ChartDonut
208-
ariaDesc="Average number of pets"
209-
ariaTitle="Donut chart example"
210-
constrainToVisibleArea
211-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
212-
height={200}
213-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
214-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
215-
legendPosition="bottom"
216-
name="chart8"
217-
padding={{
218-
bottom: 70, // Adjusted to accommodate legend
219-
left: 20,
220-
right: 50, // Adjusted to accommodate subTitle
221-
top: 20
222-
}}
223-
subTitle="Pets"
224-
subTitlePosition="right"
225-
title="100"
226-
width={300}
227-
/>
228-
</div>
54+
```ts file = "ChartDonutSmallRightSubtitle.tsx"
55+
22956
```
23057

23158
## Documentation

‎packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonutBasic.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ChartDonut } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
x: string;
5+
y: number;
6+
}
7+
8+
export const ChartDonutBasic: React.FunctionComponent = () => {
9+
const data: PetData[] = [
10+
{ x: 'Cats', y: 35 },
11+
{ x: 'Dogs', y: 55 },
12+
{ x: 'Birds', y: 10 }
13+
];
14+
15+
return (
16+
<div style={{ height: '230px', width: '230px' }}>
17+
<ChartDonut
18+
ariaDesc="Average number of pets"
19+
ariaTitle="Donut chart example"
20+
constrainToVisibleArea
21+
data={data}
22+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
23+
name="chart1"
24+
subTitle="Pets"
25+
title="100"
26+
/>
27+
</div>
28+
);
29+
};

‎packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonutBottomAlignedLegend.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { ChartDonut } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const ChartDonutBottomAlignedLegend: 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: '275px', width: '300px' }}>
19+
<ChartDonut
20+
ariaDesc="Average number of pets"
21+
ariaTitle="Donut chart example"
22+
constrainToVisibleArea
23+
data={data}
24+
donutOrientation="top"
25+
height={275}
26+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
27+
legendData={legendData}
28+
legendPosition="bottom"
29+
legendWidth={225}
30+
name="chart4"
31+
padding={{
32+
bottom: 65, // Adjusted to accommodate legend
33+
left: 20,
34+
right: 20,
35+
top: 20
36+
}}
37+
subTitle="Pets"
38+
title="100"
39+
width={300}
40+
/>
41+
</div>
42+
);
43+
};

‎packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonutMultiColor.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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 ChartDonutMultiColor: 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+
<ChartDonut
20+
ariaDesc="Average number of pets"
21+
ariaTitle="Donut chart example"
22+
constrainToVisibleArea
23+
data={data}
24+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
25+
legendData={legendData}
26+
legendOrientation="vertical"
27+
legendPosition="right"
28+
name="chart3"
29+
padding={{
30+
bottom: 20,
31+
left: 20,
32+
right: 140, // Adjusted to accommodate legend
33+
top: 20
34+
}}
35+
subTitle="Pets"
36+
title="100"
37+
themeColor={ChartThemeColor.multiOrdered}
38+
width={350}
39+
/>
40+
</div>
41+
);
42+
};

‎packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonutRightAlignedLegend.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { ChartDonut } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
x?: string;
5+
y?: number;
6+
name?: string;
7+
}
8+
9+
export const ChartDonutRightAlignedLegend: 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+
<ChartDonut
20+
ariaDesc="Average number of pets"
21+
ariaTitle="Donut chart example"
22+
constrainToVisibleArea
23+
data={data}
24+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
25+
legendData={legendData}
26+
legendOrientation="vertical"
27+
legendPosition="right"
28+
name="chart2"
29+
padding={{
30+
bottom: 20,
31+
left: 20,
32+
right: 140, // Adjusted to accommodate legend
33+
top: 20
34+
}}
35+
subTitle="Pets"
36+
title="100"
37+
width={350}
38+
/>
39+
</div>
40+
);
41+
};

0 commit comments

Comments
 (0)