Highchart v1

package-lock.json

@@ -5584,6 +5584,16 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highcharts": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.0.1.tgz",
+      "integrity": "sha512-0UmcCz2RmFuqfT/Igu3h5sGnkeSqqZwfuYrTzJ/htptmJAo5SSxH62NFcTjVRk+3WstoBJmoXR0v5FVGQUzK5A=="
+    },
+    "highcharts-vue": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/highcharts-vue/-/highcharts-vue-1.3.5.tgz",
+      "integrity": "sha512-By1kc3m8XoI20pMshs/ue69j4rH6eQioDPoIrtC20RTti4QyvNAx8DisGSO3GAWe9sn50hPk8NsyxcwZIGaz3Q=="
+    },
     "highlight.js": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.4.0.tgz",

package.json

@@ -18,6 +18,8 @@
     "bootstrap-vue": "^2.19.0",
     "express": "^4.17.1",
     "file-saver": "^2.0.5",
+    "highcharts": "^9.0.1",
+    "highcharts-vue": "^1.3.5",
     "import": "^0.0.6",
     "jszip": "^3.5.0",
     "luxon": "^1.25.0",

src/components/doclive/AdhocView.vue

@@ -85,7 +85,7 @@
         </b-row>
 
         <div class="codemirror">
-          <div v-if="history" class="table">
+          <div v-if="history" class="table2">
             <vuetable
               ref="vuetable"
               :api-url="api_url"
@@ -107,7 +107,7 @@
             >
             </vuetable>
           </div>
-          <div class="vuetable-pagination ui basic segment grid">
+          <div v-if="history" class="vuetable-pagination ui basic segment grid">
             <vuetable-pagination-info
               ref="paginationInfo"
               :css="css.paginationInfo"
@@ -120,6 +120,17 @@
             >
             </vuetable-pagination>
           </div>
+
+          <div class="highch" v-if="history">
+            <transition name="bounce" appear>
+              <highcharts
+                class="hc"
+                :options="chartOptions"
+                :callback="callback"
+                ref="chart"
+              ></highcharts>
+            </transition>
+          </div>
         </div>
       </b-col>
     </b-row>
@@ -132,6 +143,7 @@ import store from "@/store/index";
 import { Vuetable, VuetablePaginationDropdown } from "vuetable-2";
 import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo";
 import VuetablePagination from "vuetable-2/src/components/VuetablePagination";
+
 import CssConfig from "vuetable-2/src/components/VuetableCssConfig.js";
 
 import { codemirror } from "vue-codemirror";
@@ -171,6 +183,11 @@ import "codemirror/addon/fold/markdown-fold.js";
 import "codemirror/addon/fold/xml-fold.js";
 import "codemirror/lib/codemirror";
 import "codemirror/addon/display/placeholder";
+import { Chart } from "highcharts-vue";
+import Highcharts from "highcharts";
+import exportingInit from "highcharts/modules/exporting";
+
+exportingInit(Highcharts);
 
 export default {
   components: {
@@ -179,9 +196,32 @@ export default {
     VuetablePagination,
     VuetablePaginationInfo,
     VuetablePaginationDropdown,
+    highcharts: Chart,
   },
   data() {
     return {
+      chartOptions: {
+        title: {
+          text: "Length of logs chart",
+        },
+        // line: {
+        //   dataLabels: {
+        //     enabled: true,
+        //   },
+        // },
+        chart: {
+          type: "column",
+        },
+        xAxis: {
+          categories: ["JobjLogs", "jobj_console"],
+        },
+        yAxis: {
+          title: {
+            text: "Count",
+          },
+        },
+        series: [],
+      },
       api_url: "http://localhost:3000/test2",
       fields: [
         {
@@ -379,6 +419,21 @@ export default {
     };
   },
   methods: {
+    callback(params) {
+      //this.console = store.getters["statsmodule/getCountConsole"];
+      // var JobjLogs = store.getters["statsmodule/getCountLogs"];
+      // var jobj_console = store.getters["statsmodule/getCountConsole"];
+      this.chartOptions.series.push(
+        {
+          name: "swarm-app-Stats",
+          data: ["1", "2"],
+        },
+        {
+          name: "swarm-app-Stats2",
+          data: ["1", "2"],
+        }
+      );
+    },
     socketconnect() {
       // send to runLLO
       this.$root.$emit("SERVER_socket_connect");
@@ -396,6 +451,7 @@ export default {
       this.$refs.pagination.setPaginationData(paginationData);
       this.$refs.paginationInfo.setPaginationData(paginationData);
     },
+    //asd
     loadsuccess(response) {
       var data = response.data.data;
       this.fielddata = data;
@@ -644,10 +700,13 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
-.table {
+.highch {
+  padding-top: 50px;
+}
+.table2 {
+  min-height: 320px;
   overflow: auto;
-  min-height: 500px;
 }
 .CodeMirror {
   font-family: monospace;

src/components/doclive/runLlo.vue

@@ -182,7 +182,7 @@
         </b-row>
       </div>
       <!-- col -->
-      <div v-if="onEvent" class="table">
+      <div v-if="onEvent" class="table2">
         <vuetable
           ref="vuetable"
           :api-mode="false"
@@ -512,7 +512,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=cb35ebd3def20d0217cff437acc42e51b80b103a"
+      "https://api-client.swarmlab.io:8088/?token=93f60f0fa6c7288420b4eea844b61252c49dc1c3"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -776,8 +776,12 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .table {
+  overflow: scroll;
+  min-height: 0px;
+}
+.table2 {
   overflow: scroll;
   min-width: 700px;
   max-width: 1200px;