Skip to content

Commit c875789

Browse files
graphierosgraphieros
committed
Improvement - VueUiXy - Strip out unnecessary dom nodes
1 parent 7cda21c commit c875789

File tree

1 file changed

+40
-40
lines changed

1 file changed

+40
-40
lines changed

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

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -642,7 +642,7 @@
642642
stroke-linejoin="round"
643643
/>
644644

645-
<g v-for="(plot, j) in serie.plots"
645+
<template v-for="(plot, j) in serie.plots"
646646
:key="`circle_line_${i}_${j}`">
647647
<Shape
648648
:data-cy="`xy-plot-${i}-${j}`"
@@ -662,8 +662,8 @@
662662
</div>
663663
</foreignObject>
664664
</template>
665+
</template>
665666

666-
</g >
667667
<g :data-cy="`xy-line-progression-${i}`" v-if="Object.hasOwn(serie, 'useProgression') && serie.useProgression === true && !isNaN(calcLinearProgression(serie.plots).trend)">
668668
<defs>
669669
<marker :id="`line_arrow_${i}`" :markerWidth="7" :markerHeight="7"
@@ -705,8 +705,8 @@
705705

706706
<!-- X LABELS BAR -->
707707
<g v-if="(FINAL_CONFIG.bar.labels.show || FINAL_CONFIG.bar.serieName.show) && mutableConfig.dataLabels.show">
708-
<g v-for="(serie, i) in barSet" :key="`xLabel_bar_${i}`" :class="`xLabel_bar_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
709-
<g v-for="(plot, j) in serie.plots" :key="`xLabel_bar_${i}_${j}`">
708+
<template v-for="(serie, i) in barSet" :key="`xLabel_bar_${i}`" :class="`xLabel_bar_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
709+
<template v-for="(plot, j) in serie.plots" :key="`xLabel_bar_${i}_${j}`">
710710
<text
711711
:data-cy="`xy-bar-label-x-${i}-${j}`"
712712
v-if="plot && (!Object.hasOwn(serie, 'dataLabels') || ((serie.dataLabels === true || (selectedSerieIndex !== null && selectedSerieIndex === j) || (selectedMinimapIndex !== null && selectedMinimapIndex === j)))) && FINAL_CONFIG.bar.labels.show"
@@ -743,14 +743,14 @@
743743
>
744744
{{ FINAL_CONFIG.bar.serieName.useAbbreviation ? abbreviate({ source: serie.name, length: FINAL_CONFIG.bar.serieName.abbreviationSize}) : serie.name }}
745745
</text>
746-
</g>
747-
</g>
746+
</template>
747+
</template>
748748
</g>
749749

750750
<!-- X LABELS PLOT -->
751751
<g v-if="FINAL_CONFIG.plot.labels.show && mutableConfig.dataLabels.show">
752-
<g v-for="(serie, i) in plotSet" :key="`xLabel_plot_${i}`" :class="`xLabel_plot_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
753-
<g v-for="(plot, j) in serie.plots" :key="`xLabel_plot_${i}_${j}`">
752+
<template v-for="(serie, i) in plotSet" :key="`xLabel_plot_${i}`" :class="`xLabel_plot_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
753+
<template v-for="(plot, j) in serie.plots" :key="`xLabel_plot_${i}_${j}`">
754754
<text
755755
:data-cy="`xy-plot-label-x-${i}-${j}`"
756756
v-if="plot && !Object.hasOwn(serie, 'dataLabels') || (serie.dataLabels === true || (selectedSerieIndex !== null && selectedSerieIndex === j) || (selectedMinimapIndex !== null && selectedMinimapIndex === j))"
@@ -802,14 +802,14 @@
802802
{{ serie.name }}
803803
</div>
804804
</foreignObject>
805-
</g>
806-
</g>
805+
</template>
806+
</template>
807807
</g>
808808

809809
<!-- X LABELS LINE -->
810810
<g v-if="FINAL_CONFIG.line.labels.show && mutableConfig.dataLabels.show">
811-
<g v-for="(serie, i) in lineSet" :key="`xLabel_line_${i}`" :class="`xLabel_line_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
812-
<g v-for="(plot, j) in serie.plots" :key="`xLabel_line_${i}_${j}`">
811+
<template v-for="(serie, i) in lineSet" :key="`xLabel_line_${i}`" :class="`xLabel_line_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
812+
<template v-for="(plot, j) in serie.plots" :key="`xLabel_line_${i}_${j}`">
813813
<text
814814
:data-cy="`xy-line-label-x-${i}-${j}`"
815815
v-if="plot && !Object.hasOwn(serie, 'dataLabels') || (serie.dataLabels === true || (selectedSerieIndex !== null && selectedSerieIndex === j) || (selectedMinimapIndex !== null && selectedMinimapIndex === j))"
@@ -861,13 +861,13 @@
861861
{{ serie.name }}
862862
</div>
863863
</foreignObject>
864-
</g>
865-
</g>
864+
</template>
865+
</template>
866866
</g>
867867

868868
<!-- SERIE NAME TAGS : LINES -->
869-
<g v-for="(serie, i) in lineSet" :key="`xLabel_line_${i}`" :class="`xLabel_line_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
870-
<g v-for="(plot, j) in serie.plots" :key="`xLabel_line_${i}_${j}`">
869+
<template v-for="(serie, i) in lineSet" :key="`xLabel_line_${i}`" :class="`xLabel_line_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
870+
<template v-for="(plot, j) in serie.plots" :key="`xLabel_line_${i}_${j}`">
871871
<text
872872
v-if="plot && j === 0 && serie.showSerieName && serie.showSerieName === 'start'"
873873
:x="plot.x - fontSizes.plotLabels"
@@ -900,12 +900,12 @@
900900
maxWords: 2
901901
})"
902902
/>
903-
</g>
904-
</g>
903+
</template>
904+
</template>
905905

