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 <[email protected]>
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
