@solidports/recharts 0.1.0 → 0.1.1

package/src/state/mouseEventsMiddleware.ts

@@ -1,185 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { ChartState } from "./chartState"
-import type { RelativePointer, HTMLMousePointer } from "../util/types"
-import { selectActivePropsFromChartPointer } from "./selectors/selectActivePropsFromChartPointer"
-import { selectTooltipEventType } from "./selectors/selectTooltipEventType"
-import { getRelativeCoordinate } from "../util/getRelativeCoordinate"
-import { readChartState } from "./chartState"
-
-import { type SetStoreFunction } from '../util/solid-1-compat';
-import { setTooltipInteraction } from "./tooltipInteraction"
-export type MouseEventHandlers = {
-	handleMouseClick: (mousePointer: HTMLMousePointer) => void
-	handleMouseMove: (mousePointer: HTMLMousePointer) => void
-}
-
-/**
- * Creates mouse event handler functions that read from the Solid store and update it directly.
- * Replaces the Redux createListenerMiddleware pattern.
- */
-export function createMouseEventHandlers(
-	store: ChartState,
-	setStore: SetStoreFunction<ChartState>,
-): MouseEventHandlers {
-	/*
-	 * This single rafId is safe because:
-	 * 1. Each chart has its own store instance with its own handlers
-	 * 2. mouseMove only fires from one DOM element (the chart wrapper)
-	 * 3. Rapid mousemove events from the same element SHOULD debounce - we only care about the latest position
-	 * This is different from externalEventsMiddleware which handles multiple event types
-	 * (click, mouseenter, mouseleave, etc.) that should NOT cancel each other.
-	 */
-	let rafId: number | null = null
-	let timeoutId: ReturnType<typeof setTimeout> | null = null
-	let latestChartPointer: RelativePointer | null = null
-
-	function handleMouseClick(mousePointer: HTMLMousePointer): void {
-		const activeProps = selectActivePropsFromChartPointer(
-			store,
-			getRelativeCoordinate(mousePointer),
-		)
-		if (activeProps?.activeIndex != null) {
-			setTooltipInteraction(setStore, "axisInteraction", "click", {
-				active: true,
-				coordinate: activeProps.activeCoordinate,
-				dataKey: undefined,
-				graphicalItemId: undefined,
-				index: activeProps.activeIndex,
-			})
-		}
-	}
-
-	function handleMouseMove(mousePointer: HTMLMousePointer): void {
-		const { throttleDelay, throttledEvents } = store.eventSettings
-		const isThrottled = throttledEvents === "all" || throttledEvents?.includes("mousemove")
-
-		/* Cancel any pending execution */
-		if (rafId !== null) {
-			cancelAnimationFrame(rafId)
-			rafId = null
-		}
-		if (timeoutId !== null && (typeof throttleDelay !== "number" || !isThrottled)) {
-			clearTimeout(timeoutId)
-			timeoutId = null
-		}
-
-		/*
-		 * Here it is important to resolve the chart pointer _before_ the callback,
-		 * because once we leave the current event loop, the mousePointer event object will lose
-		 * reference to currentTarget which getRelativeCoordinate uses.
-		 */
-		latestChartPointer = getRelativeCoordinate(mousePointer)
-		const callback = () => {
-			/*
-			 * Here we read a fresh state again inside the callback to ensure we have the latest state values
-			 * after any potential actions that may have been dispatched between the original event and this callback.
-			 */
-			const tooltipEventType = selectTooltipEventType(
-				store,
-				readChartState(store).tooltip.settings.shared,
-			)
-			if (latestChartPointer == null) {
-				rafId = null
-				timeoutId = null
-				return
-			}
-
-			/*
-			 * This functionality only applies to charts that have axes.
-			 * Graphical items have its own mouse events handling mechanism where they attach events directly to the items.
-			 */
-			if (tooltipEventType === "axis") {
-				const activeProps = selectActivePropsFromChartPointer(store, latestChartPointer)
-				if (activeProps?.activeIndex != null) {
-					setTooltipInteraction(setStore, "axisInteraction", "hover", {
-						active: true,
-						coordinate: activeProps.activeCoordinate,
-						dataKey: undefined,
-						graphicalItemId: undefined,
-						index: activeProps.activeIndex,
-					})
-				} else {
-					/* Mouse moves inside svg but out of plot area — flip `active` only, mirror
-					   upstream mouseLeaveChart so coordinate/index survive for the active=true
-					   prop and animation tail. */
-					setStore("tooltip", "axisInteraction", "hover", "active", false)
-					setStore("tooltip", "itemInteraction", "hover", "active", false)
-				}
-			}
-			rafId = null
-			timeoutId = null
-		}
-
-		if (!isThrottled) {
-			callback()
-			return
-		}
-
-		if (throttleDelay === "raf") {
-			rafId = requestAnimationFrame(callback)
-		} else if (typeof throttleDelay === "number") {
-			if (timeoutId === null) {
-				timeoutId = setTimeout(callback, throttleDelay)
-			}
-		}
-	}
-
-	return { handleMouseClick, handleMouseMove }
-}
-
-/**
- * Action thunk wrappers for use with the dispatch pattern.
- * These delegate to the same logic as createMouseEventHandlers.
- */
-export const mouseClickAction =
-	(mousePointer: HTMLMousePointer) =>
-	(
-		setStore: SetStoreFunction<ChartState>,
-		store: ChartState,
-	) => {
-		const activeProps = selectActivePropsFromChartPointer(
-			store,
-			getRelativeCoordinate(mousePointer),
-		)
-		if (activeProps?.activeIndex != null) {
-			const payload = {
-				active: true,
-				coordinate: activeProps.activeCoordinate,
-				dataKey: undefined,
-				graphicalItemId: undefined,
-				index: activeProps.activeIndex,
-			}
-			setTooltipInteraction(setStore, "axisInteraction", "click", payload)
-		}
-	}
-
-export const mouseMoveAction =
-	(mousePointer: HTMLMousePointer) =>
-	(
-		setStore: SetStoreFunction<ChartState>,
-		store: ChartState,
-	) => {
-		const chartPointer = getRelativeCoordinate(mousePointer)
-		const tooltipEventType = selectTooltipEventType(
-			store,
-			readChartState(store).tooltip.settings.shared,
-		)
-		if (tooltipEventType === "axis") {
-			const activeProps = selectActivePropsFromChartPointer(store, chartPointer)
-			if (activeProps?.activeIndex != null) {
-				const payload = {
-					active: true,
-					coordinate: activeProps.activeCoordinate,
-					dataKey: undefined,
-					graphicalItemId: undefined,
-					index: activeProps.activeIndex,
-				}
-				setTooltipInteraction(setStore, "axisInteraction", "hover", payload)
-			} else {
-				{
-					setStore("tooltip", "axisInteraction", "hover", "active", false)
-					setStore("tooltip", "itemInteraction", "hover", "active", false)
-				}
-			}
-		}
-	}

