file reorganization

fittrackee_client/src/components/Common/CustomModal.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+export default function CustomModal(props) {
+  return (
+    <div className="custom-modal-backdrop">
+      <div className="custom-modal">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">{props.title}</h5>
+            <button
+              type="button"
+              className="close"
+              aria-label="Close"
+              onClick={() => props.close}
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            <p>{props.text}</p>
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => props.confirm()}
+            >
+              Yes
+            </button>
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={() => props.close()}
+            >
+              No
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

fittrackee_client/src/components/Common/Stats/CustomTooltip.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { formatDuration } from '../../../utils'
+
+const formatValue = (displayedData, value) => displayedData === 'duration'
+  ? formatDuration(value, true)
+  : displayedData === 'distance'
+    ? value.toFixed(3)
+    : value
+
+
+/**
+ * @return {null}
+ */
+export default function CustomTooltip (props) {
+  const { active } = props
+  if (active) {
+    const { displayedData, payload, label } = props
+    let total = 0
+    payload.map(p => total += p.value)
+    return (
+      <div className="custom-tooltip">
+        <p className="custom-tooltip-label">{label}</p>
+        {payload.map(p => (
+          <p key={p.name} style={{ color: p.fill }}>
+            {p.name}: {formatValue(displayedData, p.value)} {p.unit}
+          </p>))
+        }
+        {payload.length > 0 && (
+          <p>
+            Total: {formatValue(displayedData, total)} {payload[0].unit}
+          </p>
+        )}
+      </div>
+    )
+  }
+  return null
+}

fittrackee_client/src/components/Common/Stats/StatsChart.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import {
+   Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis
+} from 'recharts'
+
+import { activityColors, formatDuration } from '../../../utils'
+import CustomTooltip from './CustomTooltip'
+
+
+export default class StatsCharts extends React.PureComponent {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      displayedData: 'distance'
+    }
+  }
+  handleRadioChange (changeEvent) {
+    this.setState({
+      displayedData: changeEvent.target.name
+    })
+  }
+
+  render() {
+    const { displayedData } = this.state
+    const { sports, stats } = this.props
+    if (Object.keys(stats).length === 0) {
+      return 'No workouts'
+    }
+    return (
+      <div className="chart-stats">
+        <div className="row chart-radio">
+          <label className="radioLabel col">
+            <input
+              type="radio"
+              name="distance"
+              checked={displayedData === 'distance'}
+              onChange={e => this.handleRadioChange(e)}
+            />
+            distance
+          </label>
+          <label className="radioLabel col">
+            <input
+              type="radio"
+              name="duration"
+              checked={displayedData === 'duration'}
+              onChange={e => this.handleRadioChange(e)}
+            />
+            duration
+          </label>
+          <label className="radioLabel col">
+            <input
+              type="radio"
+              name="activities"
+              checked={displayedData === 'activities'}
+              onChange={e => this.handleRadioChange(e)}
+            />
+            activities
+          </label>
+        </div>
+        <ResponsiveContainer height={300}>
+          <BarChart
+            data={stats[displayedData]}
+            margin={{ top: 15, bottom: 0 }}
+          >
+            <XAxis
+              dataKey="date"
+              interval={0} // to force to display all ticks
+            />
+            <YAxis
+              tickFormatter={value => displayedData === 'distance'
+                ? `${value} km`
+                : displayedData === 'duration'
+                  ? formatDuration(value)
+                  : value
+              }
+            />
+            <Tooltip content={
+              <CustomTooltip
+                displayedData={displayedData}
+              />
+            }
+            />
+            {sports.map((s, i) => (
+              <Bar
+                key={s.id}
+                dataKey={s.label}
+                stackId="a"
+                fill={activityColors[i]}
+                unit={displayedData === 'distance' ? ' km' : ''}
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    )
+  }
+}

fittrackee_client/src/components/Common/Stats/index.jsx

@@ -0,0 +1,50 @@
+import { format } from 'date-fns'
+import React from 'react'
+import { connect } from 'react-redux'
+
+import { getStats } from '../../../actions/stats'
+import { formatStats } from '../../../utils'
+import StatsChart from './StatsChart'
+
+
+class Statistics extends React.PureComponent {
+  componentDidMount() {
+    this.props.loadMonthActivities(
+      this.props.user.id,
+      this.props.statsParams,
+    )
+  }
+
+  render() {
+    const { sports, statistics, statsParams } = this.props
+    const stats = formatStats(statistics, sports, statsParams)
+    return (
+      <>
+        {Object.keys(statistics).length === 0 ? (
+          'No workouts'
+        ) : (
+          <StatsChart sports={sports} stats={stats} />
+          )}
+      </>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    sports: state.sports.data,
+    statistics: state.statistics.data,
+    user: state.user,
+  }),
+  dispatch => ({
+    loadMonthActivities: (userId, data) => {
+      const dateFormat = 'YYYY-MM-DD'
+      const params = {
+        from: format(data.start, dateFormat),
+        to: format(data.end, dateFormat),
+        time: data.duration
+      }
+      dispatch(getStats(userId, data.type, params))
+    },
+  })
+)(Statistics)