wip

src/components/reservation-charts.tsx

@@ -0,0 +1,321 @@
+import { useState } from 'react'
+
+import { getOpeningRangesForWeekday, type OpeningRange } from '#/lib/opening-hours'
+
+type ReservationLike = {
+  tableId: number
+  reservationTime: Date
+}
+
+type TableLike = {
+  id: number
+  name: string
+}
+
+type Props = {
+  reservations: ReservationLike[]
+  tables: TableLike[]
+}
+
+type BarDatum = {
+  label: string
+  value: number
+  tooltip: string
+}
+
+type Granularity = 'today' | 'week' | 'month'
+type DateBucketGranularity = 'week' | 'month'
+
+const GRANULARITY_LABELS: Record<Granularity, string> = {
+  today: 'Heute',
+  week: 'Woche',
+  month: 'Monat',
+}
+
+// How many buckets — and how far out — each granularity covers: enough weeks/months
+// to spot a trend without the axis becoming unreadable.
+const BUCKET_COUNTS: Record<DateBucketGranularity, number> = {
+  week: 8,
+  month: 6,
+}
+
+const WEEK_LABEL_FORMATTER = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit' })
+const MONTH_AXIS_FORMATTER = new Intl.DateTimeFormat('de-DE', { month: 'short' })
+const MONTH_TOOLTIP_FORMATTER = new Intl.DateTimeFormat('de-DE', { month: 'long', year: 'numeric' })
+
+function reservationsLabel(count: number) {
+  return count === 1 ? 'Reservierung' : 'Reservierungen'
+}
+
+function addBucketUnit(date: Date, granularity: DateBucketGranularity, amount: number) {
+  const d = new Date(date)
+  if (granularity === 'week') d.setDate(d.getDate() + amount * 7)
+  else d.setMonth(d.getMonth() + amount)
+  return d
+}
+
+// The start of the first bucket: the Monday of this week, or the 1st of this month —
+// so the current, still-in-progress bucket covers the whole period, not just what's
+// left of it (the caller is expected to pass in ALL reservations, not just upcoming
+// ones, so this week's/month's earlier days are still counted).
+function bucketRangeStart(granularity: DateBucketGranularity) {
+  const now = new Date()
+  now.setHours(0, 0, 0, 0)
+
+  if (granularity === 'month') {
+    now.setDate(1)
+    return now
+  }
+  const mondayOffset = (now.getDay() + 6) % 7
+  now.setDate(now.getDate() - mondayOffset)
+  return now
+}
+
+function formatBucketLabel(start: Date, granularity: DateBucketGranularity) {
+  if (granularity === 'month') return MONTH_AXIS_FORMATTER.format(start)
+  return WEEK_LABEL_FORMATTER.format(start)
+}
+
+function formatBucketTooltip(start: Date, end: Date, granularity: DateBucketGranularity, count: number) {
+  const countLabel = `${count} ${reservationsLabel(count)}`
+
+  if (granularity === 'month') return `${MONTH_TOOLTIP_FORMATTER.format(start)}: ${countLabel}`
+
+  const lastDayOfWeek = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+  return `${WEEK_LABEL_FORMATTER.format(start)}–${WEEK_LABEL_FORMATTER.format(lastDayOfWeek)}: ${countLabel}`
+}
+
+function buildBucketedCounts(reservations: ReservationLike[], granularity: DateBucketGranularity): BarDatum[] {
+  const rangeStart = bucketRangeStart(granularity)
+  const bucketCount = BUCKET_COUNTS[granularity]
+
+  return Array.from({ length: bucketCount }, (_, i) => {
+    const start = addBucketUnit(rangeStart, granularity, i)
+    const end = addBucketUnit(rangeStart, granularity, i + 1)
+    const count = reservations.filter((r) => {
+      const time = new Date(r.reservationTime).getTime()
+      return time >= start.getTime() && time < end.getTime()
+    }).length
+
+    return {
+      label: formatBucketLabel(start, granularity),
+      value: count,
+      tooltip: formatBucketTooltip(start, end, granularity, count),
+    }
+  })
+}
+
+// The restaurant can have more than one service window in a day (e.g. lunch +
+// dinner) — span the whole gap between them rather than faceting the chart, so a
+// quiet hour between services reads as "no bookings then", not a missing bar.
+function hourSpanForRanges(ranges: OpeningRange[]) {
+  const startHour = Math.min(...ranges.map((r) => Number(r.start.split(':')[0])))
+  const endHour = Math.max(
+    ...ranges.map((r) => {
+      const [hour, minute] = r.end.split(':').map(Number)
+      return minute > 0 ? hour + 1 : hour
+    }),
+  )
+  return { startHour, endHour }
+}
+
+function buildHourlyCountsForToday(reservations: ReservationLike[], ranges: OpeningRange[]): BarDatum[] {
+  const { startHour, endHour } = hourSpanForRanges(ranges)
+  const dayStart = new Date()
+  dayStart.setHours(0, 0, 0, 0)
+
+  return Array.from({ length: endHour - startHour }, (_, i) => {
+    const hour = startHour + i
+    const start = new Date(dayStart)
+    start.setHours(hour)
+    const end = new Date(dayStart)
+    end.setHours(hour + 1)
+
+    const count = reservations.filter((r) => {
+      const time = new Date(r.reservationTime).getTime()
+      return time >= start.getTime() && time < end.getTime()
+    }).length
+
+    return {
+      label: `${String(hour).padStart(2, '0')}:00`,
+      value: count,
+      tooltip: `${String(hour).padStart(2, '0')}:00–${String(hour + 1).padStart(2, '0')}:00: ${count} ${reservationsLabel(count)}`,
+    }
+  })
+}
+
+function buildTimelineData(
+  reservations: ReservationLike[],
+  granularity: Granularity,
+): { data: BarDatum[]; emptyMessage: string } {
+  if (granularity === 'today') {
+    const ranges = getOpeningRangesForWeekday(new Date().getDay())
+    if (ranges.length === 0) {
+      return { data: [], emptyMessage: 'Heute ist Ruhetag.' }
+    }
+    return {
+      data: buildHourlyCountsForToday(reservations, ranges),
+      emptyMessage: 'Heute sind noch keine Reservierungen eingetragen.',
+    }
+  }
+
+  return {
+    data: buildBucketedCounts(reservations, granularity),
+    emptyMessage: 'In diesem Zeitraum sind noch keine Reservierungen eingetragen.',
+  }
+}
+
+// The full date range the timeline chart currently covers, so the per-table chart
+// can be filtered to the same window and the two charts always tell one consistent
+// story instead of the table breakdown silently covering a different span.
+function getTimelineRange(granularity: Granularity): { start: Date; end: Date } {
+  if (granularity === 'today') {
+    const start = new Date()
+    start.setHours(0, 0, 0, 0)
+    const end = new Date(start)
+    end.setDate(end.getDate() + 1)
+    return { start, end }
+  }
+
+  const start = bucketRangeStart(granularity)
+  const end = addBucketUnit(start, granularity, BUCKET_COUNTS[granularity])
+  return { start, end }
+}
+
+function buildTableCounts(reservations: ReservationLike[], tables: TableLike[]): BarDatum[] {
+  return tables.map((table) => {
+    const count = reservations.filter((r) => r.tableId === table.id).length
+    return {
+      label: table.name,
+      value: count,
+      tooltip: `${table.name}: ${count} ${reservationsLabel(count)}`,
+    }
+  })
+}
+
+// Produces clean, evenly-stepped tick values (0, 2, 4, 6, …) so the gridlines
+// never land on an awkward number like 7 or 13.
+function niceTicks(maxValue: number, tickCount = 4): number[] {
+  if (maxValue <= 0) return [0, 1]
+
+  const rawStep = maxValue / (tickCount - 1)
+  const magnitude = 10 ** Math.floor(Math.log10(rawStep))
+  const residual = rawStep / magnitude
+  const niceResidual = residual <= 1 ? 1 : residual <= 2 ? 2 : residual <= 5 ? 5 : 10
+  // Counts are always whole numbers, so a sub-1 step (e.g. 0.5) would just
+  // round two distinct ticks down to the same displayed integer.
+  const step = Math.max(1, niceResidual * magnitude)
+  const niceMax = Math.ceil(maxValue / step) * step
+
+  const ticks: number[] = []
+  for (let v = 0; v <= niceMax + 1e-9; v += step) ticks.push(Math.round(v))
+  return ticks
+}
+
+function BarChartBody({ data, showValueLabels }: { data: BarDatum[]; showValueLabels?: boolean }) {
+  const ticks = niceTicks(Math.max(...data.map((d) => d.value), 0))
+  const chartMax = ticks[ticks.length - 1] || 1
+
+  return (
+    <div className="bar-chart">
+      <div className="bar-chart-plot">
+        {ticks.map((tick) => (
+          <div key={tick} className="bar-chart-gridline" style={{ bottom: `${(tick / chartMax) * 100}%` }}>
+            <span className="bar-chart-tick">{tick}</span>
+          </div>
+        ))}
+        <div className="bar-chart-bars">
+          {data.map((d, i) => (
+            <div className="bar-chart-col" key={i} tabIndex={0} aria-label={d.tooltip}>
+              <div className="bar-chart-bar" style={{ height: `${(d.value / chartMax) * 100}%` }}>
+                {showValueLabels && d.value > 0 && <span className="bar-chart-value">{d.value}</span>}
+              </div>
+              <div className="bar-chart-tooltip">{d.tooltip}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="bar-chart-axis">
+        {data.map((d, i) => (
+          <span key={i} className="bar-chart-axis-label">
+            {d.label}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ChartCard({
+  title,
+  headerExtra,
+  data,
+  showValueLabels,
+  emptyMessage,
+}: {
+  title: string
+  headerExtra?: React.ReactNode
+  data: BarDatum[]
+  showValueLabels?: boolean
+  emptyMessage: string
+}) {
+  const hasData = data.some((d) => d.value > 0)
+
+  return (
+    <div className="chart-card">
+      <div className="chart-card-header">
+        <h3 className="chart-title">{title}</h3>
+        {headerExtra}
+      </div>
+      {hasData ? <BarChartBody data={data} showValueLabels={showValueLabels} /> : <p className="empty-state">{emptyMessage}</p>}
+    </div>
+  )
+}
+
+function GranularityToggle({ value, onChange }: { value: Granularity; onChange: (g: Granularity) => void }) {
+  return (
+    <div className="chart-toggle" role="group" aria-label="Zeitraum">
+      {(Object.keys(GRANULARITY_LABELS) as Granularity[]).map((g) => (
+        <button
+          key={g}
+          type="button"
+          className={g === value ? 'is-active' : undefined}
+          aria-pressed={g === value}
+          onClick={() => onChange(g)}
+        >
+          {GRANULARITY_LABELS[g]}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export function ReservationCharts({ reservations, tables }: Props) {
+  const [granularity, setGranularity] = useState<Granularity>('today')
+
+  const timeline = buildTimelineData(reservations, granularity)
+
+  const { start, end } = getTimelineRange(granularity)
+  const reservationsInRange = reservations.filter((r) => {
+    const time = new Date(r.reservationTime).getTime()
+    return time >= start.getTime() && time < end.getTime()
+  })
+  const tableCounts = buildTableCounts(reservationsInRange, tables)
+
+  return (
+    <div className="charts-grid">
+      <ChartCard
+        title="Reservierungen"
+        headerExtra={<GranularityToggle value={granularity} onChange={setGranularity} />}
+        data={timeline.data}
+        emptyMessage={timeline.emptyMessage}
+      />
+      <ChartCard
+        title="Reservierungen je Tisch"
+        data={tableCounts}
+        showValueLabels
+        emptyMessage={timeline.emptyMessage}
+      />
+    </div>
+  )
+}