theoludwig/p61-project
Archived
1
1
Fork 0
Code Issues Pull Requests Releases Activity

feat: finish stas

Browse Source
This commit is contained in:
Maxime RICHARD 2024-05-21 23:35:04 +02:00
parent 2ab7413f32
commit 42f5623c92
1 changed files with 155 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
presentation/react/components/Stats/Stats.tsx
View File

@ -1,18 +1,18 @@
import { Card, Text } from "react-native-paper" import { Card, Text } from "react-native-paper"
import CircularProgress from "react-native-circular-progress-indicator" import CircularProgress from "react-native-circular-progress-indicator"
import { Agenda } from "react-native-calendars" import { Agenda } from "react-native-calendars"
import { useState } from "react" import type { SetStateAction } from "react"
import { useState, useEffect } from "react"
import { getNowDateUTC, getISODate } from "@/utils/dates" import { getNowDateUTC, getISODate } from "@/utils/dates"
import type { HabitsTracker } from "@/domain/entities/HabitsTracker" import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
import type { HabitHistory } from "@/domain/entities/HabitHistory"
export interface StatsProps { export interface StatsProps {
habitsTracker: HabitsTracker habitsTracker: HabitsTracker
} }
export const Stats: React.FC<StatsProps> = (props) => { export const Stats: React.FC<StatsProps> = ({ habitsTracker }) => {
const { habitsTracker } = props
const today = getNowDateUTC() const today = getNowDateUTC()
const todayISO = getISODate(today) const todayISO = getISODate(today)
@ -21,81 +21,98 @@ export const Stats: React.FC<StatsProps> = (props) => {
const habitsHistory = habitsTracker.getAllHabitsHistory() const habitsHistory = habitsTracker.getAllHabitsHistory()
let goalDays = 0 const [goalDays, setGoalDays] = useState(0)
let totalGoalDays = 0 const [totalGoalDays, setTotalGoalDays] = useState(0)
const dailyHabits = habitsHistory.filter((el) => { const [displayDaily, setDisplayDaily] = useState(true)
return ( const [goalWeek, setGoalWeek] = useState(0)
el.habit.goal.frequency === "daily" && el.habit.startDate <= selectedDate const [totalGoalWeek, setTotalGoalWeek] = useState(0)
) const [displayWeekly, setDisplayWeekly] = useState(true)
}) const [goalMonth, setGoalMonth] = useState(0)
let displayDaily = true const [totalGoalMonth, setTotalGoalMonth] = useState(0)
if (dailyHabits.length === 0) { const [displayMonthly, setDisplayMonthly] = useState(true)
displayDaily = false
} else { const updateStats = (date: Date): void => {
for (const el of dailyHabits) { const dailyHabits = habitsHistory.filter((el) => {
totalGoalDays++ return (
if ( el.habit.goal.frequency === "daily" &&
el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ?? el.habit.startDate.getFullYear() <= date.getFullYear() &&
false el.habit.startDate.getMonth() <= date.getMonth() &&
) { el.habit.startDate.getDate() <= date.getDate()
goalDays++ )
} })
const weeklyHabits = habitsHistory.filter((el) => {
return (
el.habit.goal.frequency === "weekly" &&
el.habit.startDate.getFullYear() <= date.getFullYear() &&
el.habit.startDate.getMonth() <= date.getMonth() &&
el.habit.startDate.getDate() <= date.getDate()
)
})
const monthlyHabits = habitsHistory.filter((el) => {
return (
el.habit.goal.frequency === "monthly" &&
el.habit.startDate.getFullYear() <= date.getFullYear() &&
el.habit.startDate.getMonth() <= date.getMonth() &&
el.habit.startDate.getDate() <= date.getDate()
)
})
const calculateGoals = (
habits: HabitHistory[],
setTotalGoals: {
(value: SetStateAction<number>): void
(value: SetStateAction<number>): void
(value: SetStateAction<number>): void
(arg0: any): void
},
setGoals: {
(value: SetStateAction<number>): void
(value: SetStateAction<number>): void
(value: SetStateAction<number>): void
(arg0: any): void
},
): void => {
setTotalGoals(habits.length)
const completedGoals = habits.filter((el) => {
return (
el.getProgressesByDate(date)[0]?.goalProgress.isCompleted() ?? false
)
}).length
setGoals(completedGoals)
}
if (dailyHabits.length === 0) {
setDisplayDaily(false)
} else {
setDisplayDaily(true)
calculateGoals(dailyHabits, setTotalGoalDays, setGoalDays)
}
if (weeklyHabits.length === 0) {
setDisplayWeekly(false)
} else {
setDisplayWeekly(true)
calculateGoals(weeklyHabits, setTotalGoalWeek, setGoalWeek)
}
if (monthlyHabits.length === 0) {
setDisplayMonthly(false)
} else {
setDisplayMonthly(true)
calculateGoals(monthlyHabits, setTotalGoalMonth, setGoalMonth)
} }
} }
let goalWeek = 0 useEffect(() => {
let totalGoalWeek = 0 updateStats(selectedDate)
const weeklyHabits = habitsHistory.filter((el) => { }, [selectedDate])
return (
el.habit.goal.frequency === "weekly" && el.habit.startDate <= selectedDate
)
})
let displayWeekly = true
if (weeklyHabits.length === 0) {
displayWeekly = false
} else {
for (const el of weeklyHabits) {
totalGoalWeek++
if (
el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ??
false
) {
goalWeek++
}
}
}
let goalMonth = 0
let totalGoalMonth = 0
const monthlyHabits = habitsHistory.filter((el) => {
return (
el.habit.goal.frequency === "monthly" &&
el.habit.startDate <= selectedDate
)
})
let displayMonthly = true
if (monthlyHabits.length === 0) {
displayMonthly = false
} else {
for (const el of monthlyHabits) {
totalGoalMonth++
if (
el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ??
false
) {
goalMonth++
}
}
}
return ( return (
<Agenda <Agenda
firstDay={1} firstDay={1}
showClosingKnob showClosingKnob
onDayPress={(date) => { onDayPress={(date) => {
setSelectedDate(new Date(date.dateString)) return setSelectedDate(new Date(date.dateString))
}} }}
markedDates={{ markedDates={{
[todayISO]: { marked: true, today: true }, [todayISO]: { marked: true, today: true },
@ -105,60 +122,74 @@ export const Stats: React.FC<StatsProps> = (props) => {
renderList={() => { renderList={() => {
return ( return (
<> <>
{displayDaily ? ( <Card key="statsDay" mode="outlined">
<Card key="statsDay" mode="outlined"> <Card.Title title="Success Day" />
<Card.Title title="Sucess Day" /> <Card.Content>
<Card.Content> {displayDaily ? (
<Text variant="bodyMedium"> <>
{goalDays} but réussi dans la journée sur {totalGoalDays} <Text variant="bodyMedium">
</Text> {goalDays} but réussi dans la journée sur {totalGoalDays}
<CircularProgress </Text>
value={(goalDays / totalGoalDays) * 100} <CircularProgress
activeStrokeWidth={12} value={(goalDays / totalGoalDays) * 100}
progressValueColor={"#ecf0f1"} activeStrokeWidth={12}
circleBackgroundColor="black" progressValueColor={"#ecf0f1"}
titleColor="white" circleBackgroundColor="black"
title="%" titleColor="white"
/> title="%"
</Card.Content> />
</Card> </>
) : null} ) : (
{displayWeekly ? ( <Text variant="bodyMedium">Aucun objectif quotidien</Text>
<Card key="statsWeek" mode="outlined"> )}
<Card.Title title="Sucess Week" /> </Card.Content>
<Card.Content> </Card>
<Text variant="bodyMedium">
{goalWeek} but réussi dans la semaine sur {totalGoalWeek} <Card key="statsWeek" mode="outlined">
</Text> <Card.Title title="Success Week" />
<CircularProgress <Card.Content>
value={(goalWeek / totalGoalWeek) * 100} {displayWeekly ? (
activeStrokeWidth={12} <>
progressValueColor={"#ecf0f1"} <Text variant="bodyMedium">
circleBackgroundColor="black" {goalWeek} but réussi dans la semaine sur {totalGoalWeek}
titleColor="white" </Text>
title="%" <CircularProgress
/> value={(goalWeek / totalGoalWeek) * 100}
</Card.Content> activeStrokeWidth={12}
</Card> progressValueColor={"#ecf0f1"}
) : null} circleBackgroundColor="black"
{displayMonthly ? ( titleColor="white"
<Card key="statsMonth" mode="outlined"> title="%"
<Card.Title title="Sucess Month" /> />
<Card.Content> </>
<Text variant="bodyMedium"> ) : (
{goalMonth} but réussi dans le mois sur {totalGoalMonth} <Text variant="bodyMedium">Aucun objectif hebdomadaire</Text>
</Text> )}
<CircularProgress </Card.Content>
value={(goalMonth / totalGoalMonth) * 100} </Card>
activeStrokeWidth={12}
progressValueColor={"#ecf0f1"} <Card key="statsMonth" mode="outlined">
circleBackgroundColor="black" <Card.Title title="Success Month" />
titleColor="white" <Card.Content>
title="%" {displayMonthly ? (
/> <>
</Card.Content> <Text variant="bodyMedium">
</Card> {goalMonth} but réussi dans le mois sur {totalGoalMonth}
) : null} </Text>
<CircularProgress
value={(goalMonth / totalGoalMonth) * 100}
activeStrokeWidth={12}
progressValueColor={"#ecf0f1"}
circleBackgroundColor="black"
titleColor="white"
title="%"
/>
</>
) : (
<Text variant="bodyMedium">Aucun objectif mensuel</Text>
)}
</Card.Content>
</Card>
</> </>
) )
}} }}