Localize scoreboard chart dates and hide unstarted assignment markers

Tooltip and x-axis labels in the points-over-time and challenge plots now
use Intl.DateTimeFormat with the user's locale. The points-over-time chart
only renders assignment boundary markers for assignments whose start date
has already passed. Also fix pre-existing typecheck errors in the ECharts
series/markLine options and resolve a type-identity conflict between the
'echarts' and 'echarts/core' module declarations.

Author: Nils Bars

spa-frontend/src/components/scoreboard/ChallengePlot.vue

@@ -97,18 +97,18 @@ function buildSeries() {
       },
       markLine: index === 0 && baseline !== null
         ? {
-            symbol: ['none', 'none'],
+            symbol: ['none', 'none'] as ['none', 'none'],
             animation: false,
             label: {
               show: true,
-              position: 'insideMiddleTop',
+              position: 'insideMiddleTop' as const,
               distance: 4,
               formatter: 'baseline',
               color: mark.label,
             },
             lineStyle: {
               color: mark.line,
-              type: 'dashed',
+              type: 'dashed' as const,
               width: 1,
             },
             data: [{ yAxis: baseline }],

spa-frontend/src/components/scoreboard/PointsOverTimeChart.vue

@@ -33,7 +33,9 @@ function buildSeries() {
     showSymbol: true,
     symbol: getTeamSymbol(team),
     symbolSize: 10,
-    data: scores.map(({ time, score }) => ({ value: [time, score] })),
+    data: scores.map(({ time, score }) => ({
+      value: [time, score] as [number, number],
+    })),
     lineStyle: {
       width: 2,
       color: getTeamColor(team),
@@ -46,21 +48,21 @@ function buildSeries() {
     },
     markLine: index === 0 && props.assignmentBoundaries.length > 0
       ? {
-          symbol: ['none', 'none'],
+          symbol: ['none', 'none'] as ['none', 'none'],
           animation: false,
           label: {
             show: true,
-            position: 'middle',
+            position: 'middle' as const,
             rotate: 90,
-            align: 'center',
-            verticalAlign: 'middle',
+            align: 'center' as const,
+            verticalAlign: 'middle' as const,
             color: mark.label,
             formatter: ({ dataIndex }: { dataIndex: number }) =>
               `Assignment ${dataIndex + 1}`,
           },
           lineStyle: {
             color: mark.line,
-            type: 'dashed',
+            type: 'dashed' as const,
             width: 1,
           },
           data: props.assignmentBoundaries.map((time) => ({

spa-frontend/src/components/scoreboard/chartSetup.ts

@@ -8,7 +8,9 @@ import {
   TooltipComponent,
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import type { EChartsOption, EChartsType } from 'echarts';
+import type { EChartsOption } from 'echarts';
+
+type EChartsInstance = ReturnType<typeof echarts.init>;
 
 echarts.use([
   LineChart,
@@ -121,14 +123,28 @@ export function onThemeChange(listener: () => void): () => void {
 }
 
 const tooltipDateFormatter = new Intl.DateTimeFormat(undefined, {
-  day: '2-digit',
-  month: '2-digit',
-  hour: '2-digit',
-  minute: '2-digit',
+  dateStyle: 'short',
+  timeStyle: 'short',
+});
+
+const axisDateFormatter = new Intl.DateTimeFormat(undefined, {
+  dateStyle: 'short',
 });
 
+const axisTimeFormatter = new Intl.DateTimeFormat(undefined, {
+  timeStyle: 'short',
+});
+
+export function formatAxisDate(value: number): string {
+  return axisDateFormatter.format(new Date(value));
+}
+
+export function formatAxisTime(value: number): string {
+  return axisTimeFormatter.format(new Date(value));
+}
+
 export type ManagedChart = {
-  chart: EChartsType;
+  chart: EChartsInstance;
   resizeObserver: ResizeObserver;
 };
 
@@ -212,7 +228,11 @@ export function buildCommonOptions(xMin: number, xMax?: number): EChartsOption {
       type: 'time',
       min: xMin || undefined,
       max: xMax || undefined,
-      axisLabel: { color: t.axisLabel },
+      axisLabel: {
+        color: t.axisLabel,
+        hideOverlap: true,
+        formatter: (value: number) => formatAxisDate(value),
+      },
       axisLine: { lineStyle: { color: t.axisLine } },
       splitLine: { lineStyle: { color: t.splitLine } },
     },

spa-frontend/src/pages/Scoreboard.vue

@@ -125,7 +125,10 @@ const scoresOverTime = computed(() => {
 });
 const assignmentBoundaries = computed(() => {
   if (!config.value) return [];
-  return computeAssignmentStartTimes(assignments.value);
+  const now = Date.now();
+  return computeAssignmentStartTimes(assignments.value).filter(
+    (d) => d.getTime() <= now,
+  );
 });
 
 const activeChallenges = computed(() => {