fix: invalid margin breaking chart (#102)

apache-superset · May 17, 2019 · 6aa8d00 · 6aa8d00
1 parent 1cccde5
commit 6aa8d00
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/package.json b/plugins/superset-ui-plugins/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/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/AxisAgent.ts b/plugins/superset-ui-plugins/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/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx b/plugins/superset-ui-plugins/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,14 +99,16 @@ 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,
       });
     }
 
     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);