micord/ervu-business-metrics
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/SUPPORT-9329_chart' into develop

Browse source
This commit is contained in:
adel.ka 2025-08-20 12:20:53 +03:00
commit 6f89db08b8
1 changed files with 26 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
View file

@ -116,6 +116,9 @@ export class ErvuChartV2 extends Control implements Filterable {
return; return;
} }
const realWidth = canvas.width / (canvas.clientWidth / canvas.offsetWidth);
const realHeight = canvas.height / (canvas.clientHeight / canvas.offsetHeight);
ctx.save(); ctx.save();
ctx.resetTransform(); ctx.resetTransform();
ctx.textAlign = "center"; ctx.textAlign = "center";
@ -123,26 +126,39 @@ export class ErvuChartV2 extends Control implements Filterable {
ctx.fillStyle = this.noDataStyle; ctx.fillStyle = this.noDataStyle;
const fontMatch = this.noDataFont.match(/^(\d+)px\s+(.+)$/); const fontMatch = this.noDataFont.match(/^(\d+)px\s+(.+)$/);
const fontSize = parseInt(fontMatch[1], 10); const fontSize = parseInt(fontMatch[1], 10) * window.devicePixelRatio;
const fontFamily = fontMatch[2]; const fontFamily = fontMatch[2];
const text = this.noDataText; const text = this.noDataText;
const maxWidth = canvas.width * 0.8;
const minFontSize = Math.max(8, canvas.height * 0.07);
let currentFontSize = Math.min(fontSize, canvas.height / 5); const padding = 20 * window.devicePixelRatio;
ctx.font = `${currentFontSize}px ${fontFamily}`; const maxWidth = realWidth - 2 * padding;
let textWidth = ctx.measureText(text).width; const maxHeight = realHeight - 2 * padding;
let currentFontSize = Math.min(
fontSize,
maxHeight,
(maxWidth / text.length) * 1.8
);
const minFontSize = Math.max(8, realHeight * 0.07);
while (textWidth > maxWidth && currentFontSize > minFontSize) {
currentFontSize = Math.max(minFontSize, currentFontSize * 0.9);
ctx.font = `${currentFontSize}px ${fontFamily}`; ctx.font = `${currentFontSize}px ${fontFamily}`;
textWidth = ctx.measureText(text).width; const textWidth = ctx.measureText(text).width;
if (textWidth > maxWidth || currentFontSize > maxHeight) {
const widthRatio = maxWidth / textWidth;
const heightRatio = maxHeight / currentFontSize;
currentFontSize = Math.max(
minFontSize,
currentFontSize * Math.min(widthRatio, heightRatio)
);
ctx.font = `${currentFontSize}px ${fontFamily}`;
} }
ctx.fillText( ctx.fillText(
text, text,
canvas.width / 2, realWidth / 2,
canvas.height / 2 realHeight / 2
); );
ctx.restore(); ctx.restore();
} }