lichess-org · ornicar · Nov 11, 2023 · Oct 24, 2023 · Oct 27, 2023 · Oct 30, 2023
diff --git a/app/views/analyse/replay.scala b/app/views/analyse/replay.scala
@@ -172,7 +172,8 @@ object replay:
               ),
               div(cls := "analyse__underboard__panels")(
                 game.analysable option div(cls := "computer-analysis")(
-                  if analysis.isDefined || analysisStarted then div(id := "acpl-chart")
+                  if analysis.isDefined || analysisStarted then
+                    div(id := "acpl-chart-container")(canvas(id := "acpl-chart"))
                   else
                     postForm(
                       cls    := s"future-game-analysis${ctx.isAnon so " must-login"}",
@@ -184,7 +185,7 @@ object replay:
                     )
                 ),
                 div(cls := "move-times")(
-                  game.ply > 1 option div(id := "movetimes-chart")
+                  game.ply > 1 option div(id := "movetimes-chart-container")(canvas(id := "movetimes-chart"))
                 ),
                 div(cls := "fen-pgn")(
                   div(

diff --git a/app/views/insight.scala b/app/views/insight.scala
@@ -23,7 +23,6 @@ object insight:
     views.html.base.layout(
       title = trans.insight.xChessInsights.txt(u.username),
       moreJs = frag(
-        highchartsLatestTag,
         iifeModule("javascripts/insight-refresh.js"),
         jsModuleInit(
           "insight",

diff --git a/app/views/stat/ratingDistribution.scala b/app/views/stat/ratingDistribution.scala
@@ -78,7 +78,12 @@ object ratingDistribution:
               )
             )
           ),
-          div(id := "rating_distribution_chart")(spinner)
+          div(id := "rating_distribution")(
+            canvas(
+              id := "rating_distribution_chart",
+              ariaTitle(trans.weeklyPerfTypeRatingDistribution.txt(perfType.trans))
+            )(spinner)
+          )
         )
       )
     }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/analyse/css/_round-underboard.scss b/ui/analyse/css/_round-underboard.scss
@@ -117,8 +117,8 @@ $col2-panel-height: 240px;
   }
 }
 
-#acpl-chart,
-#movetimes-chart {
+#acpl-chart-container,
+#movetimes-chart-container {
   width: 100%;
   height: var(--panel-height);
   background: linear-gradient(
@@ -133,11 +133,11 @@ $col2-panel-height: 240px;
   cursor: pointer;
 }
 
-#acpl-chart {
+#acpl-chart-container {
   cursor: pointer;
 }
 
-#acpl-chart-loader {
+#acpl-chart-container-loader {
   font-size: 0.9em;
   position: absolute;
   top: 91px;

diff --git a/ui/analyse/src/ctrl.ts b/ui/analyse/src/ctrl.ts
@@ -840,7 +840,6 @@ export default class AnalyseCtrl {
       );
     if (data.division) this.data.game.division = data.division;
     if (this.retro) this.retro.onMergeAnalysisData();
-    if (this.study) this.study.serverEval.onMergeAnalysisData();
     lichess.pubsub.emit('analysis.server.progress', this.data);
     this.redraw();
   }

diff --git a/ui/analyse/src/serverSideUnderboard.ts b/ui/analyse/src/serverSideUnderboard.ts
@@ -9,8 +9,6 @@ import { ChartGame, AcplChart } from 'chart';
 export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
   $(element).replaceWith(ctrl.opts.$underboard!);
 
-  $('#adv-chart').attr('id', 'acpl-chart');
-
   const data = ctrl.data,
     $panels = $('.analyse__underboard__panels > div'),
     $menu = $('.analyse__underboard__menu'),
@@ -42,7 +40,6 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
     lichess.pubsub.on('analysis.comp.toggle', (v: boolean) => {
       if (v) {
         setTimeout(() => $menu.find('.computer-analysis').first().trigger('mousedown'), 50);
-        advChart?.reflow();
       } else {
         $menu.find('span:not(.computer-analysis)').first().trigger('mousedown');
       }
@@ -57,26 +54,29 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
     });
     lichess.pubsub.on('analysis.server.progress', (d: AnalyseData) => {
       if (!advChart) startAdvantageChart();
-      else advChart?.updateData(d, ctrl.mainline);
-      if (d.analysis && !d.analysis.partial) $('#acpl-chart-loader').remove();
+      else advChart.updateData(d, ctrl.mainline);
+      if (d.analysis && !d.analysis.partial) $('#acpl-chart-container-loader').remove();
     });
   }
 
   const chartLoader = () =>
