From 754ef73585965a5aae0cf10340b1d80354de2f6c Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Sun, 13 Sep 2020 09:22:38 +0200 Subject: [PATCH] migrate highcharts --- app/views/user/show/page.scala | 2 +- public/javascripts/chart/acpl.js | 6 ++--- public/javascripts/chart/movetime.js | 2 +- .../javascripts/chart/ratingDistribution.js | 2 +- public/javascripts/chart/ratingHistory.js | 2 +- public/javascripts/lag.js | 27 ++++++++----------- ui/@types/lichess/index.d.ts | 1 - ui/analyse/src/serverSideUnderboard.ts | 11 +++++--- ui/analyse/src/study/serverEval.ts | 21 ++++++--------- ui/insight/src/chart.js | 2 +- ui/site/css/_lag.scss | 2 +- 11 files changed, 36 insertions(+), 42 deletions(-) diff --git a/app/views/user/show/page.scala b/app/views/user/show/page.scala index 1c18ce0c2a..adf75a7ddc 100644 --- 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"), diff --git a/public/javascripts/chart/acpl.js b/public/javascripts/chart/acpl.js index da2e6c11ee..52c6cf734d 100644 --- 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: [{ diff --git a/public/javascripts/chart/movetime.js b/public/javascripts/chart/movetime.js index 1ac96070d0..dc58e90a28 100644 --- 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: [{ diff --git a/public/javascripts/chart/ratingDistribution.js b/public/javascripts/chart/ratingDistribution.js index a9e28dadb6..b2053d096e 100644 --- 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 }, diff --git a/public/javascripts/chart/ratingHistory.js b/public/javascripts/chart/ratingHistory.js index be123d5ab6..3dc5027f1b 100644 --- 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 }, diff --git a/public/javascripts/lag.js b/public/javascripts/lag.js index fbc629cf75..79990e0d0b 100644 --- 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); diff --git a/ui/@types/lichess/index.d.ts b/ui/@types/lichess/index.d.ts index 9bb7fcb794..3e76cb9bfe 100644 --- 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 { diff --git a/ui/analyse/src/serverSideUnderboard.ts b/ui/analyse/src/serverSideUnderboard.ts index 9aa9d3fcf1..f4998455d0 100644 --- 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'); diff --git a/ui/analyse/src/study/serverEval.ts b/ui/analyse/src/study/serverEval.ts index bf1f039387..0a60e9d6cf 100644 --- 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); }); diff --git a/ui/insight/src/chart.js b/ui/insight/src/chart.js index d967bad932..7d63084dc4 100644 --- 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) { diff --git a/ui/site/css/_lag.scss b/ui/site/css/_lag.scss index f2f636daf0..5335ca5b4c 100644 --- a/ui/site/css/_lag.scss +++ b/ui/site/css/_lag.scss @@ -33,7 +33,7 @@ } p { - margin: 1em 0; + margin: 1em; } h2 {