Fix the wrong coordinate scaling of QPS chart (passed/blocked) in das…

…hboard (#172) Fixes #22 (by @jasonjoo2010)
alibaba · Oct 16, 2018 · a757950 · a757950
1 parent b06bb02
commit a757950
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/sentinel-dashboard/src/main/webapp/resources/app/scripts/controllers/metric.js b/sentinel-dashboard/src/main/webapp/resources/app/scripts/controllers/metric.js
@@ -70,19 +70,31 @@ app.controller('MetricCtl', ['$scope', '$stateParams', 'MetricService', '$interv
           height: 250,
           padding: [10, 30, 70, 30]
         });
+        var maxQps = 0;
+        for (var i in metric.data) {
+          var item = metric.data[i];
+          if (item.passQps > maxQps) {
+            maxQps = item.passQps;
+          }
+          if (item.blockQps > maxQps) {
+            maxQps = item.blockQps;
+          }
+        }
         chart.source(metric.data);
         chart.scale('timestamp', {
           type: 'time',
           mask: 'YYYY-MM-DD HH:mm:ss'
         });
         chart.scale('passQps', {
           min: 0,
+          max: maxQps,
           fine: true,
           alias: 'p_qps'
           // max: 10
         });
         chart.scale('blockQps', {
           min: 0,
+          max: maxQps,
           fine: true,
           alias: 'b_qps',
         });
@@ -105,7 +117,7 @@ app.controller('MetricCtl', ['$scope', '$stateParams', 'MetricService', '$interv
               textAlign: 'center', // 文本对齐方向，可取值为： start center end
               fill: '#404040', // 文本的颜色
               fontSize: '11', // 文本大小
-              textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
+              //textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
             },
             autoRotate: false,
             formatter: function (text, item, index) {
@@ -115,9 +127,9 @@ app.controller('MetricCtl', ['$scope', '$stateParams', 'MetricService', '$interv
         });
         chart.legend({
           custom: true,
+          position: 'bottom',
           allowAllCanceled: true,
           itemFormatter: function (val) {
-            // console.log('val=', val);
             if ('passQps' === val) {
               return 'p_qps';
             }
@@ -129,7 +141,7 @@ app.controller('MetricCtl', ['$scope', '$stateParams', 'MetricService', '$interv
           items: [
             { value: 'passQps', marker: { symbol: 'hyphen', stroke: 'green', radius: 5, lineWidth: 2 } },
             { value: 'blockQps', marker: { symbol: 'hyphen', stroke: 'blue', radius: 5, lineWidth: 2 } },
-            // { value: 'rt', marker: {symbol: 'hyphen', stroke: 'gray', radius: 5, lineWidth: 2} },
+            //{ value: 'rt', marker: {symbol: 'hyphen', stroke: 'gray', radius: 5, lineWidth: 2} },
           ],
           onClick: function (ev) {
             const item = ev.item;
@@ -150,7 +162,7 @@ app.controller('MetricCtl', ['$scope', '$stateParams', 'MetricService', '$interv
         });
         chart.line().position('timestamp*passQps').size(1).color('green').shape('smooth');
         chart.line().position('timestamp*blockQps').size(1).color('blue').shape('smooth');
-        // chart.line().position('timestamp*rt').size(1).color('gray');
+        //chart.line().position('timestamp*rt').size(1).color('gray').shape('smooth');
         G2.track(false);
         chart.render();
       });

diff --git a/sentinel-dashboard/src/main/webapp/resources/index.htm b/sentinel-dashboard/src/main/webapp/resources/index.htm
@@ -19,7 +19,7 @@
   <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <script src="//cdn.bootcss.com/angular.js/1.4.8/angular.min.js"></script>
-  <script src="//gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.0-beta.6/dist/g2.min.js"></script>
+  <script src="//gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.0-beta.4/dist/g2.min.js"></script>
 
   <script src="dist/js/app.vendor.js"></script>
   <script src="dist/js/app.js"></script>