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

Move bar color logic inside Bar

This commit is contained in:
Rene Saarsoo 2020-10-02 12:24:52 +03:00
parent 3c83f0a253
commit c76cfc3bfe
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Bar.tsx
View File

@ -1,18 +1,28 @@
import styled from "styled-components"; import styled from "styled-components";
import { ZoneIndex } from "make-workout";
export type BarProps = { export type BarProps = {
width: string; width: string;
height: string; height: string;
background: string; zone: ZoneIndex;
}; };
const zoneColorsMap: Record<ZoneIndex, string> = {
0: "#7f7f7f",
1: "#338cff",
2: "#59bf59",
3: "#ffcc3f",
4: "#ff6639",
5: "#ff330c",
}
export const Bar = styled.div<BarProps>` export const Bar = styled.div<BarProps>`
display: inline-block; display: inline-block;
border-radius: 10px; border-radius: 10px;
margin-right: 0.1%; margin-right: 0.1%;
vertical-align: bottom; vertical-align: bottom;
height: ${(props) => props.height}; height: ${(props) => props.height};
background: ${(props) => props.background}; background: ${(props) => zoneColorsMap[props.zone]};
width: ${(props) => props.width}; width: ${(props) => props.width};
transition: width 0.1s, height 0.1s, background-color 0.1s; transition: width 0.1s, height 0.1s, background-color 0.1s;
`; `;

13
src/components/WorkoutPlot.tsx
View File

@ -1,19 +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, ZoneIndex, intensityToZoneIndex, maximumIntensity } from "make-workout"; import { Interval, Intensity, Duration, totalDuration, intensityToZoneIndex, maximumIntensity } from "make-workout";
import { BarProps, Bar } from "./Bar"; import { BarProps, Bar } from "./Bar";
const zoneColorsMap: Record<ZoneIndex, string> = {
0: "#7f7f7f",
1: "#338cff",
2: "#59bf59",
3: "#ffcc3f",
4: "#ff6639",
5: "#ff330c",
}
const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({ const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
background: zoneColorsMap[intensityToZoneIndex(interval.intensity)], zone: 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}%`,
}); });