drizzle-cube 0.5.8 → 0.6.0

package/dist/client/chunks/{chart-funnel-DnWRsmnS.js → chart-funnel-CToKSBaL.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { k as t, n } from "./chart-activity-grid-DmruKPab.js";
+import { P as t, s as n } from "./chart-activity-grid-DX0SJbxs.js";
 import r, { useMemo as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Cell as s, Funnel as c, FunnelChart as l, LabelList as u, ResponsiveContainer as d, Tooltip as f } from "recharts";
@@ -49,7 +49,7 @@ function _(e, t, n, r, i = !0) {
 		bindingKey: t.dimension,
 		timeDimension: v(e, t),
 		steps: e.map((e, t) => {
-			let i = { name: n?.[t] || `Step ${t + 1}` }, a = y(e);
+			let i = { name: n?.[t] || `Step ${t + 1}` }, a = x(e);
 			a && (i.filter = a);
 			let o = r?.[t];
 			return o && (i.timeToConvert = o), i;
@@ -58,31 +58,29 @@ function _(e, t, n, r, i = !0) {
 	} };
 }
 function v(e, t) {
-	if (!Array.isArray(t.dimension)) {
-		for (let t of e) if (t.timeDimensions?.length) return t.timeDimensions[0].dimension;
-		let t = m(e[0]);
-		if (t) return `${t}.createdAt`;
-		throw Error("Funnel requires at least one time dimension in step queries");
-	}
-	let n = [], r = t.dimension;
-	for (let t of r) {
-		let r = e.find((e) => m(e) === t.cube);
-		n.push(r?.timeDimensions?.length ? {
-			cube: t.cube,
-			dimension: r.timeDimensions[0].dimension
-		} : {
-			cube: t.cube,
-			dimension: `${t.cube}.createdAt`
-		});
-	}
-	return n;
+	return Array.isArray(t.dimension) ? b(e, t.dimension) : y(e);
 }
 function y(e) {
+	for (let t of e) if (t.timeDimensions?.length) return t.timeDimensions[0].dimension;
+	let t = m(e[0]);
+	if (t) return `${t}.createdAt`;
+	throw Error("Funnel requires at least one time dimension in step queries");
+}
+function b(e, t) {
+	return t.map((t) => {
+		let n = e.find((e) => m(e) === t.cube), r = n?.timeDimensions?.length ? n.timeDimensions[0].dimension : `${t.cube}.createdAt`;
+		return {
+			cube: t.cube,
+			dimension: r
+		};
+	});
+}
+function x(e) {
 	if (!e.filters?.length) return;
 	let t = e.filters.filter((e) => "member" in e);
 	if (t.length !== 0) return t.length === 1 ? t[0] : t;
 }
-function b(e, t) {
+function S(e, t) {
 	return e?.length ? e.map((e, n) => ({
 		name: t?.[n] || e.step,
 		value: e.count,
@@ -94,7 +92,7 @@ function b(e, t) {
 		p90SecondsToConvert: e.p90SecondsToConvert
 	})) : [];
 }
-function x(e) {
+function C(e) {
 	if (e == null) return "-";
 	if (e < 60) return `${Math.round(e)}s`;
 	if (e < 3600) {
@@ -109,29 +107,18 @@ function x(e) {
 	return t < 10 ? `${t.toFixed(1)}d` : `${Math.round(t)}d`;
 }
 //#endregion
-//#region src/client/components/charts/FunnelChart.tsx
-var S = /* @__PURE__ */ e({ default: () => D }), C = [
-	"#3B82F6",
-	"#60A5FA",
-	"#93C5FD",
-	"#BFDBFE",
-	"#DBEAFE"
-];
-function w(e, t) {
-	let n = t || C;
-	return n[e % n.length];
-}
-function T(e) {
+//#region src/client/components/charts/FunnelChart.helpers.ts
+function w(e) {
 	if (!e || e.length === 0) return !1;
 	let t = e[0];
 	return typeof t == "object" && !!t && "name" in t && "value" in t && "percentage" in t;
 }
-function E(e, t, n, r) {
+function T(e, t, n, r) {
 	let i = [];
-	return t && e.avgSecondsToConvert != null && i.push(`Avg: ${x(e.avgSecondsToConvert)}`), n && e.medianSecondsToConvert != null && i.push(`Med: ${x(e.medianSecondsToConvert)}`), r && e.p90SecondsToConvert != null && i.push(`P90: ${x(e.p90SecondsToConvert)}`), i;
+	return t && e.avgSecondsToConvert != null && i.push(`Avg: ${C(e.avgSecondsToConvert)}`), n && e.medianSecondsToConvert != null && i.push(`Med: ${C(e.medianSecondsToConvert)}`), r && e.p90SecondsToConvert != null && i.push(`P90: ${C(e.p90SecondsToConvert)}`), i;
 }
-var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayConfig: m }) {
-	let { t: h } = t(), g = m?.funnelStepLabels, _ = (m?.funnelOrientation || "horizontal") === "vertical", v = m?.funnelStyle ?? "bars", y = m?.showFunnelConversion ?? !0, b = m?.showFunnelAvgTime ?? m?.showFunnelTimeMetrics ?? !1, x = m?.showFunnelMedianTime ?? !1, S = m?.showFunnelP90Time ?? !1, C = i(() => !e || e.length === 0 ? [] : T(e) ? e : e.map((e, t) => {
+function E(e) {
+	return !e || e.length === 0 ? [] : w(e) ? e : e.map((e, t) => {
 		let n = e, r = Object.keys(n).find((e) => e.toLowerCase().includes("step") || e.toLowerCase().includes("name") || e === "__stepName"), i = r ? String(n[r]) : `Step ${t + 1}`, a = Object.keys(n).find((e) => e.toLowerCase().includes("count") || e.toLowerCase().includes("value") || e === "__count"), o = a && Number(n[a]) || 0, s = Object.keys(n).find((e) => e.toLowerCase().includes("percent") || e === "__percentage"), c = s && Number(n[s]) || 0, l = Object.keys(n).find((e) => e.toLowerCase().includes("conversion") || e === "__conversionRate");
 		return {
 			name: i,
@@ -140,32 +127,94 @@ var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayC
 			conversionRate: l && Number(n[l]) || null,
 			stepIndex: t
 		};
-	}), [e]), D = C[0]?.value || 0;
-	if (!e || e.length === 0 || C.length === 0) return /* @__PURE__ */ a("div", {
-		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
-		style: { height: r },
+	});
+}
+function D(e) {
+	return {
+		customStepLabels: e?.funnelStepLabels,
+		isVertical: (e?.funnelOrientation || "horizontal") === "vertical",
+		funnelStyle: e?.funnelStyle ?? "bars",
+		showConversion: e?.showFunnelConversion ?? !0,
+		showAvgTime: e?.showFunnelAvgTime ?? e?.showFunnelTimeMetrics ?? !1,
+		showMedianTime: e?.showFunnelMedianTime ?? !1,
+		showP90Time: e?.showFunnelP90Time ?? !1,
+		hideSummaryFooter: e?.hideSummaryFooter ?? !1
+	};
+}
+function O(e, t) {
+	return t[e % t.length];
+}
+//#endregion
+//#region src/client/components/charts/FunnelViews.tsx
+function k({ funnelData: e, firstStepValue: n }) {
+	let { t: r } = t(), i = e[e.length - 1]?.value || 0;
+	return /* @__PURE__ */ a("div", {
+		className: "dc:flex-shrink-0 dc:px-4 dc:py-2 dc:border-t border-dc-border bg-dc-surface-secondary",
 		children: /* @__PURE__ */ o("div", {
-			className: "dc:text-center",
-			children: [/* @__PURE__ */ a("div", {
-				className: "dc:text-sm dc:font-semibold dc:mb-1",
-				children: h("chart.runtime.funnel.noData")
-			}), /* @__PURE__ */ a("div", {
-				className: "dc:text-xs text-dc-text-secondary",
-				children: h("chart.runtime.noDataHint.funnel")
-			})]
+			className: "dc:flex dc:items-center dc:justify-between dc:text-sm",
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "text-dc-text-muted",
+					children: [/* @__PURE__ */ a("span", {
+						className: "dc:font-medium",
+						children: e.length
+					}), " steps"]
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "text-dc-text",
+					children: [
+						/* @__PURE__ */ a("span", {
+							className: "text-dc-text-muted",
+							children: r("chart.runtime.funnel.overall")
+						}),
+						" ",
+						/* @__PURE__ */ a("span", {
+							className: "dc:font-medium",
+							children: n > 0 ? `${(i / n * 100).toFixed(1)}%` : "0%"
+						})
+					]
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "text-dc-text-muted",
+					children: [
+						i.toLocaleString() || 0,
+						" / ",
+						n.toLocaleString(),
+						" completed"
+					]
+				})
+			]
 		})
 	});
-	let O = p?.colors || n;
-	return v === "funnel" ? /* @__PURE__ */ o("div", {
+}
+function A({ stepConversionRate: e, arrow: t, showConversion: n, timeMetricsLines: r }) {
+	return e === null ? /* @__PURE__ */ a("div", {
+		className: "dc:text-xs text-dc-text-muted",
+		children: "—"
+	}) : /* @__PURE__ */ o("div", {
+		className: "dc:text-xs text-dc-text-secondary",
+		children: [n && /* @__PURE__ */ o("span", { children: [
+			t,
+			" ",
+			e.toFixed(1),
+			"%"
+		] }), r.length > 0 && /* @__PURE__ */ a("div", {
+			className: "text-dc-text-muted dc:mt-0.5 dc:space-y-0.5",
+			children: r.map((e, t) => /* @__PURE__ */ o("div", { children: ["⏱ ", e] }, t))
+		})]
+	});
+}
+function j({ funnelData: e, firstStepValue: t, paletteColors: n, options: r, height: i }) {
+	return /* @__PURE__ */ o("div", {
 		className: "dc:relative dc:w-full dc:h-full dc:flex dc:flex-col",
-		style: { height: r },
+		style: { height: i },
 		children: [/* @__PURE__ */ a("div", {
 			className: "dc:flex-1",
 			children: /* @__PURE__ */ a(d, {
 				width: "100%",
 				height: "100%",
 				children: /* @__PURE__ */ o(l, {
-					layout: _ ? "horizontal" : "vertical",
+					layout: r.isVertical ? "horizontal" : "vertical",
 					accessibilityLayer: !1,
 					children: [/* @__PURE__ */ a(f, {
 						formatter: (e) => typeof e == "number" ? e.toLocaleString() : String(e),
@@ -177,10 +226,10 @@ var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayC
 					}), /* @__PURE__ */ o(c, {
 						dataKey: "value",
 						nameKey: "name",
-						data: C,
+						data: e,
 						isAnimationActive: !0,
 						children: [
-							C.map((e, t) => /* @__PURE__ */ a(s, { fill: w(t, O) }, `cell-${t}`)),
+							e.map((e, t) => /* @__PURE__ */ a(s, { fill: O(t, n) }, `cell-${t}`)),
 							/* @__PURE__ */ a(u, {
 								position: "right",
 								dataKey: "name",
@@ -201,69 +250,30 @@ var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayC
 					})]
 				})
 			})
-		}), !m?.hideSummaryFooter && /* @__PURE__ */ a("div", {
-			className: "dc:flex-shrink-0 dc:px-4 dc:py-2 dc:border-t border-dc-border bg-dc-surface-secondary",
-			children: /* @__PURE__ */ o("div", {
-				className: "dc:flex dc:items-center dc:justify-between dc:text-sm",
-				children: [
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text-muted",
-						children: [/* @__PURE__ */ a("span", {
-							className: "dc:font-medium",
-							children: C.length
-						}), " steps"]
-					}),
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text",
-						children: [
-							/* @__PURE__ */ a("span", {
-								className: "text-dc-text-muted",
-								children: h("chart.runtime.funnel.overall")
-							}),
-							" ",
-							/* @__PURE__ */ a("span", {
-								className: "dc:font-medium",
-								children: D > 0 ? `${((C[C.length - 1]?.value || 0) / D * 100).toFixed(1)}%` : "0%"
-							})
-						]
-					}),
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text-muted",
-						children: [
-							C[C.length - 1]?.value.toLocaleString() || 0,
-							" / ",
-							D.toLocaleString(),
-							" completed"
-						]
-					})
-				]
-			})
+		}), !r.hideSummaryFooter && /* @__PURE__ */ a(k, {
+			funnelData: e,
+			firstStepValue: t
 		})]
-	}) : _ ? /* @__PURE__ */ o("div", {
+	});
+}
+function M({ funnelData: e, firstStepValue: t, paletteColors: n, options: r, height: i }) {
+	return /* @__PURE__ */ o("div", {
 		className: "dc:relative dc:w-full dc:h-full dc:flex dc:flex-col",
-		style: { height: r },
+		style: { height: i },
 		children: [/* @__PURE__ */ a("div", {
 			className: "dc:flex-1 dc:flex dc:items-end dc:justify-center dc:gap-4 dc:px-4 dc:py-3 dc:overflow-hidden",
-			children: C.map((e, t) => {
-				let n = D > 0 ? e.value / D * 100 : 0, r = t > 0 ? C[t - 1] : null, i = r && r.value > 0 ? e.value / r.value * 100 : null, s = g?.[t] || e.name, c = E(e, b, x, S), l = c.length;
+			children: e.map((i, s) => {
+				let c = t > 0 ? i.value / t * 100 : 0, l = s > 0 ? e[s - 1] : null, u = l && l.value > 0 ? i.value / l.value * 100 : null, d = r.customStepLabels?.[s] || i.name, f = T(i, r.showAvgTime, r.showMedianTime, r.showP90Time), p = f.length;
 				return /* @__PURE__ */ o("div", {
 					className: "dc:flex dc:flex-col dc:items-center dc:gap-2 dc:flex-1 dc:max-w-32 dc:h-full",
 					children: [
 						/* @__PURE__ */ a("div", {
-							className: `${l > 0 ? l > 1 ? "dc:min-h-16" : "dc:min-h-10" : "dc:h-5"} dc:flex-shrink-0 dc:text-center`,
-							children: i === null ? /* @__PURE__ */ a("div", {
-								className: "dc:text-xs text-dc-text-muted",
-								children: "—"
-							}) : /* @__PURE__ */ o("div", {
-								className: "dc:text-xs text-dc-text-secondary",
-								children: [y && /* @__PURE__ */ o("span", { children: [
-									"→ ",
-									i.toFixed(1),
-									"%"
-								] }), l > 0 && /* @__PURE__ */ a("div", {
-									className: "text-dc-text-muted dc:mt-0.5 dc:space-y-0.5",
-									children: c.map((e, t) => /* @__PURE__ */ o("div", { children: ["⏱ ", e] }, t))
-								})]
+							className: `${p > 0 ? p > 1 ? "dc:min-h-16" : "dc:min-h-10" : "dc:h-5"} dc:flex-shrink-0 dc:text-center`,
+							children: /* @__PURE__ */ a(A, {
+								stepConversionRate: u,
+								arrow: "→",
+								showConversion: r.showConversion,
+								timeMetricsLines: f
 							})
 						}),
 						/* @__PURE__ */ o("div", {
@@ -273,16 +283,16 @@ var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayC
 								/* @__PURE__ */ a("div", {
 									className: "dc:absolute dc:bottom-0 dc:left-0 dc:right-0 dc:rounded-sm dc:transition-all dc:duration-300",
 									style: {
-										height: `${Math.max(n, 5)}%`,
-										backgroundColor: w(t, O)
+										height: `${Math.max(c, 5)}%`,
+										backgroundColor: O(s, n)
 									}
 								}),
 								/* @__PURE__ */ a("div", {
 									className: "dc:absolute dc:bottom-0 dc:left-0 dc:right-0 dc:flex dc:items-end dc:justify-center dc:pb-1 dc:pointer-events-none",
-									style: { height: `${Math.max(n, 20)}%` },
+									style: { height: `${Math.max(c, 20)}%` },
 									children: /* @__PURE__ */ o("span", {
 										className: "dc:text-xs dc:font-medium text-white dc:drop-shadow-sm",
-										children: [e.percentage?.toFixed(1) ?? n.toFixed(1), "%"]
+										children: [i.percentage?.toFixed(1) ?? c.toFixed(1), "%"]
 									})
 								})
 							]
@@ -291,61 +301,30 @@ var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayC
 							className: "dc:flex-shrink-0 dc:text-center",
 							children: [/* @__PURE__ */ a("div", {
 								className: "dc:text-sm dc:font-medium text-dc-text dc:truncate",
-								title: s,
-								children: s
+								title: d,
+								children: d
 							}), /* @__PURE__ */ a("div", {
 								className: "dc:text-xs text-dc-text-muted",
-								children: e.value.toLocaleString()
+								children: i.value.toLocaleString()
 							})]
 						})
 					]
-				}, e.name);
-			})
-		}), !m?.hideSummaryFooter && /* @__PURE__ */ a("div", {
-			className: "dc:flex-shrink-0 dc:px-4 dc:py-2 dc:border-t border-dc-border bg-dc-surface-secondary",
-			children: /* @__PURE__ */ o("div", {
-				className: "dc:flex dc:items-center dc:justify-between dc:text-sm",
-				children: [
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text-muted",
-						children: [/* @__PURE__ */ a("span", {
-							className: "dc:font-medium",
-							children: C.length
-						}), " steps"]
-					}),
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text",
-						children: [
-							/* @__PURE__ */ a("span", {
-								className: "text-dc-text-muted",
-								children: h("chart.runtime.funnel.overall")
-							}),
-							" ",
-							/* @__PURE__ */ a("span", {
-								className: "dc:font-medium",
-								children: D > 0 ? `${((C[C.length - 1]?.value || 0) / D * 100).toFixed(1)}%` : "0%"
-							})
-						]
-					}),
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text-muted",
-						children: [
-							C[C.length - 1]?.value.toLocaleString() || 0,
-							" / ",
-							D.toLocaleString(),
-							" completed"
-						]
-					})
-				]
+				}, i.name);
 			})
+		}), !r.hideSummaryFooter && /* @__PURE__ */ a(k, {
+			funnelData: e,
+			firstStepValue: t
 		})]
-	}) : /* @__PURE__ */ o("div", {
+	});
+}
+function N({ funnelData: e, firstStepValue: t, paletteColors: n, options: r, height: i }) {
+	return /* @__PURE__ */ o("div", {
 		className: "dc:relative dc:w-full dc:h-full dc:flex dc:flex-col",
-		style: { height: r },
+		style: { height: i },
 		children: [/* @__PURE__ */ a("div", {
 			className: "dc:flex-1 dc:flex dc:flex-col dc:justify-center dc:gap-2 dc:px-4 dc:py-3 dc:overflow-hidden",
-			children: C.map((e, t) => {
-				let n = D > 0 ? e.value / D * 100 : 0, r = t > 0 ? C[t - 1] : null, i = r && r.value > 0 ? e.value / r.value * 100 : null, s = g?.[t] || e.name, c = E(e, b, x, S), l = c.length;
+			children: e.map((i, s) => {
+				let c = t > 0 ? i.value / t * 100 : 0, l = s > 0 ? e[s - 1] : null, u = l && l.value > 0 ? i.value / l.value * 100 : null, d = r.customStepLabels?.[s] || i.name, f = T(i, r.showAvgTime, r.showMedianTime, r.showP90Time), p = f.length;
 				return /* @__PURE__ */ o("div", {
 					className: "dc:flex dc:items-center dc:gap-3",
 					children: [
@@ -353,11 +332,11 @@ var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayC
 							className: "dc:w-24 dc:flex-shrink-0 dc:text-right",
 							children: [/* @__PURE__ */ a("div", {
 								className: "dc:text-sm dc:font-medium text-dc-text dc:truncate",
-								title: s,
-								children: s
+								title: d,
+								children: d
 							}), /* @__PURE__ */ a("div", {
 								className: "dc:text-xs text-dc-text-muted",
-								children: e.value.toLocaleString()
+								children: i.value.toLocaleString()
 							})]
 						}),
 						/* @__PURE__ */ o("div", {
@@ -367,81 +346,64 @@ var D = r.memo(function({ data: e, height: r = "100%", colorPalette: p, displayC
 								/* @__PURE__ */ a("div", {
 									className: "dc:absolute dc:top-0 dc:left-0 dc:h-8 dc:rounded-sm dc:transition-all dc:duration-300",
 									style: {
-										width: `${Math.max(n, 2)}%`,
-										backgroundColor: w(t, O)
+										width: `${Math.max(c, 2)}%`,
+										backgroundColor: O(s, n)
 									}
 								}),
 								/* @__PURE__ */ a("div", {
 									className: "dc:absolute dc:top-0 dc:left-0 dc:h-8 dc:flex dc:items-center dc:px-2 dc:pointer-events-none",
-									style: { width: `${Math.max(n, 20)}%` },
+									style: { width: `${Math.max(c, 20)}%` },
 									children: /* @__PURE__ */ o("span", {
 										className: "dc:text-xs dc:font-medium text-white dc:drop-shadow-sm",
-										children: [e.percentage?.toFixed(1) ?? n.toFixed(1), "%"]
+										children: [i.percentage?.toFixed(1) ?? c.toFixed(1), "%"]
 									})
 								})
 							]
 						}),
 						/* @__PURE__ */ a("div", {
-							className: `${l > 0 ? l > 1 ? "dc:w-36" : "dc:w-28" : "dc:w-16"} dc:flex-shrink-0 dc:text-left`,
-							children: i === null ? /* @__PURE__ */ a("div", {
-								className: "dc:text-xs text-dc-text-muted",
-								children: "—"
-							}) : /* @__PURE__ */ o("div", {
-								className: "dc:text-xs text-dc-text-secondary",
-								children: [y && /* @__PURE__ */ o("span", { children: [
-									"↓ ",
-									i.toFixed(1),
-									"%"
-								] }), l > 0 && /* @__PURE__ */ a("div", {
-									className: "text-dc-text-muted dc:mt-0.5 dc:space-y-0.5",
-									children: c.map((e, t) => /* @__PURE__ */ o("div", { children: ["⏱ ", e] }, t))
-								})]
+							className: `${p > 0 ? p > 1 ? "dc:w-36" : "dc:w-28" : "dc:w-16"} dc:flex-shrink-0 dc:text-left`,
+							children: /* @__PURE__ */ a(A, {
+								stepConversionRate: u,
+								arrow: "↓",
+								showConversion: r.showConversion,
+								timeMetricsLines: f
 							})
 						})
 					]
-				}, e.name);
-			})
-		}), !m?.hideSummaryFooter && /* @__PURE__ */ a("div", {
-			className: "dc:flex-shrink-0 dc:px-4 dc:py-2 dc:border-t border-dc-border bg-dc-surface-secondary",
-			children: /* @__PURE__ */ o("div", {
-				className: "dc:flex dc:items-center dc:justify-between dc:text-sm",
-				children: [
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text-muted",
-						children: [/* @__PURE__ */ a("span", {
-							className: "dc:font-medium",
-							children: C.length
-						}), " steps"]
-					}),
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text",
-						children: [
-							/* @__PURE__ */ a("span", {
-								className: "text-dc-text-muted",
-								children: h("chart.runtime.funnel.overall")
-							}),
-							" ",
-							/* @__PURE__ */ a("span", {
-								className: "dc:font-medium",
-								children: D > 0 ? `${((C[C.length - 1]?.value || 0) / D * 100).toFixed(1)}%` : "0%"
-							})
-						]
-					}),
-					/* @__PURE__ */ o("div", {
-						className: "text-dc-text-muted",
-						children: [
-							C[C.length - 1]?.value.toLocaleString() || 0,
-							" / ",
-							D.toLocaleString(),
-							" completed"
-						]
-					})
-				]
+				}, i.name);
 			})
+		}), !r.hideSummaryFooter && /* @__PURE__ */ a(k, {
+			funnelData: e,
+			firstStepValue: t
 		})]
 	});