-    `<div id="acpl-chart-loader"><span>Stockfish 16<br>server analysis</span>${lichess.spinnerHtml}</div>`;
+    `<div id="acpl-chart-container-loader"><span>Stockfish 16<br>server analysis</span>${lichess.spinnerHtml}</div>`;
 
   function startAdvantageChart() {
     if (advChart || lichess.blindMode) return;
     const loading = !ctrl.tree.root.eval || !Object.keys(ctrl.tree.root.eval).length;
     const $panel = $panels.filter('.computer-analysis');
-    if (!$('#acpl-chart').length) $panel.html('<div id="acpl-chart"></div>' + (loading ? chartLoader() : ''));
-    else if (loading && !$('#acpl-chart-loader').length) $panel.append(chartLoader());
-    lichess
-      .loadEsm<ChartGame>('chart.game')
-      .then(m => m.acpl($('#acpl-chart')[0] as HTMLElement, data, ctrl.mainline, ctrl.trans))
-      .then(chart => {
+    if (!$('#acpl-chart-container').length)
+      $panel.html(
+        '<div id="acpl-chart-container"><canvas id="acpl-chart"></canvas></div>' +
+          (loading ? chartLoader() : ''),
+      );
+    else if (loading && !$('#acpl-chart-container-loader').length) $panel.append(chartLoader());
+    lichess.loadEsm<ChartGame>('chart.game').then(m =>
+      m.acpl($('#acpl-chart')[0] as HTMLCanvasElement, data, ctrl.mainline, ctrl.trans).then(chart => {
         advChart = chart;
-      });
+      }),
+    );
   }
 
   const storage = lichess.storage.make('analysis.panel');
@@ -90,9 +90,9 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
     if ((panel == 'move-times' || ctrl.opts.hunter) && !timeChartLoaded)
       lichess.loadEsm<ChartGame>('chart.game').then(m => {
         timeChartLoaded = true;
-        m.movetime($('#movetimes-chart')[0] as HTMLElement, data, ctrl.trans, ctrl.opts.hunter);
+        m.movetime($('#movetimes-chart')[0] as HTMLCanvasElement, data, ctrl.trans, ctrl.opts.hunter);
       });
-    if ((panel == 'computer-analysis' || ctrl.opts.hunter) && $('#acpl-chart').length)
+    if ((panel == 'computer-analysis' || ctrl.opts.hunter) && $('#acpl-chart-container').length)
       setTimeout(startAdvantageChart, 200);
   };
   $menu.on('mousedown', 'span', function (this: HTMLElement) {

diff --git a/ui/analyse/src/study/serverEval.ts b/ui/analyse/src/study/serverEval.ts
@@ -18,8 +18,6 @@ export default class ServerEval {
     this.requested = false;
   };
 
-  onMergeAnalysisData = () => this.chart?.updateData(this.root.data, this.root.mainline);
-
   request = () => {
     this.root.socket.send('requestAnalysis', this.chapterId());
     this.requested = true;
@@ -31,14 +29,13 @@ export function view(ctrl: ServerEval): VNode {
 
   if (!ctrl.root.showComputer()) return disabled();
   if (!analysis) return ctrl.requested ? requested() : requestButton(ctrl);
-
-  return h(
-    'div.study__server-eval.ready.' + analysis.id,
+  const chart = h(
+    'canvas.study__server-eval.ready.' + analysis.id,
     {
       hook: onInsert(el => {
         lichess.requestIdleCallback(async () => {
           (await lichess.loadEsm<ChartGame>('chart.game')).acpl(
-            el,
+            el as HTMLCanvasElement,
             ctrl.root.data,
             ctrl.root.mainline,
             ctrl.root.trans,
@@ -48,6 +45,8 @@ export function view(ctrl: ServerEval): VNode {
     },
     [h('div.study__message', spinnerVdom())],
   );
+
+  return h('div.study__server-eval.ready.', chart);
 }
 
 const disabled = () => h('div.study__server-eval.disabled.padded', 'You disabled computer analysis.');