Skip to content

Commit 1976156

Browse files
committed
VueUiQuadrant fixed janky animation on side zoom
1 parent dd22863 commit 1976156

File tree

5 files changed

+12
-17
lines changed

5 files changed

+12
-17
lines changed

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.1.12",
4+
"version": "2.1.13",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

src/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2749,6 +2749,7 @@ const radarConfig = ref({
27492749
const quadrantConfig = ref({
27502750
style: {
27512751
chart: {
2752+
backgroundColor: '#1A1A1A',
27522753
title: {
27532754
text: "Title",
27542755
subtitle: {
@@ -4507,7 +4508,7 @@ const cursorConfig = ref({
45074508
</template>
45084509
</Box>
45094510

4510-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
4511+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
45114512
<template #title>
45124513
<BaseIcon name="chartQuadrant" />
45134514
VueUiQuadrant

src/components/vue-ui-cursor.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ const waveScale = computed(() => {
205205
style="font-variant-numeric: tabular-nums"
206206
font-family="Arial"
207207
>
208-
{{ position.x }}
208+
{{ position.x.toFixed(0) }}
209209
</text>
210210
<g :transform="`translate(${50 - (cursorConfig.coordinatesFontSize / 2) + cursorConfig.coordinatesOffset}, ${-cursorConfig.centerCircleRadius + 50 - (cursorConfig.coordinatesFontSize / 2) + cursorConfig.coordinatesOffset})`">
211211
<text
@@ -216,7 +216,7 @@ const waveScale = computed(() => {
216216
transform="rotate(-90)"
217217
font-family="Arial"
218218
>
219-
{{ position.y }}
219+
{{ position.y.toFixed(0) }}
220220
</text>
221221
</g>
222222
</g>

src/components/vue-ui-quadrant.vue

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -273,12 +273,6 @@ function selectQuadrantSide(side) {
273273
}
274274
isZoom.value = true
275275
}
276-
// if(isZoom.value && selectedSide.value === side) {
277-
// selectedSide.value = null;
278-
// isZoom.value = false;
279-
// } else {
280-
// isZoom.value = true;
281-
// }
282276
}
283277
284278
const graduations = computed(() => {
@@ -1184,30 +1178,30 @@ defineExpose({
11841178
</template>
11851179

11861180
<!-- HIDDEN AREAS ON ZOOM -->
1187-
<g v-if="isZoom">
1181+
<g v-if="isZoom" class="vue-ui-dna">
11881182
<polygon
11891183
v-if="selectedSide === 'TL'"
11901184
:points="`${svg.left},${svg.centerY} ${svg.centerX},${svg.centerY} ${svg.centerX},${svg.top} ${svg.right},${svg.top} ${svg.right},${svg.bottom} ${svg.left},${svg.bottom} ${svg.left},${svg.centerY}`"
11911185
:fill="quadrantConfig.style.chart.backgroundColor"
1192-
style="opacity:0.95"
1186+
style="opacity:1"
11931187
/>
11941188
<polygon
11951189
v-if="selectedSide === 'TR'"
11961190
:points="`${svg.left},${svg.top} ${svg.centerX},${svg.top} ${svg.centerX},${svg.centerY} ${svg.right},${svg.centerY} ${svg.right},${svg.bottom} ${svg.left},${svg.bottom} ${svg.left},${svg.top}`"
11971191
:fill="quadrantConfig.style.chart.backgroundColor"
1198-
style="opacity:0.95"
1192+
style="opacity:1"
11991193
/>
12001194
<polygon
12011195
v-if="selectedSide === 'BR'"
12021196
:points="`${svg.left},${svg.top} ${svg.right},${svg.top} ${svg.right},${svg.centerY} ${svg.centerX},${svg.centerY} ${svg.centerX},${svg.bottom} ${svg.left},${svg.bottom} ${svg.left},${svg.top}`"
12031197
:fill="quadrantConfig.style.chart.backgroundColor"
1204-
style="opacity:0.95"
1198+
style="opacity:1"
12051199
/>
12061200
<polygon
12071201
v-if="selectedSide === 'BL'"
12081202
:points="`${svg.left},${svg.top} ${svg.right},${svg.top} ${svg.right},${svg.bottom} ${svg.centerX},${svg.bottom} ${svg.centerX},${svg.centerY} ${svg.left},${svg.centerY} ${svg.left},${svg.top}`"
12091203
:fill="quadrantConfig.style.chart.backgroundColor"
1210-
style="opacity:0.95"
1204+
style="opacity:1"
12111205
/>
12121206
</g>
12131207

0 commit comments

Comments
 (0)