diff --git a/packages/plugin/src/api/legendSets.js b/packages/plugin/src/api/legendSets.js new file mode 100644 index 0000000000..c93a5a81b8 --- /dev/null +++ b/packages/plugin/src/api/legendSets.js @@ -0,0 +1,9 @@ +const legendSetQuery = { + legendSet: { + resource: 'legendSets', + id: ({ id }) => id, + }, +} + +export const apiFetchLegendSet = (dataEngine, id) => + dataEngine.query(legendSetQuery, { variables: { id } }) diff --git a/packages/plugin/src/index.js b/packages/plugin/src/index.js index 5806c85430..648ca0bcdf 100644 --- a/packages/plugin/src/index.js +++ b/packages/plugin/src/index.js @@ -1,17 +1,51 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import { VIS_TYPE_PIVOT_TABLE } from '@dhis2/analytics' +import { useDataEngine } from '@dhis2/app-runtime' +import { apiFetchLegendSet } from './api/legendSets' import ChartPlugin from './ChartPlugin' import PivotPlugin from './PivotPlugin' const VisualizationPlugin = props => { + const engine = useDataEngine() + const [legendSet, setLegendSet] = useState(null) + + const hasLegendSet = + props.visualization.legendSet && props.visualization.legendSet.id + + useEffect(() => { + const fetchLegendSet = async engine => { + if ( + props.visualization.legendSet && + props.visualization.legendSet.id + ) { + const response = await apiFetchLegendSet( + engine, + props.visualization.legendSet.id + ) + + if (response && response.legendSet) { + setLegendSet(response.legendSet) + } + } + } + + fetchLegendSet(engine) + }, [engine, props.visualization.legendSet]) + + if (hasLegendSet && !legendSet) { + // Until one of the children is rendered and calls onLoadingComplete, + // the app will continue to render the loading spinner + return null + } + if ( !props.visualization.type || props.visualization.type === VIS_TYPE_PIVOT_TABLE ) { - return + return } else { - return + return } }