exploreda 0.0.6 → 0.1.0

package/dist/chunk-CGDWDV4Z.js

@@ -0,0 +1,1211 @@
+import { BaseChart, formatTick } from './chunk-UJWS6TRV.js';
+import { numericScale } from './chunk-7PTJNIOD.js';
+import { FieldSelector, ComboBox } from './chunk-SFV5LZPD.js';
+import { NumericInputEnter } from './chunk-BIMEHDLB.js';
+import { Switch } from './chunk-Q7LK2UWH.js';
+import { useGetColumnDataForIds, useGetLiveIds, useGetColumnDataForMultipleIds } from './chunk-ZD64SCZB.js';
+import { applyFilter } from './chunk-YXPAWUXO.js';
+import { useColumnNames, multi_select_default } from './chunk-SWLNKY6R.js';
+import { Label } from './chunk-MJPDJ5AS.js';
+import { useDataLayer, finiteNumber, getChartAxisFields, getChartAxisLabel, hasFieldDisplayFormat } from './chunk-JNO7OXCC.js';
+import { LineChart as LineChart$1 } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { extent } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import { useState, useMemo, useEffect, useId } from 'react';
+
+function AxisReadout({
+  x: x2,
+  y: y2,
+  xValue,
+  yValue,
+  width,
+  height,
+  color,
+  label,
+  rightAxis = false,
+  radius = 4,
+  xFormatter = formatTick,
+  yFormatter = formatTick
+}) {
+  if (![x2, y2, xValue, yValue].every(Number.isFinite)) return null;
+  const xText = xFormatter(xValue);
+  const yText = yFormatter(yValue);
+  const xLabelWidth = xText.length * 6 + 12;
+  const yLabelWidth = yText.length * 6 + 12;
+  const labelX = Math.max(
+    xLabelWidth / 2,
+    Math.min(width - xLabelWidth / 2, x2)
+  );
+  const edge = rightAxis ? width : 0;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: "eda-axis-readout",
+      pointerEvents: "none",
+      role: "img",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            stroke: color,
+            strokeOpacity: 0.4,
+            strokeWidth: 1,
+            strokeDasharray: "2 3",
+            children: [
+              /* @__PURE__ */ jsx("line", { x1: x2, x2, y1: y2, y2: height + 3 }),
+              /* @__PURE__ */ jsx("line", { x1: x2, x2: edge, y1: y2, y2 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: x2,
+            cy: y2,
+            r: radius,
+            fill: "var(--card)",
+            stroke: color,
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: x2, cy: y2, r: 2, fill: color }),
+        /* @__PURE__ */ jsxs("g", { fill: "var(--card)", children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: labelX - xLabelWidth / 2,
+              y: height + 5,
+              width: xLabelWidth,
+              height: 20
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: rightAxis ? edge + 3 : -yLabelWidth - 3,
+              y: y2 - 10,
+              width: yLabelWidth,
+              height: 20
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("g", { fill: color, fontSize: 10, fontWeight: 600, children: [
+          /* @__PURE__ */ jsx("text", { x: labelX, y: height + 18, textAnchor: "middle", children: xText }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: rightAxis ? edge + 8 : -8,
+              y: y2,
+              dy: ".32em",
+              textAnchor: rightAxis ? "start" : "end",
+              children: yText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/lib/chartUtils.ts
+function reduceDataPoints(data, numBuckets) {
+  if (!data || data.length === 0) {
+    return [];
+  }
+  const validBuckets = Math.max(1, Math.min(1e3, Math.floor(numBuckets)));
+  const orderedData = [...data].sort((a, b) => {
+    const aFinite = Number.isFinite(a.x);
+    const bFinite = Number.isFinite(b.x);
+    if (aFinite !== bFinite) return aFinite ? -1 : 1;
+    return aFinite ? a.x - b.x : 0;
+  });
+  if (data.length <= validBuckets * 3) {
+    return orderedData.map((point2) => ({ ...point2, type: "start" }));
+  }
+  const xExtent = {
+    min: Math.min(...orderedData.map((d) => d.x)),
+    max: Math.max(...orderedData.map((d) => d.x))
+  };
+  if (xExtent.min === xExtent.max) {
+    const firstPoint = data[0];
+    return firstPoint ? [{ ...firstPoint, type: "start" }] : [];
+  }
+  const buckets = Array(validBuckets).fill(null).map(() => []);
+  orderedData.forEach((point2) => {
+    const bucketIndex = Math.min(
+      Math.floor(
+        (point2.x - xExtent.min) / (xExtent.max - xExtent.min) * validBuckets
+      ),
+      validBuckets - 1
+    );
+    buckets[bucketIndex]?.push({ ...point2, type: "start" });
+  });
+  const result = [];
+  buckets.forEach((bucket) => {
+    if (bucket.length === 0) {
+      return;
+    }
+    const firstPoint = bucket[0];
+    if (!firstPoint) {
+      return;
+    }
+    result.push({ ...firstPoint, type: "start" });
+    if (bucket.length > 1) {
+      const minPoint = bucket.reduce((min, p) => p.y < min.y ? p : min);
+      const maxPoint = bucket.reduce((max, p) => p.y > max.y ? p : max);
+      if (minPoint !== firstPoint) {
+        result.push({ ...minPoint, type: "min" });
+      }
+      if (maxPoint !== firstPoint && maxPoint !== minPoint) {
+        result.push({ ...maxPoint, type: "max" });
+      }
+    }
+  });
+  return result.sort((a, b) => a.x - b.x);
+}
+
+// ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/constant.js
+function constant_default(x2) {
+  return function constant() {
+    return x2;
+  };
+}
+
+// ../../node_modules/.pnpm/d3-path@3.1.0/node_modules/d3-path/src/path.js
+var pi = Math.PI;
+var tau = 2 * pi;
+var epsilon = 1e-6;
+var tauEpsilon = tau - epsilon;
+function append(strings) {
+  this._ += strings[0];
+  for (let i = 1, n = strings.length; i < n; ++i) {
+    this._ += arguments[i] + strings[i];
+  }
+}
+function appendRound(digits) {
+  let d = Math.floor(digits);
+  if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
+  if (d > 15) return append;
+  const k = 10 ** d;
+  return function(strings) {
+    this._ += strings[0];
+    for (let i = 1, n = strings.length; i < n; ++i) {
+      this._ += Math.round(arguments[i] * k) / k + strings[i];
+    }
+  };
+}
+var Path = class {
+  constructor(digits) {
+    this._x0 = this._y0 = // start of current subpath
+    this._x1 = this._y1 = null;
+    this._ = "";
+    this._append = digits == null ? append : appendRound(digits);
+  }
+  moveTo(x2, y2) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}`;
+  }
+  closePath() {
+    if (this._x1 !== null) {
+      this._x1 = this._x0, this._y1 = this._y0;
+      this._append`Z`;
+    }
+  }
+  lineTo(x2, y2) {
+    this._append`L${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  quadraticCurveTo(x1, y1, x2, y2) {
+    this._append`Q${+x1},${+y1},${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  bezierCurveTo(x1, y1, x2, y2, x3, y3) {
+    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x3},${this._y1 = +y3}`;
+  }
+  arcTo(x1, y1, x2, y2, r) {
+    x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+    let x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
+    if (this._x1 === null) {
+      this._append`M${this._x1 = x1},${this._y1 = y1}`;
+    } else if (!(l01_2 > epsilon)) ;
+    else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
+      this._append`L${this._x1 = x1},${this._y1 = y1}`;
+    } else {
+      let x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l / l01, t21 = l / l21;
+      if (Math.abs(t01 - 1) > epsilon) {
+        this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
+      }
+      this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
+    }
+  }
+  arc(x2, y2, r, a0, a1, ccw) {
+    x2 = +x2, y2 = +y2, r = +r, ccw = !!ccw;
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+    let dx = r * Math.cos(a0), dy = r * Math.sin(a0), x0 = x2 + dx, y0 = y2 + dy, cw = 1 ^ ccw, da = ccw ? a0 - a1 : a1 - a0;
+    if (this._x1 === null) {
+      this._append`M${x0},${y0}`;
+    } else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
+      this._append`L${x0},${y0}`;
+    }
+    if (!r) return;
+    if (da < 0) da = da % tau + tau;
+    if (da > tauEpsilon) {
+      this._append`A${r},${r},0,1,${cw},${x2 - dx},${y2 - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
+    } else if (da > epsilon) {
+      this._append`A${r},${r},0,${+(da >= pi)},${cw},${this._x1 = x2 + r * Math.cos(a1)},${this._y1 = y2 + r * Math.sin(a1)}`;
+    }
+  }
+  rect(x2, y2, w, h) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}h${w = +w}v${+h}h${-w}Z`;
+  }
+  toString() {
+    return this._;
+  }
+};
+
+// ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/path.js
+function withPath(shape) {
+  let digits = 3;
+  shape.digits = function(_) {
+    if (!arguments.length) return digits;
+    if (_ == null) {
+      digits = null;
+    } else {
+      const d = Math.floor(_);
+      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
+      digits = d;
+    }
+    return shape;
+  };
+  return () => new Path(digits);
+}
+function array_default(x2) {
+  return typeof x2 === "object" && "length" in x2 ? x2 : Array.from(x2);
+}
+
+// ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/curve/linear.js
+function Linear(context) {
+  this._context = context;
+}
+Linear.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._point = 0;
+  },
+  lineEnd: function() {
+    if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+    this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    x2 = +x2, y2 = +y2;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+      // falls through
+      default:
+        this._context.lineTo(x2, y2);
+        break;
+    }
+  }
+};
+function linear_default(context) {
+  return new Linear(context);
+}
+
+// ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/point.js
+function x(p) {
+  return p[0];
+}
+function y(p) {
+  return p[1];
+}
+
+// ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/line.js
+function line_default(x2, y2) {
+  var defined = constant_default(true), context = null, curve = linear_default, output = null, path2 = withPath(line);
+  x2 = typeof x2 === "function" ? x2 : x2 === void 0 ? x : constant_default(x2);
+  y2 = typeof y2 === "function" ? y2 : y2 === void 0 ? y : constant_default(y2);
+  function line(data) {
+    var i, n = (data = array_default(data)).length, d, defined0 = false, buffer;
+    if (context == null) output = curve(buffer = path2());
+    for (i = 0; i <= n; ++i) {
+      if (!(i < n && defined(d = data[i], i, data)) === defined0) {
+        if (defined0 = !defined0) output.lineStart();
+        else output.lineEnd();
+      }
+      if (defined0) output.point(+x2(d, i, data), +y2(d, i, data));
+    }
+    if (buffer) return output = null, buffer + "" || null;
+  }
+  line.x = function(_) {
+    return arguments.length ? (x2 = typeof _ === "function" ? _ : constant_default(+_), line) : x2;
+  };
+  line.y = function(_) {
+    return arguments.length ? (y2 = typeof _ === "function" ? _ : constant_default(+_), line) : y2;
+  };
+  line.defined = function(_) {
+    return arguments.length ? (defined = typeof _ === "function" ? _ : constant_default(!!_), line) : defined;
+  };
+  line.curve = function(_) {
+    return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;
+  };
+  line.context = function(_) {
+    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;
+  };
+  return line;
+}
+
+// ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/curve/monotone.js
+function sign(x2) {
+  return x2 < 0 ? -1 : 1;
+}
+function slope3(that, x2, y2) {
+  var h0 = that._x1 - that._x0, h1 = x2 - that._x1, s0 = (that._y1 - that._y0) / (h0 || h1 < 0 && -0), s1 = (y2 - that._y1) / (h1 || h0 < 0 && -0), p = (s0 * h1 + s1 * h0) / (h0 + h1);
+  return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0;
+}
+function slope2(that, t) {
+  var h = that._x1 - that._x0;
+  return h ? (3 * (that._y1 - that._y0) / h - t) / 2 : t;
+}
+function point(that, t0, t1) {
+  var x0 = that._x0, y0 = that._y0, x1 = that._x1, y1 = that._y1, dx = (x1 - x0) / 3;
+  that._context.bezierCurveTo(x0 + dx, y0 + dx * t0, x1 - dx, y1 - dx * t1, x1, y1);
+}
+function MonotoneX(context) {
+  this._context = context;
+}
+MonotoneX.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._y0 = this._y1 = this._t0 = NaN;
+    this._point = 0;
+  },
+  lineEnd: function() {
+    switch (this._point) {
+      case 2:
+        this._context.lineTo(this._x1, this._y1);
+        break;
+      case 3:
+        point(this, this._t0, slope2(this, this._t0));
+        break;
+    }
+    if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+    this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    var t1 = NaN;
+    x2 = +x2, y2 = +y2;
+    if (x2 === this._x1 && y2 === this._y1) return;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+        break;
+      case 2:
+        this._point = 3;
+        point(this, slope2(this, t1 = slope3(this, x2, y2)), t1);
+        break;
+      default:
+        point(this, this._t0, t1 = slope3(this, x2, y2));
+        break;
+    }
+    this._x0 = this._x1, this._x1 = x2;
+    this._y0 = this._y1, this._y1 = y2;
+    this._t0 = t1;
+  }
+};
+(Object.create(MonotoneX.prototype)).point = function(x2, y2) {
+  MonotoneX.prototype.point.call(this, y2, x2);
+};
+function monotoneX(context) {
+  return new MonotoneX(context);
+}
+
+// ../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/curve/step.js
+function Step(context, t) {
+  this._context = context;
+  this._t = t;
+}
+Step.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x = this._y = NaN;
+    this._point = 0;
+  },
+  lineEnd: function() {
+    if (0 < this._t && this._t < 1 && this._point === 2) this._context.lineTo(this._x, this._y);
+    if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+    if (this._line >= 0) this._t = 1 - this._t, this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    x2 = +x2, y2 = +y2;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+      // falls through
+      default: {
+        if (this._t <= 0) {
+          this._context.lineTo(this._x, y2);
+          this._context.lineTo(x2, y2);
+        } else {
+          var x1 = this._x * (1 - this._t) + x2 * this._t;
+          this._context.lineTo(x1, this._y);
+          this._context.lineTo(x1, y2);
+        }
+        break;
+      }
+    }
+    this._x = x2, this._y = y2;
+  }
+};
+function stepAfter(context) {
+  return new Step(context, 1);
+}
+var curveTypes = {
+  linear: linear_default,
+  monotoneX,
+  step: stepAfter
+};
+var COLOR_PALETTES = {
+  default: [
+    "#2563eb",
+    // blue-600
+    "#dc2626",
+    // red-600
+    "#9333ea",
+    // purple-600
+    "#ea580c",
+    // orange-600
+    "#0891b2",
+    // cyan-600
+    "#4f46e5",
+    // indigo-600
+    "#be123c",
+    // rose-600
+    "#ca8a04",
+    // yellow-600
+    "#16a34a",
+    // green-600
+    "#059669"
+    // emerald-600
+  ]
+};
+var LineChart = ({
+  settings,
+  width,
+  height,
+  facetIds
+}) => {
+  const [hovered, setHovered] = useState(null);
+  const updateChart = useDataLayer((state) => state.updateChart);
+  const getFieldLabel = useDataLayer((state) => state.getFieldLabel);
+  const formatFieldValue = useDataLayer((state) => state.formatFieldValue);
+  const fieldSettings = useDataLayer((state) => state.fieldSettings);
+  const displayValue = (field, value) => hasFieldDisplayFormat(fieldSettings[field]) ? formatFieldValue?.(field, value) ?? String(value) : String(value);
+  const allXData = useGetColumnDataForIds(settings.xField);
+  const liveIds = useGetLiveIds(settings);
+  const selectedIds = useMemo(
+    () => facetIds ? liveIds.filter((id) => facetIds.includes(id)) : liveIds,
+    [liveIds, facetIds]
+  );
+  const liveXData = useGetColumnDataForIds(settings.xField, selectedIds);
+  const allSeriesData = useGetColumnDataForMultipleIds(settings.seriesField);
+  const liveSeriesData = useGetColumnDataForMultipleIds(
+    settings.seriesField,
+    selectedIds
+  );
+  const baseMargin = settings.margin;
+  const yValuesByAxis = settings.seriesField.reduce(
+    (values, field) => {
+      const useRightAxis = settings.seriesSettings[field]?.useRightAxis;
+      (allSeriesData[field] ?? []).forEach((value) => {
+        const y2 = finiteNumber(value) ?? NaN;
+        if (Number.isFinite(y2)) {
+          values[useRightAxis ? "right" : "left"].push(y2);
+        }
+      });
+      return values;
+    },
+    { left: [], right: [] }
+  );
+  const leftYExtent = extent(yValuesByAxis.left);
+  const leftYTicks = Number.isFinite(leftYExtent[0]) ? scaleLinear().domain(leftYExtent).nice().ticks(5) : [];
+  const axisFields = getChartAxisFields(settings);
+  const xAxisLabel = getChartAxisLabel(
+    axisFields.x,
+    settings.xAxisLabel,
+    getFieldLabel
+  );
+  const yAxisLabel = getChartAxisLabel(
+    axisFields.y,
+    settings.yAxisLabel,
+    getFieldLabel
+  );
+  const requestedLabelMargin = Math.max(
+    baseMargin.left,
+    ...leftYTicks.map(
+      (tick) => String(tick).length * 7 + (yAxisLabel ? 38 : 18)
+    )
+  );
+  const minPlotWidth = Math.min(
+    80,
+    Math.max(0, width - baseMargin.left - baseMargin.right)
+  );
+  const maxLabelMargin = Math.max(0, width - baseMargin.right - minPlotWidth);
+  const margin = {
+    ...baseMargin,
+    left: Math.min(requestedLabelMargin, maxLabelMargin),
+    bottom: Math.max(baseMargin.bottom, xAxisLabel ? 46 : 28)
+  };
+  if (settings.seriesField.some(
+    (field) => settings.seriesSettings[field]?.useRightAxis
+  )) {
+    margin.right = Math.max(margin.right, 60);
+  }
+  if (settings.showLegend) {
+    switch (settings.legendPosition) {
+      case "top":
+        margin.top += 18;
+        break;
+      case "bottom":
+        margin.bottom += 18;
+        break;
+      case "right":
+        margin.right += Math.min(110, width * 0.24);
+        break;
+      case "left":
+        margin.left += Math.min(110, width * 0.24);
+        break;
+    }
+  }
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const processedLiveSeriesData = useMemo(() => {
+    const orderedIndices = liveXData.map((_, index) => index).sort((a, b) => {
+      const aValue = liveXData[a];
+      const bValue = liveXData[b];
+      const aX = finiteNumber(aValue) ?? NaN;
+      const bX = finiteNumber(bValue) ?? NaN;
+      const aFinite = Number.isFinite(aX);
+      const bFinite = Number.isFinite(bX);
+      if (aFinite !== bFinite) return aFinite ? -1 : 1;
+      return aFinite ? aX - bX || a - b : a - b;
+    });
+    return settings.seriesField.map((field) => {
+      const data = liveSeriesData[field] ?? [];
+      const reducedData = [];
+      let segment = [];
+      const flushSegment = () => {
+        if (segment.length > 0) {
+          reducedData.push(...reduceDataPoints(segment, innerWidth));
+          segment = [];
+        }
+      };
+      orderedIndices.forEach((i) => {
+        const value = data[i];
+        const xValue = liveXData[i];
+        const x2 = finiteNumber(xValue) ?? NaN;
+        const y2 = finiteNumber(value) ?? NaN;
+        if (!Number.isFinite(x2) || !Number.isFinite(y2)) {
+          flushSegment();
+          reducedData.push({ x: x2, y: null });
+          return;
+        }
+        segment.push({ x: x2, y: y2 });
+      });
+      flushSegment();
+      return { name: field, data: reducedData };
+    });
+  }, [settings.seriesField, liveSeriesData, liveXData, innerWidth]);
+  const seriesColors = useMemo(() => {
+    const colors = {};
+    const palette = COLOR_PALETTES.default;
+    const usedPaletteColors = /* @__PURE__ */ new Set();
+    settings.seriesField.forEach((field) => {
+      const existingColor = settings.seriesSettings[field]?.lineColor;
+      if (existingColor && existingColor !== "#000000") {
+        colors[field] = existingColor;
+        if (palette.includes(existingColor)) {
+          usedPaletteColors.add(existingColor);
+        }
+      }
+    });
+    const unusedPaletteColors = palette.filter(
+      (color) => !usedPaletteColors.has(color)
+    );
+    settings.seriesField.forEach((field) => {
+      if (colors[field]) return;
+      const nextColor = unusedPaletteColors.shift();
+      colors[field] = nextColor ?? palette[settings.seriesField.indexOf(field) % palette.length];
+    });
+    return colors;
+  }, [settings.seriesField, settings.seriesSettings]);
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const newSeriesSettings = { ...settings.seriesSettings };
+      let hasChanges = false;
+      settings.seriesField.forEach((field) => {
+        if (!newSeriesSettings[field]) {
+          newSeriesSettings[field] = { ...DEFAULT_SERIES_SETTINGS };
+          hasChanges = true;
+        }
+        if (!newSeriesSettings[field]?.lineColor || newSeriesSettings[field]?.lineColor === "default") {
+          newSeriesSettings[field] = {
+            ...newSeriesSettings[field],
+            lineColor: seriesColors[field]
+          };
+          hasChanges = true;
+        }
+      });
+      if (hasChanges) {
+        updateChart(settings.id, {
+          seriesSettings: newSeriesSettings
+        });
+      }
+    });
+  }, [
+    seriesColors,
+    settings.id,
+    settings.seriesField,
+    settings.seriesSettings,
+    updateChart
+  ]);
+  if (processedLiveSeriesData.length === 0) {
+    return null;
+  }
+  const xExtent = extent(
+    allXData.map((value) => finiteNumber(value) ?? NaN).filter(Number.isFinite)
+  );
+  const rightAxisSeries = processedLiveSeriesData.filter(
+    (series) => settings.seriesSettings[series.name]?.useRightAxis
+  );
+  const rightYExtent = extent(yValuesByAxis.right);
+  const xScale = numericScale(settings.xAxis).domain(xExtent).range([0, innerWidth]).nice();
+  const leftYScale = numericScale(settings.yAxis).domain(leftYExtent).range([innerHeight, 0]).nice();
+  const rightYScale = numericScale(settings.yAxis).domain(rightYExtent).range([innerHeight, 0]).nice();
+  const createLineGenerator = (yField) => line_default().defined((d) => d.y != null && Number.isFinite(d.x)).x((d) => xScale(d.x)).y(
+    (d) => settings.seriesSettings[yField]?.useRightAxis ? rightYScale(d.y ?? 0) : leftYScale(d.y ?? 0)
+  ).curve(curveTypes[settings.styles.curveType]);
+  const Legend = () => {
+    if (!settings.showLegend) return null;
+    const vertical = settings.legendPosition === "left" || settings.legendPosition === "right";
+    const sideWidth = Math.min(100, width * 0.22);
+    const position = settings.legendPosition === "top" ? { top: 0, left: margin.left, right: baseMargin.right } : settings.legendPosition === "bottom" ? { bottom: 0, left: margin.left, right: baseMargin.right } : settings.legendPosition === "left" ? { left: 0, top: margin.top, width: sideWidth } : { right: 0, top: margin.top, width: sideWidth };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "eda-line-legend",
+        style: { ...position, flexDirection: vertical ? "column" : "row" },
+        "aria-label": "Chart series",
+        children: settings.seriesField.map((name) => /* @__PURE__ */ jsxs("span", { className: "eda-line-legend-item", children: [
+          /* @__PURE__ */ jsx("svg", { width: "14", height: "6", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: "0",
+              x2: "14",
+              y1: "3",
+              y2: "3",
+              stroke: seriesColors[name],
+              strokeWidth: "2",
+              strokeDasharray: settings.seriesSettings[name]?.lineStyle === "dashed" ? "4 2" : settings.seriesSettings[name]?.lineStyle === "dotted" ? "1 2" : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            name,
+            settings.seriesSettings[name]?.useRightAxis ? " \u2197" : ""
+          ] })
+        ] }, name))
+      }
+    );
+  };
+  const hoverX = hovered ? hovered.x : NaN;
+  const hoverY = hovered ? hovered.y : NaN;
+  const hoverRight = hovered ? settings.seriesSettings[hovered.field]?.useRightAxis : false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      style: { width, height },
+      onPointerLeave: () => setHovered(null),
+      onPointerDownCapture: () => setHovered(null),
+      onKeyDownCapture: (event) => {
+        if (event.key === "Escape") setHovered(null);
+      },
+      onPointerMove: (event) => {
+        if (event.buttons) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x2 = event.clientX - rect.left - margin.left;
+        const y2 = event.clientY - rect.top - margin.top;
+        if (x2 < 0 || x2 > innerWidth || y2 < 0 || y2 > innerHeight) {
+          setHovered(null);
+          return;
+        }
+        const target = xScale.invert(x2);
+        let nearestX = NaN;
+        let distance = Infinity;
+        for (const series of processedLiveSeriesData) {
+          for (const point2 of series.data) {
+            if (!Number.isFinite(point2.x)) continue;
+            const next = Math.abs(point2.x - target);
+            if (next < distance) {
+              nearestX = point2.x;
+              distance = next;
+            }
+          }
+        }
+        if (!Number.isFinite(nearestX)) {
+          setHovered(null);
+          return;
+        }
+        let field = null;
+        let valueAtX = NaN;
+        distance = Infinity;
+        for (const series of processedLiveSeriesData) {
+          for (const point2 of series.data) {
+            if (point2.x !== nearestX || point2.y == null) continue;
+            const scale = settings.seriesSettings[series.name]?.useRightAxis ? rightYScale : leftYScale;
+            const next = Math.abs(scale(point2.y) - y2);
+            if (next < distance) {
+              field = series.name;
+              valueAtX = point2.y;
+              distance = next;
+            }
+          }
+        }
+        setHovered(field === null ? null : { x: nearestX, y: valueAtX, field });
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseChart,
+          {
+            width,
+            height,
+            xScale,
+            yScale: leftYScale,
+            settings: {
+              ...settings,
+              margin,
+              xAxis: {
+                ...settings.xAxis,
+                grid: settings.xAxis.grid ?? settings.showYGrid
+              },
+              yAxis: {
+                ...settings.yAxis,
+                grid: settings.yAxis.grid ?? settings.showXGrid
+              }
+            },
+            overlay: /* @__PURE__ */ jsxs(Fragment, { children: [
+              rightAxisSeries.length > 0 && /* @__PURE__ */ jsx("g", { transform: `translate(${innerWidth}, 0)`, children: rightYScale.ticks(5).map((tick) => /* @__PURE__ */ jsxs(
+                "g",
+                {
+                  transform: `translate(0, ${rightYScale(tick)})`,
+                  children: [
+                    /* @__PURE__ */ jsx("line", { x1: 0, x2: 6, y1: 0, y2: 0, stroke: "currentColor" }),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: 9,
+                        y: 0,
+                        dy: ".32em",
+                        fontSize: 10,
+                        textAnchor: "start",
+                        fill: "currentColor",
+                        children: tick
+                      }
+                    )
+                  ]
+                },
+                tick
+              )) }),
+              hovered && /* @__PURE__ */ jsx(
+                AxisReadout,
+                {
+                  x: xScale(hoverX),
+                  y: (hoverRight ? rightYScale : leftYScale)(hoverY),
+                  xValue: hoverX,
+                  yValue: hoverY,
+                  width: innerWidth,
+                  height: innerHeight,
+                  color: seriesColors[hovered.field],
+                  rightAxis: hoverRight,
+                  xFormatter: (value) => displayValue(settings.xField, value),
+                  yFormatter: (value) => displayValue(hovered.field, value),
+                  label: `${getFieldLabel?.(settings.xField) ?? settings.xField}: ${displayValue(settings.xField, hoverX)}; ${getFieldLabel?.(hovered.field) ?? hovered.field}: ${displayValue(hovered.field, hoverY)}`
+                }
+              )
+            ] }),
+            brushingMode: "horizontal",
+            onBrushChange: (extent2) => updateChart(settings.id, {
+              filters: [
+                ...settings.filters.filter(
+                  (filter) => filter.field !== settings.xField
+                ),
+                ...extent2 ? [
+                  {
+                    type: "range",
+                    field: settings.xField,
+                    min: xScale.invert(extent2[0][0]),
+                    max: xScale.invert(extent2[1][0])
+                  }
+                ] : []
+              ]
+            }),
+            children: /* @__PURE__ */ jsx("g", { children: processedLiveSeriesData.map((series) => {
+              const lineGenerator = createLineGenerator(series.name);
+              const seriesSettings = settings.seriesSettings[series.name] ?? {
+                showPoints: false,
+                pointSize: 4,
+                pointOpacity: 1,
+                lineWidth: 2,
+                lineOpacity: 0.8,
+                lineStyle: "solid",
+                useRightAxis: false
+              };
+              const seriesColor = seriesColors[series.name];
+              return /* @__PURE__ */ jsxs("g", { children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: lineGenerator(series.data) || void 0,
+                    fill: "none",
+                    stroke: seriesColor,
+                    strokeWidth: seriesSettings.lineWidth,
+                    strokeOpacity: seriesSettings.lineOpacity,
+                    strokeDasharray: seriesSettings.lineStyle === "dashed" ? "5,5" : seriesSettings.lineStyle === "dotted" ? "2,2" : void 0
+                  }
+                ),
+                seriesSettings.showPoints && series.data.map(
+                  (d, j) => d.y == null ? null : /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: xScale(d.x),
+                      cy: (seriesSettings.useRightAxis ? rightYScale : leftYScale)(d.y),
+                      r: seriesSettings.pointSize,
+                      fill: seriesColor,
+                      fillOpacity: seriesSettings.pointOpacity
+                    },
+                    j
+                  )
+                )
+              ] }, series.name);
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(Legend, {})
+      ]
+    }
+  );
+};
+function LineSeriesSettings({
+  seriesName,
+  settings,
+  onSettingsChange
+}) {
+  const id = useId();
+  const update = (next) => onSettingsChange({ ...settings, ...next });
+  const numericFields = [
+    { key: "lineWidth", label: "Line width", min: 1, max: 10, step: 0.5 },
+    { key: "lineOpacity", label: "Line opacity", min: 0, max: 1, step: 0.1 },
+    ...settings.showPoints ? [
+      { key: "pointSize", label: "Point size", min: 1, max: 20, step: 1 },
+      {
+        key: "pointOpacity",
+        label: "Point opacity",
+        min: 0,
+        max: 1,
+        step: 0.1
+      }
+    ] : []
+  ];
+  return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-3 border-t border-border pt-3", children: [
+    /* @__PURE__ */ jsx("legend", { className: "px-1 text-sm font-semibold", children: seriesName }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: `${id}-points`,
+            "aria-label": `${seriesName} points`,
+            checked: settings.showPoints,
+            onCheckedChange: (showPoints) => update({ showPoints })
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-points`, children: "Show points" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: `${id}-axis`,
+            "aria-label": `${seriesName} right axis`,
+            checked: settings.useRightAxis,
+            onCheckedChange: (useRightAxis) => update({ useRightAxis })
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-axis`, children: "Right axis" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-color`, children: "Color" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${id}-color`,
+            "aria-label": `${seriesName} color`,
+            type: "color",
+            value: settings.lineColor ?? "#3479a8",
+            onChange: (event) => update({ lineColor: event.target.value }),
+            className: "h-8 w-full rounded border"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-style`, children: "Line style" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: `${id}-style`,
+            value: settings.lineStyle,
+            onChange: (event) => update({
+              lineStyle: event.target.value
+            }),
+            className: "h-8 w-full rounded border bg-background px-2 text-sm",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "solid", children: "Solid" }),
+              /* @__PURE__ */ jsx("option", { value: "dashed", children: "Dashed" }),
+              /* @__PURE__ */ jsx("option", { value: "dotted", children: "Dotted" })
+            ]
+          }
+        )
+      ] }),
+      numericFields.map(({ key, label, min, max, step }) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${key}`, children: label }),
+        /* @__PURE__ */ jsx(
+          NumericInputEnter,
+          {
+            id: `${id}-${key}`,
+            value: settings[key],
+            onChange: (value) => update({ [key]: value }),
+            min,
+            max,
+            stepSmall: step,
+            className: "h-8"
+          }
+        )
+      ] }, key))
+    ] })
+  ] });
+}
+var LineChartSettingsPanel = ({ settings, onSettingsChange }) => {
+  const updateSettings = (updates) => {
+    onSettingsChange({ ...settings, ...updates });
+  };
+  const updateStyles = (updates) => {
+    updateSettings({
+      styles: { ...settings.styles, ...updates }
+    });
+  };
+  const updateSeriesSettings = (seriesName, seriesSettings) => {
+    updateSettings({
+      seriesSettings: {
+        ...settings.seriesSettings,
+        [seriesName]: seriesSettings
+      }
+    });
+  };
+  const availableFields = useColumnNames();
+  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, { children: "X Field" }),
+      /* @__PURE__ */ jsx(
+        FieldSelector,
+        {
+          label: "",
+          value: settings.xField,
+          onChange: (value) => updateSettings({ xField: value })
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { children: "Series Fields" }),
+      /* @__PURE__ */ jsx(
+        multi_select_default,
+        {
+          options: availableFields.map((f) => ({
+            label: f,
+            value: f
+          })),
+          value: settings.seriesField.map((f) => ({
+            label: f,
+            value: f
+          })),
+          onChange: (values) => {
+            const newSeriesFields = values.map((v) => v.value);
+            const newSeriesSettings = { ...settings.seriesSettings };
+            newSeriesFields.forEach((field) => {
+              if (!newSeriesSettings[field]) {
+                newSeriesSettings[field] = { ...DEFAULT_SERIES_SETTINGS };
+              }
+            });
+            Object.keys(newSeriesSettings).forEach((field) => {
+              if (!newSeriesFields.includes(field)) {
+                delete newSeriesSettings[field];
+              }
+            });
+            updateSettings({
+              seriesField: newSeriesFields,
+              seriesSettings: newSeriesSettings
+            });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[120px_1fr] items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Line Style" }),
+      /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          value: {
+            label: settings.styles.curveType === "linear" ? "Linear" : settings.styles.curveType === "monotoneX" ? "Smooth" : "Step",
+            value: settings.styles.curveType
+          },
+          options: [
+            { label: "Linear", value: "linear" },
+            { label: "Smooth", value: "monotoneX" },
+            { label: "Step", value: "step" }
+          ],
+          onChange: (option) => updateStyles({ curveType: option?.value ?? "linear" }),
+          optionToString: (option) => option.label
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { children: "Show Legend" }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: settings.showLegend,
+          onCheckedChange: (checked) => updateSettings({ showLegend: checked })
+        }
+      ) }),
+      settings.showLegend && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Label, { children: "Legend Position" }),
+        /* @__PURE__ */ jsx(
+          ComboBox,
+          {
+            value: {
+              label: settings.legendPosition.charAt(0).toUpperCase() + settings.legendPosition.slice(1),
+              value: settings.legendPosition
+            },
+            options: [
+              { label: "Top", value: "top" },
+              { label: "Right", value: "right" },
+              { label: "Bottom", value: "bottom" },
+              { label: "Left", value: "left" }
+            ],
+            onChange: (option) => updateSettings({
+              legendPosition: option?.value ?? "top"
+            }),
+            optionToString: (option) => option.label
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: settings.seriesField.map((field) => /* @__PURE__ */ jsx(
+      LineSeriesSettings,
+      {
+        seriesName: field,
+        settings: settings.seriesSettings[field] ?? DEFAULT_SERIES_SETTINGS,
+        onSettingsChange: (next) => updateSeriesSettings(field, next)
+      },
+      field
+    )) })
+  ] });
+};
+
+// src/components/charts/LineChart/definition.ts
+var DEFAULT_SERIES_SETTINGS = {
+  showPoints: false,
+  pointSize: 4,
+  pointOpacity: 1,
+  lineWidth: 2,
+  lineOpacity: 0.8,
+  lineStyle: "solid",
+  useRightAxis: false
+};
+var lineChartDefinition = {
+  type: "line",
+  name: "Line Chart",
+  description: "Display data as connected points over time or sequence",
+  icon: LineChart$1,
+  component: LineChart,
+  settingsPanel: LineChartSettingsPanel,
+  createDefaultSettings: (layout) => ({
+    id: "",
+    type: "line",
+    title: "",
+    field: "",
+    layout,
+    colorScaleId: void 0,
+    colorField: void 0,
+    facet: {
+      enabled: false,
+      type: "grid",
+      rowVariable: "",
+      columnVariable: ""
+    },
+    xAxis: {},
+    yAxis: {},
+    margin: { top: 20, right: 60, bottom: 30, left: 60 },
+    filters: [],
+    xAxisLabel: "",
+    yAxisLabel: "",
+    xGridLines: 5,
+    yGridLines: 5,
+    xField: "",
+    seriesField: [],
+    seriesSettings: {},
+    styles: {
+      curveType: "linear"
+    },
+    showXGrid: true,
+    showYGrid: true,
+    showLegend: true,
+    legendPosition: "top"
+  }),
+  validateSettings: (settings) => {
+    return settings.xField !== "" && settings.seriesField.length > 0;
+  },
+  getFilterFunction: (settings, fieldGetter) => {
+    return (d) => settings.filters.every(
+      (filter) => applyFilter(fieldGetter(filter.field)[d], filter)
+    );
+  }
+};
+
+export { DEFAULT_SERIES_SETTINGS, lineChartDefinition };
+//# sourceMappingURL=chunk-CGDWDV4Z.js.map
+//# sourceMappingURL=chunk-CGDWDV4Z.js.map