@pharos-ds/charts 0.0.0-bootstrap.0 → 1.0.10

package/dist/marks/band.js

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/band.tsx
+ * @output Band (confidence interval) series — area between upper/lower bounds.
+ *   Non-numeric/NaN bounds break the area into gaps instead of collapsing to a
+ *   false zero baseline.
+ */
+
+import { area as d3Area, curveMonotoneX } from 'd3-shape';
+import { DEFAULT_SERIES_COLOR } from "../types.js";
+import { xPixel } from "../utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function band(options) {
+  const color = options.color ?? DEFAULT_SERIES_COLOR;
+  const opacity = options.opacity ?? 0.15;
+  return {
+    type: 'band',
+    key: `band-${options.upper}-${options.lower}`,
+    dataKeys: [options.upper, options.lower],
+    layout: {},
+    resolve(ctx) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        // NaN for missing/non-numeric bounds so render() can gap the area
+        // rather than draw a spike down to the axis.
+        const upperVal = d[options.upper];
+        const lowerVal = d[options.lower];
+        const upper = typeof upperVal === 'number' && Number.isFinite(upperVal) ? upperVal : NaN;
+        const lower = typeof lowerVal === 'number' && Number.isFinite(lowerVal) ? lowerVal : NaN;
+        points.push({
+          px: xPixel(d, xKey, xScale),
+          py: yScale(upper),
+          py0: yScale(lower),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved) {
+      if (resolved.length === 0) {
+        return null;
+      }
+      const areaGen = d3Area().defined(d => Number.isFinite(d.px) && Number.isFinite(d.py) && Number.isFinite(d.py0)).x(d => d.px).y0(d => d.py0).y1(d => d.py).curve(curveMonotoneX);
+      const pathD = areaGen(resolved) ?? '';
+      if (!pathD) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("path", {
+        d: pathD,
+        fill: color,
+        fillOpacity: opacity,
+        stroke: "none"
+      });
+    }
+  };
+}

package/dist/marks/bar.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file marks/bar.tsx
+ * @output Bar series — self-contained resolve + render
+ * @position Standalone mark; chart root calls resolve() then render()
+ *
+ * Robust to missing/NaN values (bars with no finite height are skipped rather
+ * than drawn at the baseline) and to degenerate bandwidths (grouped bar widths
+ * are clamped to a non-negative value). Negative values grow downward from zero.
+ */
+import type { SeriesDef, ColorAccessor } from '../types';
+export type { ColorAccessor };
+export interface BarOptions {
+    color?: ColorAccessor;
+    opacity?: number;
+    radius?: number;
+    stack?: string;
+    group?: string;
+    label?: string;
+}
+export declare function bar(dataKey: string, options?: BarOptions): SeriesDef;
+//# sourceMappingURL=bar.d.ts.map

package/dist/marks/bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/marks/bar.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAiB,aAAa,EAAC,MAAM,UAAU,CAAC;AAItE,YAAY,EAAC,aAAa,EAAC,CAAC;AAE5B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgFD,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,GAAG,SAAS,CAwGxE"}

package/dist/marks/bar.js

