@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/Chart/ChartDotGLInteractive.js

@@ -0,0 +1,446 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartDotGLInteractive.tsx
+ * @output WebGL scatter with GPU color-picking for O(1) nearest-point hover detection
+ * @position Child of Chart; renders to two canvases — one visible, one offscreen pick buffer
+ *
+ * Technique: Each point is assigned a unique color encoding its index.
+ * On hover, we readPixels from the offscreen framebuffer at the cursor position
+ * and decode the index. No JS iteration over data points — hover is O(1).
+ */
+
+import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import { useChart } from "./ChartContext.js";
+import { xPixel } from "./utils.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+function hexToGL(hex) {
+  const n = parseInt(hex.replace('#', ''), 16);
+  return [(n >> 16) / 255, (n >> 8 & 0xff) / 255, (n & 0xff) / 255];
+}
+
+/** Encode a point index as an RGB color (supports up to 16.7M points) */
+function indexToColor(i) {
+  // Add 1 so index 0 isn't black (which is our clear color)
+  const id = i + 1;
+  return [(id >> 16 & 0xff) / 255, (id >> 8 & 0xff) / 255, (id & 0xff) / 255];
+}
+
+/** Decode an RGB pixel back to a point index. Returns -1 for background. */
+function colorToIndex(r, g, b) {
+  if (r === 0 && g === 0 && b === 0) {
+    return -1;
+  }
+  return (r << 16 | g << 8 | b) - 1;
+}
+
+// Visible pass — normal rendering
+const VERT_VIS = `
+  attribute vec2 a_position;
+  uniform vec2 u_resolution;
+  uniform float u_size;
+  void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    gl_PointSize = u_size;
+  }
+`;
+const FRAG_VIS = `
+  precision mediump float;
+  uniform vec3 u_color;
+  uniform float u_opacity;
+  void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    if (dot(coord, coord) > 0.25) discard;
+    gl_FragColor = vec4(u_color, u_opacity);
+  }
+`;
+
+// Pick pass — encode index as color
+const VERT_PICK = `
+  attribute vec2 a_position;
+  attribute vec3 a_pickColor;
+  uniform vec2 u_resolution;
+  uniform float u_size;
+  varying vec3 v_pickColor;
+  void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    gl_PointSize = u_size + 4.0; // slightly larger hit area
+    v_pickColor = a_pickColor;
+  }
+`;
+const FRAG_PICK = `
+  precision mediump float;
+  varying vec3 v_pickColor;
+  void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    if (dot(coord, coord) > 0.25) discard;
+    gl_FragColor = vec4(v_pickColor, 1.0);
+  }
+`;
+function compileShader(gl, type, src) {
+  const s = gl.createShader(type);
+  if (!s) {
+    return null;
+  }
+  gl.shaderSource(s, src);
+  gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+    gl.deleteShader(s);
+    return null;
+  }
+  return s;
+}
+function linkProgram(gl, vert, frag) {
+  const vs = compileShader(gl, gl.VERTEX_SHADER, vert);
+  const fs = compileShader(gl, gl.FRAGMENT_SHADER, frag);
+  if (!vs || !fs) {
+    return null;
+  }
+  const p = gl.createProgram();
+  if (!p) {
+    return null;
+  }
+  gl.attachShader(p, vs);
+  gl.attachShader(p, fs);
+  gl.linkProgram(p);
+  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+    gl.deleteProgram(p);
+    return null;
+  }
+  return p;
+}
+
+/**
+ * WebGL scatter with built-in GPU hover detection.
+ * Uses color-picking on an offscreen framebuffer — readPixels at cursor
+ * gives the hovered point index in O(1), no matter how many points.
+ *
+ * @example
+ * ```
+ * <ChartDotGLInteractive
+ *   dataKey="value"
+ *   color={useChartColors().categorical(1)[0]}
+ *   renderTooltip={(d, i) => <span>Point {i}: {d.value}</span>}
+ * />
+ * ```
+ */
+export function ChartDotGLInteractive({
+  dataKey,
+  color,
+  size = 6,
+  opacity = 0.8,
+  renderTooltip
+}) {
+  const {
+    data,
+    xKey,
+    xScale,
+    yScale,
+    width,
+    height
+  } = useChart();
+  const visCanvasRef = useRef(null);
+  const pickCanvasRef = useRef(null);
+  const [hoverIndex, setHoverIndex] = useState(-1);
+  const [mousePos, setMousePos] = useState(null);
+
+  // Refs for WebGL state
+  const visGLRef = useRef(null);
+  const pickGLRef = useRef(null);
+
+  // Compute positions
+  const positions = useMemo(() => {
+    const pos = [];
+    for (const d of data) {
+      const x = xPixel(d, xKey, xScale);
+      const yVal = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+      pos.push(x, yScale(yVal));
+    }
+    return new Float32Array(pos);
+  }, [data, xKey, dataKey, xScale, yScale]);
+
+  // Pick colors — one unique color per point
+  const pickColors = useMemo(() => {
+    const colors = [];
+    for (let i = 0; i < data.length; i++) {
+      const [r, g, b] = indexToColor(i);
+      colors.push(r, g, b);
+    }
+    return new Float32Array(colors);
+  }, [data.length]);
+
+  // Render both passes
+  useEffect(() => {
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+    const dpr = window.devicePixelRatio || 1;
+
+    // --- Visible canvas ---
+    const visCanvas = visCanvasRef.current;
+    if (visCanvas) {
+      visCanvas.width = width * dpr;
+      visCanvas.height = height * dpr;
+      if (!visGLRef.current) {
+        const gl = visCanvas.getContext('webgl', {
+          alpha: true,
+          premultipliedAlpha: false,
+          antialias: true
+        });
+        const prog = gl ? linkProgram(gl, VERT_VIS, FRAG_VIS) : null;
+        if (gl && prog) {
+          visGLRef.current = {
+            gl,
+            prog
+          };
+        }
+      }
+      const vis = visGLRef.current;
+      if (vis) {
+        const {
+          gl,
+          prog
+        } = vis;
+        gl.viewport(0, 0, visCanvas.width, visCanvas.height);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.useProgram(prog);
+        const buf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+        const aPos = gl.getAttribLocation(prog, 'a_position');
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+        const [r, g, b] = hexToGL(color);
+        // Logical pixels — positions from xPixel/yScale are logical
+        gl.uniform2f(gl.getUniformLocation(prog, 'u_resolution'), width, height);
+        gl.uniform3f(gl.getUniformLocation(prog, 'u_color'), r, g, b);
+        gl.uniform1f(gl.getUniformLocation(prog, 'u_size'), size * dpr);
+        gl.uniform1f(gl.getUniformLocation(prog, 'u_opacity'), opacity);
+        gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+        gl.deleteBuffer(buf);
+      }
+    }
+
+    // --- Pick canvas (offscreen) ---
+    const pickCanvas = pickCanvasRef.current;
+    if (pickCanvas) {
+      pickCanvas.width = width * dpr;
+      pickCanvas.height = height * dpr;
+      if (!pickGLRef.current) {
+        const gl = pickCanvas.getContext('webgl', {
+          alpha: false,
+          premultipliedAlpha: false,
+          antialias: false,
+          // no AA for clean color IDs
+          preserveDrawingBuffer: true
+        });
+        if (gl) {
+          const prog = linkProgram(gl, VERT_PICK, FRAG_PICK);
+          const fb = gl.createFramebuffer();
+          const tex = gl.createTexture();
+          if (prog && fb && tex) {
+            // Set up framebuffer with texture
+            gl.bindTexture(gl.TEXTURE_2D, tex);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, pickCanvas.width, pickCanvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            pickGLRef.current = {
+              gl,
+              prog,
+              fb,
+              tex
+            };
+          }
+        }
+      }
+      const pick = pickGLRef.current;
+      if (pick) {
+        const {
+          gl,
+          prog,
+          fb,
+          tex
+        } = pick;
+
+        // Resize texture if needed
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, pickCanvas.width, pickCanvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+        gl.viewport(0, 0, pickCanvas.width, pickCanvas.height);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.disable(gl.BLEND); // no blending for pick IDs
+        gl.useProgram(prog);
+
+        // Positions
+        const posBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+        const aPos = gl.getAttribLocation(prog, 'a_position');
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+
+        // Pick colors
+        const colBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
+        gl.bufferData(gl.ARRAY_BUFFER, pickColors, gl.STATIC_DRAW);
+        const aCol = gl.getAttribLocation(prog, 'a_pickColor');
+        gl.enableVertexAttribArray(aCol);
+        gl.vertexAttribPointer(aCol, 3, gl.FLOAT, false, 0, 0);
+        gl.uniform2f(gl.getUniformLocation(prog, 'u_resolution'), width, height);
+        gl.uniform1f(gl.getUniformLocation(prog, 'u_size'), (size + 4) * dpr);
+        gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+        gl.deleteBuffer(posBuf);
+        gl.deleteBuffer(colBuf);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      }
+    }
+  }, [width, height, positions, pickColors, color, size, opacity]);
+
+  // Mouse handler — read pick buffer
+  const handleMouseMove = useCallback(e => {
+    const pick = pickGLRef.current;
+    if (!pick) {
+      return;
+    }
+    const svg = e.currentTarget.ownerSVGElement;
+    if (!svg) {
+      return;
+    }
+    const pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    const local = pt.matrixTransform(e.currentTarget.getScreenCTM()?.inverse());
+    const dpr = window.devicePixelRatio || 1;
+    const px = Math.floor(local.x * dpr);
+    const py = Math.floor(local.y * dpr);
+    const {
+      gl,
+      fb
+    } = pick;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+    const pixel = new Uint8Array(4);
+    gl.readPixels(px, gl.canvas.height - py, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    const idx = colorToIndex(pixel[0], pixel[1], pixel[2]);
+    setHoverIndex(idx);
+    setMousePos(idx >= 0 ? {
+      x: local.x,
+      y: local.y
+    } : null);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setHoverIndex(-1);
+    setMousePos(null);
+  }, []);
+  const datum = hoverIndex >= 0 && hoverIndex < data.length ? data[hoverIndex] : null;
+  const defaultTooltip = (d, i) => /*#__PURE__*/_jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2,
+      fontSize: 12
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        fontWeight: 600,
+        color: 'var(--color-text-primary)'
+      },
+      children: ["Point ", i]
+    }), Object.entries(d).map(([k, v]) => /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxs("span", {
+        style: {
+          color: 'var(--color-text-secondary)'
+        },
+        children: [k, ":"]
+      }), ' ', /*#__PURE__*/_jsx("span", {
+        style: {
+          fontWeight: 500
+        },
+        children: String(v)
+      })]
+    }, k))]
+  });
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("foreignObject", {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height,
+      style: {
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx("canvas", {
+        ref: visCanvasRef,
+        style: {
+          width,
+          height,
+          pointerEvents: 'none'
+        }
+      })
+    }), /*#__PURE__*/_jsx("foreignObject", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      style: {
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx("canvas", {
+        ref: pickCanvasRef,
+        style: {
+          display: 'none'
+        }
+      })
+    }), /*#__PURE__*/_jsx("rect", {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height,
+      fill: "transparent",
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave
+    }), datum && hoverIndex >= 0 && /*#__PURE__*/_jsx("circle", {
+      cx: positions[hoverIndex * 2],
+      cy: positions[hoverIndex * 2 + 1],
+      r: size / 2 + 3,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2,
+      strokeOpacity: 0.8,
+      pointerEvents: "none"
+    }), datum && mousePos && /*#__PURE__*/_jsx("foreignObject", {
+      x: mousePos.x + 12,
+      y: Math.max(0, mousePos.y - 40),
+      width: 200,
+      height: 120,
+      pointerEvents: "none",
+      style: {
+        overflow: 'visible'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          background: 'var(--color-background-popover)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 8,
+          padding: '8px 12px',
+          boxShadow: 'var(--shadow-med)',
+          whiteSpace: 'nowrap',
+          width: 'fit-content'
+        },
+        children: renderTooltip ? renderTooltip(datum, hoverIndex) : defaultTooltip(datum, hoverIndex)
+      })
+    })]
+  });
+}

