fix: area px clamping

Author: tannerlinsley

src/seriesTypes/Area.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { Axis, Series, Datum } from '../types'
 import {
+  clampPxToAxis,
   getPrimary,
   getSecondary,
   getSecondaryStart,
@@ -60,8 +61,16 @@ export default function AreaComponent<TDatum>({
         const areaPath =
           area<Datum<TDatum>>(
             datum => getPrimary(datum, primaryAxis) ?? NaN,
-            datum => getSecondaryStart(datum, secondaryAxis) ?? NaN,
-            datum => getSecondary(datum, secondaryAxis) ?? NaN
+            datum =>
+              clampPxToAxis(
+                getSecondaryStart(datum, secondaryAxis) ?? NaN,
+                secondaryAxis
+              ),
+            datum =>
+              clampPxToAxis(
+                getSecondary(datum, secondaryAxis) ?? NaN,
+                secondaryAxis
+              )
           ).curve(curve)(series.datums) ?? undefined
 
         const linePath =

src/utils/Utils.ts

@@ -247,6 +247,15 @@ export function getHeight<TDatum>(
     : getSecondaryLength(datum, secondaryAxis)
 }
 
+export function clampPxToAxis<TDatum>(px: number, axis: Axis<TDatum>) {
+  const range = axis.scale.range()
+  if (axis.isVertical) {
+    range.reverse()
+  }
+
+  return Math.max(range[0], Math.min(px, range[1]))
+}
+
 export function getTickPx<TDatum>(scale: Axis<TDatum>['scale'], value: any) {
   let px = scale(value) ?? NaN