Skip to content

Commit 41a731c

Browse files
graphierosgraphieros
committed
Improvement - VueUiScatter - Added optional selectors on datapoint hover
1 parent 3b9b3cf commit 41a731c

File tree

3 files changed

+169
-8
lines changed

3 files changed

+169
-8
lines changed

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

Lines changed: 121 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {
1313
opacity,
1414
palette,
1515
createSmoothPath,
16-
XMLNS
16+
XMLNS,
17+
dataLabel
1718
} from '../lib';
1819
import pdf from "../pdf";
1920
import img from "../img";
@@ -391,9 +392,26 @@ function useTooltip(plot, seriesIndex) {
391392
}
392393
393394
html += `<div style="text-align:left;margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8">`;
394-
html += `<div>${scatterConfig.value.style.layout.dataLabels.xAxis.name} : <b>${isNaN(plot.v.x) ? '-' : Number(plot.v.x.toFixed(scatterConfig.value.style.layout.dataLabels.xAxis.roundingValue)).toLocaleString()}</b></div>`;
395-
html += `<div>${scatterConfig.value.style.layout.dataLabels.yAxis.name} : <b>${isNaN(plot.v.y) ? '-' : Number(plot.v.y.toFixed(scatterConfig.value.style.layout.dataLabels.yAxis.roundingValue)).toLocaleString()}</b></div>`;
396-
html += `${scatterConfig.value.style.layout.plots.deviation.translation} : <b>${Number(plot.deviation.toFixed(scatterConfig.value.style.layout.plots.deviation.roundingValue)).toLocaleString()}</b>`
395+
396+
html += `<div>${scatterConfig.value.style.layout.dataLabels.xAxis.name} : <b>${isNaN(plot.v.x) ? '-' : dataLabel({
397+
p: scatterConfig.value.style.tooltip.prefix,
398+
v: plot.v.x,
399+
s: scatterConfig.value.style.tooltip.suffix,
400+
r: scatterConfig.value.style.tooltip.roundingValue
401+
})}</b></div>`;
402+
403+
html += `<div>${scatterConfig.value.style.layout.dataLabels.yAxis.name} : <b>${isNaN(plot.v.y) ? '-' : dataLabel({
404+
p: scatterConfig.value.style.tooltip.prefix,
405+
v: plot.v.y,
406+
s: scatterConfig.value.style.tooltip.suffix,
407+
r: scatterConfig.value.style.tooltip.roundingValue
408+
})}</b></div>`;
409+
410+
html += `${scatterConfig.value.style.layout.plots.deviation.translation} : <b>${dataLabel({
411+
v: plot.deviation,
412+
r: scatterConfig.value.style.layout.plots.deviation.roundingValue
413+
})}</b>`;
414+
397415
html += `</div>`;
398416
399417
tooltipContent.value = `<div>${html}</div>`
@@ -767,6 +785,91 @@ defineExpose({
767785
</g>
768786
</g>
769787
788+
<!-- SELECTORS -->
789+
<g v-if="selectedPlot && scatterConfig.style.layout.plots.selectors.show" style="pointer-events: none !important;">
790+
<line
791+
:x1="zero.x"
792+
:x2="selectedPlot.x"
793+
:y1="selectedPlot.y"
794+
:y2="selectedPlot.y"
795+
:stroke="scatterConfig.style.layout.plots.selectors.stroke"
796+
:stroke-width="scatterConfig.style.layout.plots.selectors.strokeWidth"
797+
:stroke-dasharray="scatterConfig.style.layout.plots.selectors.strokeDasharray"
798+
stroke-linecap="round"
799+
class="line-pointer"
800+
/>
801+
<line
802+
:x1="selectedPlot.x"
803+
:x2="selectedPlot.x"
804+
:y1="zero.y"
805+
:y2="selectedPlot.y"
806+
:stroke="scatterConfig.style.layout.plots.selectors.stroke"
807+
:stroke-width="scatterConfig.style.layout.plots.selectors.strokeWidth"
808+
:stroke-dasharray="scatterConfig.style.layout.plots.selectors.strokeDasharray"
809+
stroke-linecap="round"
810+
class="line-pointer"
811+
/>
812+
<text
813+
:x="zero.x + (selectedPlot.x > zero.x ? -6 : 6)"
814+
:y="selectedPlot.y + scatterConfig.style.layout.plots.selectors.labels.fontSize / 3"
815+
:font-size="scatterConfig.style.layout.plots.selectors.labels.fontSize"
816+
:fill="scatterConfig.style.layout.plots.selectors.labels.color"
817+
:font-weight="scatterConfig.style.layout.plots.selectors.labels.bold ? 'bold' : 'normal'"
818+
:text-anchor="selectedPlot.x > zero.x ? 'end' : 'start'"
819+
>
820+
{{ dataLabel({
821+
p: scatterConfig.style.layout.plots.selectors.labels.prefix,
822+
v: selectedPlot.v.y,
823+
s: scatterConfig.style.layout.plots.selectors.labels.suffix,
824+
r: scatterConfig.style.layout.plots.selectors.labels.rounding
825+
}) }}
826+
</text>
827+
<text
828+
:x="selectedPlot.x"
829+
:y="zero.y + (selectedPlot.y > zero.y ? - 6 : scatterConfig.style.layout.plots.selectors.labels.fontSize +6)"
830+
:font-size="scatterConfig.style.layout.plots.selectors.labels.fontSize"
831+
:fill="scatterConfig.style.layout.plots.selectors.labels.color"
832+
:font-weight="scatterConfig.style.layout.plots.selectors.labels.bold ? 'bold' : 'normal'"
833+
:text-anchor="'middle'"
834+
>
835+
{{ dataLabel({
836+
p: scatterConfig.style.layout.plots.selectors.labels.prefix,
837+
v: selectedPlot.v.x,
838+
s: scatterConfig.style.layout.plots.selectors.labels.suffix,
839+
r: scatterConfig.style.layout.plots.selectors.labels.rounding
840+
}) }}
841+
</text>
842+
<circle
843+
:cx="zero.x"
844+
:cy="selectedPlot.y"
845+
:r="scatterConfig.style.layout.plots.selectors.markers.radius"
846+
:fill="scatterConfig.style.layout.plots.selectors.markers.fill"
847+
:stroke="scatterConfig.style.layout.plots.selectors.markers.stroke"
848+
:stroke-width="scatterConfig.style.layout.plots.selectors.markers.strokeWidth"
849+
class="line-pointer"
850+
/>
851+
<circle
852+
:cx="selectedPlot.x"
853+
:cy="zero.y"
854+
:r="scatterConfig.style.layout.plots.selectors.markers.radius"
855+
:fill="scatterConfig.style.layout.plots.selectors.markers.fill"
856+
:stroke="scatterConfig.style.layout.plots.selectors.markers.stroke"
857+
:stroke-width="scatterConfig.style.layout.plots.selectors.markers.strokeWidth"
858+
class="line-pointer"
859+
/>
860+
<text
861+
v-if="scatterConfig.style.layout.plots.selectors.labels.showName"
862+
:x="selectedPlot.x"
863+
:y="selectedPlot.y + (selectedPlot.y < zero.y ? - scatterConfig.style.layout.plots.selectors.labels.fontSize /2 : scatterConfig.style.layout.plots.selectors.labels.fontSize)"
864+
:font-size="scatterConfig.style.layout.plots.selectors.labels.fontSize"
865+
:fill="scatterConfig.style.layout.plots.selectors.labels.color"
866+
:font-weight="scatterConfig.style.layout.plots.selectors.labels.bold ? 'bold' : 'normal'"
867+
:text-anchor="selectedPlot.x < drawingArea.left + 100 ? 'start' : selectedPlot.x > drawingArea.right - 100 ? 'end' : selectedPlot.x > zero.x ? 'start' : 'end'"
868+
>
869+
{{ selectedPlot.v.name }}
870+
</text>
871+
</g>
872+
770873
<!-- AXIS LABELS -->
771874
<g v-if="scatterConfig.style.layout.dataLabels.xAxis.show">
772875
<text
@@ -929,7 +1032,6 @@ defineExpose({
9291032
</div>
9301033
</template>
9311034
</Legend>
932-
9331035
<slot name="legend" v-bind:legend="datasetWithId"></slot>
9341036
9351037
<!-- TOOLTIP -->
@@ -995,7 +1097,7 @@ defineExpose({
9951097
position: relative;
9961098
}
9971099
998-
path, line, circle {
1100+
path, line:not(.line-pointer), circle:not(.line-pointer) {
9991101
animation: verticalBarAnimation 0.5s ease-in-out !important;
10001102
transform-origin: center !important;
10011103
}
@@ -1049,4 +1151,17 @@ path, line, circle {
10491151
font-weight: 400;
10501152
user-select: none;
10511153
}
1154+
.line-pointer {
1155+
animation: line-pointer-opacity 0.3s ease-in-out forwards;
1156+
opacity: 0;
1157+
}
1158+
1159+
@keyframes line-pointer-opacity {
1160+
from {
1161+
opacity: 0;
1162+
}
1163+
to {
1164+
opacity: 1;
1165+
}
1166+
}
10521167
</style>

‎src/default_configs.json‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1985,6 +1985,27 @@
19851985
"strokeWidth": 1,
19861986
"strokeDasharray": 0,
19871987
"fillOpacity": 0.2
1988+
},
1989+
"selectors": {
1990+
"show": true,
1991+
"stroke": "#2D353C",
1992+
"strokeWidth": 0.7,
1993+
"strokeDasharray": 0,
1994+
"labels": {
1995+
"fontSize": 12,
1996+
"color":"#2D353C",
1997+
"rounding": 2,
1998+
"bold": false,
1999+
"showName": true,
2000+
"prefix": "",
2001+
"suffix": ""
2002+
},
2003+
"markers": {
2004+
"radius": 1.5,
2005+
"stroke": "#FFFFFF",
2006+
"strokeWidth": 0.5,
2007+
"fill": "#2D353C"
2008+
}
19882009
}
19892010
},
19902011
"correlation": {
@@ -2048,9 +2069,11 @@
20482069
"backgroundColor": "#FFFFFF",
20492070
"color": "#2D353C",
20502071
"fontSize": 14,
2051-
"roundingValue": 0,
2072+
"roundingValue": 2,
20522073
"customFormat": null,
2053-
"showShape": true
2074+
"showShape": true,
2075+
"prefix": "",
2076+
"suffix": ""
20542077
}
20552078
},
20562079
"userOptions": {

‎types/vue-data-ui.d.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2007,6 +2007,27 @@ declare module 'vue-data-ui' {
20072007
strokeDasharray?: number;
20082008
fillOpacity?: number;
20092009
};
2010+
selectors?: {
2011+
show?: boolean;
2012+
stroke?: string;
2013+
strokeWidth?: number;
2014+
strokeDasharray?: number;
2015+
labels?: {
2016+
fontSize?: number;
2017+
color?: string;
2018+
rounding?: number;
2019+
bold?: boolean;
2020+
showName?: boolean;
2021+
prefix?: string;
2022+
suffix?: string;
2023+
};
2024+
markers?: {
2025+
radius?: number;
2026+
stroke?: string;
2027+
strokeWidth?: number;
2028+
fill?: string;
2029+
};
2030+
};
20102031
};
20112032
marginalBars?: {
20122033
show?: boolean;
@@ -2084,6 +2105,8 @@ declare module 'vue-data-ui' {
20842105
fontSize?: number;
20852106
roundingValue?: number;
20862107
showShape?: boolean;
2108+
prefix?: string;
2109+
suffix?: string;
20872110
customFormat?: (params: VueUiTooltipParams<VueUiScatterDatapoint, VueUiScatterSeries[], VueUiScatterConfig>) => string
20882111
};
20892112
};

0 commit comments

Comments
 (0)