Skip to content

Commit a6b9496

Browse files
graphierosgraphieros
committed
Modification - General - Refer to FINAL_DATASET instead of props.dataset to avoid potential errors
1 parent 4bbf070 commit a6b9496

File tree

7 files changed

+67
-25
lines changed

7 files changed

+67
-25
lines changed

‎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)