Skip to content

Commit 359a99e

Browse files
carbonrobotcarbonrobot
authored
Modernize react example code in docs (#2867)
1 parent c0e44aa commit 359a99e

36 files changed

+2118
-2325
lines changed

‎docs/src/content/common-props/common-props.md

Lines changed: 121 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -28,67 +28,61 @@ See the [Animations Guide][] for more detail on animations and transitions
2828
_example:_ `animate={{ duration: 2000 }}`
2929

3030
```playground_norender
31-
class App extends React.Component {
32-
33-
render() {
34-
return (
35-
<VictoryChart
36-
domain={{ y: [0, 1] }}
37-
animate={{ duration: 2000 }}
38-
>
39-
<VictoryScatter
40-
size={this.state.size}
41-
data={this.state.data}
42-
style={{ data: { opacity: ({ datum }) => datum.opacity || 1 } }}
43-
animate={{
44-
animationWhitelist: ["style", "data", "size"], // Try removing "size"
45-
onExit: {
46-
duration: 500,
47-
before: () => ({ opacity: 0.3, _y: 0 })
48-
},
49-
onEnter: {
50-
duration: 500,
51-
before: () => ({ opacity: 0.3, _y: 0 }),
52-
after: (datum) => ({ opacity: 1, _y: datum._y })
53-
}
54-
}}
55-
/>
56-
</VictoryChart>
57-
);
58-
}
59-
60-
constructor(props) {
61-
super(props);
62-
this.state = {
63-
data: this.getData(),
64-
size: this.getSize()
65-
};
66-
}
67-
68-
componentDidMount() {
69-
this.setStateInterval = window.setInterval(() => {
70-
this.setState({
71-
data: this.getData(),
72-
size: this.getSize()
31+
function App(props) {
32+
const [state, setState] = React.useState({
33+
data: getData(),
34+
size: getSize()
35+
});
36+
37+
React.useEffect(() => {
38+
const setStateInterval = window.setInterval(() => {
39+
setState({
40+
data: getData(),
41+
size: getSize()
7342
});
7443
}, 3000);
75-
}
7644
77-
componentWillUnmount() {
78-
window.clearInterval(this.setStateInterval);
79-
}
45+
return () => {
46+
window.clearInterval(setStateInterval);
47+
};
48+
}, []);
8049
81-
getData() {
82-
const num = Math.floor(10 * Math.random() + 5);
83-
const points = new Array(num).fill(1);
84-
return points.map((point, index) => {
85-
return { x: index + 1, y: Math.random() };
86-
});
87-
}
50+
return (
51+
<VictoryChart
52+
domain={{ y: [0, 1] }}
53+
animate={{ duration: 2000 }}
54+
>
55+
<VictoryScatter
56+
size={state.size}
57+
data={state.data}
58+
style={{ data: { opacity: ({ datum }) => datum.opacity || 1 } }}
59+
animate={{
60+
animationWhitelist: ["style", "data", "size"], // Try removing "size"
61+
onExit: {
62+
duration: 500,
63+
before: () => ({ opacity: 0.3, _y: 0 })
64+
},
65+
onEnter: {
66+
duration: 500,
67+
before: () => ({ opacity: 0.3, _y: 0 }),
68+
after: (datum) => ({ opacity: 1, _y: datum._y })
69+
}
70+
}}
71+
/>
72+
</VictoryChart>
73+
);
74+
}
8875
89-
getSize() {
90-
return Math.random() * 10
91-
}
76+
function getData() {
77+
const num = Math.floor(10 * Math.random() + 5);
78+
const points = new Array(num).fill(1);
79+
return points.map((point, index) => {
80+
return { x: index + 1, y: Math.random() };
81+
});
82+
}
83+
84+
function getSize() {
85+
return Math.random() * 10
9286
}
9387
9488
render(<App/>);
@@ -201,31 +195,29 @@ See the [Custom Components Guide][] for more detail on creating your own `dataCo
201195
_examples:_ `dataComponent={<Area/>}`
202196

203197
```playground_norender
204-
class CatPoint extends React.Component {
205-
render() {
206-
const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum
207-
const cat = datum._y >= 0 ? "😻" : "😹";
208-
return (
209-
<text x={x} y={y} fontSize={30}>
210-
{cat}
211-
</text>
212-
);
213-
}
198+
function CatPoint(props) {
199+
const {x, y, datum} = props; // VictoryScatter supplies x, y and datum
200+
const cat = datum._y >= 0 ? "😻" : "😹";
201+
202+
return (
203+
<text x={x} y={y} fontSize={30}>
204+
{cat}
205+
</text>
206+
);
214207
}
215208
216-
class App extends React.Component {
217-
render() {
218-
return (
219-
<VictoryChart>
220-
<VictoryScatter
221-
dataComponent={<CatPoint/>}
222-
y={(d) => Math.sin(2 * Math.PI * d.x)}
223-
samples={15}
224-
/>
225-
</VictoryChart>
226-
);
227-
}
209+
function App() {
210+
return (
211+
<VictoryChart>
212+
<VictoryScatter
213+
dataComponent={<CatPoint/>}
214+
y={(d) => Math.sin(2 * Math.PI * d.x)}
215+
samples={15}
216+
/>
217+
</VictoryChart>
218+
);
228219
}
220+
229221
render(<App/>);
230222
```
231223

@@ -418,77 +410,74 @@ externalEventMutations: PropTypes.arrayOf(
418410
The `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate.
419411

420412
```playground_norender
421-
class App extends React.Component {
422-
constructor() {
423-
super();
424-
this.state = {
425-
externalMutations: undefined
426-
};
427-
}
428-
removeMutation() {
429-
this.setState({
413+
function App() {
414+
const [state, setState] = React.useState({
415+
externalMutations: undefined
416+
});
417+
418+
function removeMutation() {
419+
setState({
430420
externalMutations: undefined
431421
});
432422
}
433423
434-
clearClicks() {
435-
this.setState({
424+
function clearClicks() {
425+
setState({
436426
externalMutations: [
437427
{
438428
childName: "Bar-1",
439429
target: ["data"],
440430
eventKey: "all",
441431
mutation: () => ({ style: undefined }),
442-
callback: this.removeMutation.bind(this)
432+
callback: removeMutation
443433
}
444434
]
445435
});
446436
}
447437
448-
render() {
449-
const buttonStyle = {
450-
backgroundColor: "black",
451-
color: "white",
452-
padding: "10px",
453-
marginTop: "10px"
454-
};
455-
return (
456-
<div>
457-
<button
458-
onClick={this.clearClicks.bind(this)}
459-
style={buttonStyle}
460-
>
461-
Reset
462-
</button>
463-
<VictoryChart domain={{ x: [0, 5 ] }}
464-
externalEventMutations={this.state.externalMutations}
465-
events={[
466-
{
467-
target: "data",
468-
childName: "Bar-1",
469-
eventHandlers: {
470-
onClick: () => ({
471-
target: "data",
472-
mutation: () => ({ style: { fill: "orange" } })
473-
})
474-
}
438+
const buttonStyle = {
439+
backgroundColor: "black",
440+
color: "white",
441+
padding: "10px",
442+
marginTop: "10px"
443+
};
444+
445+
return (
446+
<div>
447+
<button
448+
onClick={clearClicks}
449+
style={buttonStyle}
450+
>
451+
Reset
452+
</button>
453+
<VictoryChart domain={{ x: [0, 5 ] }}
454+
externalEventMutations={state.externalMutations}
455+
events={[
456+
{
457+
target: "data",
458+
childName: "Bar-1",
459+
eventHandlers: {
460+
onClick: () => ({
461+
target: "data",
462+
mutation: () => ({ style: { fill: "orange" } })
463+
})
475464
}
465+
}
466+
]}
467+
>
468+
<VictoryBar name="Bar-1"
469+
style={{ data: { fill: "grey"} }}
470+
labels={() => "click me!"}
471+
data={[
472+
{ x: 1, y: 2 },
473+
{ x: 2, y: 4 },
474+
{ x: 3, y: 1 },
475+
{ x: 4, y: 5 }
476476
]}
477-
>
478-
<VictoryBar name="Bar-1"
479-
style={{ data: { fill: "grey"} }}
480-
labels={() => "click me!"}
481-
data={[
482-
{ x: 1, y: 2 },
483-
{ x: 2, y: 4 },
484-
{ x: 3, y: 1 },
485-
{ x: 4, y: 5 }
486-
]}
487-
/>
488-
</VictoryChart>
489-
</div>
490-
)
491-
}
477+
/>
478+
</VictoryChart>
479+
</div>
480+
)
492481
}
493482
494483
render(<App/>);

‎docs/src/content/docs/victory-scatter.md

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -124,30 +124,27 @@ See the [Custom Components Guide][] for more detail on creating your own `dataCo
124124
_default:_ `<Point/>`
125125

126126
```playground_norender
127-
class CatPoint extends React.Component {
128-
render() {
129-
const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum
130-
const cat = datum._y >= 0 ? "😻" : "😹";
131-
return (
132-
<text x={x} y={y} fontSize={30}>
133-
{cat}
134-
</text>
135-
);
136-
}
127+
function CatPoint(props) {
128+
const {x, y, datum} = props; // VictoryScatter supplies x, y and datum
129+
const cat = datum._y >= 0 ? "😻" : "😹";
130+
131+
return (
132+
<text x={x} y={y} fontSize={30}>
133+
{cat}
134+
</text>
135+
);
137136
}
138137
139-
class App extends React.Component {
140-
render() {
141-
return (
142-
<VictoryChart>
143-
<VictoryScatter
144-
dataComponent={<CatPoint/>}
145-
y={(d) => Math.sin(2 * Math.PI * d.x)}
146-
samples={15}
147-
/>
148-
</VictoryChart>
149-
);
150-
}
138+
function App() {
139+
return (
140+
<VictoryChart>
141+
<VictoryScatter
142+
dataComponent={<CatPoint/>}
143+
y={(d) => Math.sin(2 * Math.PI * d.x)}
144+
samples={15}
145+
/>
146+
</VictoryChart>
147+
);
151148
}
152149
render(<App/>);
153150
```

0 commit comments

Comments
 (0)