display total on current month statistics - fix #22

fittrackee_client/src/components/App.css

@@ -181,6 +181,20 @@ label {
   font-size: 0.8em;
 }
 
+.custom-tooltip {
+  background-color: #fff;
+  border: 1px solid lightgrey;
+  padding: 10px;
+}
+
+.custom-tooltip p {
+  margin: 5px;
+}
+
+.custom-tooltip-label {
+  font-weight: bold;
+}
+
 .dashboard, .history {
   margin-top: 30px;
 }

fittrackee_client/src/components/Dashboard/Statistics.jsx

@@ -7,6 +7,7 @@ import {
 
 import { getStats } from '../../actions/stats'
 import { activityColors, formatDuration, formatStats } from '../../utils'
+import CustomTooltip from '../Others/CustomTooltip'
 
 
 class Statistics extends React.Component {
@@ -94,17 +95,16 @@ class Statistics extends React.Component {
                         : value
                     }
                   />
-                  <Tooltip />
+                  <Tooltip content={
+                    <CustomTooltip
+                      displayedData={displayedData}
+                    />
+                  }
+                  />
                   {sports.map((s, i) => (
                     <Bar
                       key={s.id}
                       dataKey={s.label}
-                      formatter={value => displayedData === 'duration'
-                        ? format(formatDuration(value), 'HH:mm')
-                        : displayedData === 'distance'
-                          ? value.toFixed(3)
-                          : value
-                      }
                       stackId="a"
                       fill={activityColors[i]}
                       unit={displayedData === 'distance' ? ' km' : ''}

fittrackee_client/src/components/Others/CustomTooltip.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { format } from 'date-fns'
+
+import { formatDuration } from '../../utils'
+
+const formatValue = (displayedData, value) => displayedData === 'duration'
+  ? format(formatDuration(value), 'HH:mm')
+  : 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
+}