@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/choropleth-map/choropleth-map.js

@@ -0,0 +1,373 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const DEFAULT_LABELS = {
+  region: "Choropleth map"
+};
+const DEFAULT_SCALE = ["#f1f5f9", "#1d4ed8"];
+const DEFAULT_MISSING = "#e5e7eb";
+const ChoroplethContext = createContext(null);
+function useChoroplethContext() {
+  const ctx = useContext(ChoroplethContext);
+  if (!ctx) {
+    throw new Error("ChoroplethMap subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function projectEquirectangular(position, width, height) {
+  const [lng, lat] = position;
+  const x = (lng + 180) / 360 * width;
+  const y = (90 - lat) / 180 * height;
+  return { x, y };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function parseHex(color) {
+  const match = /^#([\da-f]{6})$/i.exec(color.trim());
+  if (!match) return void 0;
+  const hex = match[1] ?? "";
+  return [
+    Number.parseInt(hex.slice(0, 2), 16),
+    Number.parseInt(hex.slice(2, 4), 16),
+    Number.parseInt(hex.slice(4, 6), 16)
+  ];
+}
+function toHex(channel) {
+  return clamp(Math.round(channel), 0, 255).toString(16).padStart(2, "0");
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function interpolateColor(stops, t) {
+  if (stops.length === 0) return "#000000";
+  if (stops.length === 1) return stops[0] ?? "#000000";
+  const segments = stops.length - 1;
+  const scaledT = clamp(t, 0, 1) * segments;
+  const segmentIndex = Math.min(Math.floor(scaledT), segments - 1);
+  const localT = scaledT - segmentIndex;
+  const lower = stops[segmentIndex];
+  const upper = stops[segmentIndex + 1];
+  if (!lower || !upper) return stops[0] ?? "#000000";
+  const lowerRgb = parseHex(lower);
+  const upperRgb = parseHex(upper);
+  if (!lowerRgb || !upperRgb) return lower;
+  const [lr, lg, lb] = lowerRgb;
+  const [ur, ug, ub] = upperRgb;
+  const r = lerp(lr, ur, localT);
+  const g = lerp(lg, ug, localT);
+  const b = lerp(lb, ub, localT);
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function computeDomain(values) {
+  const first = values[0];
+  if (first === void 0) return [0, 1];
+  const min = values.reduce(
+    (accumulator, value) => Math.min(accumulator, value),
+    first
+  );
+  const max = values.reduce(
+    (accumulator, value) => Math.max(accumulator, value),
+    first
+  );
+  if (min === max) return [min, max + 1];
+  return [min, max];
+}
+function regionPath(region) {
+  return region.coordinates.map((coord, index) => {
+    const projected = projectEquirectangular(
+      coord,
+      VIEWBOX_WIDTH,
+      VIEWBOX_HEIGHT
+    );
+    return `${index === 0 ? "M" : "L"}${projected.x.toString()},${projected.y.toString()}`;
+  }).join(" ");
+}
+function RegionPath({
+  active,
+  onSelect,
+  region,
+  selectedId,
+  setHoverFn
+}) {
+  const { colorFor, valueFor } = useChoroplethContext();
+  const value = valueFor(region.id) ?? void 0;
+  const fill = colorFor(value);
+  const handleEnter = () => {
+    setHoverFn({ id: region.id, value });
+  };
+  const handleLeave = () => {
+    setHoverFn();
+  };
+  const handleSelect = () => {
+    onSelect(region);
+  };
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      "aria-label": `${region.name}${value === void 0 ? " no data" : ` ${value.toString()}`}`,
+      className: cn(
+        "cursor-pointer outline-none transition-[opacity,filter]",
+        active ? "opacity-100" : "opacity-90 hover:opacity-100",
+        selectedId === region.id ? "stroke-foreground" : "stroke-background"
+      ),
+      d: regionPath(region) + " Z",
+      "data-region-id": region.id,
+      "data-selected": selectedId === region.id ? "true" : void 0,
+      "data-value": value,
+      fill,
+      onBlur: handleLeave,
+      onClick: handleSelect,
+      onFocus: handleEnter,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      strokeWidth: selectedId === region.id ? 2 : 0.75,
+      tabIndex: 0
+    }
+  );
+}
+const ChoroplethTooltip = forwardRef(({ children, className, ...rest }, ref) => {
+  const { hover, regionByid } = useChoroplethContext();
+  if (!hover) return null;
+  const region = regionByid.get(hover.id);
+  if (!region) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute left-3 top-3 z-10 max-w-xs rounded-md border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md",
+        className
+      ),
+      "data-tooltip-region-id": region.id,
+      ref,
+      role: "status",
+      ...rest,
+      children: children ? children({ region, value: hover.value }) : /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: region.name }),
+        hover.value === void 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " \xB7 no data" }) : /* @__PURE__ */ jsxs("span", { children: [
+          " \xB7 ",
+          hover.value.toLocaleString()
+        ] })
+      ] })
+    }
+  );
+});
+ChoroplethTooltip.displayName = "ChoroplethTooltip";
+const ChoroplethLegend = forwardRef(({ className, title, ...rest }, ref) => {
+  const { legend } = useChoroplethContext();
+  if (!legend) return null;
+  const stops = legend.scale.join(", ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute bottom-3 right-3 z-10 flex flex-col gap-1 rounded-md border bg-background/95 px-2 py-1 text-[11px] text-foreground shadow-sm backdrop-blur",
+        className
+      ),
+      "data-legend": true,
+      ref,
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx("span", { className: "font-medium uppercase tracking-wide text-muted-foreground", children: title }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "h-2 w-32 rounded-full",
+            style: { background: `linear-gradient(to right, ${stops})` }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: legend.domain[0].toLocaleString() }),
+          /* @__PURE__ */ jsx("span", { children: legend.domain[1].toLocaleString() })
+        ] })
+      ]
+    }
+  );
+});
+ChoroplethLegend.displayName = "ChoroplethLegend";
+function DataSummary({ data, regions, titleId }) {
+  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": titleId, className: "sr-only", role: "region", children: [
+    /* @__PURE__ */ jsx("h3", { id: titleId, children: "Choropleth data summary" }),
+    /* @__PURE__ */ jsxs("table", { children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", children: "Region" }),
+        /* @__PURE__ */ jsx("th", { scope: "col", children: "Value" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: regions.map((region) => {
+        const value = data[region.id];
+        return /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: region.name }),
+          /* @__PURE__ */ jsx("td", { children: value === void 0 ? "no data" : value.toLocaleString() })
+        ] }, region.id);
+      }) })
+    ] })
+  ] });
+}
+function bucketChildren(children) {
+  const list = Array.isArray(children) ? children : [children];
+  return list.reduce(
+    (accumulator, child) => {
+      const name = displayName(child);
+      if (name === ChoroplethLegend.displayName) accumulator.legend = child;
+      else if (name === ChoroplethTooltip.displayName)
+        accumulator.tooltip = child;
+      return accumulator;
+    },
+    { legend: null, tooltip: null }
+  );
+}
+function displayName(child) {
+  if (typeof child !== "object" || child === null) return void 0;
+  if (!("type" in child)) return void 0;
+  const type = child.type;
+  if (typeof type !== "object" && typeof type !== "function") return void 0;
+  const name = type.displayName;
+  return typeof name === "string" ? name : void 0;
+}
+function useChoroplethState(arguments_) {
+  const { colorScale, data, domain, missingColor, regions } = arguments_;
+  const regionByid = useMemo(
+    () => new Map(
+      regions.map((region) => [region.id, region])
+    ),
+    [regions]
+  );
+  const valueFor = useCallback(
+    (id) => data[id] ?? null,
+    [data]
+  );
+  const colorFor = useCallback(
+    (value) => {
+      if (value === void 0) return missingColor;
+      const [min, max] = domain;
+      const span = max - min;
+      const t = span === 0 ? 0.5 : (value - min) / span;
+      return interpolateColor(colorScale, t);
+    },
+    [colorScale, domain, missingColor]
+  );
+  const [hover, setHover] = useState();
+  return useMemo(
+    () => ({
+      colorFor,
+      hover,
+      legend: { domain, scale: colorScale },
+      regionByid,
+      setHover,
+      valueFor
+    }),
+    [colorFor, colorScale, domain, hover, regionByid, valueFor]
+  );
+}
+function RegionsLayer({
+  onSelect,
+  regions,
+  selectedId,
+  setHoverFn
+}) {
+  return /* @__PURE__ */ jsx("g", { children: regions.map((region) => /* @__PURE__ */ jsx(
+    RegionPath,
+    {
+      active: selectedId === region.id,
+      onSelect,
+      region,
+      selectedId,
+      setHoverFn
+    },
+    region.id
+  )) });
+}
+const ChoroplethMap = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      colorScale = DEFAULT_SCALE,
+      data,
+      domain: domainProperty,
+      labels,
+      missingColor = DEFAULT_MISSING,
+      onSelectRegion,
+      regions,
+      ...rest
+    } = props;
+    const titleId = useId();
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const domain = useMemo(
+      () => domainProperty ?? computeDomain(Object.values(data)),
+      [data, domainProperty]
+    );
+    const ctx = useChoroplethState({
+      colorScale,
+      data,
+      domain,
+      missingColor,
+      regions
+    });
+    const buckets = useMemo(() => bucketChildren(children), [children]);
+    const [selectedId, setSelectedId] = useState();
+    const handleSelect = useCallback(
+      (region) => {
+        setSelectedId(region.id);
+        onSelectRegion?.(region);
+      },
+      [onSelectRegion]
+    );
+    return /* @__PURE__ */ jsx(ChoroplethContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "block h-full w-full",
+              preserveAspectRatio: "xMidYMid meet",
+              viewBox: `0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`,
+              children: /* @__PURE__ */ jsx(
+                RegionsLayer,
+                {
+                  onSelect: handleSelect,
+                  regions,
+                  selectedId,
+                  setHoverFn: ctx.setHover
+                }
+              )
+            }
+          ),
+          buckets.tooltip,
+          buckets.legend,
+          /* @__PURE__ */ jsx(DataSummary, { data, regions, titleId })
+        ]
+      }
+    ) });
+  }
+);
+ChoroplethMap.displayName = "ChoroplethMap";
+export {
+  ChoroplethLegend,
+  ChoroplethMap,
+  ChoroplethTooltip
+};

package/dist/components/choropleth-map/index.js

@@ -0,0 +1,10 @@
+import {
+  ChoroplethLegend,
+  ChoroplethMap,
+  ChoroplethTooltip
+} from "./choropleth-map";
+export {
+  ChoroplethLegend,
+  ChoroplethMap,
+  ChoroplethTooltip
+};