Change style of insights page
This commit is contained in:
parent
915f09848b
commit
c3f44fba03
|
@ -1,16 +1,16 @@
|
||||||
import { useFocusEffect } from "@react-navigation/native";
|
import { useFocusEffect } from "@react-navigation/native";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { ScrollView, View } from "react-native";
|
import { ScrollView, View } from "react-native";
|
||||||
import { IconButton, Text } from "react-native-paper";
|
import { IconButton, Text } from "react-native-paper";
|
||||||
import AppBarChart from "./AppBarChart";
|
import AppBarChart from "./AppBarChart";
|
||||||
|
import Chart from "./Chart";
|
||||||
|
import ConfirmDialog from "./ConfirmDialog";
|
||||||
|
import DrawerHeader from "./DrawerHeader";
|
||||||
|
import Select from "./Select";
|
||||||
import { MARGIN, PADDING } from "./constants";
|
import { MARGIN, PADDING } from "./constants";
|
||||||
import { AppDataSource } from "./data-source";
|
import { AppDataSource } from "./data-source";
|
||||||
import DrawerHeader from "./DrawerHeader";
|
|
||||||
import { DAYS } from "./time";
|
|
||||||
import Select from "./Select";
|
|
||||||
import { Periods } from "./periods";
|
import { Periods } from "./periods";
|
||||||
import ConfirmDialog from "./ConfirmDialog";
|
import { DAYS } from "./time";
|
||||||
import Chart from "./Chart";
|
|
||||||
|
|
||||||
interface WeekCount {
|
interface WeekCount {
|
||||||
week: string;
|
week: string;
|
||||||
|
@ -23,8 +23,8 @@ interface HourCount {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function InsightsPage() {
|
export default function InsightsPage() {
|
||||||
const [weekCounts, setWeekCounts] = useState<WeekCount[]>([]);
|
const [weekCounts, setWeekCounts] = useState<WeekCount[]>();
|
||||||
const [hourCounts, setHourCounts] = useState<HourCount[]>([]);
|
const [hourCounts, setHourCounts] = useState<HourCount[]>();
|
||||||
const [period, setPeriod] = useState(Periods.Monthly);
|
const [period, setPeriod] = useState(Periods.Monthly);
|
||||||
const [showWeek, setShowWeek] = useState(false);
|
const [showWeek, setShowWeek] = useState(false);
|
||||||
const [showHour, setShowHour] = useState(false);
|
const [showHour, setShowHour] = useState(false);
|
||||||
|
@ -68,10 +68,11 @@ export default function InsightsPage() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DrawerHeader name="Insights" />
|
<DrawerHeader name="Insights" />
|
||||||
<ScrollView
|
<View
|
||||||
style={{
|
style={{
|
||||||
padding: PADDING,
|
paddingLeft: PADDING,
|
||||||
flexGrow: 1,
|
paddingTop: PADDING,
|
||||||
|
paddingRight: PADDING,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Select
|
<Select
|
||||||
|
@ -85,7 +86,13 @@ export default function InsightsPage() {
|
||||||
value={period}
|
value={period}
|
||||||
onChange={(value) => setPeriod(value as Periods)}
|
onChange={(value) => setPeriod(value as Periods)}
|
||||||
/>
|
/>
|
||||||
|
</View>
|
||||||
|
<ScrollView
|
||||||
|
style={{
|
||||||
|
padding: PADDING,
|
||||||
|
flexGrow: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
|
@ -109,14 +116,15 @@ export default function InsightsPage() {
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{weekCounts.length > 0 ? (
|
{weekCounts?.length > 0 && (
|
||||||
<AppBarChart
|
<AppBarChart
|
||||||
options={weekCounts.map((weekCount) => ({
|
options={weekCounts.map((weekCount) => ({
|
||||||
label: DAYS[weekCount.week],
|
label: DAYS[weekCount.week],
|
||||||
value: weekCount.count,
|
value: weekCount.count,
|
||||||
}))}
|
}))}
|
||||||
/>
|
/>
|
||||||
) : (
|
)}
|
||||||
|
{weekCounts?.length === 0 && (
|
||||||
<Text style={{ marginBottom: MARGIN }}>
|
<Text style={{ marginBottom: MARGIN }}>
|
||||||
No entries yet! Start recording sets to see your most active days of
|
No entries yet! Start recording sets to see your most active days of
|
||||||
the week.
|
the week.
|
||||||
|
@ -146,17 +154,19 @@ export default function InsightsPage() {
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{hourCounts.length > 0 ? (
|
{hourCounts?.length > 0 && (
|
||||||
<Chart
|
<Chart
|
||||||
data={hourCounts.map((hc) => hc.count)}
|
data={hourCounts.map((hc) => hc.count)}
|
||||||
labels={hourCounts.map((hc) => hourLabel(hc.hour))}
|
labels={hourCounts.map((hc) => hourLabel(hc.hour))}
|
||||||
/>
|
/>
|
||||||
) : (
|
)}
|
||||||
|
{hourCounts?.length === 0 && (
|
||||||
<Text>
|
<Text>
|
||||||
No entries yet! Start recording sets to see your most active hours
|
No entries yet! Start recording sets to see your most active hours
|
||||||
of the day.
|
of the day.
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
|
<View style={{ marginBottom: MARGIN }} />
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
|
|
Loading…
Reference in New Issue
Block a user