package/dist/Chart/ChartErrorBar.d.ts

@@ -0,0 +1,23 @@
+export interface ChartErrorBarProps {
+    /** Data key for the upper bound */
+    yUpper: string;
+    /** Data key for the lower bound */
+    yLower: string;
+    /** Stroke color */
+    color?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Width of the whisker caps in pixels */
+    capWidth?: number;
+}
+/**
+ * Error bars with whisker caps. Pair with ChartBar or ChartDot.
+ *
+ * @example
+ * ```
+ * <ChartBar dataKey="mean" color={colors[0]} />
+ * <ChartErrorBar yUpper="upper95" yLower="lower95" />
+ * ```
+ */
+export declare function ChartErrorBar({ yUpper, yLower, color, strokeWidth, capWidth, }: ChartErrorBarProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartErrorBar.d.ts.map

package/dist/Chart/ChartErrorBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartErrorBar.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartErrorBar.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,kBAAkB;IACjC,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,MAAM,EACN,KAAmC,EACnC,WAAiB,EACjB,QAAY,GACb,EAAE,kBAAkB,+BA4CpB"}

package/dist/Chart/ChartErrorBar.js

@@ -0,0 +1,68 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartErrorBar.tsx
+ * @output Renders error bars (whiskers) at each data point
+ * @position Child of Chart; reads scales from context
+ */
+
+import { useChart } from "./ChartContext.js";
+import { xPixel } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Error bars with whisker caps. Pair with ChartBar or ChartDot.
+ *
+ * @example
+ * ```
+ * <ChartBar dataKey="mean" color={colors[0]} />
+ * <ChartErrorBar yUpper="upper95" yLower="lower95" />
+ * ```
+ */
+export function ChartErrorBar({
+  yUpper,
+  yLower,
+  color = 'var(--color-text-primary)',
+  strokeWidth = 1.5,
+  capWidth = 8
+}) {
+  const {
+    data,
+    xKey,
+    xScale,
+    yScale
+  } = useChart();
+  return /*#__PURE__*/_jsx("g", {
+    children: data.map((d, i) => {
+      const x = xPixel(d, xKey, xScale);
+      const upper = typeof d[yUpper] === 'number' ? d[yUpper] : 0;
+      const lower = typeof d[yLower] === 'number' ? d[yLower] : 0;
+      const yTop = yScale(upper);
+      const yBot = yScale(lower);
+      const half = capWidth / 2;
+      return /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("line", {
+          x1: x,
+          x2: x,
+          y1: yTop,
+          y2: yBot,
+          stroke: color,
+          strokeWidth: strokeWidth
+        }), /*#__PURE__*/_jsx("line", {
+          x1: x - half,
+          x2: x + half,
+          y1: yTop,
+          y2: yTop,
+          stroke: color,
+          strokeWidth: strokeWidth
+        }), /*#__PURE__*/_jsx("line", {
+          x1: x - half,
+          x2: x + half,
+          y1: yBot,
+          y2: yBot,
+          stroke: color,
+          strokeWidth: strokeWidth
+        })]
+      }, i);
+    })
+  });
+}

