migrate highcharts

2020-09-13 09:22:38 +02:00 · 2020-09-13 09:22:38 +02:00 · 754ef73585
parent a1bafa726c
commit 754ef73585
11 changed files with 36 additions and 42 deletions
--- a/app/views/user/show/page.scala
+++ b/app/views/user/show/page.scala
@ -83,7 +83,7 @@ object page {
      info.ratingChart.map { ratingChart =>
        frag(
          jsTag("chart/ratingHistory.js"),
-          embedJsUnsafeLoadThen(s"lichess.ratingHistoryChart($ratingChart);")
+          embedJsUnsafeLoadThen(s"lichess.ratingHistoryChart($ratingChart)")
        )
      },
      withSearch option jsModule("game-search"),
--- a/public/javascripts/chart/acpl.js
+++ b/public/javascripts/chart/acpl.js
@ -7,7 +7,7 @@ lichess.advantageChart = function(data, trans, el) {
      lichess.chartCommon('highchart').then(function() {

        lichess.advantageChart.update = function(d) {
-          $(el).highcharts().series[0].setData(makeSerieData(d));
+          el.highcharts && el.highcharts.series[0].setData(makeSerieData(d));
        };

        var blurs = [ toBlurArray(data.player), toBlurArray(data.opponent) ];
@ -15,7 +15,7 @@ lichess.advantageChart = function(data, trans, el) {

        var makeSerieData = function(d) {
          var partial = !d.analysis || d.analysis.partial;
-          return d.treeParts.slice(1).map(function(node, i) {
+          return d.treeParts.slice(1).map(function(node) {

            var color = node.ply & 1, cp;

@ -57,7 +57,7 @@ lichess.advantageChart = function(data, trans, el) {
          text: null
        };
        var serieData = makeSerieData(data);
-        var chart = $(el).highcharts({
+        el.highcharts = Highcharts.chart(el, {
          credits: disabled,
          legend: disabled,
          series: [{
--- a/public/javascripts/chart/movetime.js
+++ b/public/javascripts/chart/movetime.js
@ -61,7 +61,7 @@ lichess.movetimeChart = function(data, trans) {
            var noText = {
              text: null
            };
-            $this.highcharts({
+            this.highcharts = Highcharts.chart(this, {
              credits: disabled,
              legend: disabled,
              series: [{
--- a/public/javascripts/chart/ratingDistribution.js
+++ b/public/javascripts/chart/ratingDistribution.js
@ -22,7 +22,7 @@ lichess.ratingDistributionChart = function(data) {
        var cumul = [];
        for (var i = 0; i < data.freq.length; i++)
          cumul.push(Math.round(arraySum(data.freq.slice(0, i)) / sum * 100));
-        $(this).highcharts({
+        Highcharts.chart(this, {
          yAxis: {
            title: noText
          },
--- a/public/javascripts/chart/ratingHistory.js
+++ b/public/javascripts/chart/ratingHistory.js
@ -56,7 +56,7 @@ lichess.ratingHistoryChart = function(data, singlePerfName) {
          'Dash', // Puzzle
          'Dash' // Ultrabullet
        ].filter(indexFilter);
-        $(this).highcharts('StockChart', {
+        Highcharts.stockChart(this, {
          yAxis: {
            title: noText
          },
--- a/public/javascripts/lag.js
+++ b/public/javascripts/lag.js
@ -1,4 +1,4 @@
-$(function() {
+lichess.load.then(() => {

  Highcharts.makeFont = function(size) {
    return size + "px 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif";
@ -191,12 +191,13 @@ $(function() {
  };

  var charts = {};
-  $('.server .meter').highcharts(buildChart({
+
+  Highcharts.chart(document.querySelector('.server .meter'), buildChart({
    title: 'SERVER'
  }), function(c) {
    charts.server = c;
  });
-  $('.network .meter').highcharts(buildChart({
+  Highcharts.chart(document.querySelector('.network .meter'), buildChart({
    title: 'PING'
  }), function(c) {
    charts.network = c;
@ -215,20 +216,14 @@ $(function() {
    $('.lag .answer span').hide().parent().find('.' + c).show();
  };

-  lichess.socket = new lichess.StrongSocket('/socket/v4', false, {
-    options: {
-      name: 'analyse'
-    },
-    receive(t, d) {
-      if (t === 'mlat') {
-        var v = parseInt(d);
-        charts.server.series[0].points[0].update(v);
-        values.server = v;
-        updateAnswer();
-      }
-    }
+  lichess.StrongSocket.firstConnect.then(() => lichess.socket.send('moveLat', true));
+
+  lichess.pubsub.on('socket.in.mlat', d => {
+    const v = parseInt(d);
+    charts.server.series[0].points[0].update(v);
+    values.server = v;
+    updateAnswer();
  });
-  lichess.StrongSocket.firstConnect.then(() =>lichess.socket.send('moveLat', true));

  setInterval(function() {
    const v = Math.round(lichess.socket.averageLag);
--- a/ui/@types/lichess/index.d.ts
+++ b/ui/@types/lichess/index.d.ts
@ -357,7 +357,6 @@ interface Cash {
  powerTip(options?: PowerTip.Options | 'show' | 'hide'): Cash;
  sparkline: any;
  clock: any;
-  highcharts(conf?: any): any;
 }

 declare namespace PowerTip {
--- a/ui/analyse/src/serverSideUnderboard.ts
+++ b/ui/analyse/src/serverSideUnderboard.ts
@ -38,7 +38,7 @@ export default function(element: HTMLElement, ctrl: AnalyseCtrl) {
        lastFen = fen;
      }
      if ($chart.length) {
-        chart = window.Highcharts && $chart.highcharts();
+        chart = $chart[0]!['highcharts'];
        if (chart) {
          if (mainlinePly != chart.lastPly) {
            if (mainlinePly === false) unselect(chart);
@ -52,7 +52,7 @@ export default function(element: HTMLElement, ctrl: AnalyseCtrl) {
        }
      }
      if ($timeChart.length) {
-        chart = window.Highcharts && $timeChart.highcharts();
+        chart = $timeChart[0]!['highcharts'];
        if (chart) {
          if (mainlinePly != chart.lastPly) {
            if (mainlinePly === false) unselect(chart);
@ -109,7 +109,12 @@ export default function(element: HTMLElement, ctrl: AnalyseCtrl) {
    setPanel(panel);
  });
  const stored = storage.get();
-  if (stored && $menu.children(`[data-panel="${stored}"]:visible`).length) setPanel(stored);
+  const foundStored = stored && $menu.children(`[data-panel="${stored}"]`).
+    filter(function(this: HTMLElement) {
+      const display = window.getComputedStyle(this).display;
+      return !!display && display != 'none';
+    }).length;
+  if (foundStored) setPanel(stored!);
  else {
    const $menuCt = $menu.children('[data-panel="ctable"]');
    ($menuCt.length ? $menuCt : $menu.children(':first-child')).trigger('mousedown');
--- a/ui/analyse/src/study/serverEval.ts
+++ b/ui/analyse/src/study/serverEval.ts
@ -30,19 +30,14 @@ export function ctrl(root: AnalyseCtrl, chapterId: () => string): ServerEvalCtrl
  li.pubsub.on('analysis.change', (_fen: string, _path: string, mainlinePly: number | false) => {
    if (!li.advantageChart || lastPly() === mainlinePly) return;
    const lp = lastPly(typeof mainlinePly === 'undefined' ? lastPly() : mainlinePly),
-      el = chartEl();
-    if (el && window.Highcharts) {
-      const $chart = $(el);
-      if ($chart.length) {
-        const chart = $chart.highcharts();
-        if (chart) {
-          if (lp === false) unselect(chart);
-          else {
-            const point = chart.series[0].data[lp - 1 - root.tree.root.ply];
-            if (defined(point)) point.select();
-            else unselect(chart);
-          }
-        } else lastPly(false);
+      el = chartEl(),
+      chart = el && el['highcharts'];
+    if (chart) {
+      if (lp === false) unselect(chart);
+      else {
+        const point = chart.series[0].data[lp - 1 - root.tree.root.ply];
+        if (defined(point)) point.select();
+        else unselect(chart);
      }
    } else lastPly(false);
  });
--- a/ui/insight/src/chart.js
+++ b/ui/insight/src/chart.js
@ -216,7 +216,7 @@ function makeChart(el, data) {
    }
  };
  if (theme.colors) chartConf.colors = theme.colors;
-  $(el).highcharts(chartConf);
+  Highcharts.chart(el, chartConf);
 }

 function empty(txt) {
--- a/ui/site/css/_lag.scss
+++ b/ui/site/css/_lag.scss
@ -33,7 +33,7 @@
  }

  p {
-    margin: 1em 0;
+    margin: 1em;
  }

  h2 {