@rudra-studio/rudra-charts 1.0.1

package/README.md

@@ -0,0 +1,7 @@
+# rudra-charts
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test rudra-charts` to execute the unit tests via [Vitest](https://vitest.dev/).

package/components/AnimatedLineChart/index.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface LineDataPoint {
+    x: string;
+    y: number;
+}
+export interface LineSeries {
+    id: string;
+    color?: string;
+    data: LineDataPoint[];
+}
+export interface AnimatedLineChartProps {
+    /** The dataset to render. Array of series for multi-line support. */
+    series?: LineSeries[];
+    /** Line curve style */
+    curveType?: 'linear' | 'smooth' | 'step';
+    /** Stroke width of the lines */
+    strokeWidth?: number;
+    /** Show dots on data points? */
+    showDots?: boolean;
+    /** Default palette if individual series colors are not provided */
+    themeColors?: string[];
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedLineChart: React.FC<AnimatedLineChartProps>;
+export default AnimatedLineChart;

package/components/AnimatedLineChart/index.js

@@ -0,0 +1,109 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import * as r from "d3";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/AnimatedLineChart/index.tsx
+var a = ({ series: a = [{
+	id: "Product A",
+	data: [
+		{
+			x: "Q1",
+			y: 30
+		},
+		{
+			x: "Q2",
+			y: 80
+		},
+		{
+			x: "Q3",
+			y: 45
+		},
+		{
+			x: "Q4",
+			y: 100
+		}
+	]
+}, {
+	id: "Product B",
+	data: [
+		{
+			x: "Q1",
+			y: 10
+		},
+		{
+			x: "Q2",
+			y: 40
+		},
+		{
+			x: "Q3",
+			y: 70
+		},
+		{
+			x: "Q4",
+			y: 50
+		}
+	]
+}], curveType: o = "smooth", strokeWidth: s = 3, showDots: c = !0, themeColors: l = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6"
+], marginTop: u = 20, marginBottom: d = 30, marginLeft: f = 40, marginRight: p = 20, className: m = "" }) => {
+	let h = t(null), g = t(null), [_, v] = n({
+		width: 0,
+		height: 300
+	});
+	return e(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			e[0] && v({
+				width: e[0].contentRect.width,
+				height: e[0].contentRect.height || 300
+			});
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, []), e(() => {
+		if (!g.current || _.width === 0 || a.length === 0) return;
+		let { width: e, height: t } = _, n = r.select(g.current), i = Array.from(new Set(a.flatMap((e) => e.data.map((e) => e.x)))), m = r.max(a.flatMap((e) => e.data.map((e) => e.y))) || 100, h = r.scalePoint().domain(i).range([f, e - p]).padding(.1), v = r.scaleLinear().domain([0, m]).nice().range([t - d, u]), y = r.scaleOrdinal().range(l), b = r.line().x((e) => h(e.x)).y((e) => v(e.y));
+		o === "smooth" ? b.curve(r.curveMonotoneX) : o === "step" ? b.curve(r.curveStepAfter) : b.curve(r.curveLinear), n.select(".x-axis").empty() && (n.append("g").attr("class", "axis x-axis"), n.append("g").attr("class", "axis y-axis")), n.select(".x-axis").attr("transform", `translate(0,${t - d})`).transition().duration(500).call(r.axisBottom(h)).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b"), n.select(".y-axis").attr("transform", `translate(${f},0)`).transition().duration(500).call(r.axisLeft(v).ticks(5)).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b"), n.select(".y-axis").select(".domain").remove(), n.selectAll(".y-axis .tick line").attr("x2", e - f - p).attr("stroke-opacity", .1);
+		let x = n.select(".lines-group");
+		x.empty() && (x = n.append("g").attr("class", "lines-group"));
+		let S = x.selectAll(".line-path").data(a, (e) => e.id);
+		S.exit().transition().duration(400).style("opacity", 0).remove(), S.enter().append("path").attr("class", "line-path").attr("fill", "none").attr("stroke", (e, t) => e.color || y(e.id)).attr("stroke-width", s).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("d", (e) => b(e.data)).each(function() {
+			let e = this.getTotalLength();
+			r.select(this).attr("stroke-dasharray", `${e} ${e}`).attr("stroke-dashoffset", e).transition().duration(1500).ease(r.easeCubicOut).attr("stroke-dashoffset", 0);
+		}), S.transition().duration(750).ease(r.easeCubicOut).attr("d", (e) => b(e.data)).attr("stroke", (e, t) => e.color || y(e.id)).attr("stroke-width", s);
+		let C = n.select(".dots-group");
+		if (C.empty() && (C = n.append("g").attr("class", "dots-group")), c) {
+			let e = a.flatMap((e) => e.data.map((t) => ({
+				...t,
+				seriesId: e.id,
+				color: e.color || y(e.id)
+			}))), t = C.selectAll(".dot").data(e, (e) => `${e.seriesId}-${e.x}`);
+			t.exit().transition().duration(300).attr("r", 0).remove(), t.enter().append("circle").attr("class", "dot").attr("cx", (e) => h(e.x)).attr("cy", (e) => v(e.y)).attr("r", 0).attr("fill", "white").attr("stroke", (e) => e.color).attr("stroke-width", 2).transition().duration(750).delay(500).attr("r", s + 1), t.transition().duration(750).attr("cx", (e) => h(e.x)).attr("cy", (e) => v(e.y)).attr("stroke", (e) => e.color).attr("stroke-width", 2);
+		} else C.selectAll(".dot").remove();
+	}, [
+		a,
+		_,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d,
+		f,
+		p
+	]), /* @__PURE__ */ i("div", {
+		ref: h,
+		className: `w-full min-h-[300px] h-full relative ${m}`,
+		children: /* @__PURE__ */ i("svg", {
+			ref: g,
+			width: "100%",
+			height: "100%",
+			className: "block absolute inset-0 overflow-visible"
+		})
+	});
+};
+//#endregion
+export { a as default };

package/components/BubbleChart/index.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface BubbleDataPoint {
+    id: string | number;
+    x: number;
+    y: number;
+    z: number;
+    category: string;
+    label?: string;
+}
+export interface AnimatedBubbleChartProps {
+    /** The dataset containing x, y, and z values. */
+    data?: BubbleDataPoint[];
+    /** Default palette for the categories */
+    themeColors?: string[];
+    /** The maximum radius (in pixels) for the largest bubble in the dataset */
+    maxRadius?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedBubbleChart: React.FC<AnimatedBubbleChartProps>;
+export default AnimatedBubbleChart;

package/components/BubbleChart/index.js

@@ -0,0 +1,126 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import * as r from "d3";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/BubbleChart/index.tsx
+var a = ({ data: a = [
+	{
+		id: 1,
+		x: 1200,
+		y: 80,
+		z: 15e3,
+		category: "Group A",
+		label: "Campaign 1"
+	},
+	{
+		id: 2,
+		x: 2500,
+		y: 110,
+		z: 42e3,
+		category: "Group A",
+		label: "Campaign 2"
+	},
+	{
+		id: 3,
+		x: 3400,
+		y: 150,
+		z: 31e3,
+		category: "Group B",
+		label: "Campaign 3"
+	},
+	{
+		id: 4,
+		x: 4800,
+		y: 210,
+		z: 86e3,
+		category: "Group B",
+		label: "Campaign 4"
+	},
+	{
+		id: 5,
+		x: 5900,
+		y: 180,
+		z: 54e3,
+		category: "Group C",
+		label: "Campaign 5"
+	},
+	{
+		id: 6,
+		x: 7200,
+		y: 250,
+		z: 98e3,
+		category: "Group C",
+		label: "Campaign 6"
+	},
+	{
+		id: 7,
+		x: 8100,
+		y: 310,
+		z: 22e3,
+		category: "Group A",
+		label: "Campaign 7"
+	},
+	{
+		id: 8,
+		x: 9500,
+		y: 290,
+		z: 115e3,
+		category: "Group B",
+		label: "Campaign 8"
+	}
+], themeColors: o = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6"
+], maxRadius: s = 35, marginTop: c = 20, marginBottom: l = 40, marginLeft: u = 50, marginRight: d = 40, className: f = "" }) => {
+	let p = t(null), m = t(null), [h, g] = n({
+		width: 0,
+		height: 400
+	});
+	return e(() => {
+		let e = p.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			e[0] && g({
+				width: e[0].contentRect.width,
+				height: e[0].contentRect.height || 400
+			});
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, []), e(() => {
+		if (!m.current || h.width === 0 || a.length === 0) return;
+		let { width: e, height: t } = h, n = r.select(m.current), i = r.max(a, (e) => e.x) || 100, f = r.max(a, (e) => e.y) || 100, p = r.max(a, (e) => e.z) || 100, g = r.scaleLinear().domain([0, i * 1.1]).nice().range([u, e - d]), _ = r.scaleLinear().domain([0, f * 1.1]).nice().range([t - l, c]), v = r.scaleSqrt().domain([0, p]).range([2, s]), y = Array.from(new Set(a.map((e) => e.category))), b = r.scaleOrdinal().domain(y).range(o);
+		n.select(".x-axis").empty() && (n.append("g").attr("class", "axis x-axis"), n.append("g").attr("class", "axis y-axis")), n.select(".x-axis").attr("transform", `translate(0,${t - l})`).transition().duration(500).call(r.axisBottom(g).ticks(8).tickSize(-(t - c - l))).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b").call((e) => e.select(".domain").remove()).call((e) => e.selectAll(".tick line").attr("stroke-opacity", .1)), n.select(".y-axis").attr("transform", `translate(${u},0)`).transition().duration(500).call(r.axisLeft(_).ticks(6).tickSize(-(e - u - d))).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b").call((e) => e.select(".domain").remove()).call((e) => e.selectAll(".tick line").attr("stroke-opacity", .1));
+		let x = n.select(".bubbles-group");
+		x.empty() && (x = n.append("g").attr("class", "bubbles-group"));
+		let S = x.selectAll(".bubble").data(a, (e) => e.id);
+		S.exit().transition().duration(300).attr("r", 0).remove();
+		let C = S.enter().append("circle").attr("class", "bubble").attr("cx", (e) => g(e.x)).attr("cy", (e) => _(e.y)).attr("r", 0).attr("fill", (e) => b(e.category)).attr("opacity", .7).attr("stroke", "#ffffff").attr("stroke-width", 1.5).style("cursor", "pointer");
+		C.transition().duration(800).delay((e, t) => t * 50).ease(r.easeElasticOut.amplitude(1).period(.5)).attr("r", (e) => v(e.z)), S.transition().duration(750).ease(r.easeCubicOut).attr("cx", (e) => g(e.x)).attr("cy", (e) => _(e.y)).attr("r", (e) => v(e.z)).attr("fill", (e) => b(e.category)), C.merge(S).on("mouseenter", function() {
+			x.selectAll(".bubble").transition().duration(200).attr("opacity", .2), r.select(this).raise().transition().duration(200).attr("opacity", .9).attr("stroke-width", 3);
+		}).on("mouseleave", function() {
+			x.selectAll(".bubble").transition().duration(200).attr("opacity", .7).attr("stroke-width", 1.5);
+		});
+	}, [
+		a,
+		h,
+		s,
+		o,
+		c,
+		l,
+		u,
+		d
+	]), /* @__PURE__ */ i("div", {
+		ref: p,
+		className: `w-full min-h-[400px] h-full relative ${f}`,
+		children: /* @__PURE__ */ i("svg", {
+			ref: m,
+			width: "100%",
+			height: "100%",
+			className: "block absolute inset-0 overflow-visible"
+		})
+	});
+};
+//#endregion
+export { a as default };

package/components/CandleStickChart/index.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface CandlestickDataPoint {
+    id: string | number;
+    date: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+}
+export interface AnimatedCandlestickChartProps {
+    /** The OHLC dataset. */
+    data?: CandlestickDataPoint[];
+    /** Color for days where Close > Open (default: Emerald Green) */
+    colorBullish?: string;
+    /** Color for days where Open > Close (default: Red) */
+    colorBearish?: string;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedCandlestickChart: React.FC<AnimatedCandlestickChartProps>;
+export default AnimatedCandlestickChart;

package/components/CandleStickChart/index.js

@@ -0,0 +1,116 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import * as r from "d3";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/CandleStickChart/index.tsx
+var a = ({ data: a = [
+	{
+		id: 1,
+		date: "Oct 1",
+		open: 120,
+		high: 125,
+		low: 115,
+		close: 122
+	},
+	{
+		id: 2,
+		date: "Oct 2",
+		open: 122,
+		high: 130,
+		low: 120,
+		close: 128
+	},
+	{
+		id: 3,
+		date: "Oct 3",
+		open: 128,
+		high: 132,
+		low: 125,
+		close: 126
+	},
+	{
+		id: 4,
+		date: "Oct 4",
+		open: 126,
+		high: 127,
+		low: 118,
+		close: 119
+	},
+	{
+		id: 5,
+		date: "Oct 5",
+		open: 119,
+		high: 135,
+		low: 115,
+		close: 133
+	},
+	{
+		id: 6,
+		date: "Oct 6",
+		open: 133,
+		high: 140,
+		low: 130,
+		close: 138
+	},
+	{
+		id: 7,
+		date: "Oct 7",
+		open: 138,
+		high: 142,
+		low: 135,
+		close: 136
+	}
+], colorBullish: o = "#10b981", colorBearish: s = "#ef4444", marginTop: c = 20, marginBottom: l = 40, marginLeft: u = 50, marginRight: d = 20, className: f = "" }) => {
+	let p = t(null), m = t(null), [h, g] = n({
+		width: 0,
+		height: 350
+	});
+	return e(() => {
+		let e = p.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			e[0] && g({
+				width: e[0].contentRect.width,
+				height: e[0].contentRect.height || 350
+			});
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, []), e(() => {
+		if (!m.current || h.width === 0 || a.length === 0) return;
+		let { width: e, height: t } = h, n = r.select(m.current), i = r.scaleBand().domain(a.map((e) => e.date)).range([u, e - d]).padding(.25), f = r.min(a, (e) => e.low) || 0, p = r.max(a, (e) => e.high) || 100, g = (p - f) * .1, _ = r.scaleLinear().domain([Math.max(0, f - g), p + g]).nice().range([t - l, c]), v = (e) => e.close >= e.open;
+		n.select(".x-axis").empty() && (n.append("g").attr("class", "axis x-axis"), n.append("g").attr("class", "axis y-axis")), n.select(".x-axis").attr("transform", `translate(0,${t - l})`).transition().duration(500).call(r.axisBottom(i).tickSizeOuter(0)).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b").call((e) => e.select(".domain").remove()), n.select(".y-axis").attr("transform", `translate(${u},0)`).transition().duration(500).call(r.axisLeft(_).ticks(6).tickFormat((e) => `$${e}`).tickSize(-(e - u - d))).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b").call((e) => e.select(".domain").remove()).call((e) => e.selectAll(".tick line").attr("stroke-opacity", .1).attr("stroke-dasharray", "4,4"));
+		let y = n.select(".wicks-group");
+		y.empty() && (y = n.append("g").attr("class", "wicks-group"));
+		let b = y.selectAll(".wick").data(a, (e) => e.id);
+		b.exit().remove(), b.enter().append("line").attr("class", "wick").attr("x1", (e) => (i(e.date) || 0) + i.bandwidth() / 2).attr("x2", (e) => (i(e.date) || 0) + i.bandwidth() / 2).attr("y1", (e) => _(e.open)).attr("y2", (e) => _(e.open)).attr("stroke", (e) => v(e) ? o : s).attr("stroke-width", 2).transition().duration(600).ease(r.easeCubicOut).attr("y1", (e) => _(e.high)).attr("y2", (e) => _(e.low)), b.transition().duration(750).attr("x1", (e) => (i(e.date) || 0) + i.bandwidth() / 2).attr("x2", (e) => (i(e.date) || 0) + i.bandwidth() / 2).attr("y1", (e) => _(e.high)).attr("y2", (e) => _(e.low)).attr("stroke", (e) => v(e) ? o : s);
+		let x = n.select(".bodies-group");
+		x.empty() && (x = n.append("g").attr("class", "bodies-group"));
+		let S = x.selectAll(".body").data(a, (e) => e.id);
+		S.exit().remove();
+		let C = S.enter().append("rect").attr("class", "body").attr("x", (e) => i(e.date) || 0).attr("width", i.bandwidth()).attr("y", (e) => _(e.open)).attr("height", 0).attr("fill", (e) => v(e) ? o : s).attr("rx", 2).style("cursor", "pointer");
+		C.transition().duration(600).delay(200).ease(r.easeCubicOut).attr("y", (e) => _(Math.max(e.open, e.close))).attr("height", (e) => Math.max(2, Math.abs(_(e.open) - _(e.close)))), S.transition().duration(750).attr("x", (e) => i(e.date) || 0).attr("width", i.bandwidth()).attr("y", (e) => _(Math.max(e.open, e.close))).attr("height", (e) => Math.max(2, Math.abs(_(e.open) - _(e.close)))).attr("fill", (e) => v(e) ? o : s), C.merge(S).on("mouseenter", function(e, t) {
+			x.selectAll(".body").transition().duration(200).attr("opacity", .4), y.selectAll(".wick").transition().duration(200).attr("opacity", .4), r.select(this).transition().duration(200).attr("opacity", 1).attr("filter", "brightness(1.1)"), y.selectAll(".wick").filter((e) => e.id === t.id).transition().duration(200).attr("opacity", 1).attr("stroke-width", 3);
+		}).on("mouseleave", function() {
+			x.selectAll(".body").transition().duration(200).attr("opacity", 1).attr("filter", "none"), y.selectAll(".wick").transition().duration(200).attr("opacity", 1).attr("stroke-width", 2);
+		});
+	}, [
+		a,
+		h,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d
+	]), /* @__PURE__ */ i("div", {
+		ref: p,
+		className: `w-full min-h-[350px] h-full relative ${f}`,
+		children: /* @__PURE__ */ i("svg", {
+			ref: m,
+			width: "100%",
+			height: "100%",
+			className: "block absolute inset-0 overflow-visible"
+		})
+	});
+};
+//#endregion
+export { a as default };

package/components/DonutChart/index.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface PieDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface AnimatedDonutChartProps {
+    /** The dataset */
+    data?: PieDataPoint[];
+    /** The thickness of the donut ring */
+    thickness?: number;
+    /** Default palette if individual colors aren't provided */
+    themeColors?: string[];
+    /** Text to show in the center by default (e.g., "Total Sales") */
+    centerLabel?: string;
+    className?: string;
+}
+export declare const AnimatedDonutChart: React.FC<AnimatedDonutChartProps>;
+export default AnimatedDonutChart;

package/components/DonutChart/index.js

@@ -0,0 +1,77 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import * as r from "d3";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/DonutChart/index.tsx
+var a = ({ data: a = [
+	{
+		label: "Mobile",
+		value: 45
+	},
+	{
+		label: "Desktop",
+		value: 35
+	},
+	{
+		label: "Tablet",
+		value: 20
+	}
+], thickness: o = 60, themeColors: s = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6"
+], centerLabel: c = "Total", className: l = "" }) => {
+	let u = t(null), d = t(null), [f, p] = n({
+		width: 0,
+		height: 300
+	});
+	return e(() => {
+		let e = u.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			e[0] && p({
+				width: e[0].contentRect.width,
+				height: e[0].contentRect.height || 300
+			});
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, []), e(() => {
+		if (!d.current || f.width === 0 || a.length === 0) return;
+		let { width: e, height: t } = f, n = Math.min(e, t) / 2 - 20, i = n - o, l = r.select(d.current);
+		l.selectAll("*").remove();
+		let u = l.append("g").attr("transform", `translate(${e / 2},${t / 2})`), p = r.scaleOrdinal().range(s), m = r.pie().value((e) => e.value).sort(null), h = r.arc().innerRadius(i).outerRadius(n).cornerRadius(4).padAngle(.02), g = r.arc().innerRadius(i).outerRadius(n + 10).cornerRadius(4).padAngle(.02), _ = u.selectAll(".arc").data(m(a)).enter().append("g").attr("class", "arc").append("path").attr("fill", (e, t) => e.data.color || p(t.toString())).attr("stroke", "#ffffff").attr("stroke-width", "2px").style("cursor", "pointer");
+		_.transition().duration(1e3).ease(r.easeCubicOut).attrTween("d", function(e) {
+			let t = r.interpolate({
+				startAngle: 0,
+				endAngle: 0
+			}, e);
+			return function(e) {
+				return h(t(e));
+			};
+		});
+		let v = r.sum(a, (e) => e.value), y = u.append("g").attr("text-anchor", "middle"), b = y.append("text").text(v).attr("y", 0).attr("font-size", "24px").attr("font-weight", "bold").attr("fill", "#0f172a").attr("font-family", "ui-sans-serif, system-ui"), x = y.append("text").text(c).attr("y", 20).attr("font-size", "12px").attr("fill", "#64748b").attr("font-family", "ui-sans-serif, system-ui").attr("text-transform", "uppercase").attr("letter-spacing", "1px");
+		_.on("mouseenter", function(e, t) {
+			r.select(this).transition().duration(200).attr("d", g), b.text(t.data.value), x.text(t.data.label);
+		}).on("mouseleave", function(e, t) {
+			r.select(this).transition().duration(200).attr("d", h), b.text(v), x.text(c);
+		});
+	}, [
+		a,
+		f,
+		o,
+		s,
+		c
+	]), /* @__PURE__ */ i("div", {
+		ref: u,
+		className: `w-full min-h-[300px] h-full relative ${l}`,
+		children: /* @__PURE__ */ i("svg", {
+			ref: d,
+			width: "100%",
+			height: "100%",
+			className: "block absolute inset-0 overflow-visible"
+		})
+	});
+};
+//#endregion
+export { a as default };

package/components/FunnelChart/index.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface FunnelDataPoint {
+    stage: string;
+    value: number;
+}
+export interface AnimatedFunnelChartProps {
+    /** The pipeline dataset. Should ideally be in descending order. */
+    data?: FunnelDataPoint[];
+    /** Default palette for the funnel stages */
+    themeColors?: string[];
+    /** Show the exact number inside the funnel */
+    showValues?: boolean;
+    /** Show the drop-off percentage compared to the PREVIOUS stage */
+    showConversionRate?: boolean;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedFunnelChart: React.FC<AnimatedFunnelChartProps>;
+export default AnimatedFunnelChart;

package/components/FunnelChart/index.js

@@ -0,0 +1,105 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import * as r from "d3";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/FunnelChart/index.tsx
+var a = ({ data: a = [
+	{
+		stage: "Website Visitors",
+		value: 12500
+	},
+	{
+		stage: "Signed Up",
+		value: 6e3
+	},
+	{
+		stage: "Onboarded",
+		value: 3500
+	},
+	{
+		stage: "Subscribed",
+		value: 1200
+	},
+	{
+		stage: "Retained (1yr)",
+		value: 850
+	}
+], themeColors: o = [
+	"#3b82f6",
+	"#0ea5e9",
+	"#06b6d4",
+	"#14b8a6",
+	"#10b981"
+], showValues: s = !0, showConversionRate: c = !0, marginTop: l = 20, marginBottom: u = 20, marginLeft: d = 130, marginRight: f = 80, className: p = "" }) => {
+	let m = t(null), h = t(null), [g, _] = n({
+		width: 0,
+		height: 350
+	});
+	return e(() => {
+		let e = m.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			e[0] && _({
+				width: e[0].contentRect.width,
+				height: e[0].contentRect.height || 350
+			});
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, []), e(() => {
+		if (!h.current || g.width === 0 || a.length === 0) return;
+		let { width: e, height: t } = g, n = r.select(h.current);
+		n.selectAll("*").remove();
+		let i = e - d - f, p = d + i / 2, m = r.max(a, (e) => e.value) || 100, _ = r.scaleBand().domain(a.map((e) => e.stage)).range([l, t - u]).padding(.15), v = r.scaleLinear().domain([0, m]).range([0, i]), y = r.scaleOrdinal().range(o), b = a.map((e, t) => {
+			let n = v(e.value), r = t < a.length - 1 ? v(a[t + 1].value) : n * .8;
+			return {
+				...e,
+				topWidth: n,
+				bottomWidth: r,
+				yTop: _(e.stage),
+				yBottom: _(e.stage) + _.bandwidth(),
+				index: t,
+				conversion: t === 0 ? null : (e.value / a[t - 1].value * 100).toFixed(1)
+			};
+		}), x = n.append("g").attr("class", "funnel-group").selectAll(".funnel-layer").data(b, (e) => e.stage).enter().append("polygon").attr("class", "funnel-layer").attr("points", (e) => `
+        ${p},${e.yTop} 
+        ${p},${e.yTop} 
+        ${p},${e.yBottom} 
+        ${p},${e.yBottom}
+      `).attr("fill", (e, t) => y(t.toString())).style("cursor", "pointer");
+		x.transition().duration(800).ease(r.easeCubicOut).delay((e, t) => t * 100).attr("points", (e) => `
+        ${p - e.topWidth / 2},${e.yTop} 
+        ${p + e.topWidth / 2},${e.yTop} 
+        ${p + e.bottomWidth / 2},${e.yBottom} 
+        ${p - e.bottomWidth / 2},${e.yBottom}
+      `), x.on("mouseenter", function() {
+			r.select(this).transition().duration(200).attr("opacity", .8);
+		}).on("mouseleave", function() {
+			r.select(this).transition().duration(200).attr("opacity", 1);
+		});
+		let S = n.append("g").attr("class", "labels-group");
+		if (S.selectAll(".stage-label").data(b).enter().append("text").attr("class", "stage-label").attr("x", d - 15).attr("y", (e) => e.yTop + _.bandwidth() / 2).attr("dy", "0.35em").attr("text-anchor", "end").attr("font-size", "12px").attr("font-weight", "600").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#475569").text((e) => e.stage).style("opacity", 0).transition().duration(500).delay((e, t) => 400 + t * 100).style("opacity", 1), s && S.selectAll(".value-label").data(b).enter().append("text").attr("class", "value-label").attr("x", p).attr("y", (e) => e.yTop + _.bandwidth() / 2).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "14px").attr("font-weight", "bold").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#ffffff").text((e) => e.value.toLocaleString()).style("opacity", 0).transition().duration(500).delay((e, t) => 600 + t * 100).style("opacity", 1), c) {
+			let e = S.selectAll(".conversion-group").data(b.filter((e) => e.index > 0)).enter().append("g").attr("class", "conversion-group").attr("transform", (e) => `translate(${p + e.topWidth / 2 + 15}, ${e.yTop + _.bandwidth() / 2})`).style("opacity", 0);
+			e.append("rect").attr("y", -12).attr("height", 24).attr("width", 54).attr("rx", 12).attr("fill", "#f1f5f9"), e.append("text").attr("x", 27).attr("y", 0).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", "11px").attr("font-weight", "bold").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#64748b").text((e) => `${e.conversion}%`), e.transition().duration(500).delay((e, t) => 800 + t * 100).style("opacity", 1);
+		}
+	}, [
+		a,
+		g,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d,
+		f
+	]), /* @__PURE__ */ i("div", {
+		ref: m,
+		className: `w-full min-h-[350px] h-full relative ${p}`,
+		children: /* @__PURE__ */ i("svg", {
+			ref: h,
+			width: "100%",
+			height: "100%",
+			className: "block absolute inset-0 overflow-visible"
+		})
+	});
+};
+//#endregion
+export { a as default };