feat: scorecard legend

Implemented scorecard legend view

packages/app/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-08-08T12:57:40.085Z\n"
-"PO-Revision-Date: 2024-08-08T12:57:40.086Z\n"
+"POT-Creation-Date: 2024-08-08T18:16:26.041Z\n"
+"PO-Revision-Date: 2024-08-08T18:16:26.041Z\n"
 
 msgid "Welcome to Scorecard App!"
 msgstr "Welcome to Scorecard App!"
@@ -348,9 +348,54 @@ msgstr "and {{number}} more"
 msgid "Download"
 msgstr "Download"
 
+msgid "All"
+msgstr "All"
+
+msgid "Below Average"
+msgstr "Below Average"
+
+msgid "Above Average"
+msgstr "Above Average"
+
+msgid "Visibility"
+msgstr "Visibility"
+
+msgid "Legend"
+msgstr "Legend"
+
+msgid "Item Number"
+msgstr "Item Number"
+
+msgid "Empty Rows"
+msgstr "Empty Rows"
+
+msgid "Show Hierarchy"
+msgstr "Show Hierarchy"
+
+msgid "Average Column"
+msgstr "Average Column"
+
+msgid "Average Row"
+msgstr "Average Row"
+
+msgid "Average"
+msgstr "Average"
+
+msgid "Arrows"
+msgstr "Arrows"
+
+msgid "Show Data in Rows"
+msgstr "Show Data in Rows"
+
 msgid "Reset"
 msgstr "Reset"
 
+msgid "Select organisation unit and period to view scorecard"
+msgstr "Select organisation unit and period to view scorecard"
+
+msgid "Could not get scorecard config"
+msgstr "Could not get scorecard config"
+
 msgid "Create a new scorecard in the scorecard app to see it here."
 msgstr "Create a new scorecard in the scorecard app to see it here."
 

packages/app/package.json

@@ -48,7 +48,7 @@
     "@dhis2/app-service-datastore": "^1.0.0-alpha.2",
     "@dhis2/multi-calendar-dates": "^1.2.4",
     "@dhis2/ui": "^9.11.0",
-    "@hisptz/dhis2-analytics": "^2.0.16",
+    "@hisptz/dhis2-analytics": "^2.0.18",
     "@hisptz/dhis2-ui": "^2.0.14",
     "@hisptz/dhis2-utils": "^2.0.5",
     "@hookform/resolvers": "^3.9.0",

packages/app/src/locales/en/translations.json

@@ -111,7 +111,22 @@
     "Select period": "Select period",
     "and {{number}} more": "and {{number}} more",
     "Download": "Download",
+    "All": "All",
+    "Below Average": "Below Average",
+    "Above Average": "Above Average",
+    "Visibility": "Visibility",
+    "Legend": "Legend",
+    "Item Number": "Item Number",
+    "Empty Rows": "Empty Rows",
+    "Show Hierarchy": "Show Hierarchy",
+    "Average Column": "Average Column",
+    "Average Row": "Average Row",
+    "Average": "Average",
+    "Arrows": "Arrows",
+    "Show Data in Rows": "Show Data in Rows",
     "Reset": "Reset",
+    "Select organisation unit and period to view scorecard": "Select organisation unit and period to view scorecard",
+    "Could not get scorecard config": "Could not get scorecard config",
     "Create a new scorecard in the scorecard app to see it here.": "Create a new scorecard in the scorecard app to see it here.",
     "Confirm scorecard selection": "Confirm scorecard selection",
     "Are you sure you want to select this scorecard for this dashboard?": "Are you sure you want to select this scorecard for this dashboard?",

packages/app/src/modules/Main/components/ScorecardList/index.tsx

@@ -1,11 +1,12 @@
 import i18n from "@dhis2/d2-i18n";
-import { Button, ButtonStrip, DropdownButton, Tooltip } from "@dhis2/ui";
 import {
-	IconAdd24,
-	IconApps24,
-	IconList24,
-	IconQuestionFilled24,
-} from "@dhis2/ui-icons";
+	Button,
+	ButtonStrip,
+	DropdownButton,
+	IconQuestion24,
+	Tooltip,
+} from "@dhis2/ui";
+import { IconAdd24, IconApps24, IconList24 } from "@dhis2/ui-icons";
 import { SCORECARD_LIST_HELP_STEPS, STEP_OPTIONS } from "@scorecard/shared";
 import { Steps } from "intro.js-react";
 import React, { useState } from "react";
