Skip to content

Commit b2a1e24

Browse files
graphierosgraphieros
committed
Update component reactivity
1 parent 82d987d commit b2a1e24

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1603
-485
lines changed

‎src/components/vue-ui-3d-bar.vue

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed, onMounted, nextTick } from "vue";
2+
import { ref, computed, onMounted, nextTick, watch } from "vue";
33
import {
44
applyDataLabel,
55
calcMarkerOffsetX,
@@ -58,8 +58,19 @@ const uid = ref(createUid());
5858
const details = ref(null);
5959
const bar3dChart = ref(null);
6060
const selectionIsFixed = ref(false);
61+
const titleStep = ref(0);
62+
const tableStep = ref(0);
6163
62-
const FINAL_CONFIG = computed(() => {
64+
const FINAL_CONFIG = computed({
65+
get: () => {
66+
return prepareConfig();
67+
},
68+
set: (newCfg) => {
69+
return newCfg
70+
}
71+
});
72+
73+
function prepareConfig() {
6374
const mergedConfig = useNestedProp({
6475
userConfig: props.config,
6576
defaultConfig: DEFAULT_CONFIG
@@ -75,7 +86,14 @@ const FINAL_CONFIG = computed(() => {
7586
} else {
7687
return mergedConfig;
7788
}
78-
});
89+
}
90+
91+
watch(() => props.config, (_newCfg) => {
92+
FINAL_CONFIG.value = prepareConfig();
93+
prepareChart();
94+
titleStep.value += 1;
95+
tableStep.value += 1;
96+
}, { deep: true });
7997
8098
const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
8199
elementId: `3d_bar_${uid.value}`,
@@ -150,6 +168,28 @@ const box = computed(() => {
150168
const activeValue = ref(FINAL_CONFIG.value.style.chart.animation.use ? 0 : props.dataset.percentage);
151169
152170
onMounted(() => {
171+
prepareChart();
172+
173+
let acceleration = 0;
174+
let speed = FINAL_CONFIG.value.style.chart.animation.speed;
175+
let incr = (0.005) * FINAL_CONFIG.value.style.chart.animation.acceleration;
176+
function animate() {
177+
activeValue.value += speed + acceleration;
178+
acceleration += incr;
179+
if(activeValue.value < props.dataset.percentage) {
180+
requestAnimationFrame(animate)
181+
} else {
182+
activeValue.value = props.dataset.percentage
183+
}
184+
}
185+
186+
if(FINAL_CONFIG.value.style.chart.animation.use) {
187+
activeValue.value = 0;
188+
animate()
189+
}
190+
})
191+
192+
function prepareChart() {
153193
if(objectIsEmpty(props.dataset)) {
154194
error({
155195
componentName: 'VueUi3dBar',
@@ -198,25 +238,7 @@ onMounted(() => {
198238
})
199239
}
200240
}
201-
202-
let acceleration = 0;
203-
let speed = FINAL_CONFIG.value.style.chart.animation.speed;
204-
let incr = (0.005) * FINAL_CONFIG.value.style.chart.animation.acceleration;
205-
function animate() {
206-
activeValue.value += speed + acceleration;
207-
acceleration += incr;
208-
if(activeValue.value < props.dataset.percentage) {
209-
requestAnimationFrame(animate)
210-
} else {
211-
activeValue.value = props.dataset.percentage
212-
}
213-
}
214-
215-
if(FINAL_CONFIG.value.style.chart.animation.use) {
216-
activeValue.value = 0;
217-
animate()
218-
}
219-
})
241+
}
220242
221243
function createFill(startProportion, proportion, breakdown, color) {
222244
const height = svg.value.height - svg.value.bottom - svg.value.top - (svg.value.perspective * 2);
@@ -497,6 +519,7 @@ defineExpose({
497519
<div v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:${FINAL_CONFIG.style.chart.backgroundColor}`">
498520
<!-- TITLE AS DIV -->
499521
<Title
522+
:key="`title_${titleStep}`"
500523
:config="{
501524
title: {
502525
cy: '3dBar-div-title',
@@ -929,6 +952,7 @@ defineExpose({
929952
}">
930953
<template #content>
931954
<DataTable
955+
:key="`table_${tableStep}`"
932956
:colNames="dataTable.colNames"
933957
:head="dataTable.head"
934958
:body="dataTable.body"

‎src/components/vue-ui-age-pyramid.vue

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed, nextTick, onMounted } from "vue";
2+
import { ref, computed, nextTick, onMounted, watch } from "vue";
33
import {
44
applyDataLabel,
55
checkNaN,
@@ -57,8 +57,19 @@ const selectedIndex = ref(null);
5757
const step = ref(0);
5858
const agePyramid = ref(null);
5959
const chartTitle = ref(null);
60+
const titleStep = ref(0);
61+
const tableStep = ref(0);
6062
61-
const FINAL_CONFIG = computed(() => {
63+
const FINAL_CONFIG = computed({
64+
get: () => {
65+
return prepareConfig();
66+
},
67+
set: (newCfg) => {
68+
return newCfg
69+
}
70+
});
71+
72+
function prepareConfig() {
6273
const mergedConfig = useNestedProp({
6374
userConfig: props.config,
6475
defaultConfig: DEFAULT_CONFIG
@@ -73,11 +84,22 @@ const FINAL_CONFIG = computed(() => {
7384
} else {
7485
return mergedConfig;
7586
}
76-
});
87+
}
88+
89+
watch(() => props.config, (_newCfg) => {
90+
FINAL_CONFIG.value = prepareConfig();
91+
prepareChart();
92+
titleStep.value += 1;
93+
tableStep.value += 1;
94+
}, { deep: true });
7795
7896
const resizeObserver = ref(null);
7997
8098
onMounted(() => {
99+
prepareChart();
100+
});
101+
102+
function prepareChart() {
81103
if(objectIsEmpty(props.dataset)) {
82104
error({
83105
componentName: 'VueUiAgePyramid',
@@ -98,7 +120,7 @@ onMounted(() => {
98120
resizeObserver.value = new ResizeObserver(handleResize);
99121
resizeObserver.value.observe(agePyramid.value.parentNode);
100122
}
101-
});
123+
}
102124
103125
const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
104126
elementId: `vue-ui-age-pyramid_${uid.value}`,
@@ -396,6 +418,7 @@ defineExpose({
396418

397419
<div ref="chartTitle" v-if="FINAL_CONFIG.style.title.text" :style="`width:100%;background:${FINAL_CONFIG.style.backgroundColor}`">
398420
<Title
421+
:key="`title_${titleStep}`"
399422
:config="{
400423
title: {
401424
cy: 'pyramid-div-title',
@@ -732,6 +755,7 @@ defineExpose({
732755
}">
733756
<template #content>
734757
<DataTable
758+
:key="`table_${tableStep}`"
735759
:colNames="dataTable.colNames"
736760
:head="dataTable.head"
737761
:body="dataTable.body"

‎src/components/vue-ui-candlestick.vue

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed, onMounted, nextTick, onBeforeUnmount } from "vue";
2+
import { ref, computed, onMounted, nextTick, onBeforeUnmount, watch } from "vue";
33
import {
44
calculateNiceScale,
55
canShowValue,
@@ -57,13 +57,24 @@ const isTooltip = ref(false);
5757
const tooltipContent = ref("");
5858
const hoveredIndex = ref(undefined);
5959
const step = ref(0);
60-
const slicerStep = ref(0);
6160
const candlestickChart = ref(null);
6261
const chartTitle = ref(null);
6362
const chartLegend = ref(null);
6463
const chartSlicer = ref(null);
64+
const slicerStep = ref(0);
65+
const tableStep = ref(0);
66+
const titleStep = ref(0);
67+
68+
const FINAL_CONFIG = computed({
69+
get: () => {
70+
return prepareConfig();
71+
},
72+
set: (newCfg) => {
73+
return newCfg
74+
}
75+
});
6576
66-
const FINAL_CONFIG = computed(() => {
77+
function prepareConfig() {
6778
const mergedConfig = useNestedProp({
6879
userConfig: props.config,
6980
defaultConfig: DEFAULT_CONFIG
@@ -78,7 +89,21 @@ const FINAL_CONFIG = computed(() => {
7889
} else {
7990
return mergedConfig;
8091
}
81-
});
92+
}
93+
94+
watch(() => props.config, (_newCfg) => {
95+
FINAL_CONFIG.value = prepareConfig();
96+
prepareChart();
97+
slicerStep.value += 1;
98+
titleStep.value += 1;
99+
tableStep.value += 1;
100+
}, { deep: true });
101+
102+
watch(() => props.dataset, (newDs) => {
103+
slicer.value.start = 0;
104+
slicer.value.end = newDs.length
105+
slicerStep.value += 1;
106+
}, { deep: true });
82107
83108
const svg = ref({
84109
height: FINAL_CONFIG.value.style.height,
@@ -90,6 +115,10 @@ const svg = ref({
90115
const resizeObserver = ref(null);
91116
92117
onMounted(() => {
118+
prepareChart();
119+
});
120+
121+
function prepareChart() {
93122
if(objectIsEmpty(props.dataset)) {
94123
error({
95124
componentName: 'VueUiCandlestick',
@@ -126,7 +155,7 @@ onMounted(() => {
126155
resizeObserver.value = new ResizeObserver(handleResize);
127156
resizeObserver.value.observe(candlestickChart.value.parentNode);
128157
}
129-
});
158+
}
130159
131160
onBeforeUnmount(() => {
132161
if (resizeObserver.value) resizeObserver.value.disconnect();
@@ -438,6 +467,7 @@ defineExpose({
438467
<div ref="chartTitle" v-if="FINAL_CONFIG.style.title.text" :style="`width:100%;background:${FINAL_CONFIG.style.backgroundColor}`">
439468
<!-- TITLE AS DIV -->
440469
<Title
470+
:key="`title_${titleStep}`"
441471
:config="{
442472
title: {
443473
cy: 'candlestick-div-title',
@@ -773,6 +803,7 @@ defineExpose({
773803
}">
774804
<template #content>
775805
<DataTable
806+
:key="`table_${tableStep}`"
776807
:colNames="dataTable.colNames"
777808
:head="dataTable.head"
778809
:body="dataTable.body"

‎src/components/vue-ui-carousel-table.vue

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ const isFullscreen = ref(false);
3030
const isDataset = ref(!!props.dataset);
3131
3232
onMounted(() => {
33+
prepareChart();
34+
});
35+
36+
function prepareChart() {
3337
if (objectIsEmpty(props.dataset)) {
3438
error({
3539
componentName: 'VueUiCarouselTable',
@@ -53,14 +57,32 @@ onMounted(() => {
5357
isDataset.value = false;
5458
}
5559
}
60+
}
61+
62+
const FINAL_CONFIG = computed({
63+
get: () => {
64+
return prepareConfig();
65+
},
66+
set: (newCfg) => {
67+
return newCfg
68+
}
5669
});
5770
58-
const FINAL_CONFIG = computed(() => {
71+
function prepareConfig() {
5972
return useNestedProp({
6073
userConfig: props.config,
6174
defaultConfig: DEFAULT_CONFIG
6275
});
63-
});
76+
}
77+
78+
watch(() => props.config, (_newCfg) => {
79+
FINAL_CONFIG.value = prepareConfig();
80+
prepareChart();
81+
}, { deep: true });
82+
83+
watch(() => props.dataset, (_) => {
84+
setTrElements();
85+
}, { deep: true })
6486
6587
const { isPrinting, isImaging, generatePdf: makePdf, generateImage } = usePrinter({
6688
elementId: `carousel-table_${uid.value}`,

‎src/components/vue-ui-chestnut.vue

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed, onMounted, nextTick } from "vue";
2+
import { ref, computed, onMounted, nextTick, watch } from "vue";
33
import {
44
adaptColorToBackground,
55
applyDataLabel,
@@ -57,7 +57,16 @@ const chestnutChart = ref(null);
5757
const details = ref(null);
5858
const step = ref(0);
5959
60-
const FINAL_CONFIG = computed(() => {
60+
const FINAL_CONFIG = computed({
61+
get: () => {
62+
return prepareConfig();
63+
},
64+
set: (newCfg) => {
65+
return newCfg
66+
}
67+
});
68+
69+
function prepareConfig() {
6170
const mergedConfig = useNestedProp({
6271
userConfig: props.config,
6372
defaultConfig: DEFAULT_CONFIG
@@ -73,7 +82,12 @@ const FINAL_CONFIG = computed(() => {
7382
} else {
7483
return mergedConfig;
7584
}
76-
});
85+
}
86+
87+
watch(() => props.config, (_newCfg) => {
88+
FINAL_CONFIG.value = prepareConfig();
89+
prepareChart();
90+
}, { deep: true });
7791
7892
const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
7993
elementId: `vue-ui-chestnut_${uid.value}`,
@@ -400,6 +414,10 @@ function observeTable() {
400414
}
401415
402416
onMounted(() => {
417+
prepareChart();
418+
});
419+
420+
function prepareChart() {
403421
if(objectIsEmpty(props.dataset)) {
404422
error({
405423
componentName: 'VueUiChestnut',
@@ -410,7 +428,7 @@ onMounted(() => {
410428
const height = totalBranches.value * (svg.value.branchSize + svg.value.gap) + svg.value.padding.top + svg.value.padding.bottom;
411429
svg.value.height = height;
412430
observeTable()
413-
});
431+
}
414432
415433
const table = computed(() => {
416434
const head = [

0 commit comments

Comments
 (0)