Treemap and heatmap

import { createHeatmap, createTreemap, type TreemapNode } from "@ortex-charts/viz";
import { formatCompact, formatPercent } from "@ortex-charts/math";

const treemap = createTreemap(columns[0].box, {
    theme,
    data: universe, // { name, children: [{ name, value, change }, …] }
    colorMode: "change",
    valueFormat: { type: "compact", precision: 1 },
    changeFormat: { type: "percent", precision: 2 },
    headers: true,
    // Click a sector to fill the map with it; the breadcrumb goes back up.
    drillDown: true,
    onHover: (hit) =>
        status(
            hit
                ? `${hit.path.slice(1).map((n) => n.name).join(" › ")}   ${formatCompact(hit.value, { precision: 1 })}${hit.change === undefined ? "" : `   ${formatPercent(hit.change)}`}`
                : "Click a sector to zoom into it.",
        ),
});

const heatmap = createHeatmap(columns[1].box, {
    theme,
    rows: years, // Row labels…
    columns: MONTHS, // …column labels…
    values, // …and values[row][column], with NaN for an empty cell.
    scale: { type: "diverging", domain: "auto", center: 0 },
    format: { type: "percent", precision: 1 },
    cellLabels: false,
    legend: true,
    onHover: (hit) => status(hit ? `${SYMBOL} ${hit.columnLabel} ${hit.rowLabel}: ${formatPercent(hit.value)}` : ""),
});