Skip to content

Commit 3322320

Browse files
parradamparradam
authored
Update class examples to functional components (#366)
* Convert CustomizedLabelLineChart to FC * Convert CustomizedDotLineChart to FC * Convert LineChartAxisInterval to FC * Convert HighlightAndZoomLineChart to FC
1 parent f8557df commit 3322320

File tree

4 files changed

+98
-107
lines changed

4 files changed

+98
-107
lines changed

‎src/docs/exampleComponents/LineChart/CustomizedDotLineChart.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { PureComponent } from 'react';
1+
import React from 'react';
22
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
33

44
const data = [
@@ -64,12 +64,9 @@ const CustomizedDot = (props) => {
6464
);
6565
};
6666

67-
export default class Example extends PureComponent {
68-
69-
70-
render() {
71-
return (
72-
<ResponsiveContainer width="100%" height="100%">
67+
const CustomizedDotLineChart = () => {
68+
return (
69+
<ResponsiveContainer width="100%" height="100%">
7370
<LineChart
7471
width={500}
7572
height={300}
@@ -90,6 +87,7 @@ export default class Example extends PureComponent {
9087
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
9188
</LineChart>
9289
</ResponsiveContainer>
93-
);
94-
}
95-
}
90+
);
91+
};
92+
93+
export default CustomizedDotLineChart;

‎src/docs/exampleComponents/LineChart/CustomizedLabelLineChart.js

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
/* eslint-disable max-classes-per-file */
21
/* eslint-disable react/no-multi-comp */
3-
import React, { PureComponent } from 'react';
2+
import React from 'react';
43
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
54

65
const data = [
@@ -48,38 +47,27 @@ const data = [
4847
},
4948
];
5049

51-
class CustomizedLabel extends PureComponent {
52-
render() {
53-
const { x, y, stroke, value } = this.props;
54-
50+
const CustomizedLabel = ({ x, y, stroke, value }) => {
5551
return (
5652
<text x={x} y={y} dy={-4} fill={stroke} fontSize={10} textAnchor="middle">
5753
{value}
5854
</text>
5955
);
60-
}
61-
}
62-
63-
class CustomizedAxisTick extends PureComponent {
64-
render() {
65-
const { x, y, stroke, payload } = this.props;
56+
};
6657

67-
return (
58+
const CustomizedAxisTick = ({ x, y, stroke, payload }) => {
59+
return (
6860
<g transform={`translate(${x},${y})`}>
6961
<text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">
7062
{payload.value}
7163
</text>
7264
</g>
7365
);
74-
}
75-
}
76-
77-
export default class Example extends PureComponent {
66+
};
7867

79-
80-
render() {
81-
return (
82-
<ResponsiveContainer width="100%" height="100%">
68+
const Example = () => {
69+
return (
70+
<ResponsiveContainer width="100%" height="100%">
8371
<LineChart
8472
width={500}
8573
height={300}
@@ -100,6 +88,7 @@ export default class Example extends PureComponent {
10088
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
10189
</LineChart>
10290
</ResponsiveContainer>
103-
);
104-
}
105-
}
91+
);
92+
};
93+
94+
export default Example;

‎src/docs/exampleComponents/LineChart/HighlightAndZoomLineChart.js

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React, { PureComponent } from 'react';
1+
import React, { useState } from 'react';
22
import {
3-
Label,
43
LineChart,
54
Line,
65
CartesianGrid,
@@ -58,25 +57,21 @@ const initialState = {
5857
animation: true,
5958
};
6059

61-
export default class Example extends PureComponent {
62-
63-
64-
constructor(props) {
65-
super(props);
66-
this.state = initialState;
67-
}
68-
69-
zoom() {
70-
let { refAreaLeft, refAreaRight } = this.state;
71-
const { data } = this.state;
60+
const Example = () => {
61+
const [state, setState] = useState(initialState);
62+
63+
const zoom = () => {
64+
let { refAreaLeft, refAreaRight } = state;
65+
const { data } = state;
7266

7367
if (refAreaLeft === refAreaRight || refAreaRight === '') {
74-
this.setState(() => ({
68+
setState((prevState) => ( {
69+
...prevState,
7570
refAreaLeft: '',
7671
refAreaRight: '',
7772
}));
7873
return;
79-
}
74+
};
8075

8176
// xAxis domain
8277
if (refAreaLeft > refAreaRight) [refAreaLeft, refAreaRight] = [refAreaRight, refAreaLeft];
@@ -85,7 +80,8 @@ export default class Example extends PureComponent {
8580
const [bottom, top] = getAxisYDomain(refAreaLeft, refAreaRight, 'cost', 1);
8681
const [bottom2, top2] = getAxisYDomain(refAreaLeft, refAreaRight, 'impression', 50);
8782

88-
this.setState(() => ({
83+
setState((prevState) => ({
84+
...prevState,
8985
refAreaLeft: '',
9086
refAreaRight: '',
9187
data: data.slice(),
@@ -96,11 +92,12 @@ export default class Example extends PureComponent {
9692
bottom2,
9793
top2,
9894
}));
99-
}
95+
};
10096

101-
zoomOut() {
102-
const { data } = this.state;
103-
this.setState(() => ({
97+
const zoomOut = () => {
98+
const { data } = state;
99+
setState((prevState) => ({
100+
...prevState,
104101
data: data.slice(),
105102
refAreaLeft: '',
106103
refAreaRight: '',
@@ -111,41 +108,50 @@ export default class Example extends PureComponent {
111108
top2: 'dataMax+50',
112109
bottom2: 'dataMin+50',
113110
}));
114-
}
115-
116-
render() {
117-
const { data, barIndex, left, right, refAreaLeft, refAreaRight, top, bottom, top2, bottom2 } = this.state;
118-
119-
return (
120-
<div className="highlight-bar-charts" style={{ userSelect: 'none', width: '100%' }}>
121-
<button type="button" className="btn update" onClick={this.zoomOut.bind(this)}>
122-
Zoom Out
123-
</button>
124-
125-
<ResponsiveContainer width="100%" height={400}>
126-
<LineChart
127-
width={800}
128-
height={400}
129-
data={data}
130-
onMouseDown={(e) => this.setState({ refAreaLeft: e.activeLabel })}
131-
onMouseMove={(e) => this.state.refAreaLeft && this.setState({ refAreaRight: e.activeLabel })}
132-
// eslint-disable-next-line react/jsx-no-bind
133-
onMouseUp={this.zoom.bind(this)}
134-
>
135-
<CartesianGrid strokeDasharray="3 3" />
136-
<XAxis allowDataOverflow dataKey="name" domain={[left, right]} type="number" />
137-
<YAxis allowDataOverflow domain={[bottom, top]} type="number" yAxisId="1" />
138-
<YAxis orientation="right" allowDataOverflow domain={[bottom2, top2]} type="number" yAxisId="2" />
139-
<Tooltip />
140-
<Line yAxisId="1" type="natural" dataKey="cost" stroke="#8884d8" animationDuration={300} />
141-
<Line yAxisId="2" type="natural" dataKey="impression" stroke="#82ca9d" animationDuration={300} />
111+
};
112+
113+
const {
114+
data,
115+
refAreaLeft,
116+
refAreaRight,
117+
left,
118+
right,
119+
top,
120+
bottom,
121+
top2,
122+
bottom2,
123+
} = state;
124+
125+
return (
126+
<div className="highlight-bar-charts" style={{ userSelect: 'none', width: '100%' }}>
127+
<button type="button" className="btn update" onClick={zoomOut}>
128+
Zoom Out
129+
</button>
130+
131+
<ResponsiveContainer width="100%" height={400}>
132+
<LineChart
133+
width={800}
134+
height={400}
135+
data={data}
136+
onMouseDown={(e) => setState(prevState => ({ ...prevState, refAreaLeft: e.activeLabel }))}
137+
onMouseMove={(e) => state.refAreaLeft && setState(prevState => ({ ...prevState, refAreaRight: e.activeLabel }))}
138+
onMouseUp={zoom}
139+
>
140+
<CartesianGrid strokeDasharray="3 3" />
141+
<XAxis allowDataOverflow dataKey="name" domain={[left, right]} type="number" />
142+
<YAxis allowDataOverflow domain={[bottom, top]} type="number" yAxisId="1" />
143+
<YAxis orientation="right" allowDataOverflow domain={[bottom2, top2]} type="number" yAxisId="2" />
144+
<Tooltip />
145+
<Line yAxisId="1" type="natural" dataKey="cost" stroke="#8884d8" animationDuration={300} />
146+
<Line yAxisId="2" type="natural" dataKey="impression" stroke="#82ca9d" animationDuration={300} />
147+
148+
{refAreaLeft && refAreaRight ? (
149+
<ReferenceArea yAxisId="1" x1={refAreaLeft} x2={refAreaRight} strokeOpacity={0.3} />
150+
) : null}
151+
</LineChart>
152+
</ResponsiveContainer>
153+
</div>
154+
);
155+
};
142156

143-
{refAreaLeft && refAreaRight ? (
144-
<ReferenceArea yAxisId="1" x1={refAreaLeft} x2={refAreaRight} strokeOpacity={0.3} />
145-
) : null}
146-
</LineChart>
147-
</ResponsiveContainer>
148-
</div>
149-
);
150-
}
151-
}
157+
export default Example;

‎src/docs/exampleComponents/LineChart/LineChartAxisInterval.js

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,8 @@ const data = [
4646
},
4747
];
4848

49-
export default class Example extends PureComponent {
50-
51-
52-
chart = (interval) => (
49+
const Example = () => {
50+
const chart = (interval) => (
5351
<ResponsiveContainer height={250} width="100%">
5452
<LineChart data={data} margin={{ right: 25, top: 10 }}>
5553
<CartesianGrid strokeDasharray="3 3" />
@@ -61,15 +59,15 @@ export default class Example extends PureComponent {
6159
</ResponsiveContainer>
6260
);
6361

64-
render() {
65-
return (
66-
<>
67-
{this.chart('preserveEnd')}
68-
{this.chart('preserveStart')}
69-
{this.chart('preserveStartEnd')}
70-
{this.chart('equidistantPreserveStart')}
71-
{this.chart(1)}
72-
</>
73-
);
74-
}
75-
}
62+
return (
63+
<>
64+
{chart('preserveEnd')}
65+
{chart('preserveStart')}
66+
{chart('preserveStartEnd')}
67+
{chart('equidistantPreserveStart')}
68+
{chart(1)}
69+
</>
70+
);
71+
};
72+
73+
export default Example;

0 commit comments

Comments
 (0)