fix: zoom domain excluding first point on data update (#1114)

dydxprotocol · Oct 4, 2024 · df7f9df · df7f9df
1 parent 284298d
commit df7f9df
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -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}