Skip to content

Commit 489de09

Browse files
graphierosgraphieros
committed
Fix - VueUiXy fixed harmless console errors when using time zoom with series that have no datapoint in the timeframe
1 parent 01f4458 commit 489de09

File tree

4 files changed

+57
-51
lines changed

4 files changed

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

‎src/App.vue‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -98,36 +98,33 @@ const dataset = ref([
9898
const dataset2 = ref([
9999
{
100100
name: "Series 1",
101-
series: [ 10, 20, 30, 20, 25, 12, 24, 21, 12, 22, 23, 24],
101+
series: [ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
102102
type: "line",
103-
scaleLabel: "label test",
104-
smooth: true,
105-
scaleSteps: 2
106-
},
107-
{
108-
name: "Series 2",
109-
series: [ 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
110-
type: "line",
111-
scaleLabel: "label test",
103+
color: "rgb(95,139,238)",
104+
useArea: true,
105+
shape: 'circle',
112106
scaleSteps: 2,
113-
dataLabels: false,
114-
useArea:true
115107
},
116108
{
117-
name: "Series 3",
118-
series: [ 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
109+
name: "Series 2",
110+
series: [ 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0],
119111
type: "line",
112+
color: "rgb(66,211,146)",
113+
useArea: true,
114+
smooth: true,
115+
useProgression: true,
120116
dataLabels: false,
121-
scaleLabel: "label test",
117+
shape: "triangle",
122118
scaleSteps: 2,
123-
124119
},
125120
{
126121
name: "Series 3",
127-
series: [ 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
122+
series: [ 64, 60, 52, 42, 30, 16, 0, -18, -38, -46, -50, -46, -38, -18, 0, 16, 30, 42, 52, 60, 64],
128123
type: "line",
129-
scaleLabel: "label test",
130-
scaleSteps: 2
124+
useArea: true,
125+
color: "rgb(255,100,0)",
126+
shape: "star",
127+
scaleSteps: 2,
131128
},
132129
]);
133130

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

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
</template>
7979
<template v-else-if="chartConfig.chart.grid.showHorizontalLines">
8080
<g v-for="grid in allScales">
81-
<template v-if="grid.id === selectedScale">
81+
<template v-if="grid.id === selectedScale && grid.yLabels.length">
8282
<line
8383
v-for="l in grid.yLabels"
8484
:x1="drawingArea.left"
@@ -90,7 +90,7 @@
9090
stroke-linecap="round"
9191
/>
9292
</template>
93-
<template v-else>
93+
<template v-else-if="grid.yLabels.length">
9494
<line
9595
v-for="l in grid.yLabels"
9696
:x1="drawingArea.left"
@@ -187,6 +187,7 @@
187187
</marker>
188188
</defs>
189189
<line
190+
v-if="serie.plots.length > 1"
190191
:x1="calcLinearProgression(serie.plots).x1"
191192
:x2="calcLinearProgression(serie.plots).x2"
192193
:y1="calcLinearProgression(serie.plots).y1"
@@ -197,6 +198,7 @@
197198
:marker-end="`url(#bar_arrow_${i})`"
198199
/>
199200
<text
201+
v-if="serie.plots.length > 1"
200202
:data-cy="`xy-bar-progression-label-${i}`"
201203
text-anchor="middle"
202204
:x="calcLinearProgression(serie.plots).x2"
@@ -241,6 +243,7 @@
241243
</marker>
242244
</defs>
243245
<line
246+
v-if="serie.plots.length > 1"
244247
:x1="calcLinearProgression(serie.plots).x1"
245248
:x2="calcLinearProgression(serie.plots).x2"
246249
:y1="calcLinearProgression(serie.plots).y1"
@@ -251,6 +254,7 @@
251254
:marker-end="`url(#plot_arrow_${i})`"
252255
/>
253256
<text
257+
v-if="serie.plots.length > 1"
254258
:data-cy="`xy-plot-progression-label-${i}`"
255259
text-anchor="middle"
256260
:x="calcLinearProgression(serie.plots).x2"
@@ -268,14 +272,14 @@
268272
</g>
269273

270274
<!-- LINES -->
271-
<g v-for="(serie, i) in lineSet" :key="`serie_line_${i}`" :class="`serie_line_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
272-
<g :data-cy="`xy-line-area-${i}`" v-if="serie.useArea">
273-
<path v-if="serie.smooth" :d="`M ${serie.plots[0].x},${drawingArea.bottom} ${serie.curve} L ${serie.plots.at(-1).x},${drawingArea.bottom} Z`" :fill="chartConfig.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : `${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
275+
<g v-for="(serie, i) in lineSet" :key="`serie_line_${i}`" :class="`serie_line_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
276+
<g :data-cy="`xy-line-area-${i}`" v-if="serie.useArea && serie.plots.length > 1">
277+
<path v-if="serie.smooth" :d="`M ${serie.plots[0].x},${chartConfig.chart.grid.labels.yAxis.stacked ? drawingArea.bottom - serie.yOffset : drawingArea.bottom} ${serie.curve} L ${serie.plots.at(-1).x},${chartConfig.chart.grid.labels.yAxis.stacked ? drawingArea.bottom - serie.yOffset : drawingArea.bottom} Z`" :fill="chartConfig.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : `${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
274278
<path v-else :d="`M${serie.area}Z`" :fill="chartConfig.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : `${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
275279
</g>
276280
<path
277281
:data-cy="`xy-line-area-path-${i}`"
278-
v-if="serie.smooth"
282+
v-if="serie.smooth && serie.plots.length > 1"
279283
:d="`M${serie.curve}`"
280284
:stroke="chartConfig.chart.backgroundColor"
281285
:stroke-width="chartConfig.line.strokeWidth + 1"
@@ -284,14 +288,14 @@
284288
/>
285289
<path
286290
:data-cy="`xy-line-area-path-${i}`"
287-
v-if="serie.smooth"
291+
v-if="serie.smooth && serie.plots.length > 1"
288292
:d="`M${serie.curve}`"
289293
:stroke="serie.color"
290294
:stroke-width="chartConfig.line.strokeWidth"
291295
:stroke-dasharray="serie.dashed ? chartConfig.line.strokeWidth * 2 : 0"
292296
fill="none"
293297
/>
294-
<g v-else>
298+
<g v-else-if="serie.plots.length > 1">
295299
<g v-for="(plot, j) in serie.plots" :key="`line_${i}_${j}`">
296300
<line
297301
:data-cy="`xy-line-segment-${i}-${j}`"
@@ -337,15 +341,16 @@
337341
</g >
338342
<g :data-cy="`xy-line-progression-${i}`" v-if="Object.hasOwn(serie, 'useProgression') && serie.useProgression === true && !isNaN(calcLinearProgression(serie.plots).trend)">
339343
<defs>
340-
<marker :id="`line_arrow_${i}`" :markerWidth="7" :markerHeight="7"
341-
refX="0" :refY="7/2" orient="auto">
342-
<polygon
343-
:points="`0 0, ${7} ${7/2}, 0 ${7}`"
344-
:fill="serie.color"
345-
/>
346-
</marker>
347-
</defs>
348-
<line
344+
<marker :id="`line_arrow_${i}`" :markerWidth="7" :markerHeight="7"
345+
refX="0" :refY="7/2" orient="auto">
346+
<polygon
347+
:points="`0 0, ${7} ${7/2}, 0 ${7}`"
348+
:fill="serie.color"
349+
/>
350+
</marker>
351+
</defs>
352+
<line
353+
v-if="serie.plots.length > 1"
349354
:x1="calcLinearProgression(serie.plots).x1"
350355
:x2="calcLinearProgression(serie.plots).x2"
351356
:y1="calcLinearProgression(serie.plots).y1"
@@ -356,6 +361,7 @@
356361
:marker-end="`url(#line_arrow_${i})`"
357362
/>
358363
<text
364+
v-if="serie.plots.length > 1"
359365
:data-cy="`xy-line-progression-label-${i}`"
360366
text-anchor="middle"
361367
:x="calcLinearProgression(serie.plots).x2"
@@ -537,17 +543,18 @@
537543
<!-- Y LABELS -->
538544
<g v-if="chartConfig.chart.grid.labels.show">
539545
<template v-if="chartConfig.chart.grid.labels.yAxis.useIndividualScale">
540-
<line
541-
v-for="el in allScales"
542-
:x1="el.x"
543-
:x2="el.x"
544-
:y1="chartConfig.chart.grid.labels.yAxis.stacked ? (drawingArea.bottom - el.yOffset - el.individualHeight) : drawingArea.top"
545-
:y2="chartConfig.chart.grid.labels.yAxis.stacked ? (drawingArea.bottom - el.yOffset) : drawingArea.bottom"
546-
:stroke="el.color"
547-
:stroke-width="chartConfig.chart.grid.stroke"
548-
stroke-linecap="round"
549-
:style="`opacity:${selectedScale ? selectedScale === el.id ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`"
550-
/>
546+
<g v-for="el in allScales">
547+
<line
548+
:x1="el.x"
549+
:x2="el.x"
550+
:y1="chartConfig.chart.grid.labels.yAxis.stacked ? (drawingArea.bottom - el.yOffset - el.individualHeight) : drawingArea.top"
551+
:y2="chartConfig.chart.grid.labels.yAxis.stacked ? (drawingArea.bottom - el.yOffset) : drawingArea.bottom"
552+
:stroke="el.color"
553+
:stroke-width="chartConfig.chart.grid.stroke"
554+
stroke-linecap="round"
555+
:style="`opacity:${selectedScale ? selectedScale === el.id ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`"
556+
/>
557+
</g>
551558
<g v-for="el in allScales" :style="`opacity:${selectedScale ? selectedScale === el.id ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`">
552559
<text
553560
:fill="el.color"
@@ -584,7 +591,7 @@
584591
<template v-else>
585592
<g v-for="(yLabel, i) in yLabels" :key="`yLabel_${i}`">
586593
<line
587-
v-if="yLabel.value >= niceScale.min && yLabel.value <= niceScale.max"
594+
v-if="canShowValue(yLabel) && yLabel.value >= niceScale.min && yLabel.value <= niceScale.max"
588595
:x1="drawingArea.left"
589596
:x2="drawingArea.left - 5"
590597
:y1="yLabel.y"
@@ -1665,6 +1672,7 @@ export default {
16651672
error,
16661673
objectIsEmpty,
16671674
createArea(plots) {
1675+
if(!plots[0]) return [-10,-10, '', -10, -10];
16681676
const start = { x: plots[0].x, y: this.zero };
16691677
const end = { x: plots.at(-1).x, y: this.zero };
16701678
const path = [];
@@ -1674,6 +1682,7 @@ export default {
16741682
return [ start.x, start.y, ...path, end.x, end.y].toString();
16751683
},
16761684
createIndividualArea(plots, zero) {
1685+
if(!plots[0]) return [-10,-10, '', -10, -10];
16771686
const start = { x: plots[0].x, y: zero };
16781687
const end = { x: plots.at(-1).x, y: zero };
16791688
const path = [];

0 commit comments

Comments
 (0)