100 LOC Typelytics Dashboard

demo.tsx

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>
  );
}