@data-profile/fingerprint 0.0.0-stage → 0.3.0

package/dist/react/index.js

@@ -0,0 +1,643 @@
+import {
+  CALLOUT_GUTTER,
+  CALLOUT_HEIGHT,
+  DataError,
+  describeLayout,
+  emptyLayout,
+  formFromItems,
+  layoutFingerprint,
+  placeCallouts
+} from "../chunk-y8jc1j2x.js";
+
+// temp/src/react/FingerprintCanvas.tsx
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// temp/src/opacity.ts
+function ridgeOpacity(itemCount, style = {}) {
+  const { show = "auto", fadeFrom = 60, fadeTo = 160, opacity = 0.22 } = style;
+  if (show === "never")
+    return 0;
+  if (show === "always" || itemCount <= fadeFrom)
+    return opacity;
+  if (itemCount >= fadeTo)
+    return 0;
+  return opacity * (1 - (itemCount - fadeFrom) / (fadeTo - fadeFrom));
+}
+
+// temp/src/react/renderers.tsx
+import { markOpacity } from "@data-profile/core";
+import { jsx } from "react/jsx-runtime";
+var shapesRenderer = {
+  name: "shapes",
+  mark: ({ node }) => {
+    const r = node.size / 2;
+    const paint = {
+      fill: node.color,
+      fillOpacity: markOpacity(node)
+    };
+    if (node.shape === null)
+      return /* @__PURE__ */ jsx("circle", {
+        r: r * 0.8,
+        fill: "none",
+        stroke: node.color,
+        strokeOpacity: markOpacity(node),
+        strokeWidth: r * 0.35
+      });
+    switch (node.shape % 5) {
+      case 1:
+        return /* @__PURE__ */ jsx("rect", {
+          x: -r * 0.85,
+          y: -r * 0.85,
+          width: r * 1.7,
+          height: r * 1.7,
+          rx: r * 0.25,
+          ...paint
+        });
+      case 2:
+        return /* @__PURE__ */ jsx("polygon", {
+          points: `0,${-r} ${r * 0.95},${r * 0.75} ${-r * 0.95},${r * 0.75}`,
+          ...paint
+        });
+      case 3:
+        return /* @__PURE__ */ jsx("polygon", {
+          points: `0,${-r} ${r},0 0,${r} ${-r},0`,
+          ...paint
+        });
+      case 4:
+        return /* @__PURE__ */ jsx("polygon", {
+          points: Array.from({ length: 6 }, (_, i) => {
+            const a = Math.PI / 3 * i;
+            return `${(r * Math.cos(a)).toFixed(2)},${(r * Math.sin(a)).toFixed(2)}`;
+          }).join(" "),
+          ...paint
+        });
+      default:
+        return /* @__PURE__ */ jsx("circle", {
+          r,
+          ...paint
+        });
+    }
+  }
+};
+var dotsRenderer = {
+  name: "dots",
+  mark: ({ node }) => node.shape === null ? /* @__PURE__ */ jsx("circle", {
+    r: node.size * 0.4,
+    fill: "none",
+    stroke: node.color,
+    strokeOpacity: markOpacity(node),
+    strokeWidth: node.size * 0.18
+  }) : /* @__PURE__ */ jsx("circle", {
+    r: node.size / 2,
+    fill: node.color,
+    fillOpacity: markOpacity(node)
+  })
+};
+
+// temp/src/react/FingerprintCanvas.tsx
+import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
+var halfTurn = (degrees) => ((degrees + 90) % 180 + 180) % 180 - 90;
+var cssString = (value) => `"${value.replace(/["\\]/g, "\\$&").replace(/\n/g, "\\a ")}"`;
+function useCarriedMarks(layout) {
+  const committed = useRef({ keyOf: new Map, order: [] });
+  const pending = useRef(committed.current);
+  const marks = useMemo(() => {
+    const previous = committed.current;
+    const keyOf = new Map;
+    const nodeOf = new Map;
+    layout.nodes.forEach((node, i) => {
+      let key;
+      for (const id of node.itemIds) {
+        const candidate = previous.keyOf.get(id);
+        if (candidate !== undefined && !nodeOf.has(candidate)) {
+          key = candidate;
+          break;
+        }
+      }
+      if (key === undefined)
+        key = nodeOf.has(node.id) ? `${node.id}~${i}` : node.id;
+      nodeOf.set(key, node);
+      for (const id of node.itemIds)
+        keyOf.set(id, key);
+    });
+    const kept = previous.order.filter((key) => nodeOf.has(key));
+    const keptSet = new Set(kept);
+    const order = [...kept, ...[...nodeOf.keys()].filter((key) => !keptSet.has(key))];
+    pending.current = { keyOf, order };
+    return order.map((key) => ({ key, node: nodeOf.get(key) }));
+  }, [layout]);
+  useEffect(() => {
+    committed.current = pending.current;
+  }, [marks]);
+  return marks;
+}
+var DIMMED = 0.22;
+var Mark = memo(function Mark2({
+  node,
+  dimensions,
+  arrange,
+  renderer,
+  idPrefix,
+  onChoose
+}) {
+  const attributes = {};
+  dimensions.forEach((id, k) => attributes[`data-d${k}`] = node.categories[id] ?? "");
+  return /* @__PURE__ */ jsx2("g", {
+    className: "fp-mark",
+    "data-category": node.categories[arrange],
+    ...attributes,
+    onClick: onChoose ? () => onChoose(node.categories[arrange]) : undefined,
+    style: {
+      transform: `translate(${node.x}px, ${node.y}px) rotate(${halfTurn(node.rotation)}deg)`
+    },
+    children: renderer.mark({ node, idPrefix })
+  });
+});
+function useWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(null);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver !== "function")
+      return;
+    const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? null));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap"
+};
+function FingerprintCanvas({
+  layout,
+  title,
+  description,
+  renderer = shapesRenderer,
+  ridges,
+  selected = null,
+  onSelect,
+  annotations = [],
+  callouts,
+  unit = "items",
+  motion,
+  className
+}) {
+  const uid = useId().replace(/[^\w-]/g, "");
+  const [ref, width] = useWidth();
+  const placed = useMemo(() => placeCallouts(layout, annotations), [layout, annotations]);
+  const mode = placed.length === 0 ? "none" : (callouts?.placement ?? "auto") === "auto" ? width !== null && width < (callouts?.breakpoint ?? 640) ? "below" : "beside" : callouts.placement;
+  const gutter = mode === "beside" ? CALLOUT_GUTTER : 0;
+  const opacity = ridgeOpacity(layout.itemCount, ridges);
+  const selectedEntry = selected ? layout.legends.find((group) => group.dimensionId === selected.dimensionId)?.entries.find((entry) => entry.id === selected.categoryId) : undefined;
+  const latest = useRef({ selected, onSelect, dimensionId: layout.encoding.arrange });
+  latest.current = { selected, onSelect, dimensionId: layout.encoding.arrange };
+  const choose = useCallback((categoryId) => {
+    const { selected: current, onSelect: select, dimensionId } = latest.current;
+    select?.(current?.dimensionId === dimensionId && current.categoryId === categoryId ? null : { dimensionId, categoryId });
+  }, []);
+  const dimensions = useMemo(() => layout.legends.map((g) => g.dimensionId), [layout.legends]);
+  const marks = useCarriedMarks(layout);
+  const scope = `.fp-${uid} .fp-mark`;
+  const selectedIndex = selected ? dimensions.indexOf(selected.dimensionId) : -1;
+  const glides = layout.nodes.length <= (motion?.glide ?? 800);
+  const fades = layout.nodes.length <= (motion?.fade ?? 400);
+  const css = [
+    `${scope}{transition:${glides ? "transform 700ms cubic-bezier(.2,.7,.2,1)," : ""}opacity 250ms ease${onSelect ? ";cursor:pointer" : ""}}`,
+    fades ? `${scope}>*{transition:fill 600ms ease,fill-opacity 600ms ease,stroke 600ms ease}` : "",
+    `@media (prefers-reduced-motion:reduce){${scope},${scope}>*{transition:none}}`,
+    selected && selectedIndex >= 0 ? `${scope}:not([data-d${selectedIndex}=${cssString(selected.categoryId)}]){opacity:${DIMMED}}` : ""
+  ].join(`
+`);
+  const ridgeLines = useMemo(() => opacity > 0 ? /* @__PURE__ */ jsx2("g", {
+    className: "fp-ridges",
+    fill: "none",
+    stroke: ridges?.color ?? "currentColor",
+    strokeOpacity: opacity,
+    strokeWidth: layout.ridgeSpacing * (ridges?.width ?? 0.12),
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: layout.ridges.map((ridge, i) => /* @__PURE__ */ jsx2("polyline", {
+      points: ridge.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" ")
+    }, i))
+  }) : null, [opacity, ridges?.color, ridges?.width, layout.ridgeSpacing, layout.ridges]);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: ["fp-canvas", `fp-${uid}`, className].filter(Boolean).join(" "),
+    style: { position: "relative" },
+    "data-selection": selected ? `${selected.dimensionId}:${selected.categoryId}` : undefined,
+    children: [
+      /* @__PURE__ */ jsx2("style", {
+        children: css
+      }),
+      /* @__PURE__ */ jsxs("svg", {
+        viewBox: `${-gutter} 0 ${layout.width + gutter * 2} ${layout.height}`,
+        role: "img",
+        "aria-labelledby": `${uid}-title ${uid}-desc`,
+        style: { display: "block", width: "100%", height: "auto", overflow: "visible" },
+        children: [
+          /* @__PURE__ */ jsx2("title", {
+            id: `${uid}-title`,
+            children: title
+          }),
+          /* @__PURE__ */ jsx2("desc", {
+            id: `${uid}-desc`,
+            children: description
+          }),
+          renderer.defs && /* @__PURE__ */ jsx2("defs", {
+            children: renderer.defs({ idPrefix: uid, legends: layout.legends })
+          }),
+          ridgeLines,
+          /* @__PURE__ */ jsx2("g", {
+            className: "fp-marks",
+            children: marks.map(({ key, node }) => /* @__PURE__ */ jsx2(Mark, {
+              node,
+              dimensions,
+              arrange: layout.encoding.arrange,
+              renderer,
+              idPrefix: uid,
+              onChoose: onSelect ? choose : undefined
+            }, key))
+          }),
+          mode === "beside" && placed.map((callout) => {
+            const left = callout.side === "left";
+            const edge = left ? -12 : layout.width + 12;
+            return /* @__PURE__ */ jsxs("g", {
+              className: "fp-callout",
+              "data-side": callout.side,
+              children: [
+                /* @__PURE__ */ jsx2("polyline", {
+                  className: "fp-callout__leader",
+                  points: `${edge},${callout.labelY + 14} ${left ? edge + 10 : edge - 10},${callout.labelY + 14} ${callout.anchor.x},${callout.anchor.y}`,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 1.2
+                }),
+                /* @__PURE__ */ jsx2("circle", {
+                  cx: callout.anchor.x,
+                  cy: callout.anchor.y,
+                  r: 3.5,
+                  fill: "currentColor"
+                }),
+                /* @__PURE__ */ jsx2("foreignObject", {
+                  x: left ? -gutter : layout.width + 16,
+                  y: callout.labelY,
+                  width: gutter - 16,
+                  height: CALLOUT_HEIGHT,
+                  children: /* @__PURE__ */ jsxs("div", {
+                    className: "fp-callout__label",
+                    style: { textAlign: left ? "right" : "left", fontSize: 13, lineHeight: 1.35 },
+                    children: [
+                      /* @__PURE__ */ jsx2("strong", {
+                        style: { display: "block", fontSize: 15 },
+                        children: callout.annotation.title
+                      }),
+                      callout.annotation.body && /* @__PURE__ */ jsx2("span", {
+                        children: callout.annotation.body
+                      })
+                    ]
+                  })
+                })
+              ]
+            }, callout.annotation.id);
+          }),
+          mode === "below" && placed.map((callout) => /* @__PURE__ */ jsxs("g", {
+            className: "fp-callout-marker",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx2("circle", {
+                cx: callout.anchor.x,
+                cy: callout.anchor.y,
+                r: 11,
+                fill: "currentColor"
+              }),
+              /* @__PURE__ */ jsx2("text", {
+                x: callout.anchor.x,
+                y: callout.anchor.y,
+                dy: "0.35em",
+                textAnchor: "middle",
+                fontSize: 13,
+                fontWeight: 700,
+                style: { fill: "var(--fp-callout-ink, Canvas)" },
+                children: callout.number
+              })
+            ]
+          }, callout.annotation.id))
+        ]
+      }),
+      mode === "below" && /* @__PURE__ */ jsx2("ol", {
+        className: "fp-callouts",
+        children: placed.map((callout) => /* @__PURE__ */ jsxs("li", {
+          value: callout.number,
+          children: [
+            /* @__PURE__ */ jsx2("strong", {
+              children: callout.annotation.title
+            }),
+            callout.annotation.body && /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                " ",
+                callout.annotation.body
+              ]
+            })
+          ]
+        }, callout.annotation.id))
+      }),
+      mode === "beside" && /* @__PURE__ */ jsx2("ul", {
+        style: visuallyHidden,
+        children: placed.map((callout) => /* @__PURE__ */ jsxs("li", {
+          children: [
+            callout.annotation.title,
+            ". ",
+            callout.annotation.body
+          ]
+        }, callout.annotation.id))
+      }),
+      /* @__PURE__ */ jsx2("p", {
+        role: "status",
+        "aria-live": "polite",
+        style: visuallyHidden,
+        children: selectedEntry ? `${selectedEntry.label}: ${selectedEntry.count.toLocaleString("en-GB")} ${unit}.` : ""
+      })
+    ]
+  });
+}
+// temp/src/react/FingerprintControls.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var join = (...names) => names.filter(Boolean).join(" ");
+function FingerprintViewSwitch({
+  views,
+  value,
+  onChange,
+  label = "View",
+  className
+}) {
+  return /* @__PURE__ */ jsx3("div", {
+    role: "group",
+    "aria-label": label,
+    className: join("fp-views", className),
+    children: views.map((view) => /* @__PURE__ */ jsx3("button", {
+      type: "button",
+      className: "fp-views__view",
+      "aria-pressed": view.id === value,
+      onClick: () => onChange(view.id),
+      children: view.label
+    }, view.id))
+  });
+}
+var isSelected = (selected, group, id) => selected?.dimensionId === group.dimensionId && selected.categoryId === id;
+function FingerprintLegend({
+  group,
+  renderer = shapesRenderer,
+  selected = null,
+  onSelect,
+  heading = true,
+  counts = true,
+  hideEmpty = false,
+  className
+}) {
+  const uid = useId2().replace(/[^\w-]/g, "");
+  const headingId = `${uid}-heading`;
+  return /* @__PURE__ */ jsxs2("div", {
+    className: join("fp-legend", className),
+    "data-channels": group.channels.join(" "),
+    children: [
+      heading && /* @__PURE__ */ jsx3("p", {
+        id: headingId,
+        className: "fp-legend__heading",
+        children: group.label
+      }),
+      /* @__PURE__ */ jsx3("ul", {
+        "aria-labelledby": heading ? headingId : undefined,
+        "aria-label": heading ? undefined : group.label,
+        style: { listStyle: "none", padding: 0, margin: 0 },
+        children: group.entries.filter((entry) => !hideEmpty || entry.count > 0).map((entry, index) => {
+          const prefix = `${uid}-${index}`;
+          const swatch = /* @__PURE__ */ jsxs2("svg", {
+            viewBox: "-7 -7 14 14",
+            width: "1em",
+            height: "1em",
+            "aria-hidden": "true",
+            className: "fp-legend__swatch",
+            children: [
+              renderer.defs && /* @__PURE__ */ jsx3("defs", {
+                children: renderer.defs({ idPrefix: prefix, legends: [group] })
+              }),
+              renderer.mark({
+                node: {
+                  id: entry.id,
+                  itemIds: [],
+                  categories: { [group.dimensionId]: entry.id },
+                  x: 0,
+                  y: 0,
+                  rotation: 0,
+                  size: 12,
+                  weight: 1,
+                  color: entry.color,
+                  shape: entry.shape,
+                  lightness: entry.lightness
+                },
+                idPrefix: prefix
+              })
+            ]
+          });
+          const text = /* @__PURE__ */ jsxs2(Fragment2, {
+            children: [
+              swatch,
+              /* @__PURE__ */ jsx3("span", {
+                className: "fp-legend__label",
+                children: entry.label
+              }),
+              counts && /* @__PURE__ */ jsx3("span", {
+                className: "fp-legend__count",
+                children: entry.count.toLocaleString("en-GB")
+              })
+            ]
+          });
+          return /* @__PURE__ */ jsx3("li", {
+            className: "fp-legend__entry",
+            children: onSelect ? /* @__PURE__ */ jsx3("button", {
+              type: "button",
+              className: "fp-legend__toggle",
+              "aria-pressed": isSelected(selected, group, entry.id),
+              onClick: () => onSelect(isSelected(selected, group, entry.id) ? null : { dimensionId: group.dimensionId, categoryId: entry.id }),
+              children: text
+            }) : text
+          }, entry.id);
+        })
+      })
+    ]
+  });
+}
+function FingerprintList({
+  group,
+  unit = "items",
+  linkLabel = "Explore",
+  selected = null,
+  onSelect,
+  className
+}) {
+  const total = group.entries.reduce((sum, entry) => sum + entry.count, 0);
+  const share = (count) => total ? `${Math.round(count / total * 100)}%` : "–";
+  const links = group.entries.some((entry) => entry.href);
+  return /* @__PURE__ */ jsxs2("table", {
+    className: join("fp-list", className),
+    children: [
+      /* @__PURE__ */ jsxs2("caption", {
+        children: [
+          group.label,
+          ": ",
+          total.toLocaleString("en-GB"),
+          " ",
+          unit
+        ]
+      }),
+      /* @__PURE__ */ jsx3("thead", {
+        children: /* @__PURE__ */ jsxs2("tr", {
+          children: [
+            /* @__PURE__ */ jsx3("th", {
+              scope: "col",
+              children: group.label
+            }),
+            /* @__PURE__ */ jsx3("th", {
+              scope: "col",
+              children: unit[0].toUpperCase() + unit.slice(1)
+            }),
+            /* @__PURE__ */ jsx3("th", {
+              scope: "col",
+              children: "Share"
+            }),
+            links && /* @__PURE__ */ jsx3("th", {
+              scope: "col",
+              children: /* @__PURE__ */ jsx3("span", {
+                className: "fp-list__hidden",
+                children: "Link"
+              })
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx3("tbody", {
+        children: group.entries.map((entry) => /* @__PURE__ */ jsxs2("tr", {
+          "data-selected": isSelected(selected, group, entry.id) || undefined,
+          children: [
+            /* @__PURE__ */ jsx3("th", {
+              scope: "row",
+              children: onSelect ? /* @__PURE__ */ jsx3("button", {
+                type: "button",
+                className: "fp-list__toggle",
+                "aria-pressed": isSelected(selected, group, entry.id),
+                onClick: () => onSelect(isSelected(selected, group, entry.id) ? null : { dimensionId: group.dimensionId, categoryId: entry.id }),
+                children: entry.label
+              }) : entry.label
+            }),
+            /* @__PURE__ */ jsx3("td", {
+              children: entry.count.toLocaleString("en-GB")
+            }),
+            /* @__PURE__ */ jsx3("td", {
+              children: share(entry.count)
+            }),
+            links && /* @__PURE__ */ jsx3("td", {
+              children: entry.href && /* @__PURE__ */ jsxs2("a", {
+                href: entry.href,
+                children: [
+                  linkLabel,
+                  /* @__PURE__ */ jsxs2("span", {
+                    className: "fp-list__hidden",
+                    children: [
+                      " ",
+                      entry.label
+                    ]
+                  })
+                ]
+              })
+            })
+          ]
+        }, entry.id))
+      })
+    ]
+  });
+}
+// temp/src/react/useFingerprint.ts
+import { useCallback as useCallback2, useMemo as useMemo2, useState as useState2 } from "react";
+function useFingerprint({
+  items,
+  dimensions,
+  views: given,
+  initialViewId,
+  form,
+  seed = "fingerprint",
+  maxMarks,
+  unit = "items"
+}) {
+  const views = useMemo2(() => given ?? dimensions.map((d) => ({ id: d.id, label: d.label, encoding: { arrange: d.id } })), [given, dimensions]);
+  const [viewId, setView] = useState2(initialViewId ?? views[0]?.id ?? "");
+  const [selected, setSelected] = useState2(null);
+  const view = views.find((v) => v.id === viewId) ?? views[0];
+  const resolvedForm = useMemo2(() => ({ ...formFromItems(items, dimensions, seed), ...form }), [items, dimensions, seed, form]);
+  const { layout, error } = useMemo2(() => {
+    try {
+      const layout2 = layoutFingerprint({
+        items,
+        dimensions,
+        encoding: view?.encoding,
+        seed,
+        form: resolvedForm,
+        maxMarks
+      });
+      return { layout: layout2, error: null };
+    } catch (caught) {
+      if (caught instanceof DataError)
+        return { layout: emptyLayout(), error: caught };
+      throw caught;
+    }
+  }, [items, dimensions, view, seed, resolvedForm, maxMarks]);
+  const description = useMemo2(() => error ? error.message : describeLayout(layout, unit), [layout, error, unit]);
+  const setViewId = useCallback2((id) => {
+    setView(id);
+    setSelected(null);
+  }, []);
+  const canvasProps = useMemo2(() => ({ layout, description, selected, onSelect: setSelected, unit }), [layout, description, selected, unit]);
+  const legendProps = useCallback2((group) => ({ group, selected, onSelect: setSelected }), [selected]);
+  const listProps = useCallback2((group) => ({ group, selected, onSelect: setSelected, unit }), [selected, unit]);
+  return {
+    layout,
+    description,
+    error,
+    views,
+    view,
+    viewId: view?.id ?? "",
+    setViewId,
+    selected,
+    setSelected,
+    canvasProps,
+    legendProps,
+    listProps
+  };
+}
+export {
+  useFingerprint,
+  shapesRenderer,
+  markOpacity,
+  dotsRenderer,
+  FingerprintViewSwitch,
+  FingerprintList,
+  FingerprintLegend,
+  FingerprintCanvas
+};
+
+//# debugId=2AE2D4ED63A9036664756E2164756E21
+//# sourceMappingURL=index.js.map