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 index 538f3e5021..ddcba2b26f 100644 --- 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 index 786214ef98..d069677248 100644 --- 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, 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, 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 index c592db6503..c6a157adb3 100644 --- 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,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);