Add history graph for dashbaord

3 years ago · c19a9988ef
--- a/src/DotNetCore.CAP.Dashboard/RouteActionProvider.cs
+++ b/src/DotNetCore.CAP.Dashboard/RouteActionProvider.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using DotNetCore.CAP.Dashboard.NodeDiscovery;
 using DotNetCore.CAP.Internal;
@@ -31,8 +32,8 @@ namespace DotNetCore.CAP.Dashboard
            _request = request;
            _response = response;
            _routeData = routeData;
            _response.StatusCode = StatusCodes.Status200OK; 
        } 
            _response.StatusCode = StatusCodes.Status200OK;
        }
        [HttpGet("/stats")]
        public async Task Stats()
@@ -59,6 +60,37 @@ namespace DotNetCore.CAP.Dashboard
            }
        }
        [HttpGet("/metrics")]
        public async Task Metrics()
        {
            const string cacheKey = "dashboard.metrics";
            if (CapCache.Global.TryGet(cacheKey, out var ret))
            {
                await _response.WriteAsJsonAsync(ret);
                return;
            }
            var ps = MonitoringApi.HourlySucceededJobs(MessageType.Publish);
            var pf = MonitoringApi.HourlyFailedJobs(MessageType.Publish);
            var ss = MonitoringApi.HourlySucceededJobs(MessageType.Subscribe);
            var sf = MonitoringApi.HourlyFailedJobs(MessageType.Subscribe);
            var dayHour = ps.Keys.Select(x => x.ToString("MM-dd HH:00")).ToList(); 
            var result = new
            {
                DayHour = dayHour,
                PublishSuccessed = ps.Values,
                PublishFailed = pf.Values,
                SubscribeSuccessed = ss.Values,
                SubscribeFailed = sf.Values,
            };
            CapCache.Global.AddOrUpdate(cacheKey, result, TimeSpan.FromMinutes(10));
            await _response.WriteAsJsonAsync(result);
        }
        [HttpGet("/health")]
        public Task Health()
        {
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/css/app.ac328da6.css
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/css/app.ac328da6.css
@@ -1 +1 @@
 .nav-item[data-v-57ea412e]{padding:0 10px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;padding-bottom:50px}.page-line{text-align:left;line-height:38px;padding-bottom:9px;border-bottom:1px solid #eee}
 .nav-item[data-v-57ea412e]{padding:0 10px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;padding-bottom:50px}.page-line{text-align:left;line-height:38px;padding-bottom:9px;border-bottom:1px solid #eee}.chart[data-v-da293f9a]{height:500px;width:100%}
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/index.html
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/index.html
@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>myapp</title><link href="css/app.0ecd8eb0.css" rel="preload" as="style"><link href="css/chunk-vendors.e8860705.css" rel="preload" as="style"><link href="js/app.8e827409.js" rel="preload" as="script"><link href="js/chunk-vendors.d9043bb7.js" rel="preload" as="script"><link href="css/chunk-vendors.e8860705.css" rel="stylesheet"><link href="css/app.0ecd8eb0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but myapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>window.serverUrl = window.location.origin + "%(servicePrefix)";
       window.pollingInterval = "%(pollingInterval)";</script><script src="js/chunk-vendors.d9043bb7.js"></script><script src="js/app.8e827409.js"></script></body></html>
 <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>myapp</title><link href="css/app.ac328da6.css" rel="preload" as="style"><link href="css/chunk-vendors.e8860705.css" rel="preload" as="style"><link href="js/app.c7691be8.js" rel="preload" as="script"><link href="js/chunk-vendors.a45910c3.js" rel="preload" as="script"><link href="css/chunk-vendors.e8860705.css" rel="stylesheet"><link href="css/app.ac328da6.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but myapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>window.serverUrl = window.location.origin + "%(servicePrefix)";
        window.pollingInterval = "%(pollingInterval)";</script><script src="js/chunk-vendors.a45910c3.js"></script><script src="js/app.c7691be8.js"></script></body></html>
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.8e827409.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.8e827409.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.8e827409.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.8e827409.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.c7691be8.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.c7691be8.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.c7691be8.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/app.c7691be8.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.22b89da0.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.22b89da0.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.22b89da0.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.22b89da0.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.b88d9d32.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.b88d9d32.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.b88d9d32.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-04ff0112.b88d9d32.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-199a6fbe.2aef45ed.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-199a6fbe.2aef45ed.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-199a6fbe.2aef45ed.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-199a6fbe.2aef45ed.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-36dea578.57452f23.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-36dea578.57452f23.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-36dea578.57452f23.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-36dea578.57452f23.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-946ccf4c.fcafcff2.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-946ccf4c.fcafcff2.js
@@ -1,2 +1,2 @@
 (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-946ccf4c"],{"36bd":function(t,e,s){},"6f56":function(t,e,s){"use strict";s("36bd")},c2d8:function(t,e,s){"use strict";s.r(e);var n=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("b-row",[s("h1",{attrs:{"page-line":"","mb-4":""}},[t._v("Subscriber")]),s("b-table-simple",{attrs:{"caption-top":"",responsive:""}},[s("caption",[t._v("The subscription methods under the node are grouped by Group")]),s("b-thead",{attrs:{"head-variant":"secondary"}},[s("b-tr",[s("b-th",[t._v("Group")]),s("b-th",[t._v("Name")]),s("b-th",[t._v("Method")])],1)],1),s("b-tbody",[t._l(t.subscribers,(function(e){return t._l(e.values,(function(n,r){return s("b-tr",{key:e.group+r},[0==r?s("b-td",{staticClass:"align-middle",attrs:{rowspan:e.childCount}},[t._v(" "+t._s(e.group)+" ")]):t._e(),s("b-td",{staticClass:"text-left align-middle"},[t._v(" "+t._s(n.topic)+" ")]),s("b-td",[s("div",{staticClass:"snippet-code text-left align-middle"},[s("code",[s("pre",[s("span",{staticClass:"type"},[t._v(t._s(n.implName))]),t._v(":"),s("br"),s("span",{domProps:{innerHTML:t._s(n.methodEscaped)}},[t._v(t._s(n.methodEscaped))])])])])])],1)}))}))],2)],1)],1)},r=[],a=s("bc3a"),i=s.n(a),c={data:function(){return{subscribers:{}}},mounted:function(){var t=this;i.a.get("/subscriber").then((function(e){t.subscribers=e.data}))}},o=c,d=(s("6f56"),s("2877")),u=Object(d["a"])(o,n,r,!1,null,null,null);e["default"]=u.exports}}]);
 //# sourceMappingURL=chunk-946ccf4c.fecd7d20.js.map
 //# sourceMappingURL=chunk-946ccf4c.fcafcff2.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-946ccf4c.fcafcff2.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-946ccf4c.fcafcff2.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-b119b29c.9f8d2dba.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-b119b29c.9f8d2dba.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-b119b29c.9f8d2dba.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-b119b29c.9f8d2dba.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.a45910c3.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.a45910c3.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.a45910c3.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.a45910c3.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.d9043bb7.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.d9043bb7.js
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.d9043bb7.js.map
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/dist/js/chunk-vendors.d9043bb7.js.map
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/package-lock.json
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/package-lock.json
@@ -1940,6 +1940,23 @@
        }
      }
    },
    "@vue/composition-api": {
      "version": "1.0.0-rc.9",
      "resolved": "https://registry.nlark.com/@vue/composition-api/download/@vue/composition-api-1.0.0-rc.9.tgz",
      "integrity": "sha1-3fyqEwQK3YTtq5GFc9/JmbXwPPM=",
      "dev": true,
      "requires": {
        "tslib": "^2.2.0"
      },
      "dependencies": {
        "tslib": {
          "version": "2.2.0",
          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.2.0.tgz",
          "integrity": "sha1-+yxHWXfjXiQTEe3iaTzuHsZpj1w=",
          "dev": true
        }
      }
    },
    "@vue/preload-webpack-plugin": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@@ -4647,6 +4664,22 @@
        "safer-buffer": "^2.1.0"
      }
    },
    "echarts": {
      "version": "5.1.1",
      "resolved": "https://registry.nlark.com/echarts/download/echarts-5.1.1.tgz?cache=0&sync_timestamp=1619495447964&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-5.1.1.tgz",
      "integrity": "sha1-sYbxYvAXxVXP1nsS7eZ2K9w939o=",
      "requires": {
        "tslib": "2.0.3",
        "zrender": "5.1.0"
      },
      "dependencies": {
        "tslib": {
          "version": "2.0.3",
          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
        }
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -9383,6 +9416,11 @@
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
      "dev": true
    },
    "resize-detector": {
      "version": "0.3.0",
      "resolved": "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.3.0.tgz",
      "integrity": "sha1-/klREuGEaVUAqPUeA4nxV3TLHPw="
    },
    "resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -11104,6 +11142,20 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
    },
    "vue-demi": {
      "version": "0.7.5",
      "resolved": "https://registry.nlark.com/vue-demi/download/vue-demi-0.7.5.tgz?cache=0&sync_timestamp=1620292790151&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-demi%2Fdownload%2Fvue-demi-0.7.5.tgz",
      "integrity": "sha1-iN7nSS/Jmg+RH/A/wCxlj6Knmvg="
    },
    "vue-echarts": {
      "version": "6.0.0-rc.5",
      "resolved": "https://registry.nlark.com/vue-echarts/download/vue-echarts-6.0.0-rc.5.tgz?cache=0&sync_timestamp=1619779846761&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-echarts%2Fdownload%2Fvue-echarts-6.0.0-rc.5.tgz",
      "integrity": "sha1-TgYomSfQPSicNo+gm3QNgube1Sg=",
      "requires": {
        "resize-detector": "^0.3.0",
        "vue-demi": "^0.7.4"
      }
    },
    "vue-eslint-parser": {
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
@@ -12171,6 +12223,21 @@
          "dev": true
        }
      }
    },
    "zrender": {
      "version": "5.1.0",
      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-5.1.0.tgz",
      "integrity": "sha1-tqhMOqfMxmQu4FGZAcpMCDXE2F4=",
      "requires": {
        "tslib": "2.0.3"
      },
      "dependencies": {
        "tslib": {
          "version": "2.0.3",
          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
        }
      }
    }
  }
 }
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/package.json
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/package.json
@@ -12,7 +12,9 @@
    "bootstrap": "^4.5.3",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "echarts": "^5.1.1",
    "vue": "^2.6.11",
    "vue-echarts": "^6.0.0-rc.5",
    "vue-json-pretty": "^1.8.0",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
