Skip to content

Commit 4bed743

Browse files
graphierosgraphieros
committed
Improvement - VueUiXy - Add scaleMin and scaleMax yAxis scale overriding config attributes
1 parent 31ad366 commit 4bed743

File tree

1 file changed

+77
-37
lines changed

1 file changed

+77
-37
lines changed

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

Lines changed: 77 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -196,8 +196,8 @@
196196
</defs>
197197
</template>
198198

199-
<!-- HIGHLIGHT AREA -->
200-
<g v-for="oneArea in highlightAreas">
199+
<!-- HIGHLIGHT AREA RECT FILLS -->
200+
<g v-for="oneArea in highlightAreas">
201201
<template v-if="oneArea.show">
202202
<rect
203203
data-cy="xy-highlight-area"
@@ -222,6 +222,21 @@
222222
</template>
223223
</g>
224224

225+
<!-- HIGHLIGHTERS -->
226+
<g>
227+
<g v-for="(_, i) in maxSeries" :key="`tooltip_trap_${i}`">
228+
<rect
229+
:data-cy="`xy-tooltip-trap-${i}`"
230+
data-cy-trap
231+
:x="drawingArea.left + (drawingArea.width / maxSeries) * i"
232+
:y="drawingArea.top"
233+
:height="drawingArea.height < 0 ? 10 : drawingArea.height"
234+
:width="drawingArea.width / maxSeries < 0 ? 0.00001 : drawingArea.width / maxSeries"
235+
:fill="selectedSerieIndex === i || selectedRowIndex === i ? `${FINAL_CONFIG.chart.highlighter.color}${opacity[FINAL_CONFIG.chart.highlighter.opacity]}` : 'transparent'"
236+
/>
237+
</g>
238+
</g>
239+
225240
<!-- BARS -->
226241
<template v-if="barSet.length">
227242
<g v-for="(serie, i) in barSet" :key="`serie_bar_${i}`" :class="`serie_bar_${i}`" :style="`opacity:${selectedScale ? selectedScale === serie.id ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">
@@ -302,6 +317,20 @@
302317
/>
303318
</template>
304319

320+
<g v-if="FINAL_CONFIG.chart.highlighter.useLine && ![null, undefined].includes(selectedSerieIndex)">
321+
<line
322+
:x1="drawingArea.left + (drawingArea.width / maxSeries) * selectedSerieIndex + (drawingArea.width / maxSeries / 2)"
323+
:x2="drawingArea.left + (drawingArea.width / maxSeries) * selectedSerieIndex + (drawingArea.width / maxSeries / 2)"
324+
:y1="drawingArea.top"
325+
:y2="drawingArea.bottom"
326+
:stroke="FINAL_CONFIG.chart.highlighter.color"
327+
:stroke-width="FINAL_CONFIG.chart.highlighter.lineWidth"
328+
:stroke-dasharray="FINAL_CONFIG.chart.highlighter.lineDasharray"
329+
stroke-linecap="round"
330+
style="transition:none !important; animation: none !important; pointer-events: none;"
331+
/>
332+
</g>
333+
305334
<!-- LEFT & RIGHT PADDING COVERS -->
306335
<g>
307336
<rect
@@ -336,8 +365,8 @@
336365
:stroke-dasharray="FINAL_CONFIG.chart.grid.frame.strokeDasharray"
337366
/>
338367

339-
<!-- Y LABELS -->
340-
<g v-if="FINAL_CONFIG.chart.grid.labels.show">
368+
<!-- Y LABELS -->
369+
<g v-if="FINAL_CONFIG.chart.grid.labels.show">
341370
<template v-if="mutableConfig.useIndividualScale">
342371
<g v-for="el in allScales">
343372
<line
@@ -931,28 +960,14 @@
931960
:y="drawingArea.top"
932961
:height="drawingArea.height < 0 ? 10 : drawingArea.height"
933962
:width="drawingArea.width / maxSeries < 0 ? 0.00001 : drawingArea.width / maxSeries"
934-
:fill="selectedSerieIndex === i || selectedRowIndex === i ? `${FINAL_CONFIG.chart.highlighter.color}${opacity[FINAL_CONFIG.chart.highlighter.opacity]}` : 'transparent'"
963+
fill="transparent"
935964
@mouseenter="toggleTooltipVisibility(true, i)"
936965
@mouseleave="toggleTooltipVisibility(false)"
937966
@click="selectX(i)"
938967
/>
939968
</g>
940969
</g>
941970

