diff --git a/src/components/session-chart.tsx b/src/components/session-chart.tsx index 20ef52b..01a3335 100644 --- a/src/components/session-chart.tsx +++ b/src/components/session-chart.tsx @@ -109,16 +109,24 @@ export function SessionChart({ controlMode, history, keyboardEnabled = true, + onSelectChartMode, route, + selectedChartMode, speedUnit, }: { controlMode?: ControlMode; history: MetricSample[]; keyboardEnabled?: boolean; + onSelectChartMode?: (mode: ChartMode) => void; route: readonly RoutePoint[]; + selectedChartMode?: ChartMode; speedUnit: SpeedUnit; }) { - const selectedMode = useSelector(preferencesStore, (preferences) => preferences.chartMode); + const preferredChartMode = useSelector( + preferencesStore, + (preferences) => preferences.chartMode + ); + const selectedMode = selectedChartMode ?? preferredChartMode; const resolvedControlMode = controlMode ?? (history.some((sample) => sample.gear !== undefined) @@ -254,8 +262,8 @@ export function SessionChart({ chartHistory.length > 1 ? (chartHistory.at(-1)?.elapsedSeconds ?? 0) - historyStart : 0; const selectMode = useCallback( - (mode: ChartMode) => preferencesStore.actions.selectChartMode(mode), - [] + (mode: ChartMode) => (onSelectChartMode ?? preferencesStore.actions.selectChartMode)(mode), + [onSelectChartMode] ); useEffect(() => { diff --git a/src/components/session-detail.tsx b/src/components/session-detail.tsx index 9042644..f6984e8 100644 --- a/src/components/session-detail.tsx +++ b/src/components/session-detail.tsx @@ -16,7 +16,7 @@ import { import { sessionDetailScrollPositionStorageKey } from '../lib/session-history-preferences'; import { downloadSessionTcx } from '../lib/tcx'; import { workoutTerrainAtDistance } from '../lib/workouts'; -import type { SavedSession, SpeedUnit } from '../types'; +import type { ChartMode, SavedSession, SpeedUnit } from '../types'; import { SessionMetric } from './metrics'; import { SessionChart } from './session-chart'; import { SessionSummary } from './session-summary'; @@ -89,7 +89,9 @@ export function SessionDetail({ onCancelDelete, onConfirmDelete, onDelete, + onSelectChartMode, onStartNew, + selectedChartMode, session, speedUnit, }: { @@ -99,7 +101,9 @@ export function SessionDetail({ onCancelDelete?: () => void; onConfirmDelete?: () => void; onDelete?: () => void; + onSelectChartMode?: (mode: ChartMode) => void; onStartNew?: () => void; + selectedChartMode?: ChartMode; session: SavedSession; speedUnit: SpeedUnit; }) { @@ -269,7 +273,9 @@ export function SessionDetail({ controlMode={session.controlMode} history={session.history} keyboardEnabled={chartKeyboardEnabled} + onSelectChartMode={onSelectChartMode} route={session.workout ? session.workout.course.points : EMPTY_ROUTE} + selectedChartMode={selectedChartMode} speedUnit={speedUnit} /> diff --git a/src/components/session-history.tsx b/src/components/session-history.tsx index 47adb89..e536377 100644 --- a/src/components/session-history.tsx +++ b/src/components/session-history.tsx @@ -17,7 +17,8 @@ import { historyShortcutForKey, } from '../lib/keyboard'; import { adjacentSession } from '../lib/saved-sessions'; -import type { SavedSession, SpeedUnit } from '../types'; +import { preferencesStore } from '../stores/preferences-store'; +import type { ChartMode, SavedSession, SpeedUnit } from '../types'; import { KeyboardShortcutsDialog } from './keyboard-shortcuts-dialog'; import { SessionDetail } from './session-detail'; import { SessionHistoryList } from './session-history-list'; @@ -62,6 +63,9 @@ export function SessionHistory({ } = useSessionHistory(open); const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false); const [historyHelpOpen, setHistoryHelpOpen] = useState(false); + const [selectedChartMode, setSelectedChartMode] = useState( + () => preferencesStore.get().chartMode + ); const [downloadFormat, setDownloadFormat] = useState( ACTIVITY_FILE_FORMAT.FIT ); @@ -177,7 +181,9 @@ export function SessionHistory({ onCancelDelete={() => setDeleteConfirmationOpen(false)} onConfirmDelete={() => deleteSelectedSession()} onDelete={() => setDeleteConfirmationOpen(true)} + onSelectChartMode={setSelectedChartMode} onStartNew={() => onStartNew(selected)} + selectedChartMode={selectedChartMode} session={selected} speedUnit={speedUnit} /> diff --git a/tests/components.test.tsx b/tests/components.test.tsx index a3e6e07..e7015e4 100644 --- a/tests/components.test.tsx +++ b/tests/components.test.tsx @@ -929,6 +929,31 @@ describe('view components', () => { expect(gearModeWithoutSamples).toContain('Gear'); }); + test('supports a chart selection scoped outside the shared dashboard preference', () => { + const history = [ + { + cadence: 85, + elapsedSeconds: 1, + heartRate: 140, + power: 180, + resistance: 42, + speed: 30, + }, + ]; + const trayChart = render( + undefined} + route={[]} + selectedChartMode="power" + speedUnit="kmh" + /> + ); + expect(trayChart).toContain('Power over time'); + expect(trayChart).not.toContain('Speed over time'); + expect(trayChart).not.toContain('Cadence over time'); + }); + test('graphs recorded workout elevation with a distinct color', () => { const [course] = WORKOUT_COURSES; if (!course) {