From 8979cec7d654689f7e768b6a88df8facbef6632e Mon Sep 17 00:00:00 2001 From: David Inga Date: Tue, 19 Dec 2023 09:54:44 +0100 Subject: [PATCH 1/4] download data now downloads according the api --- client/CHANGELOG.md | 4 ++ .../analysis-table/component.tsx | 59 ++++++++++++------- client/src/hooks/impact/index.ts | 4 +- 3 files changed, 43 insertions(+), 24 deletions(-) diff --git a/client/CHANGELOG.md b/client/CHANGELOG.md index 4999a046f..d33d755e1 100644 --- a/client/CHANGELOG.md +++ b/client/CHANGELOG.md @@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/). ### Added - Added a new filter for business units in the analysis page +- On the analysis page, the user can now navigates in the subcategories in the charts view [LANDGRIF-1507](https://vizzuality.atlassian.net/browse/LANDGRIF-1507) + +### Changed +- Download data button in the analysis page now downloads the data according to the filters applied from the API [LANDGRIF-1502](https://vizzuality.atlassian.net/browse/LANDGRIF-1502) ### Fixed - Renew token when it is expired diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx index 761247c06..ca1e13a35 100644 --- a/client/src/containers/analysis-visualization/analysis-table/component.tsx +++ b/client/src/containers/analysis-visualization/analysis-table/component.tsx @@ -114,17 +114,30 @@ const AnalysisTable = () => { return {}; }, [sortingState]); - const params = { - indicatorIds, - startYear: filters.startYear, - endYear: filters.endYear, - groupBy: filters.groupBy, - ...restFilters, - ...sortingParams, - scenarioId: currentScenario, - 'page[number]': paginationState.pageIndex, - 'page[size]': paginationState.pageSize, - }; + const params = useMemo( + () => ({ + indicatorIds, + startYear: filters.startYear, + endYear: filters.endYear, + groupBy: filters.groupBy, + ...restFilters, + ...sortingParams, + scenarioId: currentScenario, + 'page[number]': paginationState.pageIndex, + 'page[size]': paginationState.pageSize, + }), + [ + currentScenario, + filters.endYear, + filters.groupBy, + filters.startYear, + indicatorIds, + paginationState.pageIndex, + paginationState.pageSize, + restFilters, + sortingParams, + ], + ); const plainImpactData = useImpactData(params, { enabled: !isComparisonEnabled && isEnable, @@ -173,17 +186,19 @@ const AnalysisTable = () => { return impactTable[0]?.rows[0]?.values.find((value) => value.isProjected)?.year; }, [impactTable]); - const handleDownloadData = useCallback(() => { - const csv = downloadImpactData.mutate(); - // if (csv) { - // const link = document.createElement('a'); - // link.setAttribute('href', csv); - // link.setAttribute('download', 'data.csv'); - // document.body.appendChild(link); - // link.click(); - // document.body.removeChild(link); - // } - }, [downloadImpactData]); + const handleDownloadData = useCallback(async () => { + // do not pass pagination params to download data endpoint + const csv = await downloadImpactData.mutateAsync(omit(params, 'page[number]', 'page[size]')); + if (csv) { + const url = window.URL.createObjectURL(new Blob([csv])); + const link = document.createElement('a'); + link.setAttribute('href', url); + link.setAttribute('download', `impact_data_${Date.now()}.csv`); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } + }, [downloadImpactData, params]); const handleExpandedChange = useCallback( (table: TableType>) => { diff --git a/client/src/hooks/impact/index.ts b/client/src/hooks/impact/index.ts index 309bf88eb..1f43bdd74 100644 --- a/client/src/hooks/impact/index.ts +++ b/client/src/hooks/impact/index.ts @@ -66,8 +66,8 @@ export const useImpactData = >( }; export const useDownloadImpactData = (options) => { - const requestDownload = () => - apiRawService.get('/impact/table/report').then((response) => response.data); + const requestDownload = (params) => + apiRawService.get('/impact/table/report', { params }).then((response) => response.data); const mutation = useMutation(requestDownload, { mutationKey: ['download-impact-data'], ...options, From e9504d380e25373fc5bf119a18d3d022539981db Mon Sep 17 00:00:00 2001 From: David Inga Date: Thu, 21 Dec 2023 12:48:50 +0100 Subject: [PATCH 2/4] added comparison data download requests --- client/src/components/search/component.tsx | 2 +- .../analysis-table/component.tsx | 54 +++++++++++++++++-- client/src/hooks/impact/index.ts | 35 +++++++++++- 3 files changed, 84 insertions(+), 7 deletions(-) diff --git a/client/src/components/search/component.tsx b/client/src/components/search/component.tsx index c8434bd0e..b34fb221e 100644 --- a/client/src/components/search/component.tsx +++ b/client/src/components/search/component.tsx @@ -65,7 +65,7 @@ export const Search: React.FC = ({
diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx index ca1e13a35..afab742a1 100644 --- a/client/src/containers/analysis-visualization/analysis-table/component.tsx +++ b/client/src/containers/analysis-visualization/analysis-table/component.tsx @@ -11,7 +11,12 @@ import { useAppSelector } from 'store/hooks'; import { filtersForTabularAPI } from 'store/features/analysis/selector'; import { scenarios } from 'store/features/analysis/scenarios'; import { useIndicators } from 'hooks/indicators'; -import { useImpactData, useDownloadImpactData } from 'hooks/impact'; +import { + useImpactData, + useDownloadImpactData, + useDownloadImpactActualVsScenarioData, + useDownloadImpactScenarioVsScenarioData, +} from 'hooks/impact'; import { useImpactComparison, useImpactScenarioComparison } from 'hooks/impact/comparison'; import AnalysisDynamicMetadata from 'containers/analysis-visualization/analysis-dynamic-metadata'; import { Button } from 'components/button'; @@ -71,6 +76,20 @@ const AnalysisTable = () => { onError: handleResponseError, }); + const downloadActualVsScenarioData = useDownloadImpactActualVsScenarioData({ + onSuccess: () => { + toast.success('Data was downloaded successfully'); + }, + onError: handleResponseError, + }); + + const downloadScenarioVsScenarioData = useDownloadImpactScenarioVsScenarioData({ + onSuccess: () => { + toast.success('Data was downloaded successfully'); + }, + onError: handleResponseError, + }); + const filters = useAppSelector(filtersForTabularAPI); const useIsComparison = useCallback( @@ -187,8 +206,27 @@ const AnalysisTable = () => { }, [impactTable]); const handleDownloadData = useCallback(async () => { - // do not pass pagination params to download data endpoint - const csv = await downloadImpactData.mutateAsync(omit(params, 'page[number]', 'page[size]')); + let csv = null; + // actual vs scenario + if (!currentScenario && scenarioToCompare) { + csv = await downloadActualVsScenarioData.mutateAsync({ + ...omit(params, 'page[number]', 'page[size]'), + comparedScenarioId: scenarioToCompare, + }); + } + // scenario vs scenario + else if (currentScenario && scenarioToCompare) { + csv = await downloadScenarioVsScenarioData.mutateAsync({ + ...omit(params, 'page[number]', 'page[size]'), + baseScenarioId: currentScenario, + comparedScenarioId: scenarioToCompare, + }); + } + // no scenario or comparison + else { + csv = await downloadImpactData.mutateAsync(omit(params, 'page[number]', 'page[size]')); + } + if (csv) { const url = window.URL.createObjectURL(new Blob([csv])); const link = document.createElement('a'); @@ -198,7 +236,15 @@ const AnalysisTable = () => { link.click(); document.body.removeChild(link); } - }, [downloadImpactData, params]); + // do not pass pagination params to download data endpoint + }, [ + currentScenario, + downloadActualVsScenarioData, + downloadImpactData, + downloadScenarioVsScenarioData, + params, + scenarioToCompare, + ]); const handleExpandedChange = useCallback( (table: TableType>) => { diff --git a/client/src/hooks/impact/index.ts b/client/src/hooks/impact/index.ts index 1f43bdd74..bdcec9747 100644 --- a/client/src/hooks/impact/index.ts +++ b/client/src/hooks/impact/index.ts @@ -65,12 +65,43 @@ export const useImpactData = >( return query; }; +const requestDownload = (params) => + apiRawService.get('/impact/table/report', { params }).then((response) => response.data); + export const useDownloadImpactData = (options) => { - const requestDownload = (params) => - apiRawService.get('/impact/table/report', { params }).then((response) => response.data); const mutation = useMutation(requestDownload, { mutationKey: ['download-impact-data'], ...options, }); return mutation; }; + +const requestActualVsScenarioDownload = (params) => + apiRawService + .get('/impact/compare/scenario/vs/actual/report', { + params, + }) + .then((response) => response.data); + +export const useDownloadImpactActualVsScenarioData = (options) => { + const mutation = useMutation(requestActualVsScenarioDownload, { + mutationKey: ['download-actual-vs-scenario-data'], + ...options, + }); + return mutation; +}; + +const requestScenarioVsScenarioDownload = (params) => + apiRawService + .get('/impact/compare/scenario/vs/scenario/report', { + params, + }) + .then((response) => response.data); + +export const useDownloadImpactScenarioVsScenarioData = (options) => { + const mutation = useMutation(requestScenarioVsScenarioDownload, { + mutationKey: ['download-scenario-vs-scenario-data'], + ...options, + }); + return mutation; +}; From b12a2a0490b117a8f9a634daa2b60e90d71238e1 Mon Sep 17 00:00:00 2001 From: David Inga Date: Thu, 21 Dec 2023 15:32:28 +0100 Subject: [PATCH 3/4] fixed download for scenario vs scenario --- .../analysis-visualization/analysis-table/component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx index afab742a1..42b9cf6d7 100644 --- a/client/src/containers/analysis-visualization/analysis-table/component.tsx +++ b/client/src/containers/analysis-visualization/analysis-table/component.tsx @@ -207,6 +207,7 @@ const AnalysisTable = () => { const handleDownloadData = useCallback(async () => { let csv = null; + console.log(currentScenario, scenarioToCompare); // actual vs scenario if (!currentScenario && scenarioToCompare) { csv = await downloadActualVsScenarioData.mutateAsync({ @@ -217,7 +218,7 @@ const AnalysisTable = () => { // scenario vs scenario else if (currentScenario && scenarioToCompare) { csv = await downloadScenarioVsScenarioData.mutateAsync({ - ...omit(params, 'page[number]', 'page[size]'), + ...omit(params, 'page[number]', 'page[size]', 'scenarioId'), baseScenarioId: currentScenario, comparedScenarioId: scenarioToCompare, }); From da5d9779b0e6443f6d078a243f41ef483f87652e Mon Sep 17 00:00:00 2001 From: David Inga Date: Thu, 21 Dec 2023 16:07:09 +0100 Subject: [PATCH 4/4] added loader in download button --- .../analysis-table/component.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx index 42b9cf6d7..08679003b 100644 --- a/client/src/containers/analysis-visualization/analysis-table/component.tsx +++ b/client/src/containers/analysis-visualization/analysis-table/component.tsx @@ -207,7 +207,6 @@ const AnalysisTable = () => { const handleDownloadData = useCallback(async () => { let csv = null; - console.log(currentScenario, scenarioToCompare); // actual vs scenario if (!currentScenario && scenarioToCompare) { csv = await downloadActualVsScenarioData.mutateAsync({ @@ -534,9 +533,19 @@ const AnalysisTable = () => { variant="secondary" size="base" className="flex-shrink-0" - disabled={isLoading} + disabled={ + isLoading || + downloadImpactData.isLoading || + downloadActualVsScenarioData.isLoading || + downloadScenarioVsScenarioData.isLoading + } icon={} onClick={handleDownloadData} + loading={ + downloadImpactData.isLoading || + downloadActualVsScenarioData.isLoading || + downloadScenarioVsScenarioData.isLoading + } > Download Data