Skip to content

Commit 1f7892d

Browse files
graphierosgraphieros
committed
Merge remote-tracking branch 'origin' into next
2 parents 20b2da5 + eb8d96a commit 1f7892d

File tree

10 files changed

+81
-53
lines changed

10 files changed

+81
-53
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": "3.1.17",
4+
"version": "3.1.18",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
77
"keywords": [

‎src/atoms/SlicerPreview.vue‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -230,21 +230,6 @@ const end = computed({
230230
}
231231
});
232232
233-
onMounted(() => {
234-
const updateWidth = () => {
235-
if (!zoomWrapper.value) return;
236-
wrapperWidth.value = zoomWrapper.value.getBoundingClientRect().width;
237-
};
238-
updateWidth();
239-
240-
const onWinResize = throttle(updateWidth, 50);
241-
window.addEventListener('resize', onWinResize);
242-
243-
onBeforeUnmount(() => {
244-
window.removeEventListener('resize', onWinResize);
245-
});
246-
});
247-
248233
let _commitTimeout = null;
249234
250235
function commitImmediately() {
@@ -370,16 +355,17 @@ const resizeObserver = ref(null);
370355
onMounted(() => {
371356
if (hasMinimap.value) {
372357
const handleResize = throttle(() => {
373-
if (!minimapWrapper.value) return;
374-
const { width, height } = useResponsive({ chart: minimapWrapper.value });
375-
const W = Math.max(0, Math.round(width));
376-
const H = Math.max(0, Math.round(height - 47));
377-
378-
if (W !== svgMinimap.value.width || H !== svgMinimap.value.height) {
379-
svgMinimap.value.width = W;
380-
svgMinimap.value.height = H;
381-
}
382-
}, 50);
358+
if (!minimapWrapper.value) return;
359+
const { width, height } = useResponsive({ chart: minimapWrapper.value });
360+
361+
const W = Math.max(0, Math.round(width));
362+
const H = Math.max(0, Math.round(height - 47));
363+
364+
if (W !== svgMinimap.value.width || H !== svgMinimap.value.height) {
365+
svgMinimap.value.width = W;
366+
svgMinimap.value.height = H;
367+
}
368+
}, 0);
383369
384370
resizeObserver.value = new ResizeObserver(handleResize);
385371
resizeObserver.value.observe(minimapWrapper.value);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -916,7 +916,7 @@ defineExpose({
916916

917917
<text
918918
data-cy="vue-ui-3d-bar-simple-datalabel"
919-
v-if="FINAL_CONFIG.style.chart.dataLabel.show && ![null, undefined].includes(props.dataset.percentage) && [null, undefined].includes(props.dataset.series)"
919+
v-if="FINAL_CONFIG.style.chart.dataLabel.show && ![null, undefined].includes(FINAL_DATASET.percentage) && [null, undefined].includes(FINAL_DATASET.series)"
920920
:x="svg.width / 2"
921921
:y="svg.top - FINAL_CONFIG.style.chart.dataLabel.fontSize / 2"
922922
:font-size="FINAL_CONFIG.style.chart.dataLabel.fontSize"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -654,8 +654,8 @@ defineExpose({
654654
...FINAL_CONFIG.style.chart.title.subtitle
655655
}
656656
}">
657-
<span v-if="FINAL_CONFIG.translations.base && dataset.base">
658-
{{ FINAL_CONFIG.translations.base }}: {{ dataset.base }}
657+
<span v-if="FINAL_CONFIG.translations.base && FINAL_DATASET.base">
658+
{{ FINAL_CONFIG.translations.base }}: {{ FINAL_DATASET.base }}
659659
</span>
660660
</Title>
661661
</div>

‎src/components/vue-ui-spark-trend.vue‎

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import {
33
computed,
44
defineAsyncComponent,
5+
nextTick,
56
onMounted,
67
ref,
78
toRefs,
@@ -54,6 +55,8 @@ const svgRef = ref(null);
5455
const source = ref(null);
5556
const resizeObserver = ref(null);
5657
const observedEl = ref(null);
58+
const isAnimating = ref(false);
59+
const raf = ref(null);
5760
5861
const uid = ref(createUid());
5962
@@ -109,18 +112,6 @@ watch(() => props.config, (_newCfg) => {
109112
prepareChart();
110113
}, { deep: true });
111114
112-
watch(() => FINAL_DATASET.value, (_) => {
113-
safeDatasetCopy.value = largestTriangleThreeBucketsArray({
114-
data: FINAL_DATASET.value,
115-
threshold: FINAL_CONFIG.value.downsample.threshold
116-
}).map(v => {
117-
return ![undefined, Infinity, -Infinity, null, NaN].includes(v) ? v : null
118-
});
119-
120-
animateChart();
121-
fitText('.vue-ui-sparktrend-progress-label', 6);
122-
}, { deep: true })
123-
124115
function sanitize(arr) {
125116
return arr.map(v => checkNaN(v))
126117
}
@@ -136,9 +127,43 @@ const safeDatasetCopy = ref(largestTriangleThreeBucketsArray({
136127
}
137128
}));
138129
139-
const isAnimating = ref(false);
130+
watch(downsampled, (ds) => {
131+
if (raf.value) {
132+
cancelAnimationFrame(raf.value);
133+
raf.value = null;
134+
}
140135
141-
const raf = ref(null);
136+
if (FINAL_CONFIG.value.style.animation.show) {
137+
safeDatasetCopy.value = Array(ds.length).fill(null);
138+
} else {
139+
safeDatasetCopy.value = ds.map(v =>
140+
![undefined, Infinity, -Infinity, null].includes(v) && !Number.isNaN(v) ? v : null
141+
);
142+
}
143+
144+
animateChart();
145+
nextTick(() => fitText('.vue-ui-sparktrend-progress-label', 6));
146+
}, { deep: true, immediate: true });
147+
148+
watch(
149+
() => JSON.stringify(props.dataset),
150+
() => {
151+
if (raf.value) {
152+
cancelAnimationFrame(raf.value);
153+
raf.value = null;
154+
}
155+
manualLoading.value = objectIsEmpty(props.dataset);
156+
157+
const ds = downsampled.value;
158+
safeDatasetCopy.value = FINAL_CONFIG.value.style.animation.show
159+
? Array(ds.length).fill(null)
160+
: ds.map(v => (Number.isFinite(v) ? v : null));
161+
162+
animateChart();
163+
nextTick(() => fitText('.vue-ui-sparktrend-progress-label', 6));
164+
},
165+
{ deep: false, immediate: true }
166+
);
142167
143168
function animateChart() {
144169
let fps = FINAL_CONFIG.value.style.animation.animationFrames;
@@ -242,11 +267,27 @@ const drawingArea = computed(() => {
242267
});
243268
244269
const extremes = computed(() => {
245-
const ds = sanitize(downsampled.value);
246-
return {
247-
max: Math.max(...ds.map(v => checkNaN(v))),
248-
min: Math.min(...ds.map(v => checkNaN(v)))
270+
const ds = sanitize(downsampled.value).filter(Number.isFinite);
271+
if (!ds.length) return { max: 0, min: 0 };
272+
let max = ds[0], min = ds[0];
273+
for (let i = 1; i < ds.length; i++) {
274+
const v = ds[i];
275+
if (v > max) max = v;
276+
if (v < min) min = v;
249277
}
278+
return { max, min };
279+
});
280+
281+
const datasetKey = computed(() => {
282+
const ds = downsampled.value;
283+
const last = ds.length ? ds[ds.length - 1] : 'x';
284+
return [
285+
uid.value,
286+
ds.length,
287+
Number.isFinite(last) ? last : 'x',
288+
FINAL_CONFIG.value.downsample.threshold,
289+
FINAL_CONFIG.value.style.line.smooth ? 's' : 'l'
290+
].join('-');
250291
});
251292
252293
const absoluteMin = computed(() => {
@@ -347,7 +388,7 @@ const { fitText } = useFitSvgText({
347388

348389
<template>
349390
<div ref="sparkTrendChart" class="vue-ui-spark-trend" :id="uid" :style="`width:100%;font-family:${FINAL_CONFIG.style.fontFamily};background:${FINAL_CONFIG.style.backgroundColor}`">
350-
<svg ref="svgRef" :xmlns="XMLNS" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`width:100%;background:transparent;overflow:visible`">
391+
<svg :key="datasetKey" ref="svgRef" :xmlns="XMLNS" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`width:100%;background:transparent;overflow:visible`">
351392
<PackageVersion />
352393

353394
<!-- BACKGROUND SLOT -->

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ function onTrapLeave(datapoint, index) {
324324
<template v-for="(bar, i) in drawableDataset">
325325
<div
326326
data-cy="datapoint-wrapper"
327-
:style="`display:flex !important;${['left', 'right'].includes(FINAL_CONFIG.style.labels.name.position) ? `flex-direction: ${FINAL_CONFIG.style.labels.name.position === 'right' ? 'row-reverse' : 'row'} !important` : 'flex-direction:column !important'};gap:${FINAL_CONFIG.style.gap}px !important;align-items:center;${dataset.length > 0 && i !== dataset.length - 1 ? 'margin-bottom:6px' : ''}`"
327+
:style="`display:flex !important;${['left', 'right'].includes(FINAL_CONFIG.style.labels.name.position) ? `flex-direction: ${FINAL_CONFIG.style.labels.name.position === 'right' ? 'row-reverse' : 'row'} !important` : 'flex-direction:column !important'};gap:${FINAL_CONFIG.style.gap}px !important;align-items:center;${FINAL_DATASET.length > 0 && i !== FINAL_DATASET.length - 1 ? 'margin-bottom:6px' : ''}`"
328328
@click="selectDatapoint(bar, i)"
329329
@mouseenter="onTrapEnter(bar, i)"
330330
@mouseleave="onTrapLeave(bar, i)"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const { loading, FINAL_DATASET } = useLoading({
8080
})
8181
})
8282
83-
const { svgRef } = useChartAccessibility({ config: { text: props.dataset.title } });
83+
const { svgRef } = useChartAccessibility({ config: { text: props.dataset?.title || '' } });
8484
8585
function prepareConfig() {
8686
const mergedConfig = useNestedProp({

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -662,7 +662,7 @@ function selectDatapoint(datapoint, index) {
662662
<g v-if="FINAL_CONFIG.style.plot.show" v-for="(plot, i) in mutableDataset">
663663
<circle
664664
data-cy="selection-plot"
665-
v-if="(selectedPlot && plot.id === selectedPlot.id) || selectedIndex === i || dataset.length === 1"
665+
v-if="(selectedPlot && plot.id === selectedPlot.id) || selectedIndex === i || FINAL_DATASET.length === 1"
666666
:cx="plot.x"
667667
:cy="plot.y"
668668
:r="FINAL_CONFIG.style.plot.radius"

‎src/lib.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1415,6 +1415,7 @@ export function objectIsEmpty(obj) {
14151415
if (Array.isArray(obj)) {
14161416
return obj.length === 0
14171417
}
1418+
if (!obj) return true;
14181419
return Object.keys(obj).length === 0
14191420
}
14201421

0 commit comments

Comments
 (0)