Skip to content

Commit 8397904

Browse files
Mash707Mash707
committed
convert remaining examples
1 parent e2aaa5e commit 8397904

5 files changed

Lines changed: 166 additions & 96 deletions

File tree

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

Lines changed: 8 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -36,111 +36,23 @@ The examples below are based on the [Victory](https://formidable.com/open-source
3636
```
3737

3838
### Small
39-
```js
40-
import { ChartDonut } from '@patternfly/react-charts/victory';
41-
42-
<div style={{ height: '150px', width: '150px' }}>
43-
<ChartDonut
44-
ariaDesc="Average number of pets"
45-
ariaTitle="Donut chart example"
46-
constrainToVisibleArea
47-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
48-
height={150}
49-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
50-
name="chart5"
51-
subTitle="Pets"
52-
title="100"
53-
width={150}
54-
/>
55-
</div>
39+
```ts file = "ChartDonutSmall.tsx"
40+
5641
```
5742

5843
### Small with right aligned legend
59-
```js
60-
import { ChartDonut } from '@patternfly/react-charts/victory';
61-
62-
<div style={{ height: '150px', width: '275px' }}>
63-
<ChartDonut
64-
ariaDesc="Average number of pets"
65-
ariaTitle="Donut chart example"
66-
constrainToVisibleArea
67-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
68-
height={150}
69-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
70-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
71-
legendOrientation="vertical"
72-
legendPosition="right"
73-
name="chart6"
74-
padding={{
75-
bottom: 20,
76-
left: 20,
77-
right: 145, // Adjusted to accommodate legend
78-
top: 20
79-
}}
80-
subTitle="Pets"
81-
title="100"
82-
width={275}
83-
/>
84-
</div>
44+
```ts file = "ChartDonutSmallRightLegend.tsx"
45+
8546
```
8647

8748
### Small with bottom aligned subtitle
88-
```js
89-
import { ChartDonut } from '@patternfly/react-charts/victory';
90-
91-
<div style={{ height: '165px', width: '275px' }}>
92-
<ChartDonut
93-
ariaDesc="Average number of pets"
94-
ariaTitle="Donut chart example"
95-
constrainToVisibleArea
96-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
97-
height={165}
98-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
99-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
100-
legendOrientation="vertical"
101-
legendPosition="right"
102-
name="chart7"
103-
padding={{
104-
bottom: 25, // Adjusted to accommodate subTitle
105-
left: 20,
106-
right: 145, // Adjusted to accommodate legend
107-
top: 20
108-
}}
109-
subTitle="Pets"
110-
subTitlePosition="bottom"
111-
title="100"
112-
width={275}
113-
/>
114-
</div>
49+
```ts file = "ChartDonutSmallBottomSubtitle.tsx"
50+
11551
```
11652

11753
### Small with right aligned subtitle
118-
```js
119-
import { ChartDonut } from '@patternfly/react-charts/victory';
120-
121-
<div style={{ height: '200px', width: '300px' }}>
122-
<ChartDonut
123-
ariaDesc="Average number of pets"
124-
ariaTitle="Donut chart example"
125-
constrainToVisibleArea
126-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
127-
height={200}
128-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
129-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
130-
legendPosition="bottom"
131-
name="chart8"
132-
padding={{
133-
bottom: 70, // Adjusted to accommodate legend
134-
left: 20,
135-
right: 50, // Adjusted to accommodate subTitle
136-
top: 20
137-
}}
138-
subTitle="Pets"
139-
subTitlePosition="right"
140-
title="100"
141-
width={300}
142-
/>
143-
</div>
54+
```ts file = "ChartDonutSmallRightSubtitle.tsx"
55+
14456
```
14557

14658
## Documentation

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { ChartDonut } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
x: string;
5+
y: number;
6+
}
7+
8+
export const ChartDonutSmall: 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: '150px', width: '150px' }}>
17+
<ChartDonut
18+
ariaDesc="Average number of pets"
19+
ariaTitle="Donut chart example"
20+
constrainToVisibleArea
21+
data={data}
22+
height={150}
23+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
24+
name="chart5"
25+
subTitle="Pets"
26+
title="100"
27+
width={150}
28+
/>
29+
</div>
30+
);
31+
};

‎packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonutSmallBottomSubtitle.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 ChartDonutSmallBottomSubtitle: 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: '165px', width: '275px' }}>
19+
<ChartDonut
20+
ariaDesc="Average number of pets"
21+
ariaTitle="Donut chart example"
22+
constrainToVisibleArea
23+
data={data}
24+
height={165}
25+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
26+
legendData={legendData}
27+
legendOrientation="vertical"
28+
legendPosition="right"
29+
name="chart7"
30+
padding={{
31+
bottom: 25, // Adjusted to accommodate subTitle
32+
left: 20,
33+
right: 145, // Adjusted to accommodate legend
34+
top: 20
35+
}}
36+
subTitle="Pets"
37+
subTitlePosition="bottom"
38+
title="100"
39+
width={275}
40+
/>
41+
</div>
42+
);
43+
};

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

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

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

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

0 commit comments

Comments
 (0)