942-
<g v-if="FINAL_CONFIG.chart.highlighter.useLine && ![null, undefined].includes(selectedSerieIndex)">
943-
<line
944-
:x1="drawingArea.left + (drawingArea.width / maxSeries) * selectedSerieIndex + (drawingArea.width / maxSeries / 2)"
945-
:x2="drawingArea.left + (drawingArea.width / maxSeries) * selectedSerieIndex + (drawingArea.width / maxSeries / 2)"
946-
:y1="drawingArea.top"
947-
:y2="drawingArea.bottom"
948-
:stroke="FINAL_CONFIG.chart.highlighter.color"
949-
:stroke-width="FINAL_CONFIG.chart.highlighter.lineWidth"
950-
:stroke-dasharray="FINAL_CONFIG.chart.highlighter.lineDasharray"
951-
stroke-linecap="round"
952-
style="transition:none !important; animation: none !important; pointer-events: none;"
953-
/>
954-
</g>
955-
956971
<!-- TIME TAG -->
957972
<g v-if="FINAL_CONFIG.chart.timeTag.show && ![null, undefined].includes(selectedSerieIndex)">
958973
<foreignObject
@@ -1156,6 +1171,7 @@ import {
11561171
dataLabel,
11571172
downloadCsv,
11581173
functionReturnsString,
1174+
hasDeepProperty,
11591175
isFunction,
11601176
isSafeValue,
11611177
opacity,
@@ -1386,13 +1402,29 @@ export default {
13861402
defaultConfig: DEFAULT_CONFIG
13871403
});
13881404
1389-
if ('highlightArea' in this.config.chart) {
1405+
// ------------------------------ OVERRIDES -----------------------------------
1406+
1407+
if (this.config && this.hasDeepProperty(this.config, 'chart.highlightArea')) {
13901408
if (!Array.isArray(this.config.chart.highlightArea)) {
13911409
mergedConfig.chart.highlightArea = [this.config.chart.highlightArea] // FIXME: should be sanitized using useNestedPropToo
13921410
} else {
1393-
mergedConfig.chart.highlightArea = this.config.chart.highlightArea; //
1411+
mergedConfig.chart.highlightArea = this.config.chart.highlightArea;
13941412
}
13951413
}
1414+
1415+
if (this.config && this.hasDeepProperty(this.config, 'chart.grid.labels.yAxis.scaleMin')) {
1416+
mergedConfig.chart.grid.labels.yAxis.scaleMin = this.config.chart.grid.labels.yAxis.scaleMin;
1417+
} else {
1418+
mergedConfig.chart.grid.labels.yAxis.scaleMin = null;
1419+
}
1420+
1421+
if (this.config && this.hasDeepProperty(this.config, 'chart.grid.labels.yAxis.scaleMax')) {
1422+
mergedConfig.chart.grid.labels.yAxis.scaleMax = this.config.chart.grid.labels.yAxis.scaleMax;
1423+
} else {
1424+
mergedConfig.chart.grid.labels.yAxis.scaleMax = null;
1425+
}
1426+
1427+
// ----------------------------------------------------------------------------
13961428
13971429
if (mergedConfig.theme) {
13981430
return {
@@ -1838,9 +1870,16 @@ export default {
18381870
}
18391871
},
18401872
max(){
1873+
if (this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMax) {
1874+
return this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMax
1875+
}
18411876
return Math.max(...this.safeDataset.filter(s => !this.segregatedSeries.includes(s.id)).map(datapoint => Math.max(...datapoint.series)));
18421877
},
18431878
min() {
1879+
console.log(this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin === null)
1880+
if (this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin !== null) {
1881+
return this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin
1882+
}
18441883
const min = Math.min(...this.safeDataset.filter(s => !this.segregatedSeries.includes(s.id)).map(datapoint => Math.min(...datapoint.series)));
18451884
if(min > 0) return 0;
18461885
return min;
@@ -2198,33 +2237,34 @@ export default {
21982237
},
21992238
methods: {
22002239
abbreviate,
2201-
assignStackRatios,
2240+
adaptColorToBackground,
22022241
applyDataLabel,
2242+
assignStackRatios,
2243+
calcLinearProgression,
22032244
calculateNiceScaleWithExactExtremes,
22042245
checkNaN,
2205-
createSmoothPath,
2206-
isSafeValue,
2207-
treeShake,
2208-
shiftHue,
2209-
pdf,
2210-
img,
2246+
closestDecimal,
22112247
convertColorToHex,
22122248
convertConfigColors,
22132249
convertCustomPalette,
2214-
downloadCsv,
22152250
createCsvContent,
2216-
adaptColorToBackground,
2217-
calcLinearProgression,
2218-
useMouse,
2219-
closestDecimal,
2251+
createSmoothPath,
2252+
createTSpans,
22202253
dataLabel,
2221-
isFunction,
2222-
functionReturnsString,
2254+
downloadCsv,
22232255
error,
2256+
functionReturnsString,
2257+
hasDeepProperty,
2258+
img,
2259+
isFunction,
2260+
isSafeValue,
22242261
objectIsEmpty,
2225-
createTSpans,
2226-
useNestedProp,
2262+
pdf,
2263+
shiftHue,
22272264
translateSize,
2265+
treeShake,
2266+
useMouse,
2267+
useNestedProp,
22282268
convertSizes() {
22292269
// Adaptative sizes in responsive mode
22302270
this.fontSizes.dataLabels = this.translateSize({

0 commit comments

Comments
 (0)