add cluster monitor chart

web/src/pages/Dashboard/GatewayMonitor.js

@@ -53,6 +53,27 @@ class GatewayMonitor extends PureComponent {
     // 数据源
     const chartDataIndex = [];
     const chartDataQuery = [];
+    const chartDataGateway = [];
+    const chartDataTop = [{
+      user:"liugq",
+      count: 202989,
+    },{
+      user:"liaosy",
+      count: 342989,
+    },{
+      user:"medcl",
+      count: 285989,
+    },{
+      user:"blogsit",
+      count: 291989,
+    },{
+      user:"lucas",
+      count: 272489,
+    },{
+      user:"liming",
+      count: 312589,
+    }];
+
     for (let i = 0; i < 24; i += 1) {
       chartDataIndex.push({
         x_time: this.formatDate(new Date().getTime() + (1000 * 60 * 60 * (i-24))),
@@ -62,6 +83,10 @@ class GatewayMonitor extends PureComponent {
         x_time: this.formatDate(new Date().getTime() + (1000 * 60 * 60 * (i-24))),
         y_value: Math.floor(Math.random() * 100) * 500,
       });
+      chartDataGateway.push({
+        x_time: this.formatDate(new Date().getTime() + (1000 * 60 * 60 * (i-24))),
+        y_value: Math.floor(Math.random() * 100) * 3000,
+      });
     }
 
 // 定义度量
@@ -149,6 +174,62 @@ class GatewayMonitor extends PureComponent {
               </Card>
             </Col>
           </Row>
+          <Row gutter={24}>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card
+                  loading={false}
+                  className={styles.offlineCard}
+                  bordered={false}
+                  bodyStyle={{ padding: '30px 0 10px' }}
+                  style={{ marginTop: 32 }}
+              >
+                <Chart height={400} data={chartDataGateway} scale={cols} forceFit>
+                  <h3 className='main-title' style={styles.mainTitle}>
+                    网关写入QPS
+                  </h3>
+                  <Axis name="year" title/>
+                  <Axis name="value" title/>
+                  <Tooltip
+                      crosshairs={{
+                        type: "y"
+                      }}
+                  />
+                  <Geom type="line" position="x_time*y_value" size={2} />
+                  <Geom
+                      type="point"
+                      position="x_time*y_value"
+                      size={4}
+                      shape={"circle"}
+                      style={{
+                        stroke: "#fff",
+                        lineWidth: 1
+                      }}
+                  />
+                </Chart>
+              </Card>
+            </Col>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Card
+                  loading={false}
+                  className={styles.offlineCard}
+                  bordered={false}
+                  bodyStyle={{ padding: '30px 0 10px' }}
+                  style={{ marginTop: 32 }}
+              >
+                <div style={{ padding: '0 24px' }}>
+                <Chart height={400} data={chartDataTop} scale={cols} forceFit>
+                <h3 className='main-title' style={styles.mainTitle}>
+                    Top用户统计
+                  </h3>
+                  <Axis name="user" />
+                  <Axis name="count" />
+                  <Tooltip/>
+                  <Geom type="interval" position="user*count" />
+                </Chart>
+                </div>
+              </Card>
+            </Col>
+          </Row>
         </GridContent>
     )
   }