update dashboard logic

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: 2026-03-16T13:43:15.193Z\n"
-"PO-Revision-Date: 2026-03-16T13:43:15.193Z\n"
+"POT-Creation-Date: 2026-05-22T20:15:03.101Z\n"
+"PO-Revision-Date: 2026-05-22T20:15:03.101Z\n"
 
 msgid "Validating Project"
 msgstr ""
@@ -72,6 +72,52 @@ msgstr ""
 msgid "Cannot load dashboard"
 msgstr ""
 
+msgid "Purpose of Platform Dashboards"
+msgstr ""
+
+msgid "Encourage data informed decisions."
+msgstr ""
+
+msgid ""
+"Help implementers identify phenomena in data that can initiate "
+"opportunities for conversations and decision-making on how to engage in "
+"adaptive program management."
+msgstr ""
+
+msgid ""
+"Be incorporated into the monthly quality process. Ideally, this check "
+"should be happening when preparing MERs for your regional teams."
+msgstr ""
+
+msgid "Conversions by topic"
+msgstr ""
+
+msgid "Errors identified"
+msgstr ""
+
+msgid "Divergence from targets"
+msgstr ""
+
+msgid "Bullets on what to highlight in the MER with mitigation measures"
+msgstr ""
+
+msgid "Potential points to escalate"
+msgstr ""
+
+msgid "Determining if site visits should be made"
+msgstr ""
+
+msgid "Reviewing budget for spent, pending, and remaining"
+msgstr ""
+
+msgid ""
+"If there is anything that can be improved, please let us know by sending an "
+"email to "
+msgstr ""
+
+msgid "Close"
+msgstr ""
+
 msgid "Data Entry"
 msgstr ""
 
@@ -129,9 +175,6 @@ msgstr ""
 msgid "Validation results"
 msgstr ""
 
-msgid "Close"
-msgstr ""
-
 msgid "Comments saved"
 msgstr ""
 
@@ -594,12 +637,72 @@ msgstr ""
 msgid "Target vs Actual - Benefits"
 msgstr ""
 
+msgid "Target vs Actual - Benefits - Pivot Table"
+msgstr ""
+
+msgid "Target vs Actual - Benefits - Column Chart"
+msgstr ""
+
+msgid "Target vs Actual - People - Column Chart"
+msgstr ""
+
+msgid "MER - Target vs Actual - Benefits - Column Chart"
+msgstr ""
+
+msgid "MER - Target vs Actual - People - Column Chart"
+msgstr ""
+
+msgid "Target vs Actual - Benefits - Line Chart"
+msgstr ""
+
+msgid "Target vs Actual - People - Line Chart"
+msgstr ""
+
+msgid "Target vs Actual - People - Line Chart - Male Only"
+msgstr ""
+
+msgid "Target vs Actual - People - Line Chart - Gender New Only"
+msgstr ""
+
+msgid "Target vs Actual - People - Line Chart - New Only"
+msgstr ""
+
+msgid "Target vs Actual - People - Line Chart - Female Only"
+msgstr ""
+
+msgid "Target vs Actual - People - Line/Column Chart - Male Only"
+msgstr ""
+
+msgid "Target vs Actual - People - Line/Column Chart - Female Only"
+msgstr ""
+
 msgid "Target vs Actual - Benefits (Disaggregated)"
 msgstr ""
 
 msgid "Target vs Actual - People"
 msgstr ""
 
+msgid "Target vs Actual - People - Pivot Table"
+msgstr ""
+
+msgid "Target vs Actual - People - Month by Month"
+msgstr ""
+
+msgid "Target vs Actual - Benefits - Month by Month"
+msgstr ""
+
+msgid "Target vs Actual - People - Male Only - Pivot Table"
+msgstr ""
+
+msgid "Target vs Actual - People - Female Only - Pivot Table"
+msgstr ""
+
+msgid "Target vs Actual - People - Male Only - Column Chart"
+msgstr ""
+
+msgid "Target vs Actual - People - Female Only - Column Chart"
+msgstr ""
+
 msgid "Target vs Actual - Unique People"
 msgstr ""
 
@@ -609,7 +712,7 @@ msgstr ""
 msgid "Achieved (%) - Benefits"
 msgstr ""
 
