Compare periods

ComparePeriods.tsxThree bases as a closed set, the past drawn quieter than the present, the base named in the legend and the gap given as a number.Copy

import { Line, LineChart, XAxis, YAxis } from "recharts";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

/**
 * The base is the whole design decision, and there are three honest ones.
 * Each aligns a different cycle, so the chart says which it is using and
 * what that aligns, rather than leaving "last period" to mean anything.
 */
export const BASES = {
  "1d": { pick: "yesterday",  legend: "same period yesterday",  aligns: "time of day; a Sunday against a Monday" },
  "7d": { pick: "a week ago", legend: "same period last week",  aligns: "day of week and time of day" },
  "1y": { pick: "a year ago", legend: "same period last year",  aligns: "the season; the weekday wobbles" },
} as const;
export type Base = keyof typeof BASES;

const PRESENT = "hsl(var(--chart-1))";
const PAST = "hsl(var(--muted-foreground))";

export function ComparePeriods({ label, current, comparison, base, onBaseChange, width = 400, height = 150 }: {
  /** The current period, as the legend names it. */
  label: string;
  current: number[];
  /** The same window shifted back by `base`, on the same scale. */
  comparison: number[];
  base: Base;
  onBaseChange: (base: Base) => void;
  width?: number;
  height?: number;
}) {
  const data = current.map((now, i) => ({ i, now, then: comparison[i] }));
  const sum = (xs: number[]) => xs.reduce((a, b) => a + b, 0);
  // The gap as a number. Two lines show a difference; only a figure says how big.
  const pct = Math.round(((sum(current) - sum(comparison)) / sum(comparison)) * 100);

  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="overflow-x-auto">
        <LineChart width={width} height={height} data={data} margin={{ top: 8, right: 16, bottom: 0, left: 16 }}>
          <XAxis interval={0} dataKey="i" hide />
          <YAxis domain={[0, "auto"]} hide />
          {/* The past is thinner, dashed and grey so the present reads first.
              Equal weight makes a chart the viewer keeps re-checking. */}
          <Line type="linear" dataKey="then" stroke={PAST} strokeWidth={1.5} strokeDasharray="5 4" dot={false} isAnimationActive={false} />
          <Line type="linear" dataKey="now" stroke={PRESENT} strokeWidth={2.5} dot={false} isAnimationActive={false} />
        </LineChart>
      </div>

      <div className="mt-2 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs">
        <span className="inline-flex items-center gap-1.5 text-foreground">
          <span className="h-0.5 w-5 bg-chart-1" />{label}
        </span>
        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
          <span className="w-5 border-t border-dashed border-muted-foreground" />{BASES[base].legend}
        </span>
        <span className="tabular-nums text-foreground">{pct > 0 ? "+" : ""}{pct}%</span>

        <ToggleGroup type="single" value={base} onValueChange={(v) => v && onBaseChange(v as Base)}
          aria-label="Compare against" className="ml-auto gap-1">
          {(Object.keys(BASES) as Base[]).map((b) => (
            <ToggleGroupItem key={b} value={b} size="sm" className="h-6 px-2 text-xs data-[state=on]:bg-muted">
              {BASES[b].pick}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>
      <p className="mt-1 text-xs text-muted-foreground">aligns {BASES[base].aligns}</p>
    </div>
  );
}

demo.tsxHow it is called: this week against the same window a week back, with the other two bases a click away.Copy

import { useState } from "react";
import { ComparePeriods, type Base } from "./ComparePeriods";

/**
 * This week against the same window shifted back. Last week is the default
 * because it aligns the weekday; the other two are there to show the same
 * chart re-based, with the gap recomputed.
 */
const THIS_WEEK = [32, 54, 44, 92, 82, 60, 76, 58, 68];
const SHIFTED: Record<Base, number[]> = {
  "1d": [30, 50, 48, 88, 78, 64, 70, 60, 62],
  "7d": [40, 58, 50, 84, 74, 52, 62, 44, 50],
  "1y": [28, 44, 40, 70, 66, 48, 58, 42, 46],
};

export default function Demo() {
  const [base, setBase] = useState<Base>("7d");
  return (
    <ComparePeriods
      label="this week"
      current={THIS_WEEK}
      comparison={SHIFTED[base]}
      base={base}
      onBaseChange={setBase}
    />
  );
}