Skip to content

Commit 47521ed

Browse files
Mash707Mash707
committed
converted remaining examples
1 parent e9ced96 commit 47521ed

File tree

4 files changed

+230
-217
lines changed

4 files changed

+230
-217
lines changed

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

Lines changed: 6 additions & 217 deletions
Original file line numberDiff line numberDiff line change
@@ -98,235 +98,24 @@ This demonstrates how to add an interactive legend to a pie chart using events s
9898

9999
This demonstrates an approach for applying tooltips to a legend using a custom label component. These tooltips are keyboard navigable.
100100

101-
```js
102-
import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
103-
import { Tooltip } from '@patternfly/react-core';
104-
105-
class TooltipPieChart extends React.Component {
106-
constructor(props) {
107-
super(props);
108-
109-
// Custom legend label component
110-
// Note: Tooltip wraps children with a div tag, so we use a reference to ChartLabel instead
111-
this.LegendLabel = ({datum, ...rest}) => {
112-
const ref = createRef();
113-
return (
114-
<g ref={ref}>
115-
<ChartLabel {...rest} />
116-
<Tooltip content={datum.name} enableFlip triggerRef={ref} />
117-
</g>
118-
);
119-
}
120-
121-
// Custom legend component
122-
this.getLegend = (legendData) => (
123-
<ChartLegend
124-
data={legendData}
125-
labelComponent={<this.LegendLabel />}
126-
/>
127-
);
128-
}
129-
130-
render() {
131-
return (
132-
<div style={{ height: '275px', width: '300px' }}>
133-
<ChartPie
134-
ariaDesc="Average number of pets"
135-
ariaTitle="Pie chart example"
136-
constrainToVisibleArea
137-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
138-
height={275}
139-
labels={({ datum }) => `${datum.x}: ${datum.y}`}
140-
legendComponent={this.getLegend([
141-
{ name: 'Cats: 35' },
142-
{ name: 'Dogs: 55' },
143-
{ name: 'Birds: 10' }
144-
])}
145-
legendPosition="bottom"
146-
name="chart7"
147-
padding={{
148-
bottom: 65,
149-
left: 20,
150-
right: 20,
151-
top: 20
152-
}}
153-
themeColor={ChartThemeColor.multiOrdered}
154-
width={300}
155-
/>
156-
</div>
157-
);
158-
}
159-
}
101+
```ts file = "ChartLegendTooltips.tsx"
102+
160103
```
161104

162105
### Legend links
163106

164107
This demonstrates an approach for applying links to a legend using a custom label component. These links are keyboard navigable.
165108

166-
```js
167-
import { Chart, ChartAxis, ChartGroup, ChartLabel, ChartLegend, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
168-
169-
class LegendLinkPieChart extends React.Component {
170-
constructor(props) {
171-
super(props);
172-
173-
// Custom legend label component
174-
this.LegendLabel = ({datum, ...rest}) => (
175-
<a href="#" aria-label={`Learn more about ${rest.text}`}>
176-
<ChartLabel {...rest} />
177-
</a>
178-
);
179-
180-
// Custom legend component
181-
this.getLegend = (legendData) => (
182-
<ChartLegend
183-
data={legendData}
184-
labelComponent={<this.LegendLabel />}
185-
/>
186-
);
187-
}
188-
189-
render() {
190-
return (
191-
<div role="article" aria-describedby="withLinks-desc" aria-labelledby="withLinks-title" style={{ height: '275px', width: '450px' }}>
192-
<Chart
193-
ariaDesc="Average number of pets per year"
194-
ariaTitle="Line chart example"
195-
containerComponent={<ChartVoronoiContainer containerId="withLinks" role="figure" labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
196-
legendComponent={this.getLegend([
197-
{ name: 'Cats' },
198-
{ name: 'Dogs' },
199-
{ name: 'Birds' },
200-
{ name: 'Mice'}
201-
])}
202-
legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}
203-
legendPosition="bottom"
204-
height={275}
205-
maxDomain={{y: 10}}
206-
minDomain={{y: 0}}
207-
name="chart8"
208-
padding={{
209-
bottom: 75, // Adjusted to accommodate legend
210-
left: 50,
211-
right: 50,
212-
top: 50
213-
}}
214-
width={450}
215-
>
216-
<ChartAxis tickValues={[2, 3, 4]} tickLabelComponent={<ChartLabel ariaLabel="X axis - the year polled" />} />
217-
<ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} tickLabelComponent={<ChartLabel ariaLabel="Y axis - average number of pets" />} />
218-
<ChartGroup>
219-
<ChartLine
220-
data={[
221-
{ name: 'Cats', x: '2015', y: 1 },
222-
{ name: 'Cats', x: '2016', y: 2 },
223-
{ name: 'Cats', x: '2017', y: 5 },
224-
{ name: 'Cats', x: '2018', y: 3 }
225-
]}
226-
/>
227-
<ChartLine
228-
data={[
229-
{ name: 'Dogs', x: '2015', y: 2 },
230-
{ name: 'Dogs', x: '2016', y: 1 },
231-
{ name: 'Dogs', x: '2017', y: 7 },
232-
{ name: 'Dogs', x: '2018', y: 4 }
233-
]}
234-
style={{
235-
data: {
236-
strokeDasharray: '3,3'
237-
}
238-
}}
239-
/>
240-
<ChartLine
241-
data={[
242-
{ name: 'Birds', x: '2015', y: 3 },
243-
{ name: 'Birds', x: '2016', y: 4 },
244-
{ name: 'Birds', x: '2017', y: 9 },
245-
{ name: 'Birds', x: '2018', y: 5 }
246-
]}
247-
/>
248-
<ChartLine
249-
data={[
250-
{ name: 'Mice', x: '2015', y: 3 },
251-
{ name: 'Mice', x: '2016', y: 3 },
252-
{ name: 'Mice', x: '2017', y: 8 },
253-
{ name: 'Mice', x: '2018', y: 7 }
254-
]}
255-
/>
256-
</ChartGroup>
257-
</Chart>
258-
</div>
259-
);
260-
}
261-
}
109+
```ts file = "ChartLegendLinks.tsx"
110+
262111
```
263112

