Lyticsman + Next.js

page.tsx

import {AreaChart, Card} from "@tremor/react";
import {charts} from "@livesession/lyticsman";
import qx from "@livesession/qx";

export default async function Home() {
    const query = qx()
        .range("TODAY-30DAYS", qx.today)
        .where(
            qx.session.website_id.eq("dab02d0a"),
            qx.session.duration.gt(100)
        )
        .query();

    const totalSessions = await charts()
        .hist(query)
        .sessions()

    const totalUsers = await charts()
        .hist(query)
        .users()

    const chartData = mergeAndFormat(totalSessions, totalUsers)

    return <>
        <Card className="sm:mx-auto sm:max-w-screen-lg mt-16">
            <p className="text-tremor-metric text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">Total
                sessions vs. new users within 30 days
            </p>
            <AreaChart
                className="mt-4 h-72"
                data={chartData}
                index="key"
                yAxisWidth={65}
                categories={["Sessions", "Users"]}
                colors={['indigo', 'cyan']}
            />
        </Card>
    </>
}

function mergeAndFormat(totalSessions, totalUsers) {
    const chartDataMap = {}

    totalSessions.forEach((data: any) => {
        if (!chartDataMap[data.key]) {
            chartDataMap[data.key] = {
                key: data.key,
            }
        }
        chartDataMap[data.key] = {
            ...chartDataMap[data.key],
            "Sessions": data.value
        }
    })

    totalUsers.forEach(data => {
        if (!chartDataMap[data.key]) {
            chartDataMap[data.key] = {
                key: data.key,
            }
        }
        chartDataMap[data.key] = {
            ...chartDataMap[data.key],
            "Users": data.value
        }
    })

    return Object.keys(chartDataMap).map(key => {
        return {
            ...chartDataMap[key],
            key: new Intl.DateTimeFormat('en-US', {month: 'short', day: 'numeric'}).format(new Date(key))
        }
    })
}