feat: dynamic width and height computation

apache-superset · Jun 10, 2019 · 2011a5c · 2011a5c
1 parent 2d037b8
commit 2011a5c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/packages/superset-ui-chart/src/components/SuperChartContainer.tsx b/packages/superset-ui-chart/src/components/SuperChartContainer.tsx
@@ -50,7 +50,7 @@ export default class SuperChartContainer extends React.PureComponent<Props, {}>
 
   createChartProps = ChartProps.createSelector();
 
-  getChartPropsConfig = () => {
+  getChartPropsConfig() {
     if (isClassicProps(this.props)) {
       return this.props.chartProps;
     }
@@ -68,9 +68,9 @@ export default class SuperChartContainer extends React.PureComponent<Props, {}>
     }
 
     return {};
-  };
+  }
 
-  renderChart = ({ width, height }: { width: number; height: number }) => {
+  renderChart(width: number, height: number) {
     const {
       id,
       className,
@@ -97,9 +97,9 @@ export default class SuperChartContainer extends React.PureComponent<Props, {}>
         onRenderFailure={onRenderFailure}
       />
     );
-  };
+  }
 
-  renderResponsiveChart = () => {
+  renderResponsiveChart() {
     let inputWidth: string | number = defaultProps.width;
     let inputHeight: string | number = defaultProps.height;
 
@@ -127,15 +127,24 @@ export default class SuperChartContainer extends React.PureComponent<Props, {}>
     // Parse them in case they are % or 'auto'
     const widthInfo = parseWidthOrHeight(inputWidth);
     const heightInfo = parseWidthOrHeight(inputHeight);
+    // If any of the dimension is dynamic, get parent's dimension
     if (widthInfo.isDynamic || heightInfo.isDynamic) {
-      return <ParentSize>{this.renderChart}</ParentSize>;
+      return (
+        <ParentSize>
+          {({ width, height }) =>
+            width > 0 &&
+            height > 0 &&
+            this.renderChart(
+              widthInfo.isDynamic ? width * widthInfo.percent : widthInfo.value,
+              heightInfo.isDynamic ? height * heightInfo.percent : heightInfo.value,
+            )
+          }
+        </ParentSize>
+      );
     }
 
-    return this.renderChart({
-      height: heightInfo.value,
-      width: widthInfo.value,
-    });
-  };
+    return this.renderChart(widthInfo.value, heightInfo.value);
+  }
 
   render() {
     const { disableErrorBoundary, FallbackComponent, onErrorBoundary } = this.props;

diff --git a/packages/superset-ui-chart/src/components/parseWidthOrHeight.ts b/packages/superset-ui-chart/src/components/parseWidthOrHeight.ts
@@ -6,7 +6,8 @@ export default function parseWidthOrHeight(
   if (input === 'auto' || input === '100%') {
     return HUNDRED_PERCENT;
   } else if (typeof input === 'string' && input.length > 0 && input[input.length - 1] === '%') {
-    return { isDynamic: true, percent: parseFloat(input.substring(0, input.length - 1)) };
+    // eslint-disable-next-line no-magic-numbers
+    return { isDynamic: true, percent: parseFloat(input.substring(0, input.length - 1)) / 100 };
   }
   const value = typeof input === 'number' ? input : parseFloat(input);
 

diff --git a/packages/superset-ui-chart/src/models/ChartProps.ts b/packages/superset-ui-chart/src/models/ChartProps.ts
@@ -9,7 +9,7 @@ type SnakeCaseDatasource = PlainObject;
 type CamelCaseFormData = PlainObject;
 type SnakeCaseFormData = PlainObject;
 export type QueryData = PlainObject;
-type Filters = any[];
+type Filters = PlainObject;
 type Hooks = {
   /** Legacy hook:  */
   onAddFilter?: HandlerFunction;