@rudra-studio/rudra-charts 1.0.1

package/components/GaugeChart/index.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface GaugeZone {
+    start: number;
+    end: number;
+    color: string;
+}
+export interface AnimatedGaugeChartProps {
+    /** The current value to display */
+    value?: number;
+    /** The minimum value of the gauge */
+    min?: number;
+    /** The maximum value of the gauge */
+    max?: number;
+    /** Color-coded segments for the gauge track */
+    zones?: GaugeZone[];
+    /** Unit text displayed below the value (e.g., "mph", "kW", "Users") */
+    unit?: string;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedGaugeChart: React.FC<AnimatedGaugeChartProps>;
+export default AnimatedGaugeChart;

package/components/GaugeChart/index.js

@@ -0,0 +1,85 @@
+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/GaugeChart/index.tsx
+var a = ({ value: a = 78, min: o = 0, max: s = 100, zones: c = [
+	{
+		start: 0,
+		end: 50,
+		color: "#10b981"
+	},
+	{
+		start: 50,
+		end: 80,
+		color: "#f59e0b"
+	},
+	{
+		start: 80,
+		end: 100,
+		color: "#ef4444"
+	}
+], unit: l = "Score", marginTop: u = 30, marginBottom: d = 30, marginLeft: f = 30, marginRight: p = 30, className: m = "" }) => {
+	let h = t(null), g = t(null), [_, v] = n({
+		width: 0,
+		height: 250
+	});
+	return e(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			if (e[0]) {
+				let t = e[0].contentRect.width;
+				v({
+					width: t,
+					height: Math.max(250, t / 2 + u + d)
+				});
+			}
+		});
+		return t.observe(e), () => t.unobserve(e);
+	}, [u, d]), e(() => {
+		if (!g.current || _.width === 0) return;
+		let { width: e, height: t } = _, n = r.select(g.current), i = e / 2, m = t - d, h = Math.min((e - f - p) / 2, m - u), v = Math.max(o, Math.min(a, s)), y = r.scaleLinear().domain([o, s]).range([-Math.PI / 2, Math.PI / 2]), b = r.arc().innerRadius(h * .75).outerRadius(h).startAngle((e) => y(e.start)).endAngle((e) => y(e.end)).cornerRadius(2).padAngle(.02), x = n.select(".track-group");
+		x.empty() && (x = n.append("g").attr("class", "track-group")), x.attr("transform", `translate(${i}, ${m})`);
+		let S = x.selectAll(".zone").data(c, (e) => `${e.start}-${e.end}`);
+		S.exit().remove(), S.enter().append("path").attr("class", "zone").attr("fill", (e) => e.color).attr("opacity", 0).attr("d", b).transition().duration(500).delay((e, t) => t * 100).attr("opacity", .9), S.transition().duration(500).attr("d", b).attr("fill", (e) => e.color);
+		let C = n.select(".labels-group");
+		C.empty() && (C = n.append("g").attr("class", "labels-group")), C.attr("transform", `translate(${i}, ${m})`);
+		let w = C.select(".min-label");
+		w.empty() && (w = C.append("text").attr("class", "min-label")), w.attr("x", -h + 10).attr("y", 20).attr("text-anchor", "middle").attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#64748b").text(o);
+		let T = C.select(".max-label");
+		T.empty() && (T = C.append("text").attr("class", "max-label")), T.attr("x", h - 10).attr("y", 20).attr("text-anchor", "middle").attr("font-size", "12px").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#64748b").text(s);
+		let E = n.select(".needle-group");
+		E.empty() && (E = n.append("g").attr("class", "needle-group"), E.append("circle").attr("class", "needle-base").attr("cx", 0).attr("cy", 0).attr("r", 8).attr("fill", "#1e293b"), E.append("path").attr("class", "needle-pointer").attr("fill", "#1e293b").attr("stroke", "#ffffff").attr("stroke-width", 1.5)), E.attr("transform", `translate(${i}, ${m})`), E.select(".needle-pointer").attr("d", `M -4 0 L 0 ${-h * .85} L 4 0 Z`);
+		let D = y(v) * 180 / Math.PI;
+		E.select(".needle-pointer").transition().duration(1200).ease(r.easeElasticOut.amplitude(1.2).period(.6)).attrTween("transform", function() {
+			let e = r.select(this).attr("transform"), t = e ? parseFloat(e.replace(/rotate\(([^)]+)\)/, "$1")) : y(o) * 180 / Math.PI, n = r.interpolateNumber(t, D);
+			return function(e) {
+				return `rotate(${n(e)})`;
+			};
+		});
+		let O = n.select(".readout-group");
+		O.empty() && (O = n.append("g").attr("class", "readout-group"), O.append("text").attr("class", "readout-value").attr("text-anchor", "middle").attr("font-weight", "700").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#0f172a"), O.append("text").attr("class", "readout-unit").attr("text-anchor", "middle").attr("font-weight", "500").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#64748b")), O.attr("transform", `translate(${i}, ${m - h * .2})`), O.select(".readout-value").attr("font-size", `${Math.max(24, h * .25)}px`).text(v.toLocaleString()), O.select(".readout-unit").attr("y", Math.max(16, h * .15)).attr("font-size", `${Math.max(12, h * .08)}px`).text(l);
+	}, [
+		a,
+		o,
+		s,
+		c,
+		l,
+		_,
+		u,
+		d,
+		f,
+		p
+	]), /* @__PURE__ */ i("div", {
+		ref: h,
+		className: `w-full relative ${m}`,
+		children: /* @__PURE__ */ i("svg", {
+			ref: g,
+			width: "100%",
+			height: _.height,
+			className: "block overflow-visible"
+		})
+	});
+};
+//#endregion
+export { a as default };

