Merge pull request lichess-org#14409 from allanjoseph98/perf-chart-single-point

More chart fixes.

Author: ornicar

ui/chart/src/lag.ts

@@ -6,10 +6,9 @@ import {
   ChartType,
   DoughnutController,
   Title,
-  Tooltip,
 } from 'chart.js';
 import dataLabels from 'chartjs-plugin-datalabels';
-import { fontColor, fontFamily, tooltipBgColor, resizePolyfill } from './common';
+import { fontColor, fontFamily, resizePolyfill } from './common';
 
 declare module 'chart.js' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -21,7 +20,7 @@ declare module 'chart.js' {
 }
 
 resizePolyfill();
-Chart.register(DoughnutController, ArcElement, Tooltip, dataLabels, Title);
+Chart.register(DoughnutController, ArcElement, dataLabels, Title);
 Chart.defaults.font = fontFamily();
 
 const v = {
@@ -40,7 +39,6 @@ export async function initModule() {
         hoverBackgroundColor: colors,
         borderColor: '#d9d9d9',
         borderWidth: 3,
-        hoverBorderWidth: 4,
         circumference: 180,
         rotation: 270,
       },
@@ -52,30 +50,13 @@ export async function initModule() {
         datasets: dataset,
       },
       options: {
-        interaction: {
-          mode: 'dataset',
-          axis: 'r',
-        },
+        events: [],
         plugins: {
           title: {
             display: true,
             text: '',
             padding: { top: 100 },
-          },
-          tooltip: {
-            backgroundColor: tooltipBgColor,
-            titleColor: fontColor,
-            borderColor: fontColor,
-            borderWidth: 1,
-            callbacks: {
-              title: () => {
-                const lat = index ? v.network : v.server;
-                const text = index ? 'Ping:' : 'Server Latency:';
-                if (lat <= 0) return '';
-                return `${text} ${lat}` + ' milliseconds';
-              },
-              label: () => '',
-            },
+            color: fontColor,
           },
           needle: {
             value: index ? v.network : v.server,

ui/chart/src/ratingHistory.ts

@@ -19,6 +19,7 @@ import noUiSlider, { Options, PipsMode } from 'nouislider';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import dayOfYear from 'dayjs/plugin/dayOfYear';
+import { memoize } from 'common';
 
 interface Opts {
   data: PerfRatingHistory[];
@@ -66,6 +67,21 @@ const styles: ChartPerf[] = [
 
 const oneDay = 24 * 60 * 60 * 1000;
 
+const dateFormat = memoize(() =>
+  window.Intl && Intl.DateTimeFormat
+    ? new Intl.DateTimeFormat(
+        document.documentElement.lang.startsWith('ar-') ? 'ar-ly' : document.documentElement.lang,
+        {
+          month: 'short',
+          day: '2-digit',
+          year: 'numeric',
+        },
+      ).format
+    : (d: Date) => d.toLocaleDateString(),
+);
+
+const utcOffset = -dayjs().utcOffset() * 60 * 1000;
+
 export function initModule({ data, singlePerfName }: Opts) {
   $('.spinner').remove();
 
@@ -76,9 +92,8 @@ export function initModule({ data, singlePerfName }: Opts) {
     return;
   }
   const allData = makeDatasets(1, { data, singlePerfName }, singlePerfIndex);
-  let startDate = dayjs(allData.startDate);
-  const endDate = dayjs(allData.endDate);
-  if (startDate.diff(endDate, 'D') < 1) startDate = startDate.subtract(1, 'day');
+  const startDate = allData.startDate;
+  const endDate = allData.endDate;
   const weeklyData = makeDatasets(7, { data, singlePerfName }, singlePerfIndex);
   const biweeklyData = makeDatasets(14, { data, singlePerfName }, singlePerfIndex);
   const threeMonthsAgo = endDate.subtract(3, 'M');
@@ -106,10 +121,6 @@ export function initModule({ data, singlePerfName }: Opts) {
           max: endDate.valueOf(),
           type: 'time',
           display: false,
-          time: {
-            tooltipFormat: 'MMM DD, YYYY',
-            minUnit: 'day',
-          },
           clip: false,
           ticks: {
             source: 'data',
@@ -175,6 +186,10 @@ export function initModule({ data, singlePerfName }: Opts) {
           borderWidth: 1,
           yAlign: 'center',
           caretPadding: 10,
+          rtl: document.dir == 'rtl',
+          callbacks: {
+            title: items => dateFormat()(new Date(items[0].parsed.x + utcOffset)),
+          },
         },
       },
     },
@@ -266,23 +281,23 @@ function makeDatasets(step: number, { data, singlePerfName }: Opts, singlePerfIn
   const minMax = (d: PerfRatingHistory) => [getDate(d.points[0]), getDate(d.points[d.points.length - 1])];
   const filteredData = data.filter(indexFilter);
   const dates = filteredData.filter(p => p.points.length).flatMap(minMax);
-  const startDate = Math.min(...dates);
-  const endDate = Math.max(...dates);
+  let startDate = dayjs(Math.min(...dates));
+  let endDate = dayjs(Math.max(...dates));
   const ds: ChartDataset<'line'>[] = filteredData.map((serie, i) => {
     const originalDatesAndRatings = serie.points.map(r => ({
       ts: getDate(r),
       rating: r[3],
     }));
     const perfStyle = styles.filter(indexFilter)[i];
-    const data = smoothDates(originalDatesAndRatings, step, startDate);
+    const data = smoothDates(originalDatesAndRatings, step, startDate.valueOf());
     return {
       indexAxis: 'x',
       type: 'line',
       label: serie.name,
       borderColor: perfStyle.color,
       hoverBorderColor: hoverBorderColor,
       backgroundColor: perfStyle.color,
-      pointRadius: 0,
+      pointRadius: data.length == 1 ? 3 : 0,
       pointHoverRadius: 6,
       data: data,
       pointStyle: perfStyle.symbol,
@@ -293,20 +308,22 @@ function makeDatasets(step: number, { data, singlePerfName }: Opts, singlePerfIn
       animation: false,
     };
   });
+  if (endDate.diff(startDate, 'day') < 1) {
+    startDate = startDate.subtract(1, 'day');
+    endDate = endDate.add(1, 'day');
+  }
   return { ds: ds.filter(ds => ds.data.length), startDate, endDate };
 }
 function smoothDates(data: TsAndRating[], step: number, begin: number) {
   const oneStep = oneDay * step;
   if (!data.length) return [];
-  if (data.length == 1) return [{ x: begin, y: data[0].rating }];
 
   const end = data[data.length - 1].ts;
   const reversed = data.slice().reverse();
   const allDates: number[] = [];
   for (let i = begin; i <= end; i += oneStep) allDates.push(i);
-  if (!allDates.find(d => d == end)) allDates.push(end);
   const result: Point[] = [];
-  for (let j = 1; j < allDates.length; j++) {
+  for (let j = 0; j < allDates.length; j++) {
     const match = reversed.find(x => x.ts <= allDates[j]);
     if (match) result.push({ x: allDates[j], y: match.rating });
   }