-msgid "Achieved (%) - People"
+msgid "Achieved to date (%) - People"
 msgstr ""
 
 msgid "Achieved total to date (%) - People"

src/components/dashboard-info-modal/DashboardInfoModal.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+
+import i18n from "../../locales";
+import { makeStyles } from "@material-ui/styles";
+
+type DashboardInfoModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export const DashboardInfoModal: React.FC<DashboardInfoModalProps> = props => {
+    const { isOpen, onClose } = props;
+    const classes = useStyles();
+
+    return (
+        <Dialog open={isOpen} onClose={onClose} fullWidth maxWidth="md">
+            <DialogTitle>{i18n.t("Purpose of Platform Dashboards")}</DialogTitle>
+            <DialogContent className={classes.text} dividers>
+                <p>{i18n.t("These dashboards are meant to:")}</p>
+                <ul>
+                    <li>{i18n.t("Encourage data informed decisions.")}</li>
+                    <li>
+                        {i18n.t(
+                            "Help implementers identify phenomena in data that can initiate opportunities for conversations and decision-making on how to engage in adaptive program management."
+                        )}
+                    </li>
+                    <li>
+                        {i18n.t(
+                            "Be incorporated into the monthly quality process. Ideally, this check should be happening when preparing MERs for your regional teams."
+                        )}
+                    </li>
+                    <li>{i18n.t("Create a task list with some common follow on actions:")}</li>
+                    <ul>
+                        <li>{i18n.t("Conversions by topic")}</li>
+                        <li>{i18n.t("Errors identified")}</li>
+                        <li>{i18n.t("Divergence from targets")}</li>
+                        <li>
+                            {i18n.t(
+                                "Bullets on what to highlight in the MER with mitigation measures"
+                            )}
+                        </li>
+                        <li>{i18n.t("Potential points to escalate")}</li>
+                        <li>{i18n.t("Determining if site visits should be made")}</li>
+                        <li>{i18n.t("Reviewing budget for spent, pending, and remaining")}</li>
+                    </ul>
+                </ul>
+                <p className={classes.bold}>
+                    {i18n.t(
+                        "If there is anything that can be improved, please let us know by sending an email to "
+                    )}
+                    <a href="mailto:pmt@samaritan.org">pmt@samaritan.org</a>.
+                </p>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="primary">
+                    {i18n.t("Close")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+const useStyles = makeStyles({
+    text: {
+        "& p, & li": {
+            fontSize: 16,
+        },
+    },
+    bold: {
+        fontWeight: "bold",
+    },
+});

src/components/dashboard/Dashboard.tsx

@@ -5,6 +5,7 @@ import i18n from "../../locales";
 import PageHeader from "../../components/page-header/PageHeader";
 import { useAppHistory } from "../../utils/use-app-history";
 import { useAppContext } from "../../contexts/api-context";
+import { DashboardInfoModal } from "../dashboard-info-modal/DashboardInfoModal";
 
 function getTranslations(name: string) {
     return {
@@ -39,6 +40,7 @@ const Dashboard: React.FC<DashboardProps> = props => {
     const dashboardUrl = dashboardUrlBase + `/#/${id}`;
     const translations = getTranslations(name);
     const appHistory = useAppHistory(backUrl);
+    const [openModal, setOpenModal] = React.useState(true);
 
     React.useEffect(() => {
         const iframe = iframeRef.current;
@@ -74,6 +76,8 @@ const Dashboard: React.FC<DashboardProps> = props => {
                 </div>
             )}
 
+            <DashboardInfoModal isOpen={openModal} onClose={() => setOpenModal(false)} />
+
             <div style={isLoading ? styles.wrapperHidden : styles.wrapperVisible}>
                 <iframe
                     ref={iframeRef}

src/models/Dashboard.ts

@@ -10,6 +10,7 @@ import {
 import { Maybe } from "../types/utils";
 import { getUid, getRefs } from "../utils/dhis2";
 import { D2Sharing } from "./Sharing";
+import { PeriodStrategy } from "./Period";
 
 export const dimensions = {
     period: { id: "pe" },
@@ -29,6 +30,8 @@ interface Item {
 
 export interface VisualizationDefinition {
     type: "chart" | "table";
+    chartType?: Exclude<D2Visualization["type"], "PIVOT_TABLE">;
+    periodStrategy?: PeriodStrategy;
     key: string;
     name: string;
     items: Item[];
@@ -84,7 +87,7 @@ export function getD2Visualization(visualization: Visualization): MaybeD2Visuali
 
     const d2Table: PartialPersistedModel<D2Visualization> = {
         id: getUid(visualization.key, ""),
-        type: visualization.type === "table" ? "PIVOT_TABLE" : "COLUMN",
+        type: visualization.type === "table" ? "PIVOT_TABLE" : visualization.chartType || "COLUMN",
         name: visualization.name,
         numberType: "VALUE",
         legendDisplayStyle: "FILL",
@@ -172,9 +175,11 @@ export function positionItems(items: DashboardItem[], options: PositionItemsOpti
 
     return items.reduce<{ pos: Pos; outputItems: DashboardItem[] }>(
         ({ pos, outputItems }, item) => {
+            const isText = item.type === "TEXT";
             const width = Math.min(item.width || defaultWidth, maxWidth);
             const itemPos = pos.x + width > maxWidth ? { x: 0, y: pos.y + defaultHeight } : pos;
-            const newItem = { ...item, width, height: defaultHeight, ...itemPos };
+            const height = item.height ?? (isText ? 6 : defaultHeight);
+            const newItem = { ...item, width, height, ...itemPos };
             const newPos = { x: itemPos.x + newItem.width, y: itemPos.y };
             return { pos: newPos, outputItems: [...outputItems, newItem] };
         },

src/models/Period.ts

@@ -1,10 +1,13 @@
 import moment from "moment";
+import _ from "lodash";
 import { Maybe } from "../types/utils";
 import { getMonthsRange } from "../utils/date";
 
 export type Period = string;
+export type PeriodStrategy = "monthly" | "yearly" | "monthly_interleaved_by_month";
 
 export const monthPeriod = "YYYYMM";
+export const yearPeriod = "YYYY";
 
 export function getPeriodsFromRange(start: Maybe<Date>, end: Maybe<Date>): Period[] {
     if (!start || !end) return [];
@@ -16,3 +19,32 @@ export function filterPeriods(periods: Period[], options: { toDate?: boolean } =
     const now = moment();
     return !options.toDate ? periods : periods.filter(period => moment(period, monthPeriod) <= now);
 }
+
+export function getVisualizationPeriods(
+    periods: Period[],
+    options: { toDate?: boolean; periodStrategy?: PeriodStrategy } = {}
+): Period[] {
+    const { toDate, periodStrategy = "monthly" } = options;
+
+    const transformedPeriods =
+        periodStrategy === "yearly"
+            ? _.uniq(periods.map(period => moment(period, monthPeriod).format(yearPeriod))).sort()
+            : periodStrategy === "monthly_interleaved_by_month"
+            ? _(periods)
+                  .groupBy(period => moment(period, monthPeriod).format("MM"))
+                  .toPairs()
+                  .sortBy(([month]) => month)
+                  .flatMap(([_month, monthPeriods]) => _.sortBy(monthPeriods))
+                  .value()
+            : periods;
+
+    if (!toDate) return transformedPeriods;
+
+    const now = moment();
+
+    return transformedPeriods.filter(period =>
+        periodStrategy === "yearly"
+            ? moment(period, yearPeriod).year() <= now.year()
+            : moment(period, monthPeriod) <= now
+    );
+}

src/models/Project.ts

@@ -4,14 +4,13 @@ import _ from "lodash";
 import { D2Api, Id, Ref } from "../types/d2-api";
 // @ts-ignore
 import { generateUid } from "d2/uid";
-import { TableSorting } from "@eyeseetea/d2-ui-components";
 
 import i18n from "../locales";
 import DataElementsSet, { PeopleOrBenefit, DataElement, SelectionInfo } from "./dataElementsSet";
 import ProjectDb from "./ProjectDb";
 import { toISOString, getMonthsRange } from "../utils/date";
 import ProjectDownload from "./ProjectDownload";
-import ProjectList, { ProjectForList, FiltersForList } from "./ProjectsList";
+import ProjectList, { ProjectForList, FiltersForList, TableSorting } from "./ProjectsList";
 import ProjectDataSet from "./ProjectDataSet";
 import ProjectDelete from "./ProjectDelete";
 import {