Add maximize and minimize feature to charts (#9210)

* Add maximize and minimize feature to charts

* Fixed lint issues

* Update superset-frontend/src/dashboard/components/SliceHeaderControls.jsx

Add translation function

Co-Authored-By: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

* Remove resizeEvent property, change condition to use the nextProps

* Minor changes, improve source code

* Fixed lint issues

* Remove unnecessary resizeEvent props

* Move inline style to css class style

* Minor fixes, improvements css

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

superset-frontend/src/dashboard/components/SliceHeader.jsx

@@ -47,6 +47,7 @@ const propTypes = {
   dashboardId: PropTypes.number.isRequired,
   filters: PropTypes.object.isRequired,
   addDangerToast: PropTypes.func.isRequired,
+  handleToggleFullSize: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -97,6 +98,8 @@ class SliceHeader extends React.PureComponent {
       componentId,
       dashboardId,
       addDangerToast,
+      handleToggleFullSize,
+      isFullSize,
     } = this.props;
 
     return (
@@ -149,6 +152,8 @@ class SliceHeader extends React.PureComponent {
               componentId={componentId}
               dashboardId={dashboardId}
               addDangerToast={addDangerToast}
+              handleToggleFullSize={handleToggleFullSize}
+              isFullSize={isFullSize}
             />
           )}
         </div>

superset-frontend/src/dashboard/components/SliceHeaderControls.jsx

@@ -78,6 +78,8 @@ class SliceHeaderControls extends React.PureComponent {
       this.props.slice.slice_id,
     );
 
+    this.handleToggleFullSize = this.handleToggleFullSize.bind(this);
+
     this.state = {
       showControls: false,
     };
@@ -106,6 +108,10 @@ class SliceHeaderControls extends React.PureComponent {
     });
   }
 
+  handleToggleFullSize() {
+    this.props.handleToggleFullSize();
+  }
+
   render() {
     const {
       slice,
@@ -114,12 +120,14 @@ class SliceHeaderControls extends React.PureComponent {
       updatedDttm,
       componentId,
       addDangerToast,
+      isFullSize,
     } = this.props;
     const cachedWhen = moment.utc(cachedDttm).fromNow();
     const updatedWhen = updatedDttm ? moment.utc(updatedDttm).fromNow() : '';
     const refreshTooltip = isCached
       ? t('Cached %s', cachedWhen)
       : (updatedWhen && t('Fetched %s', updatedWhen)) || '';
+    const resizeLabel = isFullSize ? t('Minimize') : t('Maximize');
 
     return (
       <Dropdown
@@ -166,6 +174,8 @@ class SliceHeaderControls extends React.PureComponent {
             </MenuItem>
           )}
 
+          <MenuItem onClick={this.handleToggleFullSize}>{resizeLabel}</MenuItem>
+
           <URLShortLinkModal
             url={getDashboardUrl(
               window.location.pathname,

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -41,6 +41,7 @@ const propTypes = {
   height: PropTypes.number.isRequired,
   updateSliceName: PropTypes.func.isRequired,
   isComponentVisible: PropTypes.bool,
+  handleToggleFullSize: PropTypes.func.isRequired,
 
   // from redux
   chart: chartPropShape.isRequired,
@@ -117,6 +118,12 @@ class Chart extends React.Component {
         return true;
       }
 
+      if (nextProps.isFullSize !== this.props.isFullSize) {
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(this.resize, RESIZE_TIMEOUT);
+        return false;
+      }
+
       for (let i = 0; i < SHOULD_UPDATE_ON_PROP_CHANGES.length; i += 1) {
         const prop = SHOULD_UPDATE_ON_PROP_CHANGES[i];
         if (nextProps[prop] !== this.props[prop]) {
@@ -238,6 +245,8 @@ class Chart extends React.Component {
       supersetCanCSV,
       sliceCanEdit,
       addDangerToast,
+      handleToggleFullSize,
+      isFullSize,
     } = this.props;
 
     const { width } = this.state;
@@ -283,6 +292,8 @@ class Chart extends React.Component {
           dashboardId={dashboardId}
           filters={filters}
           addDangerToast={addDangerToast}
+          handleToggleFullSize={handleToggleFullSize}
+          isFullSize={isFullSize}
         />
 
         {/*

superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx

@@ -108,11 +108,13 @@ class ChartHolder extends React.Component {
       outlinedComponentId: null,
       outlinedColumnName: null,
       directPathLastUpdated: 0,
+      isFullSize: false,
     };
 
     this.handleChangeFocus = this.handleChangeFocus.bind(this);
     this.handleDeleteComponent = this.handleDeleteComponent.bind(this);
     this.handleUpdateSliceName = this.handleUpdateSliceName.bind(this);
+    this.handleToggleFullSize = this.handleToggleFullSize.bind(this);
   }
 
   componentDidMount() {
@@ -160,9 +162,12 @@ class ChartHolder extends React.Component {
     });
   }
 
+  handleToggleFullSize() {
+    this.setState(() => ({ isFullSize: !this.state.isFullSize }));
+  }
+
   render() {
     const { isFocused } = this.state;
-
     const {
       component,
       parentComponent,
@@ -185,6 +190,23 @@ class ChartHolder extends React.Component {
         ? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
         : component.meta.width || GRID_MIN_COLUMN_COUNT;
 
+    let chartWidth = 0;
+    let chartHeight = 0;
+
+    if (this.state.isFullSize) {
+      chartWidth = document.body.clientWidth - CHART_MARGIN;
+      chartHeight = document.body.clientHeight - CHART_MARGIN;
+    } else {
+      chartWidth = Math.floor(
+        widthMultiple * columnWidth +
+          (widthMultiple - 1) * GRID_GUTTER_SIZE -
+          CHART_MARGIN,
+      );
+      chartHeight = Math.floor(
+        component.meta.height * GRID_BASE_UNIT - CHART_MARGIN,
+      );
+    }
+
     return (
       <DragDroppable
         component={component}
@@ -217,7 +239,7 @@ class ChartHolder extends React.Component {
               ref={dragSourceRef}
               className={`dashboard-component dashboard-component-chart-holder ${
                 this.state.outlinedComponentId ? 'fade-in' : 'fade-out'
-              }`}
+              } ${this.state.isFullSize ? 'full-size' : ''}`}
             >
               {!editMode && (
                 <AnchorLink
@@ -231,17 +253,13 @@ class ChartHolder extends React.Component {
                 componentId={component.id}
                 id={component.meta.chartId}
                 dashboardId={dashboardId}
-                width={Math.floor(
-                  widthMultiple * columnWidth +
-                    (widthMultiple - 1) * GRID_GUTTER_SIZE -
-                    CHART_MARGIN,
-                )}
-                height={Math.floor(
-                  component.meta.height * GRID_BASE_UNIT - CHART_MARGIN,
-                )}
+                width={chartWidth}
+                height={chartHeight}
                 sliceName={component.meta.sliceName || ''}
                 updateSliceName={this.handleUpdateSliceName}
                 isComponentVisible={isComponentVisible}
+                handleToggleFullSize={this.handleToggleFullSize}
+                isFullSize={this.state.isFullSize}
               />
               {!editMode && (
                 <FilterIndicators chartId={component.meta.chartId} />

superset-frontend/src/dashboard/stylesheets/components/chart.less

@@ -148,3 +148,10 @@
 .time-filter-tabs > .nav-tabs > li > a {
   padding: 4px;
 }
+
+.full-size {
+  position: fixed;
+  z-index: @z-index-max;
+  left: 0;
+  top: 0;
+}