package/src/state/optionsSlice.ts

@@ -1,47 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { TooltipEventType } from "../util/types"
-import type { TooltipIndex, TooltipPayloadSearcher } from "./tooltipSlice"
-import { isNan } from "../util/DataUtils"
-
-/**
- * These chart options are decided internally, by Recharts,
- * and will not change during the lifetime of the chart.
- *
- * Changing these options can be done by swapping the root element
- * which will make a brand-new store.
- *
- * If you want to store options that can be changed by the user,
- * use UpdatableChartOptions in rootPropsSlice.ts.
- */
-export type ChartOptions = {
-	chartName: string
-	defaultTooltipEventType: TooltipEventType
-	validateTooltipEventTypes?: ReadonlyArray<TooltipEventType>
-	tooltipPayloadSearcher: TooltipPayloadSearcher
-	/**
-	 * We use this to identify which chart is sending events when synchronising.
-	 * Without it, we can't tell the difference between an action that arrived from another chart
-	 * and an action that was dispatched by the chart itself.
-	 */
-	eventEmitter: symbol | undefined
-}
-
-export const arrayTooltipSearcher: TooltipPayloadSearcher = (
-	data: unknown,
-	strIndex: TooltipIndex,
-): unknown | undefined => {
-	if (strIndex === null || strIndex === undefined) return undefined
-	if (!Array.isArray(data)) return undefined
-	const numIndex = Number.parseInt(strIndex, 10)
-	if (isNan(numIndex)) {
-		return undefined
-	}
-	return data[numIndex] as unknown
-}
-
-export const initialOptionsState: ChartOptions = {
-	chartName: "",
-	defaultTooltipEventType: "axis",
-	eventEmitter: undefined,
-	tooltipPayloadSearcher: () => undefined,
-}

