Line Chart

"use client";

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

const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];
const revenue = [
  42_100, 44_800, 43_900, 48_200, 51_600, 55_300, 54_100, 58_900, 62_400,
  61_800, 66_200, 71_500,
];
const expenses = [
  31_200, 32_100, 34_800, 33_900, 35_600, 37_200, 38_900, 38_100, 40_300,
  42_600, 41_900, 44_100,
];
const payroll = [
  18_400, 18_400, 19_100, 19_100, 19_800, 21_200, 21_200, 21_900, 22_600,
  22_600, 23_400, 23_400,
];

const data = months.map((month, i) => ({
  month,
  revenue: revenue[i],
  expenses: expenses[i],
  payroll: payroll[i],
}));

export function LineChartRevenue() {
  return (
    <div className="w-full">
      <h3 id="revenue-heading" className="mb-3 text-sm font-medium">
        Revenue vs spend, 2026
      </h3>
      <LineChart
        aria-labelledby="revenue-heading"
        data={data}
        index="month"
        indexLabel="Month"
        series={[
          { key: "revenue", label: "Revenue" },
          { key: "expenses", label: "Expenses" },
          { key: "payroll", label: "Payroll" },
        ]}
        formatOptions={{ style: "currency", currency: "USD" }}
      />
    </div>
  );
}

"use client";

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

// Gaps (null) stay gaps: the collector was down for two readings.
const p95 = [
  182,
  176,
  190,
  204,
  null,
  null,
  231,
  218,
  197,
  188,
  179,
  184,
  176,
  171,
];

const data = p95.map((value, i) => ({
  time: `${String(9 + Math.floor(i / 2)).padStart(2, "0")}:${i % 2 ? "30" : "00"}`,
  p95: value,
}));

export function LineChartLatency() {
  return (
    <div className="w-full">
      <h3 id="latency-heading" className="mb-3 text-sm font-medium">
        API p95 latency (ms)
      </h3>
      <LineChart
        aria-labelledby="latency-heading"
        data={data}
        index="time"
        indexLabel="Time"
        series={[{ key: "p95", label: "p95", color: "chart-7" }]}
        includeZero={false}
        curve="linear"
        height={220}
        formatValue={(value) => `${Math.round(value)} ms`}
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { LineChart } from "@dethink/components";

const data = [
  { week: "W1", free: 1_240, pro: 310, team: 64 },
  { week: "W2", free: 1_380, pro: 342, team: 71 },
  { week: "W3", free: 1_310, pro: 365, team: 83 },
  { week: "W4", free: 1_520, pro: 398, team: 90 },
  { week: "W5", free: 1_610, pro: 421, team: 102 },
  { week: "W6", free: 1_590, pro: 447, team: 118 },
];

export function LineChartTableView() {
  const [hidden, setHidden] = useState<string[]>(["free"]);
  const [table, setTable] = useState(false);

  return (
    <div className="grid w-full gap-2">
      <LineChart
        aria-label="Weekly signups by plan"
        data={data}
        index="week"
        indexLabel="Week"
        series={[
          { key: "free", label: "Free" },
          { key: "pro", label: "Pro" },
          { key: "team", label: "Team" },
        ]}
        hiddenSeries={hidden}
        onHiddenSeriesChange={setHidden}
        showTable={table}
        onShowTableChange={setTable}
        height={240}
      />
      <p className="text-muted-foreground text-xs">
        Hidden: {hidden.length ? hidden.join(", ") : "none"} · View:{" "}
        {table ? "table" : "chart"}
      </p>
    </div>
  );
}