Skip to content

Commit e2aaa5e

Browse files
Mash707Mash707
committed
chore(chart donut): convert to typescript
1 parent f8b21b5 commit e2aaa5e

5 files changed

Lines changed: 159 additions & 89 deletions

File tree

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

Lines changed: 4 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -16,108 +16,23 @@ 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';
19+
```ts file = "ChartDonutBasic.tsx"
2120

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>
3421
```
3522

3623
### Right aligned legend
37-
```js
38-
import { ChartDonut } from '@patternfly/react-charts/victory';
24+
```ts file = "ChartDonutRightAlignedLegend.tsx"
3925

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>
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';
34+
```ts file = "ChartDonutBottomAlignedLegend.tsx"
9635

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>
12136
```
12237

12338
### Small

‎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)