diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js index a0a8fb95a..edbd1c75f 100644 --- a/src/components/Item/VisualizationItem/Item.js +++ b/src/components/Item/VisualizationItem/Item.js @@ -21,10 +21,7 @@ import { } from '../../../reducers/itemFilters' import { acAddVisualization } from '../../../actions/visualizations' import { acSetSelectedItemActiveType } from '../../../actions/selected' -import { - pluginIsAvailable, - resize as pluginResize, -} from './Visualization/plugin' +import { pluginIsAvailable } from './Visualization/plugin' import { getDataStatisticsName } from '../../../modules/itemTypes' import { getVisualizationId, getVisualizationName } from '../../../modules/item' import memoizeOne from '../../../modules/memoizeOne' @@ -34,7 +31,6 @@ import { isViewMode, } from '../../Dashboard/dashboardModes' import { getItemHeightPx } from '../../../modules/gridUtil' -import getGridItemDomId from '../../../modules/getGridItemDomId' export class Item extends Component { state = { @@ -121,50 +117,17 @@ export class Item extends Component { } } - componentDidUpdate(prevProps) { - if (prevProps.gridWidth !== this.props.gridWidth) { - const el = document.querySelector( - `#${getGridItemDomId(this.props.item.id)}` - ) - if (typeof el?.setViewportSize === 'function') { - setTimeout( - () => - el.setViewportSize( - el.clientWidth - 5, - el.clientHeight - 5 - ), - 10 - ) - } - // call resize on Map item - pluginResize( - this.props.item.id, - this.getActiveType(), - this.state.isFullscreen - ) - } - } - isFullscreenSupported = () => { const el = document.querySelector(this.itemDomElSelector) return !!(el?.requestFullscreen || el?.webkitRequestFullscreen) } - handleFullscreenChange = () => { - this.setState( - { - isFullscreen: - !!document.fullscreenElement || - !!document.webkitFullscreenElement, - }, - () => - pluginResize( - this.props.item.id, - this.getActiveType(), - this.state.isFullscreen - ) - ) - } + handleFullscreenChange = () => + this.setState({ + isFullscreen: + !!document.fullscreenElement || + !!document.webkitFullscreenElement, + }) onToggleFullscreen = () => { if (!this.state.isFullscreen) { @@ -230,6 +193,7 @@ export class Item extends Component { const rect = document .querySelector(this.itemDomElSelector) ?.getBoundingClientRect() + return rect && rect.width - this.itemContentPadding * 2 } @@ -289,6 +253,8 @@ export class Item extends Component { dimensions )} availableWidth={this.getAvailableWidth()} + isFullscreen={this.state.isFullscreen} + gridWidth={this.props.gridWidth} /> )} diff --git a/src/components/Item/VisualizationItem/Visualization/LegacyPlugin.js b/src/components/Item/VisualizationItem/Visualization/LegacyPlugin.js new file mode 100644 index 000000000..be762072e --- /dev/null +++ b/src/components/Item/VisualizationItem/Visualization/LegacyPlugin.js @@ -0,0 +1,36 @@ +import React, { useEffect } from 'react' +import PropTypes from 'prop-types' +import DefaultPlugin from './DefaultPlugin' +import getGridItemDomId from '../../../../modules/getGridItemDomId' + +const LegacyPlugin = ({ + isFullscreen, + availableHeight, + availableWidth, + gridWidth, + ...props +}) => { + useEffect(() => { + const el = document.querySelector(`#${getGridItemDomId(props.item.id)}`) + if (typeof el?.setViewportSize === 'function') { + setTimeout( + () => + el.setViewportSize(el.clientWidth - 5, el.clientHeight - 5), + 10 + ) + } + }, [availableHeight, availableWidth, isFullscreen, gridWidth]) + + return +} + +LegacyPlugin.propTypes = { + activeType: PropTypes.string, + availableHeight: PropTypes.number, + availableWidth: PropTypes.number, + gridWidth: PropTypes.number, + isFullscreen: PropTypes.bool, + item: PropTypes.object, +} + +export default LegacyPlugin diff --git a/src/components/Item/VisualizationItem/Visualization/MapPlugin.js b/src/components/Item/VisualizationItem/Visualization/MapPlugin.js index 563a379c8..57179b349 100644 --- a/src/components/Item/VisualizationItem/Visualization/MapPlugin.js +++ b/src/components/Item/VisualizationItem/Visualization/MapPlugin.js @@ -1,12 +1,23 @@ -import React from 'react' +import React, { useEffect } from 'react' import PropTypes from 'prop-types' import i18n from '@dhis2/d2-i18n' import DefaultPlugin from './DefaultPlugin' import { MAP } from '../../../../modules/itemTypes' -import { pluginIsAvailable } from './plugin' +import { pluginIsAvailable, resize } from './plugin' import NoVisualizationMessage from './NoVisualizationMessage' -const MapPlugin = ({ applyFilters, ...props }) => { +const MapPlugin = ({ + applyFilters, + isFullscreen, + availableHeight, + availableWidth, + gridWidth, + ...props +}) => { + useEffect(() => { + resize(props.item.id, MAP, isFullscreen) + }, [availableHeight, availableWidth, isFullscreen, gridWidth]) + if (props.item.type === MAP) { // apply filters only to thematic and event layers // for maps AO @@ -35,7 +46,7 @@ const MapPlugin = ({ applyFilters, ...props }) => { ) } - return pluginIsAvailable(props.activeType || props.item.type) ? ( + return pluginIsAvailable(MAP) ? ( { } MapPlugin.propTypes = { - activeType: PropTypes.string, applyFilters: PropTypes.func, + availableHeight: PropTypes.number, + availableWidth: PropTypes.number, + gridWidth: PropTypes.number, + isFullscreen: PropTypes.bool, item: PropTypes.object, itemFilters: PropTypes.object, visualization: PropTypes.object, diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js index af8edda49..d15360f31 100644 --- a/src/components/Item/VisualizationItem/Visualization/Visualization.js +++ b/src/components/Item/VisualizationItem/Visualization/Visualization.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import i18n from '@dhis2/d2-i18n' -import DefaultPlugin from './DefaultPlugin' +import LegacyPlugin from './LegacyPlugin' import MapPlugin from './MapPlugin' import DataVisualizerPlugin from './DataVisualizerPlugin' import NoVisualizationMessage from './NoVisualizationMessage' @@ -37,8 +37,7 @@ class Visualization extends React.Component { activeType, item, itemFilters, - availableHeight, - availableWidth, + ...rest } = this.props if (!visualization) { @@ -49,9 +48,9 @@ class Visualization extends React.Component { ) } - const style = { height: availableHeight } - if (availableWidth) { - style.width = availableWidth + const style = { height: this.props.availableHeight } + if (this.props.availableWidth) { + style.width = this.props.availableWidth } const pluginProps = { @@ -64,6 +63,7 @@ class Visualization extends React.Component { item.type, activeType ), + ...rest, } switch (activeType) { @@ -97,7 +97,7 @@ class Visualization extends React.Component { return pluginIsAvailable( pluginProps.activeType || pluginProps.item.type ) ? ( - + ) : ( { } const pluginName = itemTypeToGlobalVariable[type] - return global[pluginName] + return await global[pluginName] } const fetchPlugin = async (type, baseUrl) => { @@ -59,6 +59,7 @@ const fetchPlugin = async (type, baseUrl) => { const scriptsPromise = Promise.all(scripts.map(loadExternalScript)).then( () => global[globalName] // At this point, has been replaced with the real thing ) + global[globalName] = scriptsPromise return await scriptsPromise } @@ -66,7 +67,7 @@ const fetchPlugin = async (type, baseUrl) => { export const pluginIsAvailable = type => hasIntegratedPlugin(type) || itemTypeToGlobalVariable[type] -export const loadPlugin = async (type, config, credentials) => { +const loadPlugin = async (type, config, credentials) => { if (!pluginIsAvailable(type)) { return } @@ -107,16 +108,15 @@ export const load = async ( await loadPlugin(type, config, credentials) } -export const resize = (id, type, isFullscreen = false) => { - const plugin = getPlugin(type) - +export const resize = async (id, type, isFullscreen = false) => { + const plugin = await getPlugin(type) if (plugin?.resize) { plugin.resize(getGridItemDomId(id), isFullscreen) } } -export const unmount = (item, activeType) => { - const plugin = getPlugin(activeType) +export const unmount = async (item, activeType) => { + const plugin = await getPlugin(activeType) if (plugin && plugin.unmount) { plugin.unmount(getGridItemDomId(item.id))