@@ -71,7 +72,7 @@ export default function ScorecardList() {
 							<DropdownButton
 								type="button"
 								component={<HelpMenu />}
-								icon={<IconQuestionFilled24 />}
+								icon={<IconQuestion24 />}
 							>
 								{i18n.t("Help")}
 							</DropdownButton>

packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/ScorecardLegendsView.tsx

@@ -0,0 +1,27 @@
+import { ArrowLegendsView } from "./components/ArrowLegendView";
+import { ScorecardConfig } from "@hisptz/dhis2-analytics";
+import { LegendView } from "./components/LegendView";
+
+export function ScorecardLegendsView({ config }: { config: ScorecardConfig }) {
+	const legendDefinitions = config.legendDefinitions;
+
+	return (
+		<div
+			style={{ gap: 16, padding: "0 16px" }}
+			className="row align-items-center space-between"
+		>
+			<div
+				style={{
+					display: "grid",
+					gap: 8,
+					gridTemplateColumns: `repeat(${legendDefinitions.length}, auto)`,
+				}}
+			>
+				{legendDefinitions.map((item) => (
+					<LegendView legend={item} key={item.id} />
+				))}
+			</div>
+			<ArrowLegendsView />
+		</div>
+	);
+}

packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/components/ArrowLegendView.tsx

@@ -0,0 +1,27 @@
+import { IconArrowDown24, IconArrowUp24 } from "@dhis2/ui";
+import i18n from "@dhis2/d2-i18n";
+import { useScorecardState } from "../../state/state";
+
+export function ArrowLegendsView(props: any) {
+	const [state] = useScorecardState();
+	const showArrows = state.options.arrows;
+
+	if (!showArrows) {
+		return null;
+	}
+
+	return (
+		<div
+			style={{ gap: 16, display: "grid", gridTemplateColumns: "1fr 1fr" }}
+		>
+			<div style={{ gap: 8 }} className="row align-items-center">
+				<IconArrowUp24 />
+				{i18n.t("Increased from last period")}
+			</div>
+			<div style={{ gap: 8 }} className="row align-items-center">
+				<IconArrowDown24 />
+				{i18n.t("Decreased from last period")}
+			</div>
+		</div>
+	);
+}

packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/components/LegendView.tsx

@@ -0,0 +1,23 @@
+import { LegendDefinition } from "@hisptz/dhis2-analytics";
+
+export interface LegendViewProps {
+	legend: LegendDefinition;
+}
+
+export function LegendView({ legend }: LegendViewProps) {
+	const { color, name, id } = legend;
+	return (
+		<div key={id} className="row align-items-center">
+			<div
+				style={{
+					width: 60,
+					height: 25,
+					background: color,
+					border: "1px solid rgb(232, 237, 242)",
+					padding: 16,
+				}}
+			/>
+			<p style={{ paddingLeft: 8, marginRight: 8 }}>{name}</p>
+		</div>
+	);
+}

packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/index.ts

@@ -0,0 +1 @@
+export * from "./ScorecardLegendsView";

packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardViewPage.tsx

@@ -10,6 +10,7 @@ import { ScorecardStateProvider } from "./state/state";
 import { ScorecardView } from "./components/ScorecardView";
 import { ScorecardConfigProvider } from "./state/config";
 import { ScorecardHeader } from "./components/ScorecardHeader";
+import { ScorecardLegendsView } from "./ScorecardLegendsView";
 
 export function ScorecardViewPage() {
 	const { setDimensions, orgUnit, periods } = useDimensions();
@@ -65,7 +66,7 @@ export function ScorecardViewPage() {
 			<ScorecardConfigProvider config={config}>
 				<ScorecardStateProvider
 					initialState={{
-						...config,
+						options: config.options,
 						periodSelection: {
 							...config.periodSelection,
 							periods:
@@ -83,6 +84,7 @@ export function ScorecardViewPage() {
 					<DimensionFilterArea />
 					<ScorecardActions />
 					<ScorecardHeader />
+					<ScorecardLegendsView config={config} />
 					<div className="flex-1">
 						<ScorecardView config={config} />
 					</div>

packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardHeader.tsx

@@ -28,6 +28,8 @@ export function ScorecardHeader() {
 		<div className="row space-between" id={"scorecard-header"}>
 			<div className="row">
 				{customHeader ? (
+					/*
+      // @ts-ignore */
 					<JsxParser
 						autoCloseVoidElements
 						className="w-100"

packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardView.tsx

@@ -3,6 +3,8 @@ import { ScorecardConfig } from "@hisptz/dhis2-analytics";
 import { useDimensions } from "../hooks/dimensions";
 import i18n from "@dhis2/d2-i18n";
 import { colors } from "@dhis2/ui";
+import { ErrorBoundary } from "react-error-boundary";
+import { FullPageError } from "@scorecard/shared";
 
 export interface ScorecardViewProps {
 	config: ScorecardConfig;
@@ -31,8 +33,16 @@ export function ScorecardView({ config }: ScorecardViewProps) {
 	}
 
 	return (
-		<div className="h-100 w-100 column align-items-center justify-content-center">
-			{/*<Scorecard config={config} state={state} setState={setState} />*/}
-		</div>
+		<ErrorBoundary
+			resetKeys={[state, noDimensionsSelected]}
+			FallbackComponent={FullPageError}
+		>
+			<div
+				style={{ padding: 16 }}
+				className="h-100 w-100 column align-items-center justify-content-center"
+			>
+				{/*<Scorecard config={config} state={state} setState={setState} />*/}
+			</div>
+		</ErrorBoundary>
 	);
 }

yarn.lock

@@ -2933,15 +2933,15 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@hisptz/dhis2-analytics@^2.0.16":
-  version "2.0.16"
-  resolved "https://registry.yarnpkg.com/@hisptz/dhis2-analytics/-/dhis2-analytics-2.0.16.tgz#063e3bbc48cdad98ba6bee5a7c10b07aa7c97b31"
-  integrity sha512-dwa73O/W/N+qXbSM0ariEMPeie08cpvpXZvH6/mPUtSj4W5rKJVzBtCu6oWhfDEQS29hthjFZNktL/zyysfiBQ==
+"@hisptz/dhis2-analytics@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@hisptz/dhis2-analytics/-/dhis2-analytics-2.0.17.tgz#cf5f24ca8ac2050b0626534df8ef31bb2ed8519e"
+  integrity sha512-rekZp29fQsul2rJhIu1ILaZ+mMwJoT8eRCY6ZJaIgjG2oMSPJ++XaIY2yWLiNNinQwLokWBvp7GGO6kIMkJZTw==
   dependencies:
     "@dhis2/multi-calendar-dates" "^1.2.3"
     "@dnd-kit/core" "^6.1.0"
     "@dnd-kit/utilities" "^3.2.2"
-    "@hisptz/dhis2-ui" "2.0.13"
+    "@hisptz/dhis2-ui" "2.0.14"
     "@hisptz/dhis2-utils" "2.0.5"
     "@react-leaflet/core" "^2.1.0"
     "@tanstack/react-table" "^8.19.3"
@@ -2962,12 +2962,11 @@
     screenfull "^6.0.2"
     zod "^3.23.8"
 
-"@hisptz/dhis2-analytics@^2.0.17":
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/@hisptz/dhis2-analytics/-/dhis2-analytics-2.0.17.tgz#cf5f24ca8ac2050b0626534df8ef31bb2ed8519e"
-  integrity sha512-rekZp29fQsul2rJhIu1ILaZ+mMwJoT8eRCY6ZJaIgjG2oMSPJ++XaIY2yWLiNNinQwLokWBvp7GGO6kIMkJZTw==
+"@hisptz/dhis2-analytics@^2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@hisptz/dhis2-analytics/-/dhis2-analytics-2.0.18.tgz#b4ee2dd12119a4f60e2275f620195fb9eadf5b4c"
+  integrity sha512-v/rDP/XQ1zTdsKgN0gMys6BQt4llfxJm354IndLioojxD5hd8OPv0kVVgxq4rxTvYr+88vPrmLoqZUOdLGkvYQ==
   dependencies:
-    "@dhis2/multi-calendar-dates" "^1.2.3"
     "@dnd-kit/core" "^6.1.0"
     "@dnd-kit/utilities" "^3.2.2"
     "@hisptz/dhis2-ui" "2.0.14"
@@ -2991,25 +2990,6 @@
     screenfull "^6.0.2"
     zod "^3.23.8"
 
-"@hisptz/[email protected]":
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/@hisptz/dhis2-ui/-/dhis2-ui-2.0.13.tgz#c9ee3ff9ab54324b447bb6c9cd7fe3a04cbe522d"
-  integrity sha512-qlapKYJSr3Yxgw7wz0VhVLKxzoPz8C9pYs3qLFg8zVSIZ9Cdfm+frQ27UCRzJaSH2WiSFkp6WyFXA+jvnJkFdg==
-  dependencies:
-    "@hisptz/dhis2-utils" "2.0.5"
-    classnames "^2.5.1"
-    dexie "^3.2.3"
-    jodit-react "^1.3.39"
-    lodash "^4.17.21"
-    luxon "^3.4.4"
-    react-circular-progressbar "^2.1.0"
-    react-collapsible "^2.10.0"
-    react-color "^2.19.3"
-    react-hook-form "^7.51.5"
-    recoil "^0.7.7"
-    styled-components "^6.1.8"
-    usehooks-ts "^2.9.2"
-
 "@hisptz/[email protected]", "@hisptz/dhis2-ui@^2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@hisptz/dhis2-ui/-/dhis2-ui-2.0.14.tgz#acf1f0af8383c0d3a6fdfa555a97d23dc6e17cb3"