Skip to content

Commit b4144fb

Browse files
Mash707Mash707
authored
chore(chart line): convert to typescript (#11824)
* chore(chart line): convert to typescript * updated usage of hooks * updated usage of hooks
1 parent 601ae3a commit b4144fb

File tree

4 files changed

+292
-254
lines changed

4 files changed

+292
-254
lines changed

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

Lines changed: 4 additions & 254 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ propComponents: [
1111
hideDarkMode: true
1212
---
1313

14-
import { createRef } from 'react';
14+
import { useEffect, useRef, useState } from 'react';
1515
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory';
1616
import { getResizeObserver } from '@patternfly/react-core';
1717
import { VictoryZoomContainer } from 'victory-zoom-container';
@@ -23,274 +23,24 @@ The examples below are based on the [Victory](https://formidable.com/open-source
2323

2424
## Examples
2525
### Basic with right aligned legend
26-
```js
27-
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
26+
```ts file = "ChartLineBasicRightLegend.tsx"
2827

29-
<div style={{ height: '250px', width: '600px' }}>
30-
<Chart
31-
ariaDesc="Average number of pets"
32-
ariaTitle="Line chart example"
33-
containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
34-
legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}
35-
legendOrientation="vertical"
36-
legendPosition="right"
37-
height={250}
38-
maxDomain={{y: 10}}
39-
minDomain={{y: 0}}
40-
name="chart1"
41-
padding={{
42-
bottom: 50,
43-
left: 50,
44-
right: 200, // Adjusted to accommodate legend
45-
top: 50
46-
}}
47-
width={600}
48-
>
49-
<ChartAxis tickValues={[2, 3, 4]} />
50-
<ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />
51-
<ChartGroup>
52-
<ChartLine
53-
data={[
54-
{ name: 'Cats', x: '2015', y: 1 },
55-
{ name: 'Cats', x: '2016', y: 2 },
56-
{ name: 'Cats', x: '2017', y: 5 },
57-
{ name: 'Cats', x: '2018', y: 3 }
58-
]}
59-
/>
60-
<ChartLine
61-
data={[
62-
{ name: 'Dogs', x: '2015', y: 2 },
63-
{ name: 'Dogs', x: '2016', y: 1 },
64-
{ name: 'Dogs', x: '2017', y: 7 },
65-
{ name: 'Dogs', x: '2018', y: 4 }
66-
]}
67-
style={{
68-
data: {
69-
strokeDasharray: '3,3'
70-
}
71-
}}
72-
/>
73-
<ChartLine
74-
data={[
75-
{ name: 'Birds', x: '2015', y: 3 },
76-
{ name: 'Birds', x: '2016', y: 4 },
77-
{ name: 'Birds', x: '2017', y: 9 },
78-
{ name: 'Birds', x: '2018', y: 5 }
79-
]}
80-
/>
81-
<ChartLine
82-
data={[
83-
{ name: 'Mice', x: '2015', y: 3 },
84-
{ name: 'Mice', x: '2016', y: 3 },
85-
{ name: 'Mice', x: '2017', y: 8 },
86-
{ name: 'Mice', x: '2018', y: 7 }
87-
]}
88-
/>
89-
</ChartGroup>
90-
</Chart>
91-
</div>
9228
```
9329

9430
### Green with bottom aligned legend
9531

9632
This demonstrates how to combine cursor and voronoi containers to display tooltips along with a cursor.
9733

98-
```js
99-
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, createContainer } from '@patternfly/react-charts/victory';
34+
```ts file = "ChartLineGreenBottomLegend.tsx"
10035

101-
class BottomAlignedLegend extends React.Component {
102-
render() {
103-
// Note: Container order is important
104-
const CursorVoronoiContainer = createContainer("voronoi", "cursor");
105-
const legendData = [{ childName: 'cats', name: 'Cats' }, { childName: 'dogs', name: 'Dogs', symbol: { type: 'dash' }}, { childName: 'birds', name: 'Birds' }, { childName: 'mice', name: 'Mice' }];
106-
107-
return (
108-
<div style={{ height: '275px', width: '450px' }}>
109-
<Chart
110-
ariaDesc="Average number of pets"
111-
ariaTitle="Line chart example"
112-
containerComponent={
113-
<CursorVoronoiContainer
114-
cursorDimension="x"
115-
labels={({ datum }) => `${datum.y}`}
116-
labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum) => datum.x}/>}
117-
mouseFollowTooltips
118-
voronoiDimension="x"
119-
voronoiPadding={50}
120-
/>
121-
}
122-
legendData={legendData}
123-
legendPosition="bottom"
124-
height={275}
125-
maxDomain={{y: 10}}
126-
minDomain={{y: 0}}
127-
name="chart2"
128-
padding={{
129-
bottom: 75, // Adjusted to accommodate legend
130-
left: 50,
131-
right: 50,
132-
top: 50
133-
}}
134-
themeColor={ChartThemeColor.green}
135-
width={450}
136-
>
137-
<ChartAxis tickValues={[2, 3, 4]} />
138-
<ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />
139-
<ChartGroup>
140-
<ChartLine
141-
data={[
142-
{ x: '2015', y: 1 },
143-
{ x: '2016', y: 2 },
144-
{ x: '2017', y: 5 },
145-
{ x: '2018', y: 3 }
146-
]}
147-
name="cats"
148-
/>
149-
<ChartLine
150-
data={[
151-
{ x: '2015', y: 2 },
152-
{ x: '2016', y: 1 },
153-
{ x: '2017', y: 7 },
154-
{ x: '2018', y: 4 }
155-
]}
156-
name="dogs"
157-
style={{
158-
data: {
159-
strokeDasharray: '3,3'
160-
}
161-
}}
162-
/>
163-
<ChartLine
164-
data={[
165-
{ x: '2015', y: 3 },
166-
{ x: '2016', y: 4 },
167-
{ x: '2017', y: 9 },
168-
{ x: '2018', y: 5 }
169-
]}
170-
name="birds"
171-
/>
172-
<ChartLine
173-
data={[
174-
{ x: '2015', y: 3 },
175-
{ x: '2016', y: 3 },
176-
{ x: '2017', y: 8 },
177-
{ x: '2018', y: 7 }
178-
]}
179-
name="mice"
180-
/>
181-
</ChartGroup>
182-
</Chart>
183-
</div>
184-
);
185-
}
186-
}
18736
```
18837

18938
### Multi-color (unordered) with responsive container
19039

19140
This demonstrates zoom for the x axis only.
19241

193-
```js
194-
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor } from '@patternfly/react-charts/victory';
195-
import { getResizeObserver } from '@patternfly/react-core';
196-
import { VictoryZoomContainer } from 'victory-zoom-container';
197-
198-
class MultiColorChart extends React.Component {
199-
constructor(props) {
200-
super(props);
201-
this.containerRef = createRef();
202-
this.observer = () => {};
203-
this.state = {
204-
width: 0
205-
};
206-
this.handleResize = () => {
207-
if (this.containerRef.current && this.containerRef.current.clientWidth) {
208-
this.setState({ width: this.containerRef.current.clientWidth });
209-
}
210-
};
211-
}
212-
213-
componentDidMount() {
214-
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
215-
this.handleResize();
216-
}
217-
218-
componentWillUnmount() {
219-
this.observer();
220-
}
42+
```ts file = "ChartLineMultiColor.tsx"
22143

222-
render() {
223-
const { width } = this.state;
224-
225-
return (
226-
<div ref={this.containerRef}>
227-
<div style={{ height: '275px' }}>
228-
<Chart
229-
ariaDesc="Average number of pets"
230-
ariaTitle="Line chart example"
231-
containerComponent={<VictoryZoomContainer zoomDimension="x" />}
232-
legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}
233-
legendPosition="bottom-left"
234-
height={275}
235-
maxDomain={{y: 10}}
236-
minDomain={{y: 0}}
237-
name="chart3"
238-
padding={{
239-
bottom: 75, // Adjusted to accommodate legend
240-
left: 50,
241-
right: 50,
242-
top: 50
243-
}}
244-
themeColor={ChartThemeColor.multiUnordered}
245-
width={width}
246-
>
247-
<ChartAxis tickValues={[2, 3, 4]} />
248-
<ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />
249-
<ChartGroup>
250-
<ChartLine
251-
data={[
252-
{ name: 'Cats', x: '2015', y: 1 },
253-
{ name: 'Cats', x: '2016', y: 2 },
254-
{ name: 'Cats', x: '2017', y: 5 },
255-
{ name: 'Cats', x: '2018', y: 3 }
256-
]}
257-
/>
258-
<ChartLine
259-
data={[
260-
{ name: 'Dogs', x: '2015', y: 2 },
261-
{ name: 'Dogs', x: '2016', y: 1 },
262-
{ name: 'Dogs', x: '2017', y: 7 },
263-
{ name: 'Dogs', x: '2018', y: 4 }
264-
]}
265-
style={{
266-
data: {
267-
strokeDasharray: '3,3'
268-
}
269-
}}
270-
/>
271-
<ChartLine
272-
data={[
273-
{ name: 'Birds', x: '2015', y: 3 },
274-
{ name: 'Birds', x: '2016', y: 4 },
275-
{ name: 'Birds', x: '2017', y: 9 },
276-
{ name: 'Birds', x: '2018', y: 5 }
277-
]}
278-
/>
279-
<ChartLine
280-
data={[
281-
{ name: 'Mice', x: '2015', y: 3 },
282-
{ name: 'Mice', x: '2016', y: 3 },
283-
{ name: 'Mice', x: '2017', y: 8 },
284-
{ name: 'Mice', x: '2018', y: 7 }
285-
]}
286-
/>
287-
</ChartGroup>
288-
</Chart>
289-
</div>
290-
</div>
291-
);
292-
}
293-
}
29444
```
29545

29646
## Documentation

‎packages/react-charts/src/victory/components/ChartLine/examples/ChartLineBasicRightLegend.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
2+
3+
interface PetData {
4+
name?: string;
5+
x?: string;
6+
y?: number;
7+
symbol?: { type: string };
8+
}
9+
10+
export const ChartLineBasicRightLegend: React.FunctionComponent = () => {
11+
const legendData: PetData[] = [
12+
{ name: 'Cats' },
13+
{ name: 'Dogs', symbol: { type: 'dash' } },
14+
{ name: 'Birds' },
15+
{ name: 'Mice' }
16+
];
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: 3 },
31+
{ name: 'Birds', x: '2016', y: 4 },
32+
{ name: 'Birds', x: '2017', y: 9 },
33+
{ name: 'Birds', x: '2018', y: 5 }
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: 7 }
40+
];
41+
42+
return (
43+
<div style={{ height: '250px', width: '600px' }}>
44+
<Chart
45+
ariaDesc="Average number of pets"
46+
ariaTitle="Line chart example"
47+
containerComponent={
48+
<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
49+
}
50+
legendData={legendData}
51+
legendOrientation="vertical"
52+
legendPosition="right"
53+
height={250}
54+
maxDomain={{ y: 10 }}
55+
minDomain={{ y: 0 }}
56+
name="chart1"
57+
padding={{
58+
bottom: 50,
59+
left: 50,
60+
right: 200, // Adjusted to accommodate legend
61+
top: 50
62+
}}
63+
width={600}
64+
>
65+
<ChartAxis tickValues={[2, 3, 4]} />
66+
<ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />
67+
<ChartGroup>
68+
<ChartLine data={data1} />
69+
<ChartLine
70+
data={data2}
71+
style={{
72+
data: {
73+
strokeDasharray: '3,3'
74+
}
75+
}}
76+
/>
77+
<ChartLine data={data3} />
78+
<ChartLine data={data4} />
79+
</ChartGroup>
80+
</Chart>
81+
</div>
82+
);
83+
};

0 commit comments

Comments
 (0)