From 4219393341b723ec5227b3bd4b5349f64a53275c Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 28 May 2018 17:07:08 +0200 Subject: [PATCH] Client: display chart w/ duration or distance for x axis --- .../ActivityDisplay/ActivityCharts.jsx | 128 ++++++++++++------ mpwo_client/src/components/App.css | 17 +++ 2 files changed, 107 insertions(+), 38 deletions(-) diff --git a/mpwo_client/src/components/Activities/ActivityDisplay/ActivityCharts.jsx b/mpwo_client/src/components/Activities/ActivityDisplay/ActivityCharts.jsx index 561bd62e..3707509b 100644 --- a/mpwo_client/src/components/Activities/ActivityDisplay/ActivityCharts.jsx +++ b/mpwo_client/src/components/Activities/ActivityDisplay/ActivityCharts.jsx @@ -9,6 +9,13 @@ import { getActivityChartData } from '../../../actions/activities' class ActivityCharts extends React.Component { + constructor(props, context) { + super(props, context) + this.state = { + displayDistance: true, + } + } + componentDidMount() { this.props.loadActivityData(this.props.activity.id) } @@ -24,49 +31,94 @@ class ActivityCharts extends React.Component { this.props.loadActivityData(null) } + handleRadioChange (changeEvent) { + this.setState({ + displayDistance: + changeEvent.target.name === 'distance' + ? changeEvent.target.value + : !changeEvent.target.value + }) + } + render() { const { chartData } = this.props + const { displayDistance } = this.state + let xDataKey, xScale + if (displayDistance) { + xDataKey = 'distance' + xScale = 'linear' + } else { + xDataKey = 'duration' + xScale = 'time' + } return ( -
- - - format(time, 'HH:mm:ss')} - type="number" +
+
+
+
+ + + displayDistance + ? value + : format(value, 'HH:mm:ss')} + type="number" + /> + + + + + displayDistance + ? `${value} km` + : format(value, 'HH:mm:ss')} + /> + + +
) } diff --git a/mpwo_client/src/components/App.css b/mpwo_client/src/components/App.css index 6850a0dc..959b08cc 100644 --- a/mpwo_client/src/components/App.css +++ b/mpwo_client/src/components/App.css @@ -96,6 +96,23 @@ input, textarea { text-align: center; } +.chart { + font-size: 0.9em; +} + +.chart-radio { + display: flex; + font-size: 0.8em; +} + +.chart-radio label { + display: flex; +} + +.chart-radio input { + margin-right: 10px; +} + .custom-modal { background-color: #fff; border-radius: 5px;