add label for total on stats graph

This commit is contained in:
Sam 2019-01-04 11:10:07 +01:00
parent 5de1fe4e94
commit cd39f46270
4 changed files with 41 additions and 11 deletions

View File

@ -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>
)
}

View File

@ -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>

View File

@ -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'
? `${value} km`
: displayedData === 'duration'
? formatDuration(value)
: value
}
tickFormatter={value => formatValue(displayedData, 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>

View File

@ -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()