Dashboard plugin [DRAFT]

d2.config.js

@@ -1,8 +1,10 @@
 const config = {
   type: "app",
+  pluginType: "DASHBOARD",
   title: "DHIS2 Climate App",
   entryPoints: {
     app: "./src/App.js",
+    plugin: "./src/DashboardPlugin.js",
   },
 };
 

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-20T14:17:35.520Z\n"
-"PO-Revision-Date: 2024-11-20T14:17:35.520Z\n"
+"POT-Creation-Date: 2024-12-04T13:59:15.469Z\n"
+"PO-Revision-Date: 2024-12-04T13:59:15.469Z\n"
 
 msgid "About this app"
 msgstr "About this app"
@@ -663,6 +663,33 @@ msgstr "Org unit parent needs to be above or equal to the org unit level"
 msgid "Daily values will be imported between start and end dates"
 msgstr "Daily values will be imported between start and end dates"
 
+msgid "Selected org unit has no geometry, which is required to display data."
+msgstr "Selected org unit has no geometry, which is required to display data."
+
+msgid "Data is only available for facilities (point locations)."
+msgstr "Data is only available for facilities (point locations)."
+
+msgid "Weather forecast"
+msgstr "Weather forecast"
+
+msgid "Choose an organisation unit"
+msgstr "Choose an organisation unit"
+
+msgid "Done"
+msgstr "Done"
+
+msgid "Choose a data source"
+msgstr "Choose a data source"
+
+msgid "Loading"
+msgstr "Loading"
+
+msgid "No data source. Edit this dashboard to configure this item."
+msgstr "No data source. Edit this dashboard to configure this item."
+
+msgid "Configure data source"
+msgstr "Configure data source"
+
 msgid ""
 "Set y-axis values for charts in the Explore data section to make it easier "
 "to compare different org units. Leave blank to calculate based on data "

package.json

@@ -1,6 +1,6 @@
 {
   "name": "climate-data",
-  "version": "1.5.1",
+  "version": "999.99.0-dashboard-plugin.25",
   "description": "Explore and import weather and climate data in DHIS2.",
   "license": "BSD-3-Clause",
   "private": true,
@@ -14,6 +14,7 @@
     "@dhis2/cli-app-scripts": "^11.7.0"
   },
   "dependencies": {
+    "@dhis2/analytics": "git+https://github.com/d2-ci/analytics.git#dca4316cdf2a8fd9482dfe1244575baad7ffe228",
     "@dhis2/app-runtime": "^3.10.6",
     "@dhis2/multi-calendar-dates": "1.0.0-alpha.27",
     "@turf/area": "^6.5.0",

src/DashboardPlugin.js

@@ -0,0 +1,11 @@
+import { DashboardPluginWrapper } from "@dhis2/analytics";
+import React from "react";
+import Plugin from "./components/plugin/Plugin.js";
+
+const DashboardPlugin = (props) => (
+  <DashboardPluginWrapper {...props}>
+    {(parentProps) => <Plugin {...parentProps} />}
+  </DashboardPluginWrapper>
+);
+
+export default DashboardPlugin;

src/components/Routes.js

@@ -20,6 +20,7 @@ import SetupPage from "./setup/SetupPage";
 import SettingsPage from "./settings/SettingsPage";
 import ErrorPage from "./ErrorPage";
 import CheckPage from "./check/CheckPage";
+import PluginPage from "./plugin/PluginPage";
 import orgUnitLoader from "../utils/orgUnitLoader";
 import checkPlaceLoader from "../utils/checkPlaceLoader";
 
@@ -161,6 +162,10 @@ const Routes = () => {
           path: "settings",
           element: <SettingsPage />,
         },
+        {
+          path: "plugin",
+          element: <PluginPage />,
+        },
       ],
     },
   ]);

src/components/explore/Chart.js

@@ -1,28 +1,68 @@
 import PropTypes from "prop-types";
+import { useCallback, useRef, useLayoutEffect, useMemo } from "react";
 import Highcharts from "highcharts";
 import accessibility from "highcharts/modules/accessibility";
 import highchartsMore from "highcharts/highcharts-more";
 import exporting from "highcharts/modules/exporting";
 import patternFill from "highcharts/modules/pattern-fill";
-import React, { useRef, useLayoutEffect } from "react";
 
 accessibility(Highcharts);
 exporting(Highcharts);
 highchartsMore(Highcharts);
 patternFill(Highcharts);
 
