145 lines
3.9 KiB
JavaScript
145 lines
3.9 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import {
|
|
Label, LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceArea, Brush
|
|
} from 'recharts';
|
|
|
|
|
|
|
|
const getAxisYDomain = (from, to, ref, offset, data) => {
|
|
const refData = data.slice(from - 1, to);
|
|
let [bottom, top] = [refData[0][ref], refData[0][ref]];
|
|
refData.forEach((d) => {
|
|
if (d[ref] > top) top = d[ref];
|
|
if (d[ref] < bottom) bottom = d[ref];
|
|
});
|
|
|
|
return [(bottom | 0) - offset, (top | 0) + offset];
|
|
};
|
|
|
|
|
|
export default class Example extends PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
data: this.props.data,
|
|
left: 'dataMin',
|
|
right: 'dataMax',
|
|
refAreaLeft: '',
|
|
refAreaRight: '',
|
|
top: 'dataMax+1',
|
|
bottom: 'dataMin-1',
|
|
top2: 'dataMax+20',
|
|
bottom2: 'dataMin-20',
|
|
animation: true,
|
|
};
|
|
}
|
|
|
|
zoom() {
|
|
let { refAreaLeft, refAreaRight, data } = this.state;
|
|
if (refAreaLeft === refAreaRight || refAreaRight === '') {
|
|
this.setState(() => ({
|
|
refAreaLeft: '',
|
|
refAreaRight: '',
|
|
}));
|
|
return;
|
|
}
|
|
|
|
// xAxis domain
|
|
if (refAreaLeft > refAreaRight) [refAreaLeft, refAreaRight] = [refAreaRight, refAreaLeft];
|
|
|
|
// yAxis domain
|
|
let refAreaLeftNum = data.findIndex((e) => e.location === refAreaLeft);
|
|
let refAreaRightNum = data.findIndex((e) => e.location === refAreaRight);
|
|
console.log(refAreaLeft,refAreaRight);
|
|
const [bottom, top] = getAxisYDomain(refAreaLeftNum, refAreaRightNum, 'volumeflow', 5, data);
|
|
const [bottom2, top2] = getAxisYDomain(refAreaLeftNum, refAreaRightNum, 'depth', 50, data);
|
|
|
|
this.setState(() => ({
|
|
refAreaLeft: '',
|
|
refAreaRight: '',
|
|
data: data.slice(),
|
|
left: refAreaLeft,
|
|
right: refAreaRight,
|
|
bottom,
|
|
top,
|
|
bottom2,
|
|
top2,
|
|
}));
|
|
}
|
|
|
|
zoomOut() {
|
|
const { data } = this.state;
|
|
this.setState(() => ({
|
|
data: data.slice(),
|
|
refAreaLeft: '',
|
|
refAreaRight: '',
|
|
left: 'dataMin',
|
|
right: 'dataMax',
|
|
top: 'dataMax+1',
|
|
bottom: 'dataMin',
|
|
top2: 'dataMax+50',
|
|
bottom2: 'dataMin+50',
|
|
}));
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
data, barIndex, left, right, refAreaLeft, refAreaRight, top, bottom, top2, bottom2,
|
|
} = this.state;
|
|
return (
|
|
<div className="highlight-bar-charts" style={{ userSelect: 'none' }}>
|
|
<button
|
|
// href="javascript: void(0);"
|
|
className="btn update"
|
|
onClick={this.zoomOut.bind(this)}
|
|
>
|
|
Zoom Out
|
|
|
|
</button>
|
|
|
|
<LineChart
|
|
width={1000}
|
|
height={600}
|
|
data={data}
|
|
//onMouseDown={e => this.setState({ refAreaLeft: e.activeLabel })}
|
|
//onMouseMove={e => this.state.refAreaLeft && this.setState({ refAreaRight: e.activeLabel })}
|
|
//onMouseUp={this.zoom.bind(this)}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
allowDataOverflow
|
|
dataKey="location"
|
|
domain={[left, right]}
|
|
type="category"
|
|
/>
|
|
<Brush dataKey="name" height={30} stroke="#8884d8" />
|
|
<YAxis
|
|
allowDataOverflow
|
|
domain={[bottom, top]}
|
|
type="number"
|
|
yAxisId="1"
|
|
/>
|
|
<YAxis
|
|
orientation="right"
|
|
allowDataOverflow
|
|
domain={[bottom2, top2]}
|
|
type="number"
|
|
yAxisId="2"
|
|
/>
|
|
<Tooltip />
|
|
<Line yAxisId="1" type="natural" dataKey="volumeflow" stroke="#8884d8" animationDuration={300} />
|
|
<Line yAxisId="1" type="natural" dataKey="depth" stroke="#82ca9d" animationDuration={300} />
|
|
|
|
|
|
{
|
|
(refAreaLeft && refAreaRight) ? (
|
|
<ReferenceArea yAxisId="1" x1={refAreaLeft} x2={refAreaRight} strokeOpacity={0.3} />) : null
|
|
}
|
|
</LineChart>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|