Skip to content

Commit f658294

Browse files
Mash707Mash707
committed
chore(chart stack): convert to typescript
1 parent 46b82e5 commit f658294

4 files changed

Lines changed: 223 additions & 127 deletions

File tree

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

Lines changed: 6 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -33,142 +33,21 @@ The examples below are based on the [Victory](https://formidable.com/open-source
3333

3434
## Examples
3535
### Basic with right aligned legend
36-
```js
37-
import { Chart, ChartAxis, ChartBar, ChartStack, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
38-
39-
<div style={{ height: '250px', width: '600px' }}>
40-
<Chart
41-
ariaDesc="Average number of pets"
42-
ariaTitle="Stack chart example"
43-
containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
44-
domainPadding={{ x: [30, 25] }}
45-
legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
46-
legendOrientation="vertical"
47-
legendPosition="right"
48-
height={250}
49-
name="chart1"
50-
padding={{
51-
bottom: 50,
52-
left: 50,
53-
right: 200, // Adjusted to accommodate legend
54-
top: 50
55-
}}
56-
width={600}
57-
>
58-
<ChartAxis />
59-
<ChartAxis dependentAxis showGrid />
60-
<ChartStack>
61-
<ChartBar data={[{ name: 'Cats', x: '2015', y: 1 }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} />
62-
<ChartBar data={[{ name: 'Dogs', x: '2015', y: 2 }, { name: 'Dogs', x: '2016', y: 1 }, { name: 'Dogs', x: '2017', y: 7 }, { name: 'Dogs', x: '2018', y: 4 }]} />
63-
<ChartBar data={[{ name: 'Birds', x: '2015', y: 4 }, { name: 'Birds', x: '2016', y: 4 }, { name: 'Birds', x: '2017', y: 9 }, { name: 'Birds', x: '2018', y: 7 }]} />
64-
<ChartBar data={[{ name: 'Mice', x: '2015', y: 3 }, { name: 'Mice', x: '2016', y: 3 }, { name: 'Mice', x: '2017', y: 8 }, { name: 'Mice', x: '2018', y: 5 }]} />
65-
</ChartStack>
66-
</Chart>
67-
</div>
36+
```ts file = "ChartStackBasicRightLegend.tsx"
37+
6838
```
6939

7040
### Horizontal with bottom aligned legend
71-
```js
72-
import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
73-
74-
<div style={{ height: '275px', width: '450px' }}>
75-
<Chart
76-
ariaDesc="Average number of pets"
77-
ariaTitle="Stack chart example"
78-
containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
79-
domainPadding={{ x: [30, 25] }}
80-
legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
81-
legendPosition="bottom"
82-
height={275}
83-
name="chart2"
84-
padding={{
85-
bottom: 75, // Adjusted to accommodate legend
86-
left: 50,
87-
right: 50,
88-
top: 50
89-
}}
90-
themeColor={ChartThemeColor.yellow}
91-
width={450}
92-
>
93-
<ChartAxis />
94-
<ChartAxis dependentAxis showGrid />
95-
<ChartStack>
96-
<ChartBar data={[{ name: 'Cats', x: '2015', y: 1 }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} />
97-
<ChartBar data={[{ name: 'Dogs', x: '2015', y: 2 }, { name: 'Dogs', x: '2016', y: 1 }, { name: 'Dogs', x: '2017', y: 7 }, { name: 'Dogs', x: '2018', y: 4 }]} />
98-
<ChartBar data={[{ name: 'Birds', x: '2015', y: 4 }, { name: 'Birds', x: '2016', y: 4 }, { name: 'Birds', x: '2017', y: 9 }, { name: 'Birds', x: '2018', y: 7 }]} />
99-
<ChartBar data={[{ name: 'Mice', x: '2015', y: 3 }, { name: 'Mice', x: '2016', y: 3 }, { name: 'Mice', x: '2017', y: 8 }, { name: 'Mice', x: '2018', y: 5 }]} />
100-
</ChartStack>
101-
</Chart>
102-
</div>
41+
```ts file = "ChartStackHorizontalBottomLegend.tsx"
42+
10343
```
10444

10545
### Multi-color (ordered) horizontal with bottom aligned legend
10646

10747
This demonstrates an alternate way of applying tooltips using data labels.
10848

109-
```js
110-
import { Chart, ChartBar, ChartAxis, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
111-
112-
<div style={{ height: '275px', width: '450px' }}>
113-
<Chart
114-
ariaDesc="Average number of pets"
115-
ariaTitle="Stack chart example"
116-
domainPadding={{ x: [30, 25] }}
117-
legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
118-
legendPosition="bottom-left"
119-
height={275}
120-
name="chart3"
121-
padding={{
122-
bottom: 75, // Adjusted to accommodate legend
123-
left: 50,
124-
right: 50,
125-
top: 50
126-
}}
127-
themeColor={ChartThemeColor.multiOrdered}
128-
width={450}
129-
>
130-
<ChartAxis />
131-
<ChartAxis dependentAxis showGrid />
132-
<ChartStack horizontal>
133-
<ChartBar
134-
data={[
135-
{ name: 'Cats', x: '2015', y: 1, label: 'Cats: 1' },
136-
{ name: 'Cats', x: '2016', y: 2, label: 'Cats: 2' },
137-
{ name: 'Cats', x: '2017', y: 5, label: 'Cats: 5' },
138-
{ name: 'Cats', x: '2018', y: 3, label: 'Cats: 3' }
139-
]}
140-
labelComponent={<ChartTooltip constrainToVisibleArea />}
141-
/>
142-
<ChartBar
143-
data={[
144-
{ name: 'Dogs', x: '2015', y: 2, label: 'Dogs: 2' },
145-
{ name: 'Dogs', x: '2016', y: 1, label: 'Dogs: 1' },
146-
{ name: 'Dogs', x: '2017', y: 7, label: 'Dogs: 7' },
147-
{ name: 'Dogs', x: '2018', y: 4, label: 'Dogs: 4' }
148-
]}
149-
labelComponent={<ChartTooltip constrainToVisibleArea />}
150-
/>
151-
<ChartBar
152-
data={[
153-
{ name: 'Birds', x: '2015', y: 4, label: 'Birds: 4' },
154-
{ name: 'Birds', x: '2016', y: 4, label: 'Birds: 4' },
155-
{ name: 'Birds', x: '2017', y: 9, label: 'Birds: 9' },
156-
{ name: 'Birds', x: '2018', y: 7, label: 'Birds: 7' }
157-
]}
158-
labelComponent={<ChartTooltip constrainToVisibleArea />}
159-
/>
160-
<ChartBar
161-
data={[
162-
{ name: 'Mice', x: '2015', y: 3, label: 'Mice: 3' },
163-
{ name: 'Mice', x: '2016', y: 3, label: 'Mice: 3' },
164-
{ name: 'Mice', x: '2017', y: 8, label: 'Mice: 8' },
165-
{ name: 'Mice', x: '2018', y: 5, label: 'Mice: 5' }
166-
]}
167-
labelComponent={<ChartTooltip constrainToVisibleArea />}
168-
/>
169-
</ChartStack>
170-
</Chart>
171-
</div>
49+
```ts file = "ChartStackMultiColorOrdered.tsx"
50+
17251
```
17352

17453
### Monthly data with responsive container

‎packages/react-charts/src/victory/components/ChartStack/examples/ChartStackBasicRightLegend.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Chart, ChartAxis, ChartBar, ChartStack, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
name: string;
5+
x: string;
6+
y: number;
7+
}
8+
9+
export const ChartStackBasicRightLegend: React.FunctionComponent = () => {
10+
const data1: PetData[] = [
11+
{ name: 'Cats', x: '2015', y: 1 },
12+
{ name: 'Cats', x: '2016', y: 2 },
13+
{ name: 'Cats', x: '2017', y: 5 },
14+
{ name: 'Cats', x: '2018', y: 3 }
15+
];
16+
const data2: PetData[] = [
17+
{ name: 'Dogs', x: '2015', y: 2 },
18+
{ name: 'Dogs', x: '2016', y: 1 },
19+
{ name: 'Dogs', x: '2017', y: 7 },
20+
{ name: 'Dogs', x: '2018', y: 4 }
21+
];
22+
const data3: PetData[] = [
23+
{ name: 'Birds', x: '2015', y: 4 },
24+
{ name: 'Birds', x: '2016', y: 4 },
25+
{ name: 'Birds', x: '2017', y: 9 },
26+
{ name: 'Birds', x: '2018', y: 7 }
27+
];
28+
const data4: PetData[] = [
29+
{ name: 'Mice', x: '2015', y: 3 },
30+
{ name: 'Mice', x: '2016', y: 3 },
31+
{ name: 'Mice', x: '2017', y: 8 },
32+
{ name: 'Mice', x: '2018', y: 5 }
33+
];
34+
35+
return (
36+
<div style={{ height: '250px', width: '600px' }}>
37+
<Chart
38+
ariaDesc="Average number of pets"
39+
ariaTitle="Stack chart example"
40+
containerComponent={
41+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
42+
}
43+
domainPadding={{ x: [30, 25] }}
44+
legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
45+
legendOrientation="vertical"
46+
legendPosition="right"
47+
height={250}
48+
name="chart1"
49+
padding={{
50+
bottom: 50,
51+
left: 50,
52+
right: 200, // Adjusted to accommodate legend
53+
top: 50
54+
}}
55+
width={600}
56+
>
57+
<ChartAxis />
58+
<ChartAxis dependentAxis showGrid />
59+
<ChartStack>
60+
<ChartBar data={data1} />
61+
<ChartBar data={data2} />
62+
<ChartBar data={data3} />
63+
<ChartBar data={data4} />
64+
</ChartStack>
65+
</Chart>
66+
</div>
67+
);
68+
};

‎packages/react-charts/src/victory/components/ChartStack/examples/ChartStackHorizontalBottomLegend.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
Chart,
3+
ChartAxis,
4+
ChartBar,
5+
ChartStack,
6+
ChartThemeColor,
7+
ChartVoronoiContainer
8+
} from '@patternfly/react-charts/victory';
9+
10+
interface PetData {
11+
name: string;
12+
x: string;
13+
y: number;
14+
}
15+
16+
export const ChartStackHorizontalBottomLegend: React.FunctionComponent = () => {
17+
const data1: PetData[] = [
18+
{ name: 'Cats', x: '2015', y: 1 },
19+
{ name: 'Cats', x: '2016', y: 2 },
20+
{ name: 'Cats', x: '2017', y: 5 },
21+
{ name: 'Cats', x: '2018', y: 3 }
22+
];
23+
const data2: PetData[] = [
24+
{ name: 'Dogs', x: '2015', y: 2 },
25+
{ name: 'Dogs', x: '2016', y: 1 },
26+
{ name: 'Dogs', x: '2017', y: 7 },
27+
{ name: 'Dogs', x: '2018', y: 4 }
28+
];
29+
const data3: PetData[] = [
30+
{ name: 'Birds', x: '2015', y: 4 },
31+
{ name: 'Birds', x: '2016', y: 4 },
32+
{ name: 'Birds', x: '2017', y: 9 },
33+
{ name: 'Birds', x: '2018', y: 7 }
34+
];
35+
const data4: PetData[] = [
36+
{ name: 'Mice', x: '2015', y: 3 },
37+
{ name: 'Mice', x: '2016', y: 3 },
38+
{ name: 'Mice', x: '2017', y: 8 },
39+
{ name: 'Mice', x: '2018', y: 5 }
40+
];
41+
42+
return (
43+
<div style={{ height: '275px', width: '450px' }}>
44+
<Chart
45+
ariaDesc="Average number of pets"
46+
ariaTitle="Stack chart example"
47+
containerComponent={
48+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
49+
}
50+
domainPadding={{ x: [30, 25] }}
51+
legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
52+
legendPosition="bottom"
53+
height={275}
54+
name="chart2"
55+
padding={{
56+
bottom: 75, // Adjusted to accommodate legend
57+
left: 50,
58+
right: 50,
59+
top: 50
60+
}}
61+
themeColor={ChartThemeColor.yellow}
62+
width={450}
63+
>
64+
<ChartAxis />
65+
<ChartAxis dependentAxis showGrid />
66+
<ChartStack>
67+
<ChartBar data={data1} />
68+
<ChartBar data={data2} />
69+
<ChartBar data={data3} />
70+
<ChartBar data={data4} />
71+
</ChartStack>
72+
</Chart>
73+
</div>
74+
);
75+
};

‎packages/react-charts/src/victory/components/ChartStack/examples/ChartStackMultiColorOrdered.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {
2+
Chart,
3+
ChartBar,
4+
ChartAxis,
5+
ChartStack,
6+
ChartThemeColor,
7+
ChartTooltip
8+
} from '@patternfly/react-charts/victory';
9+
10+
interface PetData {
11+
name?: string;
12+
x?: string;
13+
y?: number;
14+
label?: string;
15+
}
16+
17+
export const ChartStackMultiColorOrdered: React.FunctionComponent = () => {
18+
const data1: PetData[] = [
19+
{ name: 'Cats', x: '2015', y: 1, label: 'Cats: 1' },
20+
{ name: 'Cats', x: '2016', y: 2, label: 'Cats: 2' },
21+
{ name: 'Cats', x: '2017', y: 5, label: 'Cats: 5' },
22+
{ name: 'Cats', x: '2018', y: 3, label: 'Cats: 3' }
23+
];
24+
const data2: PetData[] = [
25+
{ name: 'Dogs', x: '2015', y: 2, label: 'Dogs: 2' },
26+
{ name: 'Dogs', x: '2016', y: 1, label: 'Dogs: 1' },
27+
{ name: 'Dogs', x: '2017', y: 7, label: 'Dogs: 7' },
28+
{ name: 'Dogs', x: '2018', y: 4, label: 'Dogs: 4' }
29+
];
30+
const data3: PetData[] = [
31+
{ name: 'Birds', x: '2015', y: 4, label: 'Birds: 4' },
32+
{ name: 'Birds', x: '2016', y: 4, label: 'Birds: 4' },
33+
{ name: 'Birds', x: '2017', y: 9, label: 'Birds: 9' },
34+
{ name: 'Birds', x: '2018', y: 7, label: 'Birds: 7' }
35+
];
36+
const data4: PetData[] = [
37+
{ name: 'Mice', x: '2015', y: 3, label: 'Mice: 3' },
38+
{ name: 'Mice', x: '2016', y: 3, label: 'Mice: 3' },
39+
{ name: 'Mice', x: '2017', y: 8, label: 'Mice: 8' },
40+
{ name: 'Mice', x: '2018', y: 5, label: 'Mice: 5' }
41+
];
42+
const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];
43+
44+
return (
45+
<div style={{ height: '275px', width: '450px' }}>
46+
<Chart
47+
ariaDesc="Average number of pets"
48+
ariaTitle="Stack chart example"
49+
domainPadding={{ x: [30, 25] }}
50+
legendData={legendData}
51+
legendPosition="bottom-left"
52+
height={275}
53+
name="chart3"
54+
padding={{
55+
bottom: 75, // Adjusted to accommodate legend
56+
left: 50,
57+
right: 50,
58+
top: 50
59+
}}
60+
themeColor={ChartThemeColor.multiOrdered}
61+
width={450}
62+
>
63+
<ChartAxis />
64+
<ChartAxis dependentAxis showGrid />
65+
<ChartStack horizontal>
66+
<ChartBar data={data1} labelComponent={<ChartTooltip constrainToVisibleArea />} />
67+
<ChartBar data={data2} labelComponent={<ChartTooltip constrainToVisibleArea />} />
68+
<ChartBar data={data3} labelComponent={<ChartTooltip constrainToVisibleArea />} />
69+
<ChartBar data={data4} labelComponent={<ChartTooltip constrainToVisibleArea />} />
70+
</ChartStack>
71+
</Chart>
72+
</div>
73+
);
74+
};

0 commit comments

Comments
 (0)