This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch update-antdpro
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/update-antdpro by this push:
new 500a0b0 Add graph
500a0b0 is described below
commit 500a0b0a8d7604162573fad5571517fd026ae7f1
Author: gaohongtao <[email protected]>
AuthorDate: Mon Feb 26 22:34:51 2018 +0800
Add graph
---
package.json | 2 +-
public/favicon.png | Bin 1397 -> 3825 bytes
src/components/Charts/Area/index.js | 143 ++++++++++++++----------------
src/components/Charts/Line/index.js | 152 +++++++++++++++-----------------
src/components/Charts/StackBar/index.js | 127 +++++++++++++-------------
src/models/global.js | 4 +
src/routes/Server/Server.js | 48 +++++-----
src/routes/Service/Service.js | 6 +-
8 files changed, 229 insertions(+), 253 deletions(-)
diff --git a/package.json b/package.json
index 3fb1b92..38939df 100755
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
"@babel/polyfill": "^7.0.0-beta.36",
"antd": "^3.1.0",
"babel-runtime": "^6.9.2",
- "bizcharts": "^3.1.0-beta.4",
+ "bizcharts": "^3.1.3-beta.1",
"bizcharts-plugin-slider": "^2.0.1",
"classnames": "^2.2.5",
"cytoscape": "^3.2.7",
diff --git a/public/favicon.png b/public/favicon.png
index 7606a35..240c9c3 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/src/components/Charts/Area/index.js
b/src/components/Charts/Area/index.js
index b87fd9f..4e8e2a1 100644
--- a/src/components/Charts/Area/index.js
+++ b/src/components/Charts/Area/index.js
@@ -1,34 +1,27 @@
-import React, { PureComponent } from 'react';
-import G2 from '@antv/g2';
+import React, { Component } from 'react';
+import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
-import equal from '../equal';
+import autoHeight from '../autoHeight';
import styles from '../index.less';
-class Area extends PureComponent {
+@autoHeight()
+class Area extends Component {
static defaultProps = {
limitColor: 'rgb(255, 144, 24)',
color: 'rgb(24, 144, 255)',
};
- componentDidMount() {
- this.renderChart(this.props.data);
+ state = {
+ autoHideXLabels: false,
+ };
+ componentDidMount() {
window.addEventListener('resize', this.resize);
- }
-
- componentWillReceiveProps(nextProps) {
- if (!equal(this.props, nextProps)) {
- const { data = [] } = nextProps;
- this.renderChart(data);
- }
+ this.resize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
- if (this.chart) {
- this.chart.destroy();
- }
- this.resize.cancel();
}
@Bind()
@@ -37,57 +30,51 @@ class Area extends PureComponent {
if (!this.node) {
return;
}
- const { data = [] } = this.props;
- this.renderChart(data);
+ 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,
+ });
+ }
+ } else if (autoHideXLabels) {
+ this.setState({
+ autoHideXLabels: false,
+ });
+ }
}
+ handleRoot = (n) => {
+ this.root = n;
+ };
+
handleRef = (n) => {
this.node = n;
- }
+ };
- renderChart(data) {
+ render() {
const {
- height = 0,
- fit = true,
- margin = [32, 60, 32, 60],
- limitColor,
+ height,
+ title,
+ forceFit = true,
+ data,
color,
+ limitColor,
} = this.props;
- if (!data || (data && data.length < 1)) {
- return;
+ if (!data || data.length < 1) {
+ return (<span style={{ display: 'none' }} />);
}
- // clean
- this.node.innerHTML = '';
+ const { autoHideXLabels } = this.state;
- const chart = new G2.Chart({
- container: this.node,
- forceFit: fit,
- height: height - 22,
- plotCfg: {
- margin,
- },
- legend: false,
- });
- chart.legend(false);
- chart.axis('x', {
- title: false,
- });
- chart.axis('y', {
- title: false,
- });
- chart.tooltip({
- crosshairs: {
- type: 'line',
- },
- title: null,
- map: {
- name: 'x',
- value: 'y',
- },
- });
- const dataConfig = {
+ const scale = {
x: {
type: 'cat',
tickCount: 3,
@@ -97,32 +84,32 @@ class Area extends PureComponent {
min: 0,
},
};
- 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;
- }
-
- render() {
- const { height, title } = this.props;
-
return (
- <div className={styles.chart} style={{ height }}>
- <div>
- { title && <h4>{title}</h4>}
- <div ref={this.handleRef} />
+ <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
+ <div ref={this.handleRef}>
+ {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
+ <Chart
+ scale={scale}
+ height={title ? height - 41 : height}
+ forceFit={forceFit}
+ data={yData.concat(xData)}
+ padding="auto"
+ >
+ <Axis
+ name="x"
+ title={false}
+ label={autoHideXLabels ? false : {}}
+ tickLine={autoHideXLabels ? false : {}}
+ />
+ <Axis name="y" min={0} />
+ <Tooltip showTitle={false} crosshairs={{ type: 'line' }} />
+ <Geom type="areaStack" position="x*y" color={['type', [color,
limitColor]]} />
+ <Geom type="lineStack" position="x*y" size={2} color={['type',
[color, limitColor]]} />
+ </Chart>
</div>
</div>
);
diff --git a/src/components/Charts/Line/index.js
b/src/components/Charts/Line/index.js
index 483cb2b..9d1ded8 100644
--- a/src/components/Charts/Line/index.js
+++ b/src/components/Charts/Line/index.js
@@ -1,34 +1,23 @@
-import React, { PureComponent } from 'react';
-import G2 from '@antv/g2';
+import React, { Component } from 'react';
+import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
-import equal from '../equal';
+import autoHeight from '../autoHeight';
import styles from '../index.less';
-class Line extends PureComponent {
- static defaultProps = {
- borderColor: 'rgb(24, 144, 255)',
- color: 'rgb(24, 144, 255)',
+@autoHeight()
+class Line extends Component {
+ state = {
+ autoHideXLabels: false,
};
- componentDidMount() {
- this.renderChart(this.props.data);
+ componentDidMount() {
window.addEventListener('resize', this.resize);
- }
-
- componentWillReceiveProps(nextProps) {
- if (!equal(this.props, nextProps)) {
- const { data = [] } = nextProps;
- this.renderChart(data);
- }
+ this.resize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
- if (this.chart) {
- this.chart.destroy();
- }
- this.resize.cancel();
}
@Bind()
@@ -37,89 +26,88 @@ class Line extends PureComponent {
if (!this.node) {
return;
}
- const { data = [] } = this.props;
- this.renderChart(data);
+ 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,
+ });
+ }
+ } else if (autoHideXLabels) {
+ this.setState({
+ autoHideXLabels: false,
+ });
+ }
}
+ handleRoot = (n) => {
+ this.root = n;
+ };
+
handleRef = (n) => {
this.node = n;
- }
+ };
- renderChart(data) {
+ render() {
const {
- height = 0,
- fit = true,
- margin = [32, 60, 32, 60],
- borderColor,
- color,
+ height,
+ title,
+ forceFit = true,
+ data,
+ color = 'rgba(24, 144, 255, 0.85)',
} = this.props;
- if (!data || (data && data.length < 1)) {
- return;
+ if (!data || data.length < 1) {
+ return (<span style={{ display: 'none' }} />);
}
- // clean
- this.node.innerHTML = '';
+ const { autoHideXLabels } = this.state;
- const chart = new G2.Chart({
- container: this.node,
- forceFit: fit,
- height: height - 22,
- plotCfg: {
- margin,
- },
- legend: false,
- });
- chart.legend(false);
- chart.axis('x', {
- title: false,
- });
- chart.axis('y', {
- title: false,
- });
- chart.tooltip({
- crosshairs: {
- type: 'line',
- },
- title: null,
- map: {
- name: 'x',
- value: 'y',
- },
- });
- const dataConfig = {
+ const scale = {
x: {
type: 'cat',
- tickCount: 5,
- range: [0, 1],
},
y: {
min: 0,
},
};
- 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;
- }
-
- render() {
- const { height, title } = this.props;
+ const tooltip = [
+ 'x*y',
+ (x, y) => ({
+ name: x,
+ value: y,
+ }),
+ ];
return (
- <div className={styles.chart} style={{ height }}>
- <div>
- { title && <h4>{title}</h4>}
- <div ref={this.handleRef} />
+ <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
+ <div ref={this.handleRef}>
+ {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
+ <Chart
+ scale={scale}
+ height={title ? height - 41 : height}
+ forceFit={forceFit}
+ data={data}
+ padding="auto"
+ >
+ <Axis
+ name="x"
+ title={false}
+ label={autoHideXLabels ? false : {}}
+ tickLine={autoHideXLabels ? false : {}}
+ grid={false}
+ />
+ <Axis name="y" min={0} grid={false} />
+ <Tooltip showTitle={false} crosshairs={false} />
+ <Geom type="line" position="x*y" color={color} tooltip={tooltip}
shape="smooth" />
+ </Chart>
</div>
</div>
);
diff --git a/src/components/Charts/StackBar/index.js
b/src/components/Charts/StackBar/index.js
index 132bc3e..e114863 100644
--- a/src/components/Charts/StackBar/index.js
+++ b/src/components/Charts/StackBar/index.js
@@ -1,34 +1,27 @@
-import React, { PureComponent } from 'react';
-import G2 from '@antv/g2';
+import React, { Component } from 'react';
+import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
-import equal from '../equal';
+import autoHeight from '../autoHeight';
import styles from '../index.less';
-class Area extends PureComponent {
+@autoHeight()
+class Area extends Component {
static defaultProps = {
limitColor: 'rgb(255, 181, 102)',
color: 'rgb(102, 181, 255)',
};
- componentDidMount() {
- this.renderChart(this.props.data);
+ state = {
+ autoHideXLabels: false,
+ };
+ componentDidMount() {
window.addEventListener('resize', this.resize);
- }
-
- componentWillReceiveProps(nextProps) {
- if (!equal(this.props, nextProps)) {
- const { data = [] } = nextProps;
- this.renderChart(data);
- }
+ this.resize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
- if (this.chart) {
- this.chart.destroy();
- }
- this.resize.cancel();
}
@Bind()
@@ -37,69 +30,81 @@ class Area extends PureComponent {
if (!this.node) {
return;
}
- const { data = [] } = this.props;
- this.renderChart(data);
+ 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,
+ });
+ }
+ } else if (autoHideXLabels) {
+ this.setState({
+ autoHideXLabels: false,
+ });
+ }
}
+ handleRoot = (n) => {
+ this.root = n;
+ };
+
handleRef = (n) => {
this.node = n;
- }
+ };
- renderChart(data) {
+ render() {
const {
- height = 0,
- fit = true,
- margin = [32, 60, 32, 60],
- limitColor,
+ height,
+ title,
+ forceFit = true,
+ data,
color,
+ limitColor,
} = this.props;
- if (!data || (data && data.length < 1)) {
- return;
+ if (!data || data.length < 1) {
+ return (<span style={{ display: 'none' }} />);
}
- // clean
- this.node.innerHTML = '';
+ const { autoHideXLabels } = this.state;
- const chart = new G2.Chart({
- container: this.node,
- forceFit: fit,
- height: height - 22,
- plotCfg: {
- margin,
- },
- legend: false,
- });
- chart.legend(false);
- chart.axis('x', {
- title: false,
- });
- chart.axis('y', {
- title: false,
- });
- const dataConfig = {
+ const scale = {
x: {
type: 'cat',
tickCount: 5,
},
+ y: {
+ min: 0,
+ },
};
- const view = chart.createView();
- view.source(data, dataConfig);
- view.intervalStack().position('x*y').color('type', [limitColor, color])
- .style({ fillOpacity: 1 });
- chart.render();
-
- this.chart = chart;
- }
-
- render() {
- const { height, title } = this.props;
return (
- <div className={styles.chart} style={{ height }}>
- <div>
- { title && <h4>{title}</h4>}
- <div ref={this.handleRef} />
+ <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
+ <div ref={this.handleRef}>
+ {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
+ <Chart
+ scale={scale}
+ height={title ? height - 41 : height}
+ forceFit={forceFit}
+ data={data}
+ padding="auto"
+ >
+ <Axis
+ name="x"
+ title={false}
+ label={autoHideXLabels ? false : {}}
+ tickLine={autoHideXLabels ? false : {}}
+ />
+ <Axis name="y" min={0} />
+ <Tooltip showTitle={false} />
+ <Geom type="intervalStack" position="x*y" color={['type', [color,
limitColor]]} />
+ </Chart>
</div>
</div>
);
diff --git a/src/models/global.js b/src/models/global.js
index c43d721..7ef7be0 100644
--- a/src/models/global.js
+++ b/src/models/global.js
@@ -9,7 +9,11 @@ export default {
notices: [],
duration: {
collapsed: true,
+ display: {
+ range: [],
+ },
},
+ globalVariables: {},
},
effects: {
diff --git a/src/routes/Server/Server.js b/src/routes/Server/Server.js
index 43322fb..7319339 100644
--- a/src/routes/Server/Server.js
+++ b/src/routes/Server/Server.js
@@ -98,14 +98,16 @@ export default class Server extends PureComponent {
<ChartCard
title="Avg Response Time"
total={`${this.avg(getServerResponseTimeTrend.trendList)} ms`}
+ contentHeight={46}
>
- <MiniArea
- animate={false}
- color="#975FE4"
- height={46}
- data={getServerResponseTimeTrend.trendList
- .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
- />
+ {getServerResponseTimeTrend.trendList.length > 0 ? (
+ <MiniArea
+ animate={false}
+ color="#975FE4"
+ data={getServerResponseTimeTrend.trendList
+ .map((v, i) => { return { x: timeRangeArray[i], y: v };
})}
+ />
+ ) : (<span style={{ display: 'none' }} />)}
</ChartCard>
</Col>
<Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop:
24 }}>
@@ -124,66 +126,58 @@ export default class Server extends PureComponent {
</Row>
<Row gutter={24}>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop:
24 }}>
- <Card
+ <ChartCard
title="CPU"
- bordered={false}
- bodyStyle={{ padding: 0 }}
+ contentHeight={250}
>
<Line
- height={250}
data={getCPUTrend.cost
.map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
/>
- </Card>
+ </ChartCard>
</Col>
</Row>
<Row gutter={24}>
<Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop:
24 }}>
- <Card
+ <ChartCard
title="Heap"
- bordered={false}
- bodyStyle={{ padding: 0 }}
+ contentHeight={250}
>
<Area
- height={250}
data={getMemoryTrend.heap
.map((v, i) => ({ x: timeRangeArray[i], y: v, type:
'value' }))
.concat(getMemoryTrend.maxHeap
.map((v, i) => ({ x: timeRangeArray[i], y: v, type: 'limit
' })))}
/>
- </Card>
+ </ChartCard>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop:
24 }}>
- <Card
+ <ChartCard
title="No-Heap"
- bordered={false}
- bodyStyle={{ padding: 0 }}
+ contentHeight={250}
>
<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>
+ </ChartCard>
</Col>
</Row>
<Row gutter={24}>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop:
24 }}>
- <Card
+ <ChartCard
title="GC"
- bordered={false}
- bodyStyle={{ padding: 0 }}
+ contentHeight={250}
>
<StackBar
- height={250}
data={getGCTrend.oldGC
.map((v, i) => ({ x: timeRangeArray[i], y: v, type:
'oldGC' }))
.concat(getGCTrend.youngGC
.map((v, i) => ({ x: timeRangeArray[i], y: v, type:
'youngGC' })))}
/>
- </Card>
+ </ChartCard>
</Col>
</Row>
</Panel>
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index 2716a4a..7ab9ed0 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -85,11 +85,10 @@ export default class Service extends PureComponent {
<ChartCard
title="Avg Throughout"
total={`${this.avg(getServiceTPSTrend.trendList)}`}
+ contentHeight={46}
>
<MiniArea
- animate={false}
color="#975FE4"
- height={46}
data={getServiceTPSTrend.trendList
.map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
/>
@@ -99,10 +98,9 @@ export default class Service extends PureComponent {
<ChartCard
title="Avg Response Time"
total={`${this.avg(getServiceResponseTimeTrend.trendList)} ms`}
+ contentHeight={46}
>
<MiniArea
- animate={false}
- height={46}
data={getServiceResponseTimeTrend.trendList
.map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
/>
--
To stop receiving notification emails like this one, please contact
[email protected].
