diff --git a/src/components/WorkoutStats.tsx b/src/components/WorkoutStats.tsx index 85924ed..bd7bd62 100644 --- a/src/components/WorkoutStats.tsx +++ b/src/components/WorkoutStats.tsx @@ -1,12 +1,18 @@ -import React from 'react'; -import { stats, Workout, Intensity } from 'zwiftout'; -import { formatDuration } from './formatDuration'; -import styled from 'styled-components'; +import React from "react"; +import { stats, Workout, Intensity } from "zwiftout"; +import { formatDuration } from "./formatDuration"; +import styled from "styled-components"; -const formatIntensity = (intensity: Intensity): string => `${Math.round(intensity.value * 100)}%`; +const formatIntensity = (intensity: Intensity): string => + `${Math.round(intensity.value * 100)}%`; -const StatsLine: React.FC<{ label: string, value: string | number }> = ({ label, value }) => ( -
  • {label} {value}
  • +const StatsLine: React.FC<{ label: string; value: string | number }> = ({ + label, + value, +}) => ( +
  • + {label} {value} +
  • ); const Container = styled.div` @@ -35,27 +41,44 @@ const ZoneList = styled(List)` grid-template-columns: 1fr 1fr 1fr; `; +export const WorkoutStats: React.FC<{ workout: Workout }> = ({ workout }) => { + const { + totalDuration, + averageIntensity, + normalizedIntensity, + tss, + zones, + } = stats(workout); -export const WorkoutStats: React.FC<{workout: Workout}> = ({ workout }) => { - const {totalDuration, averageIntensity, normalizedIntensity, tss, zones} = stats(workout); - return (
    Summary
    - - + +
    Zone distribution
    - {zones.map(zone => ()) } + {zones.map((zone) => ( + + ))}
    - ) + ); };