basalt-ui 1.30.2 → 1.31.0

package/dist/charts/kinds/Donut.js

@@ -1,51 +1,121 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group } from "@visx/group";
 import { Pie } from "@visx/shape";
-import { memo, useMemo, useState } from "react";
+import { memo, useMemo } from "react";
+import { useChartSize } from "../hooks/useChartSize.js";
+import { useDiscreteCursor } from "../hooks/use-discrete-cursor.js";
+import { useHysteresis } from "../hooks/use-hysteresis.js";
 import { assertRequiredProps } from "../../common/validate.js";
 import { ChartTooltipFloat, TooltipBody, TooltipRow } from "../primitives/ChartTooltip.js";
 import { ChartFrame } from "../primitives/ChartFrame.js";
 import { VX } from "../../tokens/index.js";
+import { resolveContainerClass } from "../../tokens/size-classes.js";
+import { resolveFrameHeight } from "../primitives/chart-frame-layout.js";
+import {
+  foldOther,
+  resolveDonutLayout,
+  resolveDonutRadius,
+  resolveOtherKey,
+  sharePercent
+} from "./donut-layout.js";
+const identityLabel = (key) => key;
 function DonutInner(props) {
   assertRequiredProps("Donut", props, ["data", "colorForKey"]);
   const {
     data,
     height,
     colorForKey,
-    seriesLabel = (k) => k,
+    formatValue,
+    seriesLabel = identityLabel,
     ariaLabel,
     isPending,
     state,
     className,
     style
   } = props;
-  const series = data.map((d) => ({
-    key: d.key,
-    label: seriesLabel(d.key),
-    color: colorForKey(d.key),
-    mark: "bar"
-  }));
+  const { ref, width: frameW, height: measuredH } = useChartSize();
+  const containerClass = resolveContainerClass(frameW);
+  const frameH = height === void 0 ? measuredH : resolveFrameHeight(height, containerClass);
+  const side = useHysteresis(
+    (wasSide) => resolveDonutLayout({
+      frameW,
+      frameH,
+      containerClass,
+      wasSide: height === void 0 && wasSide
+    }).side,
+    false
+  );
+  const slices = useMemo(() => {
+    const { kept, other } = foldOther(data);
+    const out = kept.map((d) => ({
+      key: d.key,
+      label: seriesLabel(d.key),
+      color: colorForKey(d.key),
+      value: d.value
+    }));
+    if (other !== null)
+      out.push({
+        key: resolveOtherKey(kept.map((d) => d.key)),
+        label: "Other",
+        color: VX.neutral,
+        value: other
+      });
+    return out;
+  }, [data, seriesLabel, colorForKey]);
+  const total = useMemo(() => slices.reduce((sum, d) => sum + d.value, 0), [slices]);
+  const series = useMemo(
+    () => slices.map((d) => ({
+      key: d.key,
+      label: side ? `${d.label} \xB7 ${formatValue(d.value)} \xB7 ${sharePercent(d.value, total)}%` : d.label,
+      color: d.color,
+      mark: "bar"
+    })),
+    [slices, side, formatValue, total]
+  );
   return /* @__PURE__ */ jsx(
-    ChartFrame,
+    "div",
     {
-      series,
-      ...height !== void 0 && { height },
-      ...ariaLabel !== void 0 && { ariaLabel },
-      ...isPending !== void 0 && { isPending },
-      ...state !== void 0 && { state },
+      ref,
       ...className !== void 0 && { className },
-      ...style !== void 0 && { style },
-      children: (plot) => /* @__PURE__ */ jsx(DonutPlot, { ...props, plot })
+      style: { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0, ...style },
+      children: /* @__PURE__ */ jsx(
+        ChartFrame,
+        {
+          series,
+          legend: { placement: side ? "right" : "bottom", maxRows: series.length, headerSlot: false },
+          ...height !== void 0 && { height },
+          ...ariaLabel !== void 0 && { ariaLabel },
+          ...isPending !== void 0 && { isPending },
+          ...state !== void 0 && { state },
+          children: (plot) => /* @__PURE__ */ jsx(
+            DonutPlot,
+            {
+              slices,
+              total,
+              side,
+              frameW,
+              plot,
+              formatValue,
+              ...props.centerLabel !== void 0 && { centerLabel: props.centerLabel },
+              ...props.centerSubLabel !== void 0 && { centerSubLabel: props.centerSubLabel },
+              ...props.centerContent !== void 0 && { centerContent: props.centerContent },
+              ...props.innerRatio !== void 0 && { innerRatio: props.innerRatio },
+              ...props.padAngle !== void 0 && { padAngle: props.padAngle }
+            }
+          )
+        }
+      )
     }
   );
 }
 function DonutPlot(props) {
   const {
-    data,
+    slices,
+    total,
     plot,
-    colorForKey,
+    side,
+    frameW,
     formatValue,
-    seriesLabel = (k) => k,
     centerLabel,
     centerSubLabel,
     centerContent,
@@ -53,20 +123,19 @@ function DonutPlot(props) {
     padAngle = 0.01
   } = props;
   const { width, height, hidden } = plot;
-  const [tip, setTip] = useState(null);
-  const hoveredKey = tip?.key ?? null;
-  const visibleData = useMemo(() => data.filter((d) => !hidden.has(d.key)), [data, hidden]);
-  const radius = Math.min(width, height) / 2 - 4;
+  const visibleData = useMemo(() => slices.filter((d) => !hidden.has(d.key)), [slices, hidden]);
+  const cursor = useDiscreteCursor({
+    targets: visibleData,
+    getKey: (d) => d.key,
+    ariaLabel: "Donut slices \u2014 use arrow keys to select, Escape to dismiss"
+  });
+  const activeKey = cursor.tip?.target.key ?? null;
+  const radius = resolveDonutRadius({ plotW: width, plotH: height, frameW, side });
   const innerRadius = radius * innerRatio;
   const centerX = width / 2;
   const centerY = height / 2;
-  const total = useMemo(() => visibleData.reduce((sum, d) => sum + d.value, 0), [visibleData]);
-  const show = (d, event) => {
-    setTip({ key: d.key, value: d.value, anchor: { x: event.clientX, y: event.clientY } });
-  };
-  const hide = () => setTip(null);
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx("svg", { width, height, children: /* @__PURE__ */ jsxs(Group, { left: centerX, top: centerY, children: [
+    /* @__PURE__ */ jsx("svg", { width, height, ...cursor.hostProps, children: /* @__PURE__ */ jsxs(Group, { left: centerX, top: centerY, children: [
       /* @__PURE__ */ jsx(
         Pie,
         {
@@ -82,27 +151,20 @@ function DonutPlot(props) {
             return /* @__PURE__ */ jsx(
               "g",
               {
-                onPointerEnter: (event) => {
-                  show(arc.data, event);
-                },
-                onPointerMove: (event) => {
-                  show(arc.data, event);
-                },
-                onPointerLeave: () => {
-                  hide();
-                },
-                onPointerCancel: () => {
-                  hide();
-                },
+                id: cursor.optionId(arc.data),
+                role: "option",
+                "aria-selected": activeKey === key,
+                "aria-label": `${arc.data.label}: ${formatValue(arc.data.value)}, ${sharePercent(arc.data.value, total)}%`,
+                ...cursor.pointerProps(arc.data),
                 style: { cursor: "pointer" },
                 children: /* @__PURE__ */ jsx(
                   "path",
                   {
                     d: pie.path(arc) || "",
-                    fill: colorForKey(key),
+                    fill: arc.data.color,
                     stroke: VX.surface.panel,
                     strokeWidth: 1.5,
-                    opacity: hoveredKey === null || hoveredKey === key ? 1 : 0.4
+                    opacity: activeKey === null || activeKey === key ? 1 : 0.4
                   }
                 )
               },
@@ -153,13 +215,13 @@ function DonutPlot(props) {
         children: centerContent
       }
     ),
-    tip !== null && /* @__PURE__ */ jsx(ChartTooltipFloat, { anchor: tip.anchor, children: /* @__PURE__ */ jsxs(TooltipBody, { children: [
+    cursor.tip !== null && /* @__PURE__ */ jsx(ChartTooltipFloat, { anchor: cursor.tip.anchor, children: /* @__PURE__ */ jsxs(TooltipBody, { children: [
       /* @__PURE__ */ jsx(
         TooltipRow,
         {
-          color: colorForKey(tip.key),
-          label: seriesLabel(tip.key),
-          value: formatValue(tip.value),
+          color: cursor.tip.target.color,
+          label: cursor.tip.target.label,
+          value: formatValue(cursor.tip.target.value),
           shape: "bar"
         }
       ),
@@ -168,7 +230,7 @@ function DonutPlot(props) {
         {
           color: VX.grid,
           label: "Share",
-          value: `${total > 0 ? Math.round(tip.value / total * 100) : 0}%`,
+          value: `${sharePercent(cursor.tip.target.value, total)}%`,
           shape: "bar"
         }
       )

package/dist/charts/kinds/DualPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DualPanel.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/DualPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DualPanel.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/DualPanel.tsx"],"names":[],"mappings":"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"}

package/dist/charts/kinds/DualPanel.js

@@ -178,12 +178,14 @@ function DualPanelPlot(props) {
     }),
     [bottomDomain, bottomH, useNiceBottom]
   );
+  const svgRef = useRef(null);
   const cursor = useChartCursor({
     data,
     chartId,
     getKey: getX,
     xScale,
     marginLeft: margin.left,
+    boundaryRef: svgRef,
     ...cursorResolution !== void 0 && { resolution: cursorResolution }
   });
   const xLabelPx = useMemo(() => xLabelPxFor(xLabelsAll), [xLabelsAll]);
@@ -286,145 +288,157 @@ function DualPanelPlot(props) {
     }),
     [visibleSeries, lineValid, xScale, topYScale, getX]
   );
-  const svgRef = useRef(null);
   const point = cursor.point;
   const sx = point !== null ? xScale(getX(point)) ?? 0 : 0;
   const syncedBar = point !== null ? getBar(point) : null;
   const isFollowerRender = !cursor.isSource && onFollow === true;
   const showTooltip = point !== null && (cursor.isSource || isFollowerRender);
-  const anchorX = isFollowerRender && point !== null ? sx : null;
+  const anchorX = (isFollowerRender || cursor.isTouch) && point !== null ? sx : null;
   const svgRect = anchorX === null ? void 0 : svgRef.current?.getBoundingClientRect();
   const tooltipAnchor = svgRect === void 0 || anchorX === null ? cursor.anchor : { x: svgRect.left + margin.left + anchorX, y: svgRect.top + margin.top };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("svg", { ref: svgRef, width: plot.width, height: plot.height, children: [
-      /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
-        /* @__PURE__ */ jsx(GridRows, { scale: topYScale, width: xMax, stroke: VX.grid, numTicks: 4 }),
-        /* @__PURE__ */ jsx(ZoneRects, { zones: topZones, width: xMax, leftScale: topYScale }),
-        fillBetween && fillPts.length > 0 && /* @__PURE__ */ jsx(
-          Threshold,
-          {
-            id: `${chartId}-fill`,
-            data: fillPts,
-            x: (p) => xScale(getX(p.__d)) ?? 0,
-            y0: (p) => topYScale(p.__from),
-            y1: (p) => topYScale(p.__to),
-            clipAboveTo: 0,
-            clipBelowTo: topH,
-            curve: fillCurve,
-            belowAreaProps: { fill: fillBetween.fill },
-            aboveAreaProps: { fill: fillBetween.aboveFill ?? fillBetween.fill }
-          }
-        ),
-        topRefLines.map((r, i) => /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: 0,
-            x2: xMax,
-            y1: topYScale(r.value),
-            y2: topYScale(r.value),
-            stroke: r.color,
-            strokeDasharray: r.dashed ? VX.dashArray : void 0
-          },
-          `top-ref-${i}`
-        )),
-        visibleSeries.map((s) => {
-          const valid = lineValid.get(s.key) ?? [];
-          if (valid.length === 0) return null;
-          return /* @__PURE__ */ jsx(
-            LinePath,
-            {
-              data: valid,
-              x: (p) => xScale(getX(p.__d)) ?? 0,
-              y: (p) => topYScale(p.__y),
-              stroke: s.color,
-              strokeWidth: s.strokeWidth ?? VX.lineWidth,
-              strokeDasharray: s.dash === "dashed" ? VX.dashArray : void 0,
-              strokeOpacity: s.strokeOpacity ?? 1,
-              curve: curveFor(s.curve)
-            },
-            `top-line-${s.key}`
-          );
-        }),
-        markerNodes,
-        point !== null && /* @__PURE__ */ jsx(Fragment, { children: visibleSeries.map((s) => {
-          const v = s.getValue(point);
-          if (v === null || v === void 0 || Number.isNaN(v)) return null;
-          return /* @__PURE__ */ jsx(SeriesDot, { cx: sx, cy: topYScale(v), color: s.color }, `top-dot-${s.key}`);
-        }) }),
-        /* @__PURE__ */ jsx(AxisLeftNumeric, { scale: topYScale, numTicks: 4, tickFormat: formatTop }),
-        /* @__PURE__ */ jsx(
-          HoverOverlay,
-          {
-            width: xMax,
-            height: topH + PANE_GAP,
-            onMove: cursor.onPointerMove,
-            onLeave: cursor.onPointerLeave,
-            onKeyDown: cursor.onKeyDown,
-            onBlur: cursor.onBlur,
-            valueMax: Math.max(data.length - 1, 0),
-            ...point !== null && {
-              valueNow: data.indexOf(point),
-              valueText: formatX(getX(point))
-            },
-            ...ariaLabel !== void 0 && { ariaLabel }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top + bottomTop, children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: 0,
-            x2: xMax,
-            y1: bottomYScale(0),
-            y2: bottomYScale(0),
-            stroke: VX.grid,
-            strokeWidth: 1
-          }
-        ),
-        histogramBars.map((b) => /* @__PURE__ */ jsx(
-          Bar,
-          {
-            x: b.x,
-            y: b.y,
-            width: b.width,
-            height: b.height,
-            fill: b.fill,
-            fillOpacity: 0.7,
-            rx: 1.4
-          },
-          b.key
-        )),
-        barVisible && point !== null && syncedBar !== null && syncedBar !== void 0 && !Number.isNaN(syncedBar) && /* @__PURE__ */ jsx(
-          SeriesDot,
-          {
-            cx: sx,
-            cy: bottomYScale(syncedBar),
-            color: syncedBar >= 0 ? barColorPositive : barColorNegative
-          }
-        ),
-        /* @__PURE__ */ jsx(AxisLeftNumeric, { scale: bottomYScale, numTicks: 3, tickFormat: formatBottom }),
-        /* @__PURE__ */ jsx(
-          AxisBottomDate,
-          {
-            top: bottomH,
-            scale: xScale,
-            tickValues,
-            tickFormat: formatX
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HoverOverlay,
-          {
-            width: xMax,
-            height: bottomH + margin.bottom,
-            onMove: cursor.onPointerMove,
-            onLeave: cursor.onPointerLeave
-          }
-        )
-      ] }),
-      point !== null && /* @__PURE__ */ jsx(Group, { left: margin.left, top: margin.top, children: /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: innerH }) })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        width: plot.width,
+        height: plot.height,
+        style: { touchAction: "pan-y" },
+        children: [
+          /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+            /* @__PURE__ */ jsx(GridRows, { scale: topYScale, width: xMax, stroke: VX.grid, numTicks: 4 }),
+            /* @__PURE__ */ jsx(ZoneRects, { zones: topZones, width: xMax, leftScale: topYScale }),
+            fillBetween && fillPts.length > 0 && /* @__PURE__ */ jsx(
+              Threshold,
+              {
+                id: `${chartId}-fill`,
+                data: fillPts,
+                x: (p) => xScale(getX(p.__d)) ?? 0,
+                y0: (p) => topYScale(p.__from),
+                y1: (p) => topYScale(p.__to),
+                clipAboveTo: 0,
+                clipBelowTo: topH,
+                curve: fillCurve,
+                belowAreaProps: { fill: fillBetween.fill },
+                aboveAreaProps: { fill: fillBetween.aboveFill ?? fillBetween.fill }
+              }
+            ),
+            topRefLines.map((r, i) => /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: xMax,
+                y1: topYScale(r.value),
+                y2: topYScale(r.value),
+                stroke: r.color,
+                strokeDasharray: r.dashed ? VX.dashArray : void 0
+              },
+              `top-ref-${i}`
+            )),
+            visibleSeries.map((s) => {
+              const valid = lineValid.get(s.key) ?? [];
+              if (valid.length === 0) return null;
+              return /* @__PURE__ */ jsx(
+                LinePath,
+                {
+                  data: valid,
+                  x: (p) => xScale(getX(p.__d)) ?? 0,
+                  y: (p) => topYScale(p.__y),
+                  stroke: s.color,
+                  strokeWidth: s.strokeWidth ?? VX.lineWidth,
+                  strokeDasharray: s.dash === "dashed" ? VX.dashArray : void 0,
+                  strokeOpacity: s.strokeOpacity ?? 1,
+                  curve: curveFor(s.curve)
+                },
+                `top-line-${s.key}`
+              );
+            }),
+            markerNodes,
+            point !== null && /* @__PURE__ */ jsx(Fragment, { children: visibleSeries.map((s) => {
+              const v = s.getValue(point);
+              if (v === null || v === void 0 || Number.isNaN(v)) return null;
+              return /* @__PURE__ */ jsx(SeriesDot, { cx: sx, cy: topYScale(v), color: s.color }, `top-dot-${s.key}`);
+            }) }),
+            /* @__PURE__ */ jsx(AxisLeftNumeric, { scale: topYScale, numTicks: 4, tickFormat: formatTop }),
+            /* @__PURE__ */ jsx(
+              HoverOverlay,
+              {
+                width: xMax,
+                height: topH + PANE_GAP,
+                onMove: cursor.onPointerMove,
+                onDown: cursor.onPointerDown,
+                onUp: cursor.onPointerUp,
+                onLeave: cursor.onPointerLeave,
+                onKeyDown: cursor.onKeyDown,
+                onBlur: cursor.onBlur,
+                valueMax: Math.max(data.length - 1, 0),
+                ...point !== null && {
+                  valueNow: data.indexOf(point),
+                  valueText: formatX(getX(point))
+                },
+                ...ariaLabel !== void 0 && { ariaLabel }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top + bottomTop, children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: xMax,
+                y1: bottomYScale(0),
+                y2: bottomYScale(0),
+                stroke: VX.grid,
+                strokeWidth: 1
+              }
+            ),
+            histogramBars.map((b) => /* @__PURE__ */ jsx(
+              Bar,
+              {
+                x: b.x,
+                y: b.y,
+                width: b.width,
+                height: b.height,
+                fill: b.fill,
+                fillOpacity: 0.7,
+                rx: 1.4
+              },
+              b.key
+            )),
+            barVisible && point !== null && syncedBar !== null && syncedBar !== void 0 && !Number.isNaN(syncedBar) && /* @__PURE__ */ jsx(
+              SeriesDot,
+              {
+                cx: sx,
+                cy: bottomYScale(syncedBar),
+                color: syncedBar >= 0 ? barColorPositive : barColorNegative
+              }
+            ),
+            /* @__PURE__ */ jsx(AxisLeftNumeric, { scale: bottomYScale, numTicks: 3, tickFormat: formatBottom }),
+            /* @__PURE__ */ jsx(
+              AxisBottomDate,
+              {
+                top: bottomH,
+                scale: xScale,
+                tickValues,
+                tickFormat: formatX
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HoverOverlay,
+              {
+                width: xMax,
+                height: bottomH + margin.bottom,
+                onMove: cursor.onPointerMove,
+                onDown: cursor.onPointerDown,
+                onUp: cursor.onPointerUp,
+                onLeave: cursor.onPointerLeave
+              }
+            )
+          ] }),
+          point !== null && /* @__PURE__ */ jsx(Group, { left: margin.left, top: margin.top, children: /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: innerH }) })
+        ]
+      }
+    ),
     showTooltip && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: tooltipAnchor, ariaLive: cursor.isSource, children: [
       /* @__PURE__ */ jsx(
         TooltipHeader,

package/dist/charts/kinds/Heatmap.d.ts

@@ -68,6 +68,13 @@ export type HeatmapProps<T> = BasaltProps & {
  * right gutter reserves half the widest column label, so no two painted labels overlap and the
  * last one cannot clip.
  *
+ * Tap-to-pin, keyboard stepping and focus over the grid come from `useDiscreteCursor`
+ * (`docs/CHARTS-SPEC.md` §4, Tooltip), the discrete counterpart of `HoverOverlay`. Its targets are
+ * the FULL row-major grid (data cells and empty ones alike) so Up/Down can jump one row via a fixed
+ * `columns` stride; only a cell WITH data renders a tooltip or takes pointer input, matching today's
+ * hover behavior — an empty cell is still a keyboard stop (so the grid reads as one rectangle), it
+ * just carries no readout.
+ *
  * Composes `ChartFrame` purely for measuring (`height`/`aspectRatio`/`fill`, the same three
  * sizing modes every other kind exposes) — `legend={false}` and an empty `series` opt out of
  * `ChartFrame`'s own derived legend, since Heatmap already ships its own gradient strip.

package/dist/charts/kinds/Heatmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Heatmap.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAQrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAK5D,kFAAkF;AAClF,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAK9D,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,WAAW,GAAG;IAC1C,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;+CAE2C;IAC3C,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,yCAAyC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClD,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAA;IAChD,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC,iGAAiG;IACjG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAoCD;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,+BAyB9C;AAkND,eAAO,MAAM,OAAO,EAAkB,OAAO,YAAY,CAAA"}
+{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Heatmap.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAQrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAGrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAK5D,kFAAkF;AAClF,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAM9D,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,WAAW,GAAG;IAC1C,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;+CAE2C;IAC3C,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACxB,yCAAyC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClD,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAA;IAChD,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC,iGAAiG;IACjG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAoCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,+BAyB9C;AAgPD,eAAO,MAAM,OAAO,EAAkB,OAAO,YAAY,CAAA"}