datastake-daf 0.6.846 → 0.6.847

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/IncidentsTime/hook.js

@@ -1,74 +1,15 @@
-import { useMemo, useState, useCallback } from "react";
+import { useMemo, useState } from "react";
 import useTimelineBase from "./config.js";
-import DashboardService from "../../../../../../../services/DashboardService.js";
+
 export default function useIncidentsTimeline({
   t,
   language,
   severityOptions = [],
   selectedRange = "12",
-  selectedPartners = {},
-  user,
 }) {
   const [filters, setFilters] = useState({ severity: "all" });
-  const { baseMonths, baseWeeks, mergeWithData } = useTimelineBase({ language, selectedRange });
-
-  const getSourceParam = useCallback(
-    (sourceId) => {
-      if (user?.company?.id !== sourceId) return `?sourceId=${sourceId}`;
-      return "";
-    },
-    [user?.company?.id]
-  );
-   const severityColors = useMemo(
-    () => ({
-      major: "#cf1322",
-      minor: "#fadb14",
-      moderate: "#fa8c16",
-      undetermined: "#999999",
-      placeholder: "transparent",
-    }),
-    []
-  );
-  
-  
-     const renderSeverity = (val) => {
-    if (val === "major")
-      return <span style={{ color: severityColors.major }}>{t("Major")}</span>;
-    if (val === "minor")
-      return <span style={{ color: severityColors.minor }}>{t("Minor")}</span>;
-    if (val === "moderate")
-      return (
-        <span style={{ color: severityColors.moderate }}>{t("Moderate")}</span>
-      );
-    return <span>{t("Undetermined")}</span>;
-  };
-  
-     const categories = useMemo(() => {
-    if (selectedRange === "12") return baseMonths.map((m) => m.label);
-    return baseWeeks.map((w) => w.label);
-  }, [selectedRange, baseMonths, baseWeeks]);
-
-  const defaultFetchConfig = useMemo(
-    () => ({
-      url: `/incidents-timeline`,
-      filters: {
-        ...filters,
-        severity: filters.severity ? filters.severity : "all",
-        period: selectedRange,
-        sources: selectedPartners?.partners || [],
-      },
-      defaultData: [],
-      stop: selectedPartners?.loading,
-    }),
-    [filters, selectedRange, selectedPartners]
-  );
-
-  const getIncidentsTimelineData = useCallback(
-    ({ url, filters }) =>
-      DashboardService.getWidgetConflictManagement(url, filters),
-    []
-  );
 
+  const { baseMonths, baseWeeks, mergeWithData } = useTimelineBase({ language, selectedRange });
 
   const filtersConfig = useMemo(
     () => ({
@@ -102,12 +43,6 @@ export default function useIncidentsTimeline({
     setFilters,
     baseMonths,
     baseWeeks,
-    mergeWithData,
-    defaultFetchConfig,
-    getSourceParam,
-    getIncidentsTimelineData,
-    severityColors,
-    renderSeverity,
-    categories,
+    mergeWithData
   };
 }

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/IncidentsTime/index.js

@@ -1,26 +1,27 @@
-import { useMemo } from "react";
+import { useMemo, useCallback } from "react";
 import Widget from "../../../../../../../core/components/Dashboard/Widget/index.jsx";
 import PropTypes from "prop-types";
 import useIncidentsTimeline from "./hook.js";
 import { useWidgetFetch } from "../../../../../../../hooks/useWidgetFetch.js";
+import DashboardService from "../../../../../../../services/DashboardService.js";
 import { renderDateFormatted } from "../../../../../../../../helpers/Forms.js";
 import StackChart from "../../../../../../../core/components/Charts/StackChart/index.jsx";
+
 export default function IncidentsTimeline({
   selectedRange,
+  selectedPartners = {},
   t,
   language,
   goTo,
+  user,
   options,
 }) {
   const {
+    filters,
     filtersConfig,
-    defaultFetchConfig,
-    getSourceParam,
-    getIncidentsTimelineData,
     mergeWithData,
-    severityColors,
-    renderSeverity,
-    categories,
+    baseMonths,
+    baseWeeks,
   } = useIncidentsTimeline({
     t,
     language,
@@ -28,13 +29,96 @@ export default function IncidentsTimeline({
     selectedRange,
   });
 
+  const getSourceParam = useCallback(
+    (sourceId) => {
+      if (user?.company?.id !== sourceId) return `?sourceId=${sourceId}`;
+      return "";
+    },
+    [user?.company?.id]
+  );
+
+  const severityColors = useMemo(
+    () => ({
+      major: "#cf1322",
+      minor: "#fadb14",
+      moderate: "#fa8c16",
+      undetermined: "#999999",
+      placeholder: "transparent",
+    }),
+    []
+  );
+
+  const defaultFetchConfig = useMemo(
+    () => ({
+      url: `/incidents-timeline`,
+      filters: {
+        ...filters,
+        severity: filters.severity ? filters.severity : "all",
+        period: selectedRange,
+        sources: selectedPartners?.partners || [],
+      },
+      defaultData: [],
+      stop: selectedPartners?.loading,
+    }),
+    [filters, selectedRange, selectedPartners]
+  );
+
+  const getIncidentsTimelineData = useCallback(
+    ({ url, filters }) =>
+      DashboardService.getWidgetConflictManagement(url, filters),
+    []
+  );
+
   const { data, loading } = useWidgetFetch({
     config: defaultFetchConfig,
     getData: getIncidentsTimelineData,
   });
+
+  const renderSeverity = (val) => {
+    if (val === "major")
+      return <span style={{ color: severityColors.major }}>{t("Major")}</span>;
+    if (val === "minor")
+      return <span style={{ color: severityColors.minor }}>{t("Minor")}</span>;
+    if (val === "moderate")
+      return (
+        <span style={{ color: severityColors.moderate }}>{t("Moderate")}</span>
+      );
+    return <span>{t("Undetermined")}</span>;
+  };
+
   const chartData = useMemo(() => mergeWithData(data), [data, mergeWithData]);
 
+  const categories = useMemo(() => {
+    if (selectedRange === "12") return baseMonths.map((m) => m.label);
+    return baseWeeks.map((w) => w.label);
+  }, [selectedRange, baseMonths, baseWeeks]);
+  console.log({filtersConfig})
 
+  const getTooltipContent = useCallback(
+    ({ item }) => {
+      if (!item) return { title: "", items: [] };
+
+      return {
+        title: item.name || item.label || t("Undetermined"),
+        subTitle: renderDateFormatted(item.date, "DD MMM YYYY"),
+        link: true,
+        onClickLink: () => {
+          goTo(
+            `/app/view/incidents/${item.datastakeId}/identification${getSourceParam(
+              item?.sourceId
+            )}`
+          );
+        },
+        items: [
+          { label: t("nashiriki::Source"), value: item?.source || "--" },
+          item.severity
+            ? { label: t("Severity"), value: renderSeverity(item.severity) }
+            : null,
+        ].filter(Boolean),
+      };
+    },
+    [t, goTo, getSourceParam, renderSeverity]
+  );
 
   return (
     <Widget
@@ -51,28 +135,7 @@ export default function IncidentsTimeline({
           seriesField="severity"
           colors={severityColors}
           doConstraints={false}
-          renderTooltip={({ item }) => {
-            if (!item) return { title: "", items: [] };
-
-            return {
-              title: item.name || item.label || t("Undetermined"),
-              subTitle: renderDateFormatted(item.date, "DD MMM YYYY"),
-              link: true,
-              onClickLink: () => {
-                goTo(
-                  `/app/view/incidents/${item.datastakeId}/identification${getSourceParam(
-                    item?.sourceId
-                  )}`
-                );
-              },
-              items: [
-                { label: t("nashiriki::Source"), value: item?.source || "--" },
-                item.severity
-                  ? { label: t("Severity"), value: renderSeverity(item.severity) }
-                  : null,
-              ].filter(Boolean),
-            };
-          }}
+          renderTooltip={getTooltipContent}
         />
       </div>
     </Widget>

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/ProblemSolver/hook.js

@@ -1,77 +1,55 @@
 import { useEffect, useMemo, useState } from "react";
 import DashboardService from "../../../../../../../services/DashboardService.js";
-import { useWidgetFetch } from "../../../../../../../hooks/useWidgetFetch.js";
 
-const distributionColors = ["#3061A8", "#6698E4", "#A6C3EF", "#D6E3F8", "#E6EEFB"];
 
-export default function useProblemSolvers({ t = () => {}, selectedRange, selectedPartners }) {
+export default function useProblemSolvers({ t = () => {} } = {}) {
 	const [filters, setFilters] = useState({
 		administrativeLevel1: "all",
 	});
 
 	const [filterOptions, setFilterOptions] = useState([]);
 
-	const defaultFetchConfig = useMemo(
-        () => ({
-            url: "/problem-solvers",
-            basepath: "dashboard/conflict-management",
-            filters: {
-                ...filters,
-                period: selectedRange,
-                sources: selectedPartners?.partners || [],
-            },
-            stop: selectedPartners?.loading,
-        }),
-        [filters, selectedRange, selectedPartners],
-    );
-    
-    const { data, loading } = useWidgetFetch({ config: defaultFetchConfig });
 
 	useEffect(() => {
-		if(Object.keys(data).length > 0) {
+		async function fetchOptions() {
+			try {
+				const { data } = await DashboardService.getWidgetConflictManagement(
+					"/problem-solvers",
+					{},
+					"dashboard/conflict-management"
+				);
 
-			const options = Object.keys(data).flatMap((key) => {
-				const actions = data[key].actions;
+				const all = Object.keys(data);
 
-				return actions.filter((action) => action.location !== undefined).flatMap((action) => {
-					const administrativeLevel1 = action?.location?.administrativeLevel1;
-					const name =
-						action?.location?.linking?.SCL?.[administrativeLevel1]?.name;
-					return {
-						label: name,
-						value: administrativeLevel1,
-					};
-				});
-			}).filter((item) => item !== undefined);
+				const options = all
+					.map((key) => {
+						const actions = data[key].actions;
 
-			const uniqueOptions = Array.from(
-				new Map(options.map(item => [item.value, item])).values()
-			);
-			
-			setFilterOptions(uniqueOptions);
-		}
-	}, [data])
+						return actions.map((action) => {
+							if (action.location === undefined) {
+								return;
+							}
+							const administrativeLevel1 = action?.location?.administrativeLevel1;
+							const name =
+								action?.location?.linking?.SCL?.[administrativeLevel1]?.name;
+							return {
+								label: name,
+								value: administrativeLevel1,
+							};
+						});
+					})
+					.flat()
+					.filter((item) => item !== undefined);
 
-    const pieData = useMemo(() => {
-        if (!data || Array.isArray(data)) return []; 
-        const all = Object.keys(data);
-        const totalActions = all.reduce((acc, key) => acc + (data[key]?.actions?.length || 0), 0);
+				setFilterOptions(options);
+			} catch (err) {
+				console.log(err);
+			}
+		}
 
-        return all
-            .sort((a, b) => (data[b]?.actions?.length || 0) - (data[a]?.actions?.length || 0))
-            .map((key, index) => {
-                const item = data[key];
-                return {
-                   value: item?.actions?.length,
-                   label: item?.implementerData?.name,
-                   implementerData: item?.implementerData,
-                   color: distributionColors[index % distributionColors.length],
-                   percent: totalActions ? (item?.actions?.length / totalActions) : 0,
-                }
-            });
-    }, [data]);
+		fetchOptions();
+	}, []);
 
-	const isEmpty = !pieData.length;
 
 	const filtersConfig = useMemo(
 		() => ({
@@ -101,8 +79,5 @@ export default function useProblemSolvers({ t = () => {}, selectedRange, selecte
 	return {
 		filters,
 		filtersConfig,
-		pieData,
-		loading,
-		isEmpty,
 	};
 }

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/ProblemSolver/index.js

@@ -3,28 +3,77 @@ import PropTypes from 'prop-types';
 import { renderTooltipJsx } from '../../../../../../../utils/tooltip.js';
 import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
 import Chart from '../../../../../../../core/components/Charts/PieChart/chart.jsx';
+import {useWidgetFetch} from '../../../../../../../hooks/useWidgetFetch.js';
+import DashboardService from '../../../../../../../services/DashboardService.js';
 import useProblemSolvers from './hook.js';
 
-function ProblemSolvers({ 
-    selectedPartners = {}, 
-    loading: parentLoading = false, 
-    t=()=>{}, 
-    theme = {}, 
-    selectedRange,
-    goTo = () => {}, 
-    getRedirectLink = () => {}
-}) {
-    const { 
-        filters, 
-        filtersConfig, 
-        pieData, 
-        loading, 
-        isEmpty 
-    } = useProblemSolvers({ 
-            t, 
-            selectedRange, 
-            selectedPartners 
+const distributionColors = ["#3061A8", "#6698E4", "#A6C3EF", "#D6E3F8", "#E6EEFB"];
+
+function ProblemSolvers({ selectedPartners = {}, loading: parentLoading = false, t=()=>{}, theme = {}, selectedRange ,goTo = () => {}, getRedirectLink = () => {}}) {
+    const { filters, filtersConfig } = useProblemSolvers({ t });
+
+    const defaultFetchConfig = useMemo(
+        () => ({
+            url: "/problem-solvers",
+            basepath: "dashboard/conflict-management",
+            filters: {
+                ...filters,
+                period: selectedRange,
+                sources: selectedPartners?.partners || [],
+            },
+            defaultData: [],
+            stop: selectedPartners?.loading,
+        }),
+        [filters, selectedRange, selectedPartners],
+    );
+    
+    const getData = useCallback(({ url, filters, basepath }) => {
+        return DashboardService.getWidgetConflictManagement(url, filters, basepath);
+    }, []);
+
+    const { data, loading } = useWidgetFetch({ 
+        config: defaultFetchConfig,
+        getData 
+    });
+
+    const pieData = useMemo(() => {
+        if (!data || Array.isArray(data)) return []; 
+        const all = Object.keys(data);
+        const totalActions = all.reduce((acc, key) => acc + (data[key]?.actions?.length || 0), 0);
+
+        return all
+            .sort((a, b) => (data[b]?.actions?.length || 0) - (data[a]?.actions?.length || 0))
+            .map((key, index) => {
+                const item = data[key];
+                return {
+                   value: item?.actions?.length,
+                   label: item?.implementerData?.name,
+                   implementerData: item?.implementerData,
+                   color: distributionColors[index % distributionColors.length],
+                   percent: totalActions ? (item?.actions?.length / totalActions) : 0,
+                }
+            });
+    }, [data]);
+
+    const isEmpty = !pieData.length;
+
+    const getTooltipChildren = useCallback((items) => {
+        const item = Array.isArray(items) ? items[0] : items;
+        
+        return renderTooltipJsx({
+            title: item?.label || t("Undetermined"),
+            link: true,
+            onClickLink: () => {
+                goTo("/app/corrective-actions");
+            },
+            items: [
+                {
+                    label: t("Number of actions"),
+                    value: item?.value,
+                },
+            ],
         });
+    }, [t, goTo]);
 
     return (
         <Widget
@@ -42,23 +91,7 @@ function ProblemSolvers({
                 isPie
                 t={t}
                 isEmpty={isEmpty}
-                getTooltipChildren={(items) => {
-                    const item = Array.isArray(items) ? items[0] : items;
-                    
-                    return renderTooltipJsx({
-                        title: item?.label || t("Undetermined"),
-                        link: true,
-                        onClickLink: () => {
-                            goTo("/app/corrective-actions");
-                        },
-                        items: [
-                            {
-                                label: t("Number of actions"),
-                                value: item?.value,
-                            },
-                        ],
-                    });
-                }}
+                getTooltipChildren={getTooltipChildren}
             />
         </Widget>
     );

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/TerritorialDistribution/index.js

@@ -3,37 +3,88 @@ import PropTypes from 'prop-types';
 import { renderTooltipJsx } from '../../../../../../../utils/tooltip.js';
 import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
 import Chart from '../../../../../../../core/components/Charts/PieChart/chart.jsx';
-import { buildQueryString } from '../../../../../../../../helpers/urlHelpers.js';
-import { useTerritorialDistribution } from './hook.js';
+import {useWidgetFetch} from '../../../../../../../hooks/useWidgetFetch.js';
+import DashboardService from '../../../../../../../services/DashboardService.js';
+import { getColors } from './config.js';
 
-function TerritorialDistribution({ 
-    selectedPartners = {}, 
-    loading: parentLoading = false, 
-    t = (s) => s, theme = {}, 
-    category = "conflict", 
-    selectedRange,
-    goTo = () => {}, 
-    getRedirectLink = () => {}
-}) {
-    const { 
-        pieData, 
-        loading, 
-        isEmpty 
-    } = useTerritorialDistribution({ 
-        category, 
-        selectedRange, 
-        selectedPartners, 
-        theme,
+function TerritorialDistribution({ selectedPartners = {}, loading: parentLoading = false, t = (s) => s, theme = {}, category = "conflict", selectedRange ,goTo = () => {}, getRedirectLink = () => {}}) {
+    const colors = getColors(theme);
+
+    const defaultFetchConfig = useMemo(
+        () => ({
+            url: "/territorial-distribution",
+            basepath: "dashboard/conflict-management",
+            filters: {
+                category,
+                period: selectedRange,
+                sources: selectedPartners?.partners || [],
+            },
+            defaultData: {},
+            stop: selectedPartners?.loading,
+        }),
+        [category, selectedRange, selectedPartners],
+    );
+
+    const getData = useCallback(({ url, filters, basepath }) => {
+        return DashboardService.getWidgetConflictManagement(url, filters, basepath);
+    }, []);
+
+    const { data, loading } = useWidgetFetch({ 
+        config: defaultFetchConfig,
+        getData 
     });
 
+    const pieData = useMemo(() => {
+        if (!data || Array.isArray(data)) return []; 
+        const all = Object.keys(data);
+        const totalEvents = all.reduce((acc, key) => acc + (data[key]?.events?.length || 0), 0);
+
+        return all
+            .sort((a, b) => (data[b]?.events?.length || 0) - (data[a]?.events?.length || 0))
+            .map((key, index) => {
+                const item = data[key];
+                return {
+                   value: item?.events?.length,
+                   label: item?.locationData?.name,
+                   locationData: item?.locationData,
+                   color: colors[index % colors.length],
+                   percent: totalEvents ? (item?.events?.length / totalEvents) : 0,
+                }
+            });
+    }, [data, colors]);
+
+    const isEmpty = !pieData.length;
+
+    const getTooltipChildren = useCallback((items) => {
+        const item = Array.isArray(items) ? items[0] : items;
+        
+        return renderTooltipJsx({
+            title: item?.label || t("Undetermined"),
+            link: true,
+            onClickLink: () => {
+                 if (item?.label) {
+                     goTo(
+                         `/app/incidents?administrativeLevel1=${item?.locationData?.administrativeLevel1}&administrativeLevel2=${item?.locationData?.administrativeLevel2}&country=${item?.locationData?.country}`,
+                     );
+                 } else {
+                    goTo("/app/incident");
+                 }
+            },
+            items: [
+                {
+                    label: t("Number of incidents"),
+                    value: item?.value,
+                },
+            ],
+        });
+    }, [t, goTo]);
+
     return (
         <Widget
             loading={loading || parentLoading}
             title={t("Territorial Distribution")}
-
-            className="with-border-header h-w-btn-header"
+            className="with-border-header"
         >
-   
             <Chart
                 mouseXOffset={10}
                 mouseYOffset={10}
@@ -43,34 +94,8 @@ function TerritorialDistribution({
                 isPie
                 t={t}
                 isEmpty={isEmpty}
-                getTooltipChildren={(items) => {
-                    const item = Array.isArray(items) ? items[0] : items;
-                    
-                    return renderTooltipJsx({
-                        title: item?.label || t("Undetermined"),
-                        link: true,
-                        onClickLink: () => {
-                             if (item?.label) {
-                                const queryString = buildQueryString({
-                                    administrativeLevel1: item?.locationData?.administrativeLevel1,
-                                    administrativeLevel2: item?.locationData?.administrativeLevel2,
-                                    country: item?.locationData?.country,
-                                });
-                                 goTo(`/app/incidents${queryString}`);
-                             } else {
-                                goTo("/app/incidents");
-                             }
-                        },
-                        items: [
-                            {
-                                label: t("Number of incidents"),
-                                value: item?.value,
-                            },
-                        ],
-                    });
-                }}
+                getTooltipChildren={getTooltipChildren}
             />
-            		
         </Widget>
     );
 }