@rudra-studio/rudra-charts 1.0.1

package/components/SpiderChart/index.js

@@ -0,0 +1,169 @@
+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/SpiderChart/index.tsx
+var a = ({ data: a = [
+	{
+		id: 1,
+		category: "Warrior",
+		axes: [
+			{
+				axis: "Strength",
+				value: 95
+			},
+			{
+				axis: "Agility",
+				value: 30
+			},
+			{
+				axis: "Intelligence",
+				value: 20
+			},
+			{
+				axis: "Charisma",
+				value: 50
+			},
+			{
+				axis: "Defense",
+				value: 85
+			},
+			{
+				axis: "Magic",
+				value: 10
+			}
+		]
+	},
+	{
+		id: 2,
+		category: "Mage",
+		axes: [
+			{
+				axis: "Strength",
+				value: 15
+			},
+			{
+				axis: "Agility",
+				value: 40
+			},
+			{
+				axis: "Intelligence",
+				value: 100
+			},
+			{
+				axis: "Charisma",
+				value: 60
+			},
+			{
+				axis: "Defense",
+				value: 30
+			},
+			{
+				axis: "Magic",
+				value: 95
+			}
+		]
+	},
+	{
+		id: 3,
+		category: "Rogue",
+		axes: [
+			{
+				axis: "Strength",
+				value: 50
+			},
+			{
+				axis: "Agility",
+				value: 90
+			},
+			{
+				axis: "Intelligence",
+				value: 60
+			},
+			{
+				axis: "Charisma",
+				value: 85
+			},
+			{
+				axis: "Defense",
+				value: 40
+			},
+			{
+				axis: "Magic",
+				value: 25
+			}
+		]
+	}
+], themeColors: o = [
+	"#ef4444",
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#8b5cf6"
+], gridLevels: s = 5, maxValue: c, marginTop: l = 40, marginBottom: u = 40, marginLeft: d = 40, marginRight: f = 40, className: p = "" }) => {
+	let m = t(null), h = t(null), [g, _] = n({
+		width: 0,
+		height: 400
+	});
+	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 || 400
+			});
+		});
+		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), i = e / 2, p = t / 2, m = Math.min((e - d - f) / 2, (t - l - u) / 2), _ = a[0].axes.map((e) => e.axis), v = _.length, y = Math.PI * 2 / v, b = r.max(a, (e) => r.max(e.axes, (e) => e.value)) || 100, x = c === void 0 ? b : c, S = r.scaleLinear().domain([0, x]).range([0, m]), C = r.scaleOrdinal().domain(a.map((e) => e.category)).range(o), w = n.select(".radar-group");
+		w.empty() && (w = n.append("g").attr("class", "radar-group")), w.attr("transform", `translate(${i},${p})`);
+		let T = w.select(".grid-group");
+		T.empty() && (T = w.append("g").attr("class", "grid-group"));
+		let E = r.range(1, s + 1).reverse(), D = T.selectAll(".grid-polygon").data(E);
+		D.exit().remove(), D.enter().append("polygon").attr("class", "grid-polygon").attr("fill", "#f8fafc").attr("stroke", "#cbd5e1").attr("stroke-width", 1).merge(D).transition().duration(500).attr("points", (e) => {
+			let t = S(e / s * x);
+			return _.map((e, n) => {
+				let r = y * n - Math.PI / 2;
+				return `${t * Math.cos(r)},${t * Math.sin(r)}`;
+			}).join(" ");
+		});
+		let O = T.selectAll(".grid-line").data(_);
+		O.exit().remove(), O.enter().append("line").attr("class", "grid-line").attr("stroke", "#cbd5e1").attr("stroke-width", 1).merge(O).transition().duration(500).attr("x1", 0).attr("y1", 0).attr("x2", (e, t) => S(x) * Math.cos(y * t - Math.PI / 2)).attr("y2", (e, t) => S(x) * Math.sin(y * t - Math.PI / 2));
+		let k = w.select(".labels-group");
+		k.empty() && (k = w.append("g").attr("class", "labels-group"));
+		let A = k.selectAll(".axis-label").data(_);
+		A.exit().remove(), A.enter().append("text").attr("class", "axis-label").attr("font-size", "12px").attr("font-weight", "600").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#475569").attr("text-anchor", "middle").attr("alignment-baseline", "middle").merge(A).transition().duration(500).attr("x", (e, t) => (S(x) + 20) * Math.cos(y * t - Math.PI / 2)).attr("y", (e, t) => (S(x) + 20) * Math.sin(y * t - Math.PI / 2)).text((e) => e);
+		let j = r.lineRadial().curve(r.curveLinearClosed).angle((e, t) => t * y).radius((e) => S(e.value)), M = r.lineRadial().curve(r.curveLinearClosed).angle((e, t) => t * y).radius(0), N = w.select(".blobs-group");
+		N.empty() && (N = w.append("g").attr("class", "blobs-group"));
+		let P = N.selectAll(".radar-blob").data(a, (e) => e.id);
+		P.exit().transition().duration(300).attr("d", (e) => M(e.axes)).attr("opacity", 0).remove();
+		let F = P.enter().append("path").attr("class", "radar-blob").attr("d", (e) => M(e.axes)).attr("fill", (e) => C(e.category)).attr("fill-opacity", .2).attr("stroke", (e) => C(e.category)).attr("stroke-width", 2.5).style("cursor", "pointer");
+		F.transition().duration(800).delay((e, t) => t * 150).ease(r.easeBackOut.overshoot(1.1)).attr("d", (e) => j(e.axes)), P.transition().duration(750).ease(r.easeCubicOut).attr("d", (e) => j(e.axes)).attr("fill", (e) => C(e.category)).attr("stroke", (e) => C(e.category)), F.merge(P).on("mouseenter", function() {
+			N.selectAll(".radar-blob").transition().duration(200).attr("fill-opacity", .05).attr("stroke-opacity", .2), r.select(this).raise().transition().duration(200).attr("fill-opacity", .6).attr("stroke-opacity", 1).attr("stroke-width", 4);
+		}).on("mouseleave", function() {
+			N.selectAll(".radar-blob").transition().duration(200).attr("fill-opacity", .2).attr("stroke-opacity", 1).attr("stroke-width", 2.5);
+		});
+	}, [
+		a,
+		g,
+		s,
+		c,
+		o,
+		l,
+		u,
+		d,
+		f
+	]), /* @__PURE__ */ i("div", {
+		ref: m,
+		className: `w-full min-h-[400px] 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 };

package/components/StackedArea/index.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface StackedAreaDataPoint {
+    x: string;
+    [key: string]: any;
+}
+export interface AnimatedStackedAreaChartProps {
+    /** The dataset */
+    data?: StackedAreaDataPoint[];
+    /** The keys inside the data objects that should be stacked on top of each other */
+    keys?: string[];
+    /** Line curve style */
+    curveType?: 'linear' | 'smooth' | 'step';
+    /** Default palette for the stacked layers */
+    themeColors?: string[];
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedStackedAreaChart: React.FC<AnimatedStackedAreaChartProps>;
+export default AnimatedStackedAreaChart;

package/components/StackedArea/index.js

@@ -0,0 +1,101 @@
+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/StackedArea/index.tsx
+var a = ({ data: a = [
+	{
+		x: "Jan",
+		Mobile: 30,
+		Desktop: 20,
+		Tablet: 10
+	},
+	{
+		x: "Feb",
+		Mobile: 40,
+		Desktop: 30,
+		Tablet: 15
+	},
+	{
+		x: "Mar",
+		Mobile: 35,
+		Desktop: 45,
+		Tablet: 25
+	},
+	{
+		x: "Apr",
+		Mobile: 50,
+		Desktop: 40,
+		Tablet: 30
+	},
+	{
+		x: "May",
+		Mobile: 65,
+		Desktop: 55,
+		Tablet: 40
+	}
+], keys: o = [
+	"Mobile",
+	"Desktop",
+	"Tablet"
+], curveType: s = "smooth", themeColors: c = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6"
+], marginTop: l = 20, marginBottom: u = 30, marginLeft: d = 50, marginRight: f = 20, className: p = "" }) => {
+	let m = t(null), h = t(null), [g, _] = n({
+		width: 0,
+		height: 300
+	});
+	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 || 300
+			});
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, []), e(() => {
+		if (!h.current || g.width === 0 || a.length === 0 || o.length === 0) return;
+		let { width: e, height: t } = g, n = r.select(h.current), i = r.stack().keys(o)(a), p = r.max(i, (e) => r.max(e, (e) => e[1])) || 100, m = a.map((e) => e.x), _ = r.scalePoint().domain(m).range([d, e - f]).padding(0), v = r.scaleLinear().domain([0, p]).nice().range([t - u, l]), y = r.scaleOrdinal().domain(o).range(c), b = r.area().x((e) => _(e.data.x)).y0((e) => v(e[0])).y1((e) => v(e[1]));
+		s === "smooth" ? b.curve(r.curveMonotoneX) : s === "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 - u})`).transition().duration(500).call(r.axisBottom(_)).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b"), n.select(".y-axis").attr("transform", `translate(${d},0)`).transition().duration(500).call(r.axisLeft(v).ticks(6)).attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#64748b").call((e) => e.select(".domain").remove()).call((t) => t.selectAll(".tick line").attr("x2", e - d - f).attr("stroke-opacity", .1));
+		let x = n.select("defs");
+		x.empty() && (x = n.append("defs"));
+		let S = x.select("#area-clip");
+		S.empty() && (S = x.append("clipPath").attr("id", "area-clip"), S.append("rect").attr("x", d).attr("y", 0).attr("width", 0).attr("height", t)), S.select("rect").transition().duration(1200).ease(r.easeCubicInOut).attr("width", e - d);
+		let C = n.select(".areas-group");
+		C.empty() && (C = n.append("g").attr("class", "areas-group").attr("clip-path", "url(#area-clip)"));
+		let w = C.selectAll(".area-layer").data(i, (e) => e.key);
+		w.exit().transition().duration(400).style("opacity", 0).remove();
+		let T = w.enter().append("path").attr("class", "area-layer").attr("fill", (e) => y(e.key)).attr("opacity", .8).attr("d", b);
+		T.on("mouseenter", function() {
+			C.selectAll(".area-layer").transition().duration(200).attr("opacity", .2), r.select(this).transition().duration(200).attr("opacity", 1);
+		}).on("mouseleave", function() {
+			C.selectAll(".area-layer").transition().duration(200).attr("opacity", .8);
+		}), T.merge(w).transition().duration(750).ease(r.easeCubicOut).attr("d", b).attr("fill", (e) => y(e.key));
+	}, [
+		a,
+		o,
+		g,
+		s,
+		c,
+		l,
+		u,
+		d,
+		f
+	]), /* @__PURE__ */ i("div", {
+		ref: m,
+		className: `w-full min-h-[300px] 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 };

package/components/StackedBarChart/index.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface StackedBarDataPoint {
+    id: string | number;
+    category: string;
+    [key: string]: any;
+}
+export interface AnimatedStackedBarChartProps {
+    /** The dataset containing the categories and their sub-components. */
+    data?: StackedBarDataPoint[];
+    /** The exact keys in the data objects that should be stacked on top of each other. */
+    stackKeys?: string[];
+    /** Default palette for the stacked layers */
+    themeColors?: string[];
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedStackedBarChart: React.FC<AnimatedStackedBarChartProps>;
+export default AnimatedStackedBarChart;

package/components/StackedBarChart/index.js

@@ -0,0 +1,96 @@
+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/StackedBarChart/index.tsx
+var a = ({ data: a = [
+	{
+		id: "1",
+		category: "Q1",
+		mobile: 120,
+		desktop: 80,
+		tablet: 40
+	},
+	{
+		id: "2",
+		category: "Q2",
+		mobile: 150,
+		desktop: 90,
+		tablet: 30
+	},
+	{
+		id: "3",
+		category: "Q3",
+		mobile: 180,
+		desktop: 110,
+		tablet: 50
+	},
+	{
+		id: "4",
+		category: "Q4",
+		mobile: 240,
+		desktop: 140,
+		tablet: 60
+	}
+], stackKeys: o = [
+	"mobile",
+	"desktop",
+	"tablet"
+], themeColors: s = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6"
+], 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 || o.length === 0) return;
+		let { width: e, height: t } = h, n = r.select(m.current), i = r.stack().keys(o)(a), f = a.map((e) => e.category), p = r.max(i, (e) => r.max(e, (e) => e[1])) || 100, g = r.scaleBand().domain(f).range([u, e - d]).padding(.3), _ = r.scaleLinear().domain([0, p * 1.1]).nice().range([t - l, c]), v = r.scaleOrdinal().domain(o).range(s);
+		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).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).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(".stacks-group");
+		y.empty() && (y = n.append("g").attr("class", "stacks-group"));
+		let b = y.selectAll(".layer").data(i, (e) => e.key);
+		b.exit().remove();
+		let x = b.enter().append("g").attr("class", "layer").attr("fill", (e) => v(e.key)).merge(b).transition().duration(500).attr("fill", (e) => v(e.key)).selection().selectAll("rect").data((e) => e, (e) => e.data.id);
+		x.exit().transition().duration(300).attr("y", (e) => _(e[0])).attr("height", 0).remove();
+		let S = x.enter().append("rect").attr("x", (e) => g(e.data.category) || 0).attr("width", g.bandwidth()).attr("y", (e) => _(e[0])).attr("height", 0).style("cursor", "pointer");
+		S.transition().duration(700).delay((e, t) => t * 50).ease(r.easeCubicOut).attr("y", (e) => _(e[1])).attr("height", (e) => _(e[0]) - _(e[1])), x.transition().duration(750).ease(r.easeCubicOut).attr("x", (e) => g(e.data.category) || 0).attr("width", g.bandwidth()).attr("y", (e) => _(e[1])).attr("height", (e) => _(e[0]) - _(e[1])), S.merge(x).on("mouseenter", function() {
+			y.selectAll("rect").transition().duration(200).attr("opacity", .4), r.select(this).transition().duration(200).attr("opacity", 1).attr("stroke", "#fff").attr("stroke-width", 2);
+		}).on("mouseleave", function() {
+			y.selectAll("rect").transition().duration(200).attr("opacity", 1).attr("stroke", "none");
+		});
+	}, [
+		a,
+		o,
+		h,
+		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/TreeMap/index.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface TreemapDataNode {
+    name: string;
+    value?: number;
+    children?: TreemapDataNode[];
+}
+export interface AnimatedTreemapProps {
+    /** The hierarchical dataset (must have a single root node) */
+    data?: TreemapDataNode;
+    /** Default palette mapped to the top-level categories */
+    themeColors?: string[];
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedTreemap: React.FC<AnimatedTreemapProps>;
+export default AnimatedTreemap;

package/components/TreeMap/index.js

@@ -0,0 +1,137 @@
+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/TreeMap/index.tsx
+var a = ({ data: a = {
+	name: "Root",
+	children: [
+		{
+			name: "Marketing",
+			children: [
+				{
+					name: "Social Media",
+					value: 250
+				},
+				{
+					name: "SEO",
+					value: 150
+				},
+				{
+					name: "Events",
+					value: 300
+				}
+			]
+		},
+		{
+			name: "Engineering",
+			children: [
+				{
+					name: "Frontend",
+					value: 400
+				},
+				{
+					name: "Backend",
+					value: 350
+				},
+				{
+					name: "DevOps",
+					value: 200
+				},
+				{
+					name: "QA",
+					value: 100
+				}
+			]
+		},
+		{
+			name: "Sales",
+			children: [{
+				name: "Enterprise",
+				value: 500
+			}, {
+				name: "SMB",
+				value: 250
+			}]
+		},
+		{
+			name: "HR",
+			children: [{
+				name: "Recruiting",
+				value: 120
+			}, {
+				name: "Benefits",
+				value: 80
+			}]
+		}
+	]
+}, themeColors: o = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6",
+	"#06b6d4"
+], marginTop: s = 10, marginBottom: c = 10, marginLeft: l = 10, marginRight: u = 10, className: d = "" }) => {
+	let f = t(null), p = t(null), [m, h] = n({
+		width: 0,
+		height: 400
+	});
+	return e(() => {
+		let e = f.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			e[0] && h({
+				width: e[0].contentRect.width,
+				height: e[0].contentRect.height || 400
+			});
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, []), e(() => {
+		if (!p.current || m.width === 0 || !a) return;
+		let { width: e, height: t } = m, n = r.select(p.current), i = e - l - u, d = t - s - c, f = r.hierarchy(a).sum((e) => e.value || 0).sort((e, t) => (t.value || 0) - (e.value || 0));
+		r.treemap().size([i, d]).paddingInner(2).paddingOuter(2).paddingTop(24).round(!0)(f);
+		let h = f.children ? f.children.map((e) => e.data.name) : [], g = r.scaleOrdinal().domain(h).range(o), _ = n.select(".chart-group");
+		_.empty() && (_ = n.append("g").attr("class", "chart-group")), _.attr("transform", `translate(${l},${s})`);
+		let v = f.descendants().filter((e) => e.depth === 1), y = _.select(".parents-group");
+		y.empty() && (y = _.append("g").attr("class", "parents-group"));
+		let b = y.selectAll(".parent-node").data(v, (e) => e.data.name);
+		b.exit().remove();
+		let x = b.enter().append("g").attr("class", "parent-node").attr("transform", (e) => `translate(${e.x0},${e.y0})`);
+		x.append("text").attr("class", "parent-label").attr("x", 4).attr("y", 16).attr("font-size", "13px").attr("font-weight", "700").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#475569").style("opacity", 0).text((e) => e.data.name), x.merge(b).transition().duration(750).ease(r.easeCubicOut).attr("transform", (e) => `translate(${e.x0},${e.y0})`).select(".parent-label").style("opacity", 1).text((e) => e.data.name);
+		let S = f.leaves(), C = _.select(".leaves-group");
+		C.empty() && (C = _.append("g").attr("class", "leaves-group"));
+		let w = C.selectAll(".leaf-node").data(S, (e) => e.data.name);
+		w.exit().transition().duration(300).style("opacity", 0).remove();
+		let T = w.enter().append("g").attr("class", "leaf-node").attr("transform", (e) => `translate(${e.x0},${e.y0})`);
+		T.append("rect").attr("class", "leaf-rect").attr("width", (e) => e.x1 - e.x0).attr("height", (e) => e.y1 - e.y0).attr("fill", (e) => {
+			let t = e;
+			for (; t.depth > 1 && t.parent;) t = t.parent;
+			return g(t.data.name);
+		}).attr("rx", 4).style("opacity", 0).style("cursor", "pointer"), T.append("text").attr("class", "leaf-label").attr("x", 6).attr("y", 18).attr("font-size", "11px").attr("font-weight", "500").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#ffffff").style("opacity", 0).text((e) => e.x1 - e.x0 > 50 && e.y1 - e.y0 > 24 ? e.data.name : ""), T.append("text").attr("class", "leaf-value").attr("x", 6).attr("y", 32).attr("font-size", "10px").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#f8fafc").style("opacity", 0).text((e) => e.x1 - e.x0 > 50 && e.y1 - e.y0 > 40 ? e.value : ""), T.select(".leaf-rect").transition().duration(600).delay((e, t) => t * 30).ease(r.easeCubicOut).style("opacity", .85), T.selectAll("text").transition().duration(600).delay((e, t) => t * 30 + 300).style("opacity", 1);
+		let E = T.merge(w);
+		E.transition().duration(750).ease(r.easeCubicOut).attr("transform", (e) => `translate(${e.x0},${e.y0})`), E.select(".leaf-rect").transition().duration(750).ease(r.easeCubicOut).attr("width", (e) => Math.max(0, e.x1 - e.x0)).attr("height", (e) => Math.max(0, e.y1 - e.y0)), E.select(".leaf-label").text((e) => e.x1 - e.x0 > 50 && e.y1 - e.y0 > 24 ? e.data.name : ""), E.select(".leaf-value").text((e) => e.x1 - e.x0 > 50 && e.y1 - e.y0 > 40 ? e.value : ""), E.on("mouseenter", function() {
+			C.selectAll(".leaf-rect").transition().duration(200).style("opacity", .4), r.select(this).select(".leaf-rect").transition().duration(200).style("opacity", 1).attr("filter", "brightness(1.1)");
+		}).on("mouseleave", function() {
+			C.selectAll(".leaf-rect").transition().duration(200).style("opacity", .85).attr("filter", "none");
+		});
+	}, [
+		a,
+		m,
+		o,
+		s,
+		c,
+		l,
+		u
+	]), /* @__PURE__ */ i("div", {
+		ref: f,
+		className: `w-full min-h-[400px] h-full relative ${d}`,
+		children: /* @__PURE__ */ i("svg", {
+			ref: p,
+			width: "100%",
+			height: "100%",
+			className: "block absolute inset-0 overflow-visible"
+		})
+	});
+};
+//#endregion
+export { a as default };

package/components/VerticalBarChart/index.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface ColumnDataPoint {
+    id: string | number;
+    category: string;
+    value: number;
+}
+export interface AnimatedVerticalBarChartProps {
+    /** The categorical dataset. */
+    data?: ColumnDataPoint[];
+    /** Default palette for the bars */
+    themeColors?: string[];
+    /** Show the exact number on top of each bar */
+    showValues?: boolean;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedVerticalBarChart: React.FC<AnimatedVerticalBarChartProps>;
+export default AnimatedVerticalBarChart;