Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: stats/charts page #235

Merged
merged 2 commits into from
May 28, 2023
Merged

feat: stats/charts page #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
136fcb7
adding stats page
brunocorrea23 May 26, 2023
3fd5249
tweaks
iuioiua May 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions fresh.gen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@ import * as $14 from "./routes/item/[id].tsx";
import * as $15 from "./routes/login.ts";
import * as $16 from "./routes/logout.ts";
import * as $17 from "./routes/pricing.tsx";
import * as $18 from "./routes/submit.tsx";
import * as $19 from "./routes/user/[username].tsx";
import * as $18 from "./routes/stats.tsx";
import * as $19 from "./routes/submit.tsx";
import * as $20 from "./routes/user/[username].tsx";
import * as $$0 from "./islands/VoteButton.tsx";

const manifest = {
Expand All @@ -45,8 +46,9 @@ const manifest = {
"./routes/login.ts": $15,
"./routes/logout.ts": $16,
"./routes/pricing.tsx": $17,
"./routes/submit.tsx": $18,
"./routes/user/[username].tsx": $19,
"./routes/stats.tsx": $18,
"./routes/submit.tsx": $19,
"./routes/user/[username].tsx": $20,
},
islands: {
"./islands/VoteButton.tsx": $$0,
Expand Down
3 changes: 2 additions & 1 deletion import_map.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"std/": "https://deno.land/std@0.188.0/",
"stripe": "https://esm.sh/stripe@12.6.0",
"feed": "https://esm.sh/feed@4.2.2",
"oauth2_client/": "https://deno.land/x/oauth2_client@v1.0.0/"
"oauth2_client/": "https://deno.land/x/oauth2_client@v1.0.0/",
"fresh_charts/": "https://deno.land/x/fresh_charts@0.2.1/"
}
}
78 changes: 78 additions & 0 deletions routes/stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
// Copyright 2023 the Deno authors. All rights reserved. MIT license.
import type { Handlers, PageProps } from "$fresh/server.ts";
import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
import Layout from "@/components/Layout.tsx";
import Head from "@/components/Head.tsx";
import type { State } from "./_middleware.ts";
import { getAllVisitsPerDay } from "@/utils/db.ts";
import { Chart } from "fresh_charts/mod.ts";
import { ChartColors } from "fresh_charts/utils.ts";

interface StatsPageData extends State {
visits?: number[];
dates?: string[];
}

export const handler: Handlers<StatsPageData, State> = {
async GET(_, ctx) {
const daysBefore = 30;
const { visits, dates } = await getAllVisitsPerDay({
limit: daysBefore,
});

return ctx.render({ ...ctx.state, visits, dates });
},
};

function LineChart(
props: { title: string; x: string[]; y: number[] },
) {
return (
<>
<h3 class="py-4 text-2xl font-bold">{props.title}</h3>
<Chart
type="line"
options={{
plugins: {
legend: { display: false },
},
scales: {
y: { grid: { display: false } },
x: { grid: { display: false } },
},
}}
data={{
labels: props.x,
datasets: [{
label: props.title,
data: props.y,
borderColor: ChartColors.Blue,
backgroundColor: ChartColors.Blue,
borderWidth: 3,
cubicInterpolationMode: "monotone",
tension: 0.4,
}],
}}
/>
</>
);
}

export default function StatsPage(props: PageProps<StatsPageData>) {
return (
<>
<Head title="Stats" href={props.url.href} />
<Layout session={props.data.sessionId}>
<div class={`${SITE_WIDTH_STYLES} flex-1 px-4`}>
<div class="p-4 mx-auto max-w-screen-md">
<LineChart
title="Visits"
x={props.data.dates!}
y={props.data.visits!}
/>
</div>
</div>
</Layout>
</>
);
}
11 changes: 11 additions & 0 deletions utils/db.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,3 +405,14 @@ export async function getVisitsPerDay(date: Date) {

return res.value;
}

export async function getAllVisitsPerDay(options?: Deno.KvListOptions) {
const iter = await kv.list<bigint>({ prefix: ["visits"] }, options);
const visits = [];
const dates = [];
for await (const res of iter) {
visits.push(Number(res.value));
dates.push(String(res.key[1]));
}
return { visits, dates };
}