Client - Stats refactoring + display fix when week starts on Monday #95
This commit is contained in:
Sam
97
fittrackee_client/src/components/Statistics/SportsMenu.vue
Normal file
97
fittrackee_client/src/components/Statistics/SportsMenu.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="sports-menu">
|
||||
<label
|
||||
v-for="sport in translatedSports"
|
||||
type="checkbox"
|
||||
:key="sport.id"
|
||||
:style="{ color: sportColors[sport.label] }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="sport.id"
|
||||
:name="sport.label"
|
||||
:checked="selectedSportIds.includes(sport.id)"
|
||||
@input="updateSelectedSportIds(sport.id)"
|
||||
/>
|
||||
<SportImage :sport-label="sport.label" />
|
||||
{{ sport.translatedLabel }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ComputedRef, PropType, computed, defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import SportImage from '@/components/Common/SportImage/index.vue'
|
||||
import { ISport, ITranslatedSport } from '@/types/sports'
|
||||
import { translateSports, sportColors } from '@/utils/sports'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SportsMenu',
|
||||
components: {
|
||||
SportImage,
|
||||
},
|
||||
props: {
|
||||
selectedSportIds: {
|
||||
type: Array as PropType<number[]>,
|
||||
default: () => [],
|
||||
},
|
||||
userSports: {
|
||||
type: Object as PropType<ISport[]>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['selectedSportIdsUpdate'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
|
||||
translateSports(props.userSports, t)
|
||||
)
|
||||
|
||||
function updateSelectedSportIds(sportId: number) {
|
||||
emit('selectedSportIdsUpdate', sportId)
|
||||
}
|
||||
|
||||
return {
|
||||
sportColors,
|
||||
translatedSports,
|
||||
updateSelectedSportIds,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/scss/base.scss';
|
||||
.sports-menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $default-padding;
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
justify-content: normal;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9em;
|
||||
font-weight: normal;
|
||||
min-width: 120px;
|
||||
padding: $default-padding;
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
min-width: 100px;
|
||||
}
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sport-img {
|
||||
padding: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
fittrackee_client/src/components/Statistics/StatsMenu.vue
Normal file
116
fittrackee_client/src/components/Statistics/StatsMenu.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="chart-menu">
|
||||
<div class="chart-arrow">
|
||||
<i
|
||||
class="fa fa-chevron-left"
|
||||
aria-hidden="true"
|
||||
@click="emit('arrowClick', true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="time-frames">
|
||||
<div class="time-frames-checkboxes">
|
||||
<div v-for="frame in timeFrames" class="time-frame" :key="frame">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
:id="frame"
|
||||
:name="frame"
|
||||
:checked="selectedTimeFrame === frame"
|
||||
@input="onUpdateTimeFrame(frame)"
|
||||
/>
|
||||
<span>{{ t(`statistics.TIME_FRAMES.${frame}`) }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-arrow">
|
||||
<i
|
||||
class="fa fa-chevron-right"
|
||||
aria-hidden="true"
|
||||
@click="emit('arrowClick', false)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'StatsMenu',
|
||||
emits: ['arrowClick', 'timeFrameUpdate'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
let selectedTimeFrame = ref('month')
|
||||
const timeFrames = ['week', 'month', 'year']
|
||||
|
||||
function onUpdateTimeFrame(timeFrame: string) {
|
||||
selectedTimeFrame.value = timeFrame
|
||||
emit('timeFrameUpdate', timeFrame)
|
||||
}
|
||||
|
||||
return {
|
||||
selectedTimeFrame,
|
||||
t,
|
||||
timeFrames,
|
||||
onUpdateTimeFrame,
|
||||
emit,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base';
|
||||
|
||||
.chart-menu {
|
||||
display: flex;
|
||||
|
||||
.chart-arrow,
|
||||
.time-frames {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chart-arrow {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time-frames {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.time-frames-checkboxes {
|
||||
display: inline-flex;
|
||||
|
||||
.time-frame {
|
||||
label {
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label span {
|
||||
border: solid 1px var(--time-frame-border-color);
|
||||
border-radius: 9%;
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
padding: 2px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input:checked + span {
|
||||
background-color: var(--time-frame-checked-bg-color);
|
||||
color: var(--time-frame-checked-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,85 +1,25 @@
|
||||
<template>
|
||||
<div id="user-statistics">
|
||||
<Card v-if="translatedSports">
|
||||
<template #title>{{ $t('statistics.STATISTICS') }}</template>
|
||||
<template #content>
|
||||
<div class="chart-filters">
|
||||
<div class="chart-arrow">
|
||||
<i
|
||||
class="fa fa-chevron-left"
|
||||
aria-hidden="true"
|
||||
@click="handleOnClickArrows(true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="time-frames">
|
||||
<div class="time-frames-checkboxes">
|
||||
<div v-for="frame in timeFrames" class="time-frame" :key="frame">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
:id="frame"
|
||||
:name="frame"
|
||||
:checked="selectedTimeFrame === frame"
|
||||
@input="updateTimeFrame(frame)"
|
||||
/>
|
||||
<span>{{ t(`statistics.TIME_FRAMES.${frame}`) }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-arrow">
|
||||
<i
|
||||
class="fa fa-chevron-right"
|
||||
aria-hidden="true"
|
||||
@click="handleOnClickArrows(false)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<StatChart
|
||||
:sports="sports"
|
||||
:user="user"
|
||||
:chartParams="chartParams"
|
||||
:displayed-sport-ids="selectedSportIds"
|
||||
:fullStats="true"
|
||||
/>
|
||||
<div class="sports">
|
||||
<label
|
||||
v-for="sport in translatedSports"
|
||||
type="checkbox"
|
||||
:key="sport.id"
|
||||
:style="{ color: sportColors[sport.label] }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="sport.id"
|
||||
:name="sport.label"
|
||||
:checked="selectedSportIds.includes(sport.id)"
|
||||
@input="updateSelectedSportIds(sport.id)"
|
||||
/>
|
||||
<SportImage :sport-label="sport.label" />
|
||||
{{ sport.translatedLabel }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<div id="user-statistics" v-if="translatedSports">
|
||||
<StatsMenu
|
||||
@timeFrameUpdate="updateTimeFrame"
|
||||
@arrowClick="handleOnClickArrows"
|
||||
/>
|
||||
<StatChart
|
||||
:sports="sports"
|
||||
:user="user"
|
||||
:chartParams="chartParams"
|
||||
:displayed-sport-ids="selectedSportIds"
|
||||
:fullStats="true"
|
||||
/>
|
||||
<SportsMenu
|
||||
:selected-sport-ids="selectedSportIds"
|
||||
:user-sports="sports"
|
||||
@selectedSportIdsUpdate="updateSelectedSportIds"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
addMonths,
|
||||
addWeeks,
|
||||
addYears,
|
||||
endOfMonth,
|
||||
endOfWeek,
|
||||
endOfYear,
|
||||
startOfMonth,
|
||||
startOfWeek,
|
||||
startOfYear,
|
||||
subMonths,
|
||||
subWeeks,
|
||||
subYears,
|
||||
} from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
@ -91,20 +31,21 @@
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import SportImage from '@/components/Common/SportImage/index.vue'
|
||||
import StatChart from '@/components/Common/StatsChart/index.vue'
|
||||
import SportsMenu from '@/components/Statistics/SportsMenu.vue'
|
||||
import StatsMenu from '@/components/Statistics/StatsMenu.vue'
|
||||
import { ISport, ITranslatedSport } from '@/types/sports'
|
||||
import { IStatisticsDateParams } from '@/types/statistics'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { translateSports, sportColors } from '@/utils/sports'
|
||||
import { getStatsDateParams, updateChartParams } from '@/utils/statistics'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserMonthStats',
|
||||
name: 'Statistics',
|
||||
components: {
|
||||
Card,
|
||||
SportImage,
|
||||
SportsMenu,
|
||||
StatChart,
|
||||
StatsMenu,
|
||||
},
|
||||
props: {
|
||||
sports: {
|
||||
@ -133,65 +74,14 @@
|
||||
chartParams.value = getChartParams(selectedTimeFrame.value)
|
||||
}
|
||||
function getChartParams(timeFrame: string): IStatisticsDateParams {
|
||||
const date = new Date()
|
||||
const start =
|
||||
timeFrame === 'year'
|
||||
? startOfYear(subYears(date, 9))
|
||||
: selectedTimeFrame.value === 'week'
|
||||
? startOfMonth(subMonths(date, 2))
|
||||
: startOfMonth(subMonths(date, 11))
|
||||
const end =
|
||||
timeFrame === 'year'
|
||||
? endOfYear(date)
|
||||
: timeFrame === 'week'
|
||||
? endOfWeek(date)
|
||||
: endOfMonth(date)
|
||||
return {
|
||||
duration: timeFrame,
|
||||
end,
|
||||
start,
|
||||
}
|
||||
return getStatsDateParams(new Date(), timeFrame, props.user.weekm)
|
||||
}
|
||||
function handleOnClickArrows(backward: boolean) {
|
||||
chartParams.value = {
|
||||
duration: selectedTimeFrame.value,
|
||||
end:
|
||||
selectedTimeFrame.value === 'year'
|
||||
? startOfYear(
|
||||
backward
|
||||
? endOfYear(subYears(chartParams.value.end, 1))
|
||||
: endOfYear(addYears(chartParams.value.end, 1))
|
||||
)
|
||||
: selectedTimeFrame.value === 'week'
|
||||
? startOfMonth(
|
||||
backward
|
||||
? endOfWeek(subWeeks(chartParams.value.end, 1))
|
||||
: endOfWeek(addWeeks(chartParams.value.end, 1))
|
||||
)
|
||||
: startOfMonth(
|
||||
backward
|
||||
? endOfMonth(subMonths(chartParams.value.end, 1))
|
||||
: endOfMonth(addMonths(chartParams.value.end, 1))
|
||||
),
|
||||
start:
|
||||
selectedTimeFrame.value === 'year'
|
||||
? startOfYear(
|
||||
backward
|
||||
? startOfYear(subYears(chartParams.value.start, 1))
|
||||
: startOfYear(addYears(chartParams.value.start, 1))
|
||||
)
|
||||
: selectedTimeFrame.value === 'week'
|
||||
? startOfMonth(
|
||||
backward
|
||||
? startOfWeek(subWeeks(chartParams.value.start, 1))
|
||||
: startOfWeek(addWeeks(chartParams.value.start, 1))
|
||||
)
|
||||
: startOfMonth(
|
||||
backward
|
||||
? startOfMonth(subMonths(chartParams.value.start, 1))
|
||||
: startOfMonth(addMonths(chartParams.value.start, 1))
|
||||
),
|
||||
}
|
||||
chartParams.value = updateChartParams(
|
||||
chartParams.value,
|
||||
backward,
|
||||
props.user.weekm
|
||||
)
|
||||
}
|
||||
function getSports(sports: ISport[]) {
|
||||
return sports.map((sport) => sport.id)
|
||||
@ -233,98 +123,9 @@
|
||||
@import '~@/scss/base';
|
||||
|
||||
#user-statistics {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
::v-deep(.card) {
|
||||
width: 100%;
|
||||
.card-content {
|
||||
.chart-filters {
|
||||
display: flex;
|
||||
|
||||
.chart-arrow,
|
||||
.time-frames {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chart-arrow {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time-frames {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.time-frames-checkboxes {
|
||||
display: inline-flex;
|
||||
|
||||
.time-frame {
|
||||
label {
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label span {
|
||||
border: solid 1px var(--time-frame-border-color);
|
||||
border-radius: 9%;
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
padding: 2px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input:checked + span {
|
||||
background-color: var(--time-frame-checked-bg-color);
|
||||
color: var(--time-frame-checked-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-radio {
|
||||
justify-content: space-around;
|
||||
padding: $default-padding * 2 $default-padding;
|
||||
}
|
||||
|
||||
.sports {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $default-padding * 2 $default-padding;
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
justify-content: normal;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9em;
|
||||
font-weight: normal;
|
||||
min-width: 120px;
|
||||
padding: $default-padding;
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
min-width: 100px;
|
||||
}
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sport-img {
|
||||
padding: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-radio {
|
||||
justify-content: space-around;
|
||||
padding: $default-padding * 2 $default-padding;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user