@@ -0,0 +1,161 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/bar.tsx
+ * @output Bar series — self-contained resolve + render
+ * @position Standalone mark; chart root calls resolve() then render()
+ *
+ * Robust to missing/NaN values (bars with no finite height are skipped rather
+ * than drawn at the baseline) and to degenerate bandwidths (grouped bar widths
+ * are clamped to a non-negative value). Negative values grow downward from zero.
+ */
+
+import { pointFill } from "../markColor.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Clamp a user opacity into [0,1], falling back when it isn't a finite number. */
+function clampOpacity(value, fallback) {
+  const n = typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+  return Math.min(1, Math.max(0, n));
+}
+
+/** Coerce a user length (radius/width) to a finite, non-negative number. */
+function nonNegative(value, fallback) {
+  return typeof value === 'number' && Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+
+/** True when every coordinate is finite — a NaN/Infinity would corrupt the path. */
+function rectIsFinite(x, y, w, h) {
+  return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(w) && Number.isFinite(h);
+}
+
+/**
+ * Build an SVG path for a rectangle with only the top corners rounded.
+ * When `r` is 0, produces a simple rect path with no curves. Returns an empty
+ * path (draws nothing) if any coordinate is non-finite.
+ */
+function roundedTopRect(x, y, w, h, r) {
+  if (!rectIsFinite(x, y, w, h)) {
+    return '';
+  }
+  // Clamp radius to half the smaller dimension
+  const cr = Math.min(r, w / 2, h / 2);
+  if (!(cr > 0)) {
+    return `M${x},${y + h}V${y}H${x + w}V${y + h}Z`;
+  }
+  return `M${x},${y + h}` + `V${y + cr}Q${x},${y} ${x + cr},${y}` + `H${x + w - cr}Q${x + w},${y} ${x + w},${y + cr}` + `V${y + h}Z`;
+}
+
+/**
+ * Build an SVG path for a rectangle with only the bottom corners rounded.
+ * Returns an empty path if any coordinate is non-finite.
+ */
+function roundedBottomRect(x, y, w, h, r) {
+  if (!rectIsFinite(x, y, w, h)) {
+    return '';
+  }
+  const cr = Math.min(r, w / 2, h / 2);
+  if (!(cr > 0)) {
+    return `M${x},${y}V${y + h}H${x + w}V${y}Z`;
+  }
+  return `M${x},${y}` + `V${y + h - cr}Q${x},${y + h} ${x + cr},${y + h}` + `H${x + w - cr}Q${x + w},${y + h} ${x + w},${y + h - cr}` + `V${y}Z`;
+}
+export function bar(dataKey, options = {}) {
+  const color = options.color;
+  const opacity = clampOpacity(options.opacity, 1);
+  const radius = nonNegative(options.radius, 4);
+  let barWidth = 0;
+  let barOffset = 0;
+  const seriesDef = {
+    type: 'bar',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color: typeof color === 'string' ? color : undefined,
+    label: options.label ?? dataKey,
+    layout: {
+      stack: options.stack,
+      group: options.group,
+      includeZero: true
+    },
+    resolve(ctx, stackOffsets, groupInfo) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      if (!('bandwidth' in xScale)) {
+        return [];
+      }
+      const bandScale = xScale;
+      const bw = bandScale.bandwidth();
+      if (groupInfo && groupInfo.count > 0) {
+        const gutter = bw * 0.05;
+        const totalGutters = gutter * (groupInfo.count - 1);
+        // Clamp: with many groups in a narrow band, gutters can exceed the band
+        // and drive the raw width negative — a negative width mirrors the path.
+        barWidth = Math.max(0, (bw - totalGutters) / groupInfo.count);
+        barOffset = groupInfo.index * (barWidth + gutter);
+      } else {
+        barWidth = bw;
+        barOffset = 0;
+      }
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        // Unknown categories aren't in the band domain → NaN px so render skips
+        // them rather than stacking phantom bars at the origin.
+        const xBase = bandScale(String(d[xKey]));
+        const px = xBase == null ? NaN : xBase + barOffset + barWidth / 2;
+        let py;
+        let py0;
+        if (stackOffsets) {
+          const offset = stackOffsets[i];
+          py = offset ? yScale(offset.y1) : NaN;
+          py0 = offset ? yScale(offset.y0) : NaN;
+        } else {
+          const raw = d[dataKey];
+          const v = typeof raw === 'number' && Number.isFinite(raw) ? raw : NaN;
+          py = yScale(v);
+          py0 = yScale(0);
+        }
+        points.push({
+          px,
+          py,
+          py0,
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved, ctx) {
+      const {
+        data
+      } = ctx;
+      const isTop = seriesDef._isTopOfStack !== false;
+      const r = isTop ? radius : 0;
+      if (!(barWidth > 0)) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        opacity: opacity,
+        children: resolved.map(p => {
+          const d = data[p.dataIndex];
+          if (!d || !Number.isFinite(p.px) || !Number.isFinite(p.py) || !Number.isFinite(p.py0)) {
+            return null;
+          }
+          const fill = pointFill(seriesDef, color, d, p.dataIndex);
+          const x = p.px - barWidth / 2;
+          const y = Math.min(p.py, p.py0);
+          const h = Math.max(0, Math.abs(p.py0 - p.py));
+          const growsUp = p.py <= p.py0;
+          const d_attr = growsUp ? roundedTopRect(x, y, barWidth, h, r) : roundedBottomRect(x, y, barWidth, h, r);
+          return /*#__PURE__*/_jsx("path", {
+            d: d_attr,
+            fill: fill
+          }, p.dataIndex);
+        })
+      });
+    }
+  };
+  return seriesDef;
+}

