Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: inject style in props passed to VisualizationPlugin (DHIS2-15126) #2322

Merged
merged 9 commits into from
Jun 26, 2023
Merged

fix: inject style in props passed to VisualizationPlugin (DHIS2-15126) #2322

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
44158cd
fix: inject style in props passed to VisualizationPlugin
edoardo May 25, 2023
fafdb7f
refactor: move the size logic from the plugin wrapper
edoardo May 26, 2023
983c2cb
fix: observe size changes for legend positioning
edoardo May 30, 2023
388b5b9
refactor: rename const for clarity
edoardo May 31, 2023
389adc7
Merge branch 'dev' into fix/legend-positioning-in-dashboard
janhenrikoverland Jun 9, 2023
051f1c2
Merge branch 'dev' into fix/legend-positioning-in-dashboard
janhenrikoverland Jun 9, 2023
ab8093b
Merge branch 'dev' into fix/legend-positioning-in-dashboard
edoardo Jun 12, 2023
7c1ddac
Merge branch 'dev' into fix/legend-positioning-in-dashboard
edoardo Jun 19, 2023
5e045a3
Merge branch 'dev' into fix/legend-positioning-in-dashboard
martinkrulltott Jun 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions src/components/VisualizationPlugin/VisualizationPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,26 @@ export const VisualizationPlugin = ({
const [contextualMenuConfig, setContextualMenuConfig] = useState({})
const [showLegendKey, setShowLegendKey] = useState(false)
const [renderId, setRenderId] = useState(id)
const [size, setSize] = useState({ width: 0, height: 0 })

const containerCallbackRef = useCallback((node) => {
if (node === null) {
return
}

const adjustSize = () =>
setSize({
width: node.clientWidth,
height: node.clientHeight,
})

const sizeObserver = new window.ResizeObserver(adjustSize)
sizeObserver.observe(node)

adjustSize()

return sizeObserver.disconnect
}, [])

useEffect(() => setRenderId(id), [id])

Expand Down Expand Up @@ -283,7 +303,7 @@ export const VisualizationPlugin = ({
forDashboard && hasLegendSet
? {
...style,
width: style.width - (showLegendKey ? 200 : 36),
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
}
Expand All @@ -292,7 +312,7 @@ export const VisualizationPlugin = ({
// force 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
if (!transformedStyle.height) {
transformedStyle.height = '100%'
transformedStyle.height = size.height || '100%'
}

const getLegendKey = () => {
Expand Down Expand Up @@ -343,7 +363,7 @@ export const VisualizationPlugin = ({
}

return (
<div className={styles.container}>
<div className={styles.container} ref={containerCallbackRef}>
<div className={styles.chartWrapper}>
{!fetchResult.visualization.type ||
fetchResult.visualization.type === VIS_TYPE_PIVOT_TABLE ? (
Expand Down