migrate highcharts

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"),

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: [{

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: [{

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
           },

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
           },

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

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 {

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');

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();
+      el = chartEl(),
-    if (el && window.Highcharts) {
+      chart = el && el['highcharts'];
-      const $chart = $(el);
+    if (chart) {
-      if ($chart.length) {
+      if (lp === false) unselect(chart);
-        const chart = $chart.highcharts();
+      else {
-        if (chart) {
+        const point = chart.series[0].data[lp - 1 - root.tree.root.ply];
-          if (lp === false) unselect(chart);
+        if (defined(point)) point.select();
-          else {
+        else unselect(chart);
-            const point = chart.series[0].data[lp - 1 - root.tree.root.ply];
-            if (defined(point)) point.select();
-            else unselect(chart);
-          }
-        } else lastPly(false);
       }
     } else lastPly(false);
   });

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) {

ui/site/css/_lag.scss

@@ -33,7 +33,7 @@
   }
 
   p {
-    margin: 1em 0;
+    margin: 1em;
   }
 
   h2 {