package/dist/marks/candlestick.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file marks/candlestick.tsx
+ * @output Candlestick (OHLC) series. Renders on both band and linear/time x
+ *   scales; candles missing any OHLC field are skipped rather than drawn to 0.
+ */
+import type { SeriesDef } from '../types';
+export interface CandlestickOptions {
+    open: string;
+    high: string;
+    low: string;
+    close: string;
+    upColor?: string;
+    downColor?: string;
+}
+export declare function candlestick(options: CandlestickOptions): SeriesDef;
+//# sourceMappingURL=candlestick.d.ts.map

package/dist/marks/candlestick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"candlestick.d.ts","sourceRoot":"","sources":["../../src/marks/candlestick.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,SAAS,EAA+B,MAAM,UAAU,CAAC;AAGtE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgCD,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,CA6ElE"}

package/dist/marks/candlestick.js

@@ -0,0 +1,110 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/candlestick.tsx
+ * @output Candlestick (OHLC) series. Renders on both band and linear/time x
+ *   scales; candles missing any OHLC field are skipped rather than drawn to 0.
+ */
+
+import { xPixel, isBandScale } from "../utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Read a datum field as a finite number, or NaN when missing/non-numeric. */
+function readNumber(d, key) {
+  const v = d[key];
+  return typeof v === 'number' && Number.isFinite(v) ? v : NaN;
+}
+
+/**
+ * Pixel width of one candle body. On a band scale this is the bandwidth; on a
+ * linear/time scale it's derived from the smallest gap between adjacent points
+ * (falling back to a modest width when there's only one point).
+ */
+function candleSlot(resolved, ctx) {
+  const {
+    xScale,
+    width
+  } = ctx;
+  if (isBandScale(xScale)) {
+    return xScale.bandwidth();
+  }
+  const xs = resolved.map(p => p.px).filter(x => Number.isFinite(x)).sort((a, b) => a - b);
+  let minGap = Infinity;
+  for (let i = 1; i < xs.length; i++) {
+    const gap = xs[i] - xs[i - 1];
+    if (gap > 0 && gap < minGap) {
+      minGap = gap;
+    }
+  }
+  return Number.isFinite(minGap) ? minGap : Math.min(width, 40);
+}
+export function candlestick(options) {
+  // Emitted core semantic tokens (data-viz --color-data-* tokens aren't CSS vars).
+  const upColor = options.upColor ?? 'var(--color-success)';
+  const downColor = options.downColor ?? 'var(--color-error)';
+  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];
+        const close = readNumber(d, options.close);
+        points.push({
+          px: xPixel(d, xKey, xScale),
+          py: yScale(close),
+          py0: yScale(0),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved, ctx) {
+      const {
+        data,
+        yScale
+      } = ctx;
+      const bodyWidth = Math.max(1, candleSlot(resolved, ctx) * 0.6);
+      return /*#__PURE__*/_jsx("g", {
+        children: resolved.map(p => {
+          const d = data[p.dataIndex];
+          const o = readNumber(d, options.open);
+          const c = readNumber(d, options.close);
+          const h = readNumber(d, options.high);
+          const l = readNumber(d, options.low);
+          // Drop candles missing any OHLC field (or an unplaceable x) — a gap
+          // reads more honestly than a full-height candle anchored at 0.
+          if (!Number.isFinite(p.px) || !Number.isFinite(o) || !Number.isFinite(c) || !Number.isFinite(h) || !Number.isFinite(l)) {
+            return null;
+          }
+          const col = c >= o ? upColor : downColor;
+          const bodyTop = yScale(Math.max(o, c));
+          const bodyHeight = Math.max(1, Math.abs(yScale(o) - yScale(c)));
+          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: bodyTop,
+              width: bodyWidth,
+              height: bodyHeight,
+              fill: col
+            })]
+          }, p.dataIndex);
+        })
+      });
+    }
+  };
+}

