You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/01/18 11:28:36 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated: Add area
chart to support heap chart
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/feature/5.0.0 by this push:
new 6aed77a Add area chart to support heap chart
6aed77a is described below
commit 6aed77a39ce656c975b71da9a456fd44d1c60530
Author: hanahmily <ha...@gmail.com>
AuthorDate: Thu Jan 18 19:26:08 2018 +0800
Add area chart to support heap chart
---
src/main/frontend/mock/server.js | 4 +-
.../src/components/Charts/{Line => Area}/index.js | 102 +++++++++------------
.../frontend/src/components/Charts/Line/index.js | 95 ++++++++-----------
src/main/frontend/src/components/Charts/index.js | 2 +
src/main/frontend/src/routes/Server/Server.js | 27 +++++-
5 files changed, 111 insertions(+), 119 deletions(-)
diff --git a/src/main/frontend/mock/server.js b/src/main/frontend/mock/server.js
index db490e7..321f0fc 100644
--- a/src/main/frontend/mock/server.js
+++ b/src/main/frontend/mock/server.js
@@ -17,9 +17,9 @@ export default {
},
getMemoryTrend: {
'heap|15': ['@natural(500, 900)'],
- 'maxHeap|15': ['@natural(900, 2000)'],
+ 'maxHeap|15': [1000],
'noheap|15': ['@natural(100, 200)'],
- 'maxNoheap|15': ['@natural(200, 300)'],
+ 'maxNoheap|15': [300],
},
getGCTrend: {
'youngGC|15': ['@natural(200, 300)'],
diff --git a/src/main/frontend/src/components/Charts/Line/index.js b/src/main/frontend/src/components/Charts/Area/index.js
similarity index 59%
copy from src/main/frontend/src/components/Charts/Line/index.js
copy to src/main/frontend/src/components/Charts/Area/index.js
index 1a9c9f0..a15f5d6 100644
--- a/src/main/frontend/src/components/Charts/Line/index.js
+++ b/src/main/frontend/src/components/Charts/Area/index.js
@@ -5,11 +5,11 @@ import Bind from 'lodash-decorators/bind';
import equal from '../equal';
import styles from '../index.less';
-class Line extends PureComponent {
- state = {
- autoHideXLabels: false,
- }
-
+class Area extends PureComponent {
+ static defaultProps = {
+ limitColor: 'rgb(255, 144, 24)',
+ color: 'rgb(24, 144, 255)',
+ };
componentDidMount() {
this.renderChart(this.props.data);
@@ -18,7 +18,8 @@ class Line extends PureComponent {
componentWillReceiveProps(nextProps) {
if (!equal(this.props, nextProps)) {
- this.renderChart(nextProps.data);
+ const { data = [] } = nextProps;
+ this.renderChart(data);
}
}
@@ -36,27 +37,8 @@ class Line extends PureComponent {
if (!this.node) {
return;
}
- const canvasWidth = this.node.parentNode.clientWidth;
- const { data = [], autoLabel = true } = this.props;
- if (!autoLabel) {
- return;
- }
- const minWidth = data.length * 30;
- const { autoHideXLabels } = this.state;
-
- if (canvasWidth <= minWidth) {
- if (!autoHideXLabels) {
- this.setState({
- autoHideXLabels: true,
- });
- this.renderChart(data);
- }
- } else if (autoHideXLabels) {
- this.setState({
- autoHideXLabels: false,
- });
- this.renderChart(data);
- }
+ const { data = [] } = this.props;
+ this.renderChart(data);
}
handleRef = (n) => {
@@ -64,14 +46,14 @@ class Line extends PureComponent {
}
renderChart(data) {
- const { autoHideXLabels } = this.state;
const {
height = 0,
fit = true,
- margin = [32, 0, (autoHideXLabels ? 8 : 32), 40],
+ margin = [32, 60, 32, 60],
+ limitColor,
+ color,
} = this.props;
-
if (!data || (data && data.length < 1)) {
return;
}
@@ -79,49 +61,55 @@ class Line extends PureComponent {
// clean
this.node.innerHTML = '';
- const { Frame } = G2;
- const frame = new Frame(data);
-
const chart = new G2.Chart({
container: this.node,
forceFit: fit,
- legend: null,
height: height - 22,
plotCfg: {
margin,
},
+ legend: false,
+ });
+ chart.legend(false);
+ chart.axis('x', {
+ title: false,
});
- if (autoHideXLabels) {
- chart.axis('x', {
- title: false,
- tickLine: false,
- labels: false,
- });
- } else {
- chart.axis('x', {
- title: false,
- });
- }
chart.axis('y', {
title: false,
- line: false,
- tickLine: false,
});
- chart.source(frame, {
+ chart.tooltip({
+ crosshairs: {
+ type: 'line',
+ },
+ title: null,
+ map: {
+ name: 'x',
+ value: 'y',
+ },
+ });
+ const dataConfig = {
x: {
type: 'cat',
+ tickCount: 3,
+ range: [0, 1],
},
y: {
min: 0,
},
- });
- chart.tooltip({
- title: null,
- crosshairs: {
- type: 'line',
- },
- });
- chart.line().position('x*y');
+ };
+ const view = chart.createView();
+ const offset = Math.floor(data.length / 2);
+ const xData = data.slice(0, offset);
+ const yData = data.slice(offset).map((v, i) => ({ ...v, y: v.y - xData[i].y }));
+ view.source(yData.concat(xData), dataConfig);
+ view.areaStack().position('x*y').color('type', [limitColor, color]).shape('smooth')
+ .style({ fillOpacity: 0.2 });
+ view.tooltip(false);
+ view.axis(false);
+ const view2 = chart.createView();
+ view2.source(data, dataConfig);
+ view2.line().position('x*y').color('type', [color, limitColor]).shape('smooth')
+ .size(2);
chart.render();
this.chart = chart;
@@ -141,4 +129,4 @@ class Line extends PureComponent {
}
}
-export default Line;
+export default Area;
diff --git a/src/main/frontend/src/components/Charts/Line/index.js b/src/main/frontend/src/components/Charts/Line/index.js
index 1a9c9f0..0eb4034 100644
--- a/src/main/frontend/src/components/Charts/Line/index.js
+++ b/src/main/frontend/src/components/Charts/Line/index.js
@@ -6,10 +6,10 @@ import equal from '../equal';
import styles from '../index.less';
class Line extends PureComponent {
- state = {
- autoHideXLabels: false,
- }
-
+ static defaultProps = {
+ borderColor: 'rgb(24, 144, 255)',
+ color: 'rgb(24, 144, 255)',
+ };
componentDidMount() {
this.renderChart(this.props.data);
@@ -18,7 +18,8 @@ class Line extends PureComponent {
componentWillReceiveProps(nextProps) {
if (!equal(this.props, nextProps)) {
- this.renderChart(nextProps.data);
+ const { data = [] } = nextProps;
+ this.renderChart(data);
}
}
@@ -36,27 +37,8 @@ class Line extends PureComponent {
if (!this.node) {
return;
}
- const canvasWidth = this.node.parentNode.clientWidth;
- const { data = [], autoLabel = true } = this.props;
- if (!autoLabel) {
- return;
- }
- const minWidth = data.length * 30;
- const { autoHideXLabels } = this.state;
-
- if (canvasWidth <= minWidth) {
- if (!autoHideXLabels) {
- this.setState({
- autoHideXLabels: true,
- });
- this.renderChart(data);
- }
- } else if (autoHideXLabels) {
- this.setState({
- autoHideXLabels: false,
- });
- this.renderChart(data);
- }
+ const { data = [] } = this.props;
+ this.renderChart(data);
}
handleRef = (n) => {
@@ -64,14 +46,14 @@ class Line extends PureComponent {
}
renderChart(data) {
- const { autoHideXLabels } = this.state;
const {
height = 0,
fit = true,
- margin = [32, 0, (autoHideXLabels ? 8 : 32), 40],
+ margin = [32, 60, 32, 60],
+ borderColor,
+ color,
} = this.props;
-
if (!data || (data && data.length < 1)) {
return;
}
@@ -79,49 +61,52 @@ class Line extends PureComponent {
// clean
this.node.innerHTML = '';
- const { Frame } = G2;
- const frame = new Frame(data);
-
const chart = new G2.Chart({
container: this.node,
forceFit: fit,
- legend: null,
height: height - 22,
plotCfg: {
margin,
},
+ legend: false,
+ });
+ chart.legend(false);
+ chart.axis('x', {
+ title: false,
});
- if (autoHideXLabels) {
- chart.axis('x', {
- title: false,
- tickLine: false,
- labels: false,
- });
- } else {
- chart.axis('x', {
- title: false,
- });
- }
chart.axis('y', {
title: false,
- line: false,
- tickLine: false,
});
- chart.source(frame, {
+ chart.tooltip({
+ crosshairs: {
+ type: 'line',
+ },
+ title: null,
+ map: {
+ name: 'x',
+ value: 'y',
+ },
+ });
+ const dataConfig = {
x: {
type: 'cat',
+ tickCount: 5,
+ range: [0, 1],
},
y: {
min: 0,
},
- });
- chart.tooltip({
- title: null,
- crosshairs: {
- type: 'line',
- },
- });
- chart.line().position('x*y');
+ };
+ const view = chart.createView();
+ view.source(data, dataConfig);
+ view.line().position('x*y').color(borderColor).shape('smooth')
+ .size(2);
+ const view2 = chart.createView();
+ view2.source(data, dataConfig);
+ view2.area().position('x*y').color(color).shape('smooth')
+ .style({ fillOpacity: 0.2 });
+ view2.tooltip(false);
+ view2.axis(false);
chart.render();
this.chart = chart;
diff --git a/src/main/frontend/src/components/Charts/index.js b/src/main/frontend/src/components/Charts/index.js
index bed2e72..de23dc6 100644
--- a/src/main/frontend/src/components/Charts/index.js
+++ b/src/main/frontend/src/components/Charts/index.js
@@ -1,5 +1,6 @@
import numeral from 'numeral';
import ChartCard from './ChartCard';
+import Area from './Area';
import Bar from './Bar';
import Line from './Line';
import Pie from './Pie';
@@ -17,6 +18,7 @@ const yuan = val => `¥ ${numeral(val).format('0,0')}`;
export default {
yuan,
+ Area,
Bar,
Line,
Pie,
diff --git a/src/main/frontend/src/routes/Server/Server.js b/src/main/frontend/src/routes/Server/Server.js
index 824be0e..61448c0 100644
--- a/src/main/frontend/src/routes/Server/Server.js
+++ b/src/main/frontend/src/routes/Server/Server.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Select, Card } from 'antd';
import {
- ChartCard, MiniArea, MiniBar, Line,
+ ChartCard, MiniArea, MiniBar, Line, Area,
} from '../../components/Charts';
import DescriptionList from '../../components/DescriptionList';
import { timeRange } from '../../utils/utils';
@@ -102,16 +102,33 @@ export default class Server extends Component {
</Col>
</Row>
<Row gutter={24}>
- <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}>
+ <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop: 24 }}>
<Card
- title="MEMORY"
+ title="Heap"
bordered={false}
bodyStyle={{ padding: 0 }}
>
- <Line
+ <Area
height={250}
data={getMemoryTrend.heap
- .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
+ .map((v, i) => ({ x: timeRangeArray[i], y: v, type: 'value' }))
+ .concat(getMemoryTrend.maxHeap
+ .map((v, i) => ({ x: timeRangeArray[i], y: v, type: 'limit ' })))}
+ />
+ </Card>
+ </Col>
+ <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop: 24 }}>
+ <Card
+ title="No-Heap"
+ bordered={false}
+ bodyStyle={{ padding: 0 }}
+ >
+ <Area
+ height={250}
+ data={getMemoryTrend.noheap
+ .map((v, i) => ({ x: timeRangeArray[i], y: v, type: 'value' }))
+ .concat(getMemoryTrend.maxNoheap
+ .map((v, i) => ({ x: timeRangeArray[i], y: v, type: 'limit ' })))}
/>
</Card>
</Col>
--
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].