Area Chart

"use client";

import { AreaChart } from "@dethink/components";

const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];
const starter = [
  8_200, 8_600, 9_100, 9_300, 9_900, 10_400, 10_200, 10_900, 11_600, 11_800,
  12_300, 12_900,
];
const growth = [
  21_400, 22_100, 23_800, 24_600, 25_200, 27_100, 28_400, 29_000, 31_200,
  32_600, 33_100, 35_400,
];
const enterprise = [
  18_000, 18_000, 22_500, 22_500, 22_500, 26_000, 26_000, 30_500, 30_500,
  30_500, 36_000, 36_000,
];

const data = months.map((month, i) => ({
  month,
  starter: starter[i],
  growth: growth[i],
  enterprise: enterprise[i],
}));

export function AreaChartMrr() {
  return (
    <div className="w-full">
      <h3 id="mrr-heading" className="mb-3 text-sm font-medium">
        MRR by plan, 2026
      </h3>
      <AreaChart
        aria-labelledby="mrr-heading"
        stacked
        data={data}
        index="month"
        indexLabel="Month"
        series={[
          { key: "starter", label: "Starter" },
          { key: "growth", label: "Growth" },
          { key: "enterprise", label: "Enterprise" },
        ]}
        formatOptions={{ style: "currency", currency: "USD" }}
      />
    </div>
  );
}

"use client";

import { AreaChart } from "@dethink/components";

const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const desktop = [4_820, 5_140, 5_390, 5_210, 4_760, 2_130, 1_980];
const mobile = [2_310, 2_450, 2_620, 2_580, 2_940, 3_710, 3_880];

const data = days.map((day, i) => ({
  day,
  desktop: desktop[i],
  mobile: mobile[i],
}));

export function AreaChartSessions() {
  return (
    <div className="w-full">
      <h3 id="sessions-heading" className="mb-3 text-sm font-medium">
        Sessions by device, this week
      </h3>
      <AreaChart
        aria-labelledby="sessions-heading"
        data={data}
        index="day"
        indexLabel="Day"
        height={240}
        series={[
          { key: "desktop", label: "Desktop" },
          { key: "mobile", label: "Mobile" },
        ]}
      />
    </div>
  );
}

"use client";

import { AreaChart } from "@dethink/components";

const values = [
  1_210,
  1_260,
  1_190,
  1_320,
  1_410,
  1_380,
  null,
  null,
  1_520,
  1_610,
  1_580,
  1_690,
  1_740,
  1_720,
];

const data = values.map((users, i) => ({ day: `Sep ${i + 1}`, users }));

export function AreaChartActiveUsers() {
  return (
    <div className="w-full">
      <h3 id="active-users-heading" className="mb-3 text-sm font-medium">
        Daily active users
      </h3>
      <AreaChart
        aria-labelledby="active-users-heading"
        data={data}
        index="day"
        indexLabel="Day"
        height={200}
        curve="linear"
        series={[{ key: "users", label: "Active users", color: "chart-3" }]}
      />
    </div>
  );
}