package/dist/marks/dot.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file marks/dot.tsx
+ * @output Dot/scatter series — self-contained resolve + render
+ *
+ * Points with missing / non-finite values are skipped rather than plotted at the
+ * baseline. Optional `dodge` spreads coincident points horizontally, ignoring
+ * non-finite ones so a single missing value can't collapse a whole dodge group.
+ */
+import type { SeriesDef, ColorAccessor } from '../types';
+export type { ColorAccessor };
+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/marks/dot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot.d.ts","sourceRoot":"","sources":["../../src/marks/dot.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAiB,aAAa,EAAC,MAAM,UAAU,CAAC;AAItE,YAAY,EAAC,aAAa,EAAC,CAAC;AAE5B,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,CA6FxE"}

package/dist/marks/dot.js

@@ -0,0 +1,98 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/dot.tsx
+ * @output Dot/scatter series — self-contained resolve + render
+ *
+ * Points with missing / non-finite values are skipped rather than plotted at the
+ * baseline. Optional `dodge` spreads coincident points horizontally, ignoring
+ * non-finite ones so a single missing value can't collapse a whole dodge group.
+ */
+
+import { pointFill } from "../markColor.js";
+import { xPixel } from "../utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function dot(dataKey, options = {}) {
+  const color = options.color;
+  const radius = typeof options.radius === 'number' && Number.isFinite(options.radius) ? Math.max(0, options.radius) : 4;
+  const opacity = typeof options.opacity === 'number' && Number.isFinite(options.opacity) ? Math.min(1, Math.max(0, options.opacity)) : 0.8;
+  const dodge = options.dodge ?? false;
+  const seriesDef = {
+    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];
+        const raw = d[dataKey];
+        const v = typeof raw === 'number' && Number.isFinite(raw) ? raw : NaN;
+        points.push({
+          px: xPixel(d, xKey, xScale),
+          py: yScale(v),
+          py0: yScale(0),
+          dataIndex: i
+        });
+      }
+      if (dodge) {
+        // Spread points that land on the same x (e.g. dots over band categories)
+        // horizontally so they don't overlap, centered on the original x.
+        const groups = new Map();
+        for (const p of points) {
+          // Only points render() will actually draw (finite px AND py) join a
+          // dodge group; a missing y-value must not reserve a slot and knock the
+          // visible points off-center.
+          if (!Number.isFinite(p.px) || !Number.isFinite(p.py)) {
+            continue;
+          }
+          const key = Math.round(p.px);
+          const group = groups.get(key) ?? [];
+          group.push(p);
+          groups.set(key, group);
+        }
+        const spacing = radius * 2 + 1;
+        for (const group of groups.values()) {
+          if (group.length < 2) {
+            continue;
+          }
+          const mid = (group.length - 1) / 2;
+          group.forEach((p, idx) => {
+            p.px += (idx - mid) * spacing;
+          });
+        }
+      }
+      return points;
+    },
+    render(resolved, ctx) {
+      const {
+        data
+      } = ctx;
+      return /*#__PURE__*/_jsx("g", {
+        children: resolved.map(p => {
+          const d = data[p.dataIndex];
+          if (!d || !Number.isFinite(p.px) || !Number.isFinite(p.py)) {
+            return null;
+          }
+          const fill = pointFill(seriesDef, color, d, p.dataIndex);
+          return /*#__PURE__*/_jsx("circle", {
+            cx: p.px,
+            cy: p.py,
+            r: radius,
+            fill: fill,
+            opacity: opacity
+          }, p.dataIndex);
+        })
+      });
+    }
+  };
+  return seriesDef;
+}

package/dist/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/marks/dotGL.d.ts.map

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