mirror of https://github.com/apache/superset.git
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>
This commit is contained in:
parent
df71fac1e0
commit
d8314eeb0d
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
||||
{/*
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue