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

Use intensityToZoneIndex helper

This commit is contained in:
Rene Saarsoo 2020-10-02 12:12:19 +03:00
parent 0c065d664e
commit 856f561d2d
1 changed files with 9 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/WorkoutPlot.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { Interval, Intensity, ConstantIntensity, Duration, totalDuration } from "make-workout"; import { Interval, Intensity, ConstantIntensity, Duration, totalDuration, ZoneIndex, intensityToZoneIndex } from "make-workout";
type BarProps = { type BarProps = {
width: string; width: string;
@ -19,27 +19,17 @@ const Bar = styled.div<BarProps>`
transition: width 0.1s, height 0.1s, background-color 0.1s; transition: width 0.1s, height 0.1s, background-color 0.1s;
`; `;
const zoneColor = (intensity: Intensity): string => { const zoneColorsMap: Record<ZoneIndex, string> = {
if (intensity.value >= 1.18) { 0: "#7f7f7f",
return "#ff330c"; 1: "#338cff",
} 2: "#59bf59",
if (intensity.value >= 1.05) { 3: "#ffcc3f",
return "#ff6639"; 4: "#ff6639",
} 5: "#ff330c",
if (intensity.value >= 0.90) {
return "#ffcc3f";
}
if (intensity.value >= 0.75) {
return "#59bf59";
}
if (intensity.value >= 0.60) {
return "#338cff";
}
return "#7f7f7f";
} }
const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({ const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
background: zoneColor(interval.intensity), background: zoneColorsMap[intensityToZoneIndex(interval.intensity)],
width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`, width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`,
height: `${interval.intensity.value / maxIntensity.value * 100}%`, height: `${interval.intensity.value / maxIntensity.value * 100}%`,
}); });