@astryxdesign/lab 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/dist/ChartV2/marks/candlestick.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/candlestick.tsx
+ * @output Candlestick (OHLC) series
+ */
+
+export function candlestick(options) {
+  const upColor = options.upColor ?? 'var(--color-positive)';
+  const downColor = options.downColor ?? 'var(--color-negative)';
+  return {
+    type: 'candlestick',
+    key: `ohlc-${options.close}`,
+    dataKeys: [options.open, options.high, options.low, options.close],
+    layout: {},
+    resolve(ctx) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let px;
+        if ('bandwidth' in xScale) {
+          px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey]);
+        }
+        const close = typeof d[options.close] === 'number' ? d[options.close] : 0;
+        points.push({
+          px,
+          py: yScale(close),
+          py0: yScale(0),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved, ctx) {
+      const {
+        data,
+        xScale,
+        yScale
+      } = ctx;
+      if (!('bandwidth' in xScale)) {
+        return null;
+      }
+      const bw = xScale.bandwidth();
+      const bodyWidth = bw * 0.6;
+      return /*#__PURE__*/_jsx("g", {
+        children: resolved.map((p, i) => {
+          const d = data[p.dataIndex];
+          const o = typeof d[options.open] === 'number' ? d[options.open] : 0;
+          const c = typeof d[options.close] === 'number' ? d[options.close] : 0;
+          const h = typeof d[options.high] === 'number' ? d[options.high] : 0;
+          const l = typeof d[options.low] === 'number' ? d[options.low] : 0;
+          const isUp = c >= o;
+          const col = isUp ? upColor : downColor;
+          return /*#__PURE__*/_jsxs("g", {
+            children: [/*#__PURE__*/_jsx("line", {
+              x1: p.px,
+              x2: p.px,
+              y1: yScale(h),
+              y2: yScale(l),
+              stroke: col,
+              strokeWidth: 1
+            }), /*#__PURE__*/_jsx("rect", {
+              x: p.px - bodyWidth / 2,
+              y: yScale(Math.max(o, c)),
+              width: bodyWidth,
+              height: Math.max(1, Math.abs(yScale(o) - yScale(c))),
+              fill: col
+            })]
+          }, i);
+        })
+      });
+    }
+  };
+}

package/dist/ChartV2/marks/dot.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file marks/dot.tsx
+ * @output Dot/scatter series — self-contained resolve + render
+ */
+import type { SeriesDef } from '../types';
+export type ColorAccessor = string | ((datum: Record<string, unknown>, index: number) => string);
+export interface DotOptions {
+    color?: ColorAccessor;
+    radius?: number;
+    opacity?: number;
+    dodge?: boolean;
+    label?: string;
+}
+export declare function dot(dataKey: string, options?: DotOptions): SeriesDef;
+//# sourceMappingURL=dot.d.ts.map

package/dist/ChartV2/marks/dot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/dot.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAGvD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAEjG,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,GAAG,SAAS,CA2CxE"}

package/dist/ChartV2/marks/dot.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/dot.tsx
+ * @output Dot/scatter series — self-contained resolve + render
+ */
+
+export function dot(dataKey, options = {}) {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const radius = options.radius ?? 4;
+  const opacity = options.opacity ?? 0.8;
+  return {
+    type: 'dot',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color: typeof color === 'string' ? color : undefined,
+    label: options.label ?? dataKey,
+    layout: {},
+    resolve(ctx) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let px;
+        if ('bandwidth' in xScale) {
+          px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey]);
+        }
+        const v = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+        points.push({
+          px,
+          py: yScale(v),
+          py0: yScale(0),
+          dataIndex: i
+        });
+      }
+      // TODO: dodge layout runs here — has access to radius + all points
+      return points;
+    },
+    render(resolved, ctx) {
+      const {
+        data
+      } = ctx;
+      return /*#__PURE__*/_jsx("g", {
+        children: resolved.map((p, i) => {
+          const fill = typeof color === 'function' ? color(data[p.dataIndex], p.dataIndex) : color;
+          return /*#__PURE__*/_jsx("circle", {
+            cx: p.px,
+            cy: p.py,
+            r: radius,
+            fill: fill,
+            opacity: opacity
+          }, i);
+        })
+      });
+    }
+  };
+}

package/dist/ChartV2/marks/dotGL.d.ts

@@ -0,0 +1,16 @@
+import type { SeriesDef } from '../types';
+export interface DotGLOptions {
+    color: string;
+    size?: number;
+    opacity?: number;
+}
+/**
+ * WebGL scatter plot. Canvas mounted outside SVG for sharp Retina rendering.
+ *
+ * @example
+ * ```
+ * series={[dotGL('value', {color: '#4f46e5'})]}
+ * ```
+ */
+export declare function dotGL(dataKey: string, options: DotGLOptions): SeriesDef;
+//# sourceMappingURL=dotGL.d.ts.map

package/dist/ChartV2/marks/dotGL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dotGL.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/dotGL.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAavD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA6HD;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,SAAS,CA2CvE"}

package/dist/ChartV2/marks/dotGL.js

