浏览代码

HUE-8649 [jb] Add zoom and style the performance graph

Johan Ahlen 7 年之前
父节点
当前提交
4c045e1
共有 1 个文件被更改,包括 42 次插入22 次删除
  1. 42 22
      desktop/core/src/desktop/templates/ko_components/ko_performance_graph.mako

+ 42 - 22
desktop/core/src/desktop/templates/ko_components/ko_performance_graph.mako

@@ -39,19 +39,20 @@ from django.utils.translation import ugettext as _
 
 
     (function () {
-      var generateFakeData = function () {
+      var generateFakeData = function (min, max) {
         var entries = 100;
         var timeDiff = 300000; // 5 minutes
         var startTime = Date.now() - entries * timeDiff;
-        var time = ['x'];
-        var workerData = ['worker1'];
-        var result = [time, workerData];
+        var result = [['time', 'worker 1', 'worker 2', 'worker 3']];
 
-        var lastVal = 0;
+        var lastVal1 = min;
+        var lastVal2 = min;
+        var lastVal3 = min;
         for (var i = 0; i < 100; i++) {
-          lastVal = Math.round(Math.max(Math.min(lastVal + (Math.random()-0.5) * 20, 100), 0));
-          time.push(startTime + timeDiff * i);
-          workerData.push(lastVal);
+          lastVal1 = Math.round(Math.max(Math.min(lastVal1 + (Math.random() - 0.5) * 20, max), min));
+          lastVal2 = Math.round(Math.max(Math.min(lastVal2 + (Math.random() - 0.5) * 20, max), min));
+          lastVal3 = Math.round(Math.max(Math.min(lastVal3 + (Math.random() - 0.5) * 20, max), min));
+          result.push([startTime + timeDiff * i, lastVal1, lastVal2, lastVal3]);
         }
         return result;
       };
@@ -74,7 +75,7 @@ from django.utils.translation import ugettext as _
         self.header = AVAILABLE_TYPES[self.type].header;
         self.graphHeight = 300;
         self.graphWidth = 750;
-        self.graphMargin = { top: 15, right: 30, bottom: 20, left: 25 };
+        self.graphPadding = { top: 15, right: 30, bottom: 20, left: 30 };
 
         self.average = ko.observable('-');
         self.max = ko.observable('-');
@@ -86,24 +87,43 @@ from django.utils.translation import ugettext as _
         self.graphContainerRendered = function (domTree) {
           var graphElement = domTree[1];
 
-          var chart = c3.generate({
+          c3.generate({
             bindto: graphElement,
+            size: {
+              height: self.graphHeight,
+              width: self.graphWidth
+            },
+            padding: self.graphPadding,
             data: {
-              x: 'x',
-              columns: self.chartData()
+              x: 'time',
+              rows: self.chartData(),
+              colors: {
+                'worker 1': '#29A7DE',
+                'worker 2': '#B0BEC5',
+                'worker 3': '#1C749B'
+              }
             },
             axis: {
               y: {
+                default: [0, 100],
                 min: 0,
                 max: 100,
-                padding: { top:0, bottom:0 }
+                padding: { top: 0, bottom: 0 }
               },
               x: {
                 type: 'timeseries',
                 tick: {
-                  format: '%H:%M:%S'
+                  format: '%H:%M:%S',
+                  count: 9
                 }
               }
+            },
+            point: {
+              r: 1.5
+            },
+            zoom: {
+              enabled: true,
+              type: 'drag'
             }
           });
 
@@ -113,19 +133,19 @@ from django.utils.translation import ugettext as _
       PerformanceGraph.prototype.fetchData = function () {
         var self = this;
 
-        var charData = generateFakeData();
-        var workerData = charData[1];
+        var chartData = generateFakeData(0, 100);
         var max = 0, min = 0, average = 0;
-        workerData.slice(1).forEach(function (val) {
-          max = Math.max(val, max);
-          min = Math.min(val, min)
-          average += val;
+        chartData.slice(1).forEach(function (val) {
+
+          max = Math.max(val[1], val[2], val[3], max);
+          max = Math.min(val[1], val[2], val[3], min);
+          average += (val[1] + val[2] + val[3]) / 3;
         });
-        average = average / (workerData.length - 1);
+        average = average / (chartData.length - 1);
         self.min(min + '%');
         self.max(max + '%');
         self.average(Math.round(average) + '%');
-        self.chartData(charData);
+        self.chartData(chartData);
       };
 
       ko.components.register('performance-graph', {