exploreda 0.0.6 → 0.1.0

package/dist/chunk-DHYLSXNR.js

@@ -0,0 +1,964 @@
+import { useTraceRevision, useChartTrace, useChartTraceApi, useTraceSource, guideTargets, resolveGuideTrace } from './chunk-54M32JJB.js';
+import { useColorScales } from './chunk-4HNDKMWF.js';
+import { DEFAULT_CHART_SETTINGS } from './chunk-CJQQFNEY.js';
+import { BaseChart, formatTick } from './chunk-UJWS6TRV.js';
+import { buildScale, planChartMargin, numericScale, planAxes, getRangeFilterForField, describeScale, findAxisGuide } from './chunk-7PTJNIOD.js';
+import { FieldSelector } from './chunk-SFV5LZPD.js';
+import { Switch } from './chunk-Q7LK2UWH.js';
+import { useGetLiveIds, useGetColumnDataForIds, useGetColumnData } from './chunk-ZD64SCZB.js';
+import { applyFilter } from './chunk-YXPAWUXO.js';
+import { Label } from './chunk-MJPDJ5AS.js';
+import { useDataLayer, categoryIncludes, categoryEqual, displayAggregateValue, finiteNumber, finiteNumbers, categoryKey, categoryLabel, categoryValue, getChartAxisLabel, cn, isMissingValue, isNumberLike, calculateGroupedAggregate } from './chunk-JNO7OXCC.js';
+import { ChartBarBig } from 'lucide-react';
+import * as React from 'react';
+import { useId, useState, useMemo, useCallback } from 'react';
+import { scaleBand } from 'd3-scale';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+// src/components/charts/BarChart/bins.ts
+function numericBins(all, values, count) {
+  const low = Math.min(...all);
+  const high = Math.max(...all);
+  if (!Number.isFinite(low) || !Number.isFinite(high)) return [];
+  const min = low === high ? low - 0.5 : low;
+  const max = low === high ? high + 0.5 : high;
+  const size = Math.max(2, Math.min(100, Math.round(count)));
+  const step = (max - min) / size;
+  const bins = Array.from({ length: size }, (_, i) => {
+    const start = min + i * step;
+    const end = min + (i + 1) * step;
+    return {
+      label: `[${start}, ${end}${i === size - 1 ? "]" : ")"}`,
+      start,
+      end,
+      value: 0,
+      isNumeric: true
+    };
+  });
+  for (const value of values) {
+    if (!Number.isFinite(value) || value < min || value > max) continue;
+    bins[Math.min(size - 1, Math.floor((value - min) / step))].value++;
+  }
+  return bins;
+}
+
+// src/components/charts/BarChart/barPlan.ts
+var X_SCALE_PADDING = 0.05;
+var Y_SCALE_PADDING = 0.1;
+var DEFAULT_FILL = "#3479a8";
+var FILTERED_OUT_FILL = "rgb(156 163 175)";
+function isNumericBarField(settings, snapshot) {
+  return !settings.aggregateId && snapshot.fieldType !== "categorical" && !settings.forceString && snapshot.allValues.some((value) => finiteNumber(value) !== void 0) && snapshot.allValues.filter((value) => !isMissingValue(value)).every(isNumberLike);
+}
+function countRows(settings, snapshot) {
+  const spec = {
+    id: `${settings.id}:count`,
+    name: `Count by ${settings.field}`,
+    groupField: settings.field,
+    aggregation: "count"
+  };
+  const result = calculateGroupedAggregate(
+    snapshot.liveIds.map((id) => ({
+      __ID: id,
+      [settings.field]: snapshot.fieldData[id]
+    })),
+    spec
+  );
+  const byKey = new Map(
+    result.rows.map((row) => [categoryKey(row.groupValue), row])
+  );
+  const categories = new Map(
+    snapshot.allValues.map((value) => [categoryKey(value), categoryValue(value)])
+  );
+  const rows = [...categories].map(
+    ([key, category]) => byKey.get(key) ?? {
+      id: `${spec.id}:${key}`,
+      groupValue: category,
+      groupLabel: categoryLabel(category),
+      value: 0,
+      rowCount: 0,
+      contributors: []
+    }
+  );
+  return { ...result, rows };
+}
+function binRows(settings, snapshot) {
+  const all = finiteNumbers(snapshot.allValues);
+  const live = snapshot.liveIds.flatMap((id) => {
+    const value = finiteNumber(snapshot.fieldData[id]);
+    return value === void 0 ? [] : [{ id, value }];
+  });
+  const bins = numericBins(
+    all,
+    live.map((item) => item.value),
+    settings.binCount || 20
+  );
+  const members = bins.map(() => []);
+  if (bins.length) {
+    const min = bins[0].start;
+    const max = bins[bins.length - 1].end;
+    const step = (max - min) / bins.length;
+    for (const item of live) {
+      if (item.value < min || item.value > max) continue;
+      members[Math.min(bins.length - 1, Math.floor((item.value - min) / step))].push(item);
+    }
+  }
+  return bins.map((bin, index) => ({
+    bin: { start: bin.start, end: bin.end },
+    id: `bin:${bin.start}:${bin.end}`,
+    groupValue: bin.start,
+    groupLabel: bin.label,
+    value: bin.value,
+    rowCount: members[index].length,
+    contributors: members[index].map((item) => ({
+      sourceId: item.id,
+      input: snapshot.fieldData[item.id],
+      included: true
+    }))
+  }));
+}
+function extremes(values) {
+  const lower = values.reduce(
+    (winner, item) => item.value < (winner?.value ?? 0) ? item : winner,
+    void 0
+  );
+  const upper = values.reduce(
+    (winner, item) => item.value > (winner?.value ?? 0) ? item : winner,
+    void 0
+  );
+  const end = (item) => item ? { source: "bar", id: item.id, label: item.label, value: item.value } : { source: "zero", value: 0 };
+  return { lower: end(lower), upper: end(upper) };
+}
+function planBarChart({
+  settings,
+  snapshot,
+  width,
+  height,
+  getColor,
+  getFieldLabel,
+  formatFieldValue,
+  aggregateScope = "This result uses the current globally filtered source rows"
+}) {
+  const numeric = isNumericBarField(settings, snapshot);
+  const mode = settings.aggregateId ? "aggregate" : numeric ? "bin" : "count";
+  const spec = snapshot.aggregate?.spec;
+  const result = mode === "aggregate" ? snapshot.aggregate : mode === "count" ? countRows(settings, snapshot) : void 0;
+  const rows = mode === "bin" ? binRows(settings, snapshot) : result?.rows ?? [];
+  let domainValues;
+  if (mode === "aggregate") {
+    domainValues = rows.flatMap(
+      (row) => typeof row.value === "number" && Number.isFinite(row.value) ? [{ id: row.id, label: row.groupLabel, value: row.value }] : []
+    );
+  } else if (mode === "bin") {
+    const all = finiteNumbers(snapshot.allValues);
+    domainValues = numericBins(all, all, settings.binCount || 20).map(
+      (bin) => ({ id: `bin:${bin.start}:${bin.end}`, label: bin.label, value: bin.value })
+    );
+  } else {
+    const counts = /* @__PURE__ */ new Map();
+    for (const value of snapshot.allValues) {
+      const key = categoryKey(value);
+      const item = counts.get(key);
+      if (item) item.value += 1;
+      else
+        counts.set(key, {
+          id: `${settings.id}:count:${key}`,
+          label: categoryLabel(categoryValue(value)),
+          value: 1
+        });
+    }
+    domainValues = [...counts.values()];
+  }
+  const { lower, upper } = extremes(domainValues);
+  let yDomain;
+  let padding;
+  if (mode === "aggregate") {
+    const pad = lower.value === upper.value ? 0.5 : (upper.value - lower.value) * Y_SCALE_PADDING;
+    yDomain = [lower.value - (lower.value < 0 ? pad : 0), upper.value + pad];
+    padding = lower.value === upper.value ? "0.5 above and below" : "10% of the value span";
+  } else {
+    yDomain = [0, Math.max(1, upper.value * (1 + Y_SCALE_PADDING))];
+    padding = "10% above the tallest bar";
+  }
+  const xField = mode === "aggregate" && spec ? spec.groupField : settings.field;
+  const yField = mode === "aggregate" && spec && spec.aggregation !== "count" ? spec.measureField : void 0;
+  const xLabel = getChartAxisLabel(
+    xField,
+    settings.xAxisLabel,
+    getFieldLabel
+  );
+  const yLabel = settings.yAxisLabel || (mode === "aggregate" && spec ? spec.aggregation === "count" ? "Count" : getFieldLabel(spec.measureField ?? "Measure") : "");
+  const { margin, policy } = planChartMargin({
+    margin: settings.margin,
+    width,
+    yDomain,
+    hasXLabel: Boolean(xLabel),
+    hasYLabel: Boolean(yLabel)
+  });
+  const plotWidth = width - margin.left - margin.right;
+  const plotHeight = height - margin.top - margin.bottom;
+  let xScale;
+  let xDomainSource;
+  if (mode === "bin") {
+    const all = finiteNumbers(snapshot.allValues);
+    const low = Math.min(...all);
+    const high = Math.max(...all);
+    const min = low === high ? low - 0.5 : low;
+    const max = low === high ? high + 0.5 : high;
+    const pad = (max - min) * X_SCALE_PADDING;
+    xScale = numericScale(settings.xAxis).domain([min - pad, max + pad]).range([0, plotWidth]);
+    xDomainSource = {
+      population: "all source rows",
+      rows: all.length,
+      bounds: [low, high],
+      padding: "5% on each side"
+    };
+  } else {
+    const labels = mode === "aggregate" ? rows.map((row) => row.groupLabel) : Array.from(new Set(snapshot.allValues.map(categoryLabel)));
+    xScale = scaleBand().domain(labels).range([0, plotWidth]).padding(0.3);
+  }
+  const yScale = numericScale(settings.yAxis).domain(yDomain).range([plotHeight, 0]);
+  const baseline = yScale(0);
+  const format = (field) => (value) => field && formatFieldValue ? formatFieldValue(field, value) : formatTick(value);
+  const symlog = (label, type) => [label, type === "symlog" && "symlog"].filter(Boolean).join(" \xB7 ");
+  const axes = planAxes({
+    plotWidth,
+    plotHeight,
+    margin,
+    marginPolicy: policy,
+    x: {
+      scale: xScale,
+      scaleType: settings.xAxis.scaleType,
+      field: xField,
+      fieldLabel: xField ? getFieldLabel(xField) : void 0,
+      density: settings.xGridLines,
+      grid: settings.xAxis.grid,
+      format: format(xField),
+      label: symlog(xLabel, settings.xAxis.scaleType),
+      labelSource: settings.xAxisLabel ? "chart-setting" : "field-label",
+      domainSource: xDomainSource
+    },
+    y: {
+      scale: yScale,
+      scaleType: settings.yAxis.scaleType,
+      field: yField,
+      fieldLabel: yLabel || void 0,
+      density: settings.yGridLines,
+      grid: settings.yAxis.grid ?? true,
+      format: format(yField),
+      label: symlog(yLabel, settings.yAxis.scaleType),
+      labelSource: settings.yAxisLabel ? "chart-setting" : "field-label",
+      zero: true,
+      domainSource: {
+        population: mode === "aggregate" ? "the current aggregate result" : "all source rows",
+        rows: domainValues.length,
+        bounds: [lower.value, upper.value],
+        padding,
+        lower: lower.label ? { label: lower.label, value: lower.value } : void 0,
+        upper: upper.label ? { label: upper.label, value: upper.value } : void 0
+      }
+    }
+  });
+  const valueFilter = mode === "aggregate" ? void 0 : settings.filters.find(
+    (filter) => filter.type === "value" && filter.field === settings.field
+  );
+  const rangeFilter = mode === "bin" ? getRangeFilterForField(settings.filters, settings.field) : void 0;
+  const bars = [];
+  const unplotted = [];
+  rows.forEach((row, order) => {
+    if (typeof row.value !== "number" || !Number.isFinite(row.value)) {
+      unplotted.push({ row, reason: "No valid numbers" });
+      return;
+    }
+    let x;
+    let barWidth;
+    let bin;
+    if (row.bin) {
+      const linear = xScale;
+      const { start, end } = row.bin;
+      bin = { start, end, closed: order === rows.length - 1 };
+      x = linear(start);
+      const span = linear(end) - x;
+      if (span < 1) return;
+      barWidth = Math.max(0, span - 1);
+    } else {
+      const band = xScale;
+      const at = band(row.groupLabel);
+      if (at === void 0 || band.bandwidth() < 1) return;
+      x = at;
+      barWidth = band.bandwidth();
+    }
+    const valuePosition = yScale(row.value);
+    const baseFill = getColor(row.groupValue) || DEFAULT_FILL;
+    const passes = rangeFilter ? applyFilter(row.groupValue, rangeFilter) : valueFilter ? applyFilter(row.groupValue, valueFilter) : true;
+    bars.push({
+      id: `bar:${row.id}`,
+      order,
+      label: row.groupLabel,
+      groupValue: row.groupValue,
+      bin,
+      value: row.value,
+      x,
+      y: Math.min(baseline, valuePosition),
+      width: barWidth,
+      height: Math.max(1, Math.abs(baseline - valuePosition)),
+      baseline,
+      fill: passes ? baseFill : FILTERED_OUT_FILL,
+      fillSource: passes ? { kind: "color-scale", scaleId: settings.colorScaleId, value: row.groupValue } : {
+        kind: "own-filter",
+        scaleId: settings.colorScaleId,
+        value: row.groupValue,
+        baseFill
+      },
+      selected: mode === "count" && valueFilter ? applyFilter(row.groupValue, valueFilter) : void 0,
+      row
+    });
+  });
+  return {
+    revision: snapshot.revision,
+    mode,
+    width,
+    height,
+    field: xField,
+    fieldLabel: getFieldLabel(xField),
+    valueLabel: yLabel || "Row count",
+    aggregation: mode === "aggregate" && spec ? `${spec.aggregation}${spec.measureField ? ` of ${getFieldLabel(spec.measureField)}` : ""}` : "count",
+    axes,
+    xScale: describeScale(xScale, settings.xAxis.scaleType),
+    yScale: describeScale(yScale, settings.yAxis.scaleType),
+    bars,
+    groupOrder: rows.map((row) => row.groupLabel),
+    unplotted,
+    domain: {
+      population: mode === "aggregate" ? "current result" : "all source rows",
+      values: domainValues,
+      lower,
+      upper,
+      padding,
+      domain: yDomain
+    },
+    zeroBaseline: baseline,
+    scopeNote: mode === "aggregate" ? aggregateScope : mode === "count" ? "Rows after other chart filters; this chart's selected categories are shown in color" : "Rows after other chart filters; this chart's range is shown in color"
+  };
+}
+function findBarForRow(plan, id) {
+  return plan.bars.find(
+    (bar) => bar.row.contributors.some((contributor) => contributor.sourceId === id)
+  );
+}
+function barAt(plan, x, y) {
+  return plan.bars.find(
+    (bar) => x >= bar.x && x <= bar.x + bar.width && y >= bar.y && y <= bar.y + bar.height
+  );
+}
+
+// src/components/charts/BarChart/barTrace.ts
+function resolveBarTrace(plan, kind, id) {
+  if (kind === "guide") return resolveGuideTrace(plan.axes, id, plan.revision);
+  if (kind !== "bar") return void 0;
+  const mark = plan.bars.find((bar) => bar.id === id);
+  if (!mark) return void 0;
+  return {
+    kind: "bar",
+    id,
+    revision: plan.revision,
+    mark,
+    mode: plan.mode,
+    field: plan.field,
+    fieldLabel: plan.fieldLabel,
+    valueLabel: plan.valueLabel,
+    aggregation: plan.aggregation,
+    groupOrder: plan.groupOrder,
+    domain: plan.domain,
+    xScale: plan.xScale,
+    yScale: plan.yScale,
+    scopeNote: plan.scopeNote
+  };
+}
+function barTraceTargets(plan) {
+  return [
+    ...plan.bars.map((bar) => ({
+      kind: "bar",
+      id: bar.id,
+      label: `Bar: ${bar.label}`
+    })),
+    ...guideTargets(plan.axes)
+  ];
+}
+function findBarTraceRow(plan, id) {
+  const bar = findBarForRow(plan, id);
+  return bar && { kind: "bar", id: bar.id };
+}
+function HoverReadout({ plan, id }) {
+  const bar = plan.bars.find((item) => item.id === id);
+  const guide = bar ? void 0 : findAxisGuide(plan.axes, id)?.guide;
+  if (!bar && !guide) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "pointer-events-none absolute left-2 top-2 max-w-[min(16rem,70%)] rounded border border-border bg-card/95 px-2 py-1 text-xs text-card-foreground shadow-sm",
+      role: "status",
+      children: bar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Bar \xB7 ",
+          bar.label
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: bar.bin ? `Bin interval: ${bar.bin.start} to ${bar.bin.end}` : `Value: ${bar.value}` })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          guide.axis === "x" ? "Horizontal" : "Vertical",
+          " ",
+          guide.role
+        ] }),
+        guide.value !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          "Value: ",
+          String(guide.value)
+        ] }),
+        guide.role !== "zero" && guide.label && /* @__PURE__ */ jsxs("div", { children: [
+          "Label: ",
+          guide.label.fullText
+        ] })
+      ] })
+    }
+  );
+}
+function BarChart({
+  settings,
+  width,
+  height,
+  facetIds,
+  aggregateResult,
+  aggregateScope
+}) {
+  const getAggregateResult = useDataLayer((s) => s.getAggregateResult);
+  const getFieldLabel = useDataLayer((s) => s.getFieldLabel);
+  const formatFieldValue = useDataLayer((s) => s.formatFieldValue);
+  const fieldSettings = useDataLayer((s) => s.fieldSettings);
+  const nonce = useDataLayer((s) => s.nonce);
+  const aggregates = useDataLayer((s) => s.aggregates);
+  const updateChart = useDataLayer((s) => s.updateChart);
+  const { getColorForValue } = useColorScales();
+  const liveIds = useGetLiveIds(settings, facetIds);
+  const allValues = useGetColumnDataForIds(settings.field);
+  const fieldData = useGetColumnData(settings.field);
+  const revision = useTraceRevision(settings);
+  const trace = useChartTrace();
+  const traceApi = useChartTraceApi();
+  const owner = useId();
+  const [hoveredId, setHoveredId] = useState(null);
+  const resolvedAggregate = useMemo(() => {
+    return settings.aggregateId ? getAggregateResult(settings.aggregateId, liveIds) : void 0;
+  }, [
+    settings.aggregateId,
+    getAggregateResult,
+    aggregates,
+    fieldSettings,
+    liveIds,
+    nonce
+  ]);
+  const plan = useMemo(
+    () => planBarChart({
+      settings,
+      width,
+      height,
+      snapshot: {
+        revision,
+        allValues,
+        liveIds,
+        fieldData,
+        fieldType: fieldSettings[settings.field]?.type,
+        aggregate: aggregateResult ?? resolvedAggregate
+      },
+      getColor: (value) => getColorForValue(settings.colorScaleId, value, "#3479a8"),
+      getFieldLabel,
+      formatFieldValue,
+      aggregateScope
+    }),
+    // Label and format getters are stable; field settings carry their changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      settings,
+      width,
+      height,
+      revision,
+      allValues,
+      liveIds,
+      fieldData,
+      fieldSettings,
+      aggregateResult,
+      resolvedAggregate,
+      getColorForValue,
+      aggregateScope
+    ]
+  );
+  const xScale = useMemo(() => buildScale(plan.xScale), [plan.xScale]);
+  const yScale = useMemo(
+    () => buildScale(plan.yScale),
+    [plan.yScale]
+  );
+  const source = useMemo(
+    () => ({
+      role: "chart",
+      revision: plan.revision,
+      resolve: (kind, id) => resolveBarTrace(plan, kind, id),
+      findRow: (id) => findBarTraceRow(plan, id),
+      targets: () => barTraceTargets(plan)
+    }),
+    [plan]
+  );
+  useTraceSource(owner, source);
+  const inspect = useCallback(
+    (kind, id) => traceApi?.inspect(owner, kind, id),
+    [owner, traceApi]
+  );
+  const selected = trace?.selection?.owner === owner ? trace.selection : void 0;
+  const valueFilter = settings.filters.find(
+    (f) => f.type === "value" && f.field === settings.field
+  );
+  const toggleCategory = useCallback(
+    (label) => {
+      const filterValues = valueFilter?.values ?? [];
+      const newValues = categoryIncludes(filterValues, label) ? filterValues.filter((f) => !categoryEqual(f, label)) : [...filterValues, label];
+      const newFilters = settings.filters.filter(
+        (f) => f.type !== "value" || f.field !== settings.field
+      );
+      if (newValues.length > 0) {
+        newFilters.push({
+          type: "value",
+          field: settings.field,
+          values: newValues
+        });
+      }
+      updateChart(settings.id, { filters: newFilters });
+    },
+    [settings.id, settings.field, settings.filters, updateChart, valueFilter]
+  );
+  const handleBrushChange = useCallback(
+    (extent) => {
+      const newFilters = settings.filters.filter(
+        (f) => f.field !== settings.field
+      );
+      if (extent && plan.mode === "bin") {
+        const linear = xScale;
+        newFilters.push({
+          type: "range",
+          field: settings.field,
+          min: linear.invert(extent[0][0]),
+          max: linear.invert(extent[1][0])
+        });
+      } else if (extent) {
+        return;
+      }
+      updateChart(settings.id, { filters: newFilters });
+    },
+    [plan.mode, settings.field, settings.filters, settings.id, updateChart, xScale]
+  );
+  const isCount = plan.mode === "count";
+  const isAggregate = plan.mode === "aggregate";
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width, height }, children: [
+    /* @__PURE__ */ jsx(
+      BaseChart,
+      {
+        width,
+        height,
+        xScale,
+        yScale,
+        axes: plan.axes,
+        brushingMode: plan.mode === "bin" ? "horizontal" : "none",
+        onBrushChange: handleBrushChange,
+        settings,
+        onInspectGuide: (id) => inspect("guide", id),
+        onHoverTarget: setHoveredId,
+        onInspectPlot: ([x, y]) => {
+          const bar = barAt(plan, x, y);
+          return bar ? Boolean(inspect("bar", bar.id)) : false;
+        },
+        activeGuideId: selected?.kind === "guide" ? selected.id : hoveredId,
+        children: /* @__PURE__ */ jsx("g", { children: plan.bars.map((bar) => {
+          const measureLabel = isAggregate ? displayAggregateValue(bar.value) : `${bar.value} records`;
+          const clickable = isCount || plan.mode === "bin";
+          return /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-plan-id": bar.id,
+              "data-aggregate-row-id": bar.row.id,
+              x: bar.x,
+              y: bar.y,
+              width: bar.width,
+              height: bar.height,
+              rx: 1.5,
+              role: "button",
+              tabIndex: 0,
+              "aria-label": `${bar.label}: ${measureLabel}`,
+              "aria-pressed": bar.selected,
+              className: `chart-mark ${clickable ? "cursor-pointer" : ""}`,
+              style: {
+                fill: bar.fill,
+                ...selected?.id === bar.id ? { stroke: "var(--primary)", strokeWidth: 2 } : {}
+              },
+              onKeyDown: (event) => {
+                if (event.key !== "Enter" && event.key !== " ") return;
+                if (event.altKey && event.key === "Enter") {
+                  event.preventDefault();
+                  inspect("bar", bar.id);
+                } else if (isCount && !event.altKey) {
+                  event.preventDefault();
+                  toggleCategory(bar.groupValue);
+                }
+              },
+              onClick: (event) => {
+                if (event.altKey) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  inspect("bar", bar.id);
+                } else if (isCount) {
+                  toggleCategory(bar.groupValue);
+                }
+              }
+            },
+            bar.id
+          );
+        }) })
+      }
+    ),
+    hoveredId && /* @__PURE__ */ jsx(HoverReadout, { plan, id: hoveredId })
+  ] });
+}
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary bg-background ring-ring/20 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+function getAggregateName(aggregation, groupField, measureField) {
+  if (aggregation === "count") {
+    return `Count by ${groupField}`;
+  }
+  return `${aggregation === "sum" ? "Sum" : "Average"} of ${measureField ?? ""} by ${groupField}`;
+}
+function BarChartSettingsPanel({
+  settings,
+  onSettingsChange
+}) {
+  const { getOrCreateScaleForField } = useColorScales();
+  const aggregate = useDataLayer(
+    (state) => settings.aggregateId ? state.getAggregate(settings.aggregateId) : void 0
+  );
+  const addAggregate = useDataLayer((state) => state.addAggregate);
+  const updateAggregate = useDataLayer((state) => state.updateAggregate);
+  const getColumnNames = useDataLayer((state) => state.getColumnNames);
+  const getColumnData = useDataLayer((state) => state.getColumnData);
+  const calculations = useDataLayer((state) => state.calculations);
+  const fieldProfiles = useDataLayer((state) => state.fieldProfiles);
+  const fieldNames = useMemo(() => {
+    return getColumnNames();
+  }, [getColumnNames, calculations]);
+  const measureFields = useMemo(() => {
+    const numeric = fieldNames.filter(
+      (field) => fieldProfiles.some(
+        (profile) => profile.name === field && profile.dataType === "numeric"
+      )
+    );
+    calculations.forEach((calculation) => {
+      const values = Object.values(getColumnData(calculation.resultColumnName));
+      if (values.some((value) => finiteNumber(value) !== void 0)) {
+        numeric.push(calculation.resultColumnName);
+      }
+    });
+    if (aggregate?.measureField && !numeric.includes(aggregate.measureField)) {
+      numeric.unshift(aggregate.measureField);
+    }
+    return numeric;
+  }, [
+    aggregate?.measureField,
+    calculations,
+    fieldNames,
+    fieldProfiles,
+    getColumnData
+  ]);
+  const [error, setError] = useState();
+  const createAggregate = (aggregation) => {
+    const measureField = measureFields[0];
+    if (aggregation !== "count" && !measureField) {
+      setError("Sum and average need a numeric measure field.");
+      return;
+    }
+    try {
+      const aggregate2 = addAggregate({
+        name: getAggregateName(aggregation, settings.field, measureField),
+        groupField: settings.field,
+        aggregation,
+        ...aggregation === "count" ? {} : { measureField }
+      });
+      onSettingsChange({
+        ...settings,
+        field: aggregate2.measureField ?? aggregate2.groupField,
+        aggregateId: aggregate2.id,
+        title: aggregate2.name,
+        xAxisLabel: "",
+        yAxisLabel: ""
+      });
+      setError(void 0);
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : "Could not create grouped bar"
+      );
+    }
+  };
+  if (settings.aggregateId) {
+    if (!aggregate) {
+      return /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: "Bar aggregation not found." });
+    }
+    const updateDefinition = (updates) => {
+      try {
+        const next = { ...aggregate, ...updates };
+        const name = getAggregateName(
+          next.aggregation,
+          next.groupField,
+          next.measureField
+        );
+        updateAggregate(settings.aggregateId, { ...updates, name });
+        onSettingsChange({
+          ...settings,
+          field: next.aggregation === "count" ? next.groupField : next.measureField ?? next.groupField,
+          ...settings.title === aggregate.name ? { title: name } : {}
+        });
+        setError(void 0);
+      } catch (cause) {
+        setError(
+          cause instanceof Error ? cause.message : "Could not update grouped summary"
+        );
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: error }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Group by" }),
+        /* @__PURE__ */ jsx(
+          FieldSelector,
+          {
+            label: "",
+            placeholder: "Group by",
+            value: aggregate.groupField,
+            onChange: (value) => updateDefinition({ groupField: value })
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "bar-operation", children: "Operation" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: "bar-operation",
+            className: "h-9 rounded-md border-input bg-background px-2 text-sm",
+            value: aggregate.aggregation,
+            onChange: (event) => {
+              if (event.target.value === "category") {
+                onSettingsChange({
+                  ...settings,
+                  field: aggregate.groupField,
+                  aggregateId: void 0,
+                  ...settings.title === aggregate.name ? { title: "" } : {}
+                });
+                return;
+              }
+              updateDefinition({
+                aggregation: event.target.value,
+                ...event.target.value !== "count" && !aggregate.measureField ? { measureField: measureFields[0] } : {}
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "category", children: "Category counts / bins" }),
+              /* @__PURE__ */ jsx("option", { value: "count", children: "Count rows" }),
+              /* @__PURE__ */ jsx("option", { value: "sum", disabled: !measureFields.length, children: "Sum" }),
+              /* @__PURE__ */ jsx("option", { value: "average", disabled: !measureFields.length, children: "Average" })
+            ]
+          }
+        ),
+        aggregate.aggregation !== "count" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Label, { children: "Measure" }),
+          /* @__PURE__ */ jsx(
+            FieldSelector,
+            {
+              label: "",
+              placeholder: "Measure",
+              value: aggregate.measureField ?? "",
+              fields: measureFields,
+              onChange: (value) => updateDefinition({ measureField: value })
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Group by" }),
+      /* @__PURE__ */ jsx(
+        FieldSelector,
+        {
+          label: "",
+          placeholder: "Group by",
+          value: settings.field,
+          onChange: (value) => onSettingsChange({ ...settings, field: value })
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "bar-operation", children: "Operation" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id: "bar-operation",
+          className: "h-9 rounded-md border-input bg-background px-2 text-sm",
+          defaultValue: "category",
+          onChange: (event) => {
+            if (event.target.value !== "category") {
+              createAggregate(event.target.value);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "category", children: "Count rows" }),
+            /* @__PURE__ */ jsx("option", { value: "sum", disabled: !measureFields.length, children: "Sum" }),
+            /* @__PURE__ */ jsx("option", { value: "average", disabled: !measureFields.length, children: "Average" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Label, { children: [
+        "Bins \xB7 ",
+        settings.binCount ?? 10
+      ] }),
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          "aria-label": "Histogram bin count",
+          value: [settings.binCount ?? 10],
+          min: 2,
+          max: 50,
+          step: 1,
+          onValueChange: ([value]) => onSettingsChange({ ...settings, binCount: value })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "col-start-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: "forceString",
+            checked: settings.forceString,
+            onCheckedChange: (checked) => onSettingsChange({
+              ...settings,
+              forceString: checked
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "forceString", children: "Treat values as categories" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "col-start-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: "colorField",
+            checked: settings.field === settings.colorField,
+            onCheckedChange: (checked) => onSettingsChange({
+              ...settings,
+              colorField: checked ? settings.field : void 0,
+              colorScaleId: checked && settings.field ? getOrCreateScaleForField(settings.field) : void 0
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "colorField", children: "Use as color field" })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/components/charts/BarChart/definition.ts
+var barChartDefinition = {
+  type: "bar",
+  name: "Bar Chart",
+  description: "Display data as vertical bars",
+  icon: ChartBarBig,
+  component: BarChart,
+  settingsPanel: BarChartSettingsPanel,
+  createDefaultSettings: (layout, field) => ({
+    ...DEFAULT_CHART_SETTINGS,
+    id: crypto.randomUUID(),
+    field: field ?? "",
+    binCount: 10,
+    type: "bar",
+    title: "Bar Chart",
+    layout,
+    margin: { top: 20, right: 20, bottom: 30, left: 60 },
+    filters: []
+  }),
+  validateSettings: (settings) => {
+    return !!settings.field;
+  },
+  getFilterFunction: (settings, fieldGetter) => {
+    const filter = settings.aggregateId ? [...settings.filters].reverse().find(
+      (f) => f.type === "range" || f.type === "date-range"
+    ) : settings.filters.find((f) => f.field === settings.field);
+    const dataHash = fieldGetter(filter?.field ?? settings.field);
+    return (d) => {
+      const value = dataHash[d];
+      if (filter) {
+        if (!applyFilter(value, filter)) {
+          return false;
+        }
+      }
+      return true;
+    };
+  }
+};
+
+export { barChartDefinition };
+//# sourceMappingURL=chunk-DHYLSXNR.js.map
+//# sourceMappingURL=chunk-DHYLSXNR.js.map