Add period selectors for insights page
This commit is contained in:
parent
a176036c33
commit
e106d2475b
|
@ -3,10 +3,12 @@ import { useCallback, useState } from "react";
|
|||
import { View } from "react-native";
|
||||
import { Text } from "react-native-paper";
|
||||
import AppBarChart from "./AppBarChart";
|
||||
import { PADDING } from "./constants";
|
||||
import { MARGIN, PADDING } from "./constants";
|
||||
import { AppDataSource } from "./data-source";
|
||||
import DrawerHeader from "./DrawerHeader";
|
||||
import { DAYS } from "./time";
|
||||
import Select from "./Select";
|
||||
import { Periods } from "./periods";
|
||||
|
||||
export interface WeekCounts {
|
||||
week: number;
|
||||
|
@ -15,19 +17,24 @@ export interface WeekCounts {
|
|||
|
||||
export default function InsightsPage() {
|
||||
const [weekCounts, setWeekCounts] = useState<WeekCounts[]>([]);
|
||||
const [period, setPeriod] = useState(Periods.Monthly);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
let difference = "-1 months";
|
||||
if (period === Periods.TwoMonths) difference = "-2 months";
|
||||
if (period === Periods.ThreeMonths) difference = "-3 months";
|
||||
if (period === Periods.SixMonths) difference = "-6 months";
|
||||
const select = `
|
||||
SELECT strftime('%w', created) as week, COUNT(*) as count
|
||||
FROM sets
|
||||
WHERE created IS NOT NULL
|
||||
GROUP BY week
|
||||
HAVING week IS NOT NULL
|
||||
ORDER BY count DESC;
|
||||
`;
|
||||
SELECT strftime('%w', created) as week, COUNT(*) as count
|
||||
FROM sets
|
||||
WHERE DATE(created) >= DATE('now', 'weekday 0', '${difference}')
|
||||
GROUP BY week
|
||||
HAVING week IS NOT NULL
|
||||
ORDER BY count DESC;
|
||||
`;
|
||||
AppDataSource.manager.query(select).then(setWeekCounts);
|
||||
}, [])
|
||||
}, [period])
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -39,7 +46,20 @@ export default function InsightsPage() {
|
|||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<Text variant="titleLarge">Most active days of the week</Text>
|
||||
<Text variant="titleLarge" style={{ marginBottom: MARGIN }}>
|
||||
Most active days of the week
|
||||
</Text>
|
||||
<Select
|
||||
label="Period"
|
||||
items={[
|
||||
{ value: Periods.Monthly, label: Periods.Monthly },
|
||||
{ value: Periods.TwoMonths, label: Periods.TwoMonths },
|
||||
{ value: Periods.ThreeMonths, label: Periods.ThreeMonths },
|
||||
{ value: Periods.SixMonths, label: Periods.SixMonths },
|
||||
]}
|
||||
value={period}
|
||||
onChange={(value) => setPeriod(value as Periods)}
|
||||
/>
|
||||
<AppBarChart
|
||||
options={weekCounts.map((weekCount) => ({
|
||||
label: DAYS[weekCount.week],
|
||||
|
|
|
@ -2,4 +2,7 @@ export enum Periods {
|
|||
Weekly = "This week",
|
||||
Monthly = "This month",
|
||||
Yearly = "This year",
|
||||
TwoMonths = "2 months",
|
||||
ThreeMonths = "3 months",
|
||||
SixMonths = "6 months",
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user