accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-11-10 07:40:55 +00:00
Code Issues Releases Activity

fix(ux): improve tooltip

Browse Source 
- don't cache inverse matrix
This commit is contained in:
18alantom 2022-02-02 16:32:05 +05:30
parent a01d3c7ad4
commit e68995e729
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Charts/BarChart.vue
View File

@ -121,8 +121,14 @@
class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-l-2"
:style="{ borderColor: activeColor }"
>
{{ xi > -1 ? xLabels[xi] : '' }} –
{{ yi > -1 ? format(points[yi][xi]) : '' }}
<div class="flex flex-col justify-center items-center">
<p>
{{ xi > -1 ? xLabels[xi] : '' }}
</p>
<p class="font-semibold">
{{ yi > -1 ? format(points[yi][xi]) : '' }}
</p>
</div>
</Tooltip>
</div>
</template>

17
src/components/Charts/LineChart.vue
View File

@ -119,8 +119,14 @@
class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-l-2"
:style="{ borderColor: colors[yi] }"
>
{{ xi > -1 ? xLabels[xi] : '' }} –
{{ yi > -1 ? format(points[yi][xi]) : '' }}
<div class="flex flex-col justify-center items-center">
<p>
{{ xi > -1 ? xLabels[xi] : '' }}
</p>
<p class="font-semibold">
{{ yi > -1 ? format(points[yi][xi]) : '' }}
</p>
</div>
</Tooltip>
</div>
</template>
@ -160,9 +166,6 @@ export default {
tooltipDispDistThreshold: { type: Number, default: 20 },
},
computed: {
inverseMatrix() {
return this.$refs.chartSvg.getScreenCTM().inverse();
},
fontStyle() {
return { fontSize: this.fontSize, fill: this.fontColor };
},
@ -301,7 +304,9 @@ export default {
const point = this.$refs.chartSvg.createSVGPoint();
point.x = clientX;
point.y = clientY;
const { x, y } = point.matrixTransform(this.inverseMatrix);
const { x, y } = point.matrixTransform(
this.$refs.chartSvg.getScreenCTM().inverse()
);
return { x, y };
},
getPointIndexAndCoords(x, y) {