@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/TreemapChart.cjs

@@ -0,0 +1,263 @@
+"use client";
+'use strict';
+
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
+var chunkDBZQI4HM_cjs = require('./chunk-DBZQI4HM.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
+var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
+var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var react = require('react');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var PAD = 8;
+var MIN_LABEL = { width: 44, height: 28 };
+var TITLE_HEIGHT = 24;
+var asTile = (node) => node.tile === void 0 ? void 0 : {
+  name: node.name,
+  value: node.value,
+  tile: node.tile,
+  color: node.color,
+  group: node.group
+};
+var ellipsis = { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" };
+var TileView = ({
+  node,
+  titled,
+  tabbable,
+  ring,
+  showValues,
+  format,
+  onFocusTile,
+  onBlurTile
+}) => {
+  const tile = asTile(node);
+  if (!tile) return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+  const { x, y, width, height } = node;
+  const label = tile.group ? `${tile.group}, ${tile.name}` : tile.name;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      "data-tile": tile.tile,
+      role: "img",
+      "aria-label": `${label}: ${format(tile.value)}`,
+      tabIndex: tabbable ? 0 : -1,
+      onFocus: (event) => onFocusTile(event, tile.tile),
+      onBlur: onBlurTile,
+      style: { outline: "none" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x,
+            y,
+            width,
+            height,
+            rx: 5,
+            fill: tile.color,
+            stroke: chunkLT3UC65O_cjs.PANEL,
+            strokeWidth: 2
+          }
+        ),
+        ring && /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: x + 3,
+            y: y + 3,
+            width: Math.max(width - 6, 0),
+            height: Math.max(height - 6, 0),
+            rx: 3,
+            fill: "none",
+            stroke: chunkLT3UC65O_cjs.TEXT,
+            strokeWidth: 2,
+            pointerEvents: "none"
+          }
+        ),
+        width >= MIN_LABEL.width && height >= MIN_LABEL.height + (titled ? TITLE_HEIGHT : 0) && // HTML in the SVG: the browser clips the text to the tile and sizes it
+        // with the text size setting.
+        /* @__PURE__ */ jsxRuntime.jsx("foreignObject", { x, y, width, height, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              boxSizing: "border-box",
+              width: "100%",
+              height: "100%",
+              padding: titled ? `${PAD + TITLE_HEIGHT}px ${PAD}px ${PAD}px` : PAD,
+              overflow: "hidden",
+              color: chunkDBZQI4HM_cjs.textOn(tile.color),
+              fontSize: "var(--text-xs, 0.75rem)",
+              lineHeight: 1.35,
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: ellipsis, children: tile.name }),
+              showValues && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...ellipsis, opacity: 0.85, fontVariantNumeric: "tabular-nums" }, children: format(tile.value) })
+            ]
+          }
+        ) }),
+        titled && tile.group && // The name of a group, on the corner of its first tile, in the card's colors.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "foreignObject",
+          {
+            x,
+            y,
+            width: Math.min(width, 180),
+            height: TITLE_HEIGHT + 2,
+            pointerEvents: "none",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  ...ellipsis,
+                  display: "inline-block",
+                  maxWidth: "100%",
+                  boxSizing: "border-box",
+                  padding: "2px 8px",
+                  color: chunkLT3UC65O_cjs.TEXT,
+                  background: chunkLT3UC65O_cjs.PANEL,
+                  border: `1px solid ${chunkLT3UC65O_cjs.TRACK}`,
+                  borderRadius: "0 0 5px 0",
+                  fontSize: "var(--text-xs, 0.75rem)",
+                  fontWeight: 600,
+                  lineHeight: 1.35
+                },
+                children: tile.group
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var TreemapTooltip = ({
+  active,
+  payload,
+  format
+}) => {
+  const tile = active && payload?.length ? asTile(payload[0].payload) : void 0;
+  if (!tile) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkT3K6Q34U_cjs.TooltipCard,
+    {
+      title: tile.group,
+      rows: [{ name: tile.name, value: format(tile.value), color: tile.color }]
+    }
+  );
+};
+var pointerOver = (element) => element.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+var pointerOut = (element) => element.dispatchEvent(new MouseEvent("mouseout", { bubbles: true }));
+var TreemapChart = ({
+  series,
+  colors,
+  formatValue = String,
+  showValues = false,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width = "100%"
+}) => {
+  const frame = react.useRef(null);
+  const [roving, setRoving] = react.useState(0);
+  const [ringed, setRinged] = react.useState();
+  const name = ariaLabel ?? `Treemap: ${series.flatMap((s) => s.data.map((d) => d.x)).join(", ")}`;
+  const drawn = series.map((s) => ({ ...s, data: s.data.filter((d) => d.y > 0) }));
+  if (chunkK3R7JGOW_cjs.hasNoData(drawn)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const colorByName = /* @__PURE__ */ new Map();
+  for (const { data: data2 } of drawn) {
+    for (const { x } of data2) {
+      if (!colorByName.has(x)) colorByName.set(x, chunkLT3UC65O_cjs.seriesColor(colorByName.size, colors));
+    }
+  }
+  let count = 0;
+  const toTile = (group) => (datum) => ({
+    name: datum.x,
+    value: datum.y,
+    tile: count++,
+    color: colorByName.get(datum.x),
+    group
+  });
+  const grouped = drawn.length > 1;
+  const groups = grouped ? drawn.map((s, i) => {
+    const group = s.name ?? `Series ${i + 1}`;
+    return { name: group, children: s.data.map(toTile(group)) };
+  }) : [];
+  const data = grouped ? groups : drawn[0].data.map(toTile());
+  const firstOfGroup = new Set(grouped ? groups.map((group) => group.children[0].tile) : []);
+  const tabbable = Math.min(roving, count - 1);
+  const onKeyDown = (event) => {
+    const next = {
+      ArrowRight: tabbable + 1,
+      ArrowDown: tabbable + 1,
+      ArrowLeft: tabbable - 1,
+      ArrowUp: tabbable - 1,
+      Home: 0,
+      End: count - 1
+    }[event.key];
+    if (next === void 0) return;
+    event.preventDefault();
+    const index = Math.min(Math.max(next, 0), count - 1);
+    frame.current?.querySelector(`[data-tile="${index}"]`)?.focus();
+  };
+  const onFocusTile = (event, index) => {
+    setRoving(index);
+    if (event.currentTarget.matches(":focus-visible")) {
+      setRinged(index);
+      pointerOver(event.currentTarget);
+    }
+  };
+  const onBlurTile = (event) => {
+    setRinged(void 0);
+    pointerOut(event.currentTarget);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: frame,
+      role: "group",
+      "aria-label": name,
+      onKeyDown,
+      style: { width, height, maxWidth: "100%", color: chunkLT3UC65O_cjs.MUTED },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.Treemap,
+        {
+          width: "100%",
+          height: "100%",
+          data,
+          dataKey: "value",
+          nameKey: "name",
+          aspectRatio: 1.4,
+          content: (node) => {
+            const tileNode = node;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TileView,
+              {
+                node: tileNode,
+                titled: firstOfGroup.has(tileNode.tile ?? -1),
+                tabbable: tileNode.tile === tabbable,
+                ring: tileNode.tile === ringed,
+                showValues,
+                format: formatValue,
+                onFocusTile,
+                onBlurTile
+              }
+            );
+          },
+          ...chunkTYQWZR3S_cjs.ANIMATION,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(TreemapTooltip, { format: formatValue }), animationDuration: 150 }),
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+
+exports.TreemapChart = TreemapChart;
+//# sourceMappingURL=TreemapChart.cjs.map
+//# sourceMappingURL=TreemapChart.cjs.map

package/dist/TreemapChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TreemapChart.tsx"],"names":["jsx","jsxs","PANEL","TEXT","textOn","TRACK","TooltipCard","useRef","useState","hasNoData","ChartEmpty","data","seriesColor","MUTED","Treemap","ANIMATION","Tooltip"],"mappings":"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","file":"TreemapChart.cjs","sourcesContent":["import { useRef, useState, type FocusEvent, type KeyboardEvent } from 'react';\nimport { Tooltip, Treemap, type TooltipContentProps, type TreemapNode } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { MUTED, PANEL, TEXT, TRACK, seriesColor } from './core/colors';\nimport { hasNoData } from './core/data';\nimport { ChartEmpty } from './core/frame';\nimport { textOn } from './core/readable';\nimport type { ChartEmptyProps, ChartProps } from './types';\n\nexport type TreemapDatum = { x: string; y: number };\n\nexport type TreemapChartProps = ChartProps &\n  ChartEmptyProps & {\n    series: { name?: string; data: TreemapDatum[] }[];\n    /**\n     * Override the default Cosmos palette. Tiles are colored by name, in the\n     * order the names first appear: one name keeps its color in every group.\n     */\n    colors?: string[];\n    /** Format the values in the tooltip and on the tiles. */\n    formatValue?: (value: number) => string;\n    /**\n     * Write each tile's value, formatted, under its name. Default off: the name alone, and the\n     * value in the tooltip.\n     */\n    showValues?: boolean;\n  };\n\n/** What a tile carries from the data to the content that draws it. */\ntype Tile = {\n  name: string;\n  value: number;\n  /** Zero-based position among the tiles, in the order of the data: the order of the arrow keys. */\n  tile: number;\n  color: string;\n  /** The group it sits in, when there are several series. */\n  group?: string;\n};\n\ntype TileNode = TreemapNode & Partial<Tile>;\n\n// Room the label leaves around its text, and the smallest tile that has one.\nconst PAD = 8;\nconst MIN_LABEL = { width: 44, height: 28 };\n// The group title sits on the corner of its first tile, over the top of its label.\nconst TITLE_HEIGHT = 24;\n\nconst asTile = (node: TileNode): Tile | undefined =>\n  node.tile === undefined\n    ? undefined\n    : {\n        name: node.name,\n        value: node.value,\n        tile: node.tile,\n        color: node.color as string,\n        group: node.group,\n      };\n\ntype TileViewProps = {\n  node: TileNode;\n  /** Whether the group title sits on this tile: the first of its group. */\n  titled: boolean;\n  tabbable: boolean;\n  ring: boolean;\n  showValues: boolean;\n  format: (value: number) => string;\n  onFocusTile: (event: FocusEvent<SVGGElement>, tile: number) => void;\n  onBlurTile: (event: FocusEvent<SVGGElement>) => void;\n};\n\nconst ellipsis = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } as const;\n\n/**\n * One tile: a rounded rectangle with the card's color for an outline (the gap\n * between tiles), the name and the value in the text color that reads on it,\n * and a focus ring in the theme's text color, since an accent ring would\n * vanish on the accent tile.\n */\nconst TileView = ({\n  node,\n  titled,\n  tabbable,\n  ring,\n  showValues,\n  format,\n  onFocusTile,\n  onBlurTile,\n}: TileViewProps) => {\n  const tile = asTile(node);\n  // A group draws nothing of its own: its tiles are drawn over it.\n  if (!tile) return <g />;\n  const { x, y, width, height } = node;\n  const label = tile.group ? `${tile.group}, ${tile.name}` : tile.name;\n  return (\n    <g\n      data-tile={tile.tile}\n      role=\"img\"\n      aria-label={`${label}: ${format(tile.value)}`}\n      tabIndex={tabbable ? 0 : -1}\n      onFocus={(event) => onFocusTile(event, tile.tile)}\n      onBlur={onBlurTile}\n      style={{ outline: 'none' }}\n    >\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        rx={5}\n        fill={tile.color}\n        stroke={PANEL}\n        strokeWidth={2}\n      />\n      {ring && (\n        <rect\n          x={x + 3}\n          y={y + 3}\n          width={Math.max(width - 6, 0)}\n          height={Math.max(height - 6, 0)}\n          rx={3}\n          fill=\"none\"\n          stroke={TEXT}\n          strokeWidth={2}\n          pointerEvents=\"none\"\n        />\n      )}\n      {width >= MIN_LABEL.width && height >= MIN_LABEL.height + (titled ? TITLE_HEIGHT : 0) && (\n        // HTML in the SVG: the browser clips the text to the tile and sizes it\n        // with the text size setting.\n        <foreignObject x={x} y={y} width={width} height={height} pointerEvents=\"none\">\n          <div\n            style={{\n              boxSizing: 'border-box',\n              width: '100%',\n              height: '100%',\n              padding: titled ? `${PAD + TITLE_HEIGHT}px ${PAD}px ${PAD}px` : PAD,\n              overflow: 'hidden',\n              color: textOn(tile.color),\n              fontSize: 'var(--text-xs, 0.75rem)',\n              lineHeight: 1.35,\n              fontWeight: 500,\n            }}\n          >\n            <div style={ellipsis}>{tile.name}</div>\n            {showValues && (\n              <div style={{ ...ellipsis, opacity: 0.85, fontVariantNumeric: 'tabular-nums' }}>\n                {format(tile.value)}\n              </div>\n            )}\n          </div>\n        </foreignObject>\n      )}\n      {titled && tile.group && (\n        // The name of a group, on the corner of its first tile, in the card's colors.\n        <foreignObject\n          x={x}\n          y={y}\n          width={Math.min(width, 180)}\n          height={TITLE_HEIGHT + 2}\n          pointerEvents=\"none\"\n        >\n          <div\n            style={{\n              ...ellipsis,\n              display: 'inline-block',\n              maxWidth: '100%',\n              boxSizing: 'border-box',\n              padding: '2px 8px',\n              color: TEXT,\n              background: PANEL,\n              border: `1px solid ${TRACK}`,\n              borderRadius: '0 0 5px 0',\n              fontSize: 'var(--text-xs, 0.75rem)',\n              fontWeight: 600,\n              lineHeight: 1.35,\n            }}\n          >\n            {tile.group}\n          </div>\n        </foreignObject>\n      )}\n    </g>\n  );\n};\n\n/** The tooltip card: the group (if any) for the title, the tile for the row. */\nconst TreemapTooltip = ({\n  active,\n  payload,\n  format,\n}: Partial<TooltipContentProps> & { format: (value: number) => string }) => {\n  const tile = active && payload?.length ? asTile(payload[0].payload as TileNode) : undefined;\n  if (!tile) return null;\n  return (\n    <TooltipCard\n      title={tile.group}\n      rows={[{ name: tile.name, value: format(tile.value), color: tile.color }]}\n    />\n  );\n};\n\n// A Treemap has no keyboard layer. It shows a tile's tooltip when the pointer\n// enters the tile and hides it when the pointer leaves the chart, so the tile\n// that takes the keyboard focus sends those two events to itself.\nconst pointerOver = (element: Element) =>\n  element.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));\nconst pointerOut = (element: Element) =>\n  element.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));\n\nexport const TreemapChart = ({\n  series,\n  colors,\n  formatValue = String,\n  showValues = false,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width = '100%',\n}: TreemapChartProps) => {\n  const frame = useRef<HTMLDivElement>(null);\n  const [roving, setRoving] = useState(0);\n  const [ringed, setRinged] = useState<number>();\n  const name = ariaLabel ?? `Treemap: ${series.flatMap((s) => s.data.map((d) => d.x)).join(', ')}`;\n  // A tile with no area cannot be seen, hovered or focused.\n  const drawn = series.map((s) => ({ ...s, data: s.data.filter((d) => d.y > 0) }));\n  if (hasNoData(drawn)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  // One color per name, so a name has the same color in every group.\n  const colorByName = new Map<string, string>();\n  for (const { data } of drawn) {\n    for (const { x } of data) {\n      if (!colorByName.has(x)) colorByName.set(x, seriesColor(colorByName.size, colors));\n    }\n  }\n  let count = 0;\n  const toTile =\n    (group?: string) =>\n    (datum: TreemapDatum): Tile => ({\n      name: datum.x,\n      value: datum.y,\n      tile: count++,\n      color: colorByName.get(datum.x) as string,\n      group,\n    });\n  // Several series are groups, each a block of its own; a single one is just its tiles.\n  const grouped = drawn.length > 1;\n  const groups = grouped\n    ? drawn.map((s, i) => {\n        const group = s.name ?? `Series ${i + 1}`;\n        return { name: group, children: s.data.map(toTile(group)) };\n      })\n    : [];\n  const data = grouped ? groups : drawn[0].data.map(toTile());\n  const firstOfGroup = new Set(grouped ? groups.map((group) => group.children[0].tile) : []);\n  // The tab stop stays on a tile that exists when the data shrinks.\n  const tabbable = Math.min(roving, count - 1);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const next = {\n      ArrowRight: tabbable + 1,\n      ArrowDown: tabbable + 1,\n      ArrowLeft: tabbable - 1,\n      ArrowUp: tabbable - 1,\n      Home: 0,\n      End: count - 1,\n    }[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    const index = Math.min(Math.max(next, 0), count - 1);\n    frame.current?.querySelector<SVGGElement>(`[data-tile=\"${index}\"]`)?.focus();\n  };\n  const onFocusTile = (event: FocusEvent<SVGGElement>, index: number) => {\n    setRoving(index);\n    // A click focuses a tile too, and the pointer already shows its tooltip: only the keyboard needs this.\n    if (event.currentTarget.matches(':focus-visible')) {\n      setRinged(index);\n      pointerOver(event.currentTarget);\n    }\n  };\n  const onBlurTile = (event: FocusEvent<SVGGElement>) => {\n    setRinged(undefined);\n    pointerOut(event.currentTarget);\n  };\n\n  return (\n    <div\n      ref={frame}\n      role=\"group\"\n      aria-label={name}\n      onKeyDown={onKeyDown}\n      style={{ width, height, maxWidth: '100%', color: MUTED }}\n    >\n      <Treemap\n        width=\"100%\"\n        height=\"100%\"\n        data={data}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        aspectRatio={1.4}\n        content={(node) => {\n          const tileNode = node as TileNode;\n          return (\n            <TileView\n              node={tileNode}\n              titled={firstOfGroup.has(tileNode.tile ?? -1)}\n              tabbable={tileNode.tile === tabbable}\n              ring={tileNode.tile === ringed}\n              showValues={showValues}\n              format={formatValue}\n              onFocusTile={onFocusTile}\n              onBlurTile={onBlurTile}\n            />\n          );\n        }}\n        {...ANIMATION}\n      >\n        <Tooltip content={<TreemapTooltip format={formatValue} />} animationDuration={150} />\n        {children}\n      </Treemap>\n    </div>\n  );\n};\n"]}

package/dist/TreemapChart.js

@@ -0,0 +1,261 @@
+"use client";
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { textOn } from './chunk-BFEDLXVW.js';
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { hasNoData } from './chunk-UJIV5PVI.js';
+import { ChartEmpty } from './chunk-3N43QT36.js';
+import { seriesColor, MUTED, PANEL, TEXT, TRACK } from './chunk-UATB2IRY.js';
+import { useRef, useState } from 'react';
+import { Treemap, Tooltip } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PAD = 8;
+var MIN_LABEL = { width: 44, height: 28 };
+var TITLE_HEIGHT = 24;
+var asTile = (node) => node.tile === void 0 ? void 0 : {
+  name: node.name,
+  value: node.value,
+  tile: node.tile,
+  color: node.color,
+  group: node.group
+};
+var ellipsis = { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" };
+var TileView = ({
+  node,
+  titled,
+  tabbable,
+  ring,
+  showValues,
+  format,
+  onFocusTile,
+  onBlurTile
+}) => {
+  const tile = asTile(node);
+  if (!tile) return /* @__PURE__ */ jsx("g", {});
+  const { x, y, width, height } = node;
+  const label = tile.group ? `${tile.group}, ${tile.name}` : tile.name;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      "data-tile": tile.tile,
+      role: "img",
+      "aria-label": `${label}: ${format(tile.value)}`,
+      tabIndex: tabbable ? 0 : -1,
+      onFocus: (event) => onFocusTile(event, tile.tile),
+      onBlur: onBlurTile,
+      style: { outline: "none" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x,
+            y,
+            width,
+            height,
+            rx: 5,
+            fill: tile.color,
+            stroke: PANEL,
+            strokeWidth: 2
+          }
+        ),
+        ring && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: x + 3,
+            y: y + 3,
+            width: Math.max(width - 6, 0),
+            height: Math.max(height - 6, 0),
+            rx: 3,
+            fill: "none",
+            stroke: TEXT,
+            strokeWidth: 2,
+            pointerEvents: "none"
+          }
+        ),
+        width >= MIN_LABEL.width && height >= MIN_LABEL.height + (titled ? TITLE_HEIGHT : 0) && // HTML in the SVG: the browser clips the text to the tile and sizes it
+        // with the text size setting.
+        /* @__PURE__ */ jsx("foreignObject", { x, y, width, height, pointerEvents: "none", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              boxSizing: "border-box",
+              width: "100%",
+              height: "100%",
+              padding: titled ? `${PAD + TITLE_HEIGHT}px ${PAD}px ${PAD}px` : PAD,
+              overflow: "hidden",
+              color: textOn(tile.color),
+              fontSize: "var(--text-xs, 0.75rem)",
+              lineHeight: 1.35,
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: ellipsis, children: tile.name }),
+              showValues && /* @__PURE__ */ jsx("div", { style: { ...ellipsis, opacity: 0.85, fontVariantNumeric: "tabular-nums" }, children: format(tile.value) })
+            ]
+          }
+        ) }),
+        titled && tile.group && // The name of a group, on the corner of its first tile, in the card's colors.
+        /* @__PURE__ */ jsx(
+          "foreignObject",
+          {
+            x,
+            y,
+            width: Math.min(width, 180),
+            height: TITLE_HEIGHT + 2,
+            pointerEvents: "none",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  ...ellipsis,
+                  display: "inline-block",
+                  maxWidth: "100%",
+                  boxSizing: "border-box",
+                  padding: "2px 8px",
+                  color: TEXT,
+                  background: PANEL,
+                  border: `1px solid ${TRACK}`,
+                  borderRadius: "0 0 5px 0",
+                  fontSize: "var(--text-xs, 0.75rem)",
+                  fontWeight: 600,
+                  lineHeight: 1.35
+                },
+                children: tile.group
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var TreemapTooltip = ({
+  active,
+  payload,
+  format
+}) => {
+  const tile = active && payload?.length ? asTile(payload[0].payload) : void 0;
+  if (!tile) return null;
+  return /* @__PURE__ */ jsx(
+    TooltipCard,
+    {
+      title: tile.group,
+      rows: [{ name: tile.name, value: format(tile.value), color: tile.color }]
+    }
+  );
+};
+var pointerOver = (element) => element.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+var pointerOut = (element) => element.dispatchEvent(new MouseEvent("mouseout", { bubbles: true }));
+var TreemapChart = ({
+  series,
+  colors,
+  formatValue = String,
+  showValues = false,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width = "100%"
+}) => {
+  const frame = useRef(null);
+  const [roving, setRoving] = useState(0);
+  const [ringed, setRinged] = useState();
+  const name = ariaLabel ?? `Treemap: ${series.flatMap((s) => s.data.map((d) => d.x)).join(", ")}`;
+  const drawn = series.map((s) => ({ ...s, data: s.data.filter((d) => d.y > 0) }));
+  if (hasNoData(drawn)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const colorByName = /* @__PURE__ */ new Map();
+  for (const { data: data2 } of drawn) {
+    for (const { x } of data2) {
+      if (!colorByName.has(x)) colorByName.set(x, seriesColor(colorByName.size, colors));
+    }
+  }
+  let count = 0;
+  const toTile = (group) => (datum) => ({
+    name: datum.x,
+    value: datum.y,
+    tile: count++,
+    color: colorByName.get(datum.x),
+    group
+  });
+  const grouped = drawn.length > 1;
+  const groups = grouped ? drawn.map((s, i) => {
+    const group = s.name ?? `Series ${i + 1}`;
+    return { name: group, children: s.data.map(toTile(group)) };
+  }) : [];
+  const data = grouped ? groups : drawn[0].data.map(toTile());
+  const firstOfGroup = new Set(grouped ? groups.map((group) => group.children[0].tile) : []);
+  const tabbable = Math.min(roving, count - 1);
+  const onKeyDown = (event) => {
+    const next = {
+      ArrowRight: tabbable + 1,
+      ArrowDown: tabbable + 1,
+      ArrowLeft: tabbable - 1,
+      ArrowUp: tabbable - 1,
+      Home: 0,
+      End: count - 1
+    }[event.key];
+    if (next === void 0) return;
+    event.preventDefault();
+    const index = Math.min(Math.max(next, 0), count - 1);
+    frame.current?.querySelector(`[data-tile="${index}"]`)?.focus();
+  };
+  const onFocusTile = (event, index) => {
+    setRoving(index);
+    if (event.currentTarget.matches(":focus-visible")) {
+      setRinged(index);
+      pointerOver(event.currentTarget);
+    }
+  };
+  const onBlurTile = (event) => {
+    setRinged(void 0);
+    pointerOut(event.currentTarget);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: frame,
+      role: "group",
+      "aria-label": name,
+      onKeyDown,
+      style: { width, height, maxWidth: "100%", color: MUTED },
+      children: /* @__PURE__ */ jsxs(
+        Treemap,
+        {
+          width: "100%",
+          height: "100%",
+          data,
+          dataKey: "value",
+          nameKey: "name",
+          aspectRatio: 1.4,
+          content: (node) => {
+            const tileNode = node;
+            return /* @__PURE__ */ jsx(
+              TileView,
+              {
+                node: tileNode,
+                titled: firstOfGroup.has(tileNode.tile ?? -1),
+                tabbable: tileNode.tile === tabbable,
+                ring: tileNode.tile === ringed,
+                showValues,
+                format: formatValue,
+                onFocusTile,
+                onBlurTile
+              }
+            );
+          },
+          ...ANIMATION,
+          children: [
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(TreemapTooltip, { format: formatValue }), animationDuration: 150 }),
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { TreemapChart };
+//# sourceMappingURL=TreemapChart.js.map
+//# sourceMappingURL=TreemapChart.js.map

package/dist/TreemapChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TreemapChart.tsx"],"names":["data"],"mappings":"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","file":"TreemapChart.js","sourcesContent":["import { useRef, useState, type FocusEvent, type KeyboardEvent } from 'react';\nimport { Tooltip, Treemap, type TooltipContentProps, type TreemapNode } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { MUTED, PANEL, TEXT, TRACK, seriesColor } from './core/colors';\nimport { hasNoData } from './core/data';\nimport { ChartEmpty } from './core/frame';\nimport { textOn } from './core/readable';\nimport type { ChartEmptyProps, ChartProps } from './types';\n\nexport type TreemapDatum = { x: string; y: number };\n\nexport type TreemapChartProps = ChartProps &\n  ChartEmptyProps & {\n    series: { name?: string; data: TreemapDatum[] }[];\n    /**\n     * Override the default Cosmos palette. Tiles are colored by name, in the\n     * order the names first appear: one name keeps its color in every group.\n     */\n    colors?: string[];\n    /** Format the values in the tooltip and on the tiles. */\n    formatValue?: (value: number) => string;\n    /**\n     * Write each tile's value, formatted, under its name. Default off: the name alone, and the\n     * value in the tooltip.\n     */\n    showValues?: boolean;\n  };\n\n/** What a tile carries from the data to the content that draws it. */\ntype Tile = {\n  name: string;\n  value: number;\n  /** Zero-based position among the tiles, in the order of the data: the order of the arrow keys. */\n  tile: number;\n  color: string;\n  /** The group it sits in, when there are several series. */\n  group?: string;\n};\n\ntype TileNode = TreemapNode & Partial<Tile>;\n\n// Room the label leaves around its text, and the smallest tile that has one.\nconst PAD = 8;\nconst MIN_LABEL = { width: 44, height: 28 };\n// The group title sits on the corner of its first tile, over the top of its label.\nconst TITLE_HEIGHT = 24;\n\nconst asTile = (node: TileNode): Tile | undefined =>\n  node.tile === undefined\n    ? undefined\n    : {\n        name: node.name,\n        value: node.value,\n        tile: node.tile,\n        color: node.color as string,\n        group: node.group,\n      };\n\ntype TileViewProps = {\n  node: TileNode;\n  /** Whether the group title sits on this tile: the first of its group. */\n  titled: boolean;\n  tabbable: boolean;\n  ring: boolean;\n  showValues: boolean;\n  format: (value: number) => string;\n  onFocusTile: (event: FocusEvent<SVGGElement>, tile: number) => void;\n  onBlurTile: (event: FocusEvent<SVGGElement>) => void;\n};\n\nconst ellipsis = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } as const;\n\n/**\n * One tile: a rounded rectangle with the card's color for an outline (the gap\n * between tiles), the name and the value in the text color that reads on it,\n * and a focus ring in the theme's text color, since an accent ring would\n * vanish on the accent tile.\n */\nconst TileView = ({\n  node,\n  titled,\n  tabbable,\n  ring,\n  showValues,\n  format,\n  onFocusTile,\n  onBlurTile,\n}: TileViewProps) => {\n  const tile = asTile(node);\n  // A group draws nothing of its own: its tiles are drawn over it.\n  if (!tile) return <g />;\n  const { x, y, width, height } = node;\n  const label = tile.group ? `${tile.group}, ${tile.name}` : tile.name;\n  return (\n    <g\n      data-tile={tile.tile}\n      role=\"img\"\n      aria-label={`${label}: ${format(tile.value)}`}\n      tabIndex={tabbable ? 0 : -1}\n      onFocus={(event) => onFocusTile(event, tile.tile)}\n      onBlur={onBlurTile}\n      style={{ outline: 'none' }}\n    >\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        rx={5}\n        fill={tile.color}\n        stroke={PANEL}\n        strokeWidth={2}\n      />\n      {ring && (\n        <rect\n          x={x + 3}\n          y={y + 3}\n          width={Math.max(width - 6, 0)}\n          height={Math.max(height - 6, 0)}\n          rx={3}\n          fill=\"none\"\n          stroke={TEXT}\n          strokeWidth={2}\n          pointerEvents=\"none\"\n        />\n      )}\n      {width >= MIN_LABEL.width && height >= MIN_LABEL.height + (titled ? TITLE_HEIGHT : 0) && (\n        // HTML in the SVG: the browser clips the text to the tile and sizes it\n        // with the text size setting.\n        <foreignObject x={x} y={y} width={width} height={height} pointerEvents=\"none\">\n          <div\n            style={{\n              boxSizing: 'border-box',\n              width: '100%',\n              height: '100%',\n              padding: titled ? `${PAD + TITLE_HEIGHT}px ${PAD}px ${PAD}px` : PAD,\n              overflow: 'hidden',\n              color: textOn(tile.color),\n              fontSize: 'var(--text-xs, 0.75rem)',\n              lineHeight: 1.35,\n              fontWeight: 500,\n            }}\n          >\n            <div style={ellipsis}>{tile.name}</div>\n            {showValues && (\n              <div style={{ ...ellipsis, opacity: 0.85, fontVariantNumeric: 'tabular-nums' }}>\n                {format(tile.value)}\n              </div>\n            )}\n          </div>\n        </foreignObject>\n      )}\n      {titled && tile.group && (\n        // The name of a group, on the corner of its first tile, in the card's colors.\n        <foreignObject\n          x={x}\n          y={y}\n          width={Math.min(width, 180)}\n          height={TITLE_HEIGHT + 2}\n          pointerEvents=\"none\"\n        >\n          <div\n            style={{\n              ...ellipsis,\n              display: 'inline-block',\n              maxWidth: '100%',\n              boxSizing: 'border-box',\n              padding: '2px 8px',\n              color: TEXT,\n              background: PANEL,\n              border: `1px solid ${TRACK}`,\n              borderRadius: '0 0 5px 0',\n              fontSize: 'var(--text-xs, 0.75rem)',\n              fontWeight: 600,\n              lineHeight: 1.35,\n            }}\n          >\n            {tile.group}\n          </div>\n        </foreignObject>\n      )}\n    </g>\n  );\n};\n\n/** The tooltip card: the group (if any) for the title, the tile for the row. */\nconst TreemapTooltip = ({\n  active,\n  payload,\n  format,\n}: Partial<TooltipContentProps> & { format: (value: number) => string }) => {\n  const tile = active && payload?.length ? asTile(payload[0].payload as TileNode) : undefined;\n  if (!tile) return null;\n  return (\n    <TooltipCard\n      title={tile.group}\n      rows={[{ name: tile.name, value: format(tile.value), color: tile.color }]}\n    />\n  );\n};\n\n// A Treemap has no keyboard layer. It shows a tile's tooltip when the pointer\n// enters the tile and hides it when the pointer leaves the chart, so the tile\n// that takes the keyboard focus sends those two events to itself.\nconst pointerOver = (element: Element) =>\n  element.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));\nconst pointerOut = (element: Element) =>\n  element.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));\n\nexport const TreemapChart = ({\n  series,\n  colors,\n  formatValue = String,\n  showValues = false,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width = '100%',\n}: TreemapChartProps) => {\n  const frame = useRef<HTMLDivElement>(null);\n  const [roving, setRoving] = useState(0);\n  const [ringed, setRinged] = useState<number>();\n  const name = ariaLabel ?? `Treemap: ${series.flatMap((s) => s.data.map((d) => d.x)).join(', ')}`;\n  // A tile with no area cannot be seen, hovered or focused.\n  const drawn = series.map((s) => ({ ...s, data: s.data.filter((d) => d.y > 0) }));\n  if (hasNoData(drawn)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  // One color per name, so a name has the same color in every group.\n  const colorByName = new Map<string, string>();\n  for (const { data } of drawn) {\n    for (const { x } of data) {\n      if (!colorByName.has(x)) colorByName.set(x, seriesColor(colorByName.size, colors));\n    }\n  }\n  let count = 0;\n  const toTile =\n    (group?: string) =>\n    (datum: TreemapDatum): Tile => ({\n      name: datum.x,\n      value: datum.y,\n      tile: count++,\n      color: colorByName.get(datum.x) as string,\n      group,\n    });\n  // Several series are groups, each a block of its own; a single one is just its tiles.\n  const grouped = drawn.length > 1;\n  const groups = grouped\n    ? drawn.map((s, i) => {\n        const group = s.name ?? `Series ${i + 1}`;\n        return { name: group, children: s.data.map(toTile(group)) };\n      })\n    : [];\n  const data = grouped ? groups : drawn[0].data.map(toTile());\n  const firstOfGroup = new Set(grouped ? groups.map((group) => group.children[0].tile) : []);\n  // The tab stop stays on a tile that exists when the data shrinks.\n  const tabbable = Math.min(roving, count - 1);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const next = {\n      ArrowRight: tabbable + 1,\n      ArrowDown: tabbable + 1,\n      ArrowLeft: tabbable - 1,\n      ArrowUp: tabbable - 1,\n      Home: 0,\n      End: count - 1,\n    }[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    const index = Math.min(Math.max(next, 0), count - 1);\n    frame.current?.querySelector<SVGGElement>(`[data-tile=\"${index}\"]`)?.focus();\n  };\n  const onFocusTile = (event: FocusEvent<SVGGElement>, index: number) => {\n    setRoving(index);\n    // A click focuses a tile too, and the pointer already shows its tooltip: only the keyboard needs this.\n    if (event.currentTarget.matches(':focus-visible')) {\n      setRinged(index);\n      pointerOver(event.currentTarget);\n    }\n  };\n  const onBlurTile = (event: FocusEvent<SVGGElement>) => {\n    setRinged(undefined);\n    pointerOut(event.currentTarget);\n  };\n\n  return (\n    <div\n      ref={frame}\n      role=\"group\"\n      aria-label={name}\n      onKeyDown={onKeyDown}\n      style={{ width, height, maxWidth: '100%', color: MUTED }}\n    >\n      <Treemap\n        width=\"100%\"\n        height=\"100%\"\n        data={data}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        aspectRatio={1.4}\n        content={(node) => {\n          const tileNode = node as TileNode;\n          return (\n            <TileView\n              node={tileNode}\n              titled={firstOfGroup.has(tileNode.tile ?? -1)}\n              tabbable={tileNode.tile === tabbable}\n              ring={tileNode.tile === ringed}\n              showValues={showValues}\n              format={formatValue}\n              onFocusTile={onFocusTile}\n              onBlurTile={onBlurTile}\n            />\n          );\n        }}\n        {...ANIMATION}\n      >\n        <Tooltip content={<TreemapTooltip format={formatValue} />} animationDuration={150} />\n        {children}\n      </Treemap>\n    </div>\n  );\n};\n"]}