-const Chart = ({ config }) => {
+const Chart = ({ config, isPlugin }) => {
+  const containerRef = useRef(null);
   const chartRef = useRef();
 
+  const titleHeight = 32;
+
+  const onResize = useCallback(() => {
+    chartRef.current?.setSize(
+      containerRef.current.offsetWidth,
+      containerRef.current.offsetHeight,
+      false
+    );
+  }, []);
+
+  const sizeObserver = useMemo(
+    () => new window.ResizeObserver(onResize),
+    [onResize]
+  );
+
+  const mountAndObserveContainerRef = useCallback(
+    (node) => {
+      if (node === null) {
+        return;
+      }
+
+      containerRef.current = node;
+      sizeObserver.observe(node);
+
+      return sizeObserver.disconnect;
+    },
+    [sizeObserver]
+  );
+
   useLayoutEffect(() => {
-    Highcharts.chart(chartRef.current, config);
+    chartRef.current = new Highcharts.chart(containerRef.current, config);
   }, [config, chartRef]);
 
-  return <div ref={chartRef} />;
+  return (
+    <div
+      style={{
+        // height: `calc(100% - ${isPlugin ? titleHeight : 0}px)`,
+        height: "100%",
+        width: "100%",
+      }}
+      ref={mountAndObserveContainerRef}
+    />
+  );
 };
 
 Chart.propTypes = {
   config: PropTypes.object.isRequired,
+  isPlugin: PropTypes.bool,
 };
 
 export default Chart;

src/components/explore/forecast/DayForecast.js

@@ -13,7 +13,7 @@ const sixHours = [
   { start: "18", end: "24" },
 ];
 
-const DayForecast = ({ date, series }) => {
+const DayForecast = ({ date, series, isPlugin }) => {
   const day = new Date(date).toDateString().slice(0, -5);
   const temp = series.map((s) => s.data.instant.details.air_temperature);
   const minTemp = Math.round(Math.min(...temp));
@@ -62,7 +62,7 @@ const DayForecast = ({ date, series }) => {
       <td className={styles.precip}>
         {precip ? i18n.t("{{precip}} mm", { precip }) : null}
       </td>
-      <td className={styles.precip}>{avgHumidity}%</td>
+      {!isPlugin && <td className={styles.precip}>{avgHumidity}%</td>}
       <td className={styles.wind}>{maxWind} m/s</td>
     </tr>
   );

src/components/explore/forecast/Forecast.js

@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
 import i18n from "@dhis2/d2-i18n";
 import DataLoader from "../../shared/DataLoader.js";
@@ -11,7 +12,7 @@ const convertTimezone = (date, timeZone) =>
 
 const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-const Forecast = () => {
+const Forecast = ({ isPlugin }) => {
   const orgUnit = exploreStore((state) => state.orgUnit);
   const [data, setData] = useState();
   const { settings, loading } = useAppSettings();
@@ -57,7 +58,9 @@ const Forecast = () => {
             <td>{i18n.t("Evening")}</td>
             <td className={styles.right}>{i18n.t("Max/min temp.")}</td>
             <td className={styles.right}>{i18n.t("Precip.")}</td>
-            <td className={styles.right}>{i18n.t("Rel. humidity")}</td>
+            {!isPlugin && (
+              <td className={styles.right}>{i18n.t("Rel. humidity")}</td>
+            )}
             <td className={styles.right}>{i18n.t("Wind")}</td>
           </tr>
         </thead>
@@ -67,6 +70,7 @@ const Forecast = () => {
               key={date}
               date={date}
               series={timeseries.filter((t) => t.time.startsWith(date))}
+              isPlugin={isPlugin}
             />
           ))}
         </tbody>
@@ -85,24 +89,30 @@ const Forecast = () => {
           ECMWF HRES
         </a>
       </div>
-      <div className={styles.timeZone}>
-        {settings.timeZone
-          ? i18n.t(
-              'The forecast is using the "{{- timeZone}}" time zone. You can change the time zone for your org units under "Settings".',
-              { timeZone }
-            )
-          : browserTimeZone
-          ? i18n.t(
-              'The forecast is using the time zone of your browser ({{- timeZone}}). You can set the time zone for your org units under "Settings".',
-              { timeZone }
-            )
-          : i18n.t(
-              'The forecast is using the default "{{- timeZone}}" time zone. You can set the time zone for your org units under "Settings".',
-              { timeZone }
-            )}
-      </div>
+      {!isPlugin && (
+        <div className={styles.timeZone}>
+          {settings.timeZone
+            ? i18n.t(
+                'The forecast is using the "{{- timeZone}}" time zone. You can change the time zone for your org units under "Settings".',
+                { timeZone }
+              )
+            : browserTimeZone
+            ? i18n.t(
+                'The forecast is using the time zone of your browser ({{- timeZone}}). You can set the time zone for your org units under "Settings".',
+                { timeZone }
+              )
+            : i18n.t(
+                'The forecast is using the default "{{- timeZone}}" time zone. You can set the time zone for your org units under "Settings".',
+                { timeZone }
+              )}
+        </div>
+      )}
     </>
   );
 };
 
+Forecast.propTypes = {
+  isPlugin: PropTypes.bool,
+};
+
 export default Forecast;

src/components/explore/heat/charts/thermalComfortDaily.js

@@ -9,7 +9,7 @@ import {
 } from "../../../../utils/chart";
 import { toCelcius } from "../../../../utils/calc";
 
-export const getPlotBands = (minMax, settings) => {
+export const getPlotBands = (minMax, settings = {}) => {
   const { heatMin, heatMax } = settings;
 
   const minValue =
@@ -61,7 +61,7 @@ export const getThickPositons = (plotBands) => [
   plotBands[plotBands.length - 1].to,
 ];
 
-const getChart = (name, data, settings) => {
+const getChart = (name, data, settings, isPlugin) => {
   const series = data.map((d) => ({
     x: new Date(d.id).getTime(),
     y: toCelcius(d["utci_mean"]),
@@ -78,13 +78,15 @@ const getChart = (name, data, settings) => {
   const tickPositions = getThickPositons(plotBands);
 
   return {
-    title: {
-      text: i18n.t("{{name}}: Thermal comfort {{period}}", {
-        name,
-        period: getDailyPeriod(data),
-        nsSeparator: ";",
-      }),
-    },
+    title: !isPlugin
+      ? {
+          text: i18n.t("{{name}}: Thermal comfort {{period}}", {
+            name,
+            period: getDailyPeriod(data),
+            nsSeparator: ";",
+          }),
+        }
+      : "",
     credits: heatCredits,
     tooltip: {
       crosshairs: true,
@@ -142,6 +144,9 @@ const getChart = (name, data, settings) => {
         zIndex: 0,
       },
     ],
+    exporting: {
+      enabled: !isPlugin,
+    },
   };
 };
 

src/components/explore/heat/plugin/HeatDaily.js

@@ -0,0 +1,25 @@
+import Chart from "../../Chart";
+import DataLoader from "../../../shared/DataLoader";
+import getDailyConfig from "../charts/thermalComfortDaily";
+import useEarthEngineTimeSeries from "../../../../hooks/useEarthEngineTimeSeries";
+import useAppSettings from "../../../../hooks/useAppSettings";
+import { era5HeatDaily } from "../../../../data/datasets";
+
+const HeatDaily = ({ orgUnit, period }) => {
+  const { settings } = useAppSettings();
+
+  const data = useEarthEngineTimeSeries(era5HeatDaily, period, orgUnit);
+
+  const isPlugin = true;
+
+  return data ? (
+    <Chart
+      config={getDailyConfig(orgUnit.properties.name, data, settings, isPlugin)}
+      isPlugin={isPlugin}
+    />
+  ) : (
+    <DataLoader />
+  );
+};
+
+export default HeatDaily;

src/components/explore/temperature/charts/temperatureDaily.js

@@ -3,7 +3,7 @@ import { colors } from "@dhis2/ui";
 import { animation, credits, getDailyPeriod } from "../../../../utils/chart";
 import { toCelcius } from "../../../../utils/calc";
 
-const getChart = (name, data, settings) => {
+const getChart = (name, data, settings, isPlugin) => {
   const { tempMin, tempMax } = settings;
 
   const series = data.map((d) => ({
@@ -19,11 +19,13 @@ const getChart = (name, data, settings) => {
 
   return {
     title: {
-      text: i18n.t("{{name}}: Daily temperatures {{period}}", {
-        name,
-        period: getDailyPeriod(data),
-        nsSeparator: ";",
-      }),
+      text: !isPlugin
+        ? i18n.t("{{name}}: Daily temperatures {{period}}", {
+            name,
+            period: getDailyPeriod(data),
+            nsSeparator: ";",
+          })
+        : "",
     },
     credits,
     tooltip: {
@@ -78,6 +80,9 @@ const getChart = (name, data, settings) => {
         zIndex: 0,
       },
     ],
+    exporting: {
+      enabled: !isPlugin,
+    },
   };
 };