feat: enable dashboard plugin [DHIS2-21962]

d2.config.js

@@ -1,10 +1,10 @@
 /** @type {import('@dhis2/cli-app-scripts').D2Config} */
 const config = {
     type: 'app',
-    name: 'event-visualizer',
+    name: 'individual-data-visualizer',
     // id: TBD,
-    title: 'Event Visualizer',
-    coreApp: true,
+    title: 'Individual Data Visualizer',
+    coreApp: false,
     minDHIS2Version: '2.43',
     direction: 'auto',
     pwa: {

package.json

@@ -1,7 +1,7 @@
 {
-    "name": "event-visualizer-app",
-    "version": "0.0.1",
-    "description": "Event visualizer app and plugin",
+    "name": "individual-data-visualizer-app",
+    "version": "101.0.0",
+    "description": "Individual data visualizer app and plugin",
     "license": "BSD-3-Clause",
     "private": true,
     "scripts": {

src/dashboard-plugin.tsx

@@ -17,24 +17,16 @@ import {
 } from '@modules/visualization/state'
 import type {
     ApiSavedVisualization,
-    CurrentUser,
     CurrentVisualization,
+    DashboardPluginProps,
     EmptyVisualization,
-    PluginFilters,
-    SavedVisualization,
 } from '@types'
 import { useEffect, useMemo, type FC } from 'react'
 import './locales/index.js'
 
-type DashboardPluginProps = {
-    displayProperty: CurrentUser['settings']['displayProperty']
-    visualization: SavedVisualization
-    filters?: PluginFilters
-}
-
 const DashboardPluginContent: FC<DashboardPluginProps> = (props) => {
     logger.debug('DashboardPlugin props', props)
-    logger.debug('vis id', props.visualization.id)
+    logger.debug('vis id', props.visualizationId)
 
     const metadataStore = useMetadataStore()
 
@@ -43,7 +35,7 @@ const DashboardPluginContent: FC<DashboardPluginProps> = (props) => {
     const { data, error, loading, refetch } = useDataQuery({
         eventVisualization: {
             resource: 'eventVisualizations',
-            id: props.visualization.id, // TODO: this should be just passed as visualizationId
+            id: props.visualizationId,
             params: {
                 fields: getVisualizationQueryFields(
                     // derive displayNameProperty from displayProperty

src/plugin-host/plugin-host-app.tsx

@@ -1,19 +1,16 @@
 import { Plugin as UntypedPlugin } from '@dhis2/app-runtime/experimental'
-import type { PluginFilters } from '@types'
+import type { DashboardPluginProps, PluginFilters } from '@types'
 import { useState, type FC } from 'react'
 
 /* Plugin types only its own layout props and forwards the rest as `any`, so
  * re-type it for the props this host sends. */
-type HostPluginProps = {
+type HostPluginProps = DashboardPluginProps & {
     pluginSource: string
     /* Without a fixed height a PivotTable renders 0×0; a dashboard cell gives one. */
     height: number
-    visualization: { id: string }
-    displayProperty: string
     forDashboard: boolean
     isVisualizationLoaded: boolean
     cacheId: string
-    filters?: PluginFilters
 }
 
 const Plugin: FC<HostPluginProps> = UntypedPlugin
@@ -84,7 +81,7 @@ export const PluginHostApp: FC = () => {
                         key={trimmedVisualizationId}
                         pluginSource="/plugin.html"
                         height={400}
-                        visualization={{ id: trimmedVisualizationId }}
+                        visualizationId={trimmedVisualizationId}
                         displayProperty="name"
                         forDashboard
                         isVisualizationLoaded

src/types/dashboard-plugin.ts

@@ -0,0 +1,7 @@
+import type { CurrentUser, PluginFilters, SavedVisualization } from '@types'
+
+export type DashboardPluginProps = {
+    displayProperty: CurrentUser['settings']['displayProperty']
+    visualizationId: SavedVisualization['id']
+    filters?: PluginFilters
+}

src/types/index.ts

@@ -53,6 +53,7 @@ export type AppCachedData = TransformedAppCachedData
 export type CurrentUser = TransformedAppCachedData['currentUser']
 
 export type * from './axis'
+export type * from './dashboard-plugin'
 export type * from './data-source'
 export type * from './dimension'
 export type * from './layout'