264113
### Legend layout
265114

266115
This demonstrates an approach for applying a different legend layout and styles using a custom label component.
267116

268-
```js
269-
import { ChartLabel, ChartLegend, ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
270-
import { Tooltip } from '@patternfly/react-core';
271-
272-
class LegendLayoutPieChart extends React.Component {
273-
constructor(props) {
274-
super(props);
275-
276-
// Custom legend label component
277-
this.LegendLabel = ({values, ...rest}) => (
278-
<ChartLabel
279-
{...rest}
280-
style={[{ fontWeight: 700 }, {}]}
281-
text={[values[rest.index], rest.text]}
282-
/>
283-
);
284-
285-
// Custom legend component
286-
this.getLegend = (legendData, values) => (
287-
<ChartLegend
288-
data={legendData}
289-
gutter={25}
290-
itemsPerRow={2}
291-
labelComponent={<this.LegendLabel dy={10} lineHeight={1.5} values={values} />}
292-
rowGutter={20}
293-
/>
294-
);
295-
}
296-
297-
render() {
298-
return (
299-
<div style={{ height: '230px', width: '375px' }}>
300-
<ChartDonut
301-
ariaDesc="Average number of pets"
302-
ariaTitle="Pie chart example"
303-
constrainToVisibleArea
304-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
305-
height={230}
306-
labels={({ datum }) => `${datum.x}: ${datum.y}`}
307-
legendComponent={this.getLegend([
308-
{ name: 'Cats' },
309-
{ name: 'Dogs' },
310-
{ name: 'Birds' }
311-
], [ 35, 55, 10 ])}
312-
legendOrientation="vertical"
313-
legendPosition="right"
314-
name="chart9"
315-
padding={{
316-
bottom: 20,
317-
left: 20,
318-
right: 140, // Adjusted to accommodate legend
319-
top: 20
320-
}}
321-
subTitle="Pets"
322-
title="100"
323-
themeColor={ChartThemeColor.multiOrdered}
324-
width={375}
325-
/>
326-
</div>
327-
);
328-
}
329-
}
117+
```ts file = "ChartLegendLayout.tsx"
118+
330119
```
331120

332121
## Documentation

‎packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegendLayout.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { ChartLabel, ChartLegend, ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
x: string;
5+
y: number;
6+
}
7+
8+
export const ChartLegendLayout: React.FunctionComponent = () => {
9+
// Custom legend label component
10+
const LegendLabel = ({ values, ...rest }) => (
11+
<ChartLabel {...rest} style={[{ fontWeight: 700 }, {}]} text={[values[rest.index], rest.text]} />
12+
);
13+
14+
// Custom legend component
15+
const getLegend = (legendData, values) => (
16+
<ChartLegend
17+
data={legendData}
18+
gutter={25}
19+
itemsPerRow={2}
20+
labelComponent={<LegendLabel dy={10} lineHeight={1.5} values={values} />}
21+
rowGutter={20}
22+
/>
23+
);
24+
25+
const data: PetData[] = [
26+
{ x: 'Cats', y: 35 },
27+
{ x: 'Dogs', y: 55 },
28+
{ x: 'Birds', y: 10 }
29+
];
30+
31+
return (
32+
<div style={{ height: '230px', width: '375px' }}>
33+
<ChartDonut
34+
ariaDesc="Average number of pets"
35+
ariaTitle="Pie chart example"
36+
constrainToVisibleArea
37+
data={data}
38+
height={230}
39+
labels={({ datum }) => `${datum.x}: ${datum.y}`}
40+
legendComponent={getLegend([{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }], [35, 55, 10])}
41+
legendOrientation="vertical"
42+
legendPosition="right"
43+
name="chart9"
44+
padding={{
45+
bottom: 20,
46+
left: 20,
47+
right: 140, // Adjusted to accommodate legend
48+
top: 20
49+
}}
50+
subTitle="Pets"
51+
title="100"
52+
themeColor={ChartThemeColor.multiOrdered}
53+
width={375}
54+
/>
55+
</div>
56+
);
57+
};

0 commit comments

Comments
 (0)