Line Chart

import { LineChart } from '@six-vallees/ui-react';

const rows = [
  { label: 'Revenue', value: '$48.2k', data: [4, 6, 5, 8, 7, 10, 9, 12], tone: 'ink' as const },
  { label: 'Sessions', value: '12,908', data: [10, 9, 11, 8, 9, 7, 8, 6], tone: 'muted' as const },
  { label: 'Signups', value: '486', data: [3, 4, 4, 5, 6, 6, 7, 8], tone: 'accent' as const },
  { label: 'Churn', value: '1.2%', data: [6, 5, 6, 4, 5, 4, 4, 3], tone: 'ink' as const },
];
const weight = [150, 143, 137, 132, 128, 125, 122, 120, 118];

export default function LineChartDemo() {
  return (
    <div className="flex flex-col gap-10 text-on-surface">
      <div>
        <p className="mb-4 sv-body-sm text-on-surface-variant">Inline (sparkline)</p>
        <div className="w-full max-w-[460px] divide-y divide-outline">
          {rows.map((r) => (
            <div className="flex items-center gap-6 py-3">
              <span className="w-24 sv-body-sm text-on-surface-variant">{r.label}</span>
              <LineChart data={r.data} inline area width={120} height={26} tone={r.tone} />
              <span className="ml-auto sv-body-md font-medium tabular-nums">{r.value}</span>
            </div>
          ))}
        </div>
      </div>
      <div>
        <p className="mb-4 sv-body-sm text-on-surface-variant">Block, with marker</p>
        <LineChart data={weight} markerIndex={weight.length - 1} markerLabel="Sep 09, 2026" />
      </div>
    </div>
  );
}