From 558da10f160d03e0d38492db294d620ffbbde74a Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Mon, 18 Sep 2017 14:36:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E8=A1=A8=E6=B8=85?= =?UTF-8?q?=E7=90=86=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/ActiveChart/index.js | 6 +++++- src/components/Charts/Bar/index.js | 8 ++++++++ src/components/Charts/Gauge/index.js | 6 ++++++ src/components/Charts/MiniArea/index.js | 8 ++++++++ src/components/Charts/MiniBar/index.js | 8 ++++++++ src/components/Charts/Pie/index.js | 6 ++++++ src/components/Charts/Radar/index.js | 6 ++++++ src/components/Charts/WaterWave/index.js | 17 ++++++++++++----- src/components/TimelineChart/index.js | 13 +++++++++++++ 10 files changed, 73 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 6cd21c00..60d472a3 100755 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "react-test-renderer": "^15.6.1", "redbox-react": "^1.3.2", "roadhog": "^1.0.2", - "roadhog-api-doc": "^0.1.5", + "roadhog-api-doc": "^0.1.8", "stylelint": "^8.1.0", "stylelint-config-standard": "^17.0.0" }, diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js index 1ab1cd54..e615d662 100644 --- a/src/components/ActiveChart/index.js +++ b/src/components/ActiveChart/index.js @@ -22,13 +22,17 @@ export default class ActiveChart extends PureComponent { } componentDidMount() { - setInterval(() => { + this.timer = setInterval(() => { this.setState({ activeData: getActiveData(), }); }, 1000); } + componentWillUnmount() { + clearInterval(this.timer); + } + render() { const { activeData = [] } = this.state; diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js index 765f5eb4..89fe1ae7 100644 --- a/src/components/Charts/Bar/index.js +++ b/src/components/Charts/Bar/index.js @@ -14,6 +14,12 @@ class Bar extends PureComponent { } } + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + handleRef = (n) => { this.node = n; } @@ -68,6 +74,8 @@ class Bar extends PureComponent { }); chart.interval().position('x*y').color(color); chart.render(); + + this.chart = chart; } render() { diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js index dcd3779c..d89543eb 100644 --- a/src/components/Charts/Gauge/index.js +++ b/src/components/Charts/Gauge/index.js @@ -16,6 +16,12 @@ class Gauge extends PureComponent { } } + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + handleRef = (n) => { this.node = n; } diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js index 12fe4c45..7d12aedd 100644 --- a/src/components/Charts/MiniArea/index.js +++ b/src/components/Charts/MiniArea/index.js @@ -14,6 +14,12 @@ class MiniArea extends PureComponent { } } + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + handleRef = (n) => { this.node = n; } @@ -79,6 +85,8 @@ class MiniArea extends PureComponent { chart.line().position('x*y').color(color).shape('smooth'); } chart.render(); + + this.chart = chart; } render() { diff --git a/src/components/Charts/MiniBar/index.js b/src/components/Charts/MiniBar/index.js index d71517f8..a3f32b20 100644 --- a/src/components/Charts/MiniBar/index.js +++ b/src/components/Charts/MiniBar/index.js @@ -14,6 +14,12 @@ class MiniBar extends PureComponent { } } + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + handleRef = (n) => { this.node = n; } @@ -61,6 +67,8 @@ class MiniBar extends PureComponent { }); chart.interval().position('x*y').color(color); chart.render(); + + this.chart = chart; } render() { diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index af3f68a5..fb83f952 100644 --- a/src/components/Charts/Pie/index.js +++ b/src/components/Charts/Pie/index.js @@ -20,6 +20,12 @@ class Pie extends Component { } } + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + handleRef = (n) => { this.node = n; } diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js index 12640774..f52d1947 100644 --- a/src/components/Charts/Radar/index.js +++ b/src/components/Charts/Radar/index.js @@ -20,6 +20,12 @@ class Radar extends PureComponent { } } + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + handleRef = (n) => { this.node = n; } diff --git a/src/components/Charts/WaterWave/index.js b/src/components/Charts/WaterWave/index.js index f2dab658..575dce14 100644 --- a/src/components/Charts/WaterWave/index.js +++ b/src/components/Charts/WaterWave/index.js @@ -16,12 +16,18 @@ class WaterWave extends PureComponent { this.renderChart(); this.resize(); - window.addEventListener('resize', () => { - this.resize(); - }); + window.addEventListener('resize', this.resize); } - resize() { + componentWillUnmount() { + cancelAnimationFrame(this.timer); + if (this.node) { + this.node.innerHTML = ''; + } + window.removeEventListener('resize', this.resize); + } + + resize = () => { const { height } = this.props; const realWidth = this.root.parentNode.offsetWidth; if (realWidth < this.props.height) { @@ -39,6 +45,7 @@ class WaterWave extends PureComponent { renderChart() { const { percent, color = '#19AFFA' } = this.props; const data = percent / 100; + const self = this; if (!this.node || !data) { return; @@ -163,7 +170,7 @@ class WaterWave extends PureComponent { sp += 0.07; drawSin(); } - requestAnimationFrame(render); + self.timer = requestAnimationFrame(render); } render(); diff --git a/src/components/TimelineChart/index.js b/src/components/TimelineChart/index.js index c5b185cd..3e319aeb 100644 --- a/src/components/TimelineChart/index.js +++ b/src/components/TimelineChart/index.js @@ -14,6 +14,15 @@ class TimelineChart extends Component { } } + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + if (this.slider) { + this.slider.destroy(); + } + } + sliderId = `timeline-chart-slider-${Math.random() * 1000}` handleRef = (n) => { @@ -75,6 +84,8 @@ class TimelineChart extends Component { chart.line().position('x*y1').color('#4FAAEB'); chart.line().position('x*y2').color('#9AD681'); + this.chart = chart; + /* eslint new-cap:0 */ const slider = new Slider({ domId: this.sliderId, @@ -84,6 +95,8 @@ class TimelineChart extends Component { charts: [chart], }); slider.render(); + + this.slider = slider; } render() { -- GitLab