[incubator-superset] branch master updated: Fix separator visualization by propagating header height (#4437)

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 0c87e23  Fix separator visualization by propagating header height (#4437)
0c87e23 is described below

commit 0c87e23877b6e63c3837c9c36657103ca8b0fe5e
Author: Jay Lindquist <ja...@bitwiseor.com>
AuthorDate: Thu Feb 15 19:48:57 2018 -0600

    Fix separator visualization by propagating header height (#4437)
---
 superset/assets/javascripts/chart/Chart.jsx                   |  6 ++++++
 superset/assets/javascripts/dashboard/components/GridCell.jsx | 10 ++++++++--
 superset/assets/visualizations/markup.js                      |  9 ++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/superset/assets/javascripts/chart/Chart.jsx b/superset/assets/javascripts/chart/Chart.jsx
index cc18bb4..0e06427 100644
--- a/superset/assets/javascripts/chart/Chart.jsx
+++ b/superset/assets/javascripts/chart/Chart.jsx
@@ -20,6 +20,7 @@ const propTypes = {
   containerId: PropTypes.string.isRequired,
   datasource: PropTypes.object.isRequired,
   formData: PropTypes.object.isRequired,
+  headerHeight: PropTypes.number,
   height: PropTypes.number,
   width: PropTypes.number,
   setControlValue: PropTypes.func,
@@ -63,6 +64,7 @@ class Chart extends React.PureComponent {
     this.getFilters = this.getFilters.bind(this);
     this.clearFilter = this.clearFilter.bind(this);
     this.removeFilter = this.removeFilter.bind(this);
+    this.headerHeight = this.headerHeight.bind(this);
     this.height = this.height.bind(this);
     this.width = this.width.bind(this);
   }
@@ -129,6 +131,10 @@ class Chart extends React.PureComponent {
     return this.props.width || this.container.el.offsetWidth;
   }
 
+  headerHeight() {
+    return this.props.headerHeight || 0;
+  }
+
   height() {
     return this.props.height || this.container.el.offsetHeight;
   }
diff --git a/superset/assets/javascripts/dashboard/components/GridCell.jsx b/superset/assets/javascripts/dashboard/components/GridCell.jsx
index 2ae9ea4..91fe839 100644
--- a/superset/assets/javascripts/dashboard/components/GridCell.jsx
+++ b/superset/assets/javascripts/dashboard/components/GridCell.jsx
@@ -73,16 +73,21 @@ class GridCell extends React.PureComponent {
 
   height(slice) {
     const widgetHeight = this.props.widgetHeight;
-    const headerId = this.getHeaderId(slice);
+    const headerHeight = this.headerHeight(slice);
     const descriptionId = this.getDescriptionId(slice);
-    const headerHeight = this.refs[headerId] ? this.refs[headerId].offsetHeight : 30;
     let descriptionHeight = 0;
     if (this.props.isExpanded && this.refs[descriptionId]) {
       descriptionHeight = this.refs[descriptionId].offsetHeight + 10;
     }
+
     return widgetHeight - headerHeight - descriptionHeight;
   }
 
+  headerHeight(slice) {
+    const headerId = this.getHeaderId(slice);
+    return this.refs[headerId] ? this.refs[headerId].offsetHeight : 30;
+  }
+
   render() {
     const {
       isExpanded, isLoading, isCached, cachedDttm,
@@ -130,6 +135,7 @@ class GridCell extends React.PureComponent {
             chartKey={chartKey}
             datasource={datasource}
             formData={formData}
+            headerHeight={this.headerHeight(slice)}
             height={this.height(slice)}
             width={this.width()}
             timeout={timeout}
diff --git a/superset/assets/visualizations/markup.js b/superset/assets/visualizations/markup.js
index 8b43716..193eb4d 100644
--- a/superset/assets/visualizations/markup.js
+++ b/superset/assets/visualizations/markup.js
@@ -9,6 +9,13 @@ function markupWidget(slice, payload) {
     overflow: 'auto',
   });
 
+  // markup height is slice height - (marginTop + marginBottom)
+  let iframeHeight = slice.height() - 20;
+  if (slice.props.vizType === 'separator') {
+    // separator height is the entire chart container: slice height + header
+    iframeHeight = slice.height() + slice.headerHeight();
+  }
+
   const iframeId = `if__${slice.containerId}`;
   const html = `
     <html>
@@ -22,7 +29,7 @@ function markupWidget(slice, payload) {
   jqdiv.html(`
     <iframe id="${iframeId}"
       frameborder="0"
-      height="${slice.height() - 20}"
+      height="${iframeHeight}"
       sandbox="allow-same-origin allow-scripts allow-top-navigation allow-popups">
     </iframe>
   `);

-- 
To stop receiving notification emails like this one, please contact
maximebeauchemin@apache.org.