hazo_ui 2.16.0 → 2.17.0

package/dist/index.cjs

@@ -9301,6 +9301,808 @@ function SortIndicator({
     sort.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium", children: idx + 1 })
   ] });
 }
+var VBOX_W = 200;
+var PAD = 2;
+function Sparkline({
+  data,
+  color: color2,
+  className,
+  height = 40
+}) {
+  const vbox_h = height;
+  const non_null_values = data.filter((v) => v !== null && !Number.isNaN(v));
+  if (non_null_values.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: `0 0 ${VBOX_W} ${vbox_h}`,
+        preserveAspectRatio: "none",
+        className,
+        style: { width: "100%", height: `${height}px`, display: "block" }
+      }
+    );
+  }
+  const mn = Math.min(...non_null_values);
+  const mx = Math.max(...non_null_values);
+  const rng = mx - mn || 1;
+  const cx = (i) => data.length <= 1 ? VBOX_W / 2 : PAD + i * (VBOX_W - 2 * PAD) / (data.length - 1);
+  const cy = (v) => vbox_h - PAD - (v - mn) * (vbox_h - 2 * PAD) / rng;
+  let line_d = "";
+  data.forEach((v, i) => {
+    if (v === null || Number.isNaN(v)) return;
+    line_d += `${line_d ? " L" : "M"}${cx(i).toFixed(1)},${cy(v).toFixed(1)}`;
+  });
+  const first_non_null_idx = data.findIndex((v) => v !== null && !Number.isNaN(v));
+  const last_idx = data.length - 1;
+  const last_v = data[last_idx];
+  const area_d = line_d && `${line_d} L${cx(last_idx).toFixed(1)},${vbox_h - PAD} L${cx(first_non_null_idx).toFixed(1)},${vbox_h - PAD} Z`;
+  const has_last = last_v !== null && last_v !== void 0 && !Number.isNaN(last_v);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${VBOX_W} ${vbox_h}`,
+      preserveAspectRatio: "none",
+      className,
+      style: { width: "100%", height: `${height}px`, display: "block" },
+      children: [
+        area_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: area_d, fill: color2, fillOpacity: 0.1, stroke: "none" }),
+        line_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: line_d, stroke: color2, strokeWidth: 1.5, fill: "none" }),
+        has_last && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: cx(last_idx), cy: cy(last_v), r: 2, fill: color2 })
+      ]
+    }
+  );
+}
+var PAD2 = 2;
+function InverseSparkline({
+  data,
+  color: color2,
+  className,
+  width = 62,
+  height = 18
+}) {
+  const non_null_values = data.filter((v) => v !== null && !Number.isNaN(v));
+  if (non_null_values.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: `0 0 ${width} ${height}`,
+        preserveAspectRatio: "none",
+        className,
+        style: { width: `${width}px`, height: `${height}px`, display: "block" }
+      }
+    );
+  }
+  const mn = Math.min(...non_null_values);
+  const mx = Math.max(...non_null_values);
+  const rng = mx - mn || 1;
+  const cx = (i) => data.length <= 1 ? width / 2 : PAD2 + i * (width - 2 * PAD2) / (data.length - 1);
+  const cy = (v) => PAD2 + (v - mn) * (height - 2 * PAD2) / rng;
+  let line_d = "";
+  data.forEach((v, i) => {
+    if (v === null || Number.isNaN(v)) return;
+    line_d += `${line_d ? " L" : "M"}${cx(i).toFixed(1)},${cy(v).toFixed(1)}`;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none",
+      className,
+      style: { width: `${width}px`, height: `${height}px`, display: "block" },
+      children: line_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: line_d, stroke: color2, strokeWidth: 1.4, fill: "none" })
+    }
+  );
+}
+
+// src/components/hazo_ui_charts/format.ts
+function format_num(n) {
+  if (n === null || n === void 0) return "";
+  if (typeof n === "string") return n;
+  if (Number.isNaN(n)) return "";
+  const abs = Math.abs(n);
+  if (abs >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (abs >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  if (Number.isInteger(n)) return n.toString();
+  return n.toFixed(1);
+}
+function pick_x_label_indices(length) {
+  if (length <= 0) return [0, 0, 0];
+  if (length === 1) return [0, 0, 0];
+  if (length === 2) return [0, 0, 1];
+  return [0, Math.floor(length / 2), length - 1];
+}
+var PAD_LEFT = 38;
+var PAD_RIGHT = 14;
+var PAD_TOP = 12;
+var PAD_BOTTOM = 22;
+var AXIS_LABEL_COLOR = "#8b949e";
+var GRIDLINE_COLOR = "#2a3441";
+function compute_geometry(data, width, height) {
+  const vals = data.filter((v) => v !== null && !Number.isNaN(v));
+  if (vals.length === 0) return null;
+  const mn = Math.min(...vals);
+  const mx = Math.max(...vals);
+  const rng = mx - mn || mx * 0.1 + 1;
+  const y_min = Math.max(0, mn - rng * 0.1);
+  const y_max = mx + rng * 0.1;
+  const y_rng = y_max - y_min || 1;
+  const plot_w = width - PAD_LEFT - PAD_RIGHT;
+  const plot_h = height - PAD_TOP - PAD_BOTTOM;
+  return {
+    vbox_w: width,
+    vbox_h: height,
+    y_min,
+    y_max,
+    cx: (i) => data.length <= 1 ? PAD_LEFT + plot_w / 2 : PAD_LEFT + i * plot_w / (data.length - 1),
+    cy: (v) => PAD_TOP + (1 - (v - y_min) / y_rng) * plot_h
+  };
+}
+function build_paths(data, g) {
+  let line_d = "";
+  let first_idx = -1;
+  data.forEach((v, i) => {
+    if (v === null || Number.isNaN(v)) return;
+    if (first_idx === -1) first_idx = i;
+    line_d += `${line_d ? " L" : "M"}${g.cx(i).toFixed(1)},${g.cy(v).toFixed(1)}`;
+  });
+  const last_idx = data.length - 1;
+  const last_v = data[last_idx];
+  const area_d = line_d && last_v !== null && last_v !== void 0 && !Number.isNaN(last_v) ? `${line_d} L${g.cx(last_idx).toFixed(1)},${g.vbox_h - PAD_BOTTOM} L${g.cx(first_idx).toFixed(1)},${g.vbox_h - PAD_BOTTOM} Z` : "";
+  return { line_d, area_d };
+}
+function LineChart({
+  data,
+  dates,
+  color: color2,
+  width = 360,
+  height = 130,
+  unit = "",
+  showTooltip = true,
+  className
+}) {
+  const geo = compute_geometry(data, width, height);
+  const svg_ref = React25__namespace.useRef(null);
+  const [hover_idx, set_hover_idx] = React25__namespace.useState(null);
+  const handle_mouse_move = React25__namespace.useCallback(
+    (e) => {
+      if (!geo) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const vbox_x = (e.clientX - rect.left) / rect.width * geo.vbox_w;
+      const plot_w = geo.vbox_w - PAD_LEFT - PAD_RIGHT;
+      if (vbox_x < PAD_LEFT || vbox_x > geo.vbox_w - PAD_RIGHT) {
+        set_hover_idx(null);
+        return;
+      }
+      const ratio = (vbox_x - PAD_LEFT) / plot_w;
+      const idx = Math.round(ratio * (data.length - 1));
+      const clamped = Math.max(0, Math.min(data.length - 1, idx));
+      let resolved = clamped;
+      if (data[resolved] === null || Number.isNaN(data[resolved])) {
+        for (let step = 1; step < data.length; step += 1) {
+          const left_i = clamped - step;
+          const right_i = clamped + step;
+          if (left_i >= 0 && data[left_i] !== null && !Number.isNaN(data[left_i])) {
+            resolved = left_i;
+            break;
+          }
+          if (right_i < data.length && data[right_i] !== null && !Number.isNaN(data[right_i])) {
+            resolved = right_i;
+            break;
+          }
+        }
+      }
+      set_hover_idx(resolved);
+    },
+    [geo, data]
+  );
+  const handle_mouse_leave = React25__namespace.useCallback(() => set_hover_idx(null), []);
+  if (!geo) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: `0 0 ${width} ${height}`,
+        className: cn("cls_hazo_chart cls_hazo_chart_empty", className),
+        style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` }
+      }
+    );
+  }
+  const { line_d, area_d } = build_paths(data, geo);
+  const x_label_idx = pick_x_label_indices(data.length);
+  const last_idx = data.length - 1;
+  const last_v = data[last_idx];
+  const has_last = last_v !== null && last_v !== void 0 && !Number.isNaN(last_v);
+  const hover_v = hover_idx !== null ? data[hover_idx] : null;
+  const hover_has_v = hover_v !== null && hover_v !== void 0 && !Number.isNaN(hover_v);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref: svg_ref,
+      viewBox: `0 0 ${width} ${height}`,
+      onMouseMove: showTooltip ? handle_mouse_move : void 0,
+      onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
+      className: cn("cls_hazo_chart", className),
+      style: {
+        width: "100%",
+        height: "auto",
+        display: "block",
+        maxHeight: `${height + 10}px`,
+        cursor: showTooltip ? "crosshair" : "default"
+      },
+      children: [
+        [0, 1, 2].map((i) => {
+          const y = PAD_TOP + i / 2 * (geo.vbox_h - PAD_TOP - PAD_BOTTOM);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: PAD_LEFT,
+              x2: geo.vbox_w - PAD_RIGHT,
+              y1: y,
+              y2: y,
+              stroke: GRIDLINE_COLOR,
+              strokeWidth: 0.5,
+              strokeDasharray: "2,3"
+            },
+            i
+          );
+        }),
+        area_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: area_d, fill: color2, fillOpacity: 0.12, stroke: "none" }),
+        line_d && /* @__PURE__ */ jsxRuntime.jsx("path", { d: line_d, stroke: color2, strokeWidth: 1.8, fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT - 4, y: PAD_TOP + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR, fontSize: 9, children: format_num(geo.y_max) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: PAD_LEFT - 4,
+            y: PAD_TOP + (geo.vbox_h - PAD_TOP - PAD_BOTTOM) / 2 + 3,
+            textAnchor: "end",
+            fill: AXIS_LABEL_COLOR,
+            fontSize: 9,
+            children: format_num((geo.y_max + geo.y_min) / 2)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: PAD_LEFT - 4,
+            y: geo.vbox_h - PAD_BOTTOM + 3,
+            textAnchor: "end",
+            fill: AXIS_LABEL_COLOR,
+            fontSize: 9,
+            children: format_num(geo.y_min)
+          }
+        ),
+        x_label_idx.map((idx, k) => {
+          const anchor = k === 0 ? "start" : k === 1 ? "middle" : "end";
+          const x_pos = geo.cx(idx);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: x_pos,
+              y: geo.vbox_h - 6,
+              textAnchor: anchor,
+              fill: AXIS_LABEL_COLOR,
+              fontSize: 9,
+              children: dates[idx] ?? ""
+            },
+            `x_${k}`
+          );
+        }),
+        has_last && hover_idx === null && (() => {
+          const x = geo.cx(last_idx);
+          const y = geo.cy(last_v);
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: x,
+                x2: PAD_LEFT,
+                y1: y,
+                y2: y,
+                stroke: color2,
+                strokeWidth: 0.5,
+                strokeDasharray: "2,2",
+                opacity: 0.4
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 3.5, fill: color2, stroke: color2, strokeWidth: 2, fillOpacity: 0.3 }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 2, fill: color2 }),
+            /* @__PURE__ */ jsxRuntime.jsxs("text", { x: x - 6, y: y - 6, textAnchor: "end", fill: color2, fontSize: 10, fontWeight: 700, children: [
+              format_num(last_v),
+              unit
+            ] })
+          ] });
+        })(),
+        showTooltip && hover_idx !== null && hover_has_v && (() => {
+          const x = geo.cx(hover_idx);
+          const y = geo.cy(hover_v);
+          const label = `${format_num(hover_v)}${unit}`;
+          const date = dates[hover_idx] ?? "";
+          const bubble_text_w = Math.max(label.length, date.length) * 5.5 + 12;
+          const bubble_w = Math.max(bubble_text_w, 40);
+          const bubble_h = 26;
+          const flip = x + bubble_w + 6 > geo.vbox_w - PAD_RIGHT;
+          const bubble_x = flip ? x - bubble_w - 6 : x + 6;
+          const bubble_y = Math.max(PAD_TOP, Math.min(y - bubble_h / 2, geo.vbox_h - PAD_BOTTOM - bubble_h));
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: x,
+                x2: x,
+                y1: PAD_TOP,
+                y2: geo.vbox_h - PAD_BOTTOM,
+                stroke: color2,
+                strokeWidth: 0.5,
+                strokeDasharray: "2,2",
+                opacity: 0.6
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: 3, fill: color2 }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: bubble_x,
+                y: bubble_y,
+                width: bubble_w,
+                height: bubble_h,
+                rx: 3,
+                fill: "#0d1117",
+                stroke: color2,
+                strokeWidth: 0.5,
+                fillOpacity: 0.92
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: bubble_x + bubble_w / 2,
+                y: bubble_y + 11,
+                textAnchor: "middle",
+                fill: color2,
+                fontSize: 10,
+                fontWeight: 700,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: bubble_x + bubble_w / 2,
+                y: bubble_y + 22,
+                textAnchor: "middle",
+                fill: AXIS_LABEL_COLOR,
+                fontSize: 8,
+                children: date
+              }
+            )
+          ] });
+        })()
+      ]
+    }
+  );
+}
+var PAD_LEFT2 = 38;
+var PAD_RIGHT2 = 14;
+var PAD_TOP2 = 12;
+var PAD_BOTTOM2 = 22;
+var AXIS_LABEL_COLOR2 = "#8b949e";
+var GRIDLINE_COLOR2 = "#2a3441";
+function compute_geometry2(series, width, height) {
+  const all_vals = [];
+  let n = 0;
+  for (const s of series) {
+    n = Math.max(n, s.data.length);
+    for (const v of s.data) if (v !== null && !Number.isNaN(v)) all_vals.push(v);
+  }
+  if (all_vals.length === 0 || n === 0) return null;
+  const mn = Math.min(...all_vals);
+  const mx = Math.max(...all_vals);
+  const rng = mx - mn || mx * 0.1 + 1;
+  const y_min = Math.max(0, mn - rng * 0.05);
+  const y_max = mx + rng * 0.05;
+  const y_rng = y_max - y_min || 1;
+  const plot_w = width - PAD_LEFT2 - PAD_RIGHT2;
+  const plot_h = height - PAD_TOP2 - PAD_BOTTOM2;
+  return {
+    vbox_w: width,
+    vbox_h: height,
+    y_min,
+    y_max,
+    point_count: n,
+    cx: (i) => n <= 1 ? PAD_LEFT2 + plot_w / 2 : PAD_LEFT2 + i * plot_w / (n - 1),
+    cy: (v) => PAD_TOP2 + (1 - (v - y_min) / y_rng) * plot_h
+  };
+}
+function MultiLineChart({
+  series,
+  dates,
+  width = 360,
+  height = 140,
+  showTooltip = true,
+  showLegend = true,
+  className
+}) {
+  const geo = compute_geometry2(series, width, height);
+  const [hover_idx, set_hover_idx] = React25__namespace.useState(null);
+  const handle_mouse_move = React25__namespace.useCallback(
+    (e) => {
+      if (!geo) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const vbox_x = (e.clientX - rect.left) / rect.width * geo.vbox_w;
+      const plot_w = geo.vbox_w - PAD_LEFT2 - PAD_RIGHT2;
+      if (vbox_x < PAD_LEFT2 || vbox_x > geo.vbox_w - PAD_RIGHT2) {
+        set_hover_idx(null);
+        return;
+      }
+      const ratio = (vbox_x - PAD_LEFT2) / plot_w;
+      const idx = Math.round(ratio * (geo.point_count - 1));
+      set_hover_idx(Math.max(0, Math.min(geo.point_count - 1, idx)));
+    },
+    [geo]
+  );
+  const handle_mouse_leave = React25__namespace.useCallback(() => set_hover_idx(null), []);
+  if (!geo) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: `0 0 ${width} ${height}`,
+        className: cn("cls_hazo_chart cls_hazo_chart_empty", className),
+        style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` }
+      }
+    );
+  }
+  const x_label_idx = pick_x_label_indices(geo.point_count);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_hazo_chart_wrapper", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${width} ${height}`,
+        onMouseMove: showTooltip ? handle_mouse_move : void 0,
+        onMouseLeave: showTooltip ? handle_mouse_leave : void 0,
+        className: "cls_hazo_chart cls_hazo_chart_multi",
+        style: {
+          width: "100%",
+          height: "auto",
+          display: "block",
+          maxHeight: `${height + 10}px`,
+          cursor: showTooltip ? "crosshair" : "default"
+        },
+        children: [
+          [0, 1, 2].map((i) => {
+            const y = PAD_TOP2 + i / 2 * (geo.vbox_h - PAD_TOP2 - PAD_BOTTOM2);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: PAD_LEFT2,
+                x2: geo.vbox_w - PAD_RIGHT2,
+                y1: y,
+                y2: y,
+                stroke: GRIDLINE_COLOR2,
+                strokeWidth: 0.5,
+                strokeDasharray: "2,3"
+              },
+              i
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 - 4, y: PAD_TOP2 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR2, fontSize: 9, children: format_num(geo.y_max) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: PAD_LEFT2 - 4,
+              y: PAD_TOP2 + (geo.vbox_h - PAD_TOP2 - PAD_BOTTOM2) / 2 + 3,
+              textAnchor: "end",
+              fill: AXIS_LABEL_COLOR2,
+              fontSize: 9,
+              children: format_num((geo.y_max + geo.y_min) / 2)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 - 4, y: geo.vbox_h - PAD_BOTTOM2 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR2, fontSize: 9, children: format_num(geo.y_min) }),
+          x_label_idx.map((idx, k) => {
+            const anchor = k === 0 ? "start" : k === 1 ? "middle" : "end";
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: geo.cx(idx),
+                y: geo.vbox_h - 6,
+                textAnchor: anchor,
+                fill: AXIS_LABEL_COLOR2,
+                fontSize: 9,
+                children: dates[idx] ?? ""
+              },
+              `x_${k}`
+            );
+          }),
+          series.map((s, s_idx) => {
+            let d = "";
+            s.data.forEach((v, i) => {
+              if (v === null || Number.isNaN(v)) return;
+              d += `${d ? " L" : "M"}${geo.cx(i).toFixed(1)},${geo.cy(v).toFixed(1)}`;
+            });
+            const last_idx = s.data.length - 1;
+            const last_v = s.data[last_idx];
+            const has_last = last_v !== null && last_v !== void 0 && !Number.isNaN(last_v);
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              d && /* @__PURE__ */ jsxRuntime.jsx("path", { d, stroke: s.color, strokeWidth: 1.7, fill: "none" }),
+              has_last && hover_idx === null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: geo.cx(last_idx),
+                    cy: geo.cy(last_v),
+                    r: 3,
+                    fill: s.color,
+                    fillOpacity: 0.3,
+                    stroke: s.color,
+                    strokeWidth: 1.5
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: geo.cx(last_idx) - 5,
+                    y: geo.cy(last_v) - 5,
+                    textAnchor: "end",
+                    fill: s.color,
+                    fontSize: 9,
+                    fontWeight: 700,
+                    children: format_num(last_v)
+                  }
+                )
+              ] })
+            ] }, `series_${s_idx}`);
+          }),
+          showTooltip && hover_idx !== null && (() => {
+            const x = geo.cx(hover_idx);
+            const items = series.map((s) => ({
+              label: s.label,
+              color: s.color,
+              value: s.data[hover_idx] ?? null
+            })).filter((it) => it.value !== null && !Number.isNaN(it.value));
+            if (items.length === 0) return null;
+            const bubble_w = 70;
+            const row_h = 12;
+            const bubble_h = items.length * row_h + 18;
+            const flip = x + bubble_w + 6 > geo.vbox_w - PAD_RIGHT2;
+            const bubble_x = flip ? x - bubble_w - 6 : x + 6;
+            const bubble_y = Math.max(PAD_TOP2, Math.min(PAD_TOP2 + 5, geo.vbox_h - PAD_BOTTOM2 - bubble_h));
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  x1: x,
+                  x2: x,
+                  y1: PAD_TOP2,
+                  y2: geo.vbox_h - PAD_BOTTOM2,
+                  stroke: AXIS_LABEL_COLOR2,
+                  strokeWidth: 0.5,
+                  strokeDasharray: "2,2",
+                  opacity: 0.6
+                }
+              ),
+              items.map((it) => /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: x,
+                  cy: geo.cy(it.value),
+                  r: 3,
+                  fill: it.color
+                },
+                `hd_${it.label}`
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: bubble_x,
+                  y: bubble_y,
+                  width: bubble_w,
+                  height: bubble_h,
+                  rx: 3,
+                  fill: "#0d1117",
+                  stroke: AXIS_LABEL_COLOR2,
+                  strokeWidth: 0.5,
+                  fillOpacity: 0.92
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("text", { x: bubble_x + 6, y: bubble_y + 10, fill: AXIS_LABEL_COLOR2, fontSize: 8, children: dates[hover_idx] ?? "" }),
+              items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x: bubble_x + 6,
+                    y: bubble_y + 14 + i * row_h,
+                    width: 6,
+                    height: 6,
+                    fill: it.color
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: bubble_x + 16,
+                    y: bubble_y + 20 + i * row_h,
+                    fill: it.color,
+                    fontSize: 9,
+                    fontWeight: 600,
+                    children: format_num(it.value)
+                  }
+                )
+              ] }, `row_${i}`))
+            ] });
+          })()
+        ]
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "cls_hazo_chart_legend",
+        style: {
+          display: "flex",
+          gap: "12px",
+          justifyContent: "center",
+          marginTop: "4px",
+          fontSize: "10px",
+          color: AXIS_LABEL_COLOR2,
+          flexWrap: "wrap"
+        },
+        children: series.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            style: { display: "inline-flex", alignItems: "center", gap: "4px" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "i",
+                {
+                  style: {
+                    display: "inline-block",
+                    width: "8px",
+                    height: "8px",
+                    background: s.color,
+                    borderRadius: "1px"
+                  }
+                }
+              ),
+              s.label
+            ]
+          },
+          s.label
+        ))
+      }
+    )
+  ] });
+}
+var PAD_LEFT3 = 32;
+var PAD_RIGHT3 = 8;
+var PAD_TOP3 = 10;
+var PAD_BOTTOM3 = 22;
+var BAR_GAP_RATIO = 0.25;
+var AXIS_LABEL_COLOR3 = "#8b949e";
+function StackedBars({
+  bars,
+  width = 360,
+  height = 140,
+  showYAxis = true,
+  className
+}) {
+  const totals = bars.map((b) => b.segments.reduce((sum, s) => sum + s.value, 0));
+  const y_max = Math.max(0, ...totals) || 1;
+  const plot_w = width - PAD_LEFT3 - PAD_RIGHT3;
+  const plot_h = height - PAD_TOP3 - PAD_BOTTOM3;
+  const slot_w = bars.length > 0 ? plot_w / bars.length : 0;
+  const bar_w = slot_w * (1 - BAR_GAP_RATIO);
+  const x_for = (i) => PAD_LEFT3 + i * slot_w + (slot_w - bar_w) / 2;
+  const x_label_idx = pick_x_label_indices(bars.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("cls_hazo_chart cls_hazo_chart_stacked_bars", className),
+      style: { width: "100%", height: "auto", display: "block", maxHeight: `${height + 10}px` },
+      children: [
+        showYAxis && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT3 - 4, y: PAD_TOP3 + 3, textAnchor: "end", fill: AXIS_LABEL_COLOR3, fontSize: 9, children: format_num(y_max) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: PAD_LEFT3 - 4,
+              y: PAD_TOP3 + plot_h / 2 + 3,
+              textAnchor: "end",
+              fill: AXIS_LABEL_COLOR3,
+              fontSize: 9,
+              children: format_num(y_max / 2)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: PAD_LEFT3 - 4,
+              y: height - PAD_BOTTOM3 + 3,
+              textAnchor: "end",
+              fill: AXIS_LABEL_COLOR3,
+              fontSize: 9,
+              children: "0"
+            }
+          )
+        ] }),
+        bars.map((bar, i) => {
+          let cursor_y = height - PAD_BOTTOM3;
+          return /* @__PURE__ */ jsxRuntime.jsx("g", { children: bar.segments.map((seg, s_idx) => {
+            if (seg.value <= 0) return null;
+            const seg_h = seg.value / y_max * plot_h;
+            const y = cursor_y - seg_h;
+            cursor_y = y;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: x_for(i),
+                y,
+                width: bar_w,
+                height: seg_h,
+                fill: seg.color
+              },
+              `seg_${s_idx}`
+            );
+          }) }, `bar_${i}`);
+        }),
+        x_label_idx.map((idx, k) => {
+          const anchor = k === 0 ? "start" : k === 1 ? "middle" : "end";
+          const x_pos = x_for(idx) + bar_w / 2;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: x_pos,
+              y: height - 6,
+              textAnchor: anchor,
+              fill: AXIS_LABEL_COLOR3,
+              fontSize: 9,
+              children: bars[idx]?.label ?? ""
+            },
+            `x_${k}`
+          );
+        })
+      ]
+    }
+  );
+}
+function DateRangeSelector({
+  value,
+  onChange,
+  options,
+  className,
+  ariaLabel = "Date range"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: cn(
+        "cls_hazo_date_range_selector inline-flex items-center gap-0 rounded-md border bg-background p-0.5",
+        className
+      ),
+      children: options.map((opt) => {
+        const is_active = opt.value === value;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": is_active,
+            onClick: () => {
+              if (!is_active) onChange(opt.value);
+            },
+            className: cn(
+              "cls_hazo_date_range_option px-2.5 py-1 text-xs font-medium rounded-sm transition-colors",
+              is_active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+            ),
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -9340,6 +10142,7 @@ exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.CommandNodeExtension = CommandNodeExtension;
 exports.CommandPill = CommandPill;
 exports.CommandPopover = CommandPopover;
+exports.DateRangeSelector = DateRangeSelector;
 exports.Drawer = Drawer;
 exports.DrawerClose = DrawerClose;
 exports.DrawerContent = DrawerContent;
@@ -9396,8 +10199,11 @@ exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Input = Input;
+exports.InverseSparkline = InverseSparkline;
 exports.Label = Label3;
+exports.LineChart = LineChart;
 exports.LoadingTimeout = LoadingTimeout;
+exports.MultiLineChart = MultiLineChart;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
@@ -9428,7 +10234,9 @@ exports.SkeletonBar = SkeletonBar;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonGroup = SkeletonGroup;
 exports.SkeletonRect = SkeletonRect;
+exports.Sparkline = Sparkline;
 exports.Spinner = Spinner;
+exports.StackedBars = StackedBars;
 exports.Switch = Switch;
 exports.Table = Table2;
 exports.TableBody = TableBody;
@@ -9454,8 +10262,10 @@ exports.applyKanbanFilter = applyKanbanFilter;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
 exports.errorToast = errorToast;
+exports.format_num = format_num;
 exports.get_hazo_ui_config = get_hazo_ui_config;
 exports.parse_commands_from_text = parse_commands_from_text;
+exports.pick_x_label_indices = pick_x_label_indices;
 exports.reset_hazo_ui_config = reset_hazo_ui_config;
 exports.resolve_animation_classes = resolve_animation_classes;
 exports.set_hazo_ui_config = set_hazo_ui_config;