display total on current month statistics - fix #22

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
+}