Home solar energyHome solar energy

1import { useState } from "react";2 3type Series = { name: string; values: number[] };4 5const COLORS = ["var(--color-accent)", "var(--color-muted)"];6const W = 720;7const H = 260;8const PAD = { top: 16, right: 12, bottom: 28, left: 48 };9 10function niceMax(n: number) {11  if (n <= 0) return 1;12  const p = 10 ** Math.floor(Math.log10(n));13  return Math.ceil(n / p) * p;14}15 16function fmt(n: number) {17  return Math.abs(n) >= 1000 ? `${+(n / 1000).toFixed(1)}k` : `${+n.toFixed(1)}`;18}19 20/** A dependency-free SVG line or bar chart with a hover readout. */21export function Chart({ type, labels, series, unit = "" }: { type: "line" | "bar"; labels: string[]; series: Series[]; unit?: string }) {22  const [hover, setHover] = useState<number | null>(null);23  const max = niceMax(Math.max(...series.flatMap((s) => s.values)));24  const iw = W - PAD.left - PAD.right;25  const ih = H - PAD.top - PAD.bottom;26  const step = iw / labels.length;27  const x = (i: number) => PAD.left + step * i + step / 2;28  const y = (v: number) => PAD.top + ih - (v / max) * ih;29  const ticks = [0, 0.25, 0.5, 0.75, 1].map((t) => t * max);30  const every = Math.ceil(labels.length / 8);31 32  return (33    <div className="relative">34      <svg viewBox={`0 0 ${W} ${H}`} className="h-auto w-full" role="img" aria-label={`${series.map((s) => s.name).join(" and ")} by period`} onMouseLeave={() => setHover(null)}>35        {ticks.map((t) => (36          <g key={t}>37            <line x1={PAD.left} x2={W - PAD.right} y1={y(t)} y2={y(t)} stroke="var(--color-line)" />38            <text x={PAD.left - 10} y={y(t) + 4} textAnchor="end" fontSize="11" fill="var(--color-muted)">39              {unit === "$" || unit === "€" || unit === "£" || unit === "₹" ? unit : ""}40              {fmt(t)}41              {unit === "%" ? "%" : ""}42            </text>43          </g>44        ))}45        {labels.map((l, i) =>46          i % every === 0 ? (47            <text key={l + i} x={x(i)} y={H - 8} textAnchor="middle" fontSize="11" fill="var(--color-muted)">48              {l}49            </text>50          ) : null,51        )}52        {type === "bar"53          ? series.map((s, si) =>54              s.values.map((v, i) => {55                const bw = Math.min(28, (step * 0.7) / series.length);56                const bx = x(i) - (bw * series.length) / 2 + bw * si;57                return <rect key={`${si}-${i}`} x={bx} y={y(v)} width={bw - 2} height={PAD.top + ih - y(v)} rx={3} fill={COLORS[si % COLORS.length]} opacity={hover === null || hover === i ? 1 : 0.45} />;58              }),59            )60          : series.map((s, si) => {61              const d = s.values.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");62              return (63                <g key={s.name}>64                  {si === 0 ? <path d={`${d} L${x(s.values.length - 1)},${PAD.top + ih} L${x(0)},${PAD.top + ih} Z`} fill="var(--color-accent)" opacity={0.08} /> : null}65                  <path d={d} fill="none" stroke={COLORS[si % COLORS.length]} strokeWidth={si === 0 ? 2.25 : 1.75} strokeDasharray={si === 0 ? undefined : "5 5"} strokeLinejoin="round" />66                  {hover !== null ? <circle cx={x(hover)} cy={y(s.values[hover])} r={4} fill="var(--color-bg)" stroke={COLORS[si % COLORS.length]} strokeWidth={2} /> : null}67                </g>68              );69            })}70        {hover !== null && type === "line" ? <line x1={x(hover)} x2={x(hover)} y1={PAD.top} y2={PAD.top + ih} stroke="var(--color-line)" /> : null}71        {labels.map((l, i) => (72          <rect key={`hit-${l}-${i}`} x={PAD.left + step * i} y={PAD.top} width={step} height={ih} fill="transparent" onMouseEnter={() => setHover(i)} />73        ))}74      </svg>75      {hover !== null ? (76        <div className="pointer-events-none absolute top-2 rounded-card border border-line bg-bg px-3 py-2 text-sm shadow-lg" style={{ left: `${Math.min(80, (x(hover) / W) * 100)}%` }}>77          <p className="font-medium">{labels[hover]}</p>78          {series.map((s, si) => (79            <p key={s.name} className="flex items-center gap-2 tabular-nums text-muted">80              <span className="h-2 w-2 rounded-full" style={{ background: COLORS[si % COLORS.length] }} />81              {s.name}: <span className="text-fg">{s.values[hover].toLocaleString()}</span>82            </p>83          ))}84        </div>85      ) : null}86    </div>87  );88}