Skip to content

Commit 63823d4

Browse files
graphierosgraphieros
committed
Modification - Revert some label watchers
1 parent 87da1d8 commit 63823d4

11 files changed

+193
-60
lines changed

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12+
watchEffect,
1213
} from "vue";
1314
import {
1415
applyDataLabel,
@@ -36,7 +37,6 @@ import { useNestedProp } from "../useNestedProp";
3637
import { useUserOptionState } from "../useUserOptionState";
3738
import { useChartAccessibility } from "../useChartAccessibility";
3839
import { useTimeLabelCollision } from "../useTimeLabelCollider";
39-
import { useResizeObserverEffect } from "../useResizeObserverEffect";
4040
import img from "../img";
4141
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
4242
import themes from "../themes.json";
@@ -273,12 +273,25 @@ const WIDTH = computed(() => svg.value.width);
273273
const HEIGHT = computed(() => svg.value.height);
274274
275275
const xAxisLabelsHeight = ref(0);
276-
const updateHeight = throttle((h) => { xAxisLabelsHeight.value = h; }, 100);
277-
useResizeObserverEffect({ elementRef: xAxisLabels, callback: updateHeight, attr: 'height' });
276+
277+
const updateHeight = throttle((h) => {
278+
xAxisLabelsHeight.value = h;
279+
}, 100);
280+
281+
watchEffect((onInvalidate) => {
282+
const el = xAxisLabels.value;
283+
if (!el) return;
284+
285+
const observer = new ResizeObserver(entries => {
286+
updateHeight(entries[0].contentRect.height);
287+
});
288+
observer.observe(el);
289+
onInvalidate(() => observer.disconnect());
290+
});
278291
279292
onBeforeUnmount(() => {
280293
xAxisLabelsHeight.value = 0;
281-
});
294+
})
282295
283296
const drawingArea = computed(() => {
284297
const width = svg.value.width - FINAL_CONFIG.value.style.layout.padding.right - FINAL_CONFIG.value.style.layout.padding.left;

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12+
watchEffect,
1213
} from "vue";
1314
import {
1415
calculateNiceScale,
@@ -39,7 +40,6 @@ import { useTimeLabels } from "../useTimeLabels";
3940
import { useUserOptionState } from "../useUserOptionState";
4041
import { useChartAccessibility } from "../useChartAccessibility";
4142
import { useTimeLabelCollision } from "../useTimeLabelCollider";
42-
import { useResizeObserverEffect } from "../useResizeObserverEffect.js";
4343
import img from "../img";
4444
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
4545
import themes from "../themes.json";
@@ -359,8 +359,22 @@ const mutableConfig = ref({
359359
});
360360
361361
const timeLabelsHeight = ref(0);
362-
const updateHeight = throttle((h) => { timeLabelsHeight.value = h; }, 100);
363-
useResizeObserverEffect({ elementRef: timeLabelsEls, callback: updateHeight, attr: 'height' });
362+
363+
const updateHeight = throttle((h) => {
364+
timeLabelsHeight.value = h;
365+
}, 100);
366+
367+
// Track time label height to update drawing area when they rotate
368+
watchEffect((onInvalidate) => {
369+
const el = timeLabelsEls.value;
370+
if (!el) return;
371+
372+
const observer = new ResizeObserver(entries => {
373+
updateHeight(entries[0].contentRect.height);
374+
});
375+
observer.observe(el);
376+
onInvalidate(() => observer.disconnect());
377+
});
364378
365379
onBeforeUnmount(() => {
366380
timeLabelsHeight.value = 0;

‎src/components/vue-ui-donut-evolution.vue‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11

22
<script setup>
3-
import {
4-
computed,
5-
defineAsyncComponent,
6-
nextTick,
7-
onBeforeUnmount,
8-
onMounted,
9-
ref,
10-
shallowRef,
11-
toRefs,
12-
watch,
13-
} from "vue";
3+
import { ref, computed, nextTick, onMounted, watch, defineAsyncComponent, watchEffect, onBeforeUnmount, toRefs, shallowRef } from "vue";
144
import {
155
applyDataLabel,
166
calcMarkerOffsetX,
@@ -50,7 +40,6 @@ import { useResponsive } from "../useResponsive.js";
5040
import { useUserOptionState } from "../useUserOptionState";
5141
import { useChartAccessibility } from "../useChartAccessibility";
5242
import { useTimeLabelCollision } from '../useTimeLabelCollider.js';
53-
import { useResizeObserverEffect } from "../useResizeObserverEffect.js";
5443
import img from "../img";
5544
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
5645
import themes from "../themes.json";
@@ -456,8 +445,22 @@ function getScaleLabelX() {
456445
}
457446
458447
const timeLabelsHeight = ref(0);
459-
const updateHeight = throttle((h) => { timeLabelsHeight.value = h }, 100);
460-
useResizeObserverEffect({ elementRef: timeLabelsEls, callback: updateHeight, attr: 'height' });
448+
449+
const updateHeight = throttle((h) => {
450+
timeLabelsHeight.value = h
451+
}, 100)
452+
453+
// Track time label height to update drawing area when they rotate
454+
watchEffect((onInvalidate) => {
455+
const el = timeLabelsEls.value
456+
if (!el) return
457+
458+
const observer = new ResizeObserver(entries => {
459+
updateHeight(entries[0].contentRect.height)
460+
})
461+
observer.observe(el)
462+
onInvalidate(() => observer.disconnect())
463+
})
461464
462465
onBeforeUnmount(() => {
463466
timeLabelsHeight.value = 0

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12+
watchEffect,
1213
} from "vue";
1314
import {
1415
applyDataLabel,
@@ -37,7 +38,6 @@ import { useResponsive } from "../useResponsive";
3738
import { useUserOptionState } from "../useUserOptionState";
3839
import { useChartAccessibility } from "../useChartAccessibility";
3940
import { useTimeLabelCollision } from "../useTimeLabelCollider";
40-
import { useResizeObserverEffect } from "../useResizeObserverEffect";
4141
import img from "../img";
4242
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
4343
import themes from "../themes.json";
@@ -359,8 +359,19 @@ function getOffsetX() {
359359
}
360360
361361
const labelsXHeight = ref(0);
362-
const updateHeight = throttle((h) => { labelsXHeight.value = h; }, 100);
363-
useResizeObserverEffect({ elementRef: scaleLabels, callback: updateHeight, attr: 'height' });
362+
const updateHeight = throttle((h) => {
363+
labelsXHeight.value = h;
364+
}, 100);
365+
366+
watchEffect((onInvalidate) => {
367+
const el = scaleLabels.value;
368+
if (!el) return;
369+
const observer = new ResizeObserver(entries => {
370+
updateHeight(entries[0].contentRect.height);
371+
});
372+
observer.observe(el);
373+
onInvalidate(() => observer.disconnect());
374+
});
364375
365376
onBeforeUnmount(() => {
366377
labelsXHeight.value = 0;

‎src/components/vue-ui-history-plot.vue‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
ref,
99
shallowRef,
1010
toRefs,
11-
watch,
11+
watch,
12+
watchEffect,
1213
} from "vue";
1314
import {
1415
XMLNS,
@@ -44,7 +45,6 @@ import { useResponsive } from "../useResponsive";
4445
import { useUserOptionState } from "../useUserOptionState";
4546
import { useChartAccessibility } from "../useChartAccessibility";
4647
import { useTimeLabelCollision } from "../useTimeLabelCollider";
47-
import { useResizeObserverEffect } from "../useResizeObserverEffect";
4848
import img from "../img";
4949
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
5050
import themes from "../themes.json";
@@ -460,8 +460,20 @@ function getOffsetX() {
460460
461461
462462
const xAxisScalesH = ref(0);
463-
const updateHeight = throttle((h) => { xAxisScalesH.value = h; });
464-
useResizeObserverEffect({ elementRef: xAxisScales, callback: updateHeight, attr: 'height' });
463+
464+
const updateHeight = throttle((h) => {
465+
xAxisScalesH.value = h;
466+
});
467+
468+
watchEffect((onInvalidate) => {
469+
const el = xAxisScales.value;
470+
if (!el) return;
471+
const observer = new ResizeObserver(entries => {
472+
updateHeight(entries[0].contentRect.height);
473+
});
474+
observer.observe(el);
475+
onInvalidate(() => observer.disconnect());
476+
});
465477
466478
const offsetY = computed(() => {
467479
let h = 0;

‎src/components/vue-ui-parallel-coordinate-plot.vue‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
<script setup>
2-
import {
3-
ref,
4-
computed,
5-
onMounted,
6-
onBeforeUnmount,
7-
watch,
8-
defineAsyncComponent,
9-
shallowRef,
10-
toRefs,
11-
nextTick
12-
} from "vue";
2+
import { ref, computed, onMounted, onBeforeUnmount, watch, defineAsyncComponent, shallowRef, watchEffect, toRefs, nextTick } from "vue";
133
import {
144
applyDataLabel,
155
calculateNiceScale,
@@ -44,7 +34,6 @@ import { useNestedProp } from "../useNestedProp";
4434
import { useUserOptionState } from "../useUserOptionState";
4535
import { useChartAccessibility } from "../useChartAccessibility";
4636
import { useTimeLabelCollision } from "../useTimeLabelCollider";
47-
import { useResizeObserverEffect } from "../useResizeObserverEffect";
4837
import themes from "../themes.json";
4938
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
5039
import Legend from "../atoms/Legend.vue"; // Must be ready in responsive mode
@@ -366,8 +355,22 @@ const WIDTH = computed(() => chartDimensions.value.width);
366355
const HEIGHT = computed(() => chartDimensions.value.height);
367356
368357
const topLabelsHeight = ref(0);
369-
const updateTopLabelsHeight = throttle((h) => { topLabelsHeight.value = h }, 100);
370-
useResizeObserverEffect({ elementRef: xAxisLabels, callback: updateTopLabelsHeight, attr: 'height' });
358+
359+
const updateTopLabelsHeight = throttle((h) => {
360+
topLabelsHeight.value = h
361+
}, 100);
362+
363+
// Track time label height to update drawing area when they rotate
364+
watchEffect((onInvalidate) => {
365+
const el = xAxisLabels.value
366+
if (!el) return
367+
368+
const observer = new ResizeObserver(entries => {
369+
updateTopLabelsHeight(entries[0].contentRect.height)
370+
})
371+
observer.observe(el)
372+
onInvalidate(() => observer.disconnect())
373+
});
371374
372375
const drawingArea = computed(() => {
373376
const { top: p_top, right: p_right, bottom: p_bottom, left: p_left } = FINAL_CONFIG.value.style.chart.padding;

‎src/components/vue-ui-quick-chart.vue‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12+
watchEffect,
1213
} from "vue";
1314
import * as detector from "../chartDetector";
1415
import {
@@ -46,7 +47,6 @@ import { useResponsive } from "../useResponsive";
4647
import { useTimeLabels } from "../useTimeLabels";
4748
import { useChartAccessibility } from "../useChartAccessibility";
4849
import { useTimeLabelCollision } from "../useTimeLabelCollider";
49-
import { useResizeObserverEffect } from "../useResizeObserverEffect";
5050
import img from "../img";
5151
import Slicer from "../atoms/Slicer.vue";
5252
import themes from "../themes.json";
@@ -738,8 +738,22 @@ function getScaleLabelX() {
738738
}
739739
740740
const timeLabelsHeight = ref(0);
741-
const updateHeight = throttle((h) => { timeLabelsHeight.value = h }, 100);
742-
useResizeObserverEffect({ elementRef: timeLabelsEls, callback: updateHeight, attr: 'height' });
741+
742+
const updateHeight = throttle((h) => {
743+
timeLabelsHeight.value = h
744+
}, 100)
745+
746+
// Track time label height to update drawing area when they rotate
747+
watchEffect((onInvalidate) => {
748+
const el = timeLabelsEls.value
749+
if (!el) return
750+
751+
const observer = new ResizeObserver(entries => {
752+
updateHeight(entries[0].contentRect.height)
753+
})
754+
observer.observe(el)
755+
onInvalidate(() => observer.disconnect())
756+
})
743757
744758
onBeforeUnmount(() => {
745759
timeLabelsHeight.value = 0

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
ref,
88
shallowRef,
99
toRefs,
10-
watch,
10+
watch,
11+
watchEffect,
1112
} from "vue";
1213
import {
1314
adaptColorToBackground,
@@ -44,7 +45,6 @@ import { useTimeLabels } from "../useTimeLabels";
4445
import { useUserOptionState } from "../useUserOptionState";
4546
import { useChartAccessibility } from "../useChartAccessibility";
4647
import { useTimeLabelCollision } from "../useTimeLabelCollider";
47-
import { useResizeObserverEffect } from "../useResizeObserverEffect";
4848
import themes from "../themes.json";
4949
import Legend from "../atoms/Legend.vue";
5050
import Title from "../atoms/Title.vue";
@@ -481,8 +481,20 @@ const WIDTH = computed(() => svg.value.width);
481481
const HEIGHT = computed(() => svg.value.height);
482482
483483
const timeLabelsOffsetY = ref(0);
484-
const updateHeight = throttle((h) => { timeLabelsOffsetY.value = h; }, 100);
485-
useResizeObserverEffect({ elementRef: timeLabelsEls, callback: updateHeight, attr: 'height' });
484+
485+
const updateHeight = throttle((h) => {
486+
timeLabelsOffsetY.value = h;
487+
}, 100);
488+
489+
watchEffect((onInvalidate) => {
490+
const el = timeLabelsEls.value;
491+
if (!el) return;
492+
const observer = new ResizeObserver(entries => {
493+
updateHeight(entries[0].contentRect.height);
494+
})
495+
observer.observe(el);
496+
onInvalidate(() => observer.disconnect());
497+
});
486498
487499
onBeforeUnmount(() => {
488500
timeLabelsOffsetY.value = 0;

0 commit comments

Comments
 (0)