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