Seattle daily high-temperature polar line

import { defineChart } from '@tanstack/charts'
import {
  angleGrid,
  polar,
  radialGrid,
  radialLine,
} from '@tanstack/charts/polar'
import { scaleLinear } from 'd3-scale'
import { dayOfYearAngle, seattleWeatherYear } from './transform'
import { tanstackMount } from '../../shared/mount'
import type { ConformanceInput } from '../../types'

const angleDomain = [0, 360] as const
const radiusDomain = [-10, 40] as const
const angleGridValues = [0, 45, 90, 135, 180, 225, 270, 315] as const
const radiusGridValues = [0, 10, 20, 30, 40] as const
const lineColor = '#0f766e'
const gridColor = '#94a3b8'

const definition = (input: ConformanceInput) => {
  const rows = seattleWeatherYear(input.revision)

  return defineChart({
    marks: [
      polar({
        radiusRatio: 0.72,
        angle: { scale: scaleLinear().domain(angleDomain) },
        radius: { scale: scaleLinear().domain(radiusDomain) },
        guides: [
          radialGrid({
            values: radiusGridValues,
            labels: false,
            stroke: gridColor,
            strokeOpacity: 0.35,
          }),
          angleGrid({
            values: angleGridValues,
            labels: false,
            stroke: gridColor,
            strokeOpacity: 0.35,
          }),
        ],
        marks: [
          radialLine(rows, {
            angle: dayOfYearAngle,
            radius: 'temp_max',
            stroke: lineColor,
            strokeWidth: 2.5,
          }),
        ],
      }),
    ],
    margin: 0,
  })
}

export const mount = tanstackMount(
  definition,
  'Seattle daily high-temperature polar line',
  {
    format: ({ datum }) =>
      `${datum.date.toISOString().slice(0, 10)} · ${datum.temp_max}°C high`,
  },
)

import { weather } from '@charts-poc/demo-data/weather'
import type { WeatherRow } from '@charts-poc/demo-data/weather'

const selectableYears = [2012, 2013] as const

export function seattleWeatherYear(revision = 0): readonly WeatherRow[] {
  const year =
    selectableYears[revision % selectableYears.length] ?? selectableYears[0]
  return weather.filter(
    (row) => row.location === 'Seattle' && row.date.getUTCFullYear() === year,
  )
}

export function dayOfYearAngle(row: WeatherRow): number {
  const year = row.date.getUTCFullYear()
  const yearStart = Date.UTC(year, 0, 1)
  const nextYear = Date.UTC(year + 1, 0, 1)
  return ((row.date.getTime() - yearStart) / (nextYear - yearStart)) * 360
}