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

[update] x-axis fixed & interval follow the unit

Browse Source
This commit is contained in:
peterlu14
2023-02-03 16:49:11 +08:00
parent 4fc46ca4ea
commit 69dc2a718f
1 changed files with 62 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/data-analysis/chart-container/XAxisSlider.vue
+62 -17
View File
@@ -3,7 +3,7 @@
<div>
<div class="mt-2 mx-1 grid grid-cols-6 items-center">
<div>
<p>Unit</p>
<p>Unit ({{ unitObj.text }})</p>
</div>
<va-button-toggle
v-model="unitObj.text"
@@ -14,28 +14,52 @@
<va-divider />
<div class="mt-2 mx-1 grid grid-cols-6 items-center">
<div class="col-span-1">
<p>Boundry</p>
<p>Space</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-input
v-model="leftBoundryInput"
label="left"
placeholder="10%"
class="px-1 col-span-2"
@keyup.enter="setBoundry"
@blur="setBoundry"
/>
<va-input
v-model="rightBoundryInput"
label="right"
placeholder="10%"
class="px-1 col-span-2"
@keyup.enter="setBoundry"
@blur="setBoundry"
/>
<div class="mx-2 col-span-1 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>
<p>Fixed</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-input
v-model="minInput"
class="px-1 col-span-2"
label="Min"
@keyup.enter="setMin(minInput)"
@blur="setMin(minInput)"
>
<template #appendInner>{{ unitObj.text }}</template>
</va-input>
<va-input
v-model="maxInput"
class="px-1 col-span-2"
label="Max"
@keyup.enter="setMax(maxInput)"
@blur="setMax(maxInput)"
>
<template #appendInner>{{ unitObj.text }}</template>
</va-input>
<div class="mx-2 col-span-1 justify-self-end">
<va-button small @click="resetMinMax">Reset</va-button>
</div>
</div>
@@ -49,7 +73,9 @@
class="col-span-2"
@keyup.enter="setInterval(Number(intervalInput))"
@blur="setInterval(Number(intervalInput))"
/>
>
<template #appendInner>{{ unitObj.text }}</template>
</va-input>
<div class="mx-2 col-span-3 justify-self-end">
<va-button small @click="resetInterval">Reset</va-button>
</div>
@@ -99,6 +125,17 @@
)
const changeUnit = function (_unit: string) {
/* caculate the ratio */
const oldScale = unitObj.value.scale
const newScale = unitObj.value.option[_unit]
const ratio = newScale / oldScale
/* correct the input value with ratio */
if (maxInput.value !== '') maxInput.value = String(Number(maxInput.value) / ratio)
if (minInput.value !== '') minInput.value = String(Number(minInput.value) / ratio)
if (intervalInput.value !== '') intervalInput.value = String(Number(intervalInput.value) / ratio)
/* change the scale */
unitObj.value.scale = unitObj.value.option[_unit]
}
@@ -107,7 +144,8 @@
const rightBoundryInput = ref('')
const setBoundry = function () {
if (leftBoundryInput.value === '' || rightBoundryInput.value === '') return
if (leftBoundryInput.value === '') leftBoundryInput.value = '0'
if (rightBoundryInput.value === '') rightBoundryInput.value = '0'
xAxisManager.value.setBoundry([leftBoundryInput.value, rightBoundryInput.value])
}
const resetBoundry = function () {
@@ -122,10 +160,16 @@
const setMax = function (max: string) {
if (max === '') return
/* adjust max with scale */
max = String(Number(max) * unitObj.value.scale)
/* set max */
xAxisManager.value.setMax(max)
}
const setMin = function (min: string) {
if (min === '') return
/* adjust min with scale */
min = String(Number(min) * unitObj.value.scale)
/* set min */
xAxisManager.value.setMin(min)
}
const resetMinMax = function () {
@@ -139,6 +183,7 @@
const setInterval = function (interval: number) {
if (interval <= 0) return
interval = Number(interval) * unitObj.value.scale
xAxisManager.value.setInterval(interval)
}
const resetInterval = function () {