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

Create "%" strings inside Bar component

This commit is contained in:
Rene Saarsoo 2020-10-02 12:31:56 +03:00
parent c76cfc3bfe
commit 45c5d1a257
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Bar.tsx
View File

@ -2,8 +2,10 @@ import styled from "styled-components";
import { ZoneIndex } from "make-workout"; import { ZoneIndex } from "make-workout";
export type BarProps = { export type BarProps = {
width: string; // Percentage of total workout length
height: string; durationPercentage: number;
// Percentage of maximum intensity in workout
intensityPercentage: number;
zone: ZoneIndex; zone: ZoneIndex;
}; };
@ -19,10 +21,11 @@ const zoneColorsMap: Record<ZoneIndex, string> = {
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%;
vertical-align: bottom; vertical-align: bottom;
height: ${(props) => props.height}; margin-right: 0.1%;
/* exclude 0.1% margin from bar width */
width: ${(props) => props.durationPercentage - 0.1}%;
height: ${(props) => props.intensityPercentage}%;
background: ${(props) => zoneColorsMap[props.zone]}; background: ${(props) => zoneColorsMap[props.zone]};
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;
`; `;

4
src/components/WorkoutPlot.tsx
View File

@ -5,8 +5,8 @@ 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: intensityToZoneIndex(interval.intensity),
width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`, durationPercentage: interval.duration.seconds / workoutDuration.seconds * 100,
height: `${interval.intensity.value / maxIntensity.value * 100}%`, intensityPercentage: interval.intensity.value / maxIntensity.value * 100,
}); });
const Plot = styled.div` const Plot = styled.div`