Merge pull request #960 from nteract/fix-legend-margin

Treat undefined user margin sides as omitted

Author: emeeks

src/components/charts/shared/hooks.test.ts

@@ -457,6 +457,20 @@ describe("useChartLegendAndMargin", () => {
     expect(result.current.margin.right).toBe(200)
   })
 
+  it("treats undefined margin sides as omitted for legend reservation", () => {
+    const colorScale = (_v: string) => "#ccc"
+    const { result } = renderHook(() =>
+      useChartLegendAndMargin({
+        data,
+        colorBy: "cat",
+        colorScale,
+        showLegend: true,
+        userMargin: { right: undefined },
+      })
+    )
+    expect(result.current.margin.right).toBe(110)
+  })
+
   it("merges user margin with defaults", () => {
     const { result } = renderHook(() =>
       useChartLegendAndMargin({

src/components/charts/shared/hooks.ts

@@ -490,7 +490,12 @@ export function useChartLegendAndMargin({
     const userSides: Partial<MarginType> = typeof userMargin === "number"
       ? { top: userMargin, bottom: userMargin, left: userMargin, right: userMargin }
       : (userMargin ?? {})
-    const finalMargin: MarginType = { ...defaults, ...userSides }
+    const finalMargin: MarginType = {
+      top: userSides.top ?? defaults.top,
+      right: userSides.right ?? defaults.right,
+      bottom: userSides.bottom ?? defaults.bottom,
+      left: userSides.left ?? defaults.left,
+    }
     // Auto-reserve margin for the legend ONLY on sides the user
     // didn't set explicitly. A caller passing `margin={{ right: 30 }}`
     // (e.g. positioning their own external legend) shouldn't get