exploreda 0.0.5 → 0.1.0

package/dist/chunk-FM46QSDM.js

@@ -0,0 +1,837 @@
+import { useColorScales } from './chunk-4HNDKMWF.js';
+import { DEFAULT_CHART_SETTINGS } from './chunk-CJQQFNEY.js';
+import { BaseChart } from './chunk-UJWS6TRV.js';
+import { numericScale } from './chunk-7PTJNIOD.js';
+import { FieldSelector, ComboBox } from './chunk-SFV5LZPD.js';
+import { Switch } from './chunk-Q7LK2UWH.js';
+import { useGetColumnDataForIds, useGetLiveData } from './chunk-ZD64SCZB.js';
+import { applyFilter } from './chunk-YXPAWUXO.js';
+import { Label } from './chunk-MJPDJ5AS.js';
+import { useDataLayer, getChartAxisFields, getChartAxisLabel, finiteNumbers, categoryValue, finiteNumber, categoryLabel, categoryIncludes, categoryEqual } from './chunk-JNO7OXCC.js';
+import { scaleBand } from 'd3-scale';
+import natsort from 'natsort';
+import { useState, useMemo, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/charts/BoxPlot/boxPlotCalculations.ts
+var MAX_BEE_SWARM_POINTS_PER_GROUP = 300;
+function getQuartile(sortedData, q) {
+  const pos = (sortedData.length - 1) * q;
+  const base = Math.floor(pos);
+  const rest = pos - base;
+  const value = sortedData[base];
+  const next = sortedData[base + 1];
+  if (next !== void 0) {
+    return value + rest * (next - value);
+  } else {
+    return value;
+  }
+}
+function calculateBoxPlotStats(data, whiskerType) {
+  if (data.length === 0) {
+    return {
+      q1: 0,
+      median: 0,
+      q3: 0,
+      iqr: 0,
+      whiskerLow: 0,
+      whiskerHigh: 0,
+      outliers: [],
+      totalCount: 0
+    };
+  }
+  const sortedData = [...data].sort((a, b) => a - b);
+  const q1 = getQuartile(sortedData, 0.25);
+  const median = getQuartile(sortedData, 0.5);
+  const q3 = getQuartile(sortedData, 0.75);
+  const iqr = q3 - q1;
+  let whiskerLow;
+  let whiskerHigh;
+  let outliers;
+  switch (whiskerType) {
+    case "tukey": {
+      const lowerFence = q1 - 1.5 * iqr;
+      const upperFence = q3 + 1.5 * iqr;
+      whiskerLow = sortedData.find((value) => value >= lowerFence) ?? sortedData[0];
+      whiskerHigh = [...sortedData].reverse().find((value) => value <= upperFence) ?? sortedData[sortedData.length - 1];
+      if (whiskerLow > whiskerHigh) {
+        whiskerLow = sortedData[0];
+        whiskerHigh = sortedData[sortedData.length - 1];
+      }
+      outliers = sortedData.filter((x) => x < whiskerLow || x > whiskerHigh);
+      break;
+    }
+    case "minmax": {
+      whiskerLow = sortedData[0];
+      whiskerHigh = sortedData[sortedData.length - 1];
+      outliers = [];
+      break;
+    }
+    case "stdDev": {
+      const mean = sortedData.reduce((sum, x) => sum + x, 0) / sortedData.length;
+      const stdDev = Math.sqrt(
+        sortedData.reduce((sum, x) => sum + Math.pow(x - mean, 2), 0) / sortedData.length
+      );
+      whiskerLow = mean - 2 * stdDev;
+      whiskerHigh = mean + 2 * stdDev;
+      outliers = sortedData.filter((x) => x < whiskerLow || x > whiskerHigh);
+      break;
+    }
+  }
+  return {
+    q1,
+    median,
+    q3,
+    iqr,
+    whiskerLow,
+    whiskerHigh,
+    outliers,
+    totalCount: data.length
+  };
+}
+function calculateKernelDensity(data, bandwidth, numPoints = 100) {
+  const sortedData = [...data].sort((a, b) => a - b);
+  if (sortedData.length === 0) {
+    return [];
+  }
+  const min = sortedData[0];
+  const max = sortedData[sortedData.length - 1];
+  const range = max - min;
+  const points = Array.from({ length: numPoints }, (_, i) => {
+    const t = i / (numPoints - 1);
+    return min + t * range;
+  });
+  const density = points.map((x) => {
+    const sum = sortedData.reduce((acc, xi) => {
+      const diff = x - xi;
+      return acc + Math.exp(-(diff * diff) / (2 * bandwidth * bandwidth));
+    }, 0);
+    const densityValue = sum / (sortedData.length * bandwidth * Math.sqrt(2 * Math.PI));
+    return [x, densityValue];
+  });
+  const maxDensity = Math.max(...density.map(([, y]) => y));
+  return density.map(([x, y]) => [x, y / maxDensity]);
+}
+function calculateBeeSwarmPositions(data, width, maxPoints = MAX_BEE_SWARM_POINTS_PER_GROUP, seed = 0, yToPixel = (value) => value) {
+  if (data.length > maxPoints) {
+    const shuffled = [...data];
+    let state = seed >>> 0;
+    const random = () => {
+      state = state * 1664525 + 1013904223 >>> 0;
+      return state / 2 ** 32;
+    };
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(random() * (i + 1));
+      const value = shuffled[i];
+      shuffled[i] = shuffled[j];
+      shuffled[j] = value;
+    }
+    const sampledData = shuffled.slice(0, maxPoints);
+    return calculateBeeSwarmPositionsForData(sampledData, width, yToPixel);
+  }
+  return calculateBeeSwarmPositionsForData(data, width, yToPixel);
+}
+function calculateBeeSwarmPositionsForData(data, width, yToPixel) {
+  const positions = [];
+  const radius = 2;
+  const spacing = radius * 2;
+  const sortedData = [...data].sort((a, b) => a - b);
+  const screenY = sortedData.map(yToPixel);
+  for (let index = 0; index < sortedData.length; index++) {
+    const value = sortedData[index];
+    const pointY = screenY[index];
+    let x = 0;
+    let attempts = 0;
+    const maxAttempts = 100;
+    while (attempts < maxAttempts) {
+      const overlaps = positions.some(([px], positionIndex) => {
+        const dx = x - px;
+        const dy = pointY - screenY[positionIndex];
+        return dx * dx + dy * dy < spacing * spacing;
+      });
+      if (!overlaps) {
+        break;
+      }
+      x = (x + spacing) % width;
+      attempts++;
+    }
+    positions.push([x, value]);
+  }
+  return positions;
+}
+var Y_SCALE_PADDING = 0.1;
+var BOX_PADDING = 0.2;
+function BoxPlot({
+  settings,
+  width,
+  height,
+  facetIds
+}) {
+  const [tooltip, setTooltip] = useState(null);
+  const updateChart = useDataLayer((s) => s.updateChart);
+  const getFieldLabel = useDataLayer((s) => s.getFieldLabel);
+  const fieldSettings = useDataLayer((s) => s.fieldSettings);
+  const formatFieldValue = useDataLayer((s) => s.formatFieldValue);
+  const { getColorForValue } = useColorScales();
+  void fieldSettings[settings.field];
+  if (settings.colorField) void fieldSettings[settings.colorField];
+  const allData = useGetColumnDataForIds(settings.field);
+  const allGroupData = useGetColumnDataForIds(settings.colorField);
+  const liveData = useGetLiveData(settings, settings.field, facetIds);
+  const colorFieldData = useGetLiveData(
+    settings,
+    settings.colorField,
+    facetIds
+  );
+  const hasColorField = !!settings.colorField;
+  const axisFields = getChartAxisFields(settings);
+  const xAxisLabel = getChartAxisLabel(
+    axisFields.x,
+    settings.xAxisLabel,
+    getFieldLabel
+  );
+  const yAxisLabel = getChartAxisLabel(
+    axisFields.y,
+    settings.yAxisLabel,
+    getFieldLabel
+  );
+  const margin = {
+    ...settings.margin,
+    left: Math.max(settings.margin.left, yAxisLabel ? 64 : 42),
+    bottom: Math.max(settings.margin.bottom, xAxisLabel ? 44 : 28)
+  };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const groupedData = useMemo(() => {
+    if (!hasColorField) {
+      const validData = finiteNumbers(liveData);
+      const result2 = [
+        {
+          group: "All Data",
+          data: validData
+        }
+      ];
+      return result2;
+    }
+    const groups = /* @__PURE__ */ new Map();
+    liveData.forEach((value, index) => {
+      const colorValue = categoryValue(colorFieldData[index]);
+      const numValue = finiteNumber(value);
+      if (numValue === void 0) return;
+      if (!groups.has(colorValue)) groups.set(colorValue, []);
+      groups.get(colorValue).push(numValue);
+    });
+    const result = Array.from(groups.entries()).map(([group, data]) => ({
+      group,
+      data
+    }));
+    return result;
+  }, [liveData, colorFieldData, hasColorField]);
+  const groupStats = useMemo(() => {
+    const stats = groupedData.map(({ group, data }) => ({
+      group,
+      stats: calculateBoxPlotStats(data, settings.whiskerType)
+    }));
+    return stats;
+  }, [groupedData, settings.whiskerType]);
+  const groupKDEs = useMemo(() => {
+    if (!settings.violinOverlay) {
+      return null;
+    }
+    return groupedData.map(({ group, data }) => {
+      const mean = data.reduce((sum, value) => sum + value, 0) / data.length;
+      const stdDev = Math.sqrt(
+        data.reduce((sum, value) => sum + (value - mean) ** 2, 0) / data.length
+      );
+      const autoBandwidth = Math.max(
+        1e-3,
+        1.06 * (stdDev || 1) * Math.pow(Math.max(1, data.length), -0.2)
+      );
+      const bandwidth = settings.autoBandwidth ? autoBandwidth : settings.violinBandwidth;
+      return {
+        group,
+        kde: calculateKernelDensity(data, bandwidth)
+      };
+    });
+  }, [
+    settings.violinOverlay,
+    settings.autoBandwidth,
+    settings.violinBandwidth,
+    groupedData
+  ]);
+  const xScale = useMemo(() => {
+    const groups = settings.colorField ? [...new Set(allGroupData.map(categoryLabel))] : ["All Data"];
+    const medians = /* @__PURE__ */ new Map();
+    if (settings.sortBy === "median") {
+      const values = /* @__PURE__ */ new Map();
+      allData.forEach((value, index) => {
+        const number = finiteNumber(value);
+        if (number === void 0) return;
+        const group = settings.colorField ? categoryLabel(allGroupData[index]) : "All Data";
+        if (!values.has(group)) values.set(group, []);
+        values.get(group).push(number);
+      });
+      values.forEach(
+        (data, group) => medians.set(
+          group,
+          calculateBoxPlotStats(data, settings.whiskerType).median
+        )
+      );
+    }
+    const sortedGroups = [...groups].sort((a, b) => {
+      if (settings.sortBy === "median") {
+        return (medians.get(b) ?? 0) - (medians.get(a) ?? 0);
+      }
+      return natsort()(a, b);
+    });
+    const scale = scaleBand().domain(sortedGroups).range([0, innerWidth]).padding(BOX_PADDING);
+    return scale;
+  }, [
+    allData,
+    allGroupData,
+    settings.colorField,
+    innerWidth,
+    settings.sortBy,
+    settings.whiskerType
+  ]);
+  const createPath = useCallback((points) => {
+    if (points.length === 0) {
+      return "";
+    }
+    return points.map((point, i) => `${i === 0 ? "M" : "L"} ${point[0]} ${point[1]}`).join(" ");
+  }, []);
+  const yScale = useMemo(() => {
+    const values = finiteNumbers(allData);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min;
+    const padding = range * Y_SCALE_PADDING;
+    const scale = numericScale(settings.yAxis).domain([
+      settings.yAxis.scaleType === "symlog" ? min : min - padding,
+      max + padding
+    ]).range([innerHeight, 0]);
+    return scale;
+  }, [allData, innerHeight, settings.yAxis]);
+  const groupBeeSwarmPositions = useMemo(() => {
+    if (!settings.beeSwarmOverlay) {
+      return null;
+    }
+    return groupedData.map(({ group, data }) => ({
+      group,
+      positions: calculateBeeSwarmPositions(
+        data,
+        xScale.bandwidth(),
+        MAX_BEE_SWARM_POINTS_PER_GROUP,
+        0,
+        yScale
+      )
+    }));
+  }, [groupedData, settings.beeSwarmOverlay, xScale, yScale]);
+  const beeSwarmIsSampled = settings.beeSwarmOverlay && groupedData.some(
+    ({ data }) => data.length > MAX_BEE_SWARM_POINTS_PER_GROUP
+  );
+  const activeFilter = useMemo(() => {
+    return settings.filters.find(
+      (f) => f.field === settings.colorField
+    );
+  }, [settings.filters, settings.colorField]);
+  const handleBoxClick = useCallback(
+    (group) => {
+      if (!settings.colorField) {
+        return;
+      }
+      let newValues = [];
+      if (activeFilter && activeFilter.type === "value") {
+        if (categoryIncludes(activeFilter.values, group)) {
+          newValues = activeFilter.values.filter(
+            (v) => !categoryEqual(v, group)
+          );
+        } else {
+          newValues = [...activeFilter.values, group];
+        }
+      } else {
+        newValues = [group];
+      }
+      const newFilters = settings.filters.filter(
+        (f) => f.field !== settings.colorField
+      );
+      if (newValues.length > 0) {
+        newFilters.push({
+          type: "value",
+          field: settings.colorField,
+          values: newValues
+        });
+      }
+      updateChart(settings.id, { filters: newFilters });
+    },
+    [
+      settings.colorField,
+      settings.filters,
+      settings.id,
+      activeFilter,
+      updateChart
+    ]
+  );
+  const isGroupFiltered = useCallback(
+    (group) => {
+      if (!settings.colorField) {
+        return true;
+      }
+      if (!activeFilter || activeFilter.type !== "value" || !activeFilter.values) {
+        return true;
+      }
+      return applyFilter(group, activeFilter);
+    },
+    [settings.colorField, activeFilter]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      style: { width, height },
+      onPointerLeave: () => setTooltip(null),
+      children: [
+        tooltip && /* @__PURE__ */ jsx("div", { role: "tooltip", className: "eda-tooltip", children: tooltip }),
+        /* @__PURE__ */ jsxs(
+          BaseChart,
+          {
+            width,
+            height,
+            xScale,
+            yScale,
+            brushingMode: "none",
+            settings: { ...settings, margin },
+            children: [
+              beeSwarmIsSampled && /* @__PURE__ */ jsxs(
+                "text",
+                {
+                  x: innerWidth,
+                  y: 14,
+                  textAnchor: "end",
+                  fontSize: 10,
+                  className: "fill-muted-foreground",
+                  pointerEvents: "none",
+                  children: [
+                    "Sample \u2264",
+                    MAX_BEE_SWARM_POINTS_PER_GROUP,
+                    "/group \xB7 boxes use all rows"
+                  ]
+                }
+              ),
+              groupStats.filter(({ stats }) => stats.totalCount > 0).map(({ group, stats }) => {
+                const isFiltered = isGroupFiltered(group);
+                const boxColor = isFiltered ? getColorForValue(
+                  settings.colorScaleId,
+                  group,
+                  settings.styles.boxFill
+                ) : "rgb(156 163 175)";
+                const xPos = xScale(categoryLabel(group)) ?? 0;
+                const boxWidth = xScale.bandwidth();
+                const kde = groupKDEs?.find((g) => g.group === group)?.kde;
+                const firstKde = kde?.[0];
+                const lastKde = kde?.at(-1);
+                const beeSwarmPositions = groupBeeSwarmPositions?.find(
+                  (g) => g.group === group
+                )?.positions;
+                const format = (value) => formatFieldValue(settings.field, value);
+                const formatGroup = (value) => settings.colorField ? formatFieldValue(settings.colorField, value) : categoryLabel(value);
+                const boxTooltipContent = /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("p", { className: "font-medium", children: [
+                    formatGroup(group),
+                    " ",
+                    /* @__PURE__ */ jsxs("span", { className: "font-normal text-muted-foreground", children: [
+                      "\xB7 ",
+                      stats.totalCount,
+                      " rows"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[auto_auto] gap-x-3", children: [
+                    /* @__PURE__ */ jsx("dt", { children: "Median" }),
+                    /* @__PURE__ */ jsx("dd", { className: "text-right tabular-nums", children: format(stats.median) }),
+                    /* @__PURE__ */ jsx("dt", { children: "Middle 50%" }),
+                    /* @__PURE__ */ jsxs("dd", { className: "text-right tabular-nums", children: [
+                      format(stats.q1),
+                      "\u2013",
+                      format(stats.q3)
+                    ] }),
+                    stats.outliers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("dt", { children: "Outliers" }),
+                      /* @__PURE__ */ jsx("dd", { className: "text-right", children: stats.outliers.length })
+                    ] })
+                  ] })
+                ] });
+                const whiskerTooltipContent = /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: formatGroup(group) }),
+                  /* @__PURE__ */ jsxs("p", { children: [
+                    "Whiskers ",
+                    format(stats.whiskerLow),
+                    "\u2013",
+                    format(stats.whiskerHigh)
+                  ] })
+                ] });
+                return /* @__PURE__ */ jsxs("g", { transform: `translate(${xPos}, 0)`, children: [
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      onPointerEnter: () => setTooltip(whiskerTooltipContent),
+                      onPointerLeave: () => setTooltip(null),
+                      x1: boxWidth / 2,
+                      x2: boxWidth / 2,
+                      y1: yScale(stats.whiskerHigh),
+                      y2: yScale(stats.whiskerLow),
+                      stroke: boxColor,
+                      strokeWidth: settings.styles.whiskerStrokeWidth
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      onPointerEnter: () => setTooltip(boxTooltipContent),
+                      onPointerMove: () => setTooltip(boxTooltipContent),
+                      onPointerLeave: () => setTooltip(null),
+                      onFocus: () => setTooltip(boxTooltipContent),
+                      onBlur: () => setTooltip(null),
+                      role: settings.colorField ? "button" : void 0,
+                      tabIndex: settings.colorField ? 0 : void 0,
+                      "aria-label": `${group}: median ${stats.median.toFixed(2)}, ${stats.totalCount} records`,
+                      "aria-pressed": activeFilter?.type === "value" ? categoryIncludes(activeFilter.values, group) : false,
+                      onKeyDown: (event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          handleBoxClick(group);
+                        }
+                      },
+                      className: "chart-mark",
+                      rx: 2,
+                      x: boxWidth * 0.15,
+                      y: yScale(stats.q3),
+                      width: boxWidth * 0.7,
+                      height: yScale(stats.q1) - yScale(stats.q3),
+                      fill: boxColor,
+                      stroke: settings.styles.boxStroke,
+                      strokeWidth: settings.styles.boxStrokeWidth,
+                      onClick: () => handleBoxClick(group),
+                      style: {
+                        cursor: settings.colorField ? "pointer" : "default"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      pointerEvents: "none",
+                      x1: 0,
+                      x2: boxWidth,
+                      y1: yScale(stats.median),
+                      y2: yScale(stats.median),
+                      stroke: settings.styles.medianStroke,
+                      strokeWidth: settings.styles.medianStrokeWidth
+                    }
+                  ),
+                  settings.showOutliers && stats.outliers.map((value, i) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      onPointerEnter: () => setTooltip(/* @__PURE__ */ jsxs("span", { children: [
+                        "Outlier: ",
+                        format(value)
+                      ] })),
+                      onPointerLeave: () => setTooltip(null),
+                      cx: boxWidth / 2,
+                      cy: yScale(value),
+                      r: settings.styles.outlierSize,
+                      fill: boxColor,
+                      stroke: settings.styles.outlierStroke
+                    },
+                    i
+                  )),
+                  settings.violinOverlay && kde && firstKde && lastKde && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: createPath(
+                        settings.beeSwarmOverlay ? (
+                          // If bee swarm is enabled, only show left half of violin
+                          [
+                            [boxWidth / 2, yScale(firstKde[0])],
+                            ...kde.map(
+                              ([x, y]) => [
+                                boxWidth / 2 - y * boxWidth * 0.4,
+                                yScale(x)
+                              ]
+                            ),
+                            [boxWidth / 2, yScale(lastKde[0])]
+                          ]
+                        ) : (
+                          // Otherwise show full violin
+                          [
+                            [boxWidth / 2, yScale(firstKde[0])],
+                            ...kde.map(
+                              ([x, y]) => [
+                                boxWidth / 2 + y * boxWidth * 0.4,
+                                yScale(x)
+                              ]
+                            ),
+                            ...[...kde].reverse().map(
+                              ([x, y]) => [
+                                boxWidth / 2 - y * boxWidth * 0.4,
+                                yScale(x)
+                              ]
+                            )
+                          ]
+                        )
+                      ),
+                      fill: boxColor,
+                      fillOpacity: 0.2,
+                      stroke: boxColor,
+                      strokeWidth: 1,
+                      pointerEvents: "none"
+                    }
+                  ) }),
+                  settings.beeSwarmOverlay && beeSwarmPositions && /* @__PURE__ */ jsx("g", { children: beeSwarmPositions.map(([x, y], i) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: settings.violinOverlay ? boxWidth / 2 + Math.abs(x) : boxWidth / 2 + x,
+                      cy: yScale(y),
+                      r: 2,
+                      fill: boxColor,
+                      fillOpacity: 0.5,
+                      stroke: "none",
+                      pointerEvents: "none"
+                    },
+                    i
+                  )) })
+                ] }, categoryLabel(group));
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function BoxPlotSettingsPanel({
+  settings,
+  onSettingsChange
+}) {
+  const { getOrCreateScaleForField } = useColorScales();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "field", children: "Field" }),
+      /* @__PURE__ */ jsx(
+        FieldSelector,
+        {
+          label: "",
+          value: settings.field,
+          onChange: (value) => onSettingsChange({ ...settings, field: value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "colorField", children: "Color Field" }),
+      /* @__PURE__ */ jsx(
+        FieldSelector,
+        {
+          label: "",
+          value: settings.colorField ?? "",
+          allowClear: true,
+          onChange: (value) => onSettingsChange({
+            ...settings,
+            colorField: value || void 0,
+            colorScaleId: value ? getOrCreateScaleForField(value) : void 0
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "whiskerType", children: "Whisker Type" }),
+      /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          value: settings.whiskerType,
+          options: ["tukey", "minmax", "stdDev"],
+          onChange: (value) => onSettingsChange({
+            ...settings,
+            whiskerType: value
+          }),
+          placeholder: "Select whisker type",
+          optionToString: (option) => option
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "showOutliers", children: "Show Outliers" }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: "showOutliers",
+          checked: settings.showOutliers,
+          onCheckedChange: (checked) => onSettingsChange({ ...settings, showOutliers: checked })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "sortBy", children: "Sort By" }),
+      /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          value: settings.sortBy,
+          options: ["median", "label"],
+          onChange: (value) => onSettingsChange({
+            ...settings,
+            sortBy: value
+          }),
+          placeholder: "Select sorting method",
+          optionToString: (option) => option
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "violinOverlay", children: "Violin Overlay" }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: "violinOverlay",
+          checked: settings.violinOverlay,
+          onCheckedChange: (checked) => onSettingsChange({ ...settings, violinOverlay: checked })
+        }
+      )
+    ] }),
+    settings.violinOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "autoBandwidth", children: "Auto Bandwidth" }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: "autoBandwidth",
+            checked: settings.autoBandwidth,
+            onCheckedChange: (checked) => onSettingsChange({ ...settings, autoBandwidth: checked })
+          }
+        )
+      ] }),
+      !settings.autoBandwidth && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "violinBandwidth", children: "Bandwidth" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            id: "violinBandwidth",
+            min: "0.1",
+            max: "1",
+            step: "0.1",
+            value: settings.violinBandwidth,
+            onChange: (e) => onSettingsChange({
+              ...settings,
+              violinBandwidth: parseFloat(e.target.value)
+            }),
+            className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "beeSwarmOverlay", children: "Bee Swarm" }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: "beeSwarmOverlay",
+          checked: settings.beeSwarmOverlay,
+          onCheckedChange: (checked) => onSettingsChange({ ...settings, beeSwarmOverlay: checked })
+        }
+      )
+    ] })
+  ] });
+}
+function BoxPlotIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "200",
+      height: "200",
+      viewBox: "0 0 32 32",
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M22 6V4H12v2h4v2h-4v12h4v2h-4v2h10v-2h-4v-2h4V8h-4V6Zm-8 12v-3h6v3Zm6-5h-6v-3h6Z"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M30 30H4a2 2 0 0 1-2-2V2h2v26h26Z" })
+      ]
+    }
+  );
+}
+
+// src/components/charts/BoxPlot/definition.ts
+var boxPlotDefinition = {
+  type: "boxplot",
+  name: "Box Plot",
+  description: "Display distribution of values with quartiles and outliers",
+  icon: BoxPlotIcon,
+  component: BoxPlot,
+  settingsPanel: BoxPlotSettingsPanel,
+  createDefaultSettings: (layout, field) => ({
+    ...DEFAULT_CHART_SETTINGS,
+    id: crypto.randomUUID(),
+    field: field ?? "",
+    type: "boxplot",
+    title: "Box Plot",
+    layout,
+    whiskerType: "tukey",
+    showOutliers: true,
+    violinOverlay: false,
+    beeSwarmOverlay: false,
+    sortBy: "label",
+    violinBandwidth: 0.3,
+    autoBandwidth: true,
+    styles: {
+      boxFill: "hsl(217.2 91.2% 59.8%)",
+      boxStroke: "black",
+      boxStrokeWidth: 1,
+      medianStroke: "white",
+      medianStrokeWidth: 2,
+      whiskerStroke: "black",
+      whiskerStrokeWidth: 1,
+      outlierSize: 3,
+      outlierStroke: "black",
+      outlierFill: "none"
+    },
+    filters: [],
+    xAxis: DEFAULT_CHART_SETTINGS.xAxis,
+    yAxis: DEFAULT_CHART_SETTINGS.yAxis,
+    margin: DEFAULT_CHART_SETTINGS.margin,
+    facet: DEFAULT_CHART_SETTINGS.facet,
+    colorScaleId: void 0,
+    colorField: void 0,
+    xAxisLabel: "",
+    yAxisLabel: "",
+    xGridLines: 5,
+    yGridLines: 5
+  }),
+  validateSettings: (settings) => {
+    return !!settings.field;
+  },
+  getFilterFunction: (settings, fieldGetter) => {
+    if (!settings.colorField) {
+      return () => true;
+    }
+    const dataHash = fieldGetter(settings.colorField);
+    const filter = settings.filters.find(
+      (f) => f.field === settings.colorField
+    );
+    return (d) => {
+      const value = dataHash[d];
+      if (filter) {
+        if (!applyFilter(value, filter)) {
+          return false;
+        }
+      }
+      return true;
+    };
+  }
+};
+
+export { boxPlotDefinition };
+//# sourceMappingURL=chunk-FM46QSDM.js.map
+//# sourceMappingURL=chunk-FM46QSDM.js.map