wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: time range selector & area chart improvements

Browse Source 
- Add 7D/30D/3M toggle on Daily Activity and Comparison Between Villages charts
- Switch LineChart to AreaChart with fillOpacity 0.4 for bold gradient fill
- Fix broken tooltip on all charts with custom dark card content
- Apply consistent chart style (tickLine, gridAxis, glow) to village detail page
- api.ts: getDailyActivity and getComparisonActivity now accept range param
This commit is contained in:
amaliadwiy
2026-05-22 14:16:31 +08:00
parent 91dead0082
commit 0846ac924c
4 changed files with 120 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/frontend/routes/apps.$appId.index.tsx
View File

@@ -52,9 +52,12 @@ function AppOverviewPage() {
const [maintenance, setMaintenance] = useState(false)
const [isSaving, setIsSaving] = useState(false)
const [dailyRange, setDailyRange] = useState<7 | 30 | 90>(7)
const [comparisonRange, setComparisonRange] = useState<7 | 30 | 90>(7)
const { data: gridRes, isLoading: gridLoading, mutate: mutateGrid } = useSWR(isDesaPlus ? API_URLS.getGridOverview() : null, fetcher)
const { data: dailyRes, isLoading: dailyLoading, mutate: mutateDaily } = useSWR(isDesaPlus ? API_URLS.getDailyActivity() : null, fetcher)
const { data: comparisonRes, isLoading: comparisonLoading, mutate: mutateComparison } = useSWR(isDesaPlus ? API_URLS.getComparisonActivity() : null, fetcher)
const { data: dailyRes, isLoading: dailyLoading, mutate: mutateDaily } = useSWR(isDesaPlus ? API_URLS.getDailyActivity(dailyRange) : null, fetcher)
const { data: comparisonRes, isLoading: comparisonLoading, mutate: mutateComparison } = useSWR(isDesaPlus ? API_URLS.getComparisonActivity(comparisonRange) : null, fetcher)
const { data: appData, isLoading: appLoading } = useSWR(`/api/apps/${appId}`, fetcher)
@@ -253,8 +256,8 @@ function AppOverviewPage() {
</Group>
<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
<VillageActivityLineChart data={dailyData} isLoading={dailyLoading} />
<VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} />
<VillageActivityLineChart data={dailyData} isLoading={dailyLoading} range={dailyRange} onRangeChange={setDailyRange} />
<VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} range={comparisonRange} onRangeChange={setComparisonRange} />
</SimpleGrid>
<ErrorDataTable ref={errorTableRef} appId={appId} />