-
- {/* Legend */}
-
+ {/* Chart */}
+ {(() => {
+ const combinedData = getCombinedChartData()
+ const dataMaxTime = combinedData.length > 0 ? combinedData[combinedData.length - 1].time : 0
+ const maxPressure = Math.max(...combinedData.map(d => Math.max(d.pressureA || 0, d.pressureB || 0)), 12)
+ const maxFlow = Math.max(...combinedData.map(d => Math.max(d.flowA || 0, d.flowB || 0)), 8)
+ const maxWeight = Math.max(...combinedData.map(d => Math.max(d.weightA || 0, d.weightB || 0)), 50)
+ const leftDomain = Math.ceil(Math.max(maxPressure, maxFlow) * 1.1)
+ const rightDomain = Math.ceil(maxWeight * 1.1)
+ const isShowingReplay = comparisonCurrentTime > 0 && comparisonCurrentTime < dataMaxTime
+
+ return (
+
+ )
+ })()}
{/* Replay Controls */}
@@ -2691,55 +2526,21 @@ export function ShotHistoryView({ profileName, onBack }: ShotHistoryViewProps) {
? stageRanges.filter(s => s.startTime <= currentTime).map(s => ({ ...s, endTime: Math.min(s.endTime, currentTime) }))
: stageRanges
return (
- <>
-
-
- {isPlaying && (
-
-
- Replaying {playbackSpeed}x
-
- )}
-
-
-
-
-
-
- {displayStageRanges.map((stage, idx) => (
-
- ))}
- {isShowingReplay && }
- `${Math.round(v)}s`} axisLine={{ stroke: '#444' }} tickLine={{ stroke: '#444' }} domain={[0, dataMaxTime]} type="number" allowDataOverflow={false} />
-
-
- } />
-
-
-
-
- {hasGravFlow && }
-
-
-
-
- {/* Stage Legend */}
- {(() => {
- if (stageRanges.length === 0) return null
- return (
-
- {stageRanges.map((stage, idx) => (
-
- {typeof stage.name === 'string' ? stage.name : String(stage.name || '')}
-
- ))}
-
- )
- })()}
-
+
)
})()}
@@ -2753,47 +2554,18 @@ export function ShotHistoryView({ profileName, onBack }: ShotHistoryViewProps) {
const leftDomain = Math.ceil(Math.max(maxPressure, maxFlow) * 1.1)
const rightDomain = Math.ceil(maxWeight * 1.1)
const isShowingReplay = comparisonCurrentTime > 0 && comparisonCurrentTime < dataMaxTime
- const displayData = isShowingReplay ? combinedData.filter(d => d.time <= comparisonCurrentTime) : combinedData
return (
- <>
-
-
- {comparisonIsPlaying && (
-
-
- {comparisonPlaybackSpeed}x
-
- )}
-
-
-
-
-
-
- {isShowingReplay && }
- `${Math.round(v)}s`} domain={[0, dataMaxTime]} type="number" allowDataOverflow={false} />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Shot A (solid)
-
Shot B (dashed)
-
-
+
)
})()}
@@ -2815,86 +2587,17 @@ export function ShotHistoryView({ profileName, onBack }: ShotHistoryViewProps) {
const maxFlow = Math.max(...chartData.map(d => d.flow || 0), ...(analysisResult.profile_target_curves?.map(d => d.target_flow || 0) || []), 5)
const maxLeftAxis = Math.ceil(Math.max(maxPressure, maxFlow) * 1.1)
return (
- <>
-
-
- {hasTargetCurves && (
- Target overlay
- )}
-
-
-
-
-
-
- {stageRanges.map((stage, idx) => (
-
- ))}
- `${Math.round(v)}s`} axisLine={{ stroke: '#444' }} type="number" domain={[0, dataMaxTime]} />
-
-
- [`${value?.toFixed(1) || '-'}`, name]} labelFormatter={(label) => `${Number(label).toFixed(1)}s`} />
-
-
- {hasTargetCurves && analysisResult.profile_target_curves && (
- number }>; yAxisMap?: Record number }> }) => {
- if (!xAxisMap || !yAxisMap) return null
- const xAxis = Object.values(xAxisMap)[0]
- const yAxis = yAxisMap['left']
- if (!xAxis?.scale || !yAxis?.scale) return null
- const curves = analysisResult.profile_target_curves!
- const pressurePoints = curves.filter(p => p.target_pressure !== undefined).sort((a, b) => a.time - b.time)
- const flowPoints = curves.filter(p => p.target_flow !== undefined).sort((a, b) => a.time - b.time)
- let pressurePath = ''
- if (pressurePoints.length >= 2) pressurePath = pressurePoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xAxis.scale(p.time)} ${yAxis.scale(p.target_pressure!)}`).join(' ')
- let flowPath = ''
- if (flowPoints.length >= 2) flowPath = flowPoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xAxis.scale(p.time)} ${yAxis.scale(p.target_flow!)}`).join(' ')
- return (
-
- {pressurePath && <>
-
- {pressurePoints.map((p, i) => )}
- }
- {flowPath && <>
-
- {flowPoints.map((p, i) => )}
- }
-
- )
- }}
- />
- )}
-
-
-
-
- {/* Legend */}
-
-
-
- {hasTargetCurves && <>
-
-
- }
-
- {/* Stage Legend */}
- {(() => {
- if (stageRanges.length === 0) return null
- return (
-
- {stageRanges.map((stage, idx) => (
-
- {typeof stage.name === 'string' ? stage.name : String(stage.name || '')}
-
- ))}
-
- )
- })()}
-
+
)
})()}
diff --git a/apps/web/src/lib/chartStyles.ts b/apps/web/src/lib/chartStyles.ts
new file mode 100644
index 0000000..bd5e3e2
--- /dev/null
+++ b/apps/web/src/lib/chartStyles.ts
@@ -0,0 +1,63 @@
+// Chart colors matching Meticulous app style (muted to fit dark theme)
+export const CHART_COLORS = {
+ pressure: '#4ade80', // Green (muted)
+ flow: '#67e8f9', // Light cyan/blue (muted)
+ weight: '#fbbf24', // Amber/Yellow (muted)
+ gravimetricFlow: '#c2855a', // Brown-orange (muted to fit dark theme)
+ // Profile target curves (lighter/dashed versions of main colors)
+ targetPressure: '#86efac', // Lighter green for target pressure
+ targetFlow: '#a5f3fc' // Lighter cyan for target flow
+}
+
+// Stage colors for background areas (matching tag colors)
+export const STAGE_COLORS = [
+ 'rgba(239, 68, 68, 0.25)', // Red
+ 'rgba(249, 115, 22, 0.25)', // Orange
+ 'rgba(234, 179, 8, 0.25)', // Yellow
+ 'rgba(34, 197, 94, 0.25)', // Green
+ 'rgba(59, 130, 246, 0.25)', // Blue
+ 'rgba(168, 85, 247, 0.25)', // Purple
+ 'rgba(236, 72, 153, 0.25)', // Pink
+ 'rgba(20, 184, 166, 0.25)', // Teal
+]
+
+export const STAGE_BORDER_COLORS = [
+ 'rgba(239, 68, 68, 0.5)',
+ 'rgba(249, 115, 22, 0.5)',
+ 'rgba(234, 179, 8, 0.5)',
+ 'rgba(34, 197, 94, 0.5)',
+ 'rgba(59, 130, 246, 0.5)',
+ 'rgba(168, 85, 247, 0.5)',
+ 'rgba(236, 72, 153, 0.5)',
+ 'rgba(20, 184, 166, 0.5)',
+]
+
+// Darker text colors for stage pills — legible on both light and dark backgrounds
+export const STAGE_TEXT_COLORS_LIGHT = [
+ 'rgb(153, 27, 27)', // Red-800
+ 'rgb(154, 52, 18)', // Orange-800
+ 'rgb(133, 77, 14)', // Yellow-800
+ 'rgb(22, 101, 52)', // Green-800
+ 'rgb(30, 64, 175)', // Blue-800
+ 'rgb(107, 33, 168)', // Purple-800
+ 'rgb(157, 23, 77)', // Pink-800
+ 'rgb(17, 94, 89)', // Teal-800
+]
+
+export const STAGE_TEXT_COLORS_DARK = [
+ 'rgb(252, 165, 165)', // Red-300
+ 'rgb(253, 186, 116)', // Orange-300
+ 'rgb(253, 224, 71)', // Yellow-300
+ 'rgb(134, 239, 172)', // Green-300
+ 'rgb(147, 197, 253)', // Blue-300
+ 'rgb(216, 180, 254)', // Purple-300
+ 'rgb(249, 168, 212)', // Pink-300
+ 'rgb(94, 234, 212)', // Teal-300
+]
+
+// Comparison chart colors
+export const COMPARISON_COLORS = {
+ pressure: '#4ade80',
+ flow: '#67e8f9',
+ weight: '#fbbf24'
+}