[incubator-skywalking-ui] branch feature/5.0.0 updated: Add stack bar chart

[ha...@apache.org]

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 9767df3  Add stack bar chart
9767df3 is described below

commit 9767df3605498ec596c480be3cca3d334eb0b87d
Author: hanahmily <ha...@gmail.com>
AuthorDate: Fri Jan 19 09:48:30 2018 +0800

    Add stack bar chart
---
 .../src/components/Charts/StackBar/index.js        | 109 +++++++++++++++++++++
 src/main/frontend/src/components/Charts/index.js   |   2 +
 src/main/frontend/src/routes/Server/Server.js      |  10 +-
 3 files changed, 117 insertions(+), 4 deletions(-)

diff --git a/src/main/frontend/src/components/Charts/StackBar/index.js b/src/main/frontend/src/components/Charts/StackBar/index.js
new file mode 100644
index 0000000..a7ce7b0
--- /dev/null
+++ b/src/main/frontend/src/components/Charts/StackBar/index.js
@@ -0,0 +1,109 @@
+import React, { PureComponent } from 'react';
+import G2 from 'g2';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+import styles from '../index.less';
+
+class Area extends PureComponent {
+  static defaultProps = {
+    limitColor: 'rgb(255, 181, 102)',
+    color: 'rgb(102, 181, 255)',
+  };
+  componentDidMount() {
+    this.renderChart(this.props.data);
+
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      const { data = [] } = nextProps;
+      this.renderChart(data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    const { data = [] } = this.props;
+    this.renderChart(data);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  }
+
+  renderChart(data) {
+    const {
+      height = 0,
+      fit = true,
+      margin = [32, 60, 32, 60],
+      limitColor,
+      color,
+    } = this.props;
+
+    if (!data || (data && data.length < 1)) {
+      return;
+    }
+
+    // clean
+    this.node.innerHTML = '';
+
+    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 = {
+      x: {
+        type: 'cat',
+        tickCount: 5,
+      },
+    };
+    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>
+      </div>
+    );
+  }
+}
+
+export default Area;
diff --git a/src/main/frontend/src/components/Charts/index.js b/src/main/frontend/src/components/Charts/index.js
index de23dc6..997b17c 100644
--- a/src/main/frontend/src/components/Charts/index.js
+++ b/src/main/frontend/src/components/Charts/index.js
@@ -13,6 +13,7 @@ import Field from './Field';
 import WaterWave from './WaterWave';
 import TagCloud from './TagCloud';
 import TimelineChart from './TimelineChart';
+import StackBar from './StackBar';
 
 const yuan = val => `&yen; ${numeral(val).format('0,0')}`;
 
@@ -32,4 +33,5 @@ export default {
   WaterWave,
   TagCloud,
   TimelineChart,
+  StackBar,
 };
diff --git a/src/main/frontend/src/routes/Server/Server.js b/src/main/frontend/src/routes/Server/Server.js
index 61448c0..e5f920e 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, Area,
+  ChartCard, MiniArea, MiniBar, Line, Area, StackBar,
 } from '../../components/Charts';
 import DescriptionList from '../../components/DescriptionList';
 import { timeRange } from '../../utils/utils';
@@ -140,10 +140,12 @@ export default class Server extends Component {
               bordered={false}
               bodyStyle={{ padding: 0 }}
             >
-              <Line
+              <StackBar
                 height={250}
-                data={getGCTrend.youngGC
-                  .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
+                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>
           </Col>

-- 
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].