import { BaseChart as e } from "../base.js";
import { ChartTooltip as t } from "../tooltip.js";
import { defaultColors as n, formatNumber as r, hexToRgba as i } from "../utils.js";
//#region src/charts/funnel/index.ts
var a = "#334155", o = "#64748b", s = "12px system-ui, sans-serif", c = "11px system-ui, sans-serif", l = .12, u = class extends e {
	segments;
	resolved = [];
	colors;
	showLabels;
	showValues;
	direction;
	curved;
	gap;
	tooltip = null;
	hoveredIndex = -1;
	boundMouseMove;
	boundMouseLeave;
	constructor(e) {
		super(e), this.segments = e.segments, this.colors = n(), this.showLabels = e.showLabels ?? !0, this.showValues = e.showValues ?? !0, this.direction = e.direction ?? "vertical", this.curved = e.curved ?? !1, this.gap = e.gap ?? 2, e.tooltip?.enabled !== !1 && (this.tooltip = new t(this.container)), this.boundMouseMove = (e) => {
			this.handleMouseMove(e);
		}, this.boundMouseLeave = () => {
			this.handleMouseLeave();
		}, this.canvas.addEventListener("mousemove", this.boundMouseMove), this.canvas.addEventListener("mouseleave", this.boundMouseLeave), this.resolveSegments(), this.render();
	}
	update(e) {
		this.segments = e, this.resolveSegments(), this.render();
	}
	render() {
		this.clear(), this.resolved.length !== 0 && (this.direction === "horizontal" ? this.renderHorizontal() : this.renderVertical());
	}
	destroy() {
		this.canvas.removeEventListener("mousemove", this.boundMouseMove), this.canvas.removeEventListener("mouseleave", this.boundMouseLeave), this.tooltip !== null && this.tooltip.destroy(), super.destroy();
	}
	resolveSegments() {
		let e = this.findMaxValue(), t = this.segments[0]?.value ?? 1;
		this.resolved = [];
		for (let n = 0; n < this.segments.length; n++) {
			let r = this.segments[n];
			if (r === void 0) continue;
			let i = r.color ?? this.colors[n % this.colors.length] ?? "#3b82f6", a = e > 0 ? r.value / e : 0, o = t > 0 ? r.value / t * 100 : 0;
			this.resolved.push({
				label: r.label,
				value: r.value,
				color: i,
				widthRatio: a,
				percentage: o
			});
		}
	}
	findMaxValue() {
		let e = 0;
		for (let t of this.segments) t.value > e && (e = t.value);
		return e;
	}
	renderVertical() {
		let e = this.plotArea, t = this.resolved.length;
		if (t === 0) return;
		let n = this.gap * Math.max(0, t - 1), r = (e.height - n) / t;
		for (let n = 0; n < t; n++) {
			let t = this.resolved[n];
			if (t === void 0) continue;
			let a = this.resolved[n + 1], o = t.widthRatio * e.width, s = a === void 0 ? o * .7 : a.widthRatio * e.width, c = e.y + n * (r + this.gap), u = e.x + e.width / 2, d = u - o / 2, f = u + o / 2, p = u - s / 2, m = u + s / 2, h = n === this.hoveredIndex ? i(t.color, 1 - l) : t.color;
			if (this.ctx.save(), this.ctx.beginPath(), this.curved) {
				let e = c + r * .6;
				this.ctx.moveTo(d, c), this.ctx.lineTo(f, c), this.ctx.quadraticCurveTo(f, e, m, c + r), this.ctx.lineTo(p, c + r), this.ctx.quadraticCurveTo(d, e, d, c);
			} else this.ctx.moveTo(d, c), this.ctx.lineTo(f, c), this.ctx.lineTo(m, c + r), this.ctx.lineTo(p, c + r);
			this.ctx.closePath(), this.ctx.fillStyle = h, this.ctx.fill(), this.ctx.restore(), this.drawSegmentText(u, c + r / 2, t);
		}
	}
	renderHorizontal() {
		let e = this.plotArea, t = this.resolved.length;
		if (t === 0) return;
		let n = this.gap * Math.max(0, t - 1), r = (e.width - n) / t;
		for (let n = 0; n < t; n++) {
			let t = this.resolved[n];
			if (t === void 0) continue;
			let a = this.resolved[n + 1], o = t.widthRatio * e.height, s = a === void 0 ? o * .7 : a.widthRatio * e.height, c = e.x + n * (r + this.gap), u = e.y + e.height / 2, d = u - o / 2, f = u + o / 2, p = u - s / 2, m = u + s / 2, h = n === this.hoveredIndex ? i(t.color, 1 - l) : t.color;
			if (this.ctx.save(), this.ctx.beginPath(), this.curved) {
				let e = c + r * .6;
				this.ctx.moveTo(c, d), this.ctx.lineTo(c, f), this.ctx.quadraticCurveTo(e, f, c + r, m), this.ctx.lineTo(c + r, p), this.ctx.quadraticCurveTo(e, d, c, d);
			} else this.ctx.moveTo(c, d), this.ctx.lineTo(c, f), this.ctx.lineTo(c + r, m), this.ctx.lineTo(c + r, p);
			this.ctx.closePath(), this.ctx.fillStyle = h, this.ctx.fill(), this.ctx.restore(), this.drawSegmentText(c + r / 2, u, t);
		}
	}
	drawSegmentText(e, t, n) {
		this.ctx.save(), this.ctx.textAlign = "center", this.ctx.textBaseline = "middle", this.showLabels && this.showValues ? (this.ctx.fillStyle = a, this.ctx.font = s, this.ctx.fillText(n.label, e, t - 8), this.ctx.fillStyle = o, this.ctx.font = c, this.ctx.fillText(`${r(n.value)} (${n.percentage.toFixed(1)}%)`, e, t + 8)) : this.showLabels ? (this.ctx.fillStyle = a, this.ctx.font = s, this.ctx.fillText(n.label, e, t)) : this.showValues && (this.ctx.fillStyle = o, this.ctx.font = c, this.ctx.fillText(r(n.value), e, t)), this.ctx.restore();
	}
	handleMouseMove(e) {
		let t = this.canvas.getBoundingClientRect(), n = e.clientX - t.left, i = e.clientY - t.top, a = this.plotArea, o = this.resolved.length;
		if (o === 0) return;
		let s = -1;
		if (this.direction === "horizontal") {
			let e = this.gap * Math.max(0, o - 1), t = (a.width - e) / o, r = n - a.x;
			if (r >= 0 && r <= a.width && i >= a.y && i <= a.y + a.height) for (let e = 0; e < o; e++) {
				let n = e * (t + this.gap), i = n + t;
				if (r >= n && r < i) {
					s = e;
					break;
				}
			}
		} else {
			let e = this.gap * Math.max(0, o - 1), t = (a.height - e) / o, r = i - a.y;
			if (r >= 0 && r <= a.height && n >= a.x && n <= a.x + a.width) for (let e = 0; e < o; e++) {
				let n = e * (t + this.gap), i = n + t;
				if (r >= n && r < i) {
					s = e;
					break;
				}
			}
		}
		if (s !== this.hoveredIndex && (this.hoveredIndex = s, this.render()), s !== -1 && this.tooltip !== null) {
			let e = this.resolved[s];
			if (e !== void 0) {
				let t = `<strong>${e.label}</strong><br/>${r(e.value)} (${e.percentage.toFixed(1)}%)`;
				this.tooltip.show(n, i, t);
			}
		} else this.tooltip !== null && this.tooltip.hide();
	}
	handleMouseLeave() {
		this.hoveredIndex !== -1 && (this.hoveredIndex = -1, this.tooltip !== null && this.tooltip.hide(), this.render());
	}
};
//#endregion
export { u as FunnelChart };

//# sourceMappingURL=index.js.map