Skip to content

Commit 2435082

Browse files
Mash707Mash707
committed
added examples - multi color and single
1 parent f19b8e7 commit 2435082

File tree

3 files changed

+118
-95
lines changed

3 files changed

+118
-95
lines changed

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

Lines changed: 2 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -36,106 +36,13 @@ This demonstrates an alternate way of applying tooltips using data labels.
3636

3737
This demonstrates zoom for both the x and y axis.
3838

39-
```js
40-
import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts/victory';
41-
import { VictoryZoomContainer } from 'victory-zoom-container';
39+
```ts file = "ChartBarMultiColor.tsx"
4240

43-
<div style={{ height: '400px', width: '450px' }}>
44-
<Chart
45-
ariaDesc="Average number of pets"
46-
ariaTitle="Bar chart example"
47-
containerComponent={<VictoryZoomContainer />}
48-
domainPadding={{ x: [30, 25] }}
49-
legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
50-
legendPosition="bottom-left"
51-
height={400}
52-
name="chart3"
53-
padding={{
54-
bottom: 75, // Adjusted to accommodate legend
55-
left: 50,
56-
right: 100, // Adjusted to accommodate tooltip
57-
top: 50
58-
}}
59-
themeColor={ChartThemeColor.multiOrdered}
60-
width={450}
61-
>
62-
<ChartAxis />
63-
<ChartAxis dependentAxis showGrid />
64-
<ChartGroup offset={11} horizontal>
65-
<ChartBar
66-
data={[
67-
{ name: 'Cats', x: '2015', y: 1 },
68-
{ name: 'Cats', x: '2016', y: 2 },
69-
{ name: 'Cats', x: '2017', y: 5 },
70-
{ name: 'Cats', x: '2018', y: 3 }
71-
]}
72-
/>
73-
<ChartBar
74-
data={[
75-
{ name: 'Dogs', x: '2015', y: 2 },
76-
{ name: 'Dogs', x: '2016', y: 1 },
77-
{ name: 'Dogs', x: '2017', y: 7 },
78-
{ name: 'Dogs', x: '2018', y: 4 }
79-
]}
80-
/>
81-
<ChartBar
82-
data={[
83-
{ name: 'Birds', x: '2015', y: 4 },
84-
{ name: 'Birds', x: '2016', y: 4 },
85-
{ name: 'Birds', x: '2017', y: 9 },
86-
{ name: 'Birds', x: '2018', y: 7 }
87-
]}
88-
/>
89-
<ChartBar
90-
data={[
91-
{ name: 'Mice', x: '2015', y: 3 },
92-
{ name: 'Mice', x: '2016', y: 3 },
93-
{ name: 'Mice', x: '2017', y: 8 },
94-
{ name: 'Mice', x: '2018', y: 5 }
95-
]}
96-
/>
97-
</ChartGroup>
98-
</Chart>
99-
</div>;
10041
```
10142

10243
### Single with right aligned legend
10344

104-
```js
105-
import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
106-
107-
<div style={{ height: '250px', width: '600px' }}>
108-
<Chart
109-
ariaDesc="Average number of pets"
110-
ariaTitle="Bar chart example"
111-
containerComponent={
112-
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
113-
}
114-
domain={{ y: [0, 9] }}
115-
domainPadding={{ x: [30, 25] }}
116-
legendData={[{ name: 'Cats' }]}
117-
legendOrientation="vertical"
118-
legendPosition="right"
119-
height={250}
120-
name="chart4"
121-
padding={{
122-
bottom: 50,
123-
left: 50,
124-
right: 200, // Adjusted to accommodate legend
125-
top: 50
126-
}}
127-
width={600}
128-
>
129-
<ChartBar
130-
data={[
131-
{ name: 'Cats', x: '2015', y: 1 },
132-
{ name: 'Cats', x: '2016', y: 2 },
133-
{ name: 'Cats', x: '2017', y: 5 },
134-
{ name: 'Cats', x: '2018', y: 3 }
135-
]}
136-
/>
137-
</Chart>
138-
</div>;
45+
```ts file = "ChartBarSingle.tsx"
13946
```
14047

14148
### Alerts timeline

‎packages/react-charts/src/victory/components/ChartBar/examples/ChartBarMultiColor.tsx‎

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

‎packages/react-charts/src/victory/components/ChartBar/examples/ChartBarSingle.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
name: string;
5+
x: string;
6+
y: number;
7+
}
8+
9+
export const ChartBarSingle: React.FunctionComponent = () => {
10+
const catsData: 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+
17+
const legendData = [{ name: 'Cats' }];
18+
return (
19+
<div style={{ height: '250px', width: '600px' }}>
20+
<Chart
21+
ariaDesc="Average number of pets"
22+
ariaTitle="Bar chart example"
23+
containerComponent={
24+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
25+
}
26+
domain={{ y: [0, 9] }}
27+
domainPadding={{ x: [30, 25] }}
28+
legendData={legendData}
29+
legendOrientation="vertical"
30+
legendPosition="right"
31+
height={250}
32+
name="chart4"
33+
padding={{
34+
bottom: 50,
35+
left: 50,
36+
right: 200, // Adjusted to accommodate legend
37+
top: 50
38+
}}
39+
width={600}
40+
>
41+
<ChartBar data={catsData} />
42+
</Chart>
43+
</div>
44+
);
45+
};

0 commit comments

Comments
 (0)