pali112
/
workout-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Scale plot relative to max intensity

This commit is contained in:
Rene Saarsoo 2020-10-02 00:00:31 +03:00
parent f5c7214d73
commit 62681f470b
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/WorkoutPlot.tsx
View File

@ -38,10 +38,10 @@ const zoneColor = (intensity: Intensity | IntensityRange | FreeIntensity): strin
return "#7f7f7f"; return "#7f7f7f";
} }
const toBarProps = (interval: Interval, workoutDuration: Duration): BarProps => ({ const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
background: zoneColor(interval.intensity), background: zoneColor(interval.intensity),
width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`, width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`,
height: `${interval.intensity.value * 100}%`, height: `${interval.intensity.value / maxIntensity.value * 100}%`,
}); });
const Plot = styled.div` const Plot = styled.div`
@ -55,12 +55,16 @@ const Plot = styled.div`
margin: 10px 0; margin: 10px 0;
`; `;
const maximumIntensity = (intervals: Interval[]): Intensity =>
new Intensity(Math.max(...intervals.map(interval => Math.max(interval.intensity.start, interval.intensity.end))));
export const WorkoutPlot: React.FC<{ intervals: Interval[] }> = ({ intervals }) => { export const WorkoutPlot: React.FC<{ intervals: Interval[] }> = ({ intervals }) => {
const workoutDuration = totalDuration(intervals); const workoutDuration = totalDuration(intervals);
const maxIntensity = maximumIntensity(intervals);
return ( return (
<Plot> <Plot>
{ intervals.map((interval) => toBarProps(interval, workoutDuration)).map((props) => (<Bar {...props} />)) } { intervals.map((interval) => toBarProps(interval, workoutDuration, maxIntensity)).map((props) => (<Bar {...props} />)) }
</Plot> </Plot>
); );
} }