Dithered sparkline charts for React

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const data = [31,33,30,36,38,35,40,41,39,43,44,45]

export function ChartSparklineLine() {
  return (
    <div className="border p-4">
      <p className="text-sm text-muted-foreground">Revenue</p>
      <p className="mt-1 font-heading text-3xl">$45,231</p>
      <p className="text-xs text-muted-foreground">+20.1% from last month</p>
      <div className="mt-4">
        <SparklineChart type="line" data={data} label="Revenue" />
      </div>
    </div>
  )
}

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const data = [1980,2010,2050,2030,2100,2160,2140,2200,2230,2210,2290,2350]

export function ChartSparklineArea() {
  return (
    <div className="border p-4">
      <p className="text-sm text-muted-foreground">Active users</p>
      <p className="mt-1 font-heading text-3xl">2,350</p>
      <p className="text-xs text-muted-foreground">+180 this week</p>
      <div className="mt-4">
        <SparklineChart type="area" data={data} label="Active users" fill="gradient" />
      </div>
    </div>
  )
}

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const data = [62,75,80,71,90,94,58,66,82,88,79,97,101,61]

export function ChartSparklineBar() {
  return (
    <div className="border p-4">
      <p className="text-sm text-muted-foreground">Orders</p>
      <p className="mt-1 font-heading text-3xl">1,204</p>
      <p className="text-xs text-muted-foreground">+12% vs last week</p>
      <div className="mt-4">
        <SparklineChart type="bar" data={data} label="Orders" />
      </div>
    </div>
  )
}

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const data = [120,-40,85,60,-75,30,-20,140,95,-60,45,70,-30,110,-90,55,80,-15,65,100]

export function ChartSparklineWinLoss() {
  return (
    <div className="border p-4">
      <p className="text-sm text-muted-foreground">Daily P&L</p>
      <p className="mt-1 font-heading text-3xl">+$725</p>
      <p className="text-xs text-muted-foreground">13 up days, 7 down</p>
      <div className="mt-4">
        <SparklineChart type="bar" data={data} label="Daily P&L" cell={1} />
      </div>
    </div>
  )
}

"use client"

import { useState } from "react"

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const data = [420,460,445,510,530,490,560,600,580,620,650,610,680,710]

export function ChartSparklineInteractive() {
  const [active, setActive] = useState<{ index: number; value: number }>()
  return (
    <div className="border p-4">
      <p className="text-sm text-muted-foreground">Visitors</p>
      <p className="mt-1 font-heading text-3xl">{(active?.value ?? data[data.length - 1]).toLocaleString("en-US")}</p>
      <p className="text-xs text-muted-foreground">Last 14 days</p>
      <div className="mt-4">
        <SparklineChart type="line" data={data} label="Visitors" interactive onActiveChange={setActive} />
      </div>
    </div>
  )
}

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const rows = [
  { name: "Lamps", data: [12,14,13,17,16,19,21,22], value: "$4,120" },
  { name: "Chairs", data: [30,28,29,25,26,24,22,23], value: "$6,870" },
  { name: "Desks", data: [8,9,9,11,10,12,12,14], value: "$9,310" },
  { name: "Rugs", data: [15,18,14,19,15,20,16,21], value: "$2,450" },
]

export function ChartSparklineTable() {
  return (
    <table className="w-full text-sm">
      <tbody>
        {rows.map((row) => (
          <tr key={row.name} className="border-t">
            <td className="py-2">{row.name}</td>
            <td className="w-24 py-2">
              <SparklineChart type="line" data={row.data} label={row.name} height={20} />
            </td>
            <td className="py-2 text-right tabular-nums">{row.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}