wisetop/frontend-elite-data-analysis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] add xAxisManager & giveup setOption & appendData api

Browse Source
This commit is contained in:
peterlu14
2023-02-02 11:20:07 +08:00
parent a357102e82
commit 68356fbd04
9 changed files with 287 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/data-analysis/chart-container/ChartContainer.vue
+44 -21
View File
@@ -5,13 +5,19 @@
<EChart ref="chart_ref" :option="chart" :autoresize="true" :loading="loading" />
</va-card-content>
</va-card>
<XAxisSlider></XAxisSlider>
</div>
</template>
<script setup lang="ts">
import { ECharts, EChartsCoreOption } from 'echarts'
import { ref, reactive, watch } from 'vue'
import { ref, reactive, onMounted, watch } from 'vue'
import { useFileViewStore } from '@/stores/data-analysis/file-view'
import { useChartStore } from '@/stores/data-analysis/chart'
import { MetaFile } from '@/utils/file'
import XAxisSlider from './XAxisSlider.vue'
const chartStore = useChartStore()
const chartIndex = 0
const props = defineProps({
chart: {
@@ -29,28 +35,31 @@
}
const appendData = function (seriesIndex: number, data: Array<number | string>) {
chart_ref.value?.appendData({
seriesIndex: seriesIndex,
data: data,
})
chart_ref.value?.resize()
if (data.length <= 5e4) {
chartStore.chartManager.children[chartIndex].series[seriesIndex].data.push(...data)
} else {
for (const _data of data) {
chartStore.chartManager.children[chartIndex].series[seriesIndex].data.push(_data)
}
}
// chart_ref.value?.appendData({
// seriesIndex: seriesIndex,
// data: data,
// })
// chart_ref.value?.resize()
}
const markLine = function (
seriesIndex: number,
markLineIndex: number,
header: string,
value: number | Array<number> | string,
) {
chart_ref.value?.setOption({
series: [
{
markLine: {
data: [{ name: header, yAxis: value }],
},
},
],
})
const markLine = function (value: number | Array<number> | string, seriesIndex = 0) {
chartStore.chartManager.children[chartIndex].series[seriesIndex].markLine.data = value
// chart_ref.value?.setOption({
// series: [
// {
// markLine: {
// data: [{ name: header, yAxis: value }],
// },
// },
// ],
// })
}
// Loading
@@ -67,6 +76,20 @@
const fileSelected = reactive(fileViewStore.filesSelected)
const selectionSave: never | MetaFile[] = reactive([])
onMounted(() => {
const a = {
show: true,
title: 'custom icon1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function () {
chartStore.xAxisSlider = !chartStore.xAxisSlider
},
}
for (const chart of chartStore.chartManager.children) {
chart.toolbox.feature['myTool1'] = a
}
})
watch(
fileSelected,
(data) => {
src/components/data-analysis/chart-container/XAxisSlider.vue
+120 -4
View File
@@ -1,8 +1,124 @@
<template>
<slideout v-model="show" title="The title" :size="'30%'" dock="left" resizable> </slideout>
<slideout v-model="show" :show-mask="false" :arrow-button="false" :title="title" :size="'30%'" dock="left" resizable>
<div>
<div class="mt-2 mx-1 grid grid-cols-6 items-center">
<div class="col-span-1">
<p>Boundry</p>
</div>
<va-input v-model="leftBoundryInput" class="col-span-1" @blur="setBoundry" />
<div class="col-span-1 justify-self-center">
<p>-</p>
</div>
<va-input v-model="rightBoundryInput" class="col-span-1" @blur="setBoundry" />
<div class="mx-2 col-span-2 justify-self-end">
<va-button @click="resetBoundry">Reset</va-button>
</div>
</div>
<va-divider />
<div class="mt-2 mx-1 grid grid-cols-6 items-center">
<div class="col-span-1">
<p>Max</p>
</div>
<va-input v-model="maxInput" class="col-span-1" @keyup.enter="setMax(maxInput)" @blur="setMax(maxInput)" />
<div class="col-span-1 justify-self-center">
<p>Min</p>
</div>
<va-input v-model="minInput" class="col-span-1" @keyup.enter="setMin(minInput)" @blur="setMin(minInput)" />
<div class="mx-2 col-span-2 justify-self-end">
<va-button small @click="resetMinMax">Reset</va-button>
</div>
</div>
<va-divider />
<div class="mt-2 mx-1 grid grid-cols-6 items-center">
<div>
<p>Interval</p>
</div>
<va-input
v-model="intervalInput"
class="col-span-2"
@keyup.enter="setInterval(Number(intervalInput))"
@blur="setInterval(Number(intervalInput))"
/>
<div class="mx-2 col-span-3 justify-self-end">
<va-button small @click="resetInterval">Reset</va-button>
</div>
</div>
<va-divider />
<div class="mt-2 mx-1 grid grid-cols-6 items-center">
<div>
<p>SplitLine</p>
</div>
<va-counter v-model="splitNumber" class="col-span-2" @update:model-value="setSplitNumber" />
</div>
</div>
<va-divider />
</slideout>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
import { ref, computed } from 'vue'
import { useChartStore } from '@/stores/data-analysis/chart'
const leftBoundryInput = ref('')
const rightBoundryInput = ref('')
const maxInput = ref('')
const minInput = ref('')
const intervalInput = ref('')
const splitNumber = ref(5)
const chartStore = useChartStore()
const chartIndex = 0
const xAxisManager = chartStore.chartManager.children[chartIndex].xAxisManager
const title = 'X-Axis'
const show = computed({
// getter
get() {
return chartStore.xAxisSlider
},
// setter
set(newValue) {
chartStore.xAxisSlider = newValue
},
})
const setBoundry = function () {
if (leftBoundryInput.value === '' || rightBoundryInput.value === '') return
xAxisManager.setBoundry([leftBoundryInput.value, rightBoundryInput.value])
}
const resetBoundry = function () {
leftBoundryInput.value = ''
rightBoundryInput.value = ''
xAxisManager.resetBoundry()
}
const setMax = function (max: string) {
if (max === '') return
xAxisManager.setMax(max)
}
const setMin = function (min: string) {
if (min === '') return
xAxisManager.setMin(min)
}
const resetMinMax = function () {
maxInput.value = ''
minInput.value = ''
xAxisManager.resetMinMax()
}
const setInterval = function (interval: number) {
if (interval <= 0) return
xAxisManager.setInterval(interval)
}
const resetInterval = function () {
intervalInput.value = ''
xAxisManager.resetInterval()
}
const setSplitNumber = function (splitNumber: number) {
xAxisManager.setSplitNumber(splitNumber)
}
</script>
<scss></scss>
<style></style>
src/pages/admin/data-analysis/DataAnalysis.vue
+31 -28
View File
@@ -9,7 +9,7 @@
</div>
</div>
<template v-for="chart in chartManager.children" :key="chart.id">
<ChartContainer ref="linechart_ref" :chart="chart" class="h-[100%] col-span-2"></ChartContainer>
<ChartContainer ref="chart_ref" :chart="chart" class="h-[100%] col-span-2"></ChartContainer>
</template>
</div>
</template>
@@ -23,7 +23,15 @@
import { ref, reactive, onMounted } from 'vue'
// reference
const linechart_ref = ref()
const chart_ref = ref()
const chartStore = useChartStore()
const chartManager = reactive(chartStore.chartManager)
onMounted(() => {
if (chartManager.children.length === 0) {
chartManager.addChart()
}
})
// mqtt init
const { startMqtt, publish } = useMqtt()
@@ -42,35 +50,37 @@
const yData = info[2]
const horizontal = info[3]
const line = info[4]
const groupData = []
const groupData: number | string[][] = []
for (let i = 0; i < xData.length; i++) {
groupData.push([xData[i], yData[i]])
}
for (const chart of chartManager.children) {
chartManager.children.forEach((chart, index) => {
const seriesIndex = chart.seriesManager.findSeries({ id: metaID })
// append Data
if (seriesIndex !== -1) {
linechart_ref.value[0]?.appendData(seriesIndex, groupData)
chart_ref.value[index]?.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,
},
},
],
})
}
}
chart_ref.value[index]?.markLine(yAxis_list)
// chart_ref.value[0].setOption({
// series: [
// {
// markLine: {
// data: yAxis_list,
// },
// },
// ],
// })
// stop loading
linechart_ref.value[0]?.stopLoading()
// stop loading
chart_ref.value[index]?.stopLoading()
})
}
// download file
const name = 'test'
@@ -79,24 +89,17 @@
a.href = url
a.target = '_blank'
document.body.appendChild(a)
a.click()
// a.click()
document.body.removeChild(a)
})
// ControlPanel handling
const filterData = function (e: any) {
linechart_ref.value[0]?.startLoading()
chart_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 })
defineExpose({ chart_ref, filterData })
</script>
<style></style>
src/stores/data-analysis/chart.ts
+12 -4
View File
@@ -1,12 +1,20 @@
import ChartManager from '@/utils/chart/chartManager'
import { defineStore } from 'pinia'
interface ChartState {
chartManager: ChartManager
chartIndex: number
xAxisSlider: boolean
yAxisSlider: boolean
}
export const useChartStore = defineStore('data-analysis-chart', {
state: () => ({
chart: new ChartManager(),
state: (): ChartState => ({
chartManager: new ChartManager(),
chartIndex: 0,
xAxisSlider: false,
yAxisSlider: false,
}),
// could also be defined as
// state: () => ({ count: 0 })
getters: {},
actions: {},
})
src/utils/chart/Series/series.ts
+3
View File
@@ -8,6 +8,9 @@ class Series {
this.type = 'line'
this.showSymbol = false
this.data = []
// this.data = Array(100)
// .fill()
// .map(() => [1000 * Math.random(), 1000 * Math.random()])
this.silent = false
this.animation = false
this.markLine = {
src/utils/chart/Series/seriesManager.ts
-2
View File
@@ -15,9 +15,7 @@ class SeriesManager {
}
getSeries(target: seriesTarget): Series | Series[] {
console.log('target', target)
const idx = this.findSeries(target)
console.log('idx', idx)
if (idx !== undefined) {
return this.children[idx]
}
src/utils/chart/xAxis.ts → src/utils/chart/XAxis/xAxis.ts
+18 -7
View File
@@ -1,11 +1,19 @@
import { XAXisComponentOption } from 'echarts'
interface xAxisOption {
id?: XAXisComponentOption['id']
show?: XAXisComponentOption['show']
type?: XAXisComponentOption['type']
gridIndex?: XAXisComponentOption['gridIndex']
axisLine?: XAXisComponentOption['axisLabel']
id?: string | number
show?: boolean
name?: string
type?: 'value' | 'category' | 'time' | 'log'
gridIndex?: number
boundaryGap?: [number | string, number | string]
splitNumber?: number
interval?: number
minInterval?: number
maxInterval?: number
alignTicks?: boolean
scale?: boolean
axisLine?: XAXisComponentOption['axisLine']
axisTick?: XAXisComponentOption['axisTick']
axisLabel?: XAXisComponentOption['axisLabel']
splitLine?: XAXisComponentOption['splitLine']
@@ -19,13 +27,16 @@ class xAxis {
// this.id = undefined
this.show = true
this.type = 'value'
this.name = 'abc'
this.scale = true
this.gridIndex = 0
this.axisLine = {}
this.axisLabel = {}
this.axisTick = {}
this.splitLine = {}
// this.min = undefined
// this.max = undefined
this.boundaryGap = undefined
this.min = undefined
this.max = undefined
}
}
src/utils/chart/XAxis/xAxisManager.ts
+42 -6
View File
@@ -15,22 +15,58 @@ class XAxisManager {
return this.children
}
switchXAxis(idxFrom: number, idxTo: number) {
const temp = this.children[idxTo]
this.children[idxTo] = this.children[idxFrom]
this.children[idxFrom] = temp
}
delxAxis() {
return
}
changeName(name: string, idx = 0) {
setName(name: string, idx = 0) {
this.children[idx].name = name
}
changeFormatter(formatter: any, idx = 0) {
if (this.children[idx]?.axisLabel?.formatter) {
this.children[idx]?.axisLabel?.formatter = formatter
setFormatter(formatter: any, idx = 0) {
const axisLabel = this.children[idx]?.axisLabel
if (axisLabel && 'formatter' in axisLabel) {
axisLabel.formatter = formatter
}
}
changeBoundry() {
return
setBoundry(boundaryGap: [number | string, number | string], idx = 0) {
this.children[idx].boundaryGap = boundaryGap
}
resetBoundry(idx = 0) {
this.children[idx].boundaryGap = undefined
}
setMax(max: number | string, idx = 0) {
this.children[idx].max = max
}
setMin(min: number | string, idx = 0) {
this.children[idx].min = min
}
resetMinMax(idx = 0) {
this.children[idx].max = undefined
this.children[idx].min = undefined
}
setInterval(interval: number, idx = 0) {
this.children[idx].interval = interval
}
resetInterval(idx = 0) {
this.children[idx].interval = undefined
}
setSplitNumber(splitNumber: number, idx = 0) {
this.children[idx].splitNumber = splitNumber
}
}
src/utils/chart/chart.ts
+17 -3
View File
@@ -5,6 +5,7 @@
// import { yAxis, yAxisOption } from './yAxis'
// import { DataZoom } from './dataZoom'
import { SeriesManager } from './Series/seriesManager'
import { XAxisManager } from './XAxis/xAxisManager'
class Chart {
title: any
@@ -14,20 +15,33 @@ class Chart {
// tooltip: any
// grid: any
dataZoom: any
seriesManager: SeriesManager
series: any
toolbox: any
xAxisManager: XAxisManager
seriesManager: SeriesManager
// gridManager: GridManager
constructor() {
// this.title = { text: 'Gradient along the y axis' }
this.xAxisManager = new XAxisManager()
this.seriesManager = new SeriesManager()
// this.gridManager = new GridManager()
this.legend = { type: 'scroll' }
// this.tooltip = new Tooltip()
this.xAxis = { scale: true }
this.xAxis = this.xAxisManager.getXAxis()
this.yAxis = { scale: true }
// this.grid = this.gridManager.getGrid()
this.series = this.seriesManager.getSeries({})
this.dataZoom = [{ type: 'inside' }, { type: 'slider' }]
this.dataZoom = [{ type: 'inside' }]
this.toolbox = {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none',
},
saveAsImage: {},
},
}
}
}