shadcn Area Chart - Interactive

import { useMemo, useState } from 'react'
import {
  areaY,
  d3Curve,
  defineChart,
  stack,
  type ChartPoint,
} from '@tanstack/charts'
import { RendererChart } from '@tanstack/charts/react/tooltip'
import { tooltip } from '@tanstack/charts/tooltip'
import { motion } from '@tanstack/charts/motion'
import { scaleLinear, scalePoint } from 'd3-scale'
import { curveNatural } from 'd3-shape'
import {
  shadcnColors,
  type ShadcnSeriesDatum,
} from '@tanstack/charts-data/shadcn'
import interactiveAreaData from '@tanstack/charts-data/shadcn-area-interactive-data'
import './styles.css'
type InteractiveTimeRange = '90d' | '30d' | '7d'
const twoSeries = ['desktop', 'mobile'] as const
const interactiveAreaRows = interactiveAreaData as readonly {
  date: string
  desktop: number
  mobile: number
}[]
export function createExampleChart(timeRange: InteractiveTimeRange = '90d') {
  const filteredRows = filterInteractiveAreaRows(timeRange)
  const rows: ShadcnSeriesDatum[] = filteredRows.flatMap((row) => [
    { month: row.date, series: 'mobile', value: row.mobile },
    { month: row.date, series: 'desktop', value: row.desktop },
  ])
  return defineChart(
    ({ width }) => ({
      marks: [
        areaY(rows, {
          id: 'visitor-areas',
          x: 'month',
          y: 'value',
          z: 'series',
          color: 'series',
          key: (row) => `${row.month}:${row.series}`,
          layout: stack({ order: ['mobile', 'desktop'] }),
          curve: d3Curve(curveNatural),
          fill: (row) => `url(#shadcn-interactive-${row.series})`,
          fillOpacity: 1,
          stroke: (row) =>
            row.series === 'mobile' ? shadcnColors[1] : shadcnColors[0],
          strokeWidth: 1,
        }),
      ],
      scales: {
        x: {
          scale: scalePoint,
          axis: {
            line: false,
            ticks: {
              values: interactiveDateTicks(timeRange),
              size: 0,
              padding: 10,
              format: formatMonthDay,
            },
          },
        },
        y: {
          scale: scaleLinear().domain([0, 1200]),
          grid: true,
          axis: {
            line: false,
            ticks: { values: [0, 300, 600, 900, 1200], size: 0 },
            tickLabels: false,
          },
        },
      },

      color: { domain: twoSeries, range: shadcnColors.slice(0, 2) },
      gradients: twoSeries.map((series, index) => ({
        id: `shadcn-interactive-${series}`,
        x1: 0,
        y1: 1,
        x2: 0,
        y2: 0,
        stops: [
          { offset: 0.05, color: shadcnColors[index], opacity: 0.1 },
          { offset: 0.95, color: shadcnColors[index], opacity: 0.8 },
        ],
      })),
      margin: {
        top: 32,
        right: width < 400 ? 14 : 5,
        bottom: 35,
        left: 5,
      },
      theme: shadcnTheme(),
    }),
    {
      svgAnimation: false,
      focus: 'group-x',
      tooltip: {
        use: tooltip,
        className: 'sc-chart-tooltip',
        anchor: 'group-center',
        placement: 'auto',
        sort: 'color-domain',
        content: (points) => shadcnTooltipContent(points),
      },
    },
  )
}
function filterInteractiveAreaRows(timeRange: InteractiveTimeRange) {
  const days = timeRange === '30d' ? 30 : timeRange === '7d' ? 7 : 90
  const start = new Date('2024-06-30T00:00:00Z')
  start.setUTCDate(start.getUTCDate() - days)
  const firstDate = start.toISOString().slice(0, 10)
  return interactiveAreaRows.filter((row) => row.date >= firstDate)
}
function interactiveDateTicks(timeRange: InteractiveTimeRange) {
  if (timeRange === '7d') {
    return ['2024-06-23', '2024-06-25', '2024-06-27', '2024-06-29']
  }
  if (timeRange === '30d') {
    return [
      '2024-06-01',
      '2024-06-08',
      '2024-06-15',
      '2024-06-22',
      '2024-06-29',
    ]
  }
  return [
    '2024-04-10',
    '2024-04-21',
    '2024-05-02',
    '2024-05-13',
    '2024-05-25',
    '2024-06-05',
    '2024-06-16',
    '2024-06-29',
  ]
}
function formatMonthDay(value: string) {
  return new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
    timeZone: 'UTC',
  }).format(new Date(value))
}
function shadcnTheme() {
  return {
    foreground: 'var(--muted-foreground, var(--muted))',
    grid: 'var(--border)',
    background: 'transparent',
  }
}
function shadcnTooltipContent<TDatum>(points: readonly ChartPoint<TDatum>[]) {
  return {
    title: String(points[0]?.xValue ?? ''),
    rows: points.map((point) => ({
      label: titleCase(
        String(
          point.group ??
            point.markId.replace(
              /-?(bars|lines|areas|slices|values|radar)$/u,
              '',
            ),
        ),
      ),
      value: Number(point.yValue ?? point.xValue ?? 0).toLocaleString('en-US'),
      color: point.color,
    })),
  }
}
function titleCase(value: string) {
  return value.charAt(0).toUpperCase() + value.slice(1)
}
export const definition = createExampleChart()
const renderer = motion({
  initial: 'always',
  transition: { type: 'spring', stiffness: 170, damping: 18, mass: 1 },
})
export interface ExampleProps {
  width?: number
  height?: number
}
export default function Example({ width = 640, height = 600 }: ExampleProps) {
  const [timeRange, setTimeRange] = useState<InteractiveTimeRange>('90d')
  const chartDefinition = useMemo(
    () => createExampleChart(timeRange),
    [timeRange],
  )
  const contentWidth = Math.max(1, width - 50)
  const chartWidth = contentWidth
  const chartHeight = 250
  return (
    <div className="sc-example" style={{ width, height }}>
      <article className="sc-card sc-interactive-area" style={{ width }}>
        <header className="sc-card-header">
          <div className="sc-card-heading">
            <h2>Area Chart - Interactive</h2>
            <p>Showing total visitors for the last 3 months</p>
          </div>
          <div className="sc-card-action">
            <SelectControl
              value={timeRange}
              onChange={(value) => setTimeRange(value as InteractiveTimeRange)}
              options={[
                { value: '90d', label: 'Last 3 months' },
                { value: '30d', label: 'Last 30 days' },
                { value: '7d', label: 'Last 7 days' },
              ]}
            />
          </div>
        </header>
        <div className="sc-card-content">
          <div
            className="sc-chart"
            style={{ width: chartWidth, height: chartHeight }}
          >
            <RendererChart
              definition={chartDefinition}
              renderer={renderer}
              initialWidth={chartWidth}
              height={chartHeight}
              ariaLabel="Area Chart - Interactive"
            />
          </div>
          <div className="sc-chart-footer">
            <Legend />
          </div>
        </div>
      </article>
    </div>
  )
}
function Legend() {
  return (
    <>
      {['desktop', 'mobile'].map((label, index) => (
        <span className="sc-legend-item" key={label}>
          <span
            className="sc-legend-dot"
            style={{ background: shadcnColors[index] }}
          />
          {titleCase(label)}
        </span>
      ))}
    </>
  )
}
function SelectControl({
  value,
  options,
  onChange,
}: {
  value: string
  options: readonly {
    value: string
    label: string
    swatch?: string
  }[]
  onChange: (value: string) => void
}) {
  const selected = options.find((option) => option.value === value)
  return (
    <label className="sc-select-display">
      {selected?.swatch ? (
        <span
          className="sc-select-swatch"
          style={{ background: selected.swatch }}
        />
      ) : null}
      <select
        aria-label="Select a value"
        value={value}
        onChange={(event) => onChange(event.currentTarget.value)}
      >
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="m6 9 6 6 6-6"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
        />
      </svg>
    </label>
  )
}

