/eligibility",
+ url: "/location//eligibility/table",
},
{
name: "Allocation",
@@ -58,17 +58,12 @@ export const countryDetailTabs: TabProps[] = [
],
},
{
- name: "More",
- tabs: [
- {
- name: "Results",
- url: "/location//results",
- },
- {
- name: "Documents",
- url: "/location//documents",
- },
- ],
+ name: "Results",
+ url: "/location//results",
+ },
+ {
+ name: "Documents",
+ url: "/location//documents",
},
];
@@ -99,21 +94,16 @@ export const grantDetailTabs: TabProps[] = [
],
},
{
- name: "More",
- tabs: [
- {
- name: "Performance Rating",
- url: "/grant///performance-rating",
- },
- {
- name: "Targets and Results",
- url: "/grant///targets-results",
- },
- {
- name: "Documents",
- url: "/grant///documents",
- },
- ],
+ name: "Performance Rating",
+ url: "/grant///performance-rating",
+ },
+ {
+ name: "Targets and Results",
+ url: "/grant///targets-results",
+ },
+ {
+ name: "Documents",
+ url: "/grant///documents",
},
];
diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx
index 02878cd35..a1319ee5c 100644
--- a/src/app/components/Table/Expandable/Toolbar.tsx
+++ b/src/app/components/Table/Expandable/Toolbar.tsx
@@ -251,8 +251,10 @@ export function TableToolbar(props: TableToolbarProps) {
{props.columns.map((c, index) => (
void;
onSortByChange: (value: string) => void;
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index f99388463..3466c8314 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -14,6 +14,7 @@ import ArrowDownward from "@material-ui/icons/ArrowDownward";
import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
import TableContainer from "@material-ui/core/TableContainer";
import { tablecell } from "app/components/Table/Simple/styles";
+import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { TableToolbar } from "app/components/Table/Expandable/Toolbar";
import { TableToolbarCols } from "app/components/Table/Expandable/data";
import {
@@ -36,9 +37,11 @@ function Row(props: {
columns: SimpleTableColumn[];
paddingLeft?: number;
visibleColumnsIndexes: number[];
+ formatNumbers?: boolean;
+ forceExpand?: boolean;
}) {
const classes = useRowStyles();
- const [open, setOpen] = React.useState(false);
+ const [open, setOpen] = React.useState(Boolean(props.forceExpand));
const firstColumnWidth = props.columns.length > 3 ? "30%" : "";
const firstColumnPadding = props.paddingLeft ? props.paddingLeft : 40;
@@ -80,58 +83,65 @@ function Row(props: {
{filter(
props.columns,
(_c, index) => props.visibleColumnsIndexes.indexOf(index) > -1
- ).map((column: SimpleTableColumn, index: number) => (
-
- {
+ const value = get(props.row, column.key, "");
+ let formattedValue =
+ props.formatNumbers && !Number.isNaN(value)
+ ? formatFinancialValue(value, true)
+ : value;
+ return (
+
+ * {
- @supports (-webkit-touch-callout: none) and
- (not (translate: none)) {
- &:not(:last-child) {
- margin-right: 12px;
+ > * {
+ @supports (-webkit-touch-callout: none) and
+ (not (translate: none)) {
+ &:not(:last-child) {
+ margin-right: 12px;
+ }
}
}
- }
- > svg {
- transition: transform 0.1s ease-in-out;
- transform: rotate(${open ? "0deg" : "-180deg"});
- }
- `}
- >
- {index === 0 && props.row.children &&
-
- ))}
+
+ );
+ })}
/overview": [],
"/location//disbursements/treemap": filter(
@@ -302,105 +346,120 @@ export const pathnameToFilterGroups = {
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//disbursements/table": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//disbursements/time-cycle": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//disbursements/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//signed/treemap": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//signed/table": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//signed/time-cycle": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//signed/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//commitment/treemap": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//commitment/table": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//commitment/time-cycle": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//commitment/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//budgets/flow": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//budgets/time-cycle": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//budgets/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//allocations": filter(
filtergroups,
@@ -420,21 +479,24 @@ export const pathnameToFilterGroups = {
),
"/location//documents": filter(
filtergroups,
- (fg: FilterGroupProps) => fg.name === "Components"
+ (fg: FilterGroupProps) =>
+ fg.name === "Components" || fg.name === "Document Types"
),
"/location//grants": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//grants/list": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/location//results": filter(
filtergroups,
@@ -446,84 +508,96 @@ export const pathnameToFilterGroups = {
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//disbursements/table": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//disbursements/time-cycle": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//disbursements/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//signed/treemap": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//signed/table": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//signed/time-cycle": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//signed/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//commitment/treemap": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//commitment/table": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//commitment/time-cycle": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//commitment/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//budgets/flow": filter(
filtergroups,
@@ -537,27 +611,31 @@ export const pathnameToFilterGroups = {
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//budgets/map": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//grants": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
"/partner//grants/list": filter(
filtergroups,
(fg: FilterGroupProps) =>
fg.name !== "Locations" &&
fg.name !== "Donors" &&
- fg.name !== "Replenishment Periods"
+ fg.name !== "Replenishment Periods" &&
+ fg.name !== "Document Types"
),
};
diff --git a/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx b/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx
index 8199f4525..9bd30f7fd 100644
--- a/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx
@@ -45,6 +45,7 @@ const locationsToNotShowImageExport = [
"/grant//commitment/table",
"/viz/pledges-contributions/map",
"/viz/pledges-contributions/table",
+ "/viz/allocations/table",
"/viz/budgets/map",
"/viz/allocations/map",
"/grants",
diff --git a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
index eb48b4920..029b2e6df 100644
--- a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
@@ -48,6 +48,7 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) {
}>(
getControlItems(
params.vizType,
+ params.subType,
history.location.pathname,
params.code,
params.period
@@ -143,12 +144,13 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) {
setControlItems(
getControlItems(
params.vizType,
+ params.subType,
history.location.pathname,
params.code,
params.period
)
),
- [params.vizType]
+ [params.vizType, history.location.pathname, params.code, params.period]
);
React.useEffect(
@@ -220,7 +222,8 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) {
/>
)}
{(params.vizType === "allocations" ||
- params.vizType === "allocation") &&
)}
{params.vizType === "pledges-contributions" &&
- (params.subType === "map" ||
- params.subType === "table" ||
- params.subType === "treemap") && (
+ (params.subType === "map" || params.subType === "treemap") && (
@@ -271,7 +272,6 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) {
params.vizType === "signed" ||
params.vizType === "pledges-contributions") &&
params.subType === "treemap" && (
- // ""
- Eligibility
+ Eligibility
Allocations
,
diff --git a/src/app/hooks/useFilterOptions.tsx b/src/app/hooks/useFilterOptions.tsx
index 3b0c1a906..f534ae48a 100644
--- a/src/app/hooks/useFilterOptions.tsx
+++ b/src/app/hooks/useFilterOptions.tsx
@@ -15,6 +15,7 @@ export interface UseFilterOptionsReturn {
"Partner Types": FilterGroupOptionModel[];
"Grant Status": FilterGroupOptionModel[];
"Replenishment Periods": FilterGroupOptionModel[];
+ "Document Types": FilterGroupOptionModel[];
Donors: FilterGroupOptionModel[];
}
@@ -64,6 +65,17 @@ export function useFilterOptions(
(state) => state.ToolBoxPanelDonorMapViewState.value
);
+ const documentTypes = [
+ {
+ label: "Application",
+ value: "Application",
+ },
+ {
+ label: "Country Profiles",
+ value: "Country Profiles",
+ },
+ ];
+
React.useEffect(() => {
if (locations.length === 0) {
getLocations({});
@@ -92,6 +104,7 @@ export function useFilterOptions(
"Partner Types": partnerTypes,
"Grant Status": status,
"Replenishment Periods": replenishmentPeriods,
+ "Document Types": documentTypes,
Donors:
location.pathname === "/viz/pledges-contributions/map"
? get(find(donors, { label: donorsMapView }), "subOptions", donors)
diff --git a/src/app/hooks/useGetAllVizData.tsx b/src/app/hooks/useGetAllVizData.tsx
index a733823fb..5b5887239 100644
--- a/src/app/hooks/useGetAllVizData.tsx
+++ b/src/app/hooks/useGetAllVizData.tsx
@@ -13,6 +13,7 @@ import { DotChartModel } from "app/components/Charts/Eligibility/DotChart/data";
import { EligibilityScatterplotDataModel } from "app/components/Charts/Eligibility/Scatterplot/data";
import { DisbursementsTreemapDataItem } from "app/components/Charts/Investments/Disbursements/data";
import { BudgetsTreemapDataItem } from "app/components/Charts/Budgets/Treemap/data";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
export function useGetAllVizData() {
const allocations = useStoreState((state) => ({
@@ -26,6 +27,9 @@ export function useGetAllVizData() {
features: get(state.AllocationsGeomap.data, "data", []),
} as FeatureCollection)
);
+ const allocationsTable = useStoreState(
+ (state) => get(state.AllocationsTable.data, "data", []) as SimpleTableRow[]
+ );
const allocationsMCGeomap = useStoreState(
(state) =>
get(
@@ -234,6 +238,10 @@ export function useGetAllVizData() {
[]
) as BudgetsTreemapDataItem[]
);
+ const pledgesContributionsTable = useStoreState(
+ (state) =>
+ get(state.PledgesContributionsTable, "data.data", []) as SimpleTableRow[]
+ );
const resultsList = useStoreState(
(state) => get(state.ResultsList.data, "data", []) as ResultListItemModel[]
);
@@ -284,6 +292,7 @@ export function useGetAllVizData() {
countries: allocationsGeomap,
multicountries: allocationsMCGeomap,
},
+ "/viz/allocations/table": allocationsTable,
// Budgets
"/viz/budgets/flow": budgetsFlow,
"/viz/budgets/time-cycle": budgetsTimeCycle,
@@ -320,7 +329,7 @@ export function useGetAllVizData() {
"/viz/eligibility/table": eligibility,
// Pledges & Contributions
"/viz/pledges-contributions/map": pledgesContributionsGeomap,
- "/viz/pledges-contributions/table": pledgesContributionsGeomap,
+ "/viz/pledges-contributions/table": pledgesContributionsTable,
"/viz/pledges-contributions/treemap": pledgesContributionsTreemap,
"/viz/pledges-contributions/time-cycle": pledgesContributionsTimeCycle,
// Grant Budgets
diff --git a/src/app/hooks/useUrlFilters.tsx b/src/app/hooks/useUrlFilters.tsx
index 2fa21a57d..810f43d56 100644
--- a/src/app/hooks/useUrlFilters.tsx
+++ b/src/app/hooks/useUrlFilters.tsx
@@ -24,6 +24,7 @@ export function useUrlFilters(): null {
const partnerSubTypes = currentUrlParams.get("partnerSubTypes");
const partners = currentUrlParams.get("partners");
const status = currentUrlParams.get("status");
+ const documentTypes = currentUrlParams.get("documentTypes");
const donors = currentUrlParams.get("donors");
const donorSubCategories = currentUrlParams.get("donorSubCategories");
const donorCategories = currentUrlParams.get("donorCategories");
@@ -47,6 +48,9 @@ export function useUrlFilters(): null {
if (status) {
updatedAppliedFilters.status = status.split(",");
}
+ if (documentTypes) {
+ updatedAppliedFilters.documentTypes = documentTypes.split(",");
+ }
if (donors) {
updatedAppliedFilters.donors = donors.split(",");
}
@@ -103,6 +107,11 @@ export function useUrlFilters(): null {
} else {
currentUrlParams.delete("status");
}
+ if (data.documentTypes.length > 0) {
+ currentUrlParams.set("documentTypes", data.documentTypes.join(","));
+ } else {
+ currentUrlParams.delete("documentTypes");
+ }
if (data.donors.length > 0) {
currentUrlParams.set("donors", data.donors.join(","));
} else {
@@ -147,6 +156,7 @@ export function useUrlFilters(): null {
const partnerSubTypes = currentUrlParams.get("partnerSubTypes");
const partners = currentUrlParams.get("partners");
const status = currentUrlParams.get("status");
+ const documentTypes = currentUrlParams.get("documentTypes");
const donors = currentUrlParams.get("donors");
const donorSubCategories = currentUrlParams.get("donorSubCategories");
const donorCategories = currentUrlParams.get("donorCategories");
@@ -182,6 +192,11 @@ export function useUrlFilters(): null {
} else if (updatedAppliedFilters.status.length > 0) {
updatedAppliedFilters.status = [];
}
+ if (documentTypes) {
+ updatedAppliedFilters.documentTypes = documentTypes.split(",");
+ } else if (updatedAppliedFilters.documentTypes.length > 0) {
+ updatedAppliedFilters.documentTypes = [];
+ }
if (donors) {
updatedAppliedFilters.donors = donors.split(",");
} else if (updatedAppliedFilters.donors.length > 0) {
diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
index c21376db6..5dfa9a991 100644
--- a/src/app/modules/country-detail-module/index.tsx
+++ b/src/app/modules/country-detail-module/index.tsx
@@ -28,6 +28,7 @@ import { LocationGrants } from "app/modules/country-detail-module/sub-modules/gr
import { LocationResults } from "app/modules/country-detail-module/sub-modules/results";
import { AllocationsGeoMap } from "app/modules/viz-module/sub-modules/allocations/geomap";
import { InvestmentsGeoMap } from "app/modules/viz-module/sub-modules/investments/geomap";
+import { AllocationsTableModule } from "app/modules/viz-module/sub-modules/allocations/table";
import { LocationDetailOverviewModule } from "app/modules/country-detail-module/sub-modules/overview";
import { LocationDetailDocumentsModule } from "app/modules/country-detail-module/sub-modules/documents";
import { LocationDetailEligibilityWrapper } from "app/modules/viz-module/sub-modules/eligibility/data-wrappers/location";
@@ -349,6 +350,13 @@ export default function CountryDetail() {
+
+
diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 634f405ee..97471c715 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -16,6 +16,7 @@ import { AllocationsModule } from "app/modules/viz-module/sub-modules/allocation
import { EligibilityModule } from "app/modules/viz-module/sub-modules/eligibility";
import { InvestmentsGeoMap } from "app/modules/viz-module/sub-modules/investments/geomap";
import { AllocationsGeoMap } from "app/modules/viz-module/sub-modules/allocations/geomap";
+import { AllocationsTableModule } from "app/modules/viz-module/sub-modules/allocations/table";
import { PledgesContributionsTable } from "app/modules/viz-module/sub-modules/pledgescontributions/table";
import { PledgesContributionsGeoMap } from "app/modules/viz-module/sub-modules/pledgescontributions/geomap";
import { PledgesContributionsTreemap } from "app/modules/viz-module/sub-modules/pledgescontributions/treemap";
@@ -279,6 +280,12 @@ export default function VizModule() {
+
+
void;
+}
+
+export function AllocationsTableModule(props: AllocationsTableProps) {
+ useTitle(`The Data Explorer -${props.code ? " Location" : ""} Allocations`);
+
+ const [search, setSearch] = React.useState("");
+ const [sortBy, setSortBy] = React.useState("");
+
+ const fetchData = useStoreActions((store) => store.AllocationsTable.fetch);
+ const loading = useStoreState((state) => state.AllocationsTable.loading);
+ const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+ const data = useStoreState(
+ (state) => get(state.AllocationsTable.data, "data", []) as SimpleTableRow[]
+ );
+ const selectedAggregation = useStoreState(
+ (state) => state.ToolBoxPanelAggregateByState.value
+ );
+
+ function reloadData() {
+ const filterString = getAPIFormattedFilters(
+ props.code
+ ? {
+ ...appliedFilters,
+ locations: [...appliedFilters.locations, props.code],
+ }
+ : appliedFilters,
+ { search, sortBy }
+ );
+ fetchData({
+ filterString: `${filterString}${
+ filterString.length > 0 ? "&" : ""
+ }aggregateBy=${selectedAggregation}`,
+ });
+ }
+
+ React.useEffect(
+ () => reloadData(),
+ [props.code, sortBy, appliedFilters, selectedAggregation]
+ );
+
+ const [,] = useDebounce(() => reloadData(), 500, [search]);
+
+ if (loading) {
+ return ([]);
const fetchData = useStoreActions(
- (store) => store.PledgesContributionsGeomap.fetch
+ (store) => store.PledgesContributionsTable.fetch
+ );
+ const data = useStoreState(
+ (state) =>
+ get(state.PledgesContributionsTable, "data.data", []) as SimpleTableRow[]
);
-
- const data = useStoreState((state) => state.PledgesContributionsGeomap.data);
-
const isLoading = useStoreState(
- (state) => state.PledgesContributionsGeomap.loading
+ (state) => state.PledgesContributionsTable.loading
+ );
+ const selectedAggregation = useStoreState(
+ (state) => state.ToolBoxPanelAggregateByState.value
);
-
const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
function reloadData() {
@@ -100,17 +40,16 @@ export function PledgesContributionsTable() {
sortBy,
});
fetchData({
- filterString: `valueType=${valueType}${
+ filterString: `aggregateBy=${selectedAggregation}${
filterString.length > 0 ? `&${filterString}` : ""
}`,
});
}
- React.useEffect(() => reloadData(), [valueType, appliedFilters, sortBy]);
-
- React.useEffect(() => {
- setTableData(getTableData({ layers, pins }, view));
- }, [data, view]);
+ React.useEffect(
+ () => reloadData(),
+ [selectedAggregation, appliedFilters, sortBy]
+ );
const [,] = useDebounce(() => reloadData(), 500, [search]);
@@ -132,24 +71,32 @@ export function PledgesContributionsTable() {
return ;
status: string[];
setStatus: Action;
+ documentTypes: string[];
+ setDocumentTypes: Action;
replenishmentPeriods: string[];
setReplenishmentPeriods: Action;
donors: string[];
@@ -84,6 +88,11 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
state.status = payload;
state.appliedFiltersCount += payload.length;
}),
+ documentTypes: [],
+ setDocumentTypes: action((state, payload: string[]) => {
+ state.documentTypes = payload;
+ state.appliedFiltersCount += payload.length;
+ }),
replenishmentPeriods: [],
setReplenishmentPeriods: action((state, payload: string[]) => {
state.replenishmentPeriods = payload;
diff --git a/src/app/state/api/action-reducers/viz/allocations.ts b/src/app/state/api/action-reducers/viz/allocations.ts
index b6eb00382..1fa589a85 100644
--- a/src/app/state/api/action-reducers/viz/allocations.ts
+++ b/src/app/state/api/action-reducers/viz/allocations.ts
@@ -22,3 +22,7 @@ export const AllocationsGeomap: ApiCallModel = {
export const AllocationsMCGeomap: ApiCallModel = {
...APIModel(`${process.env.REACT_APP_API}/allocations/geomap/multicountries`),
};
+
+export const AllocationsTable: ApiCallModel = {
+ ...APIModel(`${process.env.REACT_APP_API}/allocations/table`),
+};
diff --git a/src/app/state/api/action-reducers/viz/pledgesContributionsTable.ts b/src/app/state/api/action-reducers/viz/pledgesContributionsTable.ts
new file mode 100644
index 000000000..2af787954
--- /dev/null
+++ b/src/app/state/api/action-reducers/viz/pledgesContributionsTable.ts
@@ -0,0 +1,8 @@
+import { APIModel } from "app/state/api";
+import { ApiCallModel } from "app/state/api/interfaces";
+
+const PledgesContributionsTable: ApiCallModel = {
+ ...APIModel(`${process.env.REACT_APP_API}/pledges-contributions/table`),
+};
+
+export default PledgesContributionsTable;
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index ee6e29ef2..14235c6c6 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -145,6 +145,7 @@ export interface StoreModel {
AllocationsDrilldown: ApiCallModel;
AllocationsGeomap: ApiCallModel;
AllocationsMCGeomap: ApiCallModel;
+ AllocationsTable: ApiCallModel;
Eligibility: ApiCallModel;
EligibilityYears: ApiCallModel;
BudgetsFlow: ApiCallModel;
@@ -173,6 +174,7 @@ export interface StoreModel {
PledgesContributionsTimeCycle: ApiCallModel;
PledgesContributionsTimeCycleDrilldown: ApiCallModel;
PledgesContributionsTreemap: ApiCallModel;
+ PledgesContributionsTable: ApiCallModel;
ResultsList: ApiCallModel;
ResultsStats: ApiCallModel;
ResultsYears: ApiCallModel;
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index 8e28a58b7..99dade8d2 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -24,6 +24,7 @@ import Allocations, {
AllocationsGeomap,
AllocationsMCGeomap,
AllocationsPeriods,
+ AllocationsTable,
} from "app/state/api/action-reducers/viz/allocations";
import BudgetsFlow, {
BudgetsFlowDrilldownLevel1,
@@ -165,6 +166,7 @@ import {
DataPathPanelVisibilityState,
DataPathStepsState,
} from "../api/action-reducers/sync/dataPath";
+import PledgesContributionsTable from "../api/action-reducers/viz/pledgesContributionsTable";
const storeContent: StoreModel = {
// data viz api
@@ -178,6 +180,7 @@ const storeContent: StoreModel = {
AllocationsDrilldown: persist(AllocationsDrilldown),
AllocationsGeomap: persist(AllocationsGeomap),
AllocationsMCGeomap: persist(AllocationsMCGeomap),
+ AllocationsTable: persist(AllocationsTable),
Eligibility: persist(Eligibility),
EligibilityYears: persist(EligibilityYears),
BudgetsGeomap: persist(BudgetsGeomap),
@@ -205,6 +208,7 @@ const storeContent: StoreModel = {
PledgesContributionsTimeCycleDrilldown
),
PledgesContributionsTreemap: persist(PledgesContributionsTreemap),
+ PledgesContributionsTable: persist(PledgesContributionsTable),
ResultsList: persist(ResultsList),
ResultsStats: persist(ResultsStats),
ResultsYears: persist(ResultsYears),
diff --git a/src/app/utils/exportCSV.ts b/src/app/utils/exportCSV.ts
index a3026ca3b..70664ab1f 100644
--- a/src/app/utils/exportCSV.ts
+++ b/src/app/utils/exportCSV.ts
@@ -615,6 +615,36 @@ export function exportCSV(
{ label: "Budget (USD)", key: "budget" },
],
};
+ case "/viz/allocations/table":
+ data.forEach((item: any) => {
+ item.children.forEach((subItem: any) => {
+ const { name, ...otherProps } = subItem;
+ csvData.push({
+ component: item.name,
+ location: name,
+ ...otherProps,
+ });
+ });
+ });
+ let extraHeaders: { label: string; key: string }[] = [];
+ if (csvData.length > 0) {
+ extraHeaders = filter(
+ Object.keys(csvData[0]),
+ (key) => key !== "component" && key !== "location"
+ ).map((key) => ({
+ label: `${key[0].toUpperCase()}${key.slice(1)}`,
+ key,
+ }));
+ }
+ return {
+ data: csvData,
+ filename: "allocations.csv",
+ headers: [
+ { label: "Component", key: "component" },
+ { label: "Location", key: "location" },
+ ...extraHeaders,
+ ],
+ };
case "/viz/eligibility":
if (options.isDetail) {
filter(
@@ -785,35 +815,20 @@ export function exportCSV(
],
};
case "/viz/pledges-contributions/table":
- if (options.donorMapView === "Public Sector") {
- data.layers.features.forEach((item: any) => {
- if (item.properties && !isEmpty(item.properties.data)) {
- csvData.push({
- location: item.properties.name,
- type: item.properties.data.amounts[0].label,
- value: item.properties.data.amounts[0].value,
- });
- }
- });
- } else {
- data.pins.map((pin: any) => {
- csvData.push({
- location: pin.geoName,
- type: pin.amounts[0].label,
- value: pin.amounts[0].value,
- });
- });
- }
+ const headers =
+ data.length > 0
+ ? filter(Object.keys(data[0]), (key) => key !== "children").map(
+ (key) => ({
+ label:
+ key === "name" ? options.selectedAggregation : `${key} (USD)`,
+ key,
+ })
+ )
+ : [];
return {
- data: csvData,
- filename: `pledges-contributions-${options.donorMapView
- .toLowerCase()
- .replace(/ /g, "-")}.csv`,
- headers: [
- { label: "Donor", key: "location" },
- { label: "Type", key: "type" },
- { label: "Amount (USD)", key: "value" },
- ],
+ data,
+ filename: `pledges-contributions-${options.selectedAggregation.toLowerCase()}.csv`,
+ headers,
};
case "/grants":
return {
diff --git a/src/app/utils/getAPIFormattedFilters.ts b/src/app/utils/getAPIFormattedFilters.ts
index 1432a0b7c..eed3f4376 100644
--- a/src/app/utils/getAPIFormattedFilters.ts
+++ b/src/app/utils/getAPIFormattedFilters.ts
@@ -42,6 +42,9 @@ export function getAPIFormattedFilters(
if (appliedFilters.partners.length > 0) {
filterArray.push(`partners=${appliedFilters.partners.join(",")}`);
}
+ if (appliedFilters.documentTypes.length > 0) {
+ filterArray.push(`documentTypes=${appliedFilters.documentTypes.join(",")}`);
+ }
if (
appliedFilters.donors.length > 0 ||
appliedFilters.donorSubCategories.length > 0