@@ -21,6 +23,7 @@
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/composition-api": "^1.0.0-rc.9",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/public/index.html
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/public/index.html
@@ -15,14 +15,15 @@
    <noscript>
        <strong>
            We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
            Please enable it to continue.
                Please enable it to continue.
        </strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
       window.serverUrl = window.location.origin + "%(servicePrefix)";
       window.pollingInterval = "%(pollingInterval)";
        window.serverUrl = window.location.origin + "%(servicePrefix)";
        window.pollingInterval = "%(pollingInterval)";
    </script>
 </body>
 </html>
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/src/main.js
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/src/main.js
@@ -10,7 +10,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
 import store from '@/store/store.js'
 import axios from "axios";
 axios.defaults.baseURL =  window.serverUrl; // "http://localhost:5001/cap"
 axios.defaults.baseURL = window.serverUrl;
 axios.defaults.withCredentials = true
 axios.defaults.headers.post['Content-Type'] = 'application/json';
 axios.interceptors.request.use(
--- a/src/DotNetCore.CAP.Dashboard/wwwroot/src/pages/Home.vue
+++ b/src/DotNetCore.CAP.Dashboard/wwwroot/src/pages/Home.vue
@@ -1,15 +1,213 @@
 <template>
  <div id="home">
    <b-row>
      <b-col cols="12" md="10">
        <b-container>
          <h1>Dashboard</h1>
        </b-container>
      </b-col>
    </b-row>
  </div>
  <b-row>
    <b-col md="12">
      <h1 class="page-line mb-4">Dashboard</h1>
      <h3 class="mb-4">24h History Graph</h3>
      <v-chart class="chart" :option="option" />
    </b-col>
  </b-row>
 </template>
 <script>
 export default {};
 </script>
 import axios from 'axios';
 import { use, graphic } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { LineChart } from "echarts/charts";
 import {
  GridComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  TooltipComponent,
  LegendComponent,
 } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
 use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  TooltipComponent,
  LegendComponent
 ]);
 export default {
  name: "Dashboard",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "light"
  },
  data() {
    return {
      renderData: {},
    }
  },
  computed: {
    option: function () {
      const { dayHour,
        publishSuccessed,
        publishFailed,
        subscribeSuccessed,
        subscribeFailed } = this.renderData;
      return {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Publish Succeeded', 'Publish Failed', 'Received Succeeded', 'Received Failed']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              interval: 0,
              rotate: 40
            },
            boundaryGap: false,
            data: dayHour
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Publish Succeeded',
            type: 'line',
            stack: 'Number',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128, 255, 165)'
              }, {
                offset: 1,
                color: 'rgba(1, 191, 236)'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: publishSuccessed
          },
          {
            name: 'Publish Failed',
            type: 'line',
            stack: 'Number',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 221, 255)'
              }, {
                offset: 1,
                color: 'rgba(77, 119, 255)'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: publishFailed
          },
          {
            name: 'Received Succeeded',
            type: 'line',
            stack: 'Number',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(55, 162, 255)'
              }, {
                offset: 1,
                color: 'rgba(116, 21, 219)'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: subscribeSuccessed
          },
          {
            name: 'Received Failed',
            type: 'line',
            stack: 'Number',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 0, 135)'
              }, {
                offset: 1,
                color: 'rgba(135, 0, 157)'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: subscribeFailed
          }
        ]
      }
    }
  },
  mounted() {
    axios.get('/metrics').then(res => {
      this.renderData = res.data;
      console.log(this.renderData);
    });
  }
 };
 </script>
 <style scoped>
 .chart {
  height: 500px;
  width: 100%;
 }
 </style>