.sc-example {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  color: var(--foreground);
  background: var(--background);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  text-rendering: geometricPrecision;
}
:root[data-theme='dark'] .sc-example {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --border: oklch(1 0 0 / 10%);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
}
.sc-example,
.sc-example * {
  box-sizing: border-box;
}
.sc-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--card-foreground);
  padding: 24px 0;
}
.sc-card-header {
  display: grid;
  gap: 8px;
  padding: 0 24px;
}
.sc-card-heading {
  display: grid;
  gap: 8px;
}
.sc-card-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.sc-card-header p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 20px;
}
.sc-card-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0 24px;
}
.sc-chart {
  position: relative;
  flex: none;
}
.sc-chart > * {
  display: block;
}
.sc-chart-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted-foreground);
  font-size: 12px;
}
.sc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.sc-example .ts-chart {
  color: var(--muted-foreground);
}
.sc-example .ts-chart__grid line,
.sc-example .ts-chart__polar-grid path,
.sc-example .ts-chart__polar-grid line {
  stroke: var(--border);
}
.sc-example .ts-chart__axes text,
.sc-example .ts-chart__polar-grid text {
  fill: var(--muted-foreground);
  font-size: 12px;
}
.sc-example .ts-chart-tooltip {
  min-width: 128px;
  padding: 7px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--card) !important;
  color: var(--card-foreground) !important;
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
  font-size: 12px;
}
.sc-interactive-area {
  gap: 0;
  padding-top: 0;
}
.sc-interactive-area .sc-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.sc-interactive-area .sc-card-heading {
  flex: 1;
  gap: 4px;
}
.sc-interactive-area .sc-card-content {
  padding-top: 24px;
}
.sc-interactive-area .sc-chart-footer {
  margin-top: 8px;
}
.sc-card-action {
  margin-left: auto;
}
.sc-select-display {
  position: relative;
  display: flex;
  min-width: 130px;
  height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
.sc-select-display:focus-within {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}
.sc-select-display select {
  min-width: 0;
  flex: 1;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sc-select-display svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted-foreground);
  pointer-events: none;
}
.sc-select-swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px;
}