+}
+//#endregion
+//#region src/client/components/charts/FunnelChart.tsx
+var P = /* @__PURE__ */ e({ default: () => F }), F = r.memo(function({ data: e, height: r = "100%", colorPalette: s, displayConfig: c }) {
+	let { t: l } = t(), u = D(c), d = i(() => E(e), [e]);
+	return !e || e.length === 0 || d.length === 0 ? /* @__PURE__ */ a("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: r },
+		children: /* @__PURE__ */ o("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ a("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: l("chart.runtime.funnel.noData")
+			}), /* @__PURE__ */ a("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: l("chart.runtime.noDataHint.funnel")
+			})]
+		})
+	}) : a(u.funnelStyle === "funnel" ? j : u.isVertical ? M : N, {
+		funnelData: d,
+		firstStepValue: d[0]?.value || 0,
+		paletteColors: s?.colors || n,
+		options: u,
+		height: r
+	});
 });
 //#endregion
-export { x as a, g as c, _ as i, b as l, S as n, p as o, h as r, m as s, D as t };
+export { C as a, g as c, _ as i, S as l, P as n, p as o, h as r, m as s, F as t };
 
-//# sourceMappingURL=chart-funnel-DnWRsmnS.js.map
+//# sourceMappingURL=chart-funnel-CToKSBaL.js.map