31 lines
1016 B
TypeScript
31 lines
1016 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { Interval, Intensity, Duration, totalDuration, maximumIntensity } from "zwiftout";
|
|
import { BarProps, Bar } from "./Bar";
|
|
|
|
const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
|
|
zone: interval.intensity.zone,
|
|
durationPercentage: interval.duration.seconds / workoutDuration.seconds * 100,
|
|
intensityPercentage: interval.intensity.value / maxIntensity.value * 100,
|
|
});
|
|
|
|
const Plot = styled.div`
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
height: 200px;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
margin: 10px 0;
|
|
`;
|
|
|
|
export const WorkoutPlot: React.FC<{ intervals: Interval[] }> = ({ intervals }) => {
|
|
const workoutDuration = totalDuration(intervals);
|
|
const maxIntensity = maximumIntensity(intervals);
|
|
|
|
return (
|
|
<Plot>
|
|
{ intervals.map((interval) => toBarProps(interval, workoutDuration, maxIntensity)).map((props, i) => (<Bar key={i} {...props} />)) }
|
|
</Plot>
|
|
);
|
|
}
|