Skip to content

Commit 1791b22

Browse files
graphierosgraphieros
committed
Fix - VueUiXy - Fix annotations issues with negative values
1 parent 2d2922a commit 1791b22

File tree

1 file changed

+51
-40
lines changed

1 file changed

+51
-40
lines changed

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

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,26 @@
222222
:style="{ animation: 'none !important' }"
223223
/>
224224
</g>
225+
226+
<g v-if="FINAL_CONFIG.chart.grid.labels.xAxisLabels.show">
227+
<g v-for="(label, i) in timeLabels" :key="`time_label_${i}`">
228+
<template
229+
v-if="(label && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (i === 0 || i === timeLabels.length -1) && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && selectedSerieIndex === i && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (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))">
230+
<line
231+
data-cy="axis-x-tick"
232+
v-if="FINAL_CONFIG.chart.grid.labels.xAxis.showCrosshairs"
233+
:y1="drawingArea.bottom"
234+
:y2="drawingArea.bottom + FINAL_CONFIG.chart.grid.labels.xAxis.crosshairSize"
235+
:x1="drawingArea.left + (drawingArea.width / maxSeries) * i + (drawingArea.width / maxSeries / 2)"
236+
:x2="drawingArea.left + (drawingArea.width / maxSeries) * i + (drawingArea.width / maxSeries / 2)"
237+
:stroke="FINAL_CONFIG.chart.grid.stroke"
238+
:stroke-width="1"
239+
stroke-linecap="round"
240+
:style="{ animation: 'none !important '}"
241+
/>
242+
</template>
243+
</g>
244+
</g>
225245
</g>
226246

