diff --git a/package.json b/package.json index 0c8862f850..36a9374981 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "typescript": "^4.8.4" }, "dependencies": { - "@dhis2/analytics": "^26.6.0", + "@dhis2/analytics": "^26.6.5", "@dhis2/app-runtime": "^3.7.0", "@dhis2/app-runtime-adapter-d2": "^1.1.0", "@dhis2/app-service-datastore": "^1.0.0-beta.3", diff --git a/src/components/InterpretationModal/InterpretationModal.js b/src/components/InterpretationModal/InterpretationModal.js index 8a60ca4965..89333fc0f2 100644 --- a/src/components/InterpretationModal/InterpretationModal.js +++ b/src/components/InterpretationModal/InterpretationModal.js @@ -1,6 +1,6 @@ import { InterpretationModal as AnalyticsInterpretationModal } from '@dhis2/analytics' import PropTypes from 'prop-types' -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, useCallback } from 'react' import { useSelector } from 'react-redux' import { sGetCurrent } from '../../reducers/current.js' import { ModalDownloadDropdown } from '../DownloadMenu/index.js' @@ -19,6 +19,10 @@ const InterpretationModal = ({ onInterpretationUpdate }, context) => { setIsVisualizationLoading(!!interpretationId) }, [interpretationId]) + const onResponsesReceived = useCallback(() => { + setIsVisualizationLoading(false) + }, []) + return interpretationId ? ( { interpretationId={interpretationId} isVisualizationLoading={isVisualizationLoading} onClose={removeInterpretationQueryParams} - onResponsesReceived={() => setIsVisualizationLoading(false)} + onResponsesReceived={onResponsesReceived} visualization={visualization} downloadMenuComponent={ModalDownloadDropdown} pluginComponent={VisualizationPluginWrapper} diff --git a/src/components/VisualizationPlugin/VisualizationPlugin.js b/src/components/VisualizationPlugin/VisualizationPlugin.js index 0ae9c965fa..eded3ef3bc 100644 --- a/src/components/VisualizationPlugin/VisualizationPlugin.js +++ b/src/components/VisualizationPlugin/VisualizationPlugin.js @@ -33,6 +33,7 @@ export const VisualizationPlugin = ({ filters, forDashboard, id, + isInModal, style, onChartGenerated, onError, @@ -324,15 +325,22 @@ export const VisualizationPlugin = ({ const hasLegendSet = legendSets?.length > 0 && isLegendSetType(fetchResult.visualization.type) - const transformedStyle = - forDashboard && hasLegendSet - ? { - ...style, - width: style.width || size.width - (showLegendKey ? 200 : 36), - // 200: width of legend key component with margin and scrollbar - // 36: width of the toggle button with margin - } - : style + + let transformedStyle = style + if (forDashboard && hasLegendSet) { + transformedStyle = { + ...style, + width: style.width || size.width - (showLegendKey ? 200 : 36), + // 200: width of legend key component with margin and scrollbar + // 36: width of the toggle button with margin + } + } else if (isInModal) { + transformedStyle = { + ...style, + width: style.width || size.width, + height: style.height || size.height, + } + } // force wdth and height when no value available otherwise the PivotTable container sets 0 as height hiding the table content // and Highcharts does not render correctly the chart/legend @@ -447,7 +455,12 @@ export const VisualizationPlugin = ({ } return ( -
+
{renderPlugin()}
{getLegendKey()} {contextualMenuRect && ( @@ -486,6 +499,7 @@ VisualizationPlugin.propTypes = { filters: PropTypes.object, forDashboard: PropTypes.bool, id: PropTypes.number, + isInModal: PropTypes.bool, style: PropTypes.object, onChartGenerated: PropTypes.func, onDataSorted: PropTypes.func, diff --git a/src/components/VisualizationPlugin/VisualizationPluginWrapper.js b/src/components/VisualizationPlugin/VisualizationPluginWrapper.js index 7fd8e6edc9..3d4a1d10e4 100644 --- a/src/components/VisualizationPlugin/VisualizationPluginWrapper.js +++ b/src/components/VisualizationPlugin/VisualizationPluginWrapper.js @@ -1,4 +1,5 @@ import { CenteredContent, CircularLoader, ComponentCover } from '@dhis2/ui' +import PropTypes from 'prop-types' import React, { useCallback, useEffect, useState } from 'react' import { VisualizationPlugin } from '../VisualizationPlugin/VisualizationPlugin.js' @@ -27,10 +28,39 @@ const VisualizationPluginWrapper = (props) => { [pluginProps] ) + useEffect(() => { + setPluginProps({ + displayProperty: props.displayProperty, + visualization: props.visualization, + filters: props.filters, + forDashboard: props.forDashboard, + id: props.id, + isInModal: props.isInModal, + style: props.style, + onChartGenerated: props.onChartGenerated, + onDrill: props.onDrill, + onError: props.onError, + onResponsesReceived: props.onResponsesReceived, + }) + }, [ + props.displayProperty, + props.visualization, + props.filters, + props.forDashboard, + props.id, + props.isInModal, + props.style, + props.onChartGenerated, + props.onDrill, + props.onError, + props.onResponsesReceived, + ]) + + // set loading state only for props that will cause + // VisualizationPlugin to fetch and call onLoadingComplete useEffect(() => { setIsLoading(true) - setPluginProps(props) - }, [props]) + }, [props.filters, props.forDashboard, props.visualization]) const onLoadingComplete = () => setIsLoading(false) @@ -52,4 +82,19 @@ const VisualizationPluginWrapper = (props) => { ) } +VisualizationPluginWrapper.propTypes = { + displayProperty: PropTypes.string.isRequired, + visualization: PropTypes.object.isRequired, + className: PropTypes.string, + filters: PropTypes.object, + forDashboard: PropTypes.bool, + id: PropTypes.number, + isInModal: PropTypes.bool, + style: PropTypes.object, + onChartGenerated: PropTypes.func, + onDrill: PropTypes.func, + onError: PropTypes.func, + onResponsesReceived: PropTypes.func, +} + export { VisualizationPluginWrapper } diff --git a/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css b/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css index f03812c0e5..2172b39e06 100644 --- a/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css +++ b/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css @@ -4,6 +4,9 @@ height: 100%; display: flex; } +.modal { + max-height: calc(-285px + 100vh); +} .chartWrapper { display: flex; diff --git a/yarn.lock b/yarn.lock index e82cc23cd9..0cc8819006 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2028,10 +2028,10 @@ classnames "^2.3.1" prop-types "^15.7.2" -"@dhis2/analytics@^26.6.0": - version "26.6.0" - resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.6.0.tgz#1d70463fca8a4d5f5838928e9ab6c5c07873715f" - integrity sha512-fO8ozVfnTulXQptPcT3W/y+Ru6sN/Qjhr6dWHL4LsG2siL1v8QOWKcnM/yScClJtRZvsbEnQ6vX47c7ujRsGUA== +"@dhis2/analytics@^26.6.5": + version "26.6.5" + resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.6.5.tgz#44ee29a279c37f3969096d859bc0f07d953e3f42" + integrity sha512-ob6kNEEkIAC50RtKuUZWi8Y04uwsPHK/EiYhzxZkSOdS5wFm8X+88KZrD//fILXQjwMhJvl/4+F/T0qVxOF/jQ== dependencies: "@dhis2/d2-ui-rich-text" "^7.4.1" "@dhis2/multi-calendar-dates" "1.0.0"