package/src/state/polarAxisSlice.ts

@@ -1,10 +0,0 @@
-import type { AxisId, BaseCartesianAxis, TicksSettings } from "./cartesianAxisSlice"
-
-export type RadiusAxisSettings = BaseCartesianAxis & TicksSettings
-
-export type AngleAxisSettings = BaseCartesianAxis & TicksSettings
-
-export type PolarAxisState = {
-	radiusAxis: Record<AxisId, RadiusAxisSettings>
-	angleAxis: Record<AxisId, AngleAxisSettings>
-}

package/src/state/polarOptionsSlice.ts

@@ -1,12 +0,0 @@
-export type PolarChartOptions = {
-	cx: number | string
-	cy: number | string
-	endAngle: number
-	innerRadius: number | string
-	outerRadius: number | string
-	startAngle: number
-}
-
-export type PolarChartState = PolarChartOptions | null
-
-export const initialPolarOptionsState: PolarChartState = null

package/src/state/rawData.ts

@@ -1,26 +0,0 @@
-import { createStore, runWithOwner } from "solid-js"
-
-/**
- * Marks chart data as a raw record so the chart store serves it by reference instead of
- * wrapping every row in a proxy.
- *
- * Upstream treats chart data as immutable: a change replaces the whole array, and selectors
- * compare it by reference. A deep store would instead track each row field a selector reads,
- * so a derivation over N rows would subscribe to N × fields signals. A shallow store ingests
- * its values as raw records (Solid's sticky raw contract), after which no store wraps them; the
- * slot that holds the array still tracks replacement.
- *
- * Values that cannot be marked stay deep-tracked: proxies from a user store (Solid skips them),
- * and raw objects that already back a deep store (Solid throws, and exposes no query for it).
- */
-export function markRawData<T>(value: T): T {
-	if (value == null || typeof value !== "object") {
-		return value
-	}
-	try {
-		runWithOwner(null, () => createStore({ value }, { shallow: true }))
-	} catch {
-		/* already backs a deep store: keep it deep-tracked */
-	}
-	return value
-}

package/src/state/referenceElementsSlice.ts

@@ -1,40 +0,0 @@
-import type { AxisId } from "./cartesianAxisSlice"
-import type { IfOverflow } from "../util/IfOverflow"
-import type { ReferenceLineSegment } from "../cartesian/ReferenceLine"
-
-export type ReferenceElementSettings = {
-	yAxisId: AxisId
-	xAxisId: AxisId
-	ifOverflow: IfOverflow
-}
-
-export type ReferenceDotSettings = ReferenceElementSettings & {
-	x: unknown
-	y: unknown
-	r: number
-}
-
-export type ReferenceAreaSettings = ReferenceElementSettings & {
-	x1: unknown
-	x2: unknown
-	y1: unknown
-	y2: unknown
-}
-
-export type ReferenceLineSettings = ReferenceElementSettings & {
-	x: unknown
-	y: unknown
-	segment: ReferenceLineSegment | undefined
-}
-
-export type ReferenceElementState = {
-	dots: ReadonlyArray<ReferenceDotSettings>
-	areas: ReadonlyArray<ReferenceAreaSettings>
-	lines: ReadonlyArray<ReferenceLineSettings>
-}
-
-export const initialReferenceElementsState: ReferenceElementState = {
-	areas: [],
-	dots: [],
-	lines: [],
-}

package/src/state/renderedTicksSlice.ts

@@ -1,15 +0,0 @@
-import type { TickItem } from "../util/types"
-import type { AxisId } from "./cartesianAxisSlice"
-
-export type RenderedTicksAxisState = {
-	[axisId: AxisId]: ReadonlyArray<TickItem>
-}
-
-export type RenderedTicksState = {
-	xAxis: RenderedTicksAxisState
-	yAxis: RenderedTicksAxisState
-}
-
-export function createInitialRenderedTicksState(): RenderedTicksState {
-	return { xAxis: {}, yAxis: {} }
-}

