From 363ac2e1947b9b95e494facdc67294cf47704cc0 Mon Sep 17 00:00:00 2001 From: lefteris Date: Sat, 10 Apr 2021 19:55:55 +0300 Subject: [PATCH] Highchart v1 --- package-lock.json | 10 ++++ package.json | 2 + src/components/doclive/AdhocView.vue | 69 ++++++++++++++++++++++++++-- src/components/doclive/runLlo.vue | 10 ++-- 4 files changed, 83 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3af8f5c..09fda23 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e1cbd27..c667c89 100644 --- a/package.json +++ b/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", diff --git a/src/components/doclive/AdhocView.vue b/src/components/doclive/AdhocView.vue index 6281e04..b6d976b 100644 --- a/src/components/doclive/AdhocView.vue +++ b/src/components/doclive/AdhocView.vue @@ -85,7 +85,7 @@
-
+
-
+
+ +
+ + + +
@@ -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 { }; -