diff --git a/superset/assets/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx b/superset/assets/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx index 06d508e2b34..b099f454e2a 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 4944030a572..1431c55abf7 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 dd634c0a05b..4bfb2bb1837 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 ecb528dc893..73b689132be 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 9d30284ebe9..16fe4d489ed 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 ( - + + {({ width, height }) => (width > 0 && height > 0) && ( + + )} + ); } 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 (