From 41696a49fc13c117b603362b0db09c79ea18d14c Mon Sep 17 00:00:00 2001
From: Mark <14284867+xHeaven@users.noreply.github.com>
Date: Thu, 4 Apr 2024 13:03:42 +0200
Subject: [PATCH] refactor(graph): update createSVGElement signature

---
 src/types.ts       | 51 +++++++++++++++++++++++++++++++++++++++++++---
 src/utils/graph.ts | 17 +++++++++-------
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/types.ts b/src/types.ts
index d529fdf..e8bf5cd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,11 +9,11 @@ export type SetAttrs = (
 	attributes: Record<string, string>,
 ) => void;
 export type RemoveAttrs = (element: Element, ...attributes: string[]) => void;
-export type CreateSVGElement = (
+export type CreateSVGElement = <T extends SVGElement>(
 	element: string,
-	container?: Element,
+	container?: SVGElement | null,
 	attributes?: Record<string, string>,
-) => Element;
+) => T;
 export type GenerateLegendBackground = (
 	color: string | string[],
 	direction?: "horizontal" | "vertical",
@@ -24,3 +24,48 @@ export type AreEqual = <T>(
 	value: NestedArray<T>,
 	newValue: NestedArray<T>,
 ) => boolean;
+
+export type CreateCurves = (
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+) => string;
+export type CreateVerticalCurves = (
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+) => string;
+export type CreatePath = (
+	index: number,
+	X: number[],
+	Y: number[],
+	YNext: number[],
+) => string;
+export type CreateVerticalPath = (
+	index: number,
+	X: number[],
+	XNext: number[],
+	Y: number[],
+) => string;
+
+export interface FunnelGraphData {
+	colors?: string[];
+	labels?: string[];
+	subLabels?: string[];
+	values?: number[] | number[][];
+}
+
+export interface FunnelGraphOptions {
+	container: HTMLElement | string;
+	data: FunnelGraphData;
+	direction?: "horizontal" | "vertical";
+	displayPercent?: boolean;
+	formatter?: (value: number) => string;
+	gradientDirection?: "horizontal" | "vertical";
+	height?: number;
+	precision?: number;
+	subLabelValue?: "percent" | "value";
+	width?: number;
+}
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index d70951e..a383d6a 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -35,18 +35,21 @@ export const removeAttrs: RemoveAttrs = (element, ...attributes) => {
 	});
 };
 
-export const createSVGElement: CreateSVGElement = (
-	element,
-	container,
-	attributes,
-) => {
-	const el = document.createElementNS("http://www.w3.org/2000/svg", element);
+export const createSVGElement: CreateSVGElement = <T extends SVGElement>(
+	element: string,
+	container?: SVGElement | null,
+	attributes?: Record<string, string>,
+): T => {
+	const el = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		element,
+	) as T;
 
 	if (typeof attributes === "object") {
 		setAttrs(el, attributes);
 	}
 
-	if (typeof container !== "undefined") {
+	if (container !== undefined && container !== null) {
 		container.appendChild(el);
 	}