add label for total on stats graph
This commit is contained in:
parent
5de1fe4e94
commit
cd39f46270
@ -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>
|
||||
)
|
||||
}
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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()
|
||||
|
Loading…
Reference in New Issue
Block a user