accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-02-08 23:18:31 +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" class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-l-2"
:style="{ borderColor: activeColor }" :style="{ borderColor: activeColor }"
> >
{{ xi > -1 ? xLabels[xi] : '' }} – <div class="flex flex-col justify-center items-center">
{{ yi > -1 ? format(points[yi][xi]) : '' }} <p>
{{ xi > -1 ? xLabels[xi] : '' }}
</p>
<p class="font-semibold">
{{ yi > -1 ? format(points[yi][xi]) : '' }}
</p>
</div>
</Tooltip> </Tooltip>
</div> </div>
</template> </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" class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-l-2"
:style="{ borderColor: colors[yi] }" :style="{ borderColor: colors[yi] }"
> >
{{ xi > -1 ? xLabels[xi] : '' }} – <div class="flex flex-col justify-center items-center">
{{ yi > -1 ? format(points[yi][xi]) : '' }} <p>
{{ xi > -1 ? xLabels[xi] : '' }}
</p>
<p class="font-semibold">
{{ yi > -1 ? format(points[yi][xi]) : '' }}
</p>
</div>
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
@ -160,9 +166,6 @@ export default {
tooltipDispDistThreshold: { type: Number, default: 20 }, tooltipDispDistThreshold: { type: Number, default: 20 },
}, },
computed: { computed: {
inverseMatrix() {
return this.$refs.chartSvg.getScreenCTM().inverse();
},
fontStyle() { fontStyle() {
return { fontSize: this.fontSize, fill: this.fontColor }; return { fontSize: this.fontSize, fill: this.fontColor };
}, },
@ -301,7 +304,9 @@ export default {
const point = this.$refs.chartSvg.createSVGPoint(); const point = this.$refs.chartSvg.createSVGPoint();
point.x = clientX; point.x = clientX;
point.y = clientY; point.y = clientY;
const { x, y } = point.matrixTransform(this.inverseMatrix); const { x, y } = point.matrixTransform(
this.$refs.chartSvg.getScreenCTM().inverse()
);
return { x, y }; return { x, y };
}, },
getPointIndexAndCoords(x, y) { getPointIndexAndCoords(x, y) {