package/components/HeatMap/index.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface HeatmapDataPoint {
+    id: string | number;
+    xCategory: string;
+    yCategory: string;
+    value: number;
+}
+export interface AnimatedHeatmapProps {
+    /** The matrix dataset. */
+    data?: HeatmapDataPoint[];
+    /** * A two-color array representing the lowest and highest value colors.
+     * D3 will automatically interpolate all the shades in between.
+     */
+    colorRange?: [string, string];
+    /** Space between the matrix cells */
+    cellPadding?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedHeatmap: React.FC<AnimatedHeatmapProps>;
+export default AnimatedHeatmap;

package/components/HeatMap/index.js

@@ -0,0 +1,146 @@
+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/HeatMap/index.tsx
+var a = ({ data: a = [
+	{
+		id: 1,
+		xCategory: "Mon",
+		yCategory: "Morning",
+		value: 12
+	},
+	{
+		id: 2,
+		xCategory: "Mon",
+		yCategory: "Afternoon",
+		value: 45
+	},
+	{
+		id: 3,
+		xCategory: "Mon",
+		yCategory: "Evening",
+		value: 78
+	},
+	{
+		id: 4,
+		xCategory: "Tue",
+		yCategory: "Morning",
+		value: 15
+	},
+	{
+		id: 5,
+		xCategory: "Tue",
+		yCategory: "Afternoon",
+		value: 50
+	},
+	{
+		id: 6,
+		xCategory: "Tue",
+		yCategory: "Evening",
+		value: 92
+	},
+	{
+		id: 7,
+		xCategory: "Wed",
+		yCategory: "Morning",
+		value: 18
+	},
+	{
+		id: 8,
+		xCategory: "Wed",
+		yCategory: "Afternoon",
+		value: 65
+	},
+	{
+		id: 9,
+		xCategory: "Wed",
+		yCategory: "Evening",
+		value: 85
+	},
+	{
+		id: 10,
+		xCategory: "Thu",
+		yCategory: "Morning",
+		value: 20
+	},
+	{
+		id: 11,
+		xCategory: "Thu",
+		yCategory: "Afternoon",
+		value: 70
+	},
+	{
+		id: 12,
+		xCategory: "Thu",
+		yCategory: "Evening",
+		value: 110
+	},
+	{
+		id: 13,
+		xCategory: "Fri",
+		yCategory: "Morning",
+		value: 25
+	},
+	{
+		id: 14,
+		xCategory: "Fri",
+		yCategory: "Afternoon",
+		value: 85
+	},
+	{
+		id: 15,
+		xCategory: "Fri",
+		yCategory: "Evening",
+		value: 140
+	}
+], colorRange: o = ["#f1f5f9", "#3b82f6"], cellPadding: s = .08, marginTop: c = 20, marginBottom: l = 30, marginLeft: u = 70, 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 = Array.from(new Set(a.map((e) => e.xCategory))), f = Array.from(new Set(a.map((e) => e.yCategory))), p = r.min(a, (e) => e.value) || 0, g = r.max(a, (e) => e.value) || 100, _ = r.scaleBand().domain(i).range([u, e - d]).padding(s), v = r.scaleBand().domain(f).range([c, t - l]).padding(s), y = r.scaleLinear().domain([p, g]).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(_).tickSizeOuter(0)).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").remove()), n.select(".y-axis").attr("transform", `translate(${u},0)`).transition().duration(500).call(r.axisLeft(v).tickSizeOuter(0)).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").remove());
+		let b = n.select(".cells-group");
+		b.empty() && (b = n.append("g").attr("class", "cells-group"));
+		let x = b.selectAll(".cell").data(a, (e) => e.id);
+		x.exit().transition().duration(300).attr("opacity", 0).remove();
+		let S = x.enter().append("rect").attr("class", "cell").attr("x", (e) => _(e.xCategory) || 0).attr("y", (e) => v(e.yCategory) || 0).attr("width", _.bandwidth()).attr("height", v.bandwidth()).attr("fill", (e) => y(e.value)).attr("rx", 6).attr("ry", 6).attr("opacity", 0).style("cursor", "pointer");
+		S.transition().duration(600).delay((e) => (i.indexOf(e.xCategory) + f.indexOf(e.yCategory)) * 40).ease(r.easeCubicOut).attr("opacity", 1), x.transition().duration(750).ease(r.easeCubicOut).attr("x", (e) => _(e.xCategory) || 0).attr("y", (e) => v(e.yCategory) || 0).attr("width", _.bandwidth()).attr("height", v.bandwidth()).attr("fill", (e) => y(e.value)), S.merge(x).on("mouseenter", function() {
+			b.selectAll(".cell").transition().duration(200).attr("opacity", .5), r.select(this).raise().transition().duration(200).attr("opacity", 1).attr("stroke", "#0f172a").attr("stroke-width", 2);
+		}).on("mouseleave", function() {
+			b.selectAll(".cell").transition().duration(200).attr("opacity", 1).attr("stroke", "none");
+		});
+	}, [
+		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/Histogram/index.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface HistogramDataPoint {
+    id: string | number;
+    value: number;
+}
+export interface AnimatedHistogramProps {
+    /** The raw, continuous dataset to be binned. */
+    data?: HistogramDataPoint[];
+    /** Default palette (uses the first color for the bins) */
+    themeColors?: string[];
+    /** The approximate number of bins (columns) to divide the data into */
+    targetBins?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedHistogram: React.FC<AnimatedHistogramProps>;
+export default AnimatedHistogram;

package/components/Histogram/index.js

@@ -0,0 +1,158 @@
+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/Histogram/index.tsx
+var a = ({ data: a = [
+	{
+		id: 1,
+		value: 18
+	},
+	{
+		id: 2,
+		value: 19
+	},
+	{
+		id: 3,
+		value: 21
+	},
+	{
+		id: 4,
+		value: 22
+	},
+	{
+		id: 5,
+		value: 22
+	},
+	{
+		id: 6,
+		value: 23
+	},
+	{
+		id: 7,
+		value: 24
+	},
+	{
+		id: 8,
+		value: 24
+	},
+	{
+		id: 9,
+		value: 24
+	},
+	{
+		id: 10,
+		value: 25
+	},
+	{
+		id: 11,
+		value: 25
+	},
+	{
+		id: 12,
+		value: 26
+	},
+	{
+		id: 13,
+		value: 26
+	},
+	{
+		id: 14,
+		value: 27
+	},
+	{
+		id: 15,
+		value: 28
+	},
+	{
+		id: 16,
+		value: 28
+	},
+	{
+		id: 17,
+		value: 29
+	},
+	{
+		id: 18,
+		value: 31
+	},
+	{
+		id: 19,
+		value: 32
+	},
+	{
+		id: 20,
+		value: 35
+	},
+	{
+		id: 21,
+		value: 38
+	},
+	{
+		id: 22,
+		value: 42
+	},
+	{
+		id: 23,
+		value: 45
+	},
+	{
+		id: 24,
+		value: 55
+	}
+], themeColors: o = [
+	"#8b5cf6",
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444"
+], targetBins: s = 10, marginTop: c = 20, marginBottom: l = 40, marginLeft: u = 40, 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.extent(a, (e) => e.value), f = r.scaleLinear().domain(i).nice().range([u, e - d]), p = r.bin().value((e) => e.value).domain(f.domain()).thresholds(f.ticks(s))(a), g = r.max(p, (e) => e.length) || 10, _ = r.scaleLinear().domain([0, g]).nice().range([t - l, c]);
+		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(f).ticks(s)).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(Math.min(g, 5)).tickFormat(r.format("d")).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 v = n.select(".bins-group");
+		v.empty() && (v = n.append("g").attr("class", "bins-group"));
+		let y = v.selectAll(".bin").data(p, (e) => e.x0 || 0);
+		y.exit().transition().duration(300).attr("y", _(0)).attr("height", 0).remove();
+		let b = y.enter().append("rect").attr("class", "bin").attr("x", (e) => f(e.x0 || 0) + 1).attr("width", (e) => Math.max(0, f(e.x1 || 0) - f(e.x0 || 0) - 1)).attr("y", _(0)).attr("height", 0).attr("fill", o[0]).attr("rx", 2).style("cursor", "pointer");
+		b.transition().duration(700).delay((e, t) => t * 30).ease(r.easeCubicOut).attr("y", (e) => _(e.length)).attr("height", (e) => _(0) - _(e.length)), y.transition().duration(750).ease(r.easeCubicOut).attr("x", (e) => f(e.x0 || 0) + 1).attr("width", (e) => Math.max(0, f(e.x1 || 0) - f(e.x0 || 0) - 1)).attr("y", (e) => _(e.length)).attr("height", (e) => _(0) - _(e.length)).attr("fill", o[0]), b.merge(y).on("mouseenter", function() {
+			v.selectAll(".bin").transition().duration(200).attr("opacity", .4), r.select(this).transition().duration(200).attr("opacity", 1).attr("filter", "brightness(1.1)");
+		}).on("mouseleave", function() {
+			v.selectAll(".bin").transition().duration(200).attr("opacity", 1).attr("filter", "none");
+		});
+	}, [
+		a,
+		h,
+		s,
+		o,
+		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/HorizontalBarChart/index.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface HorizontalChartData {
+    label: string;
+    value: number;
+}
+export interface AnimatedHorizontalBarChartProps {
+    /** The dataset */
+    data?: HorizontalChartData[];
+    /** Visual customization */
+    barColor?: string;
+    hoverColor?: string;
+    /** Format the number label (e.g., '$' or '%') */
+    valuePrefix?: string;
+    valueSuffix?: string;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedHorizontalBarChart: React.FC<AnimatedHorizontalBarChartProps>;
+export default AnimatedHorizontalBarChart;

package/components/HorizontalBarChart/index.js

@@ -0,0 +1,82 @@
+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/HorizontalBarChart/index.tsx
+var a = ({ data: a = [
+	{
+		label: "United States",
+		value: 850
+	},
+	{
+		label: "United Kingdom",
+		value: 620
+	},
+	{
+		label: "Germany",
+		value: 480
+	},
+	{
+		label: "Australia",
+		value: 310
+	},
+	{
+		label: "Japan",
+		value: 250
+	}
+], barColor: o = "#3b82f6", hoverColor: s = "#2563eb", valuePrefix: c = "", valueSuffix: l = "", marginTop: u = 20, marginBottom: d = 30, marginLeft: f = 120, marginRight: p = 60, className: m = "" }) => {
+	let h = t(null), g = t(null), [_, v] = n({
+		width: 0,
+		height: 350
+	});
+	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 || 350
+			});
+		});
+		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 = [...a].sort((e, t) => t.value - e.value), m = r.scaleLinear().domain([0, r.max(i, (e) => e.value) || 100]).nice().range([f, e - p]), h = r.scaleBand().domain(i.map((e) => e.label)).range([u, t - d]).padding(.25);
+		n.select(".y-axis").empty() && (n.append("g").attr("class", "axis y-axis"), n.append("g").attr("class", "axis x-axis")), n.select(".y-axis").attr("transform", `translate(${f},0)`).transition().duration(500).call(r.axisLeft(h).tickSizeOuter(0)).attr("font-size", "13px").attr("font-weight", "500").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#334155").call((e) => e.select(".domain").remove()).call((e) => e.selectAll(".tick line").remove()), n.select(".x-axis").attr("transform", `translate(0,${t - d})`).transition().duration(500).call(r.axisBottom(m).ticks(5)).attr("font-size", "11px").attr("font-family", "ui-sans-serif, system-ui").attr("color", "#94a3b8").call((e) => e.select(".domain").remove()).call((e) => e.selectAll(".tick line").attr("y2", -(t - u - d)).attr("stroke-opacity", .1));
+		let v = n.select(".bars-group");
+		v.empty() && (v = n.append("g").attr("class", "bars-group"));
+		let y = v.selectAll(".bar").data(i, (e) => e.label);
+		y.exit().transition().duration(400).attr("width", 0).style("opacity", 0).remove();
+		let b = y.enter().append("rect").attr("class", "bar").attr("x", m(0)).attr("y", (e) => h(e.label)).attr("height", h.bandwidth()).attr("width", 0).attr("fill", o).attr("rx", 4).attr("ry", 4);
+		b.on("mouseenter", function() {
+			r.select(this).transition().duration(200).attr("fill", s);
+		}).on("mouseleave", function() {
+			r.select(this).transition().duration(200).attr("fill", o);
+		}), b.merge(y).transition().duration(800).ease(r.easeCubicOut).attr("y", (e) => h(e.label)).attr("height", h.bandwidth()).attr("width", (e) => m(e.value) - m(0)).attr("fill", o);
+		let x = n.select(".labels-group");
+		x.empty() && (x = n.append("g").attr("class", "labels-group"));
+		let S = x.selectAll(".value-label").data(i, (e) => e.label);
+		S.exit().remove(), S.enter().append("text").attr("class", "value-label").attr("x", m(0) + 10).attr("y", (e) => h(e.label) + h.bandwidth() / 2).attr("dy", "0.35em").attr("font-size", "12px").attr("font-weight", "600").attr("font-family", "ui-sans-serif, system-ui").attr("fill", "#64748b").style("opacity", 0).text((e) => `${c}${e.value}${l}`).merge(S).transition().duration(800).ease(r.easeCubicOut).attr("y", (e) => h(e.label) + h.bandwidth() / 2).attr("x", (e) => m(e.value) + 10).style("opacity", 1).text((e) => `${c}${e.value.toLocaleString()}${l}`);
+	}, [
+		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/HundredPercentBarChart/index.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface HundredPercentDataPoint {
+    id: string | number;
+    category: string;
+    [key: string]: any;
+}
+export interface AnimatedHundredPercentBarChartProps {
+    /** The dataset containing the categories and their sub-components. */
+    data?: HundredPercentDataPoint[];
+    /** 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 AnimatedHundredPercentBarChart: React.FC<AnimatedHundredPercentBarChartProps>;
+export default AnimatedHundredPercentBarChart;