Industry unemployment bump chart

import { Chart } from '@tanstack/charts/react/tooltip'
import { tooltip as exampleTooltip } from '@tanstack/charts/tooltip'

import {
  d3Curve,
  defineChart,
  dot,
  lineY,
  rank,
  select,
  text,
} from '@tanstack/charts'
import { scaleLinear, scaleUtc } from 'd3-scale'
import { curveBumpX } from 'd3-shape'
import { industries } from '@charts-poc/demo-data/industries'

const colors = ['#2563eb', '#ea580c', '#059669', '#7c3aed', '#db2777']
const includedIndustries = [
  'Wholesale and Retail Trade',
  'Manufacturing',
  'Leisure and hospitality',
  'Business services',
  'Construction',
] as const
const includedIndustrySet: ReadonlySet<string> = new Set(includedIndustries)
const observations = industries.filter(
  (row) =>
    row.date.getUTCMonth() === 0 &&
    row.date.getUTCFullYear() >= 2004 &&
    includedIndustrySet.has(row.industry),
)

export const bumpRankingDefinition = (input?: ExampleOptions) => {
  const rows = rank(observations, {
    by: 'date',
    value: 'unemployed',
    order: 'descending',
    ties: 'competition',
  })
  const labels = select(rows, {
    by: 'industry',
    value: (datum) => datum.date.getTime(),
    select: 'max',
  })

  return defineChart({
    marks: [
      lineY(rows, {
        id: 'industry-ranks',
        x: 'date',
        y: 'rank',
        color: 'industry',
        curve: d3Curve(curveBumpX),
        strokeWidth: 2.25,
      }),
      dot(rows, {
        id: 'industry-rank-points',
        x: 'date',
        y: 'rank',
        color: 'industry',
        r: 3,
      }),
      ...(input?.preview === true
        ? []
        : [
            text(labels, {
              id: 'newest-industry-labels',
              x: 'date',
              y: 'rank',
              text: 'industry',
              color: 'industry',
              anchor: 'start',
              dx: 6,
            }),
          ]),
    ],
    x: {
      scale: scaleUtc,
      axis: {
        ticks: { count: 7, format: (date) => `${date.getUTCFullYear()}` },
        label: 'Year',
      },
    },
    y: {
      scale: scaleLinear().domain([5.2, 0.8]),
      grid: true,
      axis: {
        ticks: { count: 5, format: (value) => `#${value}` },
        label: 'Rank',
      },
    },
    color: {
      domain: includedIndustries,
      range: colors,
    },
  })
}
export interface ExampleOptions {
  width: number
  height: number
  revision: number
  preview?: boolean
}

export const exampleAriaLabel = 'Annual unemployment rank by industry'

export const createExampleChart = (options: ExampleOptions) =>
  defineChart(bumpRankingDefinition(options), {
    keyboard: true,
    tooltip: exampleTooltip,
  })

export const chart = createExampleChart({
  width: 640,
  height: 480,
  revision: 0,
  preview: false,
})

export default function Example() {
  return <Chart ariaLabel={exampleAriaLabel} definition={chart} height={480} />
}