diff --git a/frontend/src/ts/ervu-dashboard/component/chart/ErvuChartV2.ts b/frontend/src/ts/ervu-dashboard/component/chart/ErvuChartV2.ts index cabc3036..07f9cc31 100644 --- a/frontend/src/ts/ervu-dashboard/component/chart/ErvuChartV2.ts +++ b/frontend/src/ts/ervu-dashboard/component/chart/ErvuChartV2.ts @@ -114,14 +114,43 @@ export class ErvuChartV2 extends Control implements Filterable { afterDraw: (chart) => { if (ChartUtils.isEmpty(chart)) { - let ctx = chart.ctx; - let width = chart.width; - let height = chart.height; + + const {ctx, canvas} = chart; + if (!ctx || !canvas) { + return; + } + + ctx.save(); + ctx.resetTransform(); + ctx.textAlign = "center"; ctx.textBaseline = "middle"; - ctx.font = this.noDataFont; ctx.fillStyle = this.noDataStyle; - ctx.fillText(this.noDataText, width / 2, height / 2); + + const fontMatch = this.noDataFont.match(/^(\d+)px\s+(.+)$/); + const fontSize = parseInt(fontMatch[1], 10); + const fontFamily = fontMatch[2]; + + 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); + ctx.font = `${currentFontSize}px ${fontFamily}`; + let textWidth = ctx.measureText(text).width; + + while (textWidth > maxWidth && currentFontSize > minFontSize) { + currentFontSize = Math.max(minFontSize, currentFontSize * 0.9); + ctx.font = `${currentFontSize}px ${fontFamily}`; + textWidth = ctx.measureText(text).width; + } + + ctx.fillText( + text, + canvas.width / 2, + canvas.height / 2 + ); + ctx.restore(); } },