@solidports/recharts 0.1.0

package/src/util/tooltip/translate.ts

@@ -0,0 +1,171 @@
+/* eslint-disable import/no-cycle */
+import { clsx } from "clsx"
+import type { JSX } from '@solidjs/web';
+import { isNumber } from "../DataUtils"
+import type { Coordinate, CartesianViewBox, AllowInDimension } from "../types"
+
+export type Dimension2D = "x" | "y"
+
+const CSS_CLASS_PREFIX = "recharts-tooltip-wrapper"
+
+const TOOLTIP_HIDDEN: JSX.CSSProperties = { visibility: "hidden" }
+
+export function getTooltipCSSClassName({
+	coordinate,
+	translateX,
+	translateY,
+}: {
+	translateX: number | undefined
+	translateY: number | undefined
+	coordinate: Partial<Coordinate> | undefined
+}): string {
+	return clsx(CSS_CLASS_PREFIX, {
+		[`${CSS_CLASS_PREFIX}-right`]:
+			isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX >= coordinate.x,
+		[`${CSS_CLASS_PREFIX}-left`]:
+			isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX < coordinate.x,
+		[`${CSS_CLASS_PREFIX}-bottom`]:
+			isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY >= coordinate.y,
+		[`${CSS_CLASS_PREFIX}-top`]:
+			isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY < coordinate.y,
+	})
+}
+
+export function getTooltipTranslateXY({
+	allowEscapeViewBox,
+	coordinate,
+	key,
+	offset,
+	position,
+	reverseDirection,
+	tooltipDimension,
+	viewBox,
+	viewBoxDimension,
+}: {
+	allowEscapeViewBox: AllowInDimension
+	coordinate: Coordinate
+	key: Dimension2D
+	offset: number
+	position: Partial<Coordinate> | undefined
+	reverseDirection: AllowInDimension
+	tooltipDimension: number
+	viewBox: CartesianViewBox
+	viewBoxDimension: number | undefined
+}): number {
+	if (position && isNumber(position[key])) {
+		return position[key]
+	}
+
+	const negative = coordinate[key] - tooltipDimension - (offset > 0 ? offset : 0)
+	const positive = coordinate[key] + offset
+
+	if (allowEscapeViewBox[key]) {
+		return reverseDirection[key] ? negative : positive
+	}
+
+	const viewBoxKey = viewBox[key]
+	if (viewBoxKey == null) {
+		return 0
+	}
+
+	if (reverseDirection[key]) {
+		const tooltipBoundary = negative
+		const viewBoxBoundary = viewBoxKey
+		if (tooltipBoundary < viewBoxBoundary) {
+			return Math.max(positive, viewBoxKey)
+		}
+		return Math.max(negative, viewBoxKey)
+	}
+
+	if (viewBoxDimension == null) {
+		return 0
+	}
+	const tooltipBoundary = positive + tooltipDimension
+	const viewBoxBoundary = viewBoxKey + viewBoxDimension
+	if (tooltipBoundary > viewBoxBoundary) {
+		return Math.max(negative, viewBoxKey)
+	}
+	return Math.max(positive, viewBoxKey)
+}
+
+export function getTransformStyle({
+	translateX,
+	translateY,
+	useTranslate3d,
+}: {
+	useTranslate3d: boolean
+	translateX: number
+	translateY: number
+}): JSX.CSSProperties {
+	return {
+		transform: useTranslate3d
+			? `translate3d(${translateX}px, ${translateY}px, 0)`
+			: `translate(${translateX}px, ${translateY}px)`,
+	}
+}
+
+export function getTooltipTranslate({
+	allowEscapeViewBox,
+	coordinate,
+	offsetTop,
+	offsetLeft,
+	position,
+	reverseDirection,
+	tooltipBox,
+	useTranslate3d,
+	viewBox,
+}: {
+	allowEscapeViewBox: AllowInDimension
+	coordinate: Coordinate | undefined
+	offsetTop: number
+	offsetLeft: number
+	position: Partial<Coordinate> | undefined
+	reverseDirection: AllowInDimension
+	tooltipBox: { width: number; height: number }
+	useTranslate3d: boolean
+	viewBox: CartesianViewBox
+}): { cssProperties: JSX.CSSProperties; cssClasses: string } {
+	let cssProperties: JSX.CSSProperties
+	let translateX: number | undefined
+	let translateY: number | undefined
+	if (tooltipBox.height > 0 && tooltipBox.width > 0 && coordinate) {
+		translateX = getTooltipTranslateXY({
+			allowEscapeViewBox,
+			coordinate,
+			key: "x",
+			offset: offsetLeft,
+			position,
+			reverseDirection,
+			tooltipDimension: tooltipBox.width,
+			viewBox,
+			viewBoxDimension: viewBox.width,
+		})
+
+		translateY = getTooltipTranslateXY({
+			allowEscapeViewBox,
+			coordinate,
+			key: "y",
+			offset: offsetTop,
+			position,
+			reverseDirection,
+			tooltipDimension: tooltipBox.height,
+			viewBox,
+			viewBoxDimension: viewBox.height,
+		})
+		cssProperties = getTransformStyle({
+			translateX,
+			translateY,
+			useTranslate3d,
+		})
+	} else {
+		cssProperties = TOOLTIP_HIDDEN
+	}
+	return {
+		cssClasses: getTooltipCSSClassName({
+			coordinate,
+			translateX,
+			translateY,
+		}),
+		cssProperties,
+	}
+}

package/src/util/typedDataKey.ts

@@ -0,0 +1,48 @@
+/**
+ * Extracts values from data objects.
+ * Has two generics:
+ * - DataPointType: The type of the data object.
+ * - DataValueType: The type of the value to extract.
+ *
+ * The wall of text below may be simplified to:
+ * - string (must be a key of DataPointType)
+ * - number (must be a key of DataPointType)
+ * - function that takes DataPointType and returns DataValueType `(obj: DataPointType) => DataValueType)`
+ *
+ * The actual implementation is more complex to allow for better type inference and autocomplete.
+ */
+export type TypedDataKey<DataPointType = unknown, DataValueType = unknown> =
+	/*
+	 * If T is any or unknown, we allow loose typing.
+	 * Either an arbitrary string|number key or a function that takes T and returns R.
+	 * We will follow the generics provided by the user in this case.
+	 */
+	unknown extends DataPointType
+		? string | number | ((obj: DataPointType) => DataValueType)
+		: /*
+			 * If T has a string index signature, we allow any key.
+			 * This handles cases like Record<string, any>.
+			 */
+			string extends keyof DataPointType
+			? string | number | ((obj: DataPointType) => DataValueType)
+			: /*
+					 * Otherwise, we extract keys from T whose values extend R.
+					 * This allows for strongly typed access to known properties.
+					 * This part also enables Intellisense/autocomplete for known keys.
+					 */
+					| {
+							[K in keyof DataPointType]: DataPointType[K] extends DataValueType
+								? K extends string | number
+									? K
+									: never
+								: never
+					  }[keyof DataPointType]
+					/*
+					 * Additionally, if T is an array or readonly array, we allow numeric string keys for convenience.
+					 */
+					| (DataPointType extends ReadonlyArray<infer E>
+							? E extends DataValueType
+								? `${number}`
+								: never
+							: never)
+					| ((obj: DataPointType) => DataValueType)