Skip to content

Commit e933db8

Browse files
graphierosgraphieros
committed
Improvement - VueUiXy - Improve visibility of progression lines and labels
1 parent 88d4d45 commit e933db8

File tree

1 file changed

+164
-29
lines changed

1 file changed

+164
-29
lines changed

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

Lines changed: 164 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3306,21 +3306,64 @@ defineExpose({
33063306
<g :data-cy="`xy-bar-progression-${i}`"
33073307
v-if="Object.hasOwn(serie, 'useProgression') && serie.useProgression === true && !isNaN(calcLinearProgression(serie.plots).trend)">
33083308
<defs>
3309-
<marker :id="`bar_arrow_${i}`" :markerWidth="7" :markerHeight="7" refX="0"
3310-
:refY="7 / 2" orient="auto">
3311-
<polygon :points="`0 0, ${7} ${7 / 2}, 0 ${7}`" :fill="serie.color" />
3309+
<marker
3310+
:id="`bar_arrow_${i}`"
3311+
markerWidth="9"
3312+
markerHeight="9"
3313+
viewBox="-1 -1 9 9"
3314+
markerUnits="userSpaceOnUse"
3315+
refX="7"
3316+
:refY="7 / 2"
3317+
orient="auto"
3318+
overflow="visible"
3319+
>
3320+
<polygon
3321+
points="0,0 7,3.5 0,7"
3322+
:fill="serie.color"
3323+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3324+
stroke-width="1"
3325+
stroke-linejoin="round"
3326+
/>
33123327
</marker>
33133328
</defs>
33143329
<line v-if="serie.plots.length > 1"
33153330
:x1="calcLinearProgression(serie.plots).x1 + calcRectWidth()"
33163331
:x2="calcLinearProgression(serie.plots).x2 + calcRectWidth()"
33173332
:y1="forceValidValue(calcLinearProgression(serie.plots).y1)"
3318-
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)" :stroke-width="1"
3319-
:stroke="serie.color" :stroke-dasharray="2" :marker-end="`url(#bar_arrow_${i})`" />
3320-
<text v-if="serie.plots.length > 1" :data-cy="`xy-bar-progression-label-${i}`"
3321-
text-anchor="middle" :x="calcLinearProgression(serie.plots).x2 + calcRectWidth()"
3322-
:y="calcLinearProgression(serie.plots).y2 - 6" :font-size="fontSizes.plotLabels"
3323-
:fill="serie.color">
3333+
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)"
3334+
:stroke-width="2"
3335+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3336+
:stroke-dasharray="2"
3337+
stroke-linecap="round"
3338+
stroke-linejoin="round"
3339+
:marker-end="`url(#bar_arrow_${i})`"
3340+
/>
3341+
<line v-if="serie.plots.length > 1"
3342+
:x1="calcLinearProgression(serie.plots).x1 + calcRectWidth()"
3343+
:x2="calcLinearProgression(serie.plots).x2 + calcRectWidth()"
3344+
:y1="forceValidValue(calcLinearProgression(serie.plots).y1)"
3345+
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)"
3346+
:stroke-width="1"
3347+
:stroke="serie.color"
3348+
:stroke-dasharray="2"
3349+
stroke-linecap="round"
3350+
stroke-linejoin="round"
3351+
:marker-end="`url(#bar_arrow_${i})`"
3352+
/>
3353+
<text
3354+
v-if="serie.plots.length > 1"
3355+
:data-cy="`xy-bar-progression-label-${i}`"
3356+
text-anchor="middle"
3357+
:x="calcLinearProgression(serie.plots).x2 + calcRectWidth()"
3358+
:y="Math.max(calcLinearProgression(serie.plots).y2 - 12, drawingArea.top)"
3359+
:font-size="fontSizes.plotLabels"
3360+
:fill="serie.color"
3361+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3362+
:stroke-width="4"
3363+
stroke-linecap="round"
3364+
stroke-linejoin="round"
3365+
paint-order="stroke fill"
3366+
>
33243367
{{ dataLabel({
33253368
v: calcLinearProgression(serie.plots).trend * 100,
33263369
s: '%',
@@ -3472,20 +3515,66 @@ defineExpose({
34723515
<g :data-cy="`xy-plot-progression-${i}`"
34733516
v-if="Object.hasOwn(serie, 'useProgression') && serie.useProgression === true && !isNaN(calcLinearProgression(serie.plots).trend)">
34743517
<defs>
3475-
<marker :id="`plot_arrow_${i}`" :markerWidth="7" :markerHeight="7" refX="0" :refY="7 / 2"
3476-
orient="auto">
3477-
<polygon :points="`0 0, ${7} ${7 / 2}, 0 ${7}`" :fill="serie.color" />
3518+
<marker
3519+
:id="`plot_arrow_${i}`"
3520+
markerWidth="9"
3521+
markerHeight="9"
3522+
viewBox="-1 -1 9 9"
3523+
markerUnits="userSpaceOnUse"
3524+
refX="7"
3525+
:refY="7 / 2"
3526+
orient="auto"
3527+
overflow="visible"
3528+
>
3529+
<polygon
3530+
points="0,0 7,3.5 0,7"
3531+
:fill="serie.color"
3532+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3533+
stroke-width="1"
3534+
stroke-linejoin="round"
3535+
/>
34783536
</marker>
34793537
</defs>
3480-
<line v-if="serie.plots.length > 1" :x1="calcLinearProgression(serie.plots).x1"
3538+
<line
3539+
v-if="serie.plots.length > 1"
3540+
:x1="calcLinearProgression(serie.plots).x1"
34813541
:x2="calcLinearProgression(serie.plots).x2"
34823542
:y1="forceValidValue(calcLinearProgression(serie.plots).y1)"
3483-
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)" :stroke-width="1"
3484-
:stroke="serie.color" :stroke-dasharray="2" :marker-end="`url(#plot_arrow_${i})`" />
3485-
<text v-if="serie.plots.length > 1" :data-cy="`xy-plot-progression-label-${i}`"
3486-
text-anchor="middle" :x="calcLinearProgression(serie.plots).x2"
3487-
:y="calcLinearProgression(serie.plots).y2 - 6" :font-size="fontSizes.plotLabels"
3488-
:fill="serie.color">
3543+
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)"
3544+
:stroke-width="2"
3545+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3546+
:stroke-dasharray="2"
3547+
stroke-linecap="round"
3548+
stroke-linejoin="round"
3549+
:marker-end="`url(#plot_arrow_${i})`"
3550+
/>
3551+
<line
3552+
v-if="serie.plots.length > 1"
3553+
:x1="calcLinearProgression(serie.plots).x1"
3554+
:x2="calcLinearProgression(serie.plots).x2"
3555+
:y1="forceValidValue(calcLinearProgression(serie.plots).y1)"
3556+
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)"
3557+
:stroke-width="1"
3558+
:stroke="serie.color"
3559+
:stroke-dasharray="2"
3560+
stroke-linecap="round"
3561+
stroke-linejoin="round"
3562+
:marker-end="`url(#plot_arrow_${i})`"
3563+
/>
3564+
<text
3565+
v-if="serie.plots.length > 1"
3566+
:data-cy="`xy-plot-progression-label-${i}`"
3567+
text-anchor="middle"
3568+
:x="calcLinearProgression(serie.plots).x2"
3569+
:y="calcLinearProgression(serie.plots).y2 - 6"
3570+
:font-size="fontSizes.plotLabels"
3571+
:fill="serie.color"
3572+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3573+
:stroke-width="4"
3574+
stroke-linecap="round"
3575+
stroke-linejoin="round"
3576+
paint-order="stroke fill"
3577+
>
34893578
{{ dataLabel({
34903579
v: calcLinearProgression(serie.plots).trend * 100,
34913580
s: '%',
@@ -3595,20 +3684,66 @@ defineExpose({
35953684
<g :data-cy="`xy-line-progression-${i}`"
35963685
v-if="Object.hasOwn(serie, 'useProgression') && serie.useProgression === true && !isNaN(calcLinearProgression(serie.plots).trend)">
35973686
<defs>
3598-
<marker :id="`line_arrow_${i}`" :markerWidth="7" :markerHeight="7" refX="0" :refY="7 / 2"
3599-
orient="auto">
3600-
<polygon :points="`0 0, ${7} ${7 / 2}, 0 ${7}`" :fill="serie.color" />
3687+
<marker
3688+
:id="`line_arrow_${i}`"
3689+
markerWidth="9"
3690+
markerHeight="9"
3691+
viewBox="-1 -1 9 9"
3692+
markerUnits="userSpaceOnUse"
3693+
refX="7"
3694+
:refY="7 / 2"
3695+
orient="auto"
3696+
overflow="visible"
3697+
>
3698+
<polygon
3699+
points="0,0 7,3.5 0,7"
3700+
:fill="serie.color"
3701+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3702+
stroke-width="1"
3703+
stroke-linejoin="round"
3704+
/>
36013705
</marker>
36023706
</defs>
3603-
<line v-if="serie.plots.length > 1" :x1="calcLinearProgression(serie.plots).x1"
3707+
<line
3708+
v-if="serie.plots.length > 1"
3709+
:x1="calcLinearProgression(serie.plots).x1"
36043710
:x2="calcLinearProgression(serie.plots).x2"
36053711
:y1="forceValidValue(calcLinearProgression(serie.plots).y1)"
3606-
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)" :stroke-width="1"
3607-
:stroke="serie.color" :stroke-dasharray="2" :marker-end="`url(#line_arrow_${i})`" />
3608-
<text v-if="serie.plots.length > 1" :data-cy="`xy-line-progression-label-${i}`"
3609-
text-anchor="middle" :x="calcLinearProgression(serie.plots).x2"
3610-
:y="calcLinearProgression(serie.plots).y2 - 6" :font-size="fontSizes.plotLabels"
3611-
:fill="serie.color">
3712+
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)"
3713+
:stroke-width="1"
3714+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3715+
:stroke-dasharray="2"
3716+
stroke-linecap="round"
3717+
stroke-linejoin="round"
3718+
:marker-end="`url(#line_arrow_${i})`"
3719+
/>
3720+
<line
3721+
v-if="serie.plots.length > 1"
3722+
:x1="calcLinearProgression(serie.plots).x1"
3723+
:x2="calcLinearProgression(serie.plots).x2"
3724+
:y1="forceValidValue(calcLinearProgression(serie.plots).y1)"
3725+
:y2="forceValidValue(calcLinearProgression(serie.plots).y2)"
3726+
:stroke-width="1"
3727+
:stroke="serie.color"
3728+
:stroke-dasharray="2"
3729+
stroke-linecap="round"
3730+
stroke-linejoin="round"
3731+
:marker-end="`url(#line_arrow_${i})`"
3732+
/>
3733+
<text
3734+
v-if="serie.plots.length > 1"
3735+
:data-cy="`xy-line-progression-label-${i}`"
3736+
text-anchor="middle"
3737+
:x="calcLinearProgression(serie.plots).x2"
3738+
:y="calcLinearProgression(serie.plots).y2 - 6"
3739+
:font-size="fontSizes.plotLabels"
3740+
:fill="serie.color"
3741+
:stroke="FINAL_CONFIG.chart.backgroundColor"
3742+
:stroke-width="4"
3743+
stroke-linecap="round"
3744+
stroke-linejoin="round"
3745+
paint-order="stroke fill"
3746+
>
36123747
{{ dataLabel({
36133748
v: calcLinearProgression(serie.plots).trend * 100,
36143749
s: '%',

0 commit comments

Comments
 (0)