@@ -0,0 +1,178 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/dotGL.tsx
+ * @output WebGL scatter — canvas overlay, single draw call
+ */
+
+import { useRef, useEffect, useCallback } from 'react';
+import { useChartV2 } from "../ChartV2Context.js";
+import { hexToGL, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, createProgram, POINT_SIZE_COMPENSATION } from "../../Chart/webgl.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const VERT = `
+  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 * ${POINT_SIZE_COMPENSATION.toFixed(6)};
+  }
+`;
+const FRAG = `
+  precision mediump float;
+  uniform vec3 u_color;
+  uniform float u_opacity;
+  void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    float dist = length(coord);
+    if (dist > 0.5) discard;
+    float edge = 1.0 - smoothstep(0.48, 0.5, dist);
+    float a = u_opacity * edge;
+    gl_FragColor = vec4(u_color * a, a);
+  }
+`;
+
+/**
+ * Inline component returned by render() — manages the WebGL canvas lifecycle.
+ * Needs access to svgRef from ChartV2Context to mount the canvas outside SVG.
+ */
+function DotGLCanvas({
+  resolved,
+  color,
+  size,
+  opacity,
+  width,
+  height
+}) {
+  const {
+    svgRef: _svgRef
+  } = useChartV2();
+  const canvasRef = useRef(null);
+  const glRef = useRef(null);
+  const programRef = useRef(null);
+  const markerRef = useRef(null);
+  const getPositions = useCallback(() => {
+    const positions = [];
+    for (const p of resolved) {
+      positions.push(p.px, p.py);
+    }
+    return new Float32Array(positions);
+  }, [resolved]);
+
+  // Mount canvas outside SVG
+  useEffect(() => {
+    const marker = markerRef.current;
+    if (!marker) {
+      return;
+    }
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement('canvas');
+    }
+    return mountCanvasOverSVG(marker, canvasRef.current, width, height);
+  }, [width, height]);
+
+  // Draw
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || width <= 0 || height <= 0) {
+      return;
+    }
+    const dpr = sizeCanvas(canvas, width, height);
+    if (!glRef.current) {
+      glRef.current = getWebGLContext(canvas);
+    }
+    const gl = glRef.current;
+    if (!gl) {
+      return;
+    }
+    if (!programRef.current) {
+      programRef.current = createProgram(gl, VERT, FRAG);
+    }
+    const program = programRef.current;
+    if (!program) {
+      return;
+    }
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    setupGLState(gl);
+    gl.useProgram(program);
+    const positions = getPositions();
+    const posBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    const [r, g, b] = hexToGL(color);
+    gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), width, height);
+    gl.uniform3f(gl.getUniformLocation(program, 'u_color'), r, g, b);
+    gl.uniform1f(gl.getUniformLocation(program, 'u_size'), size * dpr);
+    gl.uniform1f(gl.getUniformLocation(program, 'u_opacity'), opacity);
+    gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+    gl.deleteBuffer(posBuffer);
+  }, [width, height, color, size, opacity, getPositions]);
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    ref: markerRef
+  });
+}
+
+/**
+ * WebGL scatter plot. Canvas mounted outside SVG for sharp Retina rendering.
+ *
+ * @example
+ * ```
+ * series={[dotGL('value', {color: '#4f46e5'})]}
+ * ```
+ */
+export function dotGL(dataKey, options) {
+  const {
+    color
+  } = options;
+  const size = options.size ?? 6;
+  const opacity = options.opacity ?? 0.8;
+  return {
+    type: 'dotGL',
+    key: dataKey,
+    dataKeys: [dataKey],
+    layout: {},
+    resolve(ctx) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let px;
+        if ('bandwidth' in xScale) {
+          px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey]);
+        }
+        const v = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+        points.push({
+          px,
+          py: yScale(v),
+          py0: yScale(0),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved, ctx) {
+      return /*#__PURE__*/_jsx(DotGLCanvas, {
+        resolved: resolved,
+        color: color,
+        size: size,
+        opacity: opacity,
+        width: ctx.width,
+        height: ctx.height
+      });
+    }
+  };
+}

package/dist/ChartV2/marks/dotGLInteractive.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @file marks/dotGLInteractive.tsx
+ * @output WebGL scatter with GPU color-picking for O(1) nearest-point hover
+ *
+ * Each point gets a unique color encoding its index. On hover, readPixels
+ * from an offscreen framebuffer decodes the hovered index — no JS iteration.
+ */
+import { type ReactNode } from 'react';
+import type { SeriesDef } from '../types';
+export interface DotGLInteractiveOptions {
+    color: string;
+    size?: number;
+    opacity?: number;
+    /** Custom tooltip renderer. Receives datum and index. */
+    renderTooltip?: (datum: Record<string, unknown>, index: number) => ReactNode;
+}
+/**
+ * WebGL scatter with GPU color-picking hover. O(1) hit detection via offscreen
+ * framebuffer — no JS iteration regardless of point count.
+ *
+ * @example
+ * ```
+ * series={[dotGLInteractive('value', {
+ *   color: '#4f46e5',
+ *   renderTooltip: (d, i) => <span>{d.name}: {d.value}</span>,
+ * })]}
+ * ```
+ */
+export declare function dotGLInteractive(dataKey: string, options: DotGLInteractiveOptions): SeriesDef;
+//# sourceMappingURL=dotGLInteractive.d.ts.map

package/dist/ChartV2/marks/dotGLInteractive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dotGLInteractive.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/dotGLInteractive.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAIvD,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC9E;AAwcD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,uBAAuB,GAC/B,SAAS,CA8CX"}