diff --git a/src/lib/components/charts/GwCrewHistoryChart.svelte b/src/lib/components/charts/GwCrewHistoryChart.svelte index 629fe757..98f74b5c 100644 --- a/src/lib/components/charts/GwCrewHistoryChart.svelte +++ b/src/lib/components/charts/GwCrewHistoryChart.svelte @@ -20,16 +20,46 @@ : 0 ) + // Check if data has any gaps + const hasGaps = $derived(data.some((d) => d.isGap)) + + // Build gap connection data: only show values at gap boundaries for dashed line + // This creates a dashed line connecting across gaps + const gapConnectionData = $derived.by(() => { + if (!hasGaps) return [] + + const result: (number | null)[] = [] + for (let i = 0; i < data.length; i++) { + const current = data[i] + const prev = data[i - 1] + const next = data[i + 1] + + // Include this point if it's adjacent to a gap + const isBeforeGap = !current?.isGap && next?.isGap + const isAfterGap = !current?.isGap && prev?.isGap + + if (isBeforeGap || isAfterGap) { + result.push(current?.totalScore ?? null) + } else { + result.push(null) + } + } + return result + }) + const options = $derived({ textStyle: { fontFamily: CHART_FONT_FAMILY }, tooltip: { trigger: 'axis' as const, formatter: (params: unknown) => { - const p = params as Array<{ name: string; value: number; dataIndex: number }> + const p = params as Array<{ name: string; value: number | null; dataIndex: number }> const point = p[0] if (!point) return '' const dataPoint = data[point.dataIndex] - return `${point.name}
Score: ${formatScore(point.value)}
${dataPoint?.date ?? ''}` + if (dataPoint?.isGap) { + return `${point.name}
Not in crew
${dataPoint?.date ?? ''}` + } + return `${point.name}
Score: ${formatScore(point.value ?? 0)}
${dataPoint?.date ?? ''}` } }, toolbox: { @@ -88,16 +118,32 @@ } }, series: [ + // Main series: solid line, breaks at gaps (null values) { type: 'line' as const, data: data.map((d) => d.totalScore), smooth: true, symbol: 'circle', symbolSize: 8, + connectNulls: false, lineStyle: { width: 2, color: '#2563eb' }, itemStyle: { color: '#2563eb' }, areaStyle: { opacity: 0.1, color: '#2563eb' } - } + }, + // Gap connection series: dashed line connecting across gaps + ...(hasGaps + ? [ + { + type: 'line' as const, + data: gapConnectionData, + smooth: true, + symbol: 'none', + connectNulls: true, + lineStyle: { width: 1.5, color: '#94a3b8', type: 'dashed' as const }, + z: 0 // Behind the main series + } + ] + : []) ] })