package/src/state/rootPropsSlice.ts

@@ -1,47 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { StackOffsetType } from "../util/types"
-import { SyncMethod } from "../synchronisation/types"
-import { BaseValue } from "../cartesian/Area"
-
-/**
- * These are chart options that users can choose - which means they can also
- * choose to change them which should trigger a re-render.
- */
-export type UpdatableChartOptions = {
-	accessibilityLayer: boolean
-	barCategoryGap: number | string
-	barGap: number | string
-	barSize: string | number | undefined
-	baseValue: BaseValue | undefined
-	/**
-	 * Useful for debugging which chart is which when synchronising.
-	 * The className is also passed to the root element of the chart but that's done in the JSX, not through Redux.
-	 */
-	className: string | undefined
-	maxBarSize: number | undefined
-	/**
-	 * If false, stacked items will be rendered left to right. If true, stacked items will be rendered right to left.
-	 * (Render direction affects SVG layering, not x position.)
-	 */
-	reverseStackOrder: boolean
-	stackOffset: StackOffsetType
-	/**
-	 * Charts that share the same syncId will have their Tooltip and Brush synchronised.
-	 */
-	syncId: number | string | undefined
-	syncMethod: SyncMethod
-}
-
-export const initialRootPropsState: UpdatableChartOptions = {
-	accessibilityLayer: true,
-	barCategoryGap: "10%",
-	barGap: 4,
-	barSize: undefined,
-	baseValue: undefined,
-	className: undefined,
-	maxBarSize: undefined,
-	reverseStackOrder: false,
-	stackOffset: "none",
-	syncId: undefined,
-	syncMethod: "index",
-}

package/src/state/selectors/areaSelectors.ts

