Skip to content

Commit f107f76

Browse files
graphierosgraphieros
committed
Modification - Use a composable for resize observers related to labels
1 parent 32c8aa1 commit f107f76

13 files changed

+116
-242
lines changed

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

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12-
watchEffect,
1312
} from "vue";
1413
import {
1514
applyDataLabel,
@@ -37,6 +36,7 @@ import { useNestedProp } from "../useNestedProp";
3736
import { useUserOptionState } from "../useUserOptionState";
3837
import { useChartAccessibility } from "../useChartAccessibility";
3938
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,25 +273,12 @@ const WIDTH = computed(() => svg.value.width);
273273
const HEIGHT = computed(() => svg.value.height);
274274
275275
const xAxisLabelsHeight = ref(0);
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-
});
276+
const updateHeight = throttle((h) => { xAxisLabelsHeight.value = h; }, 100);
277+
useResizeObserverEffect({ elementRef: xAxisLabels, callback: updateHeight, attr: 'height' });
291278
292279
onBeforeUnmount(() => {
293280
xAxisLabelsHeight.value = 0;
294-
})
281+
});
295282
296283
const drawingArea = computed(() => {
297284
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: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12-
watchEffect,
1312
} from "vue";
1413
import {
1514
calculateNiceScale,
@@ -40,6 +39,7 @@ import { useTimeLabels } from "../useTimeLabels";
4039
import { useUserOptionState } from "../useUserOptionState";
4140
import { useChartAccessibility } from "../useChartAccessibility";
4241
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,22 +359,8 @@ const mutableConfig = ref({
359359
});
360360
361361
const timeLabelsHeight = ref(0);
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-
});
362+
const updateHeight = throttle((h) => { timeLabelsHeight.value = h; }, 100);
363+
useResizeObserverEffect({ elementRef: timeLabelsEls, callback: updateHeight, attr: 'height' });
378364
379365
onBeforeUnmount(() => {
380366
timeLabelsHeight.value = 0;

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

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

22
<script setup>
3-
import { ref, computed, nextTick, onMounted, watch, defineAsyncComponent, watchEffect, onBeforeUnmount, toRefs, shallowRef } from "vue";
3+
import {
4+
computed,
5+
defineAsyncComponent,
6+
nextTick,
7+
onBeforeUnmount,
8+
onMounted,
9+
ref,
10+
shallowRef,
11+
toRefs,
12+
watch,
13+
} from "vue";
414
import {
515
applyDataLabel,
616
calcMarkerOffsetX,
@@ -40,6 +50,7 @@ import { useResponsive } from "../useResponsive.js";
4050
import { useUserOptionState } from "../useUserOptionState";
4151
import { useChartAccessibility } from "../useChartAccessibility";
4252
import { useTimeLabelCollision } from '../useTimeLabelCollider.js';
53+
import { useResizeObserverEffect } from "../useResizeObserverEffect.js";
4354
import img from "../img";
4455
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
4556
import themes from "../themes.json";
@@ -445,22 +456,8 @@ function getScaleLabelX() {
445456
}
446457
447458
const timeLabelsHeight = ref(0);
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-
})
459+
const updateHeight = throttle((h) => { timeLabelsHeight.value = h }, 100);
460+
useResizeObserverEffect({ elementRef: timeLabelsEls, callback: updateHeight, attr: 'height' });
464461
465462
onBeforeUnmount(() => {
466463
timeLabelsHeight.value = 0

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

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12-
watchEffect,
1312
} from "vue";
1413
import {
1514
applyDataLabel,
@@ -38,6 +37,7 @@ import { useResponsive } from "../useResponsive";
3837
import { useUserOptionState } from "../useUserOptionState";
3938
import { useChartAccessibility } from "../useChartAccessibility";
4039
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,19 +359,8 @@ function getOffsetX() {
359359
}
360360
361361
const labelsXHeight = ref(0);
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-
});
362+
const updateHeight = throttle((h) => { labelsXHeight.value = h; }, 100);
363+
useResizeObserverEffect({ elementRef: scaleLabels, callback: updateHeight, attr: 'height' });
375364
376365
onBeforeUnmount(() => {
377366
labelsXHeight.value = 0;

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

Lines changed: 9 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {
99
ref,
1010
shallowRef,
1111
toRefs,
12-
watch,
13-
watchEffect,
12+
watch,
1413
} from "vue";
1514
import {
1615
adaptColorToBackground,
@@ -43,6 +42,7 @@ import { useTableResponsive } from "../useTableResponsive";
4342
import { useUserOptionState } from "../useUserOptionState";
4443
import { useTimeLabelCollision } from "../useTimeLabelCollider";
4544
import { useChartAccessibility } from "../useChartAccessibility";
45+
import { useResizeObserverEffect } from '../useResizeObserverEffect';
4646
import img from "../img";
4747
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
4848
import themes from "../themes.json";
@@ -141,7 +141,7 @@ const { loading, FINAL_DATASET, manualLoading } = useLoading({
141141
Promise.resolve().then(async () => {
142142
await nextTick();
143143
if(heatmapChart.value) {
144-
triggerResize(heatmapChart.value);
144+
triggerResize(heatmapChart.value, { delta: 0.1, delay: 250 });
145145
}
146146
})
147147
},
@@ -339,56 +339,16 @@ const svg = computed(() => ({
339339
}));
340340
341341
const topLabelsHeight = ref(0);
342-
343-
const updateTopLabelsHeight = throttle((h) => {
344-
topLabelsHeight.value = h
345-
}, 100);
346-
347-
// Track time label height to update drawing area when they rotate
348-
watchEffect((onInvalidate) => {
349-
const el = xAxisLabels.value
350-
if (!el) return
351-
352-
const observer = new ResizeObserver(entries => {
353-
updateTopLabelsHeight(entries[0].contentRect.height)
354-
})
355-
observer.observe(el)
356-
onInvalidate(() => observer.disconnect())
357-
});
342+
const updateTopLabelsHeight = throttle((h) => { topLabelsHeight.value = h }, 100);
343+
useResizeObserverEffect({ elementRef: xAxisLabels, callback: updateTopLabelsHeight, attr: 'height' });
358344
359345
const leftLabelsWidth = ref(0);
360-
361-
const updateLeftLabelsWidth = throttle((h) => {
362-
leftLabelsWidth.value = h
363-
}, 100);
364-
365-
watchEffect((onInvalidate) => {
366-
const el = yAxisLabels.value
367-
if (!el) return
368-
369-
const observer = new ResizeObserver(entries => {
370-
updateLeftLabelsWidth(entries[0].contentRect.width)
371-
})
372-
observer.observe(el)
373-
onInvalidate(() => observer.disconnect())
374-
});
346+
const updateLeftLabelsWidth = throttle((h) => { leftLabelsWidth.value = h }, 100);
347+
useResizeObserverEffect({ elementRef: yAxisLabels, callback: updateLeftLabelsWidth, attr: 'width' });
375348
376349
const xAxisSumLabelsHeight = ref(0);
377-
378-
const updateXAxisSumLabelsHeight = throttle((h) => {
379-
xAxisSumLabelsHeight.value = h
380-
}, 100);
381-
382-
watchEffect((onInvalidate) => {
383-
const el = xAxisSums.value
384-
if (!el) return
385-
386-
const observer = new ResizeObserver(entries => {
387-
updateXAxisSumLabelsHeight(entries[0].contentRect.height)
388-
})
389-
observer.observe(el)
390-
onInvalidate(() => observer.disconnect())
391-
});
350+
const updateXAxisSumLabelsHeight = throttle((h) => { xAxisSumLabelsHeight.value = h }, 100);
351+
useResizeObserverEffect({ elementRef: xAxisSums, callback: updateXAxisSumLabelsHeight, attr: 'height' });
392352
393353
onBeforeUnmount(() => {
394354
topLabelsHeight.value = 0;

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import {
88
ref,
99
shallowRef,
1010
toRefs,
11-
watch,
12-
watchEffect,
11+
watch,
1312
} from "vue";
1413
import {
1514
XMLNS,
@@ -45,6 +44,7 @@ import { useResponsive } from "../useResponsive";
4544
import { useUserOptionState } from "../useUserOptionState";
4645
import { useChartAccessibility } from "../useChartAccessibility";
4746
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,20 +460,8 @@ function getOffsetX() {
460460
461461
462462
const xAxisScalesH = ref(0);
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-
});
463+
const updateHeight = throttle((h) => { xAxisScalesH.value = h; });
464+
useResizeObserverEffect({ elementRef: xAxisScales, callback: updateHeight, attr: 'height' });
477465
478466
const offsetY = computed(() => {
479467
let h = 0;

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

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
<script setup>
2-
import { ref, computed, onMounted, onBeforeUnmount, watch, defineAsyncComponent, shallowRef, watchEffect, toRefs, nextTick } from "vue";
2+
import {
3+
ref,
4+
computed,
5+
onMounted,
6+
onBeforeUnmount,
7+
watch,
8+
defineAsyncComponent,
9+
shallowRef,
10+
toRefs,
11+
nextTick
12+
} from "vue";
313
import {
414
applyDataLabel,
515
calculateNiceScale,
@@ -34,6 +44,7 @@ import { useNestedProp } from "../useNestedProp";
3444
import { useUserOptionState } from "../useUserOptionState";
3545
import { useChartAccessibility } from "../useChartAccessibility";
3646
import { useTimeLabelCollision } from "../useTimeLabelCollider";
47+
import { useResizeObserverEffect } from "../useResizeObserverEffect";
3748
import themes from "../themes.json";
3849
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
3950
import Legend from "../atoms/Legend.vue"; // Must be ready in responsive mode
@@ -355,22 +366,8 @@ const WIDTH = computed(() => chartDimensions.value.width);
355366
const HEIGHT = computed(() => chartDimensions.value.height);
356367
357368
const topLabelsHeight = ref(0);
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-
});
369+
const updateTopLabelsHeight = throttle((h) => { topLabelsHeight.value = h }, 100);
370+
useResizeObserverEffect({ elementRef: xAxisLabels, callback: updateTopLabelsHeight, attr: 'height' });
374371
375372
const drawingArea = computed(() => {
376373
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: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
shallowRef,
1010
toRefs,
1111
watch,
12-
watchEffect,
1312
} from "vue";
1413
import * as detector from "../chartDetector";
1514
import {
@@ -47,6 +46,7 @@ import { useResponsive } from "../useResponsive";
4746
import { useTimeLabels } from "../useTimeLabels";
4847
import { useChartAccessibility } from "../useChartAccessibility";
4948
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,22 +738,8 @@ function getScaleLabelX() {
738738
}
739739
740740
const timeLabelsHeight = ref(0);
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-
})
741+
const updateHeight = throttle((h) => { timeLabelsHeight.value = h }, 100);
742+
useResizeObserverEffect({ elementRef: timeLabelsEls, callback: updateHeight, attr: 'height' });
757743
758744
onBeforeUnmount(() => {
759745
timeLabelsHeight.value = 0

0 commit comments

Comments
 (0)