From aa996f29e01a090624e47461cbfe85c9771a5ae3 Mon Sep 17 00:00:00 2001 From: cesarLima1 <105736261+cesarLima1@users.noreply.github.com> Date: Mon, 16 Dec 2024 13:40:58 -0400 Subject: [PATCH] [TM-1466] sort list of polygons (#749) * [TM-1466] sort list of polygons * [TM-1466] adjust no data to display div --- .../MonitoredTab/components/DataCard.tsx | 18 ++------ .../components/MonitoredCharts.tsx | 30 +++++++++++++- .../MonitoredTab/components/NoDataState.tsx | 2 +- .../MonitoredTab/hooks/useMonitoredData.ts | 41 ++++++++++++++++--- 4 files changed, 68 insertions(+), 23 deletions(-) diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx index f117caeb..bb523eae 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx @@ -384,10 +384,8 @@ const DataCard = ({ const basename = useBasename(); const mapFunctions = useMap(); const { record } = useShowContext(); - const { polygonsIndicator, treeCoverLossData, treeCoverLossFiresData, isLoadingIndicator } = useMonitoredData( - type!, - record.uuid - ); + const { polygonsIndicator, treeCoverLossData, treeCoverLossFiresData, isLoadingIndicator, polygonOptions } = + useMonitoredData(type!, record.uuid); const filteredPolygonsIndicator = selectedPolygonUuid !== "0" ? polygonsIndicator?.filter((polygon: any) => polygon.poly_id === selectedPolygonUuid) @@ -428,14 +426,6 @@ const DataCard = ({ const [topHeaderSecondTable, setTopHeaderSecondTable] = useState("70px"); const totalElemIndicator = filteredPolygonsIndicator?.length ? filteredPolygonsIndicator?.length - 1 : null; - const polygonsList = [ - { title: "All Polygons", value: "0" }, - ...(polygonsIndicator ?? []).map((item: any) => ({ - title: item.poly_name, - value: item.poly_id - })) - ]; - useEffect(() => { if (typeof window !== "undefined") { const width = window.innerWidth; @@ -654,14 +644,14 @@ const DataCard = ({ -
+
setSelectedPolygonUuid(option[0])} /> diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx index 4542d7b6..7f315ba4 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import classNames from "classnames"; +import React, { useEffect, useState } from "react"; import { ReactNode } from "react"; import { When } from "react-if"; @@ -81,6 +82,27 @@ const MonitoredCharts = ({ record, totalHectaresRestoredGoal }: MonitoredChartsProps) => { + const [hasNoData, setHasNoData] = useState(false); + + useEffect(() => { + const noData = selected.some(chartId => { + switch (chartId) { + case "1": + case "2": + return !parsedData?.length; + case "3": + return !ecoRegionData?.chartData?.length; + case "4": + return !strategiesData?.length; + case "5": + return !landUseData?.graphicTargetLandUseTypes?.length; + default: + return false; + } + }); + setHasNoData(noData); + }, [selected, parsedData, ecoRegionData, strategiesData, landUseData]); + const renderChart = (chartId: React.Key) => { switch (chartId) { case "1": @@ -124,7 +146,11 @@ const MonitoredCharts = ({ }; return ( -
+
{selected.map( (id: React.Key | null | undefined) => id != null && ( diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx index c4125b03..fdac5578 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx @@ -6,7 +6,7 @@ import Icon from "@/components/extensive/Icon/Icon"; import { IconNames } from "@/components/extensive/Icon/Icon"; export const NoDataState = () => ( -
+
No Data to Display diff --git a/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts b/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts index fb8fc452..00d374bd 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts +++ b/src/admin/components/ResourceTabs/MonitoredTab/hooks/useMonitoredData.ts @@ -1,5 +1,5 @@ import { useT } from "@transifex/react"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { ModalId } from "@/components/extensive/Modal/ModalConst"; import { useModalContext } from "@/context/modal.provider"; @@ -82,6 +82,11 @@ type InterfaceIndicatorPolygonsStatus = { approved: number; }; +interface PolygonOption { + title: string; + value: string; +} + export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { const t = useT(); const { searchTerm, indicatorSlug, setLoadingAnalysis, setIndicatorSlugAnalysis } = useMonitoredDataContext(); @@ -89,6 +94,7 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { const [isLoadingVerify, setIsLoadingVerify] = useState(false); const { openNotification } = useNotificationContext(); const [treeCoverLossData, setTreeCoverLossData] = useState([]); + const [polygonOptions, setPolygonOptions] = useState([{ title: "All Polygons", value: "0" }]); const [treeCoverLossFiresData, setTreeCoverLossFiresData] = useState([]); const [analysisToSlug, setAnalysisToSlug] = useState({ treeCoverLoss: [], @@ -172,11 +178,33 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { } ); - const filteredPolygons = indicatorData?.filter( - (polygon: Indicators) => - polygon?.poly_name?.toLowerCase().includes(searchTerm?.toLowerCase()) || - polygon?.site_name?.toLowerCase().includes(searchTerm?.toLowerCase()) - ); + const filteredPolygons = useMemo(() => { + if (!indicatorData) return []; + + return indicatorData + .filter( + (polygon: Indicators) => + polygon?.poly_name?.toLowerCase().includes(searchTerm?.toLowerCase()) || + polygon?.site_name?.toLowerCase().includes(searchTerm?.toLowerCase()) + ) + .sort((a, b) => (a.poly_name || "").localeCompare(b.poly_name || "")); + }, [indicatorData, searchTerm]); + + useEffect(() => { + if (!indicatorData) return; + + const options = [ + { title: "All Polygons", value: "0" }, + ...indicatorData + .map((item: any) => ({ + title: item.poly_name || "", + value: item.poly_id || "" + })) + .sort((a, b) => a.title.localeCompare(b.title)) + ]; + + setPolygonOptions(options); + }, [indicatorData]); const headerBarPolygonStatus = dataPolygonOverview.map(status => { const key = status.status_key as keyof InterfaceIndicatorPolygonsStatus; @@ -251,6 +279,7 @@ export const useMonitoredData = (entity?: EntityName, entity_uuid?: string) => { return { polygonsIndicator: filteredPolygons, + polygonOptions, indicatorPolygonsStatus, headerBarPolygonStatus, totalPolygonsStatus: totalPolygonsApproved,