From dc874b0d3a50feb19759e1b4001dfdb7ff0b15bb Mon Sep 17 00:00:00 2001
From: Krist Wongsuphasawat <krist.wongz@gmail.com>
Date: Thu, 16 May 2019 18:12:06 -0700
Subject: [PATCH] fix: invalid margin breaking chart (#102)

---
 packages/superset-ui-preset-chart-xy/package.json      |  2 +-
 .../src/encodeable/AxisAgent.ts                        | 10 +++++-----
 .../src/utils/XYChartLayout.tsx                        |  7 +++++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/superset-ui-preset-chart-xy/package.json b/packages/superset-ui-preset-chart-xy/package.json
index 538f3e502..ddcba2b26 100644
--- a/packages/superset-ui-preset-chart-xy/package.json
+++ b/packages/superset-ui-preset-chart-xy/package.json
@@ -47,7 +47,7 @@
     "vega-lite": "^3.1.0"
   },
   "peerDependencies": {
-    "@superset-ui/chart": "^0.10.2 || ^0.11.6",
+    "@superset-ui/chart": "^0.11.6",
     "@superset-ui/color": "^0.10.0 || ^0.11.0",
     "@superset-ui/core": "^0.10.0 || ^0.11.0",
     "@superset-ui/dimension": "^0.10.4 || ^0.11.0",
diff --git a/packages/superset-ui-preset-chart-xy/src/encodeable/AxisAgent.ts b/packages/superset-ui-preset-chart-xy/src/encodeable/AxisAgent.ts
index 786214ef9..d06967724 100644
--- a/packages/superset-ui-preset-chart-xy/src/encodeable/AxisAgent.ts
+++ b/packages/superset-ui-preset-chart-xy/src/encodeable/AxisAgent.ts
@@ -98,16 +98,16 @@ export default class AxisAgent<Def extends ChannelDef<Output>, Output extends Va
     gapBetweenAxisLabelAndBorder = 8,
     gapBetweenTickAndTickLabel = 4,
     labelAngle = this.config.labelAngle,
-    tickLength,
-    tickTextStyle,
+    tickLength = 8,
+    tickTextStyle = {},
   }: {
     axisTitleHeight?: number;
     axisWidth: number;
     gapBetweenAxisLabelAndBorder?: number;
     gapBetweenTickAndTickLabel?: number;
     labelAngle?: number;
-    tickLength: number;
-    tickTextStyle: CSSProperties;
+    tickLength?: number;
+    tickTextStyle?: CSSProperties;
   }): {
     labelAngle: number;
     labelOffset: number;
@@ -127,7 +127,7 @@ export default class AxisAgent<Def extends ChannelDef<Output>, Output extends Va
 
     const { labelOverlap, labelPadding, orient } = this.config;
 
-    const maxWidth = Math.max(...labelDimensions.map(d => d.width));
+    const maxWidth = Math.max(...labelDimensions.map(d => d.width), 0);
 
     // TODO: Add other strategies: stagger, chop, wrap.
     let strategyForLabelOverlap = labelOverlap;
diff --git a/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx b/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx
index c592db650..c6a157adb 100644
--- a/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx
+++ b/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx
@@ -83,7 +83,8 @@ export default class XYChartLayout {
     if (typeof yEncoder.axis !== 'undefined') {
       this.yLayout = yEncoder.axis.computeLayout({
         axisWidth: Math.max(height - margin.top - margin.bottom),
-        tickLength: theme.yTickStyles.length,
+        // @ts-ignore
+        tickLength: theme.yTickStyles.length || theme.yTickStyles.tickLength,
         tickTextStyle: theme.yTickStyles.label.right,
       });
     }
@@ -98,7 +99,8 @@ export default class XYChartLayout {
       this.xLayout = xEncoder.axis.computeLayout({
         axisWidth: innerWidth,
         labelAngle: this.recommendXLabelAngle(xEncoder.axis.config.orient as 'top' | 'bottom'),
-        tickLength: theme.xTickStyles.length,
+        // @ts-ignore
+        tickLength: theme.xTickStyles.length || theme.xTickStyles.tickLength,
         tickTextStyle: theme.xTickStyles.label.bottom,
       });
     }
@@ -106,6 +108,7 @@ export default class XYChartLayout {
     const finalMargin = this.xLayout
       ? mergeMargin(secondMargin, this.xLayout.minMargin)
       : secondMargin;
+
     const innerHeight = Math.max(height - finalMargin.top - finalMargin.bottom, minContentHeight);
 
     const chartWidth = Math.round(innerWidth + finalMargin.left + finalMargin.right);