superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch master updated: Use @vx/responsive to provide Chart width on Explore page (#6104)
Date Wed, 17 Oct 2018 05:18:41 GMT
This is an automated email from the ASF dual-hosted git repository.

ccwilliams 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 273991f  Use @vx/responsive to provide Chart width on Explore page (#6104)
273991f is described below

commit 273991fd4e591bcfa448ead989c602485dfb9c53
Author: Krist Wongsuphasawat <krist.wongz@gmail.com>
AuthorDate: Tue Oct 16 22:18:35 2018 -0700

    Use @vx/responsive to provide Chart width on Explore page (#6104)
    
    * use parent size to compute width
    
    * simplify this.width() and this.height()
    
    * remove unnecessary jquery
    
    * fix indent and import
    
    * adjust headerheight from 100 to 80
    
    * fix test
---
 .../dashboard/components/DashboardBuilder_spec.jsx |  2 +-
 superset/assets/src/chart/Chart.jsx                |  8 +--
 .../dashboard/components/BuilderComponentPane.jsx  |  2 +-
 .../src/dashboard/components/DashboardBuilder.jsx  |  2 +-
 .../src/explore/components/ExploreChartPanel.jsx   | 74 ++++++++++++----------
 5 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/superset/assets/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
b/superset/assets/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
index 06d508e..b099f45 100644
--- a/superset/assets/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
+++ b/superset/assets/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 
-import ParentSize from '@vx/responsive/build/components/ParentSize';
+import { ParentSize } from '@vx/responsive';
 import { Sticky, StickyContainer } from 'react-sticky';
 import { TabContainer, TabContent, TabPane } from 'react-bootstrap';
 
diff --git a/superset/assets/src/chart/Chart.jsx b/superset/assets/src/chart/Chart.jsx
index 4944030..1431c55 100644
--- a/superset/assets/src/chart/Chart.jsx
+++ b/superset/assets/src/chart/Chart.jsx
@@ -150,9 +150,7 @@ class Chart extends React.PureComponent {
   }
 
   width() {
-    return (
-      this.props.width || (this.container && this.container.el && this.container.el.offsetWidth)
-    );
+    return this.props.width;
   }
 
   headerHeight() {
@@ -160,9 +158,7 @@ class Chart extends React.PureComponent {
   }
 
   height() {
-    return (
-      this.props.height || (this.container && this.container.el && this.container.el.offsetHeight)
-    );
+    return this.props.height;
   }
 
   error(e) {
diff --git a/superset/assets/src/dashboard/components/BuilderComponentPane.jsx b/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
index dd634c0..4bfb2bb 100644
--- a/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
+++ b/superset/assets/src/dashboard/components/BuilderComponentPane.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { StickyContainer, Sticky } from 'react-sticky';
-import ParentSize from '@vx/responsive/build/components/ParentSize';
+import { ParentSize } from '@vx/responsive';
 
 import NewColumn from './gridComponents/new/NewColumn';
 import NewDivider from './gridComponents/new/NewDivider';
diff --git a/superset/assets/src/dashboard/components/DashboardBuilder.jsx b/superset/assets/src/dashboard/components/DashboardBuilder.jsx
index ecb528d..73b6891 100644
--- a/superset/assets/src/dashboard/components/DashboardBuilder.jsx
+++ b/superset/assets/src/dashboard/components/DashboardBuilder.jsx
@@ -2,7 +2,7 @@
 import cx from 'classnames';
 // ParentSize uses resize observer so the dashboard will update size
 // when its container size changes, due to e.g., builder side panel opening
-import ParentSize from '@vx/responsive/build/components/ParentSize';
+import { ParentSize } from '@vx/responsive';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Sticky, StickyContainer } from 'react-sticky';
diff --git a/superset/assets/src/explore/components/ExploreChartPanel.jsx b/superset/assets/src/explore/components/ExploreChartPanel.jsx
index 9d30284..16fe4d4 100644
--- a/superset/assets/src/explore/components/ExploreChartPanel.jsx
+++ b/superset/assets/src/explore/components/ExploreChartPanel.jsx
@@ -1,8 +1,7 @@
-import $ from 'jquery';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Panel } from 'react-bootstrap';
-
+import { ParentSize } from '@vx/responsive';
 import { chartPropShape } from '../../dashboard/util/propShapes';
 import ChartContainer from '../../chart/ChartContainer';
 import ExploreChartHeader from './ExploreChartHeader';
@@ -32,46 +31,52 @@ const propTypes = {
 };
 
 class ExploreChartPanel extends React.PureComponent {
-  getHeight() {
-    const headerHeight = this.props.standalone ? 0 : 100;
-    return parseInt(this.props.height, 10) - headerHeight;
-  }
-
   renderChart() {
     const { chart } = this.props;
+    const headerHeight = this.props.standalone ? 0 : 80;
+
     return (
-      <ChartContainer
-        chartId={chart.id}
-        containerId={this.props.containerId}
-        datasource={this.props.datasource}
-        formData={this.props.form_data}
-        height={this.getHeight()}
-        slice={this.props.slice}
-        setControlValue={this.props.actions.setControlValue}
-        timeout={this.props.timeout}
-        vizType={this.props.vizType}
-        refreshOverlayVisible={this.props.refreshOverlayVisible}
-        errorMessage={this.props.errorMessage}
-        onQuery={this.props.onQuery}
-        onDismissRefreshOverlay={this.props.onDismissRefreshOverlay}
-        annotationData={chart.annotationData}
-        chartAlert={chart.chartAlert}
-        chartStatus={chart.chartStatus}
-        chartUpdateEndTime={chart.chartUpdateEndTime}
-        chartUpdateStartTime={chart.chartUpdateStartTime}
-        latestQueryFormData={chart.latestQueryFormData}
-        lastRendered={chart.lastRendered}
-        queryResponse={chart.queryResponse}
-        queryController={chart.queryController}
-        triggerQuery={chart.triggerQuery}
-      />
+      <ParentSize>
+        {({ width, height }) => (width > 0 && height > 0) && (
+          <ChartContainer
+            chartId={chart.id}
+            containerId={this.props.containerId}
+            datasource={this.props.datasource}
+            formData={this.props.form_data}
+            width={Math.floor(width)}
+            height={parseInt(this.props.height, 10) - headerHeight}
+            slice={this.props.slice}
+            setControlValue={this.props.actions.setControlValue}
+            timeout={this.props.timeout}
+            vizType={this.props.vizType}
+            refreshOverlayVisible={this.props.refreshOverlayVisible}
+            errorMessage={this.props.errorMessage}
+            onQuery={this.props.onQuery}
+            onDismissRefreshOverlay={this.props.onDismissRefreshOverlay}
+            annotationData={chart.annotationData}
+            chartAlert={chart.chartAlert}
+            chartStatus={chart.chartStatus}
+            chartUpdateEndTime={chart.chartUpdateEndTime}
+            chartUpdateStartTime={chart.chartUpdateStartTime}
+            latestQueryFormData={chart.latestQueryFormData}
+            lastRendered={chart.lastRendered}
+            queryResponse={chart.queryResponse}
+            queryController={chart.queryController}
+            triggerQuery={chart.triggerQuery}
+          />
+        )}
+      </ParentSize>
     );
   }
 
   render() {
     if (this.props.standalone) {
       // dom manipulation hack to get rid of the boostrap theme's body background
-      $('body').addClass('background-transparent');
+      const standaloneClass = 'background-transparent';
+      const bodyClasses = document.body.className.split(' ');
+      if (bodyClasses.indexOf(standaloneClass) === -1) {
+        document.body.className += ` ${standaloneClass}`;
+      }
       return this.renderChart();
     }
 
@@ -87,7 +92,8 @@ class ExploreChartPanel extends React.PureComponent {
         form_data={this.props.form_data}
         timeout={this.props.timeout}
         chart={this.props.chart}
-      />);
+      />
+    );
     return (
       <div className="chart-container">
         <Panel


Mime
View raw message