From ef8ce2a0c4ac906dda3aa0420c7b0667f1ea1a79 Mon Sep 17 00:00:00 2001 From: peterlu14 Date: Tue, 31 Jan 2023 10:37:06 +0800 Subject: [PATCH] [update] add chart series --- .eslintrc.js | 1 + .../data-analysis/FileContainer.vue | 8 +- .../{FileModal.vue => FileView.vue} | 71 ++++++------ .../data-analysis/LineChartContainer.vue | 46 ++++++-- src/components/data-analysis/TableFormat.vue | 44 +++----- .../admin/data-analysis/DataAnalysis.vue | 102 ++++++++++-------- src/stores/data-analysis/chart.ts | 12 +++ src/utils/chart/Series/series.ts | 5 +- src/utils/chart/Series/seriesManager.ts | 8 +- src/utils/chart/chart.ts | 12 +-- src/utils/chart/chartManager.ts | 25 +++++ 11 files changed, 208 insertions(+), 126 deletions(-) rename src/components/data-analysis/{FileModal.vue => FileView.vue} (66%) create mode 100644 src/utils/chart/chartManager.ts diff --git a/.eslintrc.js b/.eslintrc.js index f598d78..4907749 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,6 +22,7 @@ module.exports = { ], rules: { + '@typescript-eslint/no-empty-interface': 0, 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'prettier/prettier': ['warn', {}, { usePrettierrc: true }], diff --git a/src/components/data-analysis/FileContainer.vue b/src/components/data-analysis/FileContainer.vue index fb19651..34022d6 100644 --- a/src/components/data-analysis/FileContainer.vue +++ b/src/components/data-analysis/FileContainer.vue @@ -1,5 +1,5 @@ - + @@ -28,14 +28,14 @@ import { ref, reactive } from 'vue' import { useChannelStore } from '@/stores/data-analysis/channel' import { useFileViewStore } from '@/stores/data-analysis/file-view' - import FileModal from '@/components/data-analysis/FileModal.vue' + import FileView from '@/components/data-analysis/FileView.vue' const channelStore = useChannelStore() const fileViewStore = useFileViewStore() const selectedFiles = reactive(fileViewStore.filesSelected) /* File Modal Handling */ - let file_modal_ref = ref | null>(null) + let file_modal_ref = ref | null>(null) const showModal = function () { file_modal_ref.value?.showModal() } diff --git a/src/components/data-analysis/FileModal.vue b/src/components/data-analysis/FileView.vue similarity index 66% rename from src/components/data-analysis/FileModal.vue rename to src/components/data-analysis/FileView.vue index 98ef7b1..5bfce6e 100644 --- a/src/components/data-analysis/FileModal.vue +++ b/src/components/data-analysis/FileView.vue @@ -2,8 +2,6 @@
- Table Tree @@ -21,24 +19,34 @@
- +
diff --git a/src/pages/admin/data-analysis/DataAnalysis.vue b/src/pages/admin/data-analysis/DataAnalysis.vue index 8f0b9c7..eb797de 100644 --- a/src/pages/admin/data-analysis/DataAnalysis.vue +++ b/src/pages/admin/data-analysis/DataAnalysis.vue @@ -2,13 +2,15 @@
- +
- +
- +
@@ -17,7 +19,11 @@ import FileContainer from '@/components/data-analysis/FileContainer.vue' import ControlPanel from '@/components/data-analysis/ControlPanel.vue' import LineChartContainer from '@/components/data-analysis/LineChartContainer.vue' - import { onMounted, ref } from 'vue' + import { useChartStore } from '@/stores/data-analysis/chart' + import { ref, reactive, onMounted } from 'vue' + + // reference + const linechart_ref = ref() // mqtt init const { startMqtt, publish } = useMqtt() @@ -25,9 +31,48 @@ // define subscribe and callback startMqtt(`${controllerID}/data_analysis/#`, (topic: string, message: ArrayBuffer) => { - // [data, data, ceiling, ground] + // [metaID, xData, yData, horizontalLine, twoPointLine] const msg = JSON.parse(message.toString()) + console.log('msg', msg) + // reformat data + for (const info of msg) { + const metaID = info[0] + const xData = info[1] + const yData = info[2] + const horizontal = info[3] + const line = info[4] + const groupData = [] + for (let i = 0; i < xData.length; i++) { + groupData.push([xData[i], yData[i]]) + } + + for (const chart of chartManager.children) { + const seriesIndex = chart.seriesManager.findSeries({ id: metaID }) + // append Data + if (seriesIndex !== -1) { + linechart_ref.value[0]?.appendData(seriesIndex, groupData) + } + // draw line + let yAxis_list = horizontal.map((x: any) => ({ yAxis: x })) + let coord_list = [{ coord: [line[0][0], line[0][1]] }, { coord: [line[1][0], line[1][1]] }] + yAxis_list.push(coord_list) + linechart_ref.value[0].setOption({ + series: [ + { + markLine: { + data: yAxis_list, + }, + }, + ], + }) + } + } + + // stop loading + linechart_ref.value[0]?.stopLoading() + + // download file const name = 'test' const url = `http://192.168.2.1:3000/api/analysis/get/csv?name=${name}` const a = document.createElement('a') @@ -36,52 +81,21 @@ document.body.appendChild(a) a.click() document.body.removeChild(a) - - // try draw line - // msg.push(1500000, -1500000) - - // reformat data - const _msg = [] - for (let i = 0; i < msg[0].length; i++) { - _msg.push([msg[0][i], msg[1][i]]) - } - - // append Data - linechart_ref.value?.appendData(0, _msg) - - // stop loading - linechart_ref.value?.stopLoading() - - // draw line - // draw line - if (msg.length < 3) return true - let yAxis_list = msg[2].map((x: any) => ({ yAxis: x })) - let coord_list = [{ coord: [msg[3][0][0], msg[3][0][1]] }, { coord: [msg[3][1][0], msg[3][1][1]] }] - // yAxis_list.append([{ coord:[ msg[3][0][0],msg[3][0][1]]},{ coord:[ msg[3][1][0], msg[3][1][1]]}]) - yAxis_list.push(coord_list) - console.log('yAxis_list', yAxis_list) - linechart_ref.value.setOption({ - series: [ - { - markLine: { - data: yAxis_list, - }, - }, - ], - }) }) - // reference - const linechart_ref = ref() - // ControlPanel handling const filterData = function (e: any) { - linechart_ref.value?.startLoading() - console.log(linechart_ref) - console.log(e) + linechart_ref.value[0]?.startLoading() publish(`${controllerID}_data_analysis/get_analysis_data`, JSON.stringify({ e })) } + const chartStore = useChartStore() + const chartManager = reactive(chartStore.chart) + onMounted(() => { + if (chartManager.children.length === 0) { + chartManager.addChart() + } + }) defineExpose({ linechart_ref, filterData }) diff --git a/src/stores/data-analysis/chart.ts b/src/stores/data-analysis/chart.ts index e69de29..243ca50 100644 --- a/src/stores/data-analysis/chart.ts +++ b/src/stores/data-analysis/chart.ts @@ -0,0 +1,12 @@ +import ChartManager from '@/utils/chart/chartManager' +import { defineStore } from 'pinia' + +export const useChartStore = defineStore('data-analysis-chart', { + state: () => ({ + chart: new ChartManager(), + }), + // could also be defined as + // state: () => ({ count: 0 }) + getters: {}, + actions: {}, +}) diff --git a/src/utils/chart/Series/series.ts b/src/utils/chart/Series/series.ts index 0afe58c..1e40c5b 100644 --- a/src/utils/chart/Series/series.ts +++ b/src/utils/chart/Series/series.ts @@ -10,7 +10,10 @@ class Series { this.data = [] this.silent = false this.animation = false - this.markLine = {} + this.markLine = { + symbol: ['none', 'none'], + data: [], + } } setOption(options: seriesOption) { diff --git a/src/utils/chart/Series/seriesManager.ts b/src/utils/chart/Series/seriesManager.ts index 03f041c..8b115a0 100644 --- a/src/utils/chart/Series/seriesManager.ts +++ b/src/utils/chart/Series/seriesManager.ts @@ -8,8 +8,10 @@ class SeriesManager { } addSeries(option: seriesOption) { - const newSeries = new Series(option) - this.children.push(newSeries) + if (this.findSeries(option) === -1) { + const newSeries = new Series(option) + this.children.push(newSeries) + } } getSeries(target: seriesTarget): Series | Series[] { @@ -39,7 +41,7 @@ class SeriesManager { delSeries(target: seriesTarget) { const deleteIdx = this.findSeries(target) - if (deleteIdx) { + if (deleteIdx !== undefined) { this.children.splice(deleteIdx, 1) return true } diff --git a/src/utils/chart/chart.ts b/src/utils/chart/chart.ts index f8a0159..50d327d 100644 --- a/src/utils/chart/chart.ts +++ b/src/utils/chart/chart.ts @@ -13,21 +13,21 @@ class Chart { legend: any // tooltip: any // grid: any - // dataZoom: any + dataZoom: any seriesManager: SeriesManager series: any // gridManager: GridManager constructor() { - this.title = { text: 'Gradient along the y axis' } + // this.title = { text: 'Gradient along the y axis' } this.seriesManager = new SeriesManager() // this.gridManager = new GridManager() - this.legend = {} + this.legend = { type: 'scroll' } // this.tooltip = new Tooltip() - this.xAxis = {} - this.yAxis = {} + this.xAxis = { scale: true } + this.yAxis = { scale: true } // this.grid = this.gridManager.getGrid() this.series = this.seriesManager.getSeries({}) - // this.dataZoom = [{}] + this.dataZoom = [{ type: 'inside' }, { type: 'slider' }] } } diff --git a/src/utils/chart/chartManager.ts b/src/utils/chart/chartManager.ts new file mode 100644 index 0000000..c1384ef --- /dev/null +++ b/src/utils/chart/chartManager.ts @@ -0,0 +1,25 @@ +import Chart from './chart' + +class ChartManager { + children: Chart[] + constructor() { + this.children = [] + } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + addChart(idx?: number) { + const newChart = new Chart() + this.children.push(newChart) + } + switchChart() { + return + } + clearChart() { + return + } + delChart() { + return + } +} + +export default ChartManager