906906
<!-- SERIE NAME TAGS : PLOTS -->
907-
<g v-for="(serie, i) in plotSet" :key="`xLabel_plot_${i}`" :class="`xLabel_plot_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
908-
<g v-for="(plot, j) in serie.plots" :key="`xLabel_plot_${i}_${j}`">
907+
<template v-for="(serie, i) in plotSet" :key="`xLabel_plot_${i}`" :class="`xLabel_plot_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
908+
<template v-for="(plot, j) in serie.plots" :key="`xLabel_plot_${i}_${j}`">
909909
<text
910910
v-if="plot && j === 0 && serie.showSerieName && serie.showSerieName === 'start'"
911911
:x="plot.x - fontSizes.plotLabels"
@@ -938,8 +938,8 @@
938938
maxWords: 2
939939
})"
940940
/>
941-
</g>
942-
</g>
941+
</template>
942+
</template>
943943

944944
<!-- Y LABELS MOUSE TRAPS -->
945945
<template v-if="mutableConfig.useIndividualScale && !mutableConfig.isStacked">
@@ -979,12 +979,12 @@
979979
>
980980
{{ FINAL_CONFIG.chart.grid.labels.axis.xLabel }}
981981
</text>
982-
</g>
982+
</g>v-for="(label, i) in timeLabels" :key="`time_label_${i}`"
983983

984984
<!-- TIME LABELS -->
985985
<g v-if="FINAL_CONFIG.chart.grid.labels.xAxisLabels.show">
986986
<template v-if="$slots['time-label']">
987-
<g v-for="(label, i) in timeLabels" :key="`time_label_${i}`">
987+
<template v-for="(label, i) in timeLabels" :key="`time_label_${i}`">
988988
<slot name="time-label" v-bind="{
989989
x: drawingArea.left + (drawingArea.width / maxSeries) * i + (drawingArea.width / maxSeries / 2),
990990
y: drawingArea.bottom + fontSizes.xAxis * 1.3 + FINAL_CONFIG.chart.grid.labels.xAxisLabels.yOffset,
@@ -999,7 +999,7 @@
999999
(label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && selectedSerieIndex === i && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) ||
10001000
(label && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo && (i % Math.floor((this.slicer.end - this.slicer.start) / FINAL_CONFIG.chart.grid.labels.xAxisLabels.modulo) === 0))
10011001
}" />
1002-
</g>
1002+
</template>
10031003
</template>
10041004
<template v-else>
10051005
<g v-for="(label, i) in timeLabels" :key="`time_label_${i}`">
@@ -1028,24 +1028,24 @@
10281028

10291029
<!-- TOOLTIP TRAPS -->
10301030
<g>
1031-
<g v-for="(_, i) in maxSeries" :key="`tooltip_trap_${i}`">
1032-
<rect
1033-
:data-cy="`xy-tooltip-trap-${i}`"
1034-
data-cy-trap
1035-
:x="drawingArea.left + (drawingArea.width / maxSeries) * i"
1036-
:y="drawingArea.top"
1037-
:height="drawingArea.height < 0 ? 10 : drawingArea.height"
1038-
:width="drawingArea.width / maxSeries < 0 ? 0.00001 : drawingArea.width / maxSeries"
1039-
fill="transparent"
1040-
@mouseenter="toggleTooltipVisibility(true, i)"
1041-
@mouseleave="toggleTooltipVisibility(false)"
1042-
@click="selectX(i)"
1043-
/>
1044-
</g>
1031+
<rect
1032+
v-for="(_, i) in maxSeries" :key="`tooltip_trap_${i}`"
1033+
:data-cy="`xy-tooltip-trap-${i}`"
1034+
data-cy-trap
1035+
:x="drawingArea.left + (drawingArea.width / maxSeries) * i"
1036+
:y="drawingArea.top"
1037+
:height="drawingArea.height < 0 ? 10 : drawingArea.height"
1038+
:width="drawingArea.width / maxSeries < 0 ? 0.00001 : drawingArea.width / maxSeries"
1039+
fill="transparent"
1040+
@mouseenter="toggleTooltipVisibility(true, i)"
1041+
@mouseleave="toggleTooltipVisibility(false)"
1042+
@click="selectX(i)"
1043+
/>
10451044
</g>
10461045

1046+
10471047
<!-- TIME TAG -->
1048-
<g v-if="FINAL_CONFIG.chart.timeTag.show && (![null, undefined].includes(selectedSerieIndex) || ![null, undefined].includes(selectedMinimapIndex) )">
1048+
<g v-if="FINAL_CONFIG.chart.timeTag.show && (![null, undefined].includes(selectedSerieIndex) || ![null, undefined].includes(selectedMinimapIndex) )" style="pointer-events:none">
10491049
<foreignObject
10501050
:x="drawingArea.left + (drawingArea.width / maxSeries) * ((selectedSerieIndex !== null ? selectedSerieIndex : 0) || (selectedMinimapIndex !== null ? selectedMinimapIndex : 0)) - 100 + (drawingArea.width / maxSeries / 2)"
10511051
:y="drawingArea.bottom"

0 commit comments

Comments
 (0)