Skip to content

Commit 422a7ec

Browse files
Mash707Mash707
committed
chore(chart pie): convert to typescript
1 parent 46b82e5 commit 422a7ec

4 files changed

Lines changed: 134 additions & 74 deletions

File tree

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

Lines changed: 3 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -17,92 +17,21 @@ The examples below are based on the [Victory](https://formidable.com/open-source
1717

1818
## Examples
1919
### Basic with right aligned legend
20-
```js
21-
import { ChartPie } from '@patternfly/react-charts/victory';
20+
```ts file = "ChartPieBasicRightLegend.tsx"
2221

23-
<div style={{ height: '230px', width: '350px' }}>
24-
<ChartPie
25-
ariaDesc="Average number of pets"
26-
ariaTitle="Pie chart example"
27-
constrainToVisibleArea
28-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
29-
height={230}
30-
labels={({ datum }) => `${datum.x}: ${datum.y}`}
31-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
32-
legendOrientation="vertical"
33-
legendPosition="right"
34-
name="chart1"
35-
padding={{
36-
bottom: 20,
37-
left: 20,
38-
right: 140, // Adjusted to accommodate legend
39-
top: 20
40-
}}
41-
width={350}
42-
/>
43-
</div>
4422
```
4523

4624
### Multi-color (ordered) with bottom aligned legend
47-
```js
48-
import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
25+
```ts file = "ChartPieMultiColorBottomLegend.tsx"
4926

50-
<div style={{ height: '275px', width: '300px' }}>
51-
<ChartPie
52-
ariaDesc="Average number of pets"
53-
ariaTitle="Pie chart example"
54-
constrainToVisibleArea
55-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
56-
height={275}
57-
labels={({ datum }) => `${datum.x}: ${datum.y}`}
58-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
59-
legendPosition="bottom"
60-
name="chart3"
61-
padding={{
62-
bottom: 65,
63-
left: 20,
64-
right: 20,
65-
top: 20
66-
}}
67-
themeColor={ChartThemeColor.multiOrdered}
68-
width={300}
69-
/>
70-
</div>
7127
```
7228

7329
### Custom color scale
7430

7531
This demonstrates how to apply a custom color scale.
7632

77-
```js
78-
import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
79-
import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100';
80-
import chart_theme_yellow_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_100';
81-
import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300';
33+
```ts file = "ChartPieCustomColorScale.tsx"
8234

83-
<div style={{ height: '230px', width: '450px' }}>
84-
<ChartPie
85-
ariaDesc="Average number of pets"
86-
ariaTitle="Pie chart example"
87-
colorScale={[ chart_theme_blue_ColorScale_100.var, chart_theme_orange_ColorScale_300.var, chart_theme_yellow_ColorScale_100.var, chart_theme_blue_ColorScale_100.var, ]}
88-
constrainToVisibleArea
89-
data={[{ x: 'Sky', y: 38 }, { x: 'Shady side of pyramid', y: 7 }, { x: 'Sunny side of pyramid', y: 17 }, { x: 'Sky', y: 38 }]}
90-
height={230}
91-
labels={({ datum }) => `${datum.x}`}
92-
legendData={[{ name: 'Sky' }, { name: 'Shady side of pyramid' }, { name: 'Sunny side of pyramid' }]}
93-
legendOrientation="vertical"
94-
legendPosition="right"
95-
name="chart2"
96-
padding={{
97-
bottom: 20,
98-
left: 20,
99-
right: 240, // Adjusted to accommodate legend
100-
top: 20
101-
}}
102-
themeColor={ChartThemeColor.orange}
103-
width={450}
104-
/>
105-
</div>
10635
```
10736

10837
## Documentation

‎packages/react-charts/src/victory/components/ChartPie/examples/ChartPieBasicRightLegend.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 ChartPieBasicRightLegend: 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+
height={230}
25+
labels={({ datum }) => `${datum.x}: ${datum.y}`}
26+
legendData={legendData}
27+
legendOrientation="vertical"
28+
legendPosition="right"
29+
name="chart1"
30+
padding={{
31+
bottom: 20,
32+
left: 20,
33+
right: 140, // Adjusted to accommodate legend
34+
top: 20
35+
}}
36+
width={350}
37+
/>
38+
</div>
39+
);
40+
};

‎packages/react-charts/src/victory/components/ChartPie/examples/ChartPieCustomColorScale.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100';
3+
import chart_theme_yellow_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_100';
4+
import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300';
5+
6+
interface Data {
7+
x?: string;
8+
y?: number;
9+
name?: string;
10+
}
11+
12+
export const ChartPieCustomColorScale: React.FunctionComponent = () => {
13+
const data: Data[] = [
14+
{ x: 'Sky', y: 38 },
15+
{ x: 'Shady side of pyramid', y: 7 },
16+
{ x: 'Sunny side of pyramid', y: 17 },
17+
{ x: 'Sky', y: 38 }
18+
];
19+
const legendData: Data[] = [{ name: 'Sky' }, { name: 'Shady side of pyramid' }, { name: 'Sunny side of pyramid' }];
20+
21+
return (
22+
<div style={{ height: '230px', width: '450px' }}>
23+
<ChartPie
24+
ariaDesc="Average number of pets"
25+
ariaTitle="Pie chart example"
26+
colorScale={[
27+
chart_theme_blue_ColorScale_100.var,
28+
chart_theme_orange_ColorScale_300.var,
29+
chart_theme_yellow_ColorScale_100.var,
30+
chart_theme_blue_ColorScale_100.var
31+
]}
32+
constrainToVisibleArea
33+
data={data}
34+
height={230}
35+
labels={({ datum }) => `${datum.x}`}
36+
legendData={legendData}
37+
legendOrientation="vertical"
38+
legendPosition="right"
39+
name="chart2"
40+
padding={{
41+
bottom: 20,
42+
left: 20,
43+
right: 240, // Adjusted to accommodate legend
44+
top: 20
45+
}}
46+
themeColor={ChartThemeColor.orange}
47+
width={450}
48+
/>
49+
</div>
50+
);
51+
};

‎packages/react-charts/src/victory/components/ChartPie/examples/ChartPieMultiColorBottomLegend.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 ChartPieMultiColorBottomLegend: 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+
<ChartPie
20+
ariaDesc="Average number of pets"
21+
ariaTitle="Pie chart example"
22+
constrainToVisibleArea
23+
data={data}
24+
height={275}
25+
labels={({ datum }) => `${datum.x}: ${datum.y}`}
26+
legendData={legendData}
27+
legendPosition="bottom"
28+
name="chart3"
29+
padding={{
30+
bottom: 65,
31+
left: 20,
32+
right: 20,
33+
top: 20
34+
}}
35+
themeColor={ChartThemeColor.multiOrdered}
36+
width={300}
37+
/>
38+
</div>
39+
);
40+
};

0 commit comments

Comments
 (0)