package/dist/Chart/ChartGrid.d.ts

@@ -0,0 +1,17 @@
+export interface ChartGridProps {
+    /** Show horizontal grid lines (default: true) */
+    horizontal?: boolean;
+    /** Show vertical grid lines */
+    vertical?: boolean;
+}
+/**
+ * Grid lines behind chart marks.
+ *
+ * @example
+ * ```
+ * <ChartGrid horizontal />
+ * <ChartGrid horizontal vertical />
+ * ```
+ */
+export declare function ChartGrid({ horizontal, vertical, }: ChartGridProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartGrid.d.ts.map

package/dist/Chart/ChartGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartGrid.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartGrid.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,cAAc;IAC7B,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,UAAiB,EACjB,QAAgB,GACjB,EAAE,cAAc,+BAqDhB"}

package/dist/Chart/ChartGrid.js

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartGrid.tsx
+ * @output Renders horizontal and/or vertical grid lines
+ * @position Child of Chart; reads scales from context
+ */
+
+import { useMemo } from 'react';
+import { useChart } from "./ChartContext.js";
+import { isBandScale } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Grid lines behind chart marks.
+ *
+ * @example
+ * ```
+ * <ChartGrid horizontal />
+ * <ChartGrid horizontal vertical />
+ * ```
+ */
+export function ChartGrid({
+  horizontal = true,
+  vertical = false
+}) {
+  const {
+    width,
+    height,
+    xScale,
+    yScale
+  } = useChart();
+  const hLines = useMemo(() => {
+    if (!horizontal) {
+      return [];
+    }
+    return yScale.ticks(5).map(tick => yScale(tick));
+  }, [horizontal, yScale]);
+  const vLines = useMemo(() => {
+    if (!vertical) {
+      return [];
+    }
+    if (isBandScale(xScale)) {
+      return xScale.domain().map(d => (xScale(d) ?? 0) + xScale.bandwidth() / 2);
+    }
+    const linear = xScale;
+    return linear.ticks(5).map(d => linear(d));
+  }, [vertical, xScale]);
+  return /*#__PURE__*/_jsxs("g", {
+    children: [hLines.map(y => /*#__PURE__*/_jsx("line", {
+      x1: 0,
+      x2: width,
+      y1: y,
+      y2: y,
+      stroke: "var(--color-border)",
+      strokeOpacity: 0.5,
+      strokeDasharray: "4 4"
+    }, `h-${y}`)), vLines.map(x => /*#__PURE__*/_jsx("line", {
+      x1: x,
+      x2: x,
+      y1: 0,
+      y2: height,
+      stroke: "var(--color-border)",
+      strokeOpacity: 0.5,
+      strokeDasharray: "4 4"
+    }, `v-${x}`))]
+  });
+}

package/dist/Chart/ChartHeatmapGL.d.ts

@@ -0,0 +1,10 @@
+export interface ChartHeatmapGLProps {
+    xKey: string;
+    yKey: string;
+    valueKey: string;
+    colorRange: string[];
+    domain?: [number, number];
+    cellGap?: number;
+}
+export declare function ChartHeatmapGL({ xKey, yKey, valueKey, colorRange, domain: domainProp, cellGap, }: ChartHeatmapGLProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartHeatmapGL.d.ts.map

package/dist/Chart/ChartHeatmapGL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartHeatmapGL.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartHeatmapGL.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyCD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,EAAE,UAAU,EAClB,OAAW,GACZ,EAAE,mBAAmB,sCA8IrB"}