From df7f9df3ca1d04175c855aa2264fe7087cfa65fd Mon Sep 17 00:00:00 2001
From: tyleroooo <tyler@dydx.exchange>
Date: Fri, 4 Oct 2024 14:44:03 -0400
Subject: [PATCH] fix: zoom domain excluding first point on data update (#1114)

---
 src/components/visx/TimeSeriesChart.tsx | 8 +++++++-
 src/pages/vaults/VaultPnlChart.tsx      | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx
index 4b4010ac9..ef5014a1f 100644
--- a/src/components/visx/TimeSeriesChart.tsx
+++ b/src/components/visx/TimeSeriesChart.tsx
@@ -87,6 +87,7 @@ type StyleProps = {
   padding?: Margin;
   defaultZoomDomain?: number;
   minZoomDomain: number;
+  domainBasePadding?: [number, number];
   numGridLines?: number;
   withGridRows?: boolean;
   withGridColumns?: boolean;
@@ -123,6 +124,7 @@ export const TimeSeriesChart = <Datum extends {}>({
   padding,
   defaultZoomDomain,
   minZoomDomain = 0,
+  domainBasePadding = [0, 0],
   numGridLines,
   withGridRows = true,
   withGridColumns = false,
@@ -209,9 +211,13 @@ export const TimeSeriesChart = <Datum extends {}>({
 
     const zoom = zoomDomain / minZoomDomain;
 
-    const domain = [
+    const domainBase = [
       clamp(xAccessor(latestDatum) - zoomDomain, xAccessor(earliestDatum), xAccessor(latestDatum)),
       xAccessor(latestDatum),
+    ] as [number, number];
+    const domain = [
+      domainBase[0] - (domainBase[1] - domainBase[0]) * domainBasePadding[0],
+      domainBase[1] + (domainBase[1] - domainBase[0]) * domainBasePadding[1],
     ] as const;
 
     const visibleData = data.filter(
diff --git a/src/pages/vaults/VaultPnlChart.tsx b/src/pages/vaults/VaultPnlChart.tsx
index ef1f23343..e32fe158b 100644
--- a/src/pages/vaults/VaultPnlChart.tsx
+++ b/src/pages/vaults/VaultPnlChart.tsx
@@ -249,6 +249,7 @@ export const VaultPnlChart = ({ className }: VaultPnlChartProps) => {
           onTooltipContext={onTooltipContext}
           onZoom={handleZoom}
           defaultZoomDomain={zoomDomain}
+          domainBasePadding={[0.01, 0]}
           minZoomDomain={timeUnits.day * 2.5}
           slotEmpty={undefined}
           numGridLines={0}