@contractspec/lib.ui-kit-web 3.7.5 → 3.8.0

package/dist/ui/visualization/Visualization.js

@@ -0,0 +1,434 @@
+// @bun
+var __require = import.meta.require;
+
+// ui/map/MapBase.tsx
+import * as React from "react";
+import Map, {
+  NavigationControl,
+  ScaleControl
+} from "react-map-gl/maplibre";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var DEFAULT_STYLE = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+function MapBase(props) {
+  const {
+    initialViewState = { longitude: 2.3522, latitude: 48.8566, zoom: 5 },
+    styleUrl = DEFAULT_STYLE,
+    style,
+    showControls = true,
+    showCssLink = true,
+    onMapRef,
+    children
+  } = props;
+  const mapRef = React.useRef(null);
+  React.useEffect(() => {
+    onMapRef?.(mapRef.current);
+  }, [mapRef.current]);
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      ...style || {}
+    },
+    children: [
+      showCssLink && /* @__PURE__ */ jsxDEV("link", {
+        href: "https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css",
+        rel: "stylesheet"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Map, {
+        ref: mapRef,
+        mapLib: import("maplibre-gl"),
+        initialViewState,
+        style: { width: "100%", height: "100%" },
+        mapStyle: styleUrl,
+        maplibreLogo: false,
+        children: [
+          showControls && /* @__PURE__ */ jsxDEV(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV(ScaleControl, {
+                position: "bottom-left"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(NavigationControl, {
+                position: "bottom-left"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          children
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/map/MapGeoJsonOverlay.tsx
+import { Layer, Source } from "react-map-gl/maplibre";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function MapGeoJsonOverlay(props) {
+  const {
+    id = "geojson-overlay",
+    data,
+    fillColor = "#2563eb",
+    fillOpacity = 0.25,
+    lineColor = "#1e40af",
+    lineWidth = 1.5,
+    lineOpacity = 0.8
+  } = props;
+  const fillLayer = {
+    id: `${id}-fill`,
+    type: "fill",
+    paint: {
+      "fill-color": fillColor,
+      "fill-opacity": fillOpacity
+    }
+  };
+  const outlineLayer = {
+    id: `${id}-outline`,
+    type: "line",
+    paint: {
+      "line-color": lineColor,
+      "line-width": lineWidth,
+      "line-opacity": lineOpacity
+    }
+  };
+  return /* @__PURE__ */ jsxDEV2(Source, {
+    id,
+    type: "geojson",
+    data,
+    children: [
+      /* @__PURE__ */ jsxDEV2(Layer, {
+        ...fillLayer
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(Layer, {
+        ...outlineLayer
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/map/MapMarkers.tsx
+import { Marker } from "react-map-gl/maplibre";
+import { jsxDEV as jsxDEV3, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+"use client";
+function MapMarkers({ points }) {
+  return /* @__PURE__ */ jsxDEV3(Fragment2, {
+    children: points.map((p) => /* @__PURE__ */ jsxDEV3(Marker, {
+      longitude: p.lng,
+      latitude: p.lat,
+      anchor: "bottom",
+      children: /* @__PURE__ */ jsxDEV3("button", {
+        role: p.onClick ? "button" : undefined,
+        tabIndex: p.onClick ? 0 : -1,
+        "aria-label": p.ariaLabel || "marker",
+        onClick: p.onClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            p.onClick?.();
+          }
+        },
+        style: {
+          width: p.size ?? 14,
+          height: p.size ?? 14,
+          background: p.color ?? "#2563eb",
+          border: "2px solid white",
+          borderRadius: 9999,
+          boxShadow: "0 1px 3px rgba(0,0,0,0.35)",
+          cursor: p.onClick ? "pointer" : "default"
+        }
+      }, undefined, false, undefined, this)
+    }, p.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
+// ui/visualization/Visualization.support.tsx
+import {
+  formatVisualizationValue
+} from "@contractspec/lib.presentation-runtime-core";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as echarts from "echarts/core";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function MetricVisualization({
+  className,
+  model
+}) {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: cn("space-y-2", className),
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "text-muted-foreground text-sm",
+        children: model.metric?.label ?? model.title
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "font-semibold text-3xl",
+        children: formatVisualizationValue(model.metric?.value, model.metric?.format)
+      }, undefined, false, undefined, this),
+      model.metric?.comparisonValue != null ? /* @__PURE__ */ jsxDEV4("div", {
+        className: "text-muted-foreground text-sm",
+        children: [
+          "Comparison:",
+          " ",
+          formatVisualizationValue(model.metric.comparisonValue, model.metric.format)
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV4(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function TableAlternative({
+  model
+}) {
+  if (!model.table.columns.length || !model.table.rows.length)
+    return null;
+  return /* @__PURE__ */ jsxDEV4("details", {
+    className: "rounded-md border p-3 text-sm",
+    children: [
+      /* @__PURE__ */ jsxDEV4("summary", {
+        className: "cursor-pointer font-medium",
+        children: "Data summary"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "mt-3 overflow-x-auto",
+        children: /* @__PURE__ */ jsxDEV4("table", {
+          className: "w-full text-left",
+          children: [
+            /* @__PURE__ */ jsxDEV4("thead", {
+              children: /* @__PURE__ */ jsxDEV4("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV4("th", {
+                  className: "px-2 py-1 font-medium",
+                  children: column.label
+                }, column.key, false, undefined, this))
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("tbody", {
+              children: model.table.rows.slice(0, 8).map((row, index) => /* @__PURE__ */ jsxDEV4("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV4("td", {
+                  className: "px-2 py-1",
+                  children: String(row[column.key] ?? "\u2014")
+                }, column.key, false, undefined, this))
+              }, `summary-row-${index}`, false, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function FallbackVisualization({
+  className,
+  model,
+  reason
+}) {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: cn("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV4("p", {
+        className: "text-muted-foreground text-sm",
+        children: reason
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function shouldRenderEChart(model) {
+  if (model.kind === "metric")
+    return false;
+  if (model.kind === "geo" && model.geo?.mode === "slippy-map")
+    return false;
+  if (model.kind === "geo" && model.geo?.geoJson?.type === "url")
+    return false;
+  return true;
+}
+function registerGeoMap(model) {
+  if (model.kind !== "geo" || model.geo?.geoJson?.type !== "inline")
+    return;
+  registerInlineMap(model.geo.geoJson);
+}
+function registerInlineMap(geoJson) {
+  if (geoJson.type !== "inline")
+    return;
+  echarts.registerMap("contractspec-visualization-geo", geoJson.data);
+}
+
+// ui/visually-hidden.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var srOnlyStyle = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap"
+};
+function VisuallyHidden({
+  as = "span",
+  style,
+  children,
+  ref,
+  ...props
+}) {
+  const Comp = as;
+  return /* @__PURE__ */ jsxDEV5(Comp, {
+    ref,
+    style: { ...srOnlyStyle, ...style },
+    ...props,
+    children
+  }, undefined, false, undefined, this);
+}
+// ui/visualization/Visualization.tsx
+import {
+  buildVisualizationEChartsOption
+} from "@contractspec/lib.presentation-runtime-core";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import {
+  BarChart,
+  FunnelChart,
+  HeatmapChart,
+  LineChart,
+  MapChart,
+  PieChart,
+  ScatterChart
+} from "echarts/charts";
+import {
+  AriaComponent,
+  GeoComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  VisualMapComponent
+} from "echarts/components";
+import * as echarts2 from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import * as React2 from "react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+echarts2.use([
+  AriaComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  VisualMapComponent,
+  GeoComponent,
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  HeatmapChart,
+  FunnelChart,
+  MapChart
+]);
+function Visualization({
+  model,
+  className,
+  height = 280,
+  onDataPointPress
+}) {
+  const chartRef = React2.useRef(null);
+  const option = React2.useMemo(() => buildVisualizationEChartsOption(model), [model]);
+  React2.useEffect(() => {
+    if (!shouldRenderEChart(model) || !chartRef.current)
+      return;
+    registerGeoMap(model);
+    const chart = echarts2.init(chartRef.current, undefined, {
+      renderer: "canvas"
+    });
+    chart.setOption(option);
+    if (onDataPointPress) {
+      chart.on("click", onDataPointPress);
+    }
+    const observer = new ResizeObserver(() => chart.resize());
+    observer.observe(chartRef.current);
+    return () => {
+      observer.disconnect();
+      if (onDataPointPress) {
+        chart.off("click", onDataPointPress);
+      }
+      chart.dispose();
+    };
+  }, [model, onDataPointPress, option]);
+  if (model.kind === "metric") {
+    return /* @__PURE__ */ jsxDEV6(MetricVisualization, {
+      className,
+      model
+    }, undefined, false, undefined, this);
+  }
+  if (model.kind === "geo" && model.geo?.mode === "slippy-map") {
+    return /* @__PURE__ */ jsxDEV6(MapVisualization, {
+      className,
+      height,
+      model
+    }, undefined, false, undefined, this);
+  }
+  if (model.kind === "geo" && model.geo?.geoJson?.type === "url") {
+    return /* @__PURE__ */ jsxDEV6(FallbackVisualization, {
+      className,
+      model,
+      reason: "Geo URL sources currently fall back to the summary table."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: cn2("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV6(VisuallyHidden, {
+        children: model.summary
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        ref: chartRef,
+        "aria-label": model.summary,
+        className: "w-full rounded-md",
+        style: { height }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MapVisualization({
+  className,
+  height,
+  model
+}) {
+  const markers = model.series.flatMap((series) => series.points.filter((point) => point.latitude != null && point.longitude != null).map((point) => ({
+    id: point.id,
+    lat: point.latitude,
+    lng: point.longitude,
+    ariaLabel: point.name
+  })));
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: cn2("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        style: { height },
+        children: /* @__PURE__ */ jsxDEV6(MapBase, {
+          children: [
+            markers.length > 0 ? /* @__PURE__ */ jsxDEV6(MapMarkers, {
+              points: markers
+            }, undefined, false, undefined, this) : null,
+            model.geo?.geoJson?.type === "inline" ? /* @__PURE__ */ jsxDEV6(MapGeoJsonOverlay, {
+              data: model.geo.geoJson.data
+            }, undefined, false, undefined, this) : null
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  Visualization
+};

package/dist/ui/visualization/Visualization.support.d.ts

@@ -0,0 +1,15 @@
+import { type ContractVisualizationRenderModel } from '@contractspec/lib.presentation-runtime-core';
+export declare function MetricVisualization({ className, model, }: {
+    className?: string;
+    model: ContractVisualizationRenderModel;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableAlternative({ model, }: {
+    model: ContractVisualizationRenderModel;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function FallbackVisualization({ className, model, reason, }: {
+    className?: string;
+    model: ContractVisualizationRenderModel;
+    reason: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function shouldRenderEChart(model: ContractVisualizationRenderModel): boolean;
+export declare function registerGeoMap(model: ContractVisualizationRenderModel): void;

package/dist/ui/visualization/Visualization.support.js

@@ -0,0 +1,123 @@
+// @bun
+var __require = import.meta.require;
+
+// ui/visualization/Visualization.support.tsx
+import {
+  formatVisualizationValue
+} from "@contractspec/lib.presentation-runtime-core";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as echarts from "echarts/core";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function MetricVisualization({
+  className,
+  model
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: cn("space-y-2", className),
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-muted-foreground text-sm",
+        children: model.metric?.label ?? model.title
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "font-semibold text-3xl",
+        children: formatVisualizationValue(model.metric?.value, model.metric?.format)
+      }, undefined, false, undefined, this),
+      model.metric?.comparisonValue != null ? /* @__PURE__ */ jsxDEV("div", {
+        className: "text-muted-foreground text-sm",
+        children: [
+          "Comparison:",
+          " ",
+          formatVisualizationValue(model.metric.comparisonValue, model.metric.format)
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function TableAlternative({
+  model
+}) {
+  if (!model.table.columns.length || !model.table.rows.length)
+    return null;
+  return /* @__PURE__ */ jsxDEV("details", {
+    className: "rounded-md border p-3 text-sm",
+    children: [
+      /* @__PURE__ */ jsxDEV("summary", {
+        className: "cursor-pointer font-medium",
+        children: "Data summary"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mt-3 overflow-x-auto",
+        children: /* @__PURE__ */ jsxDEV("table", {
+          className: "w-full text-left",
+          children: [
+            /* @__PURE__ */ jsxDEV("thead", {
+              children: /* @__PURE__ */ jsxDEV("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV("th", {
+                  className: "px-2 py-1 font-medium",
+                  children: column.label
+                }, column.key, false, undefined, this))
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("tbody", {
+              children: model.table.rows.slice(0, 8).map((row, index) => /* @__PURE__ */ jsxDEV("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV("td", {
+                  className: "px-2 py-1",
+                  children: String(row[column.key] ?? "\u2014")
+                }, column.key, false, undefined, this))
+              }, `summary-row-${index}`, false, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function FallbackVisualization({
+  className,
+  model,
+  reason
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: cn("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV("p", {
+        className: "text-muted-foreground text-sm",
+        children: reason
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function shouldRenderEChart(model) {
+  if (model.kind === "metric")
+    return false;
+  if (model.kind === "geo" && model.geo?.mode === "slippy-map")
+    return false;
+  if (model.kind === "geo" && model.geo?.geoJson?.type === "url")
+    return false;
+  return true;
+}
+function registerGeoMap(model) {
+  if (model.kind !== "geo" || model.geo?.geoJson?.type !== "inline")
+    return;
+  registerInlineMap(model.geo.geoJson);
+}
+function registerInlineMap(geoJson) {
+  if (geoJson.type !== "inline")
+    return;
+  echarts.registerMap("contractspec-visualization-geo", geoJson.data);
+}
+export {
+  shouldRenderEChart,
+  registerGeoMap,
+  TableAlternative,
+  MetricVisualization,
+  FallbackVisualization
+};

package/dist/ui/visualization/index.d.ts

@@ -0,0 +1 @@
+export { Visualization, type VisualizationInteractionHandler, type VisualizationProps, } from './Visualization';

package/dist/ui/visualization/index.js

@@ -0,0 +1,5 @@
+// @bun
+var __require = import.meta.require;
+export {
+  Visualization
+};