@funnest/charts-viz 0.2.1 → 0.4.0

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export { niceStep, niceDomain, ticks, logTicks, sampleIndices } from './ticks';
 export { linePath, areaPath, barPath, segments, type XY, type Curve } from './path';
 export { extent, maxLength, stack, stackedExtent, percentages, nearestIndex, seriesChange, type SeriesData, type StackedSeries, type PercentageSegment, } from './data';
 export { DEFAULT_PALETTE, seriesColor } from './palette';
+export { arcs, arcPath, arcCentroid, treemap, type ArcSegment, type TreemapRect } from './shapes';

package/dist/index.js

@@ -276,8 +276,138 @@ function seriesChange(data, end = data.length - 1) {
 // src/palette.ts
 var DEFAULT_PALETTE = ["#6C4DFF", "#F59E0B", "#14B8A6", "#EC4899", "#0EA5E9", "#84CC16", "#A16207", "#64748B"];
 var seriesColor = (index, palette = DEFAULT_PALETTE) => palette[(index % palette.length + palette.length) % palette.length];
+
+// src/shapes.ts
+var TAU = Math.PI * 2;
+var f2 = (n) => Math.round(n * 100) / 100;
+function arcs(items, padAngle = 0) {
+  const total = items.reduce((t, i) => t + Math.max(0, i.value), 0);
+  const visible = items.filter((i) => i.value > 0).length;
+  const pad = visible > 1 ? padAngle : 0;
+  let a = 0;
+  return items.map((i) => {
+    const fraction = total > 0 ? Math.max(0, i.value) / total : 0;
+    const span = fraction * TAU;
+    const p = Math.min(pad, span * 0.8);
+    const seg = { id: i.id, value: i.value, fraction, startAngle: a + p / 2, endAngle: a + span - p / 2 };
+    a += span;
+    return seg;
+  });
+}
+var pt = (cx, cy, r, a) => [cx + r * Math.sin(a), cy - r * Math.cos(a)];
+function arcPath(cx, cy, innerRadius, outerRadius, startAngle, endAngle, cornerRadius = 0) {
+  const span = endAngle - startAngle;
+  if (span <= 0 || outerRadius <= 0) return "";
+  if (span >= TAU - 1e-6) {
+    const [x0, y0] = pt(cx, cy, outerRadius, 0);
+    const [x1, y1] = pt(cx, cy, outerRadius, Math.PI);
+    let d2 = `M${f2(x0)},${f2(y0)}A${f2(outerRadius)},${f2(outerRadius)} 0 1 1 ${f2(x1)},${f2(y1)}A${f2(outerRadius)},${f2(outerRadius)} 0 1 1 ${f2(x0)},${f2(y0)}Z`;
+    if (innerRadius > 0) {
+      const [i0x, i0y] = pt(cx, cy, innerRadius, 0);
+      const [i1x, i1y] = pt(cx, cy, innerRadius, Math.PI);
+      d2 += `M${f2(i0x)},${f2(i0y)}A${f2(innerRadius)},${f2(innerRadius)} 0 1 0 ${f2(i1x)},${f2(i1y)}A${f2(innerRadius)},${f2(innerRadius)} 0 1 0 ${f2(i0x)},${f2(i0y)}Z`;
+    }
+    return d2;
+  }
+  const large = span > Math.PI ? 1 : 0;
+  const thick = outerRadius - innerRadius;
+  const cr = Math.max(0, Math.min(cornerRadius, thick / 2, (innerRadius || outerRadius) * span / 2 - 0.01));
+  if (cr <= 0.01) {
+    const [ox0, oy0] = pt(cx, cy, outerRadius, startAngle);
+    const [ox1, oy1] = pt(cx, cy, outerRadius, endAngle);
+    let d2 = `M${f2(ox0)},${f2(oy0)}A${f2(outerRadius)},${f2(outerRadius)} 0 ${large} 1 ${f2(ox1)},${f2(oy1)}`;
+    if (innerRadius > 0) {
+      const [ix1, iy1] = pt(cx, cy, innerRadius, endAngle);
+      const [ix0, iy0] = pt(cx, cy, innerRadius, startAngle);
+      d2 += `L${f2(ix1)},${f2(iy1)}A${f2(innerRadius)},${f2(innerRadius)} 0 ${large} 0 ${f2(ix0)},${f2(iy0)}Z`;
+    } else d2 += `L${f2(cx)},${f2(cy)}Z`;
+    return d2;
+  }
+  const ao = cr / (outerRadius - cr);
+  const ai = innerRadius > 0 ? cr / (innerRadius + cr) : 0;
+  const [a1x, a1y] = pt(cx, cy, outerRadius - cr, startAngle);
+  const [b1x, b1y] = pt(cx, cy, outerRadius, startAngle + ao);
+  const [b2x, b2y] = pt(cx, cy, outerRadius, endAngle - ao);
+  const [a2x, a2y] = pt(cx, cy, outerRadius - cr, endAngle);
+  let d = `M${f2(a1x)},${f2(a1y)}A${f2(cr)},${f2(cr)} 0 0 1 ${f2(b1x)},${f2(b1y)}`;
+  d += `A${f2(outerRadius)},${f2(outerRadius)} 0 ${span - 2 * ao > Math.PI ? 1 : 0} 1 ${f2(b2x)},${f2(b2y)}`;
+  d += `A${f2(cr)},${f2(cr)} 0 0 1 ${f2(a2x)},${f2(a2y)}`;
+  if (innerRadius > 0) {
+    const [c2x, c2y] = pt(cx, cy, innerRadius + cr, endAngle);
+    const [d2x, d2y] = pt(cx, cy, innerRadius, endAngle - ai);
+    const [d1x, d1y] = pt(cx, cy, innerRadius, startAngle + ai);
+    const [c1x, c1y] = pt(cx, cy, innerRadius + cr, startAngle);
+    d += `L${f2(c2x)},${f2(c2y)}A${f2(cr)},${f2(cr)} 0 0 1 ${f2(d2x)},${f2(d2y)}`;
+    d += `A${f2(innerRadius)},${f2(innerRadius)} 0 ${span - 2 * ai > Math.PI ? 1 : 0} 0 ${f2(d1x)},${f2(d1y)}`;
+    d += `A${f2(cr)},${f2(cr)} 0 0 1 ${f2(c1x)},${f2(c1y)}Z`;
+  } else d += `L${f2(cx)},${f2(cy)}Z`;
+  return d;
+}
+function arcCentroid(cx, cy, r, startAngle, endAngle) {
+  const [x, y] = pt(cx, cy, r, (startAngle + endAngle) / 2);
+  return { x, y };
+}
+function treemap(items, width, height, gap = 0) {
+  const list = items.filter((i2) => i2.value > 0).sort((a, b) => b.value - a.value);
+  const total = list.reduce((t, i2) => t + i2.value, 0);
+  if (!total || width <= 0 || height <= 0) return [];
+  const scale = width * height / total;
+  const out = [];
+  let x = 0;
+  let y = 0;
+  let w = width;
+  let h = height;
+  let i = 0;
+  const worst = (row, side) => {
+    const s = row.reduce((t, v) => t + v, 0);
+    const max = Math.max(...row);
+    const min = Math.min(...row);
+    return Math.max(side * side * max / (s * s), s * s / (side * side * min));
+  };
+  while (i < list.length) {
+    const side = Math.min(w, h);
+    const row = [list[i].value * scale];
+    let j = i + 1;
+    while (j < list.length) {
+      const next = [...row, list[j].value * scale];
+      if (worst(next, side) > worst(row, side)) break;
+      row.push(list[j].value * scale);
+      j++;
+    }
+    const sum = row.reduce((t, v) => t + v, 0);
+    const thick = sum / side;
+    let off = 0;
+    row.forEach((area, k) => {
+      const len = area / thick;
+      const item = list[i + k];
+      const r = w >= h ? { x, y: y + off, width: thick, height: len } : { x: x + off, y, width: len, height: thick };
+      out.push({ id: item.id, value: item.value, ...r });
+      off += len;
+    });
+    if (w >= h) {
+      x += thick;
+      w -= thick;
+    } else {
+      y += thick;
+      h -= thick;
+    }
+    i = j;
+  }
+  if (gap <= 0) return out;
+  const g = gap / 2;
+  return out.map((r) => ({
+    ...r,
+    x: r.x + (r.x > 0.5 ? g : 0),
+    y: r.y + (r.y > 0.5 ? g : 0),
+    width: Math.max(0, r.width - (r.x > 0.5 ? g : 0) - (r.x + r.width < width - 0.5 ? g : 0)),
+    height: Math.max(0, r.height - (r.y > 0.5 ? g : 0) - (r.y + r.height < height - 0.5 ? g : 0))
+  }));
+}
 export {
   DEFAULT_PALETTE,
+  arcCentroid,
+  arcPath,
+  arcs,
   areaPath,
   bandScale,
   barPath,
@@ -298,5 +428,6 @@ export {
   seriesColor,
   stack,
   stackedExtent,
-  ticks
+  ticks,
+  treemap
 };

package/dist/shapes.d.ts

@@ -0,0 +1,45 @@
+/** Pie/donut and treemap geometry. Pure math, no DOM. */
+export interface ArcSegment {
+    id: string;
+    value: number;
+    /** Share of the total, 0–1. */
+    fraction: number;
+    /** Radians, clockwise from 12 o'clock. */
+    startAngle: number;
+    endAngle: number;
+}
+/**
+ * Split a full circle into segments by value (negatives count as 0).
+ * `padAngle` (radians) is the gap between neighbours; it is taken out of each segment.
+ */
+export declare function arcs(items: readonly {
+    id: string;
+    value: number;
+}[], padAngle?: number): ArcSegment[];
+/**
+ * SVG path for a ring segment (a pie slice when `innerRadius` is 0).
+ * `cornerRadius` softens the four corners.
+ */
+export declare function arcPath(cx: number, cy: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number, cornerRadius?: number): string;
+/** Point at the middle of a segment, `r` from the center (labels, hover offsets). */
+export declare function arcCentroid(cx: number, cy: number, r: number, startAngle: number, endAngle: number): {
+    x: number;
+    y: number;
+};
+export interface TreemapRect {
+    id: string;
+    value: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Squarified treemap (Bruls, Huizing, van Wijk): rectangles with areas proportional to
+ * value and aspect ratios close to 1. Items are laid out largest first; non-positive
+ * values are dropped.
+ */
+export declare function treemap(items: readonly {
+    id: string;
+    value: number;
+}[], width: number, height: number, gap?: number): TreemapRect[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-viz",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Platform-neutral chart math (scales, ticks, paths, scrubbing) shared by Funnest Charts web and React Native components",
   "keywords": [
     "chart",