refactor(graph): update createSVGElement signature

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;
+}

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);
 	}