exploreda 0.0.6 → 0.1.0

package/dist/chunk-PP4VCONW.js

@@ -0,0 +1,739 @@
+import { FieldInspector } from './chunk-LBTZVERO.js';
+import { DEFAULT_CHART_SETTINGS } from './chunk-CJQQFNEY.js';
+import { FieldMetadata, CalculatedFieldBadge } from './chunk-NDF5LCST.js';
+import { useDataLayer, emptyFieldProfile, buildFieldProfile, ActionTooltip, Button, categoryLabel, getChartSummary, cn, DISTRIBUTION_BINS, binValues, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-JNO7OXCC.js';
+import { getChartDefinition } from './chunk-TLLRW6S3.js';
+import { Info, Download, Settings2, ArrowUpDown, ArrowUp, ArrowDown, BarChart, ScatterChart, Table2 } from 'lucide-react';
+import { useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { toast } from 'sonner';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/hooks/useCreateCharts.ts
+function useCreateCharts() {
+  const profiles = useDataLayer((s) => s.fieldProfiles);
+  const charts = useDataLayer((s) => s.charts);
+  const addChart = useDataLayer((s) => s.addChart);
+  const createChart = (type, field, initialLayout) => {
+    const layout = initialLayout ?? {
+      x: 0,
+      y: Math.max(0, ...charts.map((chart) => chart.layout.y + chart.layout.h)),
+      w: 6,
+      h: 4
+    };
+    const definition = getChartDefinition(type);
+    if (!definition) {
+      throw new Error(`Chart type ${type} not registered`);
+    }
+    const numeric = profiles.filter((profile) => profile.dataType === "numeric").map((profile) => profile.name);
+    const categories = profiles.filter((profile) => profile.dataType !== "numeric").map((profile) => profile.name);
+    const selectedField = field || (type === "row" ? categories[0] : numeric[0]) || profiles[0]?.name || "";
+    const settings = definition.createDefaultSettings(layout, selectedField);
+    if (settings.type === "scatter" || settings.type === "3d-scatter") {
+      settings.xField = numeric[0] || "__ID";
+      settings.yField = field || numeric[1] || numeric[0] || "__ID";
+      settings.xAxisLabel = "";
+      settings.yAxisLabel = "";
+      if (settings.type === "3d-scatter")
+        settings.zField = numeric[2] || numeric[0] || "__ID";
+    }
+    if (settings.type === "line") {
+      settings.xField = "__ID";
+      settings.seriesField = selectedField ? [selectedField] : [];
+      settings.xAxisLabel = "";
+      settings.yAxisLabel = "";
+    }
+    if (settings.type === "data-table")
+      settings.columns = profiles.slice(0, 8).map((profile) => ({ id: profile.name, field: profile.name }));
+    if (settings.type === "pivot") {
+      settings.rowFields = categories.slice(0, 1);
+      settings.columnField = categories[1] || "";
+      settings.valueFields = selectedField ? [{ field: selectedField, aggregation: "count" }] : [];
+    }
+    if (settings.type === "color-legend")
+      settings.fields = categories.slice(0, 1);
+    if (settings.type === "bar" || settings.type === "row") {
+      settings.xAxisLabel = settings.type === "row" ? "Records" : "";
+      settings.yAxisLabel = settings.type === "bar" ? "Records" : "";
+    }
+    if (settings.type === "boxplot") settings.yAxisLabel = "";
+    settings.title = "";
+    addChart(settings);
+  };
+  return { createChart };
+}
+function ChartActions({ columnName, dataType }) {
+  const { createChart } = useCreateCharts();
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+    dataType === "categorical" && /* @__PURE__ */ jsx(ActionTooltip, { content: "Create row chart", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-6 w-6",
+        "aria-label": `Create row chart for ${columnName}`,
+        onClick: () => createChart("row", columnName),
+        children: /* @__PURE__ */ jsx(BarChart, { className: "h-4 w-4 rotate-90" })
+      }
+    ) }),
+    dataType === "numeric" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ActionTooltip, { content: "Create bar chart", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6",
+          "aria-label": `Create bar chart for ${columnName}`,
+          onClick: () => createChart("bar", columnName),
+          children: /* @__PURE__ */ jsx(BarChart, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ActionTooltip, { content: "Create scatter plot", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6",
+          "aria-label": `Create scatter chart for ${columnName}`,
+          onClick: () => createChart("scatter", columnName),
+          children: /* @__PURE__ */ jsx(ScatterChart, { className: "h-4 w-4" })
+        }
+      ) })
+    ] }),
+    (dataType === "categorical" || dataType === "datetime") && /* @__PURE__ */ jsx(ActionTooltip, { content: "Create pivot table", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-6 w-6",
+        "aria-label": `Create pivot table for ${columnName}`,
+        onClick: () => createChart("pivot", columnName),
+        children: /* @__PURE__ */ jsx(Table2, { className: "h-4 w-4" })
+      }
+    ) })
+  ] });
+}
+var WIDTH = 96;
+var HEIGHT = 20;
+var SHARE_SEGMENTS = 5;
+var OTHER_LABEL = "Other values";
+var percent = (share) => share > 0 && share < 0.01 ? "<1%" : `${Math.round(share * 100)}%`;
+function SparkDetails({
+  bars,
+  total,
+  fieldLabel,
+  locate,
+  children
+}) {
+  const [active, setActive] = useState();
+  const bar = active === void 0 ? void 0 : bars[active];
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    if (box.width <= 0) return;
+    const fraction = (event.clientX - box.left) / box.width;
+    const index = locate(Math.min(0.9999, Math.max(0, fraction)));
+    setActive(index >= 0 && index < bars.length ? index : void 0);
+  };
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { open: bar !== void 0, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "eda-summary-spark-hit",
+        "aria-hidden": "true",
+        onPointerMove,
+        onPointerLeave: () => setActive(void 0),
+        children: children(active)
+      }
+    ) }),
+    bar && /* @__PURE__ */ jsxs(TooltipContent, { side: "top", collisionPadding: 12, children: [
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: fieldLabel }),
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: bar.label }),
+      /* @__PURE__ */ jsxs("p", { className: "tabular-nums", children: [
+        bar.count.toLocaleString(),
+        " ",
+        bar.count === 1 ? "row" : "rows",
+        total > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " ",
+          "\xB7 ",
+          percent(bar.count / total)
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function Histogram({ bars, total, fieldLabel }) {
+  const peak = Math.max(...bars.map((bar) => bar.count), 1);
+  const step = WIDTH / Math.max(1, bars.length);
+  const gap = bars.length > 1 ? Math.min(1, step * 0.2) : 0;
+  return /* @__PURE__ */ jsx(
+    SparkDetails,
+    {
+      bars,
+      total,
+      fieldLabel,
+      locate: (fraction) => Math.floor(fraction * bars.length),
+      children: (active) => /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "eda-summary-spark",
+          viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+          preserveAspectRatio: "none",
+          focusable: "false",
+          children: [
+            active !== void 0 && /* @__PURE__ */ jsx(
+              "rect",
+              {
+                className: "eda-summary-spark-focus",
+                x: active * step,
+                y: 0,
+                width: step,
+                height: HEIGHT
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                className: "eda-summary-spark-base",
+                x1: 0,
+                x2: WIDTH,
+                y1: HEIGHT - 0.5,
+                y2: HEIGHT - 0.5
+              }
+            ),
+            bars.map(({ count }, index) => {
+              if (count === 0) return null;
+              const height = Math.max(1.5, count / peak * (HEIGHT - 1));
+              return /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  className: "eda-summary-spark-bar",
+                  "data-active": index === active || void 0,
+                  x: index * step + gap / 2,
+                  y: HEIGHT - height,
+                  width: Math.max(0.5, step - gap),
+                  height
+                },
+                index
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+function ShareBar({ bars, total, fieldLabel }) {
+  const shares = bars.map((bar) => total > 0 ? bar.count / total : 0);
+  const starts = shares.map(
+    (_, index) => shares.slice(0, index).reduce((sum, share) => sum + share, 0)
+  );
+  return /* @__PURE__ */ jsx(
+    SparkDetails,
+    {
+      bars,
+      total,
+      fieldLabel,
+      locate: (fraction) => starts.findIndex(
+        (start, index) => fraction >= start && fraction < start + shares[index]
+      ),
+      children: (active) => /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "eda-summary-spark",
+          viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+          preserveAspectRatio: "none",
+          focusable: "false",
+          children: bars.map((bar, index) => /* @__PURE__ */ jsx(
+            "rect",
+            {
+              className: bar.muted ? "eda-summary-share-rest" : "eda-summary-share",
+              "data-rank": index,
+              "data-active": index === active || void 0,
+              x: starts[index] * WIDTH,
+              y: 5,
+              width: Math.max(0.5, shares[index] * WIDTH - 1),
+              height: HEIGHT - 10
+            },
+            index
+          ))
+        }
+      )
+    }
+  );
+}
+function dateBins(profile) {
+  const times = [];
+  let first;
+  let last;
+  for (const { value, count } of profile.categories?.distribution ?? []) {
+    const time = Date.parse(String(value));
+    if (!Number.isFinite(time)) continue;
+    for (let i = 0; i < count; i += 1) times.push(time);
+    if (!first || time < first.time) first = { time, value };
+    if (!last || time > last.time) last = { time, value };
+  }
+  if (!first || !last) return void 0;
+  times.sort((a, b) => a - b);
+  return {
+    first: first.value,
+    last: last.value,
+    firstTime: first.time,
+    lastTime: last.time,
+    bins: binValues(times, first.time, last.time)
+  };
+}
+function labelBins(bins, min, max, label) {
+  const oneBinPerValue = bins.length === 1 || bins.length < DISTRIBUTION_BINS && Number.isInteger(min) && bins.length === max - min + 1;
+  const width2 = (max - min) / Math.max(1, bins.length);
+  return bins.map((count, index) => {
+    if (oneBinPerValue) return { label: label(min + index), count };
+    const start = label(min + index * width2);
+    const end = label(
+      index === bins.length - 1 ? max : min + (index + 1) * width2
+    );
+    return { label: start === end ? start : `${start} \u2013 ${end}`, count };
+  });
+}
+var isoDate = (time) => new Date(time).toISOString().slice(0, 10);
+function summarizeField(profile, format, fieldLabel = profile.name) {
+  const present = profile.totalCount - profile.nullCount - (profile.excludedCount ?? 0);
+  if (present <= 0) return void 0;
+  if (profile.statistics) {
+    const { min, max, median, bins = [] } = profile.statistics;
+    const low = format(min);
+    const high = format(max);
+    const bars2 = labelBins(bins, min, max, format);
+    const graphic = /* @__PURE__ */ jsx(Histogram, { bars: bars2, total: present, fieldLabel });
+    if (min === max) {
+      return { graphic, bars: bars2, low, description: `Every value is ${low}` };
+    }
+    return {
+      graphic,
+      bars: bars2,
+      low,
+      high,
+      statLabel: "median",
+      stat: format(median),
+      description: `Range ${low} to ${high}, median ${format(median)}`
+    };
+  }
+  if (profile.dataType === "datetime") {
+    const dates = dateBins(profile);
+    if (dates) {
+      const first = format(dates.first);
+      const last = format(dates.last);
+      const bars2 = labelBins(
+        dates.bins,
+        dates.firstTime,
+        dates.lastTime,
+        isoDate
+      );
+      return {
+        graphic: /* @__PURE__ */ jsx(Histogram, { bars: bars2, total: present, fieldLabel }),
+        bars: bars2,
+        low: first,
+        high: first === last ? void 0 : last,
+        description: `Dates from ${first} to ${last}`
+      };
+    }
+  }
+  const top = profile.categories?.topValues ?? [];
+  if (!top[0]) return void 0;
+  if (profile.uniqueCount === present && present > 1) {
+    const bars2 = [
+      { label: "Each value appears once", count: present, muted: true }
+    ];
+    return {
+      graphic: /* @__PURE__ */ jsx(ShareBar, { bars: bars2, total: present, fieldLabel }),
+      bars: bars2,
+      label: "All values unique",
+      description: `Every value is unique, for example ${categoryLabel(top[0].value)}`
+    };
+  }
+  const bars = top.slice(0, SHARE_SEGMENTS).map(({ value, count }) => ({ label: categoryLabel(value), count }));
+  const rest = present - bars.reduce((sum, bar) => sum + bar.count, 0);
+  if (rest > 0) bars.push({ label: OTHER_LABEL, count: rest, muted: true });
+  const leader = categoryLabel(top[0].value);
+  const share = percent(top[0].count / present);
+  return {
+    graphic: /* @__PURE__ */ jsx(ShareBar, { bars, total: present, fieldLabel }),
+    bars,
+    label: leader,
+    statLabel: "share",
+    stat: share,
+    description: `Most common value ${leader}, ${share} of rows with a value`
+  };
+}
+var MAX_TRACK = 16;
+var width = (values) => Math.min(
+  MAX_TRACK,
+  Math.max(0, ...values.map((value) => value?.length ?? 0))
+);
+function readingColumns(summaries) {
+  const present = summaries.filter(
+    (summary) => summary !== void 0
+  );
+  const measuredLow = width(present.map((summary) => summary.low));
+  const high = width(present.map((summary) => summary.high));
+  const label = width(present.map((summary) => summary.label));
+  const low = measuredLow === 0 && high === 0 ? label : measuredLow;
+  return {
+    "--eda-summary-low": `${low}ch`,
+    "--eda-summary-high": `${high}ch`,
+    "--eda-summary-stat-label": `${width(present.map((summary) => summary.statLabel))}ch`,
+    "--eda-summary-stat": `${width(present.map((summary) => summary.stat))}ch`
+  };
+}
+function SortHeader({
+  column,
+  label,
+  sort,
+  onSort,
+  className
+}) {
+  const active = sort?.column === column;
+  const Icon = !active ? ArrowUpDown : sort.direction === "asc" ? ArrowUp : ArrowDown;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      scope: "col",
+      className,
+      "aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : "none",
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "eda-summary-sort",
+          "data-active": active || void 0,
+          onClick: () => onSort(column),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: label }),
+            /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+          ]
+        }
+      )
+    }
+  );
+}
+function CompactSummaryTable({
+  data,
+  onSort,
+  sort,
+  settings
+}) {
+  const formatValue = useDataLayer((state) => state.formatFieldValue);
+  const getFieldLabel = useDataLayer((state) => state.getFieldLabel);
+  const label = getFieldLabel ?? ((field) => field);
+  const rows = data.map((profile) => ({
+    profile,
+    summary: summarizeField(
+      profile,
+      (value) => formatValue(profile.name, value),
+      label(profile.name)
+    )
+  }));
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: "eda-summary-table",
+      style: readingColumns(rows.map((row) => row.summary)),
+      children: [
+        /* @__PURE__ */ jsx("caption", { className: "sr-only", children: getChartSummary(settings) }),
+        /* @__PURE__ */ jsxs("colgroup", { children: [
+          /* @__PURE__ */ jsx("col", { className: "eda-summary-col-field" }),
+          /* @__PURE__ */ jsx("col", { className: "eda-summary-col-count" }),
+          /* @__PURE__ */ jsx("col", { className: "eda-summary-col-count" }),
+          /* @__PURE__ */ jsx("col", {}),
+          /* @__PURE__ */ jsx("col", { className: "eda-summary-col-actions" })
+        ] }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(SortHeader, { column: "name", label: "Field", sort, onSort }),
+          /* @__PURE__ */ jsx(
+            SortHeader,
+            {
+              column: "uniqueCount",
+              label: "Distinct",
+              sort,
+              onSort,
+              className: "eda-summary-num"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SortHeader,
+            {
+              column: "nullCount",
+              label: "Missing",
+              sort,
+              onSort,
+              className: "eda-summary-num"
+            }
+          ),
+          /* @__PURE__ */ jsx("th", { scope: "col", children: "Values" }),
+          /* @__PURE__ */ jsx("th", { scope: "col", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: rows.map(({ profile, summary }) => {
+          const fieldLabel = label(profile.name);
+          const missingShare = profile.totalCount > 0 ? profile.nullCount / profile.totalCount : 0;
+          return /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", className: "eda-summary-field", children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                FieldMetadata,
+                {
+                  profile,
+                  label: fieldLabel,
+                  compact: true,
+                  showDetail: false,
+                  className: "min-w-0"
+                }
+              ),
+              /* @__PURE__ */ jsx(CalculatedFieldBadge, { field: profile.name })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "eda-summary-num", children: profile.uniqueCount.toLocaleString() }),
+            /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: cn(
+                  "eda-summary-num",
+                  profile.nullCount > 0 && "eda-summary-missing"
+                ),
+                children: profile.nullCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  profile.nullCount.toLocaleString(),
+                  /* @__PURE__ */ jsx("span", { className: "eda-summary-share-label", children: missingShare < 0.01 ? "<1%" : `${Math.round(missingShare * 100)}%` })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u2013" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "None" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx("td", { className: "eda-summary-values", children: summary ? /* @__PURE__ */ jsxs("div", { className: "eda-summary-profile", children: [
+              summary.graphic,
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: summary.description }),
+              /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "eda-summary-reading", children: [
+                /* @__PURE__ */ jsx("span", { className: "eda-summary-range", children: summary.label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "eda-summary-label", children: summary.label }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "eda-summary-low", children: summary.low }),
+                  summary.high !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "eda-summary-sep", children: "\u2013" }),
+                    /* @__PURE__ */ jsx("span", { className: "eda-summary-high", children: summary.high })
+                  ] })
+                ] }) }),
+                summary.stat !== void 0 && /* @__PURE__ */ jsxs("span", { className: "eda-summary-stat-group", children: [
+                  /* @__PURE__ */ jsx("span", { className: "eda-summary-stat-label", children: summary.statLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "eda-summary-stat", children: summary.stat })
+                ] })
+              ] })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: profile.totalCount === 0 ? "No rows in the current filter" : "No values" }) }),
+            /* @__PURE__ */ jsx("td", { className: "eda-summary-actions-cell", children: /* @__PURE__ */ jsxs("div", { className: "eda-summary-actions", children: [
+              /* @__PURE__ */ jsx(FieldInspector, { field: profile.name, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": `Inspect ${fieldLabel}`,
+                  children: /* @__PURE__ */ jsx(Settings2, {})
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                ChartActions,
+                {
+                  columnName: profile.name,
+                  dataType: profile.dataType
+                }
+              )
+            ] }) })
+          ] }, profile.name);
+        }) })
+      ]
+    }
+  );
+}
+var exportToCSV = (profiles) => {
+  const headers = [
+    "Column",
+    "Type",
+    "Total",
+    "Unique",
+    "Missing",
+    "Min",
+    "Max",
+    "Mean",
+    "Median",
+    "StdDev",
+    "Top Values"
+  ];
+  const rows = profiles.map((profile) => [
+    profile.name,
+    profile.dataType,
+    profile.totalCount,
+    profile.uniqueCount,
+    profile.nullCount,
+    profile.statistics?.min ?? "",
+    profile.statistics?.max ?? "",
+    profile.statistics?.mean ?? "",
+    profile.statistics?.median ?? "",
+    profile.statistics?.stdDev ?? "",
+    profile.categories?.topValues.map((value) => `${categoryLabel(value.value)}(${value.count})`).join("; ") ?? ""
+  ]);
+  const csvContent = [
+    headers.join(","),
+    ...rows.map(
+      (row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(",")
+    )
+  ].join("\n");
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  link.href = url;
+  link.download = "summary_table.csv";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+  toast.success("Summary table exported to CSV");
+};
+function SummaryTable({
+  height,
+  settings,
+  toolbarTarget
+}) {
+  const sourceProfiles = useDataLayer((state) => state.fieldProfiles);
+  const data = useDataLayer((state) => state.data);
+  const calculations = useDataLayer((state) => state.calculations);
+  const fieldSettings = useDataLayer((state) => state.fieldSettings);
+  const getColumnData = useDataLayer((state) => state.getColumnData);
+  const crossfilterWrapper = useDataLayer((state) => state.crossfilterWrapper);
+  const liveItems = useDataLayer((state) => state.liveItems);
+  const chartState = useDataLayer((state) => state.charts);
+  const [sortConfig, setSortConfig] = useState({
+    column: null,
+    direction: "asc"
+  });
+  const allProfiles = useMemo(() => {
+    const filteredIds = new Set(
+      chartState.length ? crossfilterWrapper.getFilteredRowIds() : data.map((row) => row.__ID)
+    );
+    const filteredRows = data.filter((row) => filteredIds.has(row.__ID));
+    const profileColumn = (name) => Object.fromEntries(
+      filteredRows.map((row) => [row.__ID, row[name]])
+    );
+    const source = sourceProfiles.map(
+      (profile) => filteredRows.length === 0 ? emptyFieldProfile(profile) : buildFieldProfile(
+        profile.name,
+        profileColumn(profile.name),
+        profile.dataType
+      )
+    );
+    const calculated = calculations.map((calculation) => {
+      const allColumnData = getColumnData(calculation.resultColumnName);
+      const filteredColumnData = Object.fromEntries(
+        filteredRows.map((row) => [row.__ID, allColumnData[row.__ID]])
+      );
+      const profile = buildFieldProfile(
+        calculation.resultColumnName,
+        allColumnData
+      );
+      return filteredRows.length === 0 ? emptyFieldProfile(profile) : buildFieldProfile(
+        calculation.resultColumnName,
+        filteredColumnData,
+        profile.dataType
+      );
+    });
+    return [...source, ...calculated];
+  }, [
+    sourceProfiles,
+    data,
+    calculations,
+    getColumnData,
+    crossfilterWrapper,
+    chartState,
+    liveItems,
+    fieldSettings
+  ]);
+  const sortedProfiles = useMemo(() => {
+    if (!sortConfig.column) {
+      return allProfiles;
+    }
+    return [...allProfiles].sort((a, b) => {
+      const aValue = a[sortConfig.column];
+      const bValue = b[sortConfig.column];
+      if (aValue === bValue) {
+        return 0;
+      }
+      if (aValue == null) {
+        return 1;
+      }
+      if (bValue == null) {
+        return -1;
+      }
+      const result = typeof aValue === "number" && typeof bValue === "number" ? aValue - bValue : String(aValue).localeCompare(String(bValue));
+      return sortConfig.direction === "asc" ? result : -result;
+    });
+  }, [allProfiles, sortConfig]);
+  const handleSort = (column) => {
+    setSortConfig((current) => {
+      if (current.column !== column) return { column, direction: "asc" };
+      if (current.direction === "asc") return { column, direction: "desc" };
+      return { column: null, direction: "asc" };
+    });
+  };
+  const toolbar = /* @__PURE__ */ jsxs("div", { className: "eda-table-toolbar-compact", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground tabular-nums", children: [
+      (allProfiles[0]?.totalCount ?? 0).toLocaleString(),
+      " rows"
+    ] }),
+    /* @__PURE__ */ jsx(ActionTooltip, { content: "Export summary as CSV", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        "aria-label": "Export summary as CSV",
+        onClick: () => exportToCSV(sortedProfiles),
+        children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" })
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "eda-summary-view overflow-auto", style: { height }, children: [
+    toolbarTarget === void 0 ? toolbar : toolbarTarget && createPortal(toolbar, toolbarTarget),
+    /* @__PURE__ */ jsx(
+      CompactSummaryTable,
+      {
+        data: sortedProfiles,
+        onSort: handleSort,
+        sort: sortConfig,
+        settings
+      }
+    )
+  ] });
+}
+
+// src/components/charts/SummaryTable/SummaryTableSettingsPanel.tsx
+function SummaryTableSettingsPanel() {
+  return null;
+}
+
+// src/components/charts/SummaryTable/definition.ts
+var summaryTableDefinition = {
+  type: "summary",
+  name: "Summary Table",
+  description: "Display summary statistics for your data",
+  icon: Info,
+  component: SummaryTable,
+  settingsPanel: SummaryTableSettingsPanel,
+  createDefaultSettings: (layout) => ({
+    ...DEFAULT_CHART_SETTINGS,
+    id: crypto.randomUUID(),
+    type: "summary",
+    title: "Summary Table",
+    layout,
+    margin: { top: 20, right: 20, bottom: 20, left: 20 }
+  }),
+  validateSettings: () => {
+    return true;
+  },
+  getFilterFunction: () => {
+    return () => true;
+  }
+};
+
+export { summaryTableDefinition, useCreateCharts };
+//# sourceMappingURL=chunk-PP4VCONW.js.map
+//# sourceMappingURL=chunk-PP4VCONW.js.map