feat: stats v1

This commit is contained in:
Maxime RICHARD 2024-05-20 15:35:49 +02:00
parent c03cd2b96d
commit e68fe6075e

View File

@ -1,9 +1,9 @@
import { SafeAreaView } from "react-native-safe-area-context"
import { Card, Text } from "react-native-paper"
import CircularProgress from "react-native-circular-progress-indicator"
import { ScrollView } from "react-native"
import { Calendar } from "react-native-calendars"
import { Agenda } from "react-native-calendars"
import { useState } from "react"
import { getNowDate, getISODate } from "@/utils/dates"
import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
export interface StatsProps {
@ -13,23 +13,107 @@ export interface StatsProps {
export const Stats: React.FC<StatsProps> = (props) => {
const { habitsTracker } = props
const habitsHistory = habitsTracker.getAllHabitsHistory()
return (
<SafeAreaView>
<ScrollView>
<Calendar />
const today = getNowDate()
const todayISO = getISODate(today)
{habitsHistory.map((element) => {
if (element.habit.goal.frequency === "daily") {
const [selectedDate, setSelectedDate] = useState<Date>(today)
const selectedDateISO = getISODate(selectedDate)
const habitsHistory = habitsTracker.getAllHabitsHistory()
let goalDays = 0
let totalGoalDays = 0
const dailyHabits = habitsHistory.filter((el) => {
return (
<Card key={element.habit.id} mode="outlined">
<Card.Title title="Sucess Week" />
el.habit.goal.frequency === "daily" && el.habit.startDate <= selectedDate
)
})
let displayDaily = true
if (dailyHabits.length === 0) {
displayDaily = false
} else {
for (const el of dailyHabits) {
totalGoalDays++
if (
el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ??
false
) {
goalDays++
}
}
}
let goalWeek = 0
let totalGoalWeek = 0
const weeklyHabits = habitsHistory.filter((el) => {
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 (
<Agenda
firstDay={1}
showClosingKnob
onDayPress={(date) => {
setSelectedDate(new Date(date.dateString))
}}
markedDates={{
[todayISO]: { marked: true, today: true },
}}
maxDate={todayISO}
selected={selectedDateISO}
renderList={() => {
return (
<>
{displayDaily ? (
<Card key="statsDay" mode="outlined">
<Card.Title title="Sucess Day" />
<Card.Content>
<Text variant="bodyMedium">
nbDays Sucess dans la semaine
{goalDays} but réussi dans la journée sur {totalGoalDays}
</Text>
<CircularProgress
value={91}
value={(goalDays / totalGoalDays) * 100}
activeStrokeWidth={12}
progressValueColor={"#ecf0f1"}
circleBackgroundColor="black"
@ -38,31 +122,46 @@ export const Stats: React.FC<StatsProps> = (props) => {
/>
</Card.Content>
</Card>
)
}
if (element.habit.goal.frequency === "weekly") {
return (
<Card key={element.habit.id} mode="outlined">
<Card.Title title="Sucess Month" />
) : null}
{displayWeekly ? (
<Card key="statsWeek" mode="outlined">
<Card.Title title="Sucess Week" />
<Card.Content>
<Text variant="bodyMedium">nbDays Sucess dans le mois</Text>
<Text variant="bodyMedium">
{goalWeek} but réussi dans la semaine sur {totalGoalWeek}
</Text>
<CircularProgress
value={(goalWeek / totalGoalWeek) * 100}
activeStrokeWidth={12}
progressValueColor={"#ecf0f1"}
circleBackgroundColor="black"
titleColor="white"
title="%"
/>
</Card.Content>
</Card>
)
}
if (element.habit.goal.frequency === "monthly") {
return (
<Card key={element.habit.id} mode="outlined">
) : null}
{displayMonthly ? (
<Card key="statsMonth" mode="outlined">
<Card.Title title="Sucess Month" />
<Card.Content>
<Text variant="bodyMedium">nbDays Sucess dans le mois</Text>
<Text variant="bodyMedium">
{goalMonth} but réussi dans le mois sur {totalGoalMonth}
</Text>
<CircularProgress
value={(goalMonth / totalGoalMonth) * 100}
activeStrokeWidth={12}
progressValueColor={"#ecf0f1"}
circleBackgroundColor="black"
titleColor="white"
title="%"
/>
</Card.Content>
</Card>
)
}
return null
})}
</ScrollView>
</SafeAreaView>
) : null}
</>
)
}}
/>
)
}