Skip to content

Commit 08b3cfd

Browse files
Mash707Mash707
committed
chore(chart scatter): convert to typescript
1 parent 46b82e5 commit 08b3cfd

File tree

4 files changed

+269
-275
lines changed

4 files changed

+269
-275
lines changed

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

Lines changed: 4 additions & 275 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ ChartThemeColor,
2525
ChartVoronoiContainer,
2626
} from '@patternfly/react-charts/victory';
2727
import { getResizeObserver } from '@patternfly/react-core';
28+
import { useEffect, useRef, useState } from 'react';
2829

2930
## Introduction
3031
Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
@@ -33,296 +34,24 @@ The examples below are based on the [Victory](https://formidable.com/open-source
3334

3435
## Examples
3536
### Basic
36-
```js
37-
import { Chart, ChartAxis, ChartGroup, ChartScatter, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
37+
```ts file = "ChartScatterBasic.tsx"
3838

39-
<div style={{ height: '275px', width: '450px' }}>
40-
<Chart
41-
ariaDesc="Average number of pets"
42-
ariaTitle="Scatter chart example"
43-
containerComponent={
44-
<ChartVoronoiContainer
45-
labels={({ datum }) => `${datum.name}: ${datum.y}`}
46-
constrainToVisibleArea
47-
/>
48-
}
49-
height={275}
50-
maxDomain={{y: 8}}
51-
minDomain={{y: 0}}
52-
name="chart1"
53-
width={450}
54-
>
55-
<ChartAxis />
56-
<ChartAxis dependentAxis showGrid tickValues={[2, 4, 6]} />
57-
<ChartGroup>
58-
<ChartScatter
59-
data={[
60-
{ name: 'Cats', x: '2015', y: 1 },
61-
{ name: 'Cats', x: '2016', y: 2 },
62-
{ name: 'Cats', x: '2017', y: 5 },
63-
{ name: 'Cats', x: '2018', y: 4 }
64-
]}
65-
/>
66-
</ChartGroup>
67-
</Chart>
68-
</div>
6939
```
7040

7141
### Line chart
7242

7343
This demonstrates how to add interactive data points to a line chart.
7444

75-
```js
76-
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
77-
import { getResizeObserver } from '@patternfly/react-core';
78-
79-
class ScatterLineChart extends React.Component {
80-
constructor(props) {
81-
super(props);
82-
this.containerRef = createRef();
83-
this.observer = () => {};
84-
this.state = {
85-
width: 0
86-
};
87-
this.handleResize = () => {
88-
if (this.containerRef.current && this.containerRef.current.clientWidth) {
89-
this.setState({ width: this.containerRef.current.clientWidth });
90-
}
91-
};
92-
93-
this.series = [
94-
{
95-
datapoints: [
96-
{ name: 'Cats', x: '2015', y: 1 },
97-
{ name: 'Cats', x: '2016', y: 2 },
98-
{ name: 'Cats', x: '2017', y: 5 },
99-
{ name: 'Cats', x: '2018', y: 3 }
100-
],
101-
legendItem: { name: 'Cats' }
102-
},
103-
{
104-
datapoints: [
105-
{ name: 'Dogs', x: '2015', y: 2 },
106-
{ name: 'Dogs', x: '2016', y: 1 },
107-
{ name: 'Dogs', x: '2017', y: 7 },
108-
{ name: 'Dogs', x: '2018', y: 4 }
109-
],
110-
legendItem: { name: 'Dogs' },
111-
style: {
112-
data: {
113-
strokeDasharray: '3,3'
114-
}
115-
}
116-
},
117-
{
118-
datapoints: [
119-
{ name: 'Birds', x: '2015', y: 3 },
120-
{ name: 'Birds', x: '2016', y: 4 },
121-
{ name: 'Birds', x: '2017', y: 9 },
122-
{ name: 'Birds', x: '2018', y: 5 }
123-
],
124-
legendItem: { name: 'Birds' }
125-
},
126-
{
127-
datapoints: [
128-
{ name: 'Mice', x: '2015', y: 3 },
129-
{ name: 'Mice', x: '2016', y: 3 },
130-
{ name: 'Mice', x: '2017', y: 8 },
131-
{ name: 'Mice', x: '2018', y: 7 }
132-
],
133-
legendItem: { name: 'Mice' }
134-
}];
135-
}
136-
137-
componentDidMount() {
138-
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
139-
this.handleResize();
140-
}
141-
142-
componentWillUnmount() {
143-
this.observer();
144-
}
145-
146-
render() {
147-
const { width } = this.state;
45+
```ts file = "ChartScatterLineChart.tsx"
14846

149-
return (
150-
<div ref={this.containerRef}>
151-
<div style={{ height: '275px' }}>
152-
<Chart
153-
ariaDesc="Average number of pets"
154-
ariaTitle="Line chart example"
155-
containerComponent={
156-
<ChartVoronoiContainer
157-
labels={({ datum }) => datum.childName.includes('line-') ? `${datum.name}: ${datum.y}` : null}
158-
constrainToVisibleArea
159-
/>
160-
}
161-
legendData={this.series.map(s => s.legendItem)}
162-
legendPosition="bottom-left"
163-
height={275}
164-
maxDomain={{y: 10}}
165-
minDomain={{y: 0}}
166-
name="chart2"
167-
padding={{
168-
bottom: 75, // Adjusted to accommodate legend
169-
left: 50,
170-
right: 50,
171-
top: 50
172-
}}
173-
themeColor={ChartThemeColor.orange}
174-
width={width}
175-
>
176-
<ChartAxis tickValues={[2, 3, 4]} />
177-
<ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />
178-
<ChartGroup>
179-
{this.series.map((s, idx) => {
180-
return (
181-
<ChartScatter
182-
data={s.datapoints}
183-
key={'scatter-' + idx}
184-
name={'scatter-' + idx}
185-
/>
186-
);
187-
})}
188-
</ChartGroup>
189-
<ChartGroup>
190-
{this.series.map((s, idx) => {
191-
return (
192-
<ChartLine
193-
key={'line-' + idx}
194-
name={'line-' + idx}
195-
data={s.datapoints}
196-
/>
197-
);
198-
})}
199-
</ChartGroup>
200-
</Chart>
201-
</div>
202-
</div>
203-
);
204-
}
205-
}
20647
```
20748

20849
### Area chart
20950

21051
This demonstrates how to add interactive data points to an area chart.
21152

212-
```js
213-
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
214-
import { getResizeObserver } from '@patternfly/react-core';
215-
// import '@patternfly/patternfly/patternfly-charts.css'; // For mixed blend mode
216-
217-
class ScatterAreaChart extends React.Component {
218-
constructor(props) {
219-
super(props);
220-
this.containerRef = createRef();
221-
this.observer = () => {};
222-
this.state = {
223-
width: 0
224-
};
225-
this.handleResize = () => {
226-
if (this.containerRef.current && this.containerRef.current.clientWidth) {
227-
this.setState({ width: this.containerRef.current.clientWidth });
228-
}
229-
};
230-
231-
this.series = [
232-
{
233-
datapoints: [
234-
{ name: 'Cats', x: '2015', y: 3 },
235-
{ name: 'Cats', x: '2016', y: 4 },
236-
{ name: 'Cats', x: '2017', y: 8 },
237-
{ name: 'Cats', x: '2018', y: 6 }
238-
],
239-
legendItem: { name: 'Cats' }
240-
},
241-
{
242-
datapoints: [
243-
{ name: 'Dogs', x: '2015', y: 2 },
244-
{ name: 'Dogs', x: '2016', y: 3 },
245-
{ name: 'Dogs', x: '2017', y: 4 },
246-
{ name: 'Dogs', x: '2018', y: 5 },
247-
{ name: 'Dogs', x: '2019', y: 6 }
248-
],
249-
legendItem: { name: 'Dogs' }
250-
},
251-
{
252-
datapoints: [
253-
{ name: 'Birds', x: '2015', y: 1 },
254-
{ name: 'Birds', x: '2016', y: 2 },
255-
{ name: 'Birds', x: '2017', y: 3 },
256-
{ name: 'Birds', x: '2018', y: 2 },
257-
{ name: 'Birds', x: '2019', y: 4 }
258-
],
259-
legendItem: { name: 'Birds' }
260-
}];
261-
}
262-
263-
componentDidMount() {
264-
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
265-
this.handleResize();
266-
}
267-
268-
componentWillUnmount() {
269-
this.observer();
270-
}
271-
272-
render() {
273-
const { width } = this.state;
53+
```ts file = "ChartScatterAreaChart.tsx"
27454

275-
return (
276-
<div ref={this.containerRef}>
277-
<div style={{ height: '250px' }}>
278-
<Chart
279-
ariaDesc="Average number of pets"
280-
ariaTitle="Area chart example"
281-
containerComponent={
282-
<ChartVoronoiContainer
283-
labels={({ datum }) => datum.childName.includes('area-') ? `${datum.name}: ${datum.y}` : null}
284-
constrainToVisibleArea
285-
/>
286-
}
287-
height={225}
288-
legendData={this.series.map(s => s.legendItem)}
289-
legendPosition="bottom-left"
290-
name="chart3"
291-
padding={{
292-
bottom: 75, // Adjusted to accommodate legend
293-
left: 50,
294-
right: 50,
295-
top: 50,
296-
}}
297-
maxDomain={{y: 9}}
298-
themeColor={ChartThemeColor.multiUnordered}
299-
width={width}
300-
>
301-
<ChartAxis />
302-
<ChartAxis dependentAxis showGrid />
303-
<ChartGroup>
304-
{this.series.map((s, idx) => {
305-
return (
306-
<ChartScatter data={s.datapoints} key={'scatter-' + idx} name={'scatter-' + idx} />
307-
);
308-
})}
309-
</ChartGroup>
310-
<ChartGroup>
311-
{this.series.map((s, idx) => {
312-
return (
313-
<ChartArea
314-
interpolation="monotoneX"
315-
key={'area-' + idx} name={'area-' + idx} data={s.datapoints}
316-
/>
317-
);
318-
})}
319-
</ChartGroup>
320-
</Chart>
321-
</div>
322-
</div>
323-
);
324-
}
325-
}
32655
```
32756

32857
## Documentation

0 commit comments

Comments
 (0)