Last active
February 24, 2024 05:05
-
-
Save RhysSullivan/502733dad2f0914987f66e022f3903a9 to your computer and use it in GitHub Desktop.
100 LOC Typelytics Dashboard
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { ClientMap } from "./client-map"; | |
| import { events } from "../../events"; | |
| import { PostHog } from "@typelytics/posthog"; | |
| import { Chart } from "@typelytics/tremor"; | |
| import { Card, Grid, Text, Title } from "@tremor/react"; | |
| export default async function Home() { | |
| const domain = "www.answeroverflow.com"; | |
| const posthog = new PostHog({ | |
| events, | |
| globalFilters: { | |
| filters: { | |
| compare: "exact", | |
| property: "$host", | |
| value: domain, | |
| }, | |
| }, | |
| executionOptions: { | |
| type: "line", | |
| date_from: "Last 7 days", | |
| }, | |
| }); | |
| const uniqueVisitors = await posthog | |
| .query() | |
| .addSeries("$pageview", { | |
| label: "Page View", | |
| sampling: "unique_session", | |
| }) | |
| .execute({ | |
| type: "line", | |
| compare: true, | |
| }); | |
| const topPaths = await posthog | |
| .query() | |
| .addSeries("$pageview", { | |
| label: "Page View", | |
| sampling: "unique_session", | |
| }) | |
| .execute({ | |
| type: "table", | |
| breakdown: "$pathname", | |
| breakdown_hide_other_aggregation: true, | |
| }); | |
| const deviceTypes = await posthog | |
| .query() | |
| .addSeries("$pageview", { | |
| label: "Page View", | |
| sampling: "unique_session", | |
| }) | |
| .execute({ | |
| type: "pie", | |
| breakdown: "$device_type", | |
| }); | |
| const topReferrers = await posthog | |
| .query() | |
| .addSeries("$pageview", { | |
| label: "Page View", | |
| sampling: "unique_session", | |
| }) | |
| .execute({ | |
| type: "table", | |
| breakdown: "$referring_domain", | |
| breakdown_hide_other_aggregation: true, | |
| }); | |
| const worldMap = await posthog | |
| .query() | |
| .addSeries("$pageview", { | |
| label: "Page View", | |
| sampling: "unique_session", | |
| }) | |
| .execute({ | |
| type: "world", | |
| }); | |
| return ( | |
| <main className="p-12"> | |
| <Title>Web Analytics</Title> | |
| <Text>An overview of web analytics for {domain}.</Text> | |
| <Card className="mt-6"> | |
| <Title>Unique Visitors</Title> | |
| <Chart {...uniqueVisitors} colors={["blue", "purple"]} /> | |
| </Card> | |
| <Card className="mt-6 max-h-[400px] overflow-y-auto"> | |
| <Title>Top Paths</Title> | |
| <Chart {...topPaths} /> | |
| </Card> | |
| <Grid numItemsLg={2} className="gap-6 mt-6"> | |
| <Card className="max-h-[400px] overflow-y-auto"> | |
| <Title>Top Referrers</Title> | |
| <Chart {...topReferrers} /> | |
| </Card> | |
| <Card> | |
| <Title>Device Types</Title> | |
| <Chart {...deviceTypes} className="min-h-[70%]" variant="pie" /> | |
| </Card> | |
| </Grid> | |
| <Card className="mt-6"> | |
| <Title>World Map</Title> | |
| <ClientMap {...worldMap} /> | |
| </Card> | |
| </main> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment