Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - add full statistics chart

Browse Source
This commit is contained in:
Sam
2021-10-03 19:23:17 +02:00
parent 60a5df70a9
commit 1502e97211
12 changed files with 579 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
fittrackee_client/src/components/Common/StatsChart/Chart.vue
View File

@ -32,6 +32,14 @@
type: String as PropType<TStatisticsDatasetKeys>,
required: true,
},
displayedSportIds: {
type: Array as PropType<number[]>,
required: true,
},
fullStats: {
type: Boolean,
required: true,
},
},
setup(props) {
const { t } = useI18n()
@ -54,7 +62,7 @@
animation: false,
layout: {
padding: {
top: 22,
top: props.fullStats ? 40 : 22,
},
},
scales: {
@ -76,7 +84,7 @@
},
},
afterFit: function (scale: LayoutItem) {
scale.width = 60
scale.width = props.fullStats ? 75 : 60
},
},
},
@ -84,13 +92,22 @@
datalabels: {
anchor: 'end',
align: 'end',
rotation: function (context) {
return props.fullStats && context.chart.chartArea.width < 580
? 310
: 0
},
display: function (context) {
return !(props.fullStats && context.chart.chartArea.width < 300)
},
formatter: function (value, context) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const total: number = context.chart.data.datasets
.map((d) => d.data[context.dataIndex])
.reduce((total, value) => getSum(total, value), 0)
return context.datasetIndex === 5 && total > 0
return context.datasetIndex ===
props.displayedSportIds.length - 1 && total > 0
? formatTooltipValue(props.displayedData, total, false)
: null
},

170
fittrackee_client/src/components/Common/StatsChart/index.vue
View File

@ -1,68 +1,170 @@
<template>
<div class="stat-chart">
<Chart
:datasets="datasets"
:labels="labels"
:displayedData="displayedData"
/>
<div class="start-chart">
<div v-if="labels.length === 0">
{{ t('workouts.NO_WORKOUTS') }}
</div>
<div v-else>
<div class="chart-radio">
<label>
<input
type="radio"
name="total_distance"
:checked="displayedData === 'total_distance'"
@click="updateDisplayData"
/>
{{ t('workouts.DISTANCE') }}
</label>
<label>
<input
type="radio"
name="total_duration"
:checked="displayedData === 'total_duration'"
@click="updateDisplayData"
/>
{{ t('workouts.DURATION') }}
</label>
<label>
<input
type="radio"
name="nb_workouts"
:checked="displayedData === 'nb_workouts'"
@click="updateDisplayData"
/>
{{ t('workouts.WORKOUT', 2) }}
</label>
</div>
<Chart
v-if="labels.length > 0"
:datasets="datasets"
:labels="labels"
:displayedData="displayedData"
:displayedSportIds="displayedSportIds"
:fullStats="fullStats"
/>
</div>
</div>
</template>
<script lang="ts">
import { ComputedRef, PropType, computed, defineComponent } from 'vue'
import { format } from 'date-fns'
import {
ComputedRef,
PropType,
Ref,
computed,
defineComponent,
ref,
watch,
onBeforeMount,
} from 'vue'
import { useI18n } from 'vue-i18n'
import Chart from '@/components/Common/StatsChart/Chart.vue'
import { STATS_STORE } from '@/store/constants'
import { ISport } from '@/types/sports'
import {
IStatisticsChartData,
IStatisticsDateParams,
TStatisticsDatasetKeys,
IStatisticsDateParams,
TStatisticsFromApi,
IStatisticsParams,
} from '@/types/statistics'
import { IAuthUserProfile } from '@/types/user'
import { useStore } from '@/use/useStore'
import { formatStats } from '@/utils/statistics'
export default defineComponent({
name: 'StatsChart',
name: 'UserMonthStats',
components: {
Chart,
},
props: {
statistics: {
type: Object as PropType<TStatisticsFromApi>,
required: true,
},
displayedData: {
type: String as PropType<TStatisticsDatasetKeys>,
required: true,
},
params: {
type: Object as PropType<IStatisticsDateParams>,
required: true,
},
sports: {
type: Object as PropType<ISport[]>,
required: true,
},
weekStartingMonday: {
type: Boolean,
user: {
type: Object as PropType<IAuthUserProfile>,
required: true,
},
chartParams: {
type: Object as PropType<IStatisticsDateParams>,
required: true,
},
displayedSportIds: {
type: Array as PropType<number[]>,
default: () => [],
},
fullStats: {
type: Boolean,
default: false,
},
},
setup(props) {
const store = useStore()
const { t } = useI18n()
let displayedData: Ref<TStatisticsDatasetKeys> = ref('total_distance')
const statistics: ComputedRef<TStatisticsFromApi> = computed(
() => store.getters[STATS_STORE.GETTERS.USER_STATS]
)
const formattedStats: ComputedRef<IStatisticsChartData> = computed(() =>
formatStats(
props.params,
props.weekStartingMonday,
props.chartParams,
props.user.weekm,
props.sports,
[],
props.statistics
props.displayedSportIds,
statistics.value
)
)
onBeforeMount(() =>
getStatistics(getApiParams(props.chartParams, props.user))
)
function getStatistics(apiParams: IStatisticsParams) {
store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
username: props.user.username,
filterType: 'by_time',
params: apiParams,
})
}
function updateDisplayData(
event: Event & {
target: HTMLInputElement & { name: TStatisticsDatasetKeys }
}
) {
displayedData.value = event.target.name
}
function getApiParams(
chartParams: IStatisticsDateParams,
user: IAuthUserProfile
): IStatisticsParams {
return {
from: format(chartParams.start, 'yyyy-MM-dd'),
to: format(chartParams.end, 'yyyy-MM-dd'),
time:
chartParams.duration === 'week'
? `week${user.weekm ? 'm' : ''}`
: chartParams.duration,
}
}
watch(
() => props.chartParams,
async (newParams) => {
getStatistics(getApiParams(newParams, props.user))
}
)
return {
datasets: computed(
() => formattedStats.value.datasets[props.displayedData]
() => formattedStats.value.datasets[displayedData.value]
),
labels: computed(() => formattedStats.value.labels),
displayedData,
t,
updateDisplayData,
}
},
})
@ -70,10 +172,16 @@
<style lang="scss" scoped>
@import '~@/scss/base';
.stat-chart {
.chart {
.start-chart {
.chart-radio {
display: flex;
justify-content: space-between;
padding: $default-padding;
max-height: 100%;
label {
font-size: 0.85em;
font-weight: normal;
}
}
}
</style>