@rudra-studio/rudra-charts 1.0.1

package/components/HundredPercentBarChart/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/HundredPercentBarChart/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).offset(r.stackOffsetExpand)(a), f = a.map((e) => e.category), p = r.scaleBand().domain(f).range([u, e - d]).padding(.3), g = r.scaleLinear().domain([0, 1]).range([t - l, c]), _ = 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(p).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(g).ticks(5).tickFormat(r.format(".0%")).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(".stacks-group");
+		v.empty() && (v = n.append("g").attr("class", "stacks-group"));
+		let y = v.selectAll(".layer").data(i, (e) => e.key);
+		y.exit().remove();
+		let b = y.enter().append("g").attr("class", "layer").attr("fill", (e) => _(e.key)).merge(y).transition().duration(500).attr("fill", (e) => _(e.key)).selection().selectAll("rect").data((e) => e, (e) => e.data.id);
+		b.exit().transition().duration(300).attr("y", g(0)).attr("height", 0).remove();
+		let x = b.enter().append("rect").attr("x", (e) => p(e.data.category) || 0).attr("width", p.bandwidth()).attr("y", g(0)).attr("height", 0).style("cursor", "pointer");
+		x.transition().duration(700).delay((e, t) => t * 50).ease(r.easeCubicOut).attr("y", (e) => g(e[1])).attr("height", (e) => g(e[0]) - g(e[1])), b.transition().duration(750).ease(r.easeCubicOut).attr("x", (e) => p(e.data.category) || 0).attr("width", p.bandwidth()).attr("y", (e) => g(e[1])).attr("height", (e) => g(e[0]) - g(e[1])), x.merge(b).on("mouseenter", function() {
+			v.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() {
+			v.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/MultiLineChart/index.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface MultiLineDataPoint {
+    date: string | Date;
+    value: number;
+    category: string;
+}
+export interface AnimatedMultiLineChartProps {
+    /** The dataset */
+    data?: MultiLineDataPoint[];
+    /** Default palette for the categories */
+    themeColors?: string[];
+    /** Stroke width of the lines */
+    strokeWidth?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedMultiLineChart: React.FC<AnimatedMultiLineChartProps>;
+export default AnimatedMultiLineChart;

package/components/MultiLineChart/index.js

@@ -0,0 +1,128 @@
+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/MultiLineChart/index.tsx
+var a = ({ data: a = [
+	{
+		date: "2023-01-01",
+		value: 40,
+		category: "Product A"
+	},
+	{
+		date: "2023-02-01",
+		value: 55,
+		category: "Product A"
+	},
+	{
+		date: "2023-03-01",
+		value: 45,
+		category: "Product A"
+	},
+	{
+		date: "2023-04-01",
+		value: 70,
+		category: "Product A"
+	},
+	{
+		date: "2023-01-01",
+		value: 60,
+		category: "Product B"
+	},
+	{
+		date: "2023-02-01",
+		value: 65,
+		category: "Product B"
+	},
+	{
+		date: "2023-03-01",
+		value: 85,
+		category: "Product B"
+	},
+	{
+		date: "2023-04-01",
+		value: 100,
+		category: "Product B"
+	},
+	{
+		date: "2023-01-01",
+		value: 20,
+		category: "Product C"
+	},
+	{
+		date: "2023-02-01",
+		value: 35,
+		category: "Product C"
+	},
+	{
+		date: "2023-03-01",
+		value: 25,
+		category: "Product C"
+	},
+	{
+		date: "2023-04-01",
+		value: 50,
+		category: "Product C"
+	}
+], themeColors: o = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6"
+], strokeWidth: s = 3, marginTop: c = 20, marginBottom: l = 40, marginLeft: u = 50, marginRight: d = 30, 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 = a.map((e) => ({
+			...e,
+			parsedDate: e.date instanceof Date ? e.date : new Date(e.date)
+		})), f = r.group(i, (e) => e.category), p = Array.from(f.keys()), g = r.scaleTime().domain(r.extent(i, (e) => e.parsedDate)).range([u, e - d]), _ = r.max(i, (e) => e.value) || 100, v = r.scaleLinear().domain([0, _ * 1.1]).nice().range([t - l, c]), y = r.scaleOrdinal().domain(p).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(Math.max(e / 80, 2)).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(v).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 b = r.line().x((e) => g(e.parsedDate)).y((e) => v(e.value)).curve(r.curveMonotoneX), x = n.select(".lines-group");
+		x.empty() && (x = n.append("g").attr("class", "lines-group"));
+		let S = x.selectAll(".line-path").data(f, (e) => e[0]);
+		S.exit().transition().duration(400).style("opacity", 0).remove();
+		let C = S.enter().append("path").attr("class", "line-path").attr("fill", "none").attr("stroke", (e) => y(e[0])).attr("stroke-width", s).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").style("cursor", "pointer");
+		C.attr("d", (e) => b(e[1])).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[1])).attr("stroke", (e) => y(e[0])).attr("stroke-dasharray", null).attr("stroke-dashoffset", null), C.merge(S).on("mouseenter", function() {
+			x.selectAll(".line-path").transition().duration(200).style("opacity", .2), r.select(this).raise().transition().duration(200).style("opacity", 1).attr("stroke-width", s + 2);
+		}).on("mouseleave", function() {
+			x.selectAll(".line-path").transition().duration(200).style("opacity", 1).attr("stroke-width", s);
+		});
+	}, [
+		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/PipelineChart/index.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export type WorkflowStatus = 'success' | 'failed' | 'running' | 'queued';
+export interface WorkflowNode {
+    id: string;
+    label: string;
+    status: WorkflowStatus;
+    column: number;
+    row: number;
+}
+export interface WorkflowLink {
+    source: string;
+    target: string;
+}
+export interface AnimatedWorkflowChartProps {
+    /** The nodes (jobs/steps) in the pipeline */
+    nodes?: WorkflowNode[];
+    /** The connections between the nodes */
+    links?: WorkflowLink[];
+    /** Fixed width of each node card */
+    nodeWidth?: number;
+    /** Fixed height of each node card */
+    nodeHeight?: number;
+    className?: string;
+}
+export declare const AnimatedWorkflowChart: React.FC<AnimatedWorkflowChartProps>;
+export default AnimatedWorkflowChart;

package/components/PipelineChart/index.js

@@ -0,0 +1,174 @@
+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/PipelineChart/index.tsx
+var a = ({ nodes: a = [
+	{
+		id: "build",
+		label: "Build Project",
+		status: "success",
+		column: 0,
+		row: 1
+	},
+	{
+		id: "test-unit",
+		label: "Unit Tests",
+		status: "success",
+		column: 1,
+		row: 0
+	},
+	{
+		id: "test-e2e",
+		label: "E2E Tests",
+		status: "failed",
+		column: 1,
+		row: 1
+	},
+	{
+		id: "lint",
+		label: "Linting",
+		status: "success",
+		column: 1,
+		row: 2
+	},
+	{
+		id: "deploy-staging",
+		label: "Deploy Staging",
+		status: "running",
+		column: 2,
+		row: 1
+	},
+	{
+		id: "deploy-prod",
+		label: "Deploy Prod",
+		status: "queued",
+		column: 3,
+		row: 1
+	}
+], links: o = [
+	{
+		source: "build",
+		target: "test-unit"
+	},
+	{
+		source: "build",
+		target: "test-e2e"
+	},
+	{
+		source: "build",
+		target: "lint"
+	},
+	{
+		source: "test-unit",
+		target: "deploy-staging"
+	},
+	{
+		source: "test-e2e",
+		target: "deploy-staging"
+	},
+	{
+		source: "lint",
+		target: "deploy-staging"
+	},
+	{
+		source: "deploy-staging",
+		target: "deploy-prod"
+	}
+], nodeWidth: s = 160, nodeHeight: c = 48, className: l = "" }) => {
+	let u = t(null), d = t(null), [f, p] = n({
+		width: 0,
+		height: 400
+	});
+	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 || 400
+			});
+		});
+		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 = r.select(d.current), i = r.max(a, (e) => e.column) || 1, l = r.max(a, (e) => e.row) || 1, u = r.scaleLinear().domain([0, i]).range([40, e - 40 - s]), p = r.scaleLinear().domain([0, l]).range([40, t - 40 - c]), m = {
+			success: {
+				border: "#10b981",
+				fill: "#ecfdf5",
+				text: "#065f46",
+				icon: "#10b981"
+			},
+			failed: {
+				border: "#ef4444",
+				fill: "#fef2f2",
+				text: "#991b1b",
+				icon: "#ef4444"
+			},
+			running: {
+				border: "#3b82f6",
+				fill: "#eff6ff",
+				text: "#1e40af",
+				icon: "#3b82f6"
+			},
+			queued: {
+				border: "#cbd5e1",
+				fill: "#f8fafc",
+				text: "#64748b",
+				icon: "#cbd5e1"
+			}
+		}, h = n.select(".workflow-group");
+		h.empty() && (h = n.append("g").attr("class", "workflow-group"));
+		let g = o.map((e) => {
+			let t = a.find((t) => t.id === e.source), n = a.find((t) => t.id === e.target);
+			return !t || !n ? null : {
+				id: `${e.source}-${e.target}`,
+				sourceStatus: t.status,
+				sourcePos: [u(t.column) + s, p(t.row) + c / 2],
+				targetPos: [u(n.column), p(n.row) + c / 2]
+			};
+		}).filter(Boolean), _ = r.linkHorizontal().source((e) => e.sourcePos).target((e) => e.targetPos), v = h.select(".links-group");
+		v.empty() && (v = h.append("g").attr("class", "links-group"));
+		let y = v.selectAll(".pipeline-link").data(g, (e) => e.id);
+		y.exit().transition().duration(300).style("opacity", 0).remove(), y.enter().append("path").attr("class", "pipeline-link").attr("fill", "none").attr("stroke", (e) => e.sourceStatus === "failed" ? "#fee2e2" : "#e2e8f0").attr("stroke-width", 2).attr("d", _).each(function() {
+			let e = this.getTotalLength();
+			r.select(this).attr("stroke-dasharray", `${e} ${e}`).attr("stroke-dashoffset", e).transition().duration(1e3).ease(r.easeCubicOut).attr("stroke-dashoffset", 0);
+		}), y.transition().duration(750).attr("d", _).attr("stroke-dasharray", null).attr("stroke-dashoffset", null);
+		let b = h.select(".nodes-group");
+		b.empty() && (b = h.append("g").attr("class", "nodes-group"));
+		let x = b.selectAll(".pipeline-node").data(a, (e) => e.id);
+		x.exit().transition().duration(300).style("opacity", 0).remove();
+		let S = x.enter().append("g").attr("class", "pipeline-node").attr("transform", (e) => `translate(${u(e.column)},${p(e.row)})`).style("opacity", 0).style("cursor", "pointer");
+		S.append("rect").attr("class", "node-bg").attr("width", s).attr("height", c).attr("rx", 8).attr("fill", (e) => m[e.status].fill).attr("stroke", (e) => m[e.status].border).attr("stroke-width", 1.5), S.append("circle").attr("class", "node-status-dot").attr("cx", 20).attr("cy", c / 2).attr("r", 5).attr("fill", (e) => m[e.status].icon), S.append("text").attr("class", "node-label").attr("x", 36).attr("y", c / 2).attr("alignment-baseline", "middle").attr("font-size", "13px").attr("font-weight", "600").attr("font-family", "ui-sans-serif, system-ui").attr("fill", (e) => m[e.status].text).text((e) => e.label), S.transition().duration(600).delay((e) => e.column * 150).ease(r.easeBackOut.overshoot(1.2)).style("opacity", 1);
+		let C = S.merge(x);
+		C.transition().duration(750).ease(r.easeCubicOut).attr("transform", (e) => `translate(${u(e.column)},${p(e.row)})`), C.select(".node-bg").transition().duration(500).attr("fill", (e) => m[e.status].fill).attr("stroke", (e) => m[e.status].border), C.select(".node-status-dot").transition().duration(500).attr("fill", (e) => m[e.status].icon), C.select(".node-label").transition().duration(500).attr("fill", (e) => m[e.status].text).text((e) => e.label), C.each(function(e) {
+			let t = r.select(this).select(".node-bg");
+			if (e.status === "running") {
+				let e = () => {
+					t.transition().duration(800).attr("filter", "drop-shadow(0 0 6px rgba(59, 130, 246, 0.5))").attr("stroke-width", 2.5).transition().duration(800).attr("filter", "none").attr("stroke-width", 1.5).on("end", e);
+				};
+				e();
+			} else t.interrupt().attr("filter", "none").attr("stroke-width", 1.5);
+		}), C.on("mouseenter", function(e, t) {
+			b.selectAll(".pipeline-node").transition().duration(200).style("opacity", .4), r.select(this).transition().duration(200).style("opacity", 1).attr("transform", `translate(${u(t.column)},${p(t.row) - 2})`), v.selectAll(".pipeline-link").transition().duration(200).attr("stroke", (e) => e.id.startsWith(t.id) || e.id.endsWith(t.id) ? "#94a3b8" : "#f1f5f9").attr("stroke-width", (e) => e.id.startsWith(t.id) || e.id.endsWith(t.id) ? 3 : 1);
+		}).on("mouseleave", function(e, t) {
+			b.selectAll(".pipeline-node").transition().duration(200).style("opacity", 1).attr("transform", (e) => `translate(${u(e.column)},${p(e.row)})`), v.selectAll(".pipeline-link").transition().duration(200).attr("stroke", (e) => e.sourceStatus === "failed" ? "#fee2e2" : "#e2e8f0").attr("stroke-width", 2);
+		});
+	}, [
+		a,
+		o,
+		f,
+		s,
+		c
+	]), /* @__PURE__ */ i("div", {
+		ref: u,
+		className: `w-full min-h-[400px] h-full relative overflow-hidden bg-white rounded-lg border border-slate-200 ${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/ScatterPlot/index.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ScatterDataPoint {
+    id: string | number;
+    x: number;
+    y: number;
+    category?: string;
+    label?: string;
+}
+export interface AnimatedScatterPlotProps {
+    /** The dataset */
+    data?: ScatterDataPoint[];
+    /** Default palette for the categories */
+    themeColors?: string[];
+    /** Base radius of the dots */
+    dotRadius?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedScatterPlot: React.FC<AnimatedScatterPlotProps>;
+export default AnimatedScatterPlot;

package/components/ScatterPlot/index.js

@@ -0,0 +1,118 @@
+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/ScatterPlot/index.tsx
+var a = ({ data: a = [
+	{
+		id: 1,
+		x: 120,
+		y: 80,
+		category: "Group A",
+		label: "Campaign 1"
+	},
+	{
+		id: 2,
+		x: 250,
+		y: 110,
+		category: "Group A",
+		label: "Campaign 2"
+	},
+	{
+		id: 3,
+		x: 340,
+		y: 150,
+		category: "Group B",
+		label: "Campaign 3"
+	},
+	{
+		id: 4,
+		x: 480,
+		y: 210,
+		category: "Group B",
+		label: "Campaign 4"
+	},
+	{
+		id: 5,
+		x: 590,
+		y: 180,
+		category: "Group C",
+		label: "Campaign 5"
+	},
+	{
+		id: 6,
+		x: 720,
+		y: 250,
+		category: "Group C",
+		label: "Campaign 6"
+	},
+	{
+		id: 7,
+		x: 810,
+		y: 310,
+		category: "Group A",
+		label: "Campaign 7"
+	},
+	{
+		id: 8,
+		x: 950,
+		y: 290,
+		category: "Group B",
+		label: "Campaign 8"
+	}
+], themeColors: o = [
+	"#3b82f6",
+	"#10b981",
+	"#f59e0b",
+	"#ef4444",
+	"#8b5cf6"
+], dotRadius: s = 6, marginTop: c = 20, marginBottom: l = 40, marginLeft: u = 50, marginRight: d = 30, 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.max(a, (e) => e.x) || 100, f = r.max(a, (e) => e.y) || 100, p = r.scaleLinear().domain([0, i * 1.1]).nice().range([u, e - d]), g = r.scaleLinear().domain([0, f * 1.1]).nice().range([t - l, c]), _ = Array.from(new Set(a.map((e) => e.category || "default"))), v = r.scaleOrdinal().domain(_).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(p).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(g).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 y = n.select(".dots-group");
+		y.empty() && (y = n.append("g").attr("class", "dots-group"));
+		let b = y.selectAll(".scatter-dot").data(a, (e) => e.id);
+		b.exit().transition().duration(300).attr("r", 0).remove();
+		let x = b.enter().append("circle").attr("class", "scatter-dot").attr("cx", (e) => p(e.x)).attr("cy", (e) => g(e.y)).attr("r", 0).attr("fill", (e) => v(e.category || "default")).attr("opacity", .8).attr("stroke", "#ffffff").attr("stroke-width", 1.5).style("cursor", "pointer");
+		x.transition().duration(600).delay((e, t) => t * 40).ease(r.easeBackOut.overshoot(1.5)).attr("r", s), b.transition().duration(750).ease(r.easeCubicOut).attr("cx", (e) => p(e.x)).attr("cy", (e) => g(e.y)).attr("fill", (e) => v(e.category || "default")).attr("r", s), x.merge(b).on("mouseenter", function() {
+			y.selectAll(".scatter-dot").transition().duration(200).attr("opacity", .3), r.select(this).raise().transition().duration(200).attr("opacity", 1).attr("r", s * 1.5).attr("stroke-width", 3);
+		}).on("mouseleave", function() {
+			y.selectAll(".scatter-dot").transition().duration(200).attr("opacity", .8).attr("r", s).attr("stroke-width", 1.5);
+		});
+	}, [
+		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/SpiderChart/index.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface RadarAxis {
+    axis: string;
+    value: number;
+}
+export interface RadarDataPoint {
+    id: string | number;
+    category: string;
+    axes: RadarAxis[];
+}
+export interface AnimatedRadarChartProps {
+    /** The dataset containing the entities and their multi-variable stats. */
+    data?: RadarDataPoint[];
+    /** Default palette for the overlapping entities */
+    themeColors?: string[];
+    /** The number of concentric grid levels to draw in the background */
+    gridLevels?: number;
+    /** The absolute maximum value for the scale (if omitted, calculates from data) */
+    maxValue?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    className?: string;
+}
+export declare const AnimatedRadarChart: React.FC<AnimatedRadarChartProps>;
+export default AnimatedRadarChart;