227247
<!-- DEFS BARS -->
@@ -1150,18 +1170,6 @@
11501170
<g v-for="(label, i) in timeLabels" :key="`time_label_${i}`">
11511171
<template
11521172
v-if="(label && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (i === 0 || i === timeLabels.length -1) && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && selectedSerieIndex === i && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (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))">
1153-
<line
1154-
v-if="FINAL_CONFIG.chart.grid.labels.xAxis.showCrosshairs"
1155-
:y1="drawingArea.bottom"
1156-
:y2="drawingArea.bottom + FINAL_CONFIG.chart.grid.labels.xAxis.crosshairSize"
1157-
:x1="drawingArea.left + (drawingArea.width / maxSeries) * i + (drawingArea.width / maxSeries / 2)"
1158-
:x2="drawingArea.left + (drawingArea.width / maxSeries) * i + (drawingArea.width / maxSeries / 2)"
1159-
:stroke="FINAL_CONFIG.chart.grid.stroke"
1160-
:stroke-width="1"
1161-
stroke-linecap="round"
1162-
:style="{ animation: 'none !important '}"
1163-
/>
1164-
11651173
<text
11661174
data-cy="time-label"
11671175
:text-anchor="FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation > 0 ? 'start' : FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation < 0 ? 'end' : 'middle'"
@@ -2873,53 +2881,57 @@ export default {
28732881
},
28742882
annotationsY() {
28752883
const ann = this.FINAL_CONFIG.chart.annotations;
2876-
if (!ann.length || ann.every(a => !a.show) || ann.every(a => a.yAxis.yTop === null && a.yAxis.yBottom === null)) {
2877-
return []
2878-
}
2884+
if (!Array.isArray(ann) || ann.every(a => !a.show)) return [];
2885+
2886+
const visible = ann.filter(a =>
2887+
a.show &&
2888+
(a.yAxis.yTop != null || a.yAxis.yBottom != null)
2889+
);
28792890
2880-
const visible = ann.filter(a => a.show && (a.yAxis.yTop != null || a.yAxis.yBottom != null));
28812891
if (!visible.length) return [];
28822892
2883-
const { bottom, height, left, right } = this.drawingArea;
2893+
const { left, right } = this.drawingArea;
2894+
const zeroY = this.zero;
2895+
const height = this.drawingArea.height;
2896+
const min = this.niceScale.min;
2897+
const max = this.niceScale.max;
2898+
const range = max - min;
28842899
2885-
return visible.map(annotation => {
2886-
const { yTop: rawTop, yBottom: rawBottom, label } = annotation.yAxis;
2900+
const toY = v => {
2901+
const ratio = (v - 0) / range;
2902+
return zeroY - (ratio * height);
2903+
};
28872904
2888-
const hasArea = rawTop != null && rawBottom != null && Math.abs(rawTop - rawBottom) > 0;
2905+
return visible.map(annotation => {
2906+
const { yAxis: { yTop: rawTop, yBottom: rawBottom, label } } = annotation;
2907+
const hasArea = rawTop != null && rawBottom != null && rawTop !== rawBottom;
28892908
2890-
const yTop = rawTop == null
2891-
? null
2892-
: bottom - height * this.ratioToMax(rawTop);
2893-
const yBottom = rawBottom == null
2894-
? null
2895-
: bottom - height * this.ratioToMax(rawBottom);
2909+
const yTop = rawTop == null ? null : toY(rawTop);
2910+
const yBottom = rawBottom == null ? null : toY(rawBottom);
28962911
28972912
const ctx = this.getTextMeasurer(label.fontSize);
28982913
ctx.font = `${label.fontSize}px sans-serif`;
2899-
const textWidth = ctx.measureText(label.text).width;
2914+
const textWidth = ctx.measureText(label.text).width;
29002915
const textHeight = label.fontSize;
29012916
29022917
const xText = (label.position === 'start' ? left + label.padding.left : right - label.padding.right) + label.offsetX;
29032918
2904-
const baselineY =
2905-
(yTop != null && yBottom != null)
2919+
const baselineY = (yTop != null && yBottom != null)
29062920
? Math.min(yTop, yBottom)
29072921
: (yTop != null ? yTop : yBottom);
29082922
2909-
const yText = baselineY
2910-
- label.fontSize / 3
2911-
+ label.offsetY
2912-
- label.padding.top;
2923+
const yText = baselineY - (label.fontSize / 3) + label.offsetY - label.padding.top;
29132924
29142925
let rectX;
29152926
if (label.textAnchor === 'middle') {
2916-
rectX = xText - textWidth / 2 - label.padding.left;
2927+
rectX = xText - (textWidth / 2) - label.padding.left;
29172928
} else if (label.textAnchor === 'end') {
29182929
rectX = xText - textWidth - label.padding.right;
29192930
} else {
29202931
rectX = xText - label.padding.left;
29212932
}
2922-
const rectY = yText - textHeight * 0.75 - label.padding.top;
2933+
2934+
const rectY = yText - (textHeight * 0.75) - label.padding.top;
29232935
29242936
return {
29252937
id: `annotation_y_${this.createUid()}`,
@@ -2930,22 +2942,21 @@ export default {
29302942
config: annotation.yAxis,
29312943
x1: left,
29322944
x2: right,
2933-
29342945
_text: { x: xText, y: yText },
29352946
_box: {
29362947
x: rectX,
29372948
y: rectY,
2938-
width: textWidth + (label.padding.left + label.padding.right),
2949+
width: textWidth + label.padding.left + label.padding.right,
29392950
height: textHeight + label.padding.top + label.padding.bottom,
29402951
fill: label.backgroundColor,
29412952
stroke: label.border.stroke,
2942-
rx: label.border.rx,
2943-
ry: label.border.ry,
2953+
rx: label.border.rx,
2954+
ry: label.border.ry,
29442955
strokeWidth: label.border.strokeWidth
29452956
}
29462957
};
29472958
});
2948-
}
2959+
},
29492960
},
29502961
mounted() {
29512962
this.svgRef = this.$refs.svgRef;

0 commit comments

Comments
 (0)