deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

Merge pull request #9155 from benediktwerner/movetime-chart-fix-select 

Fix movetime chart select
pull/9180/head
Thibault Duplessis 2021-06-14 09:32:46 +02:00 committed by GitHub
parent 75905a1f87 9d6d9e1916
commit 0f7ed93c79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/javascripts/chart/acpl.js
View File

@ -150,6 +150,11 @@ lichess.advantageChart = function (data, trans, el) {
],
},
});
el.highcharts.selectPly = ply => {
const point = el.highcharts.series[0].data[ply - 1 - data.game.startedAtTurn];
if (point) point.select(true);
else el.highcharts.getSelectedPoints().forEach(point => point.select(false));
};
lichess.pubsub.emit('analysis.change.trigger');
});
});

108
public/javascripts/chart/movetime.js
View File

@ -101,33 +101,74 @@ lichess.movetimeChart = function (data, trans, hunter) {
const noText = {
text: null,
};
const sharedTypeOptions = {
const clickableOptions = {
cursor: 'pointer',
events: {
click: event => {
if (event.point) {
const x = event.point.x;
const p = this.highcharts.series[(tree[x]?.ply ?? x) % 2].data[x >> 1];
const p = this.highcharts.series[(showTotal ? 4 : 0) + ((tree[x]?.ply ?? x) % 2)].data[x >> 1];
if (p) p.select(true);
lichess.pubsub.emit('analysis.chart.click', x);
}
},
},
};
const foregrondLineOptions = {
...clickableOptions,
color: highlightColor,
lineWidth: hunter ? 1 : 2,
states: {
hover: {
lineWidth: hunter ? 1 : 2,
},
},
marker: {
radius: 1,
states: {
hover: {
radius: 3,
lineColor: highlightColor,
fillColor: 'white',
},
select: {
radius: 4,
lineColor: highlightColor,
fillColor: 'white',
},
},
},
};
this.highcharts = Highcharts.chart(this, {
credits: disabled,
legend: disabled,
series: [
...(showTotal
? [
{
name: 'White Clock Area',
type: 'area',
yAxis: 1,
data: totalSeries.white,
},
{
name: 'Black Clock Area',
type: 'area',
yAxis: 1,
data: totalSeries.black,
},
]
: []),
{
name: 'White',
name: 'White Move Time',
type: hunter ? 'area' : 'column',
yAxis: 0,
data: moveSeries.white,
borderColor: whiteColumnBorder,
},
{
name: 'Black',
name: 'Black Move Time',
type: hunter ? 'area' : 'column',
yAxis: 0,
data: moveSeries.black,
@ -136,14 +177,14 @@ lichess.movetimeChart = function (data, trans, hunter) {
...(showTotal
? [
{
name: 'White Clock',
type: 'area',
name: 'White Clock Line',
type: 'line',
yAxis: 1,
data: totalSeries.white,
},
{
name: 'Black Clock',
type: 'area',
name: 'Black Clock Line',
type: 'line',
yAxis: 1,
data: totalSeries.black,
},
@ -170,45 +211,32 @@ lichess.movetimeChart = function (data, trans, hunter) {
animation: false,
},
area: {
...sharedTypeOptions,
...(hunter
? foregrondLineOptions
: {
...clickableOptions,
lineWidth: 0,
states: {
hover: {
lineWidth: 0,
},
},
marker: disabled,
}),
trackByArea: true,
fillColor: whiteAreaFill,
negativeFillColor: blackAreaFill,
threshold: 0,
lineWidth: hunter ? 1 : 2,
color: highlightColor,
states: {
hover: {
lineWidth: hunter ? 1 : 2,
},
},
marker: {
radius: 1,
states: {
hover: {
radius: 3,
lineColor: highlightColor,
fillColor: 'white',
},
select: {
radius: 4,
lineColor: highlightColor,
fillColor: 'white',
},
},
},
},
line: foregrondLineOptions,
column: {
...sharedTypeOptions,
...clickableOptions,
color: whiteColumnFill,
negativeColor: blackColumnFill,
grouping: false,
groupPadding: 0,
pointPadding: 0,
states: {
hover: {
enabled: false,
},
hover: disabled,
select: {
enabled: !showTotal,
color: highlightColor,
@ -250,6 +278,14 @@ lichess.movetimeChart = function (data, trans, hunter) {
},
],
});
this.highcharts.selectPly = ply => {
const white = ply % 2 !== 0;
const serie = (white ? 0 : 1) + (showTotal ? 4 : 0);
const turn = Math.floor((ply - 1 - data.game.startedAtTurn) / 2);
const point = this.highcharts.series[serie].data[turn];
if (point) point.select(true);
else this.highcharts.getSelectedPoints().forEach(point => point.select(false));
};
});
lichess.pubsub.emit('analysis.change.trigger');
};

21
ui/analyse/src/serverSideUnderboard.ts
View File

@ -2,13 +2,13 @@ import type Highcharts from 'highcharts';
import AnalyseCtrl from './ctrl';
import { baseUrl } from './util';
import { defined } from 'common';
import modal from 'common/modal';
import { formToXhr } from 'common/xhr';
import { AnalyseData } from './interfaces';
interface PlyChart extends Highcharts.ChartObject {
lastPly?: Ply | false;
selectPly(ply: number): void;
}
export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
@ -41,32 +41,21 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
lastFen = fen;
}
if ($chart.length) {
const chart: PlyChart = ($chart[0] as HighchartsHTMLElement).highcharts;
const chart = ($chart[0] as HighchartsHTMLElement).highcharts as PlyChart;
if (chart) {
if (mainlinePly != chart.lastPly) {
if (mainlinePly === false) unselect(chart);
else {
const point = chart.series[0].data[mainlinePly - 1 - data.game.startedAtTurn];
if (defined(point)) point.select();
else unselect(chart);
}
else chart.selectPly(mainlinePly);
}
chart.lastPly = mainlinePly;
}
}
if ($timeChart.length) {
const chart: PlyChart = ($timeChart[0] as HighchartsHTMLElement).highcharts;
const chart = ($timeChart[0] as HighchartsHTMLElement).highcharts as PlyChart;
if (chart) {
if (mainlinePly != chart.lastPly) {
if (mainlinePly === false) unselect(chart);
else {
const white = mainlinePly % 2 !== 0;
const serie = white ? 0 : 1;
const turn = Math.floor((mainlinePly - 1 - data.game.startedAtTurn) / 2);
const point = chart.series[serie].data[turn];
if (defined(point)) point.select();
else unselect(chart);
}
else chart.selectPly(mainlinePly);
}
chart.lastPly = mainlinePly;
}