feat: stats v1
This commit is contained in:
parent
c03cd2b96d
commit
e68fe6075e
@ -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>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
Reference in New Issue
Block a user