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

Add support for FreeRide bar in the plot

This commit is contained in:
Rene Saarsoo 2020-10-03 17:21:50 +03:00
parent 285e268489
commit 2046f1adc9
3 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -10,7 +10,7 @@ Warmup: 10:00 30%..60%
Interval: 20:00 100% Interval: 20:00 100%
Rest: 10:00 75% Rest: 10:00 75%
Interval: 20:00 100% Interval: 20:00 100%
Rest: 10:00 75% FreeRide: 10:00
Cooldown: 10:00 60%..30% Cooldown: 10:00 60%..30%
`; `;

23
src/components/Bar.tsx
View File

@ -1,22 +1,23 @@
import styled from "styled-components"; import styled from "styled-components";
import { ZoneIndex } from "make-workout"; import { ZoneType } from "make-workout";
export type BarProps = { export type BarProps = {
// Percentage of total workout length // Percentage of total workout length
durationPercentage: number; durationPercentage: number;
// Percentage of maximum intensity in workout // Percentage of maximum intensity in workout
intensityPercentage: number; intensityPercentage: number;
zone: ZoneIndex; zone: ZoneType;
}; };
const zoneColorsMap: Record<ZoneIndex, string> = { const zoneColorsMap: Record<ZoneType, string> = {
0: "#7f7f7f", "free": "linear-gradient(to top, rgba(204,204,204,1), rgba(255,255,255,0))",
1: "#338cff", "Z1": "#7f7f7f",
2: "#59bf59", "Z2": "#338cff",
3: "#ffcc3f", "Z3": "#59bf59",
4: "#ff6639", "Z4": "#ffcc3f",
5: "#ff330c", "Z5": "#ff6639",
} "Z6": "#ff330c",
};
export const Bar = styled.div<BarProps>` export const Bar = styled.div<BarProps>`
display: inline-block; display: inline-block;
@ -25,7 +26,7 @@ export const Bar = styled.div<BarProps>`
margin-right: 0.1%; margin-right: 0.1%;
/* exclude 0.1% margin from bar width */ /* exclude 0.1% margin from bar width */
width: ${(props) => props.durationPercentage - 0.1}%; width: ${(props) => props.durationPercentage - 0.1}%;
height: ${(props) => props.intensityPercentage}%; height: ${(props) => props.zone === "free" ? 100 : props.intensityPercentage}%;
background: ${(props) => zoneColorsMap[props.zone]}; background: ${(props) => zoneColorsMap[props.zone]};
transition: width 0.1s, height 0.1s, background-color 0.1s; transition: width 0.1s, height 0.1s, background-color 0.1s;
`; `;

4
src/components/WorkoutPlot.tsx
View File

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { Interval, Intensity, Duration, totalDuration, intensityToZoneIndex, maximumIntensity } from "make-workout"; import { Interval, Intensity, Duration, totalDuration, maximumIntensity } from "make-workout";
import { BarProps, Bar } from "./Bar"; import { BarProps, Bar } from "./Bar";
const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({ const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
zone: intensityToZoneIndex(interval.intensity), zone: interval.intensity.zone,
durationPercentage: interval.duration.seconds / workoutDuration.seconds * 100, durationPercentage: interval.duration.seconds / workoutDuration.seconds * 100,
intensityPercentage: interval.intensity.value / maxIntensity.value * 100, intensityPercentage: interval.intensity.value / maxIntensity.value * 100,
}); });