@@ -1,240 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { DataKey, NullableCoordinate } from "../../util/types"
-import { computeArea } from "../../cartesian/Area"
-import {
-	selectAxisWithScale,
-	selectStackGroups,
-	selectTicksOfGraphicalItem,
-	selectUnfilteredCartesianItems,
-} from "./axisSelectors"
-import type { ChartState } from "../store"
-import type { AxisId, XAxisSettings, YAxisSettings } from "../cartesianAxisSlice"
-import { selectChartLayout } from "../../context/chartLayoutContext"
-import { selectChartDataWithIndexesIfNotInPanoramaPosition3 } from "./dataSelectors"
-import { getBandSizeOfAxis, isCategoricalAxis, type StackId } from "../../util/ChartUtils"
-import { isNotNil } from "../../util/DataUtils"
-import type { ChartData } from "../chartDataSlice"
-import { getStackSeriesIdentifier } from "../../util/stacks/getStackSeriesIdentifier"
-import type {
-	StackDataPoint,
-	StackGroup,
-	StackSeries,
-	StackSeriesIdentifier,
-} from "../../util/stacks/stackTypes"
-import type { AreaSettings } from "../types/AreaSettings"
-import type { GraphicalItemId } from "../graphicalItemsSlice"
-import { selectChartBaseValue } from "./rootPropsSelectors"
-import { chartSelector } from "./chartSelector"
-import {
-	selectXAxisIdFromGraphicalItemId,
-	selectYAxisIdFromGraphicalItemId,
-} from "./graphicalItemSelectors"
-
-/** Optional overrides — bypass the axis-settings lookup on hot animation frames. */
-export type AreaAxisOverrides = {
-	xAxis?: XAxisSettings
-	yAxis?: YAxisSettings
-	areaSettings?: AreaSettings
-}
-
-export interface AreaPointItem extends NullableCoordinate {
-	x: number | null
-	y: number | null
-	value?: ReadonlyArray<unknown>
-	payload?: unknown
-}
-
-export type ComputedArea = {
-	points: ReadonlyArray<AreaPointItem>
-	baseLine: number | ReadonlyArray<AreaPointItem>
-	isRange: boolean
-}
-
-const selectXAxisWithScale = chartSelector((
-	state: ChartState,
-	graphicalItemId: GraphicalItemId,
-	isPanorama: boolean,
-	override?: XAxisSettings,
-) =>
-	selectAxisWithScale(
-		state,
-		"xAxis",
-		selectXAxisIdFromGraphicalItemId(state, graphicalItemId),
-		isPanorama,
-		override,
-	))
-
-const selectXAxisTicks = chartSelector((
-	state: ChartState,
-	graphicalItemId: GraphicalItemId,
-	isPanorama: boolean,
-) =>
-	selectTicksOfGraphicalItem(
-		state,
-		"xAxis",
-		selectXAxisIdFromGraphicalItemId(state, graphicalItemId),
-		isPanorama,
-	))
-
-const selectYAxisWithScale = chartSelector((
-	state: ChartState,
-	graphicalItemId: GraphicalItemId,
-	isPanorama: boolean,
-	override?: YAxisSettings,
-) =>
-	selectAxisWithScale(
-		state,
-		"yAxis",
-		selectYAxisIdFromGraphicalItemId(state, graphicalItemId),
-		isPanorama,
-		override,
-	))
-
-const selectYAxisTicks = chartSelector((
-	state: ChartState,
-	graphicalItemId: GraphicalItemId,
-	isPanorama: boolean,
-) =>
-	selectTicksOfGraphicalItem(
-		state,
-		"yAxis",
-		selectYAxisIdFromGraphicalItemId(state, graphicalItemId),
-		isPanorama,
-	))
-
-const selectBandSize = chartSelector(function selectBandSize(state: ChartState, graphicalItemId: GraphicalItemId, isPanorama: boolean, overrides?: AreaAxisOverrides) {
-	const layout = selectChartLayout(state)
-	const xAxis = selectXAxisWithScale(state, graphicalItemId, isPanorama, overrides?.xAxis)
-	const yAxis = selectYAxisWithScale(state, graphicalItemId, isPanorama, overrides?.yAxis)
-	const xAxisTicks = selectXAxisTicks(state, graphicalItemId, isPanorama)
-	const yAxisTicks = selectYAxisTicks(state, graphicalItemId, isPanorama)
-	if (isCategoricalAxis(layout, "xAxis")) {
-		return getBandSizeOfAxis(xAxis, xAxisTicks, false)
-	}
-	return getBandSizeOfAxis(yAxis, yAxisTicks, false)
-})
-
-const selectSynchronisedAreaSettings = chartSelector(function selectSynchronisedAreaSettings(state: ChartState, id: GraphicalItemId): AreaSettings | undefined {
-	const graphicalItems = selectUnfilteredCartesianItems(state)
-	return graphicalItems.filter((item) => item.type === "area").find((item) => item.id === id) as
-		| AreaSettings
-		| undefined
-})
-
-const selectNumericalAxisType = chartSelector((state: ChartState): "xAxis" | "yAxis" => {
-	const layout = selectChartLayout(state)
-	const isXAxisCategorical = isCategoricalAxis(layout, "xAxis")
-	return isXAxisCategorical ? "yAxis" : "xAxis"
-})
-
-const selectNumericalAxisIdFromGraphicalItemId = chartSelector((
-	state: ChartState,
-	graphicalItemId: GraphicalItemId,
-): AxisId => {
-	const axisType = selectNumericalAxisType(state)
-	if (axisType === "yAxis") {
-		return selectYAxisIdFromGraphicalItemId(state, graphicalItemId)
-	}
-	return selectXAxisIdFromGraphicalItemId(state, graphicalItemId)
-})
-
-const selectNumericalAxisStackGroups = chartSelector((
-	state: ChartState,
-	graphicalItemId: GraphicalItemId,
-	isPanorama: boolean,
-): Record<StackId, StackGroup> | undefined =>
-	selectStackGroups(
-		state,
-		selectNumericalAxisType(state),
-		selectNumericalAxisIdFromGraphicalItemId(state, graphicalItemId),
-		isPanorama,
-	))
-
-export const selectGraphicalItemStackedData = chartSelector(function selectGraphicalItemStackedData(state: ChartState, id: GraphicalItemId, isPanorama: boolean): ReadonlyArray<StackDataPoint> | undefined {
-	const areaSettings = selectSynchronisedAreaSettings(state, id)
-	const stackGroups = selectNumericalAxisStackGroups(state, id, isPanorama)
-	if (areaSettings == null || stackGroups == null) {
-		return undefined
-	}
-	const { stackId } = areaSettings
-	const stackSeriesIdentifier: StackSeriesIdentifier | undefined =
-		getStackSeriesIdentifier(areaSettings)
-	if (stackId == null || stackSeriesIdentifier == null) {
-		return undefined
-	}
-	const groups: ReadonlyArray<StackSeries> | undefined = stackGroups[stackId]?.stackedData
-	const found: StackSeries | undefined = groups?.find((v) => v.key === stackSeriesIdentifier)
-	if (found == null) {
-		return undefined
-	}
-	return found.map((item): StackDataPoint => [item[0], item[1]])
-})
-
-const selectStackDataKeys = chartSelector(function selectStackDataKeys(state: ChartState, id: GraphicalItemId, isPanorama: boolean): ReadonlyArray<DataKey<unknown>> | undefined {
-	const areaSettings = selectSynchronisedAreaSettings(state, id)
-	const stackGroups = selectNumericalAxisStackGroups(state, id, isPanorama)
-	if (areaSettings == null || areaSettings.stackId == null || stackGroups == null) {
-		return undefined
-	}
-	const group: StackGroup | undefined = stackGroups[areaSettings.stackId]
-	if (group == null) {
-		return undefined
-	}
-	return group.graphicalItems.map((item) => item.dataKey).filter(isNotNil)
-})
-
-export const selectArea = chartSelector(function selectArea(state: ChartState, id: GraphicalItemId, isPanorama: boolean, overrides?: AreaAxisOverrides): ComputedArea | undefined {
-	const layout = selectChartLayout(state)
-	const xAxis = selectXAxisWithScale(state, id, isPanorama, overrides?.xAxis)
-	const yAxis = selectYAxisWithScale(state, id, isPanorama, overrides?.yAxis)
-	const xAxisTicks = selectXAxisTicks(state, id, isPanorama)
-	const yAxisTicks = selectYAxisTicks(state, id, isPanorama)
-	const stackedData = selectGraphicalItemStackedData(state, id, isPanorama)
-	const { chartData, dataStartIndex, dataEndIndex } =
-		selectChartDataWithIndexesIfNotInPanoramaPosition3(state, undefined, isPanorama)
-	const bandSize = selectBandSize(state, id, isPanorama, overrides)
-	const areaSettings = overrides?.areaSettings ?? selectSynchronisedAreaSettings(state, id)
-	const chartBaseValue = selectChartBaseValue(state)
-	const stackDataKeys = selectStackDataKeys(state, id, isPanorama)
-
-	if (
-		areaSettings == null ||
-		(layout !== "horizontal" && layout !== "vertical") ||
-		xAxis == null ||
-		yAxis == null ||
-		xAxisTicks == null ||
-		yAxisTicks == null ||
-		xAxisTicks.length === 0 ||
-		yAxisTicks.length === 0 ||
-		bandSize == null
-	) {
-		return undefined
-	}
-	const { data } = areaSettings
-
-	let displayedData: ChartData | undefined
-	if (data && data.length > 0) {
-		displayedData = data
-	} else {
-		displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1)
-	}
-
-	if (displayedData == null) {
-		return undefined
-	}
-
-	return computeArea({
-		areaSettings,
-		bandSize,
-		chartBaseValue,
-		dataStartIndex,
-		displayedData,
-		layout,
-		stackedData,
-		stackDataKeys,
-		xAxis,
-		xAxisTicks,
-		yAxis,
-		yAxisTicks,
-	})
-})

package/src/state/selectors/arrayEqualityCheck.ts

@@ -1,29 +0,0 @@
-/**
- * Checks if two arrays are equal, treating empty arrays as equal regardless of reference.
- * If both arrays are non-empty, it checks for reference equality.
- * @param a
- * @param b
- */
-export function emptyArraysAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
-	if (Array.isArray(a) && Array.isArray(b) && a.length === 0 && b.length === 0) {
-		return true
-	}
-	return a === b
-}
-
-/**
- * Checks if two arrays have the same contents in the same order.
- * @param a
- * @param b
- */
-export function arrayContentsAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
-	if (a.length === b.length) {
-		for (let i = 0; i < a.length; i++) {
-			if (a[i] !== b[i]) {
-				return false
-			}
-		}
-		return true
-	}
-	return false
-}