Heatmap Chart

import { Component } from '@angular/core';
import { WrHeatmapChart } from 'ngwr/charts/heatmap-chart';

@Component({ imports: [WrHeatmapChart] })
export class MyComponent {}

<wr-heatmap-chart
  [rows]="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
  [columns]="['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']"
  [data]="visits"
  ariaLabel="Visits by weekday and time"
/>

visits: WrHeatmapMatrix = [
  [12, 28, 46, 31, 27, 44, 19], // Mon
  [14, 30, 49, 33, 29, 47, 21], // Tue
  // …one array per row, one value per column
];

<wr-heatmap-chart
  [rows]="days"
  [columns]="slots"
  [data]="visits"
  ariaLabel="Visits by weekday and time"
  showValues
/>

<!-- Held at 0 to 100, in four levels -->
<wr-heatmap-chart
  [rows]="teams"
  [columns]="months"
  [data]="resolved"
  [min]="0"
  [max]="100"
  [levels]="4"
  [valueFormat]="percent"
  ariaLabel="Tickets resolved within a day, by team and month"
  showValues
/>

percent = (value: number) => `${value}%`;

<wr-heatmap-chart
  [rows]="stores"
  [columns]="days"
  [data]="sales"
  ariaLabel="Sales by store and day"
  noDataLabel="Closed"
  showValues
/>

sales: WrHeatmapMatrix = [
  [42, 38, 45, 51, 63, 71, 34],
  [55, 52, 58, 60, 74, 66, null], // closed on Sunday
  [31, 35, 33, 36, 40, null, 18], // closed on Saturday
];

<wr-heatmap-chart [rows]="days" [columns]="hours" [data]="orders" ariaLabel="Orders by weekday and hour" />

hours = Array.from({ length: 24 }, (_, h) => `${String(h).padStart(2, '0')}:00`);
// 00:00 … 23:00, drawn as every second or third name where they do not fit

<wr-heatmap-chart
  [rows]="stores"
  [columns]="days"
  [data]="sales"
  color="var(--wr-color-success)"
  ariaLabel="Sales by store and day"
  noDataLabel="Closed"
  showValues
/>

<wr-heatmap-chart [rows]="days" [columns]="slots" [data]="visits" ariaLabel="Visits by weekday and time" dataTable />

type WrHeatmapMatrix = readonly (readonly (number | null)[])[];