[CE-56] Change stat page use echarts

Change-Id: I1af873520f24c24622cbd9cb1520d3d0521437ae Signed-off-by: Haitao Yue <[email protected]>
hyperledger-cello · Aug 10, 2017 · 6991d68 · 6991d68
1 parent 4625258
commit 6991d68
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 372 deletions.
diff --git a/src/themes/basic/static/js/echarts.common.min.js b/src/themes/basic/static/js/echarts.common.min.js
diff --git a/src/themes/basic/static/js/script.js b/src/themes/basic/static/js/script.js
@@ -567,350 +567,4 @@ $('.chain_action_restart').on('click', function (e) {
       }
     });
   });
-
-
-  Highcharts.setOptions({
-    global: {
-      useUTC: false
-    }
-  });
-
-  // Create the chart
-  $('#container_test').highcharts({
-    chart: {
-      type: 'bar'
-    },
-    title: {
-      text: 'Fruit Consumption'
-    },
-    xAxis: {
-      categories: ['Apples', 'Bananas', 'Oranges']
-    },
-    yAxis: {
-      title: {
-        text: 'Fruit eaten'
-      }
-    },
-    series: [{
-      name: 'Jane',
-      data: [1, 0, 4]
-    }, {
-      name: 'John',
-      data: [5, 7, 3]
-    }]
-  });
-
-  var gaugeOptions = {
-
-    chart: {
-      type: 'solidgauge'
-    },
-
-    title: null,
-
-    pane: {
-      center: ['50%', '85%'],
-      size: '140%',
-      startAngle: -90,
-      endAngle: 90,
-      background: {
-        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
-        innerRadius: '60%',
-        outerRadius: '100%',
-        shape: 'arc'
-      }
-    },
-
-    tooltip: {
-      enabled: false
-    },
-
-    // the value axis
-    yAxis: {
-      stops: [
-        [0.1, '#55BF3B'], // green
-        [0.5, '#DDDF0D'], // yellow
-        [0.9, '#DF5353'] // red
-      ],
-      lineWidth: 0,
-      minorTickInterval: null,
-      tickPixelInterval: 400,
-      tickWidth: 0,
-      title: {
-        y: -70
-      },
-      labels: {
-        y: 16
-      }
-    },
-
-    plotOptions: {
-      solidgauge: {
-        dataLabels: {
-          y: 5,
-          borderWidth: 0,
-          useHTML: true
-        }
-      }
-    }
-  };
-
-  // The speed gauge
-  $('#container_host_utilization').highcharts(Highcharts.merge(gaugeOptions, {
-    yAxis: {
-      min: 0,
-      max: 200,
-      title: {
-        text: 'Utilization'
-      }
-    },
-
-    credits: {
-      enabled: false
-    },
-
-    series: [{
-      name: 'Utilization',
-      data: [80],
-      dataLabels: {
-        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
-        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
-        '<span style="font-size:12px;color:silver">km/h</span></div>'
-      },
-      tooltip: {
-        valueSuffix: ''
-      }
-    }]
-
-  }));
-
-  // The RPM gauge
-  $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
-    yAxis: {
-      min: 0,
-      max: 5,
-      title: {
-        text: 'RPM'
-      }
-    },
-
-    series: [{
-      name: 'RPM',
-      data: [1],
-      dataLabels: {
-        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
-        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
-        '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
-      },
-      tooltip: {
-        valueSuffix: ' revolutions/min'
-      }
-    }]
-
-  }));
-
-
-  function request_hosts() {
-    $.ajax({
-      url: '/api/stat?res=host',
-      type: 'GET',
-      dataType: 'json',
-      success: function (response) {
-        // add the point
-        chart_hosts_type.series[0].setData(response.type);
-        chart_hosts_status.series[0].setData(response.status);
-
-        // call it again after one second
-        setTimeout(request_hosts, 30000);
-      },
-      cache: false
-    });
-  }
-
-  var chart_hosts_type = new Highcharts.Chart({
-    chart: {
-      renderTo: 'stat_hosts_type',
-      defaultSeriesType: 'spline',
-      plotBackgroundColor: null,
-      plotBorderWidth: null,
-      plotShadow: false,
-      type: 'pie',
-      events: {
-        load: request_hosts
-      }
-    },
-    title: {
-      text: 'Host Type'
-    },
-    tooltip: {
-      pointFormat: '<b>{point.y}</b>'
-    },
-    plotOptions: {
-      pie: {
-        allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: {
-          enabled: false
-        },
-        showInLegend: true
-      }
-    },
-    legend: {
-      labelFormatter: function () {
-        return this.name + ': ' + this.y;
-      },
-    },
-    series: [{
-      name: 'Number',
-      colorByPoint: true,
-      data: [{
-        name: '',
-        y: 100
-      }]
-    }]
-  });
-  var chart_hosts_status = new Highcharts.Chart({
-    chart: {
-      renderTo: 'stat_hosts_status',
-      defaultSeriesType: 'spline',
-      plotBackgroundColor: null,
-      plotBorderWidth: null,
-      plotShadow: false,
-      type: 'pie',
-      events: {
-        load: request_hosts
-      }
-    },
-    title: {
-      text: 'Host Status'
-    },
-    tooltip: {
-      pointFormat: '<b>{point.y}</b>'
-    },
-    plotOptions: {
-      pie: {
-        allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: {
-          enabled: false
-        },
-        showInLegend: true
-      }
-    },
-    legend: {
-      labelFormatter: function () {
-        return this.name + ': ' + this.y;
-      },
-    },
-    series: [{
-      name: 'Number',
-      colorByPoint: true,
-      data: [{
-        name: '',
-        y: 100
-      }]
-    }]
-  });
-
-  function request_clusters() {
-    $.ajax({
-      url: '/api/stat?res=cluster',
-      type: 'GET',
-      dataType: 'json',
-      success: function (response) {
-        // add the point
-        chart_clusters_type.series[0].setData(response.type);
-        chart_clusters_status.series[0].setData(response.status);
-
-        // call it again after 30 second
-        setTimeout(request_clusters, 30000);
-      },
-      cache: false
-    });
-  }
-
-  var chart_clusters_type = new Highcharts.Chart({
-    chart: {
-      renderTo: 'stat_clusters_type',
-      defaultSeriesType: 'spline',
-      plotBackgroundColor: null,
-      plotBorderWidth: null,
-      plotShadow: false,
-      type: 'pie',
-      events: {
-        load: request_clusters
-      }
-    },
-    title: {
-      text: 'Chain Type'
-    },
-    tooltip: {
-      pointFormat: '<b>{point.y}</b>'
-    },
-    plotOptions: {
-      pie: {
-        allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: {
-          enabled: false
-        },
-        showInLegend: true
-      }
-    },
-    legend: {
-      labelFormatter: function () {
-        return this.name + ': ' + this.y;
-      },
-    },
-    series: [{
-      name: 'Number',
-      colorByPoint: true,
-      data: [{
-        name: '',
-        y: 100
-      }]
-    }]
-  });
-  var chart_clusters_status = new Highcharts.Chart({
-    chart: {
-      renderTo: 'stat_clusters_status',
-      defaultSeriesType: 'spline',
-      plotBackgroundColor: null,
-      plotBorderWidth: null,
-      plotShadow: false,
-      type: 'pie',
-      events: {
-        load: request_clusters
-      }
-    },
-    title: {
-      text: 'Chain Status'
-    },
-    tooltip: {
-      pointFormat: '<b>{point.y}</b>'
-    },
-    plotOptions: {
-      pie: {
-        allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: {
-          enabled: false
-        },
-        showInLegend: true
-      }
-    },
-    legend: {
-      labelFormatter: function () {
-        return this.name + ': ' + this.y;
-      },
-    },
-    series: [{
-      name: 'Number',
-      colorByPoint: true,
-      data: [{
-        name: '',
-        y: 100
-      }]
-    }]
-  });
 });
diff --git a/src/themes/basic/static/js/vue-echarts.js b/src/themes/basic/static/js/vue-echarts.js
diff --git a/src/themes/basic/templates/layout.html b/src/themes/basic/templates/layout.html
@@ -421,9 +421,6 @@ <h4 class="modal-title">Create a cluster</h4>
 <script src="{{ url_for('static', filename='js/tether.min.js') }}"> </script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="{{ url_for('static', filename='js/ie10-viewport-bug-workaround.js') }}"> </script>
-<script src="{{ url_for('static', filename='js/highcharts.js') }}"> </script>
-<script src="{{ url_for('static', filename='js/highcharts-more.js') }}"> </script>
-<script src="{{ url_for('static', filename='js/solid-gauge.js') }}"> </script>
 <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"> </script>
 <script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js') }}"> </script>
 {% block custom_js %}