[FIX] ChartRuntime: take devicePixelRatio in account to draw

The charts were not redrawn when the devicePixelRatio was altered
and the homebrew chart (scorecard) was not scaled, which led to blurry
charts on Mac screens for instance.

closes #6071

Task: 4661712
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>

Author: rrahir

src/components/figures/chart/chartJs/chartjs.ts

@@ -39,7 +39,7 @@ export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
     });
     useEffect(
       () => this.updateChartJs(deepCopy(this.chartRuntime)),
-      () => [this.chartRuntime]
+      () => [this.chartRuntime, window.devicePixelRatio]
     );
   }
 

src/components/figures/chart/scorecard/chart_scorecard.ts

@@ -20,7 +20,7 @@ export class ScorecardChart extends Component<Props, SpreadsheetChildEnv> {
     useEffect(this.createChart.bind(this), () => {
       const canvas = this.canvas.el as HTMLCanvasElement;
       const rect = canvas.getBoundingClientRect();
-      return [rect.width, rect.height, this.runtime, this.canvas.el];
+      return [rect.width, rect.height, this.runtime, this.canvas.el, window.devicePixelRatio];
     });
   }
 

src/helpers/figures/charts/scorecard_chart.ts

@@ -187,8 +187,10 @@ export class ScorecardChart extends AbstractChart {
 
 export function drawScoreChart(structure: ScorecardChartConfig, canvas: HTMLCanvasElement) {
   const ctx = canvas.getContext("2d")!;
-  canvas.width = structure.canvas.width;
-  canvas.height = structure.canvas.height;
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = structure.canvas.width * dpr;
+  canvas.height = structure.canvas.height * dpr;
+  ctx.scale(dpr, dpr);
 
   ctx.fillStyle = structure.canvas.backgroundColor;
   ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);