add label for total on stats graph

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { formatValue } from '../../../utils/stats'
+
+export default function CustomLabel (props) {
+  const { displayedData, x, y, width, value } = props
+  const radius = 10
+  const formattedValue = formatValue(displayedData, value)
+
+  return (
+    <g>
+      <text
+        x={x + width / 2}
+        y={y - radius}
+        fill="#666"
+        fontSize="11"
+        textAnchor="middle"
+        dominantBaseline="middle"
+      >
+        {formattedValue}
+      </text>
+    </g>
+  )
+}

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

@@ -5,7 +5,7 @@ import { formatDuration } from '../../../utils/stats'
 const formatValue = (displayedData, value) => displayedData === 'duration'
   ? formatDuration(value, true)
   : displayedData === 'distance'
-    ? value.toFixed(3)
+    ? value.toFixed(2)
     : value
 
 
@@ -28,7 +28,7 @@ export default function CustomTooltip (props) {
         }
         {payload.length > 0 && (
           <p>
-            Total: {formatValue(displayedData, total)} {payload[0].unit}
+            Total: {formatValue(displayedData, total)}
           </p>
         )}
       </div>

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

@@ -4,8 +4,9 @@ import {
 } from 'recharts'
 
 import { activityColors } from '../../../utils/activities'
-import { formatDuration } from '../../../utils/stats'
+import { formatValue } from '../../../utils/stats'
 import CustomTooltip from './CustomTooltip'
+import CustomLabel from './CustomLabel'
 
 
 export default class StatsCharts extends React.PureComponent {
@@ -68,12 +69,7 @@ export default class StatsCharts extends React.PureComponent {
               interval={0} // to force to display all ticks
             />
             <YAxis
-              tickFormatter={value => displayedData === 'distance'
+              tickFormatter={value => formatValue(displayedData, value)}
-                ? `${value} km`
-                : displayedData === 'duration'
-                  ? formatDuration(value)
-                  : value
-              }
             />
             <Tooltip content={
               <CustomTooltip
@@ -87,7 +83,10 @@ export default class StatsCharts extends React.PureComponent {
                 dataKey={s.label}
                 stackId="a"
                 fill={activityColors[i]}
-                unit={displayedData === 'distance' ? ' km' : ''}
+                label={i === sports.length - 1
+                  ? <CustomLabel displayedData={displayedData} />
+                  : ''
+                }
               />
             ))}
           </BarChart>

fittrackee_client/src/utils/stats.js

@@ -13,7 +13,6 @@ const xAxisFormats = [
   { duration: 'year', dateFormat: 'YYYY', xAxis: 'YYYY' },
 ]
 
-
 export const formatDuration = (totalSeconds, formatWithDay = false) => {
   let days = '0'
   if (formatWithDay) {
@@ -34,6 +33,14 @@ export const formatDuration = (totalSeconds, formatWithDay = false) => {
   return `${hours === '00' ? '' : `${hours}:`}${minutes}:${seconds}`
 }
 
+export const formatValue = (displayedData, value) => value === 0
+    ? ''
+    : displayedData === 'distance'
+      ? `${value.toFixed(2)} km`
+      : displayedData === 'duration'
+        ? formatDuration(value)
+        : value
+
 export const formatChartData = chartData => {
   for (let i = 0; i < chartData.length; i++) {
     chartData[i].time = new Date(chartData[i].time).getTime()