-
-
+
+
);
diff --git a/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx b/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx
index e5f7e0765..81acde243 100644
--- a/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx
+++ b/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx
@@ -1,9 +1,10 @@
import React from "react";
+import get from "lodash/get";
+import { appColors } from "app/theme";
import { useLocation } from "react-router-dom";
+import { useCMSData } from "app/hooks/useCMSData";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { TreemapTooltipProps } from "app/components/Charts/Investments/Disbursements/data";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
export function TreemapTooltip(props: TreemapTooltipProps) {
const { data } = props.node;
@@ -21,9 +22,9 @@ export function TreemapTooltip(props: TreemapTooltipProps) {
return (
{data.tooltip.header}
@@ -49,7 +50,7 @@ export function TreemapTooltip(props: TreemapTooltipProps) {
font-size: 12px;
padding: 16px 0;
flex-direction: column;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid ${appColors.TREEMAP.TOOLTIP_BORDER_COLOR};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -168,15 +169,16 @@ export function TreemapTooltip(props: TreemapTooltipProps) {
width: 100%;
height: 5px;
border-radius: 20px;
- background: #c7cdd1;
+ background: ${appColors.TREEMAP
+ .TOOLTIP_PROGRESS_BAR_BACKGROUND_COLOR};
`}
>
diff --git a/src/app/components/Charts/Investments/Disbursements/components/treemapnode/index.tsx b/src/app/components/Charts/Investments/Disbursements/components/treemapnode/index.tsx
index abb6f1641..4fa94fa60 100644
--- a/src/app/components/Charts/Investments/Disbursements/components/treemapnode/index.tsx
+++ b/src/app/components/Charts/Investments/Disbursements/components/treemapnode/index.tsx
@@ -7,6 +7,7 @@ import useMediaQuery from "@material-ui/core/useMediaQuery";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { DisbursementsTreemap } from "../..";
import { isTouchDevice } from "app/utils/isTouchDevice";
+import { appColors } from "app/theme";
const containercss = (
hover: boolean,
@@ -23,7 +24,9 @@ const containercss = (
align-items: flex-start;
transition: background 0.2s ease-in-out;
overflow: ${!hover ? "visible" : "hidden"};
- color: ${isChildTreemap ? "#fff" : "#262C34"};
+ color: ${isChildTreemap
+ ? appColors.TREEMAP.CHILD_NODE_COLOR
+ : appColors.TREEMAP.NODE_COLOR};
cursor: ${isChildTreemap ? "pointer" : "default"};
> div {
@@ -32,9 +35,9 @@ const containercss = (
}
@media (max-width: 767px) {
- color: #fff;
font-size: 10px;
- background: #595c70;
+ color: ${appColors.TREEMAP.MOBILE_NODE_COLOR};
+ background: ${appColors.TREEMAP.MOBILE_NODE_BACKGROUND_COLOR};
}
`;
diff --git a/src/app/components/Charts/Investments/Disbursements/data.ts b/src/app/components/Charts/Investments/Disbursements/data.ts
index 1c912e3b5..a88f98cb3 100644
--- a/src/app/components/Charts/Investments/Disbursements/data.ts
+++ b/src/app/components/Charts/Investments/Disbursements/data.ts
@@ -39,10035 +39,3 @@ export interface TreemapTooltipProps {
tooltipKeyLabel?: string;
tooltipValueLabel?: string;
}
-
-export const mockdata1: DisbursementsTreemapDataItem[] = [
- {
- name: "HIV",
- color: "#DFE3E5",
- value: 22438503078.05002,
- formattedValue: "22,438,503,078 USD",
- _children: [
- {
- name: "ETH",
- value: 1471736435.26,
- formattedValue: "1,471,736,435 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ETH",
- count: 6,
- investment: 1471736435.26,
- },
- ],
- totalInvestments: {
- committed: 1475159376.8,
- disbursed: 1471736435.26,
- signed: 1733474881.8,
- },
- percValue: "99.7679612390476",
- },
- },
- {
- name: "TZA",
- value: 1465068314.69,
- formattedValue: "1,465,068,315 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "TZA",
- count: 8,
- investment: 1465068314.69,
- },
- ],
- totalInvestments: {
- committed: 1575765642.66,
- disbursed: 1465068314.69,
- signed: 1802434435.63,
- },
- percValue: "92.97501322702179",
- },
- },
- {
- name: "ZWE",
- value: 1307430115.98,
- formattedValue: "1,307,430,116 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ZWE",
- count: 7,
- investment: 1307430115.98,
- },
- ],
- totalInvestments: {
- committed: 1448688116.16,
- disbursed: 1307430115.98,
- signed: 1729048317.27,
- },
- percValue: "90.2492469839244",
- },
- },
- {
- name: "IND",
- value: 1255412294.77,
- formattedValue: "1,255,412,295 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "IND",
- count: 16,
- investment: 1255412294.77,
- },
- ],
- totalInvestments: {
- committed: 1346856497.1,
- disbursed: 1255412294.77,
- signed: 1485157742.73,
- },
- percValue: "93.21054599900627",
- },
- },
- {
- name: "NGA",
- value: 997208545.7,
- formattedValue: "997,208,546 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "NGA",
- count: 13,
- investment: 997208545.7,
- },
- ],
- totalInvestments: {
- committed: 1131177222.73,
- disbursed: 997208545.7,
- signed: 1292467617.09,
- },
- percValue: "88.15670309320073",
- },
- },
- {
- name: "RWA",
- value: 990732588.68,
- formattedValue: "990,732,589 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "RWA",
- count: 4,
- investment: 990732588.68,
- },
- ],
- totalInvestments: {
- committed: 998580684.13,
- disbursed: 990732588.68,
- signed: 998675263.41,
- },
- percValue: "99.21407497914527",
- },
- },
- {
- name: "MOZ",
- value: 863629707.14,
- formattedValue: "863,629,707 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MOZ",
- count: 7,
- investment: 863629707.14,
- },
- ],
- totalInvestments: {
- committed: 1010431808.29,
- disbursed: 863629707.14,
- signed: 1303526822.02,
- },
- percValue: "85.471349976755",
- },
- },
- {
- name: "KEN",
- value: 782322699.98,
- formattedValue: "782,322,700 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "KEN",
- count: 7,
- investment: 782322699.98,
- },
- ],
- totalInvestments: {
- committed: 831760165.27,
- disbursed: 782322699.98,
- signed: 840910760.69,
- },
- percValue: "94.05628360743245",
- },
- },
- {
- name: "UGA",
- value: 765065150.65,
- formattedValue: "765,065,151 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "UGA",
- count: 5,
- investment: 765065150.65,
- },
- ],
- totalInvestments: {
- committed: 843297776.93,
- disbursed: 765065150.65,
- signed: 1038722318.81,
- },
- percValue: "90.72301286447079",
- },
- },
- {
- name: "MWI",
- value: 676868846.45,
- formattedValue: "676,868,846 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MWI",
- count: 4,
- investment: 676868846.45,
- },
- ],
- totalInvestments: {
- committed: 676868846.45,
- disbursed: 676868846.45,
- signed: 676868846.45,
- },
- percValue: "100",
- },
- },
- {
- name: "ZMB",
- value: 656604442.92,
- formattedValue: "656,604,443 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ZMB",
- count: 17,
- investment: 656604442.92,
- },
- ],
- totalInvestments: {
- committed: 656604442.92,
- disbursed: 656604442.92,
- signed: 656604442.92,
- },
- percValue: "100",
- },
- },
- {
- name: "ZAF",
- value: 553493737.32,
- formattedValue: "553,493,737 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ZAF",
- count: 10,
- investment: 553493737.32,
- },
- ],
- totalInvestments: {
- committed: 553493737.32,
- disbursed: 553493737.32,
- signed: 553493737.32,
- },
- percValue: "100",
- },
- },
- {
- name: "COD",
- value: 528563398.49,
- formattedValue: "528,563,398 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "COD",
- count: 8,
- investment: 528563398.49,
- },
- ],
- totalInvestments: {
- committed: 537333391.39,
- disbursed: 528563398.49,
- signed: 543451778.33,
- },
- percValue: "98.36786750264797",
- },
- },
- {
- name: "MMR",
- value: 392464901.68,
- formattedValue: "392,464,902 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MMR",
- count: 3,
- investment: 392464901.68,
- },
- ],
- totalInvestments: {
- committed: 443521086.47,
- disbursed: 392464901.68,
- signed: 505065843.31,
- },
- percValue: "88.48844252336275",
- },
- },
- {
- name: "CMR",
- value: 380345040.37,
- formattedValue: "380,345,040 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CMR",
- count: 7,
- investment: 380345040.37,
- },
- ],
- totalInvestments: {
- committed: 428227805.98,
- disbursed: 380345040.37,
- signed: 524690253.14,
- },
- percValue: "88.81838943166704",
- },
- },
- {
- name: "UKR",
- value: 362796839.9,
- formattedValue: "362,796,840 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "UKR",
- count: 11,
- investment: 362796839.9,
- },
- ],
- totalInvestments: {
- committed: 362796839.89,
- disbursed: 362796839.9,
- signed: 362796839.9,
- },
- percValue: "100.00000000275637",
- },
- },
- {
- name: "IDN",
- value: 346582233.94,
- formattedValue: "346,582,234 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "IDN",
- count: 11,
- investment: 346582233.94,
- },
- ],
- totalInvestments: {
- committed: 360248484.57,
- disbursed: 346582233.94,
- signed: 360515639.74,
- },
- percValue: "96.20643771858963",
- },
- },
- {
- name: "GHA",
- value: 345760976.97,
- formattedValue: "345,760,977 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GHA",
- count: 11,
- investment: 345760976.97,
- },
- ],
- totalInvestments: {
- committed: 351833807.03,
- disbursed: 345760976.97,
- signed: 359057194.21,
- },
- percValue: "98.27394925141968",
- },
- },
- {
- name: "CHN",
- value: 323230663.89,
- formattedValue: "323,230,664 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CHN",
- count: 4,
- investment: 323230663.89,
- },
- ],
- totalInvestments: {
- committed: 323230663.89,
- disbursed: 323230663.89,
- signed: 323230663.89,
- },
- percValue: "100",
- },
- },
- {
- name: "THA",
- value: 287390159.55,
- formattedValue: "287,390,160 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "THA",
- count: 11,
- investment: 287390159.55,
- },
- ],
- totalInvestments: {
- committed: 287390159.55,
- disbursed: 287390159.55,
- signed: 287390159.79,
- },
- percValue: "100",
- },
- },
- {
- name: "RUS",
- value: 286143522.38,
- formattedValue: "286,143,522 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "RUS",
- count: 4,
- investment: 286143522.38,
- },
- ],
- totalInvestments: {
- committed: 286210068.61,
- disbursed: 286143522.38,
- signed: 286210068.61,
- },
- percValue: "99.97674916528157",
- },
- },
- {
- name: "KHM",
- value: 243508271.61,
- formattedValue: "243,508,272 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "KHM",
- count: 6,
- investment: 243508271.61,
- },
- ],
- totalInvestments: {
- committed: 243508271.61,
- disbursed: 243508271.61,
- signed: 243508271.61,
- },
- percValue: "100",
- },
- },
- {
- name: "NAM",
- value: 239562180.09,
- formattedValue: "239,562,180 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "NAM",
- count: 2,
- investment: 239562180.09,
- },
- ],
- totalInvestments: {
- committed: 239562180.09,
- disbursed: 239562180.09,
- signed: 239562180.09,
- },
- percValue: "100",
- },
- },
- {
- name: "CIV",
- value: 235772421.16,
- formattedValue: "235,772,421 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CIV",
- count: 8,
- investment: 235772421.16,
- },
- ],
- totalInvestments: {
- committed: 257920563.3,
- disbursed: 235772421.16,
- signed: 314042306.6,
- },
- percValue: "91.41280483548013",
- },
- },
- {
- name: "VNM",
- value: 230073220.75,
- formattedValue: "230,073,221 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "VNM",
- count: 5,
- investment: 230073220.75,
- },
- ],
- totalInvestments: {
- committed: 251891435.07,
- disbursed: 230073220.75,
- signed: 281888854.09,
- },
- percValue: "91.33824684672713",
- },
- },
- {
- name: "MLI",
- value: 217321225.02,
- formattedValue: "217,321,225 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MLI",
- count: 8,
- investment: 217321225.02,
- },
- ],
- totalInvestments: {
- committed: 228875914.2,
- disbursed: 217321225.02,
- signed: 230845290.97,
- },
- percValue: "94.9515486501113",
- },
- },
- {
- name: "HTI",
- value: 210422459.56,
- formattedValue: "210,422,460 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "HTI",
- count: 5,
- investment: 210422459.56,
- },
- ],
- totalInvestments: {
- committed: 210422459.56,
- disbursed: 210422459.56,
- signed: 210422459.56,
- },
- percValue: "100",
- },
- },
- {
- name: "SWZ",
- value: 192644814.16,
- formattedValue: "192,644,814 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SWZ",
- count: 5,
- investment: 192644814.16,
- },
- ],
- totalInvestments: {
- committed: 192644814.16,
- disbursed: 192644814.16,
- signed: 192644814.16,
- },
- percValue: "100",
- },
- },
- {
- name: "BFA",
- value: 181304805.79,
- formattedValue: "181,304,806 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BFA",
- count: 5,
- investment: 181304805.79,
- },
- ],
- totalInvestments: {
- committed: 197981437.44,
- disbursed: 181304805.79,
- signed: 226022828.07,
- },
- percValue: "91.57666907279932",
- },
- },
- {
- name: "TGO",
- value: 173186021.53,
- formattedValue: "173,186,022 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "TGO",
- count: 5,
- investment: 173186021.53,
- },
- ],
- totalInvestments: {
- committed: 184057664.59,
- disbursed: 173186021.53,
- signed: 222345635.42,
- },
- percValue: "94.09334944881688",
- },
- },
- {
- name: "BEN",
- value: 170577956.87,
- formattedValue: "170,577,957 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BEN",
- count: 5,
- investment: 170577956.87,
- },
- ],
- totalInvestments: {
- committed: 186204245.65,
- disbursed: 170577956.87,
- signed: 216185214.69,
- },
- percValue: "91.60798470225429",
- },
- },
- {
- name: "SDN",
- value: 169298434.36,
- formattedValue: "169,298,434 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SDN",
- count: 4,
- investment: 169298434.36,
- },
- ],
- totalInvestments: {
- committed: 176466789.36,
- disbursed: 169298434.36,
- signed: 189717753.71,
- },
- percValue: "95.93784472081246",
- },
- },
- {
- name: "LSO",
- value: 168709401.86,
- formattedValue: "168,709,402 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "LSO",
- count: 9,
- investment: 168709401.86,
- },
- ],
- totalInvestments: {
- committed: 168709401.86,
- disbursed: 168709401.86,
- signed: 168709401.86,
- },
- percValue: "100",
- },
- },
- {
- name: "SEN",
- value: 159672301.57,
- formattedValue: "159,672,302 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SEN",
- count: 7,
- investment: 159672301.57,
- },
- ],
- totalInvestments: {
- committed: 171465928.13,
- disbursed: 159672301.57,
- signed: 188866767.09,
- },
- percValue: "93.12188334520988",
- },
- },
- {
- name: "ERI",
- value: 154530211.33,
- formattedValue: "154,530,211 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ERI",
- count: 4,
- investment: 154530211.33,
- },
- ],
- totalInvestments: {
- committed: 162258994.96,
- disbursed: 154530211.33,
- signed: 171886707.07,
- },
- percValue: "95.2367610609783",
- },
- },
- {
- name: "DOM",
- value: 152899220.87,
- formattedValue: "152,899,221 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "DOM",
- count: 4,
- investment: 152899220.87,
- },
- ],
- totalInvestments: {
- committed: 153065063.66,
- disbursed: 152899220.87,
- signed: 156490385.14,
- },
- percValue: "99.89165209484486",
- },
- },
- {
- name: "SLE",
- value: 148949029.99,
- formattedValue: "148,949,030 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SLE",
- count: 3,
- investment: 148949029.99,
- },
- ],
- totalInvestments: {
- committed: 150196538.2,
- disbursed: 148949029.99,
- signed: 150343811.53,
- },
- percValue: "99.16941613638338",
- },
- },
- {
- name: "BDI",
- value: 143632770.63,
- formattedValue: "143,632,771 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BDI",
- count: 6,
- investment: 143632770.63,
- },
- ],
- totalInvestments: {
- committed: 143632770.63,
- disbursed: 143632770.63,
- signed: 143632770.63,
- },
- percValue: "100",
- },
- },
- {
- name: "BGD",
- value: 142648390.75,
- formattedValue: "142,648,391 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BGD",
- count: 8,
- investment: 142648390.75,
- },
- ],
- totalInvestments: {
- committed: 149701853.94,
- disbursed: 142648390.75,
- signed: 160473247.41,
- },
- percValue: "95.28832609325801",
- },
- },
- {
- name: "GTM",
- value: 137858961.63,
- formattedValue: "137,858,962 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GTM",
- count: 5,
- investment: 137858961.63,
- },
- ],
- totalInvestments: {
- committed: 148128299.8,
- disbursed: 137858961.63,
- signed: 164732305.38,
- },
- percValue: "93.06726791310946",
- },
- },
- {
- name: "SSD",
- value: 119421631.53,
- formattedValue: "119,421,632 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SSD",
- count: 2,
- investment: 119421631.53,
- },
- ],
- totalInvestments: {
- committed: 119421631.53,
- disbursed: 119421631.53,
- signed: 119421631.53,
- },
- percValue: "100",
- },
- },
- {
- name: "CUB",
- value: 119033975.34,
- formattedValue: "119,033,975 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CUB",
- count: 3,
- investment: 119033975.34,
- },
- ],
- totalInvestments: {
- committed: 125585984.7,
- disbursed: 119033975.34,
- signed: 131243293.63,
- },
- percValue: "94.78284987321518",
- },
- },
- {
- name: "TCD",
- value: 117062197.4,
- formattedValue: "117,062,197 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "TCD",
- count: 6,
- investment: 117062197.4,
- },
- ],
- totalInvestments: {
- committed: 120737511.9,
- disbursed: 117062197.4,
- signed: 135325301.46,
- },
- percValue: "96.95594646422393",
- },
- },
- {
- name: "AGO",
- value: 115822915.58,
- formattedValue: "115,822,916 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "AGO",
- count: 2,
- investment: 115822915.58,
- },
- ],
- totalInvestments: {
- committed: 115822915.58,
- disbursed: 115822915.58,
- signed: 115822915.72,
- },
- percValue: "100",
- },
- },
- {
- name: "GIN",
- value: 114919332.81,
- formattedValue: "114,919,333 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GIN",
- count: 6,
- investment: 114919332.81,
- },
- ],
- totalInvestments: {
- committed: 129013128.83,
- disbursed: 114919332.81,
- signed: 158507075.71,
- },
- percValue: "89.07568853820193",
- },
- },
- {
- name: "NPL",
- value: 113845536.76,
- formattedValue: "113,845,537 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "NPL",
- count: 8,
- investment: 113845536.76,
- },
- ],
- totalInvestments: {
- committed: 121590676.17,
- disbursed: 113845536.76,
- signed: 140610322.89,
- },
- percValue: "93.63015351672914",
- },
- },
- {
- name: "SOM",
- value: 112814285.32,
- formattedValue: "112,814,285 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SOM",
- count: 3,
- investment: 112814285.32,
- },
- ],
- totalInvestments: {
- committed: 121806732.63,
- disbursed: 112814285.32,
- signed: 129458553.88,
- },
- percValue: "92.61744641216553",
- },
- },
- {
- name: "SLV",
- value: 105102734.49,
- formattedValue: "105,102,734 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SLV",
- count: 7,
- investment: 105102734.49,
- },
- ],
- totalInvestments: {
- committed: 106800781.57,
- disbursed: 105102734.49,
- signed: 112401699.04,
- },
- percValue: "98.41007991230191",
- },
- },
- {
- name: "TJK",
- value: 98551304.56,
- formattedValue: "98,551,305 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "TJK",
- count: 5,
- investment: 98551304.56,
- },
- ],
- totalInvestments: {
- committed: 98551304.56,
- disbursed: 98551304.56,
- signed: 98686065.05,
- },
- percValue: "100",
- },
- },
- {
- name: "HND",
- value: 93470584.02,
- formattedValue: "93,470,584 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "HND",
- count: 3,
- investment: 93470584.02,
- },
- ],
- totalInvestments: {
- committed: 93470584.02,
- disbursed: 93470584.02,
- signed: 93470584.02,
- },
- percValue: "100",
- },
- },
- {
- name: "QRA",
- value: 93036387.69,
- formattedValue: "93,036,388 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QRA",
- count: 12,
- investment: 93036387.69,
- },
- ],
- totalInvestments: {
- committed: 93600111.75,
- disbursed: 93036387.69,
- signed: 101953853.54,
- },
- percValue: "99.39773142418284",
- },
- },
- {
- name: "JAM",
- value: 92037881.35,
- formattedValue: "92,037,881 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "JAM",
- count: 3,
- investment: 92037881.35,
- },
- ],
- totalInvestments: {
- committed: 93766364.11,
- disbursed: 92037881.35,
- signed: 95944281.85,
- },
- percValue: "98.15660682121334",
- },
- },
- {
- name: "UZB",
- value: 89822176.31,
- formattedValue: "89,822,176 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "UZB",
- count: 4,
- investment: 89822176.31,
- },
- ],
- totalInvestments: {
- committed: 90346756.71,
- disbursed: 89822176.31,
- signed: 92241249.2,
- },
- percValue: "99.41936997065227",
- },
- },
- {
- name: "GEO",
- value: 88341417.68,
- formattedValue: "88,341,418 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GEO",
- count: 5,
- investment: 88341417.68,
- },
- ],
- totalInvestments: {
- committed: 90006095.88,
- disbursed: 88341417.68,
- signed: 93179429.39,
- },
- percValue: "98.15048282705271",
- },
- },
- {
- name: "LBR",
- value: 86247137.7,
- formattedValue: "86,247,138 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "LBR",
- count: 4,
- investment: 86247137.7,
- },
- ],
- totalInvestments: {
- committed: 86247137.7,
- disbursed: 86247137.7,
- signed: 86410869.4,
- },
- percValue: "100",
- },
- },
- {
- name: "PAK",
- value: 83621464.19,
- formattedValue: "83,621,464 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "PAK",
- count: 5,
- investment: 83621464.19,
- },
- ],
- totalInvestments: {
- committed: 92764468.21,
- disbursed: 83621464.19,
- signed: 114935568.15,
- },
- percValue: "90.14385120033019",
- },
- },
- {
- name: "PER",
- value: 83371465.03,
- formattedValue: "83,371,465 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "PER",
- count: 7,
- investment: 83371465.03,
- },
- ],
- totalInvestments: {
- committed: 83575734.01,
- disbursed: 83371465.03,
- signed: 84624543.21,
- },
- percValue: "99.75558817111249",
- },
- },
- {
- name: "MAR",
- value: 77126880.01,
- formattedValue: "77,126,880 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MAR",
- count: 4,
- investment: 77126880.01,
- },
- ],
- totalInvestments: {
- committed: 77447154.7,
- disbursed: 77126880.01,
- signed: 77802298.4,
- },
- percValue: "99.58646035320392",
- },
- },
- {
- name: "IRN",
- value: 70753052.36,
- formattedValue: "70,753,052 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "IRN",
- count: 3,
- investment: 70753052.36,
- },
- ],
- totalInvestments: {
- committed: 70753052.36,
- disbursed: 70753052.36,
- signed: 75563286.65,
- },
- percValue: "100",
- },
- },
- {
- name: "BLR",
- value: 69594893.19,
- formattedValue: "69,594,893 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BLR",
- count: 4,
- investment: 69594893.19,
- },
- ],
- totalInvestments: {
- committed: 69594893.18,
- disbursed: 69594893.19,
- signed: 69594893.19,
- },
- percValue: "100.00000001436887",
- },
- },
- {
- name: "NER",
- value: 68821373.04,
- formattedValue: "68,821,373 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "NER",
- count: 4,
- investment: 68821373.04,
- },
- ],
- totalInvestments: {
- committed: 78926671.88,
- disbursed: 68821373.04,
- signed: 97925159.47,
- },
- percValue: "87.19659831170372",
- },
- },
- {
- name: "MDG",
- value: 65996115.17,
- formattedValue: "65,996,115 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MDG",
- count: 7,
- investment: 65996115.17,
- },
- ],
- totalInvestments: {
- committed: 69539756.16,
- disbursed: 65996115.17,
- signed: 84836138.79,
- },
- percValue: "94.90415096963147",
- },
- },
- {
- name: "NIC",
- value: 65668398.32,
- formattedValue: "65,668,398 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "NIC",
- count: 4,
- investment: 65668398.32,
- },
- ],
- totalInvestments: {
- committed: 66507653.98,
- disbursed: 65668398.32,
- signed: 68104369.24,
- },
- percValue: "98.73810665423204",
- },
- },
- {
- name: "KAZ",
- value: 63201016.68,
- formattedValue: "63,201,017 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "KAZ",
- count: 3,
- investment: 63201016.68,
- },
- ],
- totalInvestments: {
- committed: 66531949.44,
- disbursed: 63201016.68,
- signed: 68839486.92,
- },
- percValue: "94.99348390053729",
- },
- },
- {
- name: "GMB",
- value: 60666100.07,
- formattedValue: "60,666,100 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GMB",
- count: 5,
- investment: 60666100.07,
- },
- ],
- totalInvestments: {
- committed: 60644140.92,
- disbursed: 60666100.07,
- signed: 60644140.93,
- },
- percValue: "100.03620984594203",
- },
- },
- {
- name: "LAO",
- value: 60082285.41,
- formattedValue: "60,082,285 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "LAO",
- count: 5,
- investment: 60082285.41,
- },
- ],
- totalInvestments: {
- committed: 60194906.4,
- disbursed: 60082285.41,
- signed: 60770916.92,
- },
- percValue: "99.81290611326543",
- },
- },
- {
- name: "KGZ",
- value: 59987663.62,
- formattedValue: "59,987,664 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "KGZ",
- count: 3,
- investment: 59987663.62,
- },
- ],
- totalInvestments: {
- committed: 59987663.62,
- disbursed: 59987663.62,
- signed: 59987663.62,
- },
- percValue: "100",
- },
- },
- {
- name: "COG",
- value: 58179896.88,
- formattedValue: "58,179,897 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "COG",
- count: 5,
- investment: 58179896.88,
- },
- ],
- totalInvestments: {
- committed: 58664432.91,
- disbursed: 58179896.88,
- signed: 58664432.91,
- },
- percValue: "99.17405486431046",
- },
- },
- {
- name: "COL",
- value: 58056696.17,
- formattedValue: "58,056,696 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "COL",
- count: 3,
- investment: 58056696.17,
- },
- ],
- totalInvestments: {
- committed: 62053618.11,
- disbursed: 58056696.17,
- signed: 64602773.5,
- },
- percValue: "93.5589220069089",
- },
- },
- {
- name: "PHL",
- value: 57695481.86,
- formattedValue: "57,695,482 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "PHL",
- count: 6,
- investment: 57695481.86,
- },
- ],
- totalInvestments: {
- committed: 66206058.29,
- disbursed: 57695481.86,
- signed: 77554763.25,
- },
- percValue: "87.14532076094693",
- },
- },
- {
- name: "BOL",
- value: 56991893.15,
- formattedValue: "56,991,893 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BOL",
- count: 5,
- investment: 56991893.15,
- },
- ],
- totalInvestments: {
- committed: 57143299.84,
- disbursed: 56991893.15,
- signed: 57165050.6,
- },
- percValue: "99.73504034519543",
- },
- },
- {
- name: "CAF",
- value: 54173542.45,
- formattedValue: "54,173,542 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CAF",
- count: 4,
- investment: 54173542.45,
- },
- ],
- totalInvestments: {
- committed: 54173984.15,
- disbursed: 54173542.45,
- signed: 54173984.15,
- },
- percValue: "99.99918466399153",
- },
- },
- {
- name: "AZE",
- value: 53299307.35,
- formattedValue: "53,299,307 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "AZE",
- count: 3,
- investment: 53299307.35,
- },
- ],
- totalInvestments: {
- committed: 53490649.47,
- disbursed: 53299307.35,
- signed: 53490650.66,
- },
- percValue: "99.642288658119",
- },
- },
- {
- name: "QMZ",
- value: 52184184.98,
- formattedValue: "52,184,185 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QMZ",
- count: 9,
- investment: 52184184.98,
- },
- ],
- totalInvestments: {
- committed: 54711710.88,
- disbursed: 52184184.98,
- signed: 59155375.33,
- },
- percValue: "95.38028356389063",
- },
- },
- {
- name: "QPF",
- value: 51009405.22,
- formattedValue: "51,009,405 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QPF",
- count: 4,
- investment: 51009405.22,
- },
- ],
- totalInvestments: {
- committed: 50568348.76,
- disbursed: 51009405.22,
- signed: 50357840.67,
- },
- percValue: "100.87219865946835",
- },
- },
- {
- name: "MDA",
- value: 50013914.33,
- formattedValue: "50,013,914 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MDA",
- count: 4,
- investment: 50013914.33,
- },
- ],
- totalInvestments: {
- committed: 50370329.06,
- disbursed: 50013914.33,
- signed: 50370329.07,
- },
- percValue: "99.2924113527719",
- },
- },
- {
- name: "BGR",
- value: 49490867.92,
- formattedValue: "49,490,868 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BGR",
- count: 1,
- investment: 49490867.92,
- },
- ],
- totalInvestments: {
- committed: 50102363.69,
- disbursed: 49490867.92,
- signed: 50102363.68,
- },
- percValue: "98.77950714304913",
- },
- },
- {
- name: "GNB",
- value: 43893846.82,
- formattedValue: "43,893,847 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GNB",
- count: 4,
- investment: 43893846.82,
- },
- ],
- totalInvestments: {
- committed: 45092115.9,
- disbursed: 43893846.82,
- signed: 45092115.9,
- },
- percValue: "97.3426195331854",
- },
- },
- {
- name: "QPA",
- value: 41878455,
- formattedValue: "41,878,455 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QPA",
- count: 5,
- investment: 41878455,
- },
- ],
- totalInvestments: {
- committed: 41878455,
- disbursed: 41878455,
- signed: 41891248.78,
- },
- percValue: "100",
- },
- },
- {
- name: "PNG",
- value: 41843627.47,
- formattedValue: "41,843,627 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "PNG",
- count: 3,
- investment: 41843627.47,
- },
- ],
- totalInvestments: {
- committed: 41843627.47,
- disbursed: 41843627.47,
- signed: 41843627.47,
- },
- percValue: "100",
- },
- },
- {
- name: "ECU",
- value: 41616833.19,
- formattedValue: "41,616,833 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ECU",
- count: 6,
- investment: 41616833.19,
- },
- ],
- totalInvestments: {
- committed: 42851503.47,
- disbursed: 41616833.19,
- signed: 43748700.74,
- },
- percValue: "97.1187235452208",
- },
- },
- {
- name: "BIH",
- value: 40047926.63,
- formattedValue: "40,047,927 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BIH",
- count: 2,
- investment: 40047926.63,
- },
- ],
- totalInvestments: {
- committed: 40445228.77,
- disbursed: 40047926.63,
- signed: 40445228.78,
- },
- percValue: "99.01767859378585",
- },
- },
- {
- name: "GUY",
- value: 38387001.71,
- formattedValue: "38,387,002 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GUY",
- count: 2,
- investment: 38387001.71,
- },
- ],
- totalInvestments: {
- committed: 38537291.94,
- disbursed: 38387001.71,
- signed: 40266421.15,
- },
- percValue: "99.6100135156513",
- },
- },
- {
- name: "ROU",
- value: 37671818.76,
- formattedValue: "37,671,819 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ROU",
- count: 2,
- investment: 37671818.76,
- },
- ],
- totalInvestments: {
- committed: 37671818.75,
- disbursed: 37671818.76,
- signed: 37671818.76,
- },
- percValue: "100.00000002654504",
- },
- },
- {
- name: "ARM",
- value: 35473559.99,
- formattedValue: "35,473,560 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ARM",
- count: 5,
- investment: 35473559.99,
- },
- ],
- totalInvestments: {
- committed: 35530265.78,
- disbursed: 35473559.99,
- signed: 35530265.74,
- },
- percValue: "99.84040144717432",
- },
- },
- {
- name: "PRY",
- value: 34862373.47,
- formattedValue: "34,862,373 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "PRY",
- count: 3,
- investment: 34862373.47,
- },
- ],
- totalInvestments: {
- committed: 35710009.6,
- disbursed: 34862373.47,
- signed: 39496754.17,
- },
- percValue: "97.62633463419735",
- },
- },
- {
- name: "MEX",
- value: 34680258.1,
- formattedValue: "34,680,258 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MEX",
- count: 1,
- investment: 34680258.1,
- },
- ],
- totalInvestments: {
- committed: 34680258.1,
- disbursed: 34680258.1,
- signed: 34680258.1,
- },
- percValue: "100",
- },
- },
- {
- name: "SRB",
- value: 31842408.24,
- formattedValue: "31,842,408 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SRB",
- count: 5,
- investment: 31842408.24,
- },
- ],
- totalInvestments: {
- committed: 31802071.45,
- disbursed: 31842408.24,
- signed: 32089724.55,
- },
- percValue: "100.12683698941882",
- },
- },
- {
- name: "AFG",
- value: 31200050.44,
- formattedValue: "31,200,050 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "AFG",
- count: 3,
- investment: 31200050.44,
- },
- ],
- totalInvestments: {
- committed: 34125388.29,
- disbursed: 31200050.44,
- signed: 38557253.69,
- },
- percValue: "91.42767893176696",
- },
- },
- {
- name: "CHL",
- value: 28835307,
- formattedValue: "28,835,307 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CHL",
- count: 1,
- investment: 28835307,
- },
- ],
- totalInvestments: {
- committed: 28835307,
- disbursed: 28835307,
- signed: 28835307,
- },
- percValue: "100",
- },
- },
- {
- name: "QSD",
- value: 28788981.59,
- formattedValue: "28,788,982 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QSD",
- count: 3,
- investment: 28788981.59,
- },
- ],
- totalInvestments: {
- committed: 28788981.59,
- disbursed: 28788981.59,
- signed: 28788981.59,
- },
- percValue: "100",
- },
- },
- {
- name: "ARG",
- value: 28402468.32,
- formattedValue: "28,402,468 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ARG",
- count: 3,
- investment: 28402468.32,
- },
- ],
- totalInvestments: {
- committed: 28402468.32,
- disbursed: 28402468.32,
- signed: 28402468.32,
- },
- percValue: "100",
- },
- },
- {
- name: "TUN",
- value: 27956355.84,
- formattedValue: "27,956,356 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "TUN",
- count: 2,
- investment: 27956355.84,
- },
- ],
- totalInvestments: {
- committed: 28819393.94,
- disbursed: 27956355.84,
- signed: 29345929.95,
- },
- percValue: "97.00535652555085",
- },
- },
- {
- name: "QUA",
- value: 27241098.84,
- formattedValue: "27,241,099 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QUA",
- count: 2,
- investment: 27241098.84,
- },
- ],
- totalInvestments: {
- committed: 27241098.84,
- disbursed: 27241098.84,
- signed: 27241098.84,
- },
- percValue: "100",
- },
- },
- {
- name: "MKD",
- value: 24588665.92,
- formattedValue: "24,588,666 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MKD",
- count: 3,
- investment: 24588665.92,
- },
- ],
- totalInvestments: {
- committed: 24768280.41,
- disbursed: 24588665.92,
- signed: 24768280.42,
- },
- percValue: "99.27482050821953",
- },
- },
- {
- name: "MNG",
- value: 24009666.18,
- formattedValue: "24,009,666 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MNG",
- count: 5,
- investment: 24009666.18,
- },
- ],
- totalInvestments: {
- committed: 24018274.38,
- disbursed: 24009666.18,
- signed: 24054820,
- },
- percValue: "99.96415978990078",
- },
- },
- {
- name: "TLS",
- value: 22009630.79,
- formattedValue: "22,009,631 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "TLS",
- count: 2,
- investment: 22009630.79,
- },
- ],
- totalInvestments: {
- committed: 23151973.84,
- disbursed: 22009630.79,
- signed: 24989953.3,
- },
- percValue: "95.0658934832314",
- },
- },
- {
- name: "LKA",
- value: 20805483.5,
- formattedValue: "20,805,484 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "LKA",
- count: 6,
- investment: 20805483.5,
- },
- ],
- totalInvestments: {
- committed: 21270906.28,
- disbursed: 20805483.5,
- signed: 22612837.21,
- },
- percValue: "97.81192783291225",
- },
- },
- {
- name: "DJI",
- value: 19404402.41,
- formattedValue: "19,404,402 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "DJI",
- count: 3,
- investment: 19404402.41,
- },
- ],
- totalInvestments: {
- committed: 19404402.41,
- disbursed: 19404402.41,
- signed: 19404402.41,
- },
- percValue: "100",
- },
- },
- {
- name: "YEM",
- value: 16162251.66,
- formattedValue: "16,162,252 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "YEM",
- count: 4,
- investment: 16162251.66,
- },
- ],
- totalInvestments: {
- committed: 16162251.66,
- disbursed: 16162251.66,
- signed: 16162251.66,
- },
- percValue: "100",
- },
- },
- {
- name: "MUS",
- value: 15726002.77,
- formattedValue: "15,726,003 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MUS",
- count: 5,
- investment: 15726002.77,
- },
- ],
- totalInvestments: {
- committed: 16220716.75,
- disbursed: 15726002.77,
- signed: 17165627.64,
- },
- percValue: "96.95011023480205",
- },
- },
- {
- name: "MYS",
- value: 14352508.61,
- formattedValue: "14,352,509 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MYS",
- count: 1,
- investment: 14352508.61,
- },
- ],
- totalInvestments: {
- committed: 14352508.61,
- disbursed: 14352508.61,
- signed: 15415102.78,
- },
- percValue: "100",
- },
- },
- {
- name: "QSE",
- value: 13715010.31,
- formattedValue: "13,715,010 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QSE",
- count: 2,
- investment: 13715010.31,
- },
- ],
- totalInvestments: {
- committed: 13715010.31,
- disbursed: 13715010.31,
- signed: 13715010.31,
- },
- percValue: "100",
- },
- },
- {
- name: "MRT",
- value: 13281555.53,
- formattedValue: "13,281,556 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MRT",
- count: 2,
- investment: 13281555.53,
- },
- ],
- totalInvestments: {
- committed: 13281555.53,
- disbursed: 13281555.53,
- signed: 13281555.53,
- },
- percValue: "100",
- },
- },
- {
- name: "DZA",
- value: 12868164.81,
- formattedValue: "12,868,165 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "DZA",
- count: 2,
- investment: 12868164.81,
- },
- ],
- totalInvestments: {
- committed: 14493132.99,
- disbursed: 12868164.81,
- signed: 14497969.62,
- },
- percValue: "88.78801304644621",
- },
- },
- {
- name: "GAB",
- value: 12421722.87,
- formattedValue: "12,421,723 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GAB",
- count: 2,
- investment: 12421722.87,
- },
- ],
- totalInvestments: {
- committed: 12423919.09,
- disbursed: 12421722.87,
- signed: 12423919.08,
- },
- percValue: "99.98232264727345",
- },
- },
- {
- name: "QRC",
- value: 12112243.4,
- formattedValue: "12,112,243 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QRC",
- count: 2,
- investment: 12112243.4,
- },
- ],
- totalInvestments: {
- committed: 12112243.4,
- disbursed: 12112243.4,
- signed: 12112243.4,
- },
- percValue: "100",
- },
- },
- {
- name: "QNA",
- value: 11550830.56,
- formattedValue: "11,550,831 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QNA",
- count: 3,
- investment: 11550830.56,
- },
- ],
- totalInvestments: {
- committed: 11594528.19,
- disbursed: 11550830.56,
- signed: 11961468.51,
- },
- percValue: "99.62311851518298",
- },
- },
- {
- name: "EST",
- value: 10978492.88,
- formattedValue: "10,978,493 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "EST",
- count: 1,
- investment: 10978492.88,
- },
- ],
- totalInvestments: {
- committed: 10978492.88,
- disbursed: 10978492.88,
- signed: 10978492.88,
- },
- percValue: "99.99999999999999",
- },
- },
- {
- name: "CRI",
- value: 10592380.63,
- formattedValue: "10,592,381 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CRI",
- count: 3,
- investment: 10592380.63,
- },
- ],
- totalInvestments: {
- committed: 10592380.63,
- disbursed: 10592380.63,
- signed: 10651341.48,
- },
- percValue: "100",
- },
- },
- {
- name: "COM",
- value: 10451939.49,
- formattedValue: "10,451,939 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "COM",
- count: 3,
- investment: 10451939.49,
- },
- ],
- totalInvestments: {
- committed: 10547856.21,
- disbursed: 10451939.49,
- signed: 10979745.78,
- },
- percValue: "99.09065199515076",
- },
- },
- {
- name: "PSE",
- value: 9876140.25,
- formattedValue: "9,876,140 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "PSE",
- count: 1,
- investment: 9876140.25,
- },
- ],
- totalInvestments: {
- committed: 9876141.25,
- disbursed: 9876140.25,
- signed: 9876140.25,
- },
- percValue: "99.99998987458791",
- },
- },
- {
- name: "MNE",
- value: 9658587.93,
- formattedValue: "9,658,588 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MNE",
- count: 3,
- investment: 9658587.93,
- },
- ],
- totalInvestments: {
- committed: 9676828.42,
- disbursed: 9658587.93,
- signed: 9683946.48,
- },
- percValue: "99.81150342645013",
- },
- },
- {
- name: "EGY",
- value: 9259337.15,
- formattedValue: "9,259,337 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "EGY",
- count: 1,
- investment: 9259337.15,
- },
- ],
- totalInvestments: {
- committed: 9259337.15,
- disbursed: 9259337.15,
- signed: 9259337.15,
- },
- percValue: "100",
- },
- },
- {
- name: "CPV",
- value: 9171163.12,
- formattedValue: "9,171,163 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "CPV",
- count: 2,
- investment: 9171163.12,
- },
- ],
- totalInvestments: {
- committed: 9171163.12,
- disbursed: 9171163.12,
- signed: 9171163.12,
- },
- percValue: "100",
- },
- },
- {
- name: "SUR",
- value: 9084200.96,
- formattedValue: "9,084,201 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SUR",
- count: 2,
- investment: 9084200.96,
- },
- ],
- totalInvestments: {
- committed: 9084200.96,
- disbursed: 9084200.96,
- signed: 9084200.96,
- },
- percValue: "100",
- },
- },
- {
- name: "BWA",
- value: 8269612,
- formattedValue: "8,269,612 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BWA",
- count: 1,
- investment: 8269612,
- },
- ],
- totalInvestments: {
- committed: 8269612,
- disbursed: 8269612,
- signed: 8269612,
- },
- percValue: "100",
- },
- },
- {
- name: "JOR",
- value: 8157519.47,
- formattedValue: "8,157,519 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "JOR",
- count: 2,
- investment: 8157519.47,
- },
- ],
- totalInvestments: {
- committed: 8157519.47,
- disbursed: 8157519.47,
- signed: 8157519.47,
- },
- percValue: "100",
- },
- },
- {
- name: "QRB",
- value: 8008679.04,
- formattedValue: "8,008,679 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QRB",
- count: 1,
- investment: 8008679.04,
- },
- ],
- totalInvestments: {
- committed: 8008679.04,
- disbursed: 8008679.04,
- signed: 8008679.04,
- },
- percValue: "100",
- },
- },
- {
- name: "GNQ",
- value: 7648737.63,
- formattedValue: "7,648,738 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "GNQ",
- count: 1,
- investment: 7648737.63,
- },
- ],
- totalInvestments: {
- committed: 7648737.63,
- disbursed: 7648737.63,
- signed: 7648737.63,
- },
- percValue: "100",
- },
- },
- {
- name: "BLZ",
- value: 7470658.56,
- formattedValue: "7,470,659 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BLZ",
- count: 2,
- investment: 7470658.56,
- },
- ],
- totalInvestments: {
- committed: 7470658.56,
- disbursed: 7470658.56,
- signed: 7470658.56,
- },
- percValue: "100",
- },
- },
- {
- name: "BTN",
- value: 5860636.83,
- formattedValue: "5,860,637 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "BTN",
- count: 2,
- investment: 5860636.83,
- },
- ],
- totalInvestments: {
- committed: 5906578.16,
- disbursed: 5860636.83,
- signed: 5984029.3,
- },
- percValue: "99.22220059134881",
- },
- },
- {
- name: "ALB",
- value: 5443975.72,
- formattedValue: "5,443,976 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "ALB",
- count: 1,
- investment: 5443975.72,
- },
- ],
- totalInvestments: {
- committed: 5443975.72,
- disbursed: 5443975.72,
- signed: 5443975.72,
- },
- percValue: "100",
- },
- },
- {
- name: "QPB",
- value: 5341858.85,
- formattedValue: "5,341,859 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QPB",
- count: 1,
- investment: 5341858.85,
- },
- ],
- totalInvestments: {
- committed: 5341858.85,
- disbursed: 5341858.85,
- signed: 5341858.85,
- },
- percValue: "100",
- },
- },
- {
- name: "HRV",
- value: 4944323.74,
- formattedValue: "4,944,324 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "HRV",
- count: 1,
- investment: 4944323.74,
- },
- ],
- totalInvestments: {
- committed: 4944323.74,
- disbursed: 4944323.74,
- signed: 4944323.74,
- },
- percValue: "100",
- },
- },
- {
- name: "QSA",
- value: 4894148,
- formattedValue: "4,894,148 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QSA",
- count: 1,
- investment: 4894148,
- },
- ],
- totalInvestments: {
- committed: 5000000,
- disbursed: 4894148,
- signed: 5000000,
- },
- percValue: "97.88296",
- },
- },
- {
- name: "MDV",
- value: 3908928.7,
- formattedValue: "3,908,929 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "MDV",
- count: 1,
- investment: 3908928.7,
- },
- ],
- totalInvestments: {
- committed: 3908928.7,
- disbursed: 3908928.7,
- signed: 3908928.7,
- },
- percValue: "100",
- },
- },
- {
- name: "PAN",
- value: 3877866.26,
- formattedValue: "3,877,866 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "PAN",
- count: 1,
- investment: 3877866.26,
- },
- ],
- totalInvestments: {
- committed: 3877866.26,
- disbursed: 3877866.26,
- signed: 3877866.26,
- },
- percValue: "100",
- },
- },
- {
- name: "QNB",
- value: 3594606.5,
- formattedValue: "3,594,607 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QNB",
- count: 3,
- investment: 3594606.5,
- },
- ],
- totalInvestments: {
- committed: 3594606.5,
- disbursed: 3594606.5,
- signed: 3594606.5,
- },
- percValue: "100",
- },
- },
- {
- name: "STP",
- value: 3486157.82,
- formattedValue: "3,486,158 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "STP",
- count: 3,
- investment: 3486157.82,
- },
- ],
- totalInvestments: {
- committed: 3486157.82,
- disbursed: 3486157.82,
- signed: 3486157.82,
- },
- percValue: "100",
- },
- },
- {
- name: "URY",
- value: 3455733.33,
- formattedValue: "3,455,733 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "URY",
- count: 2,
- investment: 3455733.33,
- },
- ],
- totalInvestments: {
- committed: 3455733.33,
- disbursed: 3455733.33,
- signed: 3455733.33,
- },
- percValue: "100",
- },
- },
- {
- name: "TUR",
- value: 3272762.62,
- formattedValue: "3,272,763 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "TUR",
- count: 1,
- investment: 3272762.62,
- },
- ],
- totalInvestments: {
- committed: 3272762.62,
- disbursed: 3272762.62,
- signed: 3272762.62,
- },
- percValue: "100",
- },
- },
- {
- name: "SYR",
- value: 2526007.66,
- formattedValue: "2,526,008 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "SYR",
- count: 1,
- investment: 2526007.66,
- },
- ],
- totalInvestments: {
- committed: 2526007.66,
- disbursed: 2526007.66,
- signed: 2526007.66,
- },
- percValue: "100",
- },
- },
- {
- name: "QTD",
- value: 700000,
- formattedValue: "700,000 USD",
- color: "#70777E",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "QTD",
- count: 1,
- investment: 700000,
- },
- ],
- totalInvestments: {
- committed: 700000,
- disbursed: 700000,
- signed: 700000,
- },
- percValue: "100",
- },
- },
- ],
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "HIV",
- count: 585,
- investment: 22438503078.05002,
- },
- ],
- totalInvestments: {
- committed: 23576317202.750008,
- disbursed: 22438503078.05002,
- signed: 25767326258.459995,
- },
- percValue: "95.173910687937",
- },
- },
- {
- name: "Malaria",
- color: "#DFE3E5",
- value: 14493002457.729996,
- formattedValue: "14,493,002,458 USD",
- _children: [
- {
- name: "NGA",
- value: 1266664112.5,
- formattedValue: "1,266,664,113 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "NGA",
- count: 9,
- investment: 1266664112.5,
- },
- ],
- totalInvestments: {
- committed: 1360909685.2,
- disbursed: 1266664112.5,
- signed: 1669714736.75,
- },
- percValue: "93.0748106413726",
- },
- },
- {
- name: "COD",
- value: 1181395848.33,
- formattedValue: "1,181,395,848 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "COD",
- count: 9,
- investment: 1181395848.33,
- },
- ],
- totalInvestments: {
- committed: 1307004578.03,
- disbursed: 1181395848.33,
- signed: 1557854991.58,
- },
- percValue: "90.38957232350897",
- },
- },
- {
- name: "TZA",
- value: 746581151.57,
- formattedValue: "746,581,152 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "TZA",
- count: 5,
- investment: 746581151.57,
- },
- ],
- totalInvestments: {
- committed: 802080487.69,
- disbursed: 746581151.57,
- signed: 936123646.57,
- },
- percValue: "93.08057770114334",
- },
- },
- {
- name: "ETH",
- value: 695279464.24,
- formattedValue: "695,279,464 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "ETH",
- count: 5,
- investment: 695279464.24,
- },
- ],
- totalInvestments: {
- committed: 701228409.12,
- disbursed: 695279464.24,
- signed: 808086765.02,
- },
- percValue: "99.15163949397521",
- },
- },
- {
- name: "UGA",
- value: 646951564.09,
- formattedValue: "646,951,564 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "UGA",
- count: 7,
- investment: 646951564.09,
- },
- ],
- totalInvestments: {
- committed: 702648761.29,
- disbursed: 646951564.09,
- signed: 894992514.25,
- },
- percValue: "92.07325191924555",
- },
- },
- {
- name: "GHA",
- value: 492733354.53,
- formattedValue: "492,733,355 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GHA",
- count: 6,
- investment: 492733354.53,
- },
- ],
- totalInvestments: {
- committed: 532277528.57,
- disbursed: 492733354.53,
- signed: 613804446.46,
- },
- percValue: "92.57076019229328",
- },
- },
- {
- name: "MOZ",
- value: 473663980.43,
- formattedValue: "473,663,980 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "MOZ",
- count: 6,
- investment: 473663980.43,
- },
- ],
- totalInvestments: {
- committed: 507324503.51,
- disbursed: 473663980.43,
- signed: 666782965.89,
- },
- percValue: "93.36509022388734",
- },
- },
- {
- name: "CIV",
- value: 440209709.4,
- formattedValue: "440,209,709 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "CIV",
- count: 5,
- investment: 440209709.4,
- },
- ],
- totalInvestments: {
- committed: 481254839.16,
- disbursed: 440209709.4,
- signed: 568818737.9,
- },
- percValue: "91.47122762824749",
- },
- },
- {
- name: "SDN",
- value: 436381179.55,
- formattedValue: "436,381,180 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SDN",
- count: 5,
- investment: 436381179.55,
- },
- ],
- totalInvestments: {
- committed: 446066473.29,
- disbursed: 436381179.55,
- signed: 450746148.55,
- },
- percValue: "97.82873308801594",
- },
- },
- {
- name: "KEN",
- value: 390737446.4,
- formattedValue: "390,737,446 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "KEN",
- count: 6,
- investment: 390737446.4,
- },
- ],
- totalInvestments: {
- committed: 414477456.65,
- disbursed: 390737446.4,
- signed: 415151005.92,
- },
- percValue: "94.27230362734856",
- },
- },
- {
- name: "QSE",
- value: 377435735.1,
- formattedValue: "377,435,735 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "QSE",
- count: 1,
- investment: 377435735.1,
- },
- ],
- totalInvestments: {
- committed: 485818301.24,
- disbursed: 377435735.1,
- signed: 587240081.84,
- },
- percValue: "77.69071978899005",
- },
- },
- {
- name: "BFA",
- value: 343158292.28,
- formattedValue: "343,158,292 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BFA",
- count: 6,
- investment: 343158292.28,
- },
- ],
- totalInvestments: {
- committed: 435911206.06,
- disbursed: 343158292.28,
- signed: 509198859.07,
- },
- percValue: "78.72206254609722",
- },
- },
- {
- name: "MDG",
- value: 334750351.34,
- formattedValue: "334,750,351 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "MDG",
- count: 13,
- investment: 334750351.34,
- },
- ],
- totalInvestments: {
- committed: 338515865.27,
- disbursed: 334750351.34,
- signed: 339038667.28,
- },
- percValue: "98.88764033939837",
- },
- },
- {
- name: "RWA",
- value: 329590442.59,
- formattedValue: "329,590,443 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "RWA",
- count: 5,
- investment: 329590442.59,
- },
- ],
- totalInvestments: {
- committed: 330956852.59,
- disbursed: 329590442.59,
- signed: 330956852.59,
- },
- percValue: "99.5871334920831",
- },
- },
- {
- name: "ZMB",
- value: 292104811.65,
- formattedValue: "292,104,812 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "ZMB",
- count: 9,
- investment: 292104811.65,
- },
- ],
- totalInvestments: {
- committed: 328980520.67,
- disbursed: 292104811.65,
- signed: 350292320.23,
- },
- percValue: "88.79091414139074",
- },
- },
- {
- name: "IDN",
- value: 283056124.07,
- formattedValue: "283,056,124 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "IDN",
- count: 6,
- investment: 283056124.07,
- },
- ],
- totalInvestments: {
- committed: 295546397.72,
- disbursed: 283056124.07,
- signed: 327555591.32,
- },
- percValue: "95.77383661369025",
- },
- },
- {
- name: "CMR",
- value: 271549083.86,
- formattedValue: "271,549,084 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "CMR",
- count: 5,
- investment: 271549083.86,
- },
- ],
- totalInvestments: {
- committed: 302447610.63,
- disbursed: 271549083.86,
- signed: 385692114.43,
- },
- percValue: "89.78384166909495",
- },
- },
- {
- name: "MWI",
- value: 261837368.2,
- formattedValue: "261,837,368 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "MWI",
- count: 5,
- investment: 261837368.2,
- },
- ],
- totalInvestments: {
- committed: 316953459.39,
- disbursed: 261837368.2,
- signed: 347572951.18,
- },
- percValue: "82.61066741594337",
- },
- },
- {
- name: "ZWE",
- value: 239332539.01,
- formattedValue: "239,332,539 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "ZWE",
- count: 7,
- investment: 239332539.01,
- },
- ],
- totalInvestments: {
- committed: 262457633.93,
- disbursed: 239332539.01,
- signed: 286173571.22,
- },
- percValue: "91.189017985978",
- },
- },
- {
- name: "NER",
- value: 230521489.91,
- formattedValue: "230,521,490 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "NER",
- count: 6,
- investment: 230521489.91,
- },
- ],
- totalInvestments: {
- committed: 264261391.86,
- disbursed: 230521489.91,
- signed: 326455335.36,
- },
- percValue: "87.23237559882577",
- },
- },
- {
- name: "SSD",
- value: 230133339.71,
- formattedValue: "230,133,340 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SSD",
- count: 3,
- investment: 230133339.71,
- },
- ],
- totalInvestments: {
- committed: 233442134.71,
- disbursed: 230133339.71,
- signed: 233918694.99,
- },
- percValue: "98.58260591897411",
- },
- },
- {
- name: "IND",
- value: 227471242.08,
- formattedValue: "227,471,242 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "IND",
- count: 6,
- investment: 227471242.08,
- },
- ],
- totalInvestments: {
- committed: 256836039.27,
- disbursed: 227471242.08,
- signed: 315315386.92,
- },
- percValue: "88.56671467389741",
- },
- },
- {
- name: "TCD",
- value: 202150047.61,
- formattedValue: "202,150,048 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "TCD",
- count: 4,
- investment: 202150047.61,
- },
- ],
- totalInvestments: {
- committed: 202798108.2,
- disbursed: 202150047.61,
- signed: 206849781.31,
- },
- percValue: "99.68044051507577",
- },
- },
- {
- name: "BDI",
- value: 193417335.23,
- formattedValue: "193,417,335 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BDI",
- count: 8,
- investment: 193417335.23,
- },
- ],
- totalInvestments: {
- committed: 215404447.37,
- disbursed: 193417335.23,
- signed: 231125788.89,
- },
- percValue: "89.79263779905493",
- },
- },
- {
- name: "PNG",
- value: 169633103.5,
- formattedValue: "169,633,104 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "PNG",
- count: 7,
- investment: 169633103.5,
- },
- ],
- totalInvestments: {
- committed: 181300289.23,
- disbursed: 169633103.5,
- signed: 202964060.03,
- },
- percValue: "93.564717530484",
- },
- },
- {
- name: "GIN",
- value: 169405724.53,
- formattedValue: "169,405,725 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GIN",
- count: 4,
- investment: 169405724.53,
- },
- ],
- totalInvestments: {
- committed: 218446569.45,
- disbursed: 169405724.53,
- signed: 236952802.35,
- },
- percValue: "77.55018765299269",
- },
- },
- {
- name: "MLI",
- value: 166524804.82,
- formattedValue: "166,524,805 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "MLI",
- count: 4,
- investment: 166524804.82,
- },
- ],
- totalInvestments: {
- committed: 170932632.99,
- disbursed: 166524804.82,
- signed: 172728735.71,
- },
- percValue: "97.42130680789438",
- },
- },
- {
- name: "SEN",
- value: 159863645.69,
- formattedValue: "159,863,646 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SEN",
- count: 7,
- investment: 159863645.69,
- },
- ],
- totalInvestments: {
- committed: 165197614.69,
- disbursed: 159863645.69,
- signed: 166609438.83,
- },
- percValue: "96.77115858482013",
- },
- },
- {
- name: "BEN",
- value: 150758747.35,
- formattedValue: "150,758,747 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BEN",
- count: 4,
- investment: 150758747.35,
- },
- ],
- totalInvestments: {
- committed: 153794924.28,
- disbursed: 150758747.35,
- signed: 157017540.34,
- },
- percValue: "98.02582761153266",
- },
- },
- {
- name: "TGO",
- value: 142542852.61,
- formattedValue: "142,542,853 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "TGO",
- count: 6,
- investment: 142542852.61,
- },
- ],
- totalInvestments: {
- committed: 160513085.69,
- disbursed: 142542852.61,
- signed: 204615766.68,
- },
- percValue: "88.80450587392855",
- },
- },
- {
- name: "LBR",
- value: 140600008.53,
- formattedValue: "140,600,009 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "LBR",
- count: 4,
- investment: 140600008.53,
- },
- ],
- totalInvestments: {
- committed: 147371923.78,
- disbursed: 140600008.53,
- signed: 147963001.39,
- },
- percValue: "95.4048810137613",
- },
- },
- {
- name: "SOM",
- value: 137572066.58,
- formattedValue: "137,572,067 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SOM",
- count: 4,
- investment: 137572066.58,
- },
- ],
- totalInvestments: {
- committed: 152149008.16,
- disbursed: 137572066.58,
- signed: 163225130.81,
- },
- percValue: "90.41929897783437",
- },
- },
- {
- name: "AGO",
- value: 136980459.33,
- formattedValue: "136,980,459 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "AGO",
- count: 4,
- investment: 136980459.33,
- },
- ],
- totalInvestments: {
- committed: 138480577.91,
- disbursed: 136980459.33,
- signed: 140225433.14,
- },
- percValue: "98.91672998290423",
- },
- },
- {
- name: "PAK",
- value: 135177866.05,
- formattedValue: "135,177,866 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "PAK",
- count: 6,
- investment: 135177866.05,
- },
- ],
- totalInvestments: {
- committed: 148799296.29,
- disbursed: 135177866.05,
- signed: 165384512.31,
- },
- percValue: "90.84576971825679",
- },
- },
- {
- name: "KHM",
- value: 134494653.83,
- formattedValue: "134,494,654 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "KHM",
- count: 6,
- investment: 134494653.83,
- },
- ],
- totalInvestments: {
- committed: 134494653.83,
- disbursed: 134494653.83,
- signed: 134494653.83,
- },
- percValue: "100",
- },
- },
- {
- name: "AFG",
- value: 132724229.67,
- formattedValue: "132,724,230 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "AFG",
- count: 7,
- investment: 132724229.67,
- },
- ],
- totalInvestments: {
- committed: 138019797.02,
- disbursed: 132724229.67,
- signed: 143247620.26,
- },
- percValue: "96.16318277208258",
- },
- },
- {
- name: "MMR",
- value: 127580525.05,
- formattedValue: "127,580,525 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "MMR",
- count: 3,
- investment: 127580525.05,
- },
- ],
- totalInvestments: {
- committed: 127580525.05,
- disbursed: 127580525.05,
- signed: 127580525.05,
- },
- percValue: "100",
- },
- },
- {
- name: "BGD",
- value: 117187365.74,
- formattedValue: "117,187,366 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BGD",
- count: 4,
- investment: 117187365.74,
- },
- ],
- totalInvestments: {
- committed: 124136747.47,
- disbursed: 117187365.74,
- signed: 139246603.99,
- },
- percValue: "94.40183356529504",
- },
- },
- {
- name: "ERI",
- value: 115397528.44,
- formattedValue: "115,397,528 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "ERI",
- count: 4,
- investment: 115397528.44,
- },
- ],
- totalInvestments: {
- committed: 121024779.79,
- disbursed: 115397528.44,
- signed: 131529842.48,
- },
- percValue: "95.35033126293284",
- },
- },
- {
- name: "CHN",
- value: 113620575.87,
- formattedValue: "113,620,576 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "CHN",
- count: 5,
- investment: 113620575.87,
- },
- ],
- totalInvestments: {
- committed: 113620575.87,
- disbursed: 113620575.87,
- signed: 113620575.87,
- },
- percValue: "100",
- },
- },
- {
- name: "PHL",
- value: 107485152.13,
- formattedValue: "107,485,152 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "PHL",
- count: 5,
- investment: 107485152.13,
- },
- ],
- totalInvestments: {
- committed: 110671007.85,
- disbursed: 107485152.13,
- signed: 114010016.94,
- },
- percValue: "97.12132763413702",
- },
- },
- {
- name: "CAF",
- value: 101561359.2,
- formattedValue: "101,561,359 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "CAF",
- count: 5,
- investment: 101561359.2,
- },
- ],
- totalInvestments: {
- committed: 122429523.32,
- disbursed: 101561359.2,
- signed: 163637502.78,
- },
- percValue: "82.95495763268157",
- },
- },
- {
- name: "GMB",
- value: 97156838.88,
- formattedValue: "97,156,839 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GMB",
- count: 4,
- investment: 97156838.88,
- },
- ],
- totalInvestments: {
- committed: 99264904.39,
- disbursed: 97156838.88,
- signed: 99385413.53,
- },
- percValue: "97.87632343681342",
- },
- },
- {
- name: "QPA",
- value: 88919188.19,
- formattedValue: "88,919,188 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "QPA",
- count: 4,
- investment: 88919188.19,
- },
- ],
- totalInvestments: {
- committed: 90049352.75,
- disbursed: 88919188.19,
- signed: 106354039.76,
- },
- percValue: "98.74494982419516",
- },
- },
- {
- name: "HTI",
- value: 87618958.72,
- formattedValue: "87,618,959 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "HTI",
- count: 4,
- investment: 87618958.72,
- },
- ],
- totalInvestments: {
- committed: 92941696.33,
- disbursed: 87618958.72,
- signed: 103461990.4,
- },
- percValue: "94.27303587068067",
- },
- },
- {
- name: "THA",
- value: 82983487.58,
- formattedValue: "82,983,488 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "THA",
- count: 3,
- investment: 82983487.58,
- },
- ],
- totalInvestments: {
- committed: 82983487.58,
- disbursed: 82983487.58,
- signed: 82983487.58,
- },
- percValue: "100",
- },
- },
- {
- name: "GNB",
- value: 77122506.16,
- formattedValue: "77,122,506 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GNB",
- count: 5,
- investment: 77122506.16,
- },
- ],
- totalInvestments: {
- committed: 86097266.04,
- disbursed: 77122506.16,
- signed: 96415216.96,
- },
- percValue: "89.57602222139037",
- },
- },
- {
- name: "SLE",
- value: 70265677.76,
- formattedValue: "70,265,678 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SLE",
- count: 4,
- investment: 70265677.76,
- },
- ],
- totalInvestments: {
- committed: 70265677.76,
- disbursed: 70265677.76,
- signed: 71258343.09,
- },
- percValue: "100",
- },
- },
- {
- name: "LAO",
- value: 63422642.75,
- formattedValue: "63,422,643 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "LAO",
- count: 5,
- investment: 63422642.75,
- },
- ],
- totalInvestments: {
- committed: 63422642.75,
- disbursed: 63422642.75,
- signed: 63422642.75,
- },
- percValue: "100",
- },
- },
- {
- name: "VNM",
- value: 62614867.42,
- formattedValue: "62,614,867 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "VNM",
- count: 3,
- investment: 62614867.42,
- },
- ],
- totalInvestments: {
- committed: 62614867.42,
- disbursed: 62614867.42,
- signed: 62614867.42,
- },
- percValue: "100",
- },
- },
- {
- name: "NPL",
- value: 48884234.74,
- formattedValue: "48,884,235 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "NPL",
- count: 7,
- investment: 48884234.74,
- },
- ],
- totalInvestments: {
- committed: 49996826.7,
- disbursed: 48884234.74,
- signed: 52810153.2,
- },
- percValue: "97.77467484751386",
- },
- },
- {
- name: "YEM",
- value: 47058789.22,
- formattedValue: "47,058,789 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "YEM",
- count: 3,
- investment: 47058789.22,
- },
- ],
- totalInvestments: {
- committed: 47058789.22,
- disbursed: 47058789.22,
- signed: 47058789.22,
- },
- percValue: "100",
- },
- },
- {
- name: "GTM",
- value: 41670507.11,
- formattedValue: "41,670,507 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GTM",
- count: 2,
- investment: 41670507.11,
- },
- ],
- totalInvestments: {
- committed: 43030302.31,
- disbursed: 41670507.11,
- signed: 43174212.3,
- },
- percValue: "96.8399125104822",
- },
- },
- {
- name: "LKA",
- value: 41198066.89,
- formattedValue: "41,198,067 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "LKA",
- count: 8,
- investment: 41198066.89,
- },
- ],
- totalInvestments: {
- committed: 41198066.89,
- disbursed: 41198066.89,
- signed: 42822944.89,
- },
- percValue: "100",
- },
- },
- {
- name: "QUA",
- value: 38076346.12,
- formattedValue: "38,076,346 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "QUA",
- count: 4,
- investment: 38076346.12,
- },
- ],
- totalInvestments: {
- committed: 39078710.36,
- disbursed: 38076346.12,
- signed: 40205961.19,
- },
- percValue: "97.43501197770846",
- },
- },
- {
- name: "PRK",
- value: 35351832.71,
- formattedValue: "35,351,833 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "PRK",
- count: 2,
- investment: 35351832.71,
- },
- ],
- totalInvestments: {
- committed: 35351832.72,
- disbursed: 35351832.71,
- signed: 35351832.71,
- },
- percValue: "99.99999997171292",
- },
- },
- {
- name: "TLS",
- value: 34971477.11,
- formattedValue: "34,971,477 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "TLS",
- count: 3,
- investment: 34971477.11,
- },
- ],
- totalInvestments: {
- committed: 36538212.53,
- disbursed: 34971477.11,
- signed: 38770003.44,
- },
- percValue: "95.71206331258372",
- },
- },
- {
- name: "COG",
- value: 32588905.78,
- formattedValue: "32,588,906 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "COG",
- count: 3,
- investment: 32588905.78,
- },
- ],
- totalInvestments: {
- committed: 47708715.51,
- disbursed: 32588905.78,
- signed: 68608018.22,
- },
- percValue: "68.3080762741751",
- },
- },
- {
- name: "NIC",
- value: 32408340.65,
- formattedValue: "32,408,341 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "NIC",
- count: 4,
- investment: 32408340.65,
- },
- ],
- totalInvestments: {
- committed: 32660319.02,
- disbursed: 32408340.65,
- signed: 33205622.44,
- },
- percValue: "99.22848772589852",
- },
- },
- {
- name: "BOL",
- value: 32096908.84,
- formattedValue: "32,096,909 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BOL",
- count: 4,
- investment: 32096908.84,
- },
- ],
- totalInvestments: {
- committed: 32598473.24,
- disbursed: 32096908.84,
- signed: 32621022.73,
- },
- percValue: "98.46138683763706",
- },
- },
- {
- name: "NAM",
- value: 29571747.15,
- formattedValue: "29,571,747 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "NAM",
- count: 3,
- investment: 29571747.15,
- },
- ],
- totalInvestments: {
- committed: 29571747.15,
- disbursed: 29571747.15,
- signed: 29664494.69,
- },
- percValue: "100",
- },
- },
- {
- name: "COL",
- value: 27934986.96,
- formattedValue: "27,934,987 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "COL",
- count: 2,
- investment: 27934986.96,
- },
- ],
- totalInvestments: {
- committed: 27936467.07,
- disbursed: 27934986.96,
- signed: 27936467.07,
- },
- percValue: "99.99470187122698",
- },
- },
- {
- name: "IRN",
- value: 27041000.45,
- formattedValue: "27,041,000 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "IRN",
- count: 2,
- investment: 27041000.45,
- },
- ],
- totalInvestments: {
- committed: 27041000.45,
- disbursed: 27041000.45,
- signed: 27041000.45,
- },
- percValue: "100",
- },
- },
- {
- name: "QNB",
- value: 25367523.33,
- formattedValue: "25,367,523 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "QNB",
- count: 4,
- investment: 25367523.33,
- },
- ],
- totalInvestments: {
- committed: 27921115.19,
- disbursed: 25367523.33,
- signed: 30053209.99,
- },
- percValue: "90.85426265167742",
- },
- },
- {
- name: "HND",
- value: 24873394.81,
- formattedValue: "24,873,395 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "HND",
- count: 3,
- investment: 24873394.81,
- },
- ],
- totalInvestments: {
- committed: 25901431.75,
- disbursed: 24873394.81,
- signed: 28060558.41,
- },
- percValue: "96.03096481336404",
- },
- },
- {
- name: "QRD",
- value: 23776914,
- formattedValue: "23,776,914 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "QRD",
- count: 1,
- investment: 23776914,
- },
- ],
- totalInvestments: {
- committed: 23776914,
- disbursed: 23776914,
- signed: 23776914,
- },
- percValue: "100",
- },
- },
- {
- name: "COM",
- value: 22811935.3,
- formattedValue: "22,811,935 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "COM",
- count: 3,
- investment: 22811935.3,
- },
- ],
- totalInvestments: {
- committed: 23598293.97,
- disbursed: 22811935.3,
- signed: 24290007.09,
- },
- percValue: "96.66773084952803",
- },
- },
- {
- name: "GNQ",
- value: 22205169.87,
- formattedValue: "22,205,170 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GNQ",
- count: 1,
- investment: 22205169.87,
- },
- ],
- totalInvestments: {
- committed: 22205169.87,
- disbursed: 22205169.87,
- signed: 22205169.87,
- },
- percValue: "100",
- },
- },
- {
- name: "STP",
- value: 20736826.75,
- formattedValue: "20,736,827 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "STP",
- count: 3,
- investment: 20736826.75,
- },
- ],
- totalInvestments: {
- committed: 20736826.75,
- disbursed: 20736826.75,
- signed: 20736826.75,
- },
- percValue: "100",
- },
- },
- {
- name: "TJK",
- value: 18221982.64,
- formattedValue: "18,221,983 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "TJK",
- count: 2,
- investment: 18221982.64,
- },
- ],
- totalInvestments: {
- committed: 18221982.62,
- disbursed: 18221982.64,
- signed: 18221982.64,
- },
- percValue: "100.00000010975754",
- },
- },
- {
- name: "BRA",
- value: 17225846.72,
- formattedValue: "17,225,847 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BRA",
- count: 2,
- investment: 17225846.72,
- },
- ],
- totalInvestments: {
- committed: 17225846.71,
- disbursed: 17225846.72,
- signed: 17225846.72,
- },
- percValue: "100.0000000580523",
- },
- },
- {
- name: "GAB",
- value: 16567303.99,
- formattedValue: "16,567,304 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GAB",
- count: 3,
- investment: 16567303.99,
- },
- ],
- totalInvestments: {
- committed: 16566927.1,
- disbursed: 16567303.99,
- signed: 16567303.99,
- },
- percValue: "100.00227495417663",
- },
- },
- {
- name: "QRA",
- value: 15738873.6,
- formattedValue: "15,738,874 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "QRA",
- count: 2,
- investment: 15738873.6,
- },
- ],
- totalInvestments: {
- committed: 15738873.6,
- disbursed: 15738873.6,
- signed: 15738873.6,
- },
- percValue: "100",
- },
- },
- {
- name: "SWZ",
- value: 15168423.7,
- formattedValue: "15,168,424 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SWZ",
- count: 3,
- investment: 15168423.7,
- },
- ],
- totalInvestments: {
- committed: 15457885.28,
- disbursed: 15168423.7,
- signed: 16799383.89,
- },
- percValue: "98.12741798275269",
- },
- },
- {
- name: "MRT",
- value: 15153989.42,
- formattedValue: "15,153,989 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "MRT",
- count: 3,
- investment: 15153989.42,
- },
- ],
- totalInvestments: {
- committed: 15153989.42,
- disbursed: 15153989.42,
- signed: 15153989.42,
- },
- percValue: "100",
- },
- },
- {
- name: "SUR",
- value: 13761974.57,
- formattedValue: "13,761,975 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SUR",
- count: 3,
- investment: 13761974.57,
- },
- ],
- totalInvestments: {
- committed: 15147088.99,
- disbursed: 13761974.57,
- signed: 17020097.5,
- },
- percValue: "90.85557349722812",
- },
- },
- {
- name: "VEN",
- value: 12721755.4,
- formattedValue: "12,721,755 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "VEN",
- count: 1,
- investment: 12721755.4,
- },
- ],
- totalInvestments: {
- committed: 13390919.53,
- disbursed: 12721755.4,
- signed: 19800000,
- },
- percValue: "95.00285153307915",
- },
- },
- {
- name: "DJI",
- value: 12531655.32,
- formattedValue: "12,531,655 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "DJI",
- count: 2,
- investment: 12531655.32,
- },
- ],
- totalInvestments: {
- committed: 12531655.32,
- disbursed: 12531655.32,
- signed: 12531655.32,
- },
- percValue: "100",
- },
- },
- {
- name: "SLB",
- value: 8714975.72,
- formattedValue: "8,714,976 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SLB",
- count: 1,
- investment: 8714975.72,
- },
- ],
- totalInvestments: {
- committed: 10973031.53,
- disbursed: 8714975.72,
- signed: 16843713.28,
- },
- percValue: "79.42176868965947",
- },
- },
- {
- name: "BTN",
- value: 8589696.81,
- formattedValue: "8,589,697 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BTN",
- count: 3,
- investment: 8589696.81,
- },
- ],
- totalInvestments: {
- committed: 8635056.51,
- disbursed: 8589696.81,
- signed: 10108708.12,
- },
- percValue: "99.47470291656494",
- },
- },
- {
- name: "ECU",
- value: 7858627.99,
- formattedValue: "7,858,628 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "ECU",
- count: 2,
- investment: 7858627.99,
- },
- ],
- totalInvestments: {
- committed: 7858627.99,
- disbursed: 7858627.99,
- signed: 7858627.99,
- },
- percValue: "100",
- },
- },
- {
- name: "DOM",
- value: 7143689.54,
- formattedValue: "7,143,690 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "DOM",
- count: 2,
- investment: 7143689.54,
- },
- ],
- totalInvestments: {
- committed: 7143689.54,
- disbursed: 7143689.54,
- signed: 7143689.54,
- },
- percValue: "100",
- },
- },
- {
- name: "KGZ",
- value: 6386455.84,
- formattedValue: "6,386,456 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "KGZ",
- count: 3,
- investment: 6386455.84,
- },
- ],
- totalInvestments: {
- committed: 6386455.84,
- disbursed: 6386455.84,
- signed: 6386455.84,
- },
- percValue: "100",
- },
- },
- {
- name: "GUY",
- value: 6154191.24,
- formattedValue: "6,154,191 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GUY",
- count: 3,
- investment: 6154191.24,
- },
- ],
- totalInvestments: {
- committed: 6598250.43,
- disbursed: 6154191.24,
- signed: 6820648.49,
- },
- percValue: "93.27004643562763",
- },
- },
- {
- name: "AZE",
- value: 5474039.39,
- formattedValue: "5,474,039 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "AZE",
- count: 1,
- investment: 5474039.39,
- },
- ],
- totalInvestments: {
- committed: 5474039.38,
- disbursed: 5474039.39,
- signed: 5474039.38,
- },
- percValue: "100.00000018268045",
- },
- },
- {
- name: "BWA",
- value: 5323403.68,
- formattedValue: "5,323,404 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "BWA",
- count: 1,
- investment: 5323403.68,
- },
- ],
- totalInvestments: {
- committed: 5376892.68,
- disbursed: 5323403.68,
- signed: 5655982.69,
- },
- percValue: "99.00520610725674",
- },
- },
- {
- name: "UZB",
- value: 5163039.82,
- formattedValue: "5,163,040 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "UZB",
- count: 3,
- investment: 5163039.82,
- },
- ],
- totalInvestments: {
- committed: 5163039.82,
- disbursed: 5163039.82,
- signed: 5163039.82,
- },
- percValue: "100",
- },
- },
- {
- name: "GEO",
- value: 3500709.8,
- formattedValue: "3,500,710 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "GEO",
- count: 3,
- investment: 3500709.8,
- },
- ],
- totalInvestments: {
- committed: 3500709.8,
- disbursed: 3500709.8,
- signed: 3500709.8,
- },
- percValue: "100",
- },
- },
- {
- name: "PRY",
- value: 2782935.98,
- formattedValue: "2,782,936 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "PRY",
- count: 1,
- investment: 2782935.98,
- },
- ],
- totalInvestments: {
- committed: 2782935.98,
- disbursed: 2782935.98,
- signed: 2782935.98,
- },
- percValue: "100",
- },
- },
- {
- name: "CPV",
- value: 2017807.24,
- formattedValue: "2,017,807 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "CPV",
- count: 2,
- investment: 2017807.24,
- },
- ],
- totalInvestments: {
- committed: 2040529.47,
- disbursed: 2017807.24,
- signed: 2040529.47,
- },
- percValue: "98.88645421033787",
- },
- },
- {
- name: "SLV",
- value: 1855321.47,
- formattedValue: "1,855,321 USD",
- color: "#70777E",
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "SLV",
- count: 1,
- investment: 1855321.47,
- },
- ],
- totalInvestments: {
- committed: 1855321.47,
- disbursed: 1855321.47,
- signed: 1855321.47,
- },
- percValue: "100",
- },
- },
- ],
- tooltip: {
- header: "Malaria",
- componentsStats: [
- {
- name: "Malaria",
- count: 377,
- investment: 14493002457.729996,
- },
- ],
- totalInvestments: {
- committed: 15649339082.819994,
- disbursed: 14493002457.729996,
- signed: 17769498463.409992,
- },
- percValue: "92.61095552361418",
- },
- },
- {
- name: "Tuberculosis",
- color: "#DFE3E5",
- value: 7685843178.23,
- formattedValue: "7,685,843,178 USD",
- _children: [
- {
- name: "IND",
- value: 893485329.9,
- formattedValue: "893,485,330 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "IND",
- count: 14,
- investment: 893485329.9,
- },
- ],
- totalInvestments: {
- committed: 977275924.91,
- disbursed: 893485329.9,
- signed: 1216378785.19,
- },
- percValue: "91.42610670392638",
- },
- },
- {
- name: "PAK",
- value: 433024986.01,
- formattedValue: "433,024,986 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PAK",
- count: 11,
- investment: 433024986.01,
- },
- ],
- totalInvestments: {
- committed: 439635158.14,
- disbursed: 433024986.01,
- signed: 464379392.95,
- },
- percValue: "98.49644142248172",
- },
- },
- {
- name: "IDN",
- value: 406719761.76,
- formattedValue: "406,719,762 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "IDN",
- count: 8,
- investment: 406719761.76,
- },
- ],
- totalInvestments: {
- committed: 482279321.27,
- disbursed: 406719761.76,
- signed: 553608084.08,
- },
- percValue: "84.33282204365992",
- },
- },
- {
- name: "BGD",
- value: 382144082.89,
- formattedValue: "382,144,083 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BGD",
- count: 8,
- investment: 382144082.89,
- },
- ],
- totalInvestments: {
- committed: 453115644.79,
- disbursed: 382144082.89,
- signed: 503529091.95,
- },
- percValue: "84.33698709897948",
- },
- },
- {
- name: "CHN",
- value: 365410218,
- formattedValue: "365,410,218 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "CHN",
- count: 6,
- investment: 365410218,
- },
- ],
- totalInvestments: {
- committed: 365410217.99,
- disbursed: 365410218,
- signed: 365410218,
- },
- percValue: "100.00000000273664",
- },
- },
- {
- name: "NGA",
- value: 362063311.23,
- formattedValue: "362,063,311 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "NGA",
- count: 6,
- investment: 362063311.23,
- },
- ],
- totalInvestments: {
- committed: 421577275.26,
- disbursed: 362063311.23,
- signed: 520378527.01,
- },
- percValue: "85.88302370110063",
- },
- },
- {
- name: "PHL",
- value: 357323750.66,
- formattedValue: "357,323,751 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PHL",
- count: 4,
- investment: 357323750.66,
- },
- ],
- totalInvestments: {
- committed: 402523363.42,
- disbursed: 357323750.66,
- signed: 464388539.9,
- },
- percValue: "88.77093434379411",
- },
- },
- {
- name: "MMR",
- value: 242324526.97,
- formattedValue: "242,324,527 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MMR",
- count: 3,
- investment: 242324526.97,
- },
- ],
- totalInvestments: {
- committed: 285012494.97,
- disbursed: 242324526.97,
- signed: 331222865.53,
- },
- percValue: "85.02242226099831",
- },
- },
- {
- name: "ETH",
- value: 209872322.86,
- formattedValue: "209,872,323 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ETH",
- count: 3,
- investment: 209872322.86,
- },
- ],
- totalInvestments: {
- committed: 210075600.63,
- disbursed: 209872322.86,
- signed: 266969336.63,
- },
- percValue: "99.90323589727204",
- },
- },
- {
- name: "KEN",
- value: 175236985.17,
- formattedValue: "175,236,985 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "KEN",
- count: 5,
- investment: 175236985.17,
- },
- ],
- totalInvestments: {
- committed: 186256579.18,
- disbursed: 175236985.17,
- signed: 195463224.45,
- },
- percValue: "94.08364844962037",
- },
- },
- {
- name: "VNM",
- value: 153803737.35,
- formattedValue: "153,803,737 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "VNM",
- count: 4,
- investment: 153803737.35,
- },
- ],
- totalInvestments: {
- committed: 187982619.66,
- disbursed: 153803737.35,
- signed: 213174063.31,
- },
- percValue: "81.81806255715631",
- },
- },
- {
- name: "COD",
- value: 147827412.47,
- formattedValue: "147,827,412 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "COD",
- count: 7,
- investment: 147827412.47,
- },
- ],
- totalInvestments: {
- committed: 156630141.62,
- disbursed: 147827412.47,
- signed: 161863502.71,
- },
- percValue: "94.37992645671208",
- },
- },
- {
- name: "ZWE",
- value: 115242222.97,
- formattedValue: "115,242,223 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ZWE",
- count: 4,
- investment: 115242222.97,
- },
- ],
- totalInvestments: {
- committed: 128683526.59,
- disbursed: 115242222.97,
- signed: 139566662.65,
- },
- percValue: "89.55475966801447",
- },
- },
- {
- name: "RWA",
- value: 114798945,
- formattedValue: "114,798,945 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "RWA",
- count: 3,
- investment: 114798945,
- },
- ],
- totalInvestments: {
- committed: 116325855,
- disbursed: 114798945,
- signed: 116325855,
- },
- percValue: "98.68738553436809",
- },
- },
- {
- name: "SOM",
- value: 112262784.93,
- formattedValue: "112,262,785 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SOM",
- count: 3,
- investment: 112262784.93,
- },
- ],
- totalInvestments: {
- committed: 124280117.88,
- disbursed: 112262784.93,
- signed: 138177821.2,
- },
- percValue: "90.33044612847611",
- },
- },
- {
- name: "RUS",
- value: 106558269.75,
- formattedValue: "106,558,270 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "RUS",
- count: 2,
- investment: 106558269.75,
- },
- ],
- totalInvestments: {
- committed: 106558269.74,
- disbursed: 106558269.75,
- signed: 106558269.75,
- },
- percValue: "100.00000000938454",
- },
- },
- {
- name: "TZA",
- value: 99405795.71,
- formattedValue: "99,405,796 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "TZA",
- count: 2,
- investment: 99405795.71,
- },
- ],
- totalInvestments: {
- committed: 105732097.6,
- disbursed: 99405795.71,
- signed: 133274877.61,
- },
- percValue: "94.01666851069831",
- },
- },
- {
- name: "UZB",
- value: 98361010.16,
- formattedValue: "98,361,010 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "UZB",
- count: 4,
- investment: 98361010.16,
- },
- ],
- totalInvestments: {
- committed: 98430445.66,
- disbursed: 98361010.16,
- signed: 99322122.82,
- },
- percValue: "99.92945729389477",
- },
- },
- {
- name: "MOZ",
- value: 96330527.04,
- formattedValue: "96,330,527 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MOZ",
- count: 3,
- investment: 96330527.04,
- },
- ],
- totalInvestments: {
- committed: 128528193.43,
- disbursed: 96330527.04,
- signed: 144051182.63,
- },
- percValue: "74.94894658459839",
- },
- },
- {
- name: "KAZ",
- value: 90414449.53,
- formattedValue: "90,414,450 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "KAZ",
- count: 4,
- investment: 90414449.53,
- },
- ],
- totalInvestments: {
- committed: 91457863.48,
- disbursed: 90414449.53,
- signed: 93616205.74,
- },
- percValue: "98.85913150570352",
- },
- },
- {
- name: "PER",
- value: 89194254.4,
- formattedValue: "89,194,254 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PER",
- count: 5,
- investment: 89194254.4,
- },
- ],
- totalInvestments: {
- committed: 89265262.96,
- disbursed: 89194254.4,
- signed: 91046018.71,
- },
- percValue: "99.92045219198893",
- },
- },
- {
- name: "SDN",
- value: 88253333.35,
- formattedValue: "88,253,333 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SDN",
- count: 4,
- investment: 88253333.35,
- },
- ],
- totalInvestments: {
- committed: 91400309.35,
- disbursed: 88253333.35,
- signed: 99874609.02,
- },
- percValue: "96.55693069051961",
- },
- },
- {
- name: "TJK",
- value: 85556768.31,
- formattedValue: "85,556,768 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "TJK",
- count: 5,
- investment: 85556768.31,
- },
- ],
- totalInvestments: {
- committed: 85556768.31,
- disbursed: 85556768.31,
- signed: 85689840.81,
- },
- percValue: "100",
- },
- },
- {
- name: "GHA",
- value: 85224608.61,
- formattedValue: "85,224,609 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GHA",
- count: 3,
- investment: 85224608.61,
- },
- ],
- totalInvestments: {
- committed: 85224608.61,
- disbursed: 85224608.61,
- signed: 85224608.61,
- },
- percValue: "100",
- },
- },
- {
- name: "SSD",
- value: 79596125.5,
- formattedValue: "79,596,126 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SSD",
- count: 4,
- investment: 79596125.5,
- },
- ],
- totalInvestments: {
- committed: 79596125.5,
- disbursed: 79596125.5,
- signed: 79596125.54,
- },
- percValue: "100",
- },
- },
- {
- name: "NPL",
- value: 75941802.93,
- formattedValue: "75,941,803 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "NPL",
- count: 4,
- investment: 75941802.93,
- },
- ],
- totalInvestments: {
- committed: 83964471.63,
- disbursed: 75941802.93,
- signed: 95065266.9,
- },
- percValue: "90.44516264527587",
- },
- },
- {
- name: "UGA",
- value: 74718676.4,
- formattedValue: "74,718,676 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "UGA",
- count: 3,
- investment: 74718676.4,
- },
- ],
- totalInvestments: {
- committed: 89165894.96,
- disbursed: 74718676.4,
- signed: 101759738.71,
- },
- percValue: "83.79737166718168",
- },
- },
- {
- name: "PRK",
- value: 68972576.84,
- formattedValue: "68,972,577 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PRK",
- count: 2,
- investment: 68972576.84,
- },
- ],
- totalInvestments: {
- committed: 68972576.84,
- disbursed: 68972576.84,
- signed: 68972576.84,
- },
- percValue: "100",
- },
- },
- {
- name: "AFG",
- value: 66531536.56,
- formattedValue: "66,531,537 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "AFG",
- count: 6,
- investment: 66531536.56,
- },
- ],
- totalInvestments: {
- committed: 78083194.32,
- disbursed: 66531536.56,
- signed: 90854656.36,
- },
- percValue: "85.20596158930297",
- },
- },
- {
- name: "NER",
- value: 62717307.46,
- formattedValue: "62,717,307 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "NER",
- count: 4,
- investment: 62717307.46,
- },
- ],
- totalInvestments: {
- committed: 64725052.73,
- disbursed: 62717307.46,
- signed: 69410958.61,
- },
- percValue: "96.8980399624002",
- },
- },
- {
- name: "QPA",
- value: 60469222.05,
- formattedValue: "60,469,222 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QPA",
- count: 3,
- investment: 60469222.05,
- },
- ],
- totalInvestments: {
- committed: 63762213.17,
- disbursed: 60469222.05,
- signed: 67816841.63,
- },
- percValue: "94.83551314127008",
- },
- },
- {
- name: "UKR",
- value: 60065489.01,
- formattedValue: "60,065,489 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "UKR",
- count: 2,
- investment: 60065489.01,
- },
- ],
- totalInvestments: {
- committed: 60065489.01,
- disbursed: 60065489.01,
- signed: 60065489.01,
- },
- percValue: "100",
- },
- },
- {
- name: "THA",
- value: 58962474.71,
- formattedValue: "58,962,475 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "THA",
- count: 5,
- investment: 58962474.71,
- },
- ],
- totalInvestments: {
- committed: 58962474.71,
- disbursed: 58962474.71,
- signed: 58962474.71,
- },
- percValue: "100",
- },
- },
- {
- name: "CIV",
- value: 58257272.01,
- formattedValue: "58,257,272 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "CIV",
- count: 5,
- investment: 58257272.01,
- },
- ],
- totalInvestments: {
- committed: 64794299.03,
- disbursed: 58257272.01,
- signed: 74298391.76,
- },
- percValue: "89.91110773962794",
- },
- },
- {
- name: "MDA",
- value: 57708741.85,
- formattedValue: "57,708,742 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MDA",
- count: 6,
- investment: 57708741.85,
- },
- ],
- totalInvestments: {
- committed: 57894500.27,
- disbursed: 57708741.85,
- signed: 57878207.78,
- },
- percValue: "99.67914323617323",
- },
- },
- {
- name: "AZE",
- value: 55443116.07,
- formattedValue: "55,443,116 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "AZE",
- count: 4,
- investment: 55443116.07,
- },
- ],
- totalInvestments: {
- committed: 55445420.51,
- disbursed: 55443116.07,
- signed: 55469323.07,
- },
- percValue: "99.9958437685587",
- },
- },
- {
- name: "GEO",
- value: 52755662.37,
- formattedValue: "52,755,662 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GEO",
- count: 6,
- investment: 52755662.37,
- },
- ],
- totalInvestments: {
- committed: 54254600.6,
- disbursed: 52755662.37,
- signed: 56083092.03,
- },
- percValue: "97.23721451559261",
- },
- },
- {
- name: "KHM",
- value: 49915648.24,
- formattedValue: "49,915,648 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "KHM",
- count: 4,
- investment: 49915648.24,
- },
- ],
- totalInvestments: {
- committed: 49915648.24,
- disbursed: 49915648.24,
- signed: 49915648.24,
- },
- percValue: "100",
- },
- },
- {
- name: "ZMB",
- value: 48422526.21,
- formattedValue: "48,422,526 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ZMB",
- count: 7,
- investment: 48422526.21,
- },
- ],
- totalInvestments: {
- committed: 48422526.21,
- disbursed: 48422526.21,
- signed: 48422526.21,
- },
- percValue: "100",
- },
- },
- {
- name: "BLR",
- value: 47313159.94,
- formattedValue: "47,313,160 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BLR",
- count: 3,
- investment: 47313159.94,
- },
- ],
- totalInvestments: {
- committed: 47313159.94,
- disbursed: 47313159.94,
- signed: 47313159.94,
- },
- percValue: "100",
- },
- },
- {
- name: "BFA",
- value: 46695205.6,
- formattedValue: "46,695,206 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BFA",
- count: 5,
- investment: 46695205.6,
- },
- ],
- totalInvestments: {
- committed: 53290933.16,
- disbursed: 46695205.6,
- signed: 57932088.41,
- },
- percValue: "87.62317120588399",
- },
- },
- {
- name: "IRQ",
- value: 45815374.65,
- formattedValue: "45,815,375 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "IRQ",
- count: 3,
- investment: 45815374.65,
- },
- ],
- totalInvestments: {
- committed: 45815374.65,
- disbursed: 45815374.65,
- signed: 45815374.65,
- },
- percValue: "100",
- },
- },
- {
- name: "ROU",
- value: 44131443.55,
- formattedValue: "44,131,444 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ROU",
- count: 4,
- investment: 44131443.55,
- },
- ],
- totalInvestments: {
- committed: 43914312.03,
- disbursed: 44131443.55,
- signed: 44235735.36,
- },
- percValue: "100.49444363343702",
- },
- },
- {
- name: "PNG",
- value: 43635791.63,
- formattedValue: "43,635,792 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PNG",
- count: 3,
- investment: 43635791.63,
- },
- ],
- totalInvestments: {
- committed: 43635791.63,
- disbursed: 43635791.63,
- signed: 43635791.63,
- },
- percValue: "100",
- },
- },
- {
- name: "NAM",
- value: 39647823.96,
- formattedValue: "39,647,824 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "NAM",
- count: 3,
- investment: 39647823.96,
- },
- ],
- totalInvestments: {
- committed: 39647823.96,
- disbursed: 39647823.96,
- signed: 39647823.96,
- },
- percValue: "100",
- },
- },
- {
- name: "LAO",
- value: 38768543.14,
- formattedValue: "38,768,543 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "LAO",
- count: 4,
- investment: 38768543.14,
- },
- ],
- totalInvestments: {
- committed: 38777415.64,
- disbursed: 38768543.14,
- signed: 38909110.01,
- },
- percValue: "99.97711941383002",
- },
- },
- {
- name: "KGZ",
- value: 38182464.65,
- formattedValue: "38,182,465 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "KGZ",
- count: 4,
- investment: 38182464.65,
- },
- ],
- totalInvestments: {
- committed: 38182464.65,
- disbursed: 38182464.65,
- signed: 38182464.65,
- },
- percValue: "100",
- },
- },
- {
- name: "MDG",
- value: 38167078.21,
- formattedValue: "38,167,078 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MDG",
- count: 5,
- investment: 38167078.21,
- },
- ],
- totalInvestments: {
- committed: 44315598.21,
- disbursed: 38167078.21,
- signed: 50359909.27,
- },
- percValue: "86.12560757757623",
- },
- },
- {
- name: "MNG",
- value: 37340209.83,
- formattedValue: "37,340,210 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MNG",
- count: 3,
- investment: 37340209.83,
- },
- ],
- totalInvestments: {
- committed: 38680333.54,
- disbursed: 37340209.83,
- signed: 39069179.67,
- },
- percValue: "96.53538739883369",
- },
- },
- {
- name: "SWZ",
- value: 35593268.38,
- formattedValue: "35,593,268 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SWZ",
- count: 3,
- investment: 35593268.38,
- },
- ],
- totalInvestments: {
- committed: 35593268.38,
- disbursed: 35593268.38,
- signed: 35593268.38,
- },
- percValue: "100",
- },
- },
- {
- name: "CMR",
- value: 35283438.33,
- formattedValue: "35,283,438 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "CMR",
- count: 3,
- investment: 35283438.33,
- },
- ],
- totalInvestments: {
- committed: 46420839.63,
- disbursed: 35283438.33,
- signed: 55426433.63,
- },
- percValue: "76.0077555925931",
- },
- },
- {
- name: "DOM",
- value: 34569012.11,
- formattedValue: "34,569,012 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "DOM",
- count: 5,
- investment: 34569012.11,
- },
- ],
- totalInvestments: {
- committed: 34695037.06,
- disbursed: 34569012.11,
- signed: 35720447.96,
- },
- percValue: "99.63676375447572",
- },
- },
- {
- name: "HTI",
- value: 34531944.88,
- formattedValue: "34,531,945 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "HTI",
- count: 2,
- investment: 34531944.88,
- },
- ],
- totalInvestments: {
- committed: 34531944.88,
- disbursed: 34531944.88,
- signed: 34531944.88,
- },
- percValue: "100",
- },
- },
- {
- name: "AGO",
- value: 34237455.05,
- formattedValue: "34,237,455 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "AGO",
- count: 3,
- investment: 34237455.05,
- },
- ],
- totalInvestments: {
- committed: 34237455.05,
- disbursed: 34237455.05,
- signed: 39702091.45,
- },
- percValue: "100",
- },
- },
- {
- name: "BEN",
- value: 33314242.24,
- formattedValue: "33,314,242 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BEN",
- count: 3,
- investment: 33314242.24,
- },
- ],
- totalInvestments: {
- committed: 36972198.65,
- disbursed: 33314242.24,
- signed: 40405617.6,
- },
- percValue: "90.10619724126144",
- },
- },
- {
- name: "BGR",
- value: 31094994.46,
- formattedValue: "31,094,994 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BGR",
- count: 3,
- investment: 31094994.46,
- },
- ],
- totalInvestments: {
- committed: 31257688.74,
- disbursed: 31094994.46,
- signed: 31257688.77,
- },
- percValue: "99.47950636608714",
- },
- },
- {
- name: "TKM",
- value: 27991552.41,
- formattedValue: "27,991,552 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "TKM",
- count: 2,
- investment: 27991552.41,
- },
- ],
- totalInvestments: {
- committed: 31739514.96,
- disbursed: 27991552.41,
- signed: 33114956.19,
- },
- percValue: "88.19149393201691",
- },
- },
- {
- name: "ERI",
- value: 27173020.61,
- formattedValue: "27,173,021 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ERI",
- count: 2,
- investment: 27173020.61,
- },
- ],
- totalInvestments: {
- committed: 29077386.64,
- disbursed: 27173020.61,
- signed: 31348719.94,
- },
- percValue: "93.45069743172765",
- },
- },
- {
- name: "ARM",
- value: 26674232.76,
- formattedValue: "26,674,233 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ARM",
- count: 3,
- investment: 26674232.76,
- },
- ],
- totalInvestments: {
- committed: 26794665.81,
- disbursed: 26674232.76,
- signed: 26794665.82,
- },
- percValue: "99.55053348732174",
- },
- },
- {
- name: "SEN",
- value: 26396004.47,
- formattedValue: "26,396,004 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SEN",
- count: 3,
- investment: 26396004.47,
- },
- ],
- totalInvestments: {
- committed: 26905415.08,
- disbursed: 26396004.47,
- signed: 26905415.07,
- },
- percValue: "98.10666139702612",
- },
- },
- {
- name: "BOL",
- value: 25510427.25,
- formattedValue: "25,510,427 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BOL",
- count: 5,
- investment: 25510427.25,
- },
- ],
- totalInvestments: {
- committed: 26969718.81,
- disbursed: 25510427.25,
- signed: 28152738.03,
- },
- percValue: "94.58914803568915",
- },
- },
- {
- name: "SLV",
- value: 23986808.27,
- formattedValue: "23,986,808 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SLV",
- count: 5,
- investment: 23986808.27,
- },
- ],
- totalInvestments: {
- committed: 23986808.27,
- disbursed: 23986808.27,
- signed: 24103473.78,
- },
- percValue: "100",
- },
- },
- {
- name: "MLI",
- value: 23397377.48,
- formattedValue: "23,397,377 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MLI",
- count: 4,
- investment: 23397377.48,
- },
- ],
- totalInvestments: {
- committed: 24420298.57,
- disbursed: 23397377.48,
- signed: 24598132.61,
- },
- percValue: "95.81118516193473",
- },
- },
- {
- name: "LKA",
- value: 23268064.9,
- formattedValue: "23,268,065 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "LKA",
- count: 5,
- investment: 23268064.9,
- },
- ],
- totalInvestments: {
- committed: 23588863.59,
- disbursed: 23268064.9,
- signed: 23899563.8,
- },
- percValue: "98.64004177744283",
- },
- },
- {
- name: "LBR",
- value: 22463624.2,
- formattedValue: "22,463,624 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "LBR",
- count: 3,
- investment: 22463624.2,
- },
- ],
- totalInvestments: {
- committed: 22463624.2,
- disbursed: 22463624.2,
- signed: 22463624.2,
- },
- percValue: "100",
- },
- },
- {
- name: "ECU",
- value: 22254783.17,
- formattedValue: "22,254,783 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ECU",
- count: 3,
- investment: 22254783.17,
- },
- ],
- totalInvestments: {
- committed: 22254783.17,
- disbursed: 22254783.17,
- signed: 22254783.17,
- },
- percValue: "99.99999999999999",
- },
- },
- {
- name: "NIC",
- value: 21704916.31,
- formattedValue: "21,704,916 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "NIC",
- count: 4,
- investment: 21704916.31,
- },
- ],
- totalInvestments: {
- committed: 22500849.02,
- disbursed: 21704916.31,
- signed: 23611805.59,
- },
- percValue: "96.46265476785996",
- },
- },
- {
- name: "BRA",
- value: 21348358.64,
- formattedValue: "21,348,359 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BRA",
- count: 2,
- investment: 21348358.64,
- },
- ],
- totalInvestments: {
- committed: 21348358.64,
- disbursed: 21348358.64,
- signed: 21348358.64,
- },
- percValue: "100",
- },
- },
- {
- name: "PRY",
- value: 21219481.38,
- formattedValue: "21,219,481 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PRY",
- count: 3,
- investment: 21219481.38,
- },
- ],
- totalInvestments: {
- committed: 21682246.57,
- disbursed: 21219481.38,
- signed: 22435195.01,
- },
- percValue: "97.86569538121437",
- },
- },
- {
- name: "GMB",
- value: 21094780.47,
- formattedValue: "21,094,780 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GMB",
- count: 3,
- investment: 21094780.47,
- },
- ],
- totalInvestments: {
- committed: 21094780.47,
- disbursed: 21094780.47,
- signed: 21094780.47,
- },
- percValue: "100",
- },
- },
- {
- name: "BIH",
- value: 20131147.53,
- formattedValue: "20,131,148 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BIH",
- count: 2,
- investment: 20131147.53,
- },
- ],
- totalInvestments: {
- committed: 20131147.53,
- disbursed: 20131147.53,
- signed: 20131147.53,
- },
- percValue: "100",
- },
- },
- {
- name: "BDI",
- value: 19677168.04,
- formattedValue: "19,677,168 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BDI",
- count: 3,
- investment: 19677168.04,
- },
- ],
- totalInvestments: {
- committed: 19677168.04,
- disbursed: 19677168.04,
- signed: 19677168.04,
- },
- percValue: "100",
- },
- },
- {
- name: "IRN",
- value: 18585342.94,
- formattedValue: "18,585,343 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "IRN",
- count: 1,
- investment: 18585342.94,
- },
- ],
- totalInvestments: {
- committed: 18585342.94,
- disbursed: 18585342.94,
- signed: 18585342.94,
- },
- percValue: "100",
- },
- },
- {
- name: "TLS",
- value: 17886969.41,
- formattedValue: "17,886,969 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "TLS",
- count: 2,
- investment: 17886969.41,
- },
- ],
- totalInvestments: {
- committed: 21383180.5,
- disbursed: 17886969.41,
- signed: 24923840.65,
- },
- percValue: "83.64971436311825",
- },
- },
- {
- name: "LSO",
- value: 16592135.27,
- formattedValue: "16,592,135 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "LSO",
- count: 3,
- investment: 16592135.27,
- },
- ],
- totalInvestments: {
- committed: 16592135.27,
- disbursed: 16592135.27,
- signed: 16592135.27,
- },
- percValue: "100",
- },
- },
- {
- name: "YEM",
- value: 16390144.03,
- formattedValue: "16,390,144 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "YEM",
- count: 2,
- investment: 16390144.03,
- },
- ],
- totalInvestments: {
- committed: 16390144.03,
- disbursed: 16390144.03,
- signed: 16390144.03,
- },
- percValue: "100",
- },
- },
- {
- name: "GIN",
- value: 16135780.61,
- formattedValue: "16,135,781 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GIN",
- count: 4,
- investment: 16135780.61,
- },
- ],
- totalInvestments: {
- committed: 16135780.62,
- disbursed: 16135780.61,
- signed: 16135780.61,
- },
- percValue: "99.99999993802594",
- },
- },
- {
- name: "TCD",
- value: 16115138.23,
- formattedValue: "16,115,138 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "TCD",
- count: 4,
- investment: 16115138.23,
- },
- ],
- totalInvestments: {
- committed: 16615747.86,
- disbursed: 16115138.23,
- signed: 17050927.1,
- },
- percValue: "96.98713753832806",
- },
- },
- {
- name: "HND",
- value: 15830986.31,
- formattedValue: "15,830,986 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "HND",
- count: 2,
- investment: 15830986.31,
- },
- ],
- totalInvestments: {
- committed: 15830986.31,
- disbursed: 15830986.31,
- signed: 15830986.31,
- },
- percValue: "100",
- },
- },
- {
- name: "SLE",
- value: 15214215.44,
- formattedValue: "15,214,215 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SLE",
- count: 2,
- investment: 15214215.44,
- },
- ],
- totalInvestments: {
- committed: 15214215.44,
- disbursed: 15214215.44,
- signed: 15214215.44,
- },
- percValue: "100",
- },
- },
- {
- name: "QUA",
- value: 14887840.47,
- formattedValue: "14,887,840 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QUA",
- count: 2,
- investment: 14887840.47,
- },
- ],
- totalInvestments: {
- committed: 14887840.47,
- disbursed: 14887840.47,
- signed: 14887840.47,
- },
- percValue: "100",
- },
- },
- {
- name: "GNB",
- value: 14833137.31,
- formattedValue: "14,833,137 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GNB",
- count: 5,
- investment: 14833137.31,
- },
- ],
- totalInvestments: {
- committed: 15400527.18,
- disbursed: 14833137.31,
- signed: 15400527.18,
- },
- percValue: "96.31577631487288",
- },
- },
- {
- name: "TGO",
- value: 13826707.28,
- formattedValue: "13,826,707 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "TGO",
- count: 4,
- investment: 13826707.28,
- },
- ],
- totalInvestments: {
- committed: 14151798.54,
- disbursed: 13826707.28,
- signed: 17267123.17,
- },
- percValue: "97.7028272478503",
- },
- },
- {
- name: "GTM",
- value: 13816584.95,
- formattedValue: "13,816,585 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GTM",
- count: 3,
- investment: 13816584.95,
- },
- ],
- totalInvestments: {
- committed: 15453752.6,
- disbursed: 13816584.95,
- signed: 17059247.32,
- },
- percValue: "89.4060187685417",
- },
- },
- {
- name: "EGY",
- value: 13667350.7,
- formattedValue: "13,667,351 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "EGY",
- count: 2,
- investment: 13667350.7,
- },
- ],
- totalInvestments: {
- committed: 13667350.7,
- disbursed: 13667350.7,
- signed: 13667350.7,
- },
- percValue: "100",
- },
- },
- {
- name: "MAR",
- value: 12604444.38,
- formattedValue: "12,604,444 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MAR",
- count: 3,
- investment: 12604444.38,
- },
- ],
- totalInvestments: {
- committed: 12758600.97,
- disbursed: 12604444.38,
- signed: 12869944.42,
- },
- percValue: "98.79174377847166",
- },
- },
- {
- name: "FJI",
- value: 11573365.31,
- formattedValue: "11,573,365 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "FJI",
- count: 1,
- investment: 11573365.31,
- },
- ],
- totalInvestments: {
- committed: 11573365.31,
- disbursed: 11573365.31,
- signed: 11573365.31,
- },
- percValue: "100",
- },
- },
- {
- name: "QNA",
- value: 11525073.95,
- formattedValue: "11,525,074 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QNA",
- count: 3,
- investment: 11525073.95,
- },
- ],
- totalInvestments: {
- committed: 11525321.39,
- disbursed: 11525073.95,
- signed: 11696456.7,
- },
- percValue: "99.99785307505424",
- },
- },
- {
- name: "QRA",
- value: 10403854.36,
- formattedValue: "10,403,854 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QRA",
- count: 2,
- investment: 10403854.36,
- },
- ],
- totalInvestments: {
- committed: 11505147.85,
- disbursed: 10403854.36,
- signed: 14610000,
- },
- percValue: "90.42781975200779",
- },
- },
- {
- name: "QMZ",
- value: 10212769.64,
- formattedValue: "10,212,770 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QMZ",
- count: 1,
- investment: 10212769.64,
- },
- ],
- totalInvestments: {
- committed: 10212769.64,
- disbursed: 10212769.64,
- signed: 10822808.89,
- },
- percValue: "100",
- },
- },
- {
- name: "SRB",
- value: 9972809.94,
- formattedValue: "9,972,810 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SRB",
- count: 3,
- investment: 9972809.94,
- },
- ],
- totalInvestments: {
- committed: 9972809.94,
- disbursed: 9972809.94,
- signed: 9972809.94,
- },
- percValue: "100",
- },
- },
- {
- name: "MWI",
- value: 8521555.34,
- formattedValue: "8,521,555 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MWI",
- count: 1,
- investment: 8521555.34,
- },
- ],
- totalInvestments: {
- committed: 8521555.34,
- disbursed: 8521555.34,
- signed: 8521555.34,
- },
- percValue: "100",
- },
- },
- {
- name: "MKD",
- value: 8303013.22,
- formattedValue: "8,303,013 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MKD",
- count: 2,
- investment: 8303013.22,
- },
- ],
- totalInvestments: {
- committed: 8431950.86,
- disbursed: 8303013.22,
- signed: 8431950.85,
- },
- percValue: "98.47084450394912",
- },
- },
- {
- name: "SYR",
- value: 8283978.61,
- formattedValue: "8,283,979 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SYR",
- count: 1,
- investment: 8283978.61,
- },
- ],
- totalInvestments: {
- committed: 8283978.61,
- disbursed: 8283978.61,
- signed: 8283978.61,
- },
- percValue: "100",
- },
- },
- {
- name: "BWA",
- value: 8200122.69,
- formattedValue: "8,200,123 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BWA",
- count: 1,
- investment: 8200122.69,
- },
- ],
- totalInvestments: {
- committed: 8200122.69,
- disbursed: 8200122.69,
- signed: 8200122.69,
- },
- percValue: "100",
- },
- },
- {
- name: "COL",
- value: 8151941.36,
- formattedValue: "8,151,941 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "COL",
- count: 2,
- investment: 8151941.36,
- },
- ],
- totalInvestments: {
- committed: 8151941.36,
- disbursed: 8151941.36,
- signed: 8151941.36,
- },
- percValue: "100",
- },
- },
- {
- name: "SLB",
- value: 7566594.19,
- formattedValue: "7,566,594 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SLB",
- count: 3,
- investment: 7566594.19,
- },
- ],
- totalInvestments: {
- committed: 7960079.42,
- disbursed: 7566594.19,
- signed: 8604255.19,
- },
- percValue: "95.0567675366234",
- },
- },
- {
- name: "CUB",
- value: 7426441.59,
- formattedValue: "7,426,442 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "CUB",
- count: 1,
- investment: 7426441.59,
- },
- ],
- totalInvestments: {
- committed: 7426441.59,
- disbursed: 7426441.59,
- signed: 7426441.59,
- },
- percValue: "100",
- },
- },
- {
- name: "QSE",
- value: 7337855.58,
- formattedValue: "7,337,856 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QSE",
- count: 1,
- investment: 7337855.58,
- },
- ],
- totalInvestments: {
- committed: 7337855.58,
- disbursed: 7337855.58,
- signed: 9999999,
- },
- percValue: "100",
- },
- },
- {
- name: "CAF",
- value: 7165364.28,
- formattedValue: "7,165,364 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "CAF",
- count: 3,
- investment: 7165364.28,
- },
- ],
- totalInvestments: {
- committed: 7179084.3,
- disbursed: 7165364.28,
- signed: 7179084.3,
- },
- percValue: "99.80888899716639",
- },
- },
- {
- name: "MRT",
- value: 7019197.46,
- formattedValue: "7,019,197 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MRT",
- count: 3,
- investment: 7019197.46,
- },
- ],
- totalInvestments: {
- committed: 7019197.46,
- disbursed: 7019197.46,
- signed: 7019197.46,
- },
- percValue: "100",
- },
- },
- {
- name: "BTN",
- value: 5977562.05,
- formattedValue: "5,977,562 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "BTN",
- count: 3,
- investment: 5977562.05,
- },
- ],
- totalInvestments: {
- committed: 5977648.33,
- disbursed: 5977562.05,
- signed: 5977648.33,
- },
- percValue: "99.998556623019",
- },
- },
- {
- name: "QSF",
- value: 5956465.39,
- formattedValue: "5,956,465 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QSF",
- count: 1,
- investment: 5956465.39,
- },
- ],
- totalInvestments: {
- committed: 5956465.39,
- disbursed: 5956465.39,
- signed: 5956465.39,
- },
- percValue: "100",
- },
- },
- {
- name: "COG",
- value: 5485676.99,
- formattedValue: "5,485,677 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "COG",
- count: 2,
- investment: 5485676.99,
- },
- ],
- totalInvestments: {
- committed: 5467550.11,
- disbursed: 5485676.99,
- signed: 5467550.11,
- },
- percValue: "100.33153569030571",
- },
- },
- {
- name: "QPB",
- value: 5013229.82,
- formattedValue: "5,013,230 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QPB",
- count: 1,
- investment: 5013229.82,
- },
- ],
- totalInvestments: {
- committed: 5779761.14,
- disbursed: 5013229.82,
- signed: 7262746,
- },
- percValue: "86.73766438728643",
- },
- },
- {
- name: "TUN",
- value: 4803936.07,
- formattedValue: "4,803,936 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "TUN",
- count: 2,
- investment: 4803936.07,
- },
- ],
- totalInvestments: {
- committed: 4803936.07,
- disbursed: 4803936.07,
- signed: 4803936.07,
- },
- percValue: "100",
- },
- },
- {
- name: "DJI",
- value: 4548534.55,
- formattedValue: "4,548,535 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "DJI",
- count: 2,
- investment: 4548534.55,
- },
- ],
- totalInvestments: {
- committed: 4578868.44,
- disbursed: 4548534.55,
- signed: 4578868.44,
- },
- percValue: "99.3375243163789",
- },
- },
- {
- name: "GUY",
- value: 4214536.55,
- formattedValue: "4,214,537 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GUY",
- count: 3,
- investment: 4214536.55,
- },
- ],
- totalInvestments: {
- committed: 4265808.78,
- disbursed: 4214536.55,
- signed: 4416456.98,
- },
- percValue: "98.79806543977341",
- },
- },
- {
- name: "GAB",
- value: 4187294.02,
- formattedValue: "4,187,294 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "GAB",
- count: 2,
- investment: 4187294.02,
- },
- ],
- totalInvestments: {
- committed: 4173456.84,
- disbursed: 4187294.02,
- signed: 4263812.18,
- },
- percValue: "100.33155200905348",
- },
- },
- {
- name: "JOR",
- value: 3696794.84,
- formattedValue: "3,696,795 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "JOR",
- count: 2,
- investment: 3696794.84,
- },
- ],
- totalInvestments: {
- committed: 3696794.84,
- disbursed: 3696794.84,
- signed: 3696794.84,
- },
- percValue: "100",
- },
- },
- {
- name: "QSD",
- value: 3337164.79,
- formattedValue: "3,337,165 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QSD",
- count: 1,
- investment: 3337164.79,
- },
- ],
- totalInvestments: {
- committed: 4016601.89,
- disbursed: 3337164.79,
- signed: 5000000,
- },
- percValue: "83.08428072765757",
- },
- },
- {
- name: "SUR",
- value: 3260336,
- formattedValue: "3,260,336 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "SUR",
- count: 1,
- investment: 3260336,
- },
- ],
- totalInvestments: {
- committed: 3260336,
- disbursed: 3260336,
- signed: 3260336,
- },
- percValue: "100",
- },
- },
- {
- name: "STP",
- value: 2843418.22,
- formattedValue: "2,843,418 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "STP",
- count: 2,
- investment: 2843418.22,
- },
- ],
- totalInvestments: {
- committed: 2843418.22,
- disbursed: 2843418.22,
- signed: 2843418.22,
- },
- percValue: "99.99999999999999",
- },
- },
- {
- name: "COM",
- value: 2621231.57,
- formattedValue: "2,621,232 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "COM",
- count: 2,
- investment: 2621231.57,
- },
- ],
- totalInvestments: {
- committed: 2613416.66,
- disbursed: 2621231.57,
- signed: 2758508.38,
- },
- percValue: "100.29903038882439",
- },
- },
- {
- name: "QNB",
- value: 2276773.81,
- formattedValue: "2,276,774 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "QNB",
- count: 2,
- investment: 2276773.81,
- },
- ],
- totalInvestments: {
- committed: 2276773.81,
- disbursed: 2276773.81,
- signed: 2276773.81,
- },
- percValue: "100",
- },
- },
- {
- name: "PSE",
- value: 2079054.23,
- formattedValue: "2,079,054 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PSE",
- count: 1,
- investment: 2079054.23,
- },
- ],
- totalInvestments: {
- committed: 2079054.23,
- disbursed: 2079054.23,
- signed: 2079054.23,
- },
- percValue: "100",
- },
- },
- {
- name: "MNE",
- value: 1742806.56,
- formattedValue: "1,742,807 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "MNE",
- count: 1,
- investment: 1742806.56,
- },
- ],
- totalInvestments: {
- committed: 1742806.56,
- disbursed: 1742806.56,
- signed: 1742806.56,
- },
- percValue: "100",
- },
- },
- {
- name: "ALB",
- value: 1263059.64,
- formattedValue: "1,263,060 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "ALB",
- count: 1,
- investment: 1263059.64,
- },
- ],
- totalInvestments: {
- committed: 1263059.64,
- disbursed: 1263059.64,
- signed: 1263059.64,
- },
- percValue: "100",
- },
- },
- {
- name: "PAN",
- value: 553816.54,
- formattedValue: "553,817 USD",
- color: "#70777E",
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "PAN",
- count: 1,
- investment: 553816.54,
- },
- ],
- totalInvestments: {
- committed: 553816.54,
- disbursed: 553816.54,
- signed: 553816.54,
- },
- percValue: "100",
- },
- },
- ],
- tooltip: {
- header: "Tuberculosis",
- componentsStats: [
- {
- name: "Tuberculosis",
- count: 394,
- investment: 7685843178.23,
- },
- ],
- totalInvestments: {
- committed: 8290878015.610002,
- disbursed: 7685843178.23,
- signed: 9174309106.33,
- },
- percValue: "92.70240333724792",
- },
- },
- {
- name: "TB/HIV",
- color: "#DFE3E5",
- value: 3625684503.7600007,
- formattedValue: "3,625,684,504 USD",
- _children: [
- {
- name: "MWI",
- value: 663882911.42,
- formattedValue: "663,882,911 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "MWI",
- count: 3,
- investment: 663882911.42,
- },
- ],
- totalInvestments: {
- committed: 751986967.92,
- disbursed: 663882911.42,
- signed: 1075233545.8,
- },
- percValue: "88.28383199994857",
- },
- },
- {
- name: "ZAF",
- value: 623765995.33,
- formattedValue: "623,765,995 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "ZAF",
- count: 13,
- investment: 623765995.33,
- },
- ],
- totalInvestments: {
- committed: 658788926.96,
- disbursed: 623765995.33,
- signed: 781827233.03,
- },
- percValue: "94.68374008779803",
- },
- },
- {
- name: "ZMB",
- value: 408006565.98,
- formattedValue: "408,006,566 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "ZMB",
- count: 2,
- investment: 408006565.98,
- },
- ],
- totalInvestments: {
- committed: 528824945.02,
- disbursed: 408006565.98,
- signed: 632681233.92,
- },
- percValue: "77.15342663432213",
- },
- },
- {
- name: "UKR",
- value: 295584362.8,
- formattedValue: "295,584,363 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "UKR",
- count: 3,
- investment: 295584362.8,
- },
- ],
- totalInvestments: {
- committed: 345645959.88,
- disbursed: 295584362.8,
- signed: 402872211.17,
- },
- percValue: "85.51651027618544",
- },
- },
- {
- name: "COD",
- value: 193451141.66,
- formattedValue: "193,451,142 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "COD",
- count: 1,
- investment: 193451141.66,
- },
- ],
- totalInvestments: {
- committed: 252650282.06,
- disbursed: 193451141.66,
- signed: 362554563.9,
- },
- percValue: "76.56874161496434",
- },
- },
- {
- name: "HTI",
- value: 140020714.03,
- formattedValue: "140,020,714 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "HTI",
- count: 2,
- investment: 140020714.03,
- },
- ],
- totalInvestments: {
- committed: 166465963.76,
- disbursed: 140020714.03,
- signed: 223772255.02,
- },
- percValue: "84.11371962611705",
- },
- },
- {
- name: "TZA",
- value: 110855766.36,
- formattedValue: "110,855,766 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "TZA",
- count: 3,
- investment: 110855766.36,
- },
- ],
- totalInvestments: {
- committed: 123935795.16,
- disbursed: 110855766.36,
- signed: 137883142.85,
- },
- percValue: "89.44612508185081",
- },
- },
- {
- name: "LSO",
- value: 107908082.61,
- formattedValue: "107,908,083 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "LSO",
- count: 2,
- investment: 107908082.61,
- },
- ],
- totalInvestments: {
- committed: 115141442.53,
- disbursed: 107908082.61,
- signed: 124379868.86,
- },
- percValue: "93.71784844703907",
- },
- },
- {
- name: "THA",
- value: 90745735.63,
- formattedValue: "90,745,736 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "THA",
- count: 2,
- investment: 90745735.63,
- },
- ],
- totalInvestments: {
- committed: 103993967.42,
- disbursed: 90745735.63,
- signed: 147293115.88,
- },
- percValue: "87.26057662893615",
- },
- },
- {
- name: "CAF",
- value: 89017533.03,
- formattedValue: "89,017,533 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "CAF",
- count: 2,
- investment: 89017533.03,
- },
- ],
- totalInvestments: {
- committed: 114115469.38,
- disbursed: 89017533.03,
- signed: 169076244.31,
- },
- percValue: "78.00654329657546",
- },
- },
- {
- name: "GHA",
- value: 85559584.44,
- formattedValue: "85,559,584 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "GHA",
- count: 2,
- investment: 85559584.44,
- },
- ],
- totalInvestments: {
- committed: 118029507.64,
- disbursed: 85559584.44,
- signed: 167237155,
- },
- percValue: "72.48999521455599",
- },
- },
- {
- name: "KHM",
- value: 63107469.77,
- formattedValue: "63,107,470 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "KHM",
- count: 1,
- investment: 63107469.77,
- },
- ],
- totalInvestments: {
- committed: 95232170.31,
- disbursed: 63107469.77,
- signed: 121330754,
- },
- percValue: "66.2669658420809",
- },
- },
- {
- name: "KGZ",
- value: 60513985.61,
- formattedValue: "60,513,986 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "KGZ",
- count: 1,
- investment: 60513985.61,
- },
- ],
- totalInvestments: {
- committed: 60513985.61,
- disbursed: 60513985.61,
- signed: 72921225.48,
- },
- percValue: "100",
- },
- },
- {
- name: "BDI",
- value: 50297527.04,
- formattedValue: "50,297,527 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "BDI",
- count: 2,
- investment: 50297527.04,
- },
- ],
- totalInvestments: {
- committed: 68823207.66,
- disbursed: 50297527.04,
- signed: 87653636.85,
- },
- percValue: "73.08221855697215",
- },
- },
- {
- name: "LBR",
- value: 47120231.79,
- formattedValue: "47,120,232 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "LBR",
- count: 2,
- investment: 47120231.79,
- },
- ],
- totalInvestments: {
- committed: 54624488.66,
- disbursed: 47120231.79,
- signed: 84049167.14,
- },
- percValue: "86.26210138696428",
- },
- },
- {
- name: "BWA",
- value: 42208461.11,
- formattedValue: "42,208,461 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "BWA",
- count: 2,
- investment: 42208461.11,
- },
- ],
- totalInvestments: {
- committed: 42459400.52,
- disbursed: 42208461.11,
- signed: 45566432.96,
- },
- percValue: "99.40898974802576",
- },
- },
- {
- name: "MOZ",
- value: 36322672.61,
- formattedValue: "36,322,673 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "MOZ",
- count: 1,
- investment: 36322672.61,
- },
- ],
- totalInvestments: {
- committed: 62361869.61,
- disbursed: 36322672.61,
- signed: 89542946.73,
- },
- percValue: "58.2450026549164",
- },
- },
- {
- name: "NAM",
- value: 35087490.92,
- formattedValue: "35,087,491 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "NAM",
- count: 2,
- investment: 35087490.92,
- },
- ],
- totalInvestments: {
- committed: 35094714.95,
- disbursed: 35087490.92,
- signed: 38290641.36,
- },
- percValue: "99.97941561853318",
- },
- },
- {
- name: "SWZ",
- value: 34488208.21,
- formattedValue: "34,488,208 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "SWZ",
- count: 2,
- investment: 34488208.21,
- },
- ],
- totalInvestments: {
- committed: 42359105.4,
- disbursed: 34488208.21,
- signed: 52797895,
- },
- percValue: "81.41864159860185",
- },
- },
- {
- name: "UGA",
- value: 33376403.51,
- formattedValue: "33,376,404 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "UGA",
- count: 1,
- investment: 33376403.51,
- },
- ],
- totalInvestments: {
- committed: 50313302.85,
- disbursed: 33376403.51,
- signed: 59870588.77,
- },
- percValue: "66.33713475242462",
- },
- },
- {
- name: "PNG",
- value: 31833292.34,
- formattedValue: "31,833,292 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "PNG",
- count: 1,
- investment: 31833292.34,
- },
- ],
- totalInvestments: {
- committed: 48434092.85,
- disbursed: 31833292.34,
- signed: 72258949.91,
- },
- percValue: "65.72496864674942",
- },
- },
- {
- name: "MDA",
- value: 31798555.25,
- formattedValue: "31,798,555 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "MDA",
- count: 2,
- investment: 31798555.25,
- },
- ],
- totalInvestments: {
- committed: 37103916.82,
- disbursed: 31798555.25,
- signed: 47504862.08,
- },
- percValue: "85.7013436189565",
- },
- },
- {
- name: "IND",
- value: 30141405.47,
- formattedValue: "30,141,405 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "IND",
- count: 3,
- investment: 30141405.47,
- },
- ],
- totalInvestments: {
- committed: 39119413.32,
- disbursed: 30141405.47,
- signed: 51763569,
- },
- percValue: "77.04973799949616",
- },
- },
- {
- name: "COG",
- value: 26842031.72,
- formattedValue: "26,842,032 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "COG",
- count: 2,
- investment: 26842031.72,
- },
- ],
- totalInvestments: {
- committed: 39155360.32,
- disbursed: 26842031.72,
- signed: 53092487.81,
- },
- percValue: "68.5526362179573",
- },
- },
- {
- name: "QUA",
- value: 24868392.65,
- formattedValue: "24,868,393 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "QUA",
- count: 1,
- investment: 24868392.65,
- },
- ],
- totalInvestments: {
- committed: 28470558.98,
- disbursed: 24868392.65,
- signed: 33271080.54,
- },
- percValue: "87.34774988952465",
- },
- },
- {
- name: "GNB",
- value: 21603889.73,
- formattedValue: "21,603,890 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "GNB",
- count: 1,
- investment: 21603889.73,
- },
- ],
- totalInvestments: {
- committed: 32392584.86,
- disbursed: 21603889.73,
- signed: 48446527.83,
- },
- percValue: "66.69393573674812",
- },
- },
- {
- name: "BLR",
- value: 19240340.96,
- formattedValue: "19,240,341 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "BLR",
- count: 1,
- investment: 19240340.96,
- },
- ],
- totalInvestments: {
- committed: 23209428.87,
- disbursed: 19240340.96,
- signed: 23501804.53,
- },
- percValue: "82.89881266690557",
- },
- },
- {
- name: "BFA",
- value: 17931629.57,
- formattedValue: "17,931,630 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "BFA",
- count: 1,
- investment: 17931629.57,
- },
- ],
- totalInvestments: {
- committed: 21326031.54,
- disbursed: 17931629.57,
- signed: 26216910.35,
- },
- percValue: "84.08329292942611",
- },
- },
- {
- name: "GIN",
- value: 17909279.44,
- formattedValue: "17,909,279 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "GIN",
- count: 1,
- investment: 17909279.44,
- },
- ],
- totalInvestments: {
- committed: 26795694.86,
- disbursed: 17909279.44,
- signed: 37388442.32,
- },
- percValue: "66.8364061225916",
- },
- },
- {
- name: "GMB",
- value: 15164731.09,
- formattedValue: "15,164,731 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "GMB",
- count: 2,
- investment: 15164731.09,
- },
- ],
- totalInvestments: {
- committed: 16528722.19,
- disbursed: 15164731.09,
- signed: 18961972,
- },
- percValue: "91.74775228041993",
- },
- },
- {
- name: "RWA",
- value: 14641046,
- formattedValue: "14,641,046 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "RWA",
- count: 1,
- investment: 14641046,
- },
- ],
- totalInvestments: {
- committed: 14641046,
- disbursed: 14641046,
- signed: 14641046,
- },
- percValue: "100",
- },
- },
- {
- name: "NGA",
- value: 14317170.7,
- formattedValue: "14,317,171 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "NGA",
- count: 1,
- investment: 14317170.7,
- },
- ],
- totalInvestments: {
- committed: 15269275.38,
- disbursed: 14317170.7,
- signed: 20207233,
- },
- percValue: "93.76457195049946",
- },
- },
- {
- name: "QNB",
- value: 14117785.14,
- formattedValue: "14,117,785 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "QNB",
- count: 1,
- investment: 14117785.14,
- },
- ],
- totalInvestments: {
- committed: 15400663.05,
- disbursed: 14117785.14,
- signed: 19500119.96,
- },
- percValue: "91.66998261156034",
- },
- },
- {
- name: "DJI",
- value: 12037369.61,
- formattedValue: "12,037,370 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "DJI",
- count: 1,
- investment: 12037369.61,
- },
- ],
- totalInvestments: {
- committed: 12037369.61,
- disbursed: 12037369.61,
- signed: 12037369.61,
- },
- percValue: "100",
- },
- },
- {
- name: "SSD",
- value: 11602354,
- formattedValue: "11,602,354 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "SSD",
- count: 1,
- investment: 11602354,
- },
- ],
- totalInvestments: {
- committed: 30627161,
- disbursed: 11602354,
- signed: 71526259,
- },
- percValue: "37.88256443357581",
- },
- },
- {
- name: "QPA",
- value: 9736721,
- formattedValue: "9,736,721 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "QPA",
- count: 1,
- investment: 9736721,
- },
- ],
- totalInvestments: {
- committed: 9736721,
- disbursed: 9736721,
- signed: 9736721,
- },
- percValue: "100",
- },
- },
- {
- name: "PAN",
- value: 9658700.15,
- formattedValue: "9,658,700 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "PAN",
- count: 1,
- investment: 9658700.15,
- },
- ],
- totalInvestments: {
- committed: 9798189.27,
- disbursed: 9658700.15,
- signed: 9865413.05,
- },
- percValue: "98.57637859244987",
- },
- },
- {
- name: "TJK",
- value: 8745562.81,
- formattedValue: "8,745,563 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "TJK",
- count: 1,
- investment: 8745562.81,
- },
- ],
- totalInvestments: {
- committed: 16843513.01,
- disbursed: 8745562.81,
- signed: 25044957,
- },
- percValue: "51.92243924891295",
- },
- },
- {
- name: "ARM",
- value: 8050039.1,
- formattedValue: "8,050,039 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "ARM",
- count: 1,
- investment: 8050039.1,
- },
- ],
- totalInvestments: {
- committed: 8484180.98,
- disbursed: 8050039.1,
- signed: 8830686.76,
- },
- percValue: "94.88292528149252",
- },
- },
- {
- name: "HND",
- value: 8005479.06,
- formattedValue: "8,005,479 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "HND",
- count: 1,
- investment: 8005479.06,
- },
- ],
- totalInvestments: {
- committed: 8581719.31,
- disbursed: 8005479.06,
- signed: 15280464.53,
- },
- percValue: "93.28525870884025",
- },
- },
- {
- name: "MLI",
- value: 7976996.34,
- formattedValue: "7,976,996 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "MLI",
- count: 2,
- investment: 7976996.34,
- },
- ],
- totalInvestments: {
- committed: 39093574.78,
- disbursed: 7976996.34,
- signed: 84559209.11,
- },
- percValue: "20.404878256569607",
- },
- },
- {
- name: "QRB",
- value: 7457197.32,
- formattedValue: "7,457,197 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "QRB",
- count: 1,
- investment: 7457197.32,
- },
- ],
- totalInvestments: {
- committed: 7699007.92,
- disbursed: 7457197.32,
- signed: 8679353.82,
- },
- percValue: "96.85919793156934",
- },
- },
- {
- name: "QPF",
- value: 6149710.04,
- formattedValue: "6,149,710 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "QPF",
- count: 1,
- investment: 6149710.04,
- },
- ],
- totalInvestments: {
- committed: 5850044.17,
- disbursed: 6149710.04,
- signed: 5850044.17,
- },
- percValue: "105.12245482755047",
- },
- },
- {
- name: "ALB",
- value: 6026976.4,
- formattedValue: "6,026,976 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "ALB",
- count: 1,
- investment: 6026976.4,
- },
- ],
- totalInvestments: {
- committed: 6237836.02,
- disbursed: 6026976.4,
- signed: 6617936.53,
- },
- percValue: "96.61966715181462",
- },
- },
- {
- name: "BLZ",
- value: 5118146.73,
- formattedValue: "5,118,147 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "BLZ",
- count: 1,
- investment: 5118146.73,
- },
- ],
- totalInvestments: {
- committed: 5118146.73,
- disbursed: 5118146.73,
- signed: 5144837.46,
- },
- percValue: "100",
- },
- },
- {
- name: "SUR",
- value: 5072634.69,
- formattedValue: "5,072,635 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "SUR",
- count: 1,
- investment: 5072634.69,
- },
- ],
- totalInvestments: {
- committed: 5072634.69,
- disbursed: 5072634.69,
- signed: 5475649,
- },
- percValue: "100",
- },
- },
- {
- name: "MNG",
- value: 3897073.34,
- formattedValue: "3,897,073 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "MNG",
- count: 1,
- investment: 3897073.34,
- },
- ],
- totalInvestments: {
- committed: 7053340.34,
- disbursed: 3897073.34,
- signed: 13344330,
- },
- percValue: "55.251457495952906",
- },
- },
- {
- name: "QMZ",
- value: 3863334,
- formattedValue: "3,863,334 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "QMZ",
- count: 1,
- investment: 3863334,
- },
- ],
- totalInvestments: {
- committed: 3863334,
- disbursed: 3863334,
- signed: 3863334,
- },
- percValue: "100",
- },
- },
- {
- name: "AZE",
- value: 3792657.91,
- formattedValue: "3,792,658 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "AZE",
- count: 1,
- investment: 3792657.91,
- },
- ],
- totalInvestments: {
- committed: 9077063.61,
- disbursed: 3792657.91,
- signed: 17261208,
- },
- percValue: "41.78287244590545",
- },
- },
- {
- name: "MAR",
- value: 3268715.22,
- formattedValue: "3,268,715 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "MAR",
- count: 1,
- investment: 3268715.22,
- },
- ],
- totalInvestments: {
- committed: 11787008.37,
- disbursed: 3268715.22,
- signed: 18663763.01,
- },
- percValue: "27.7315084319398",
- },
- },
- {
- name: "CIV",
- value: 2962211.4,
- formattedValue: "2,962,211 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "CIV",
- count: 1,
- investment: 2962211.4,
- },
- ],
- totalInvestments: {
- committed: 24241804.47,
- disbursed: 2962211.4,
- signed: 41317244.14,
- },
- percValue: "12.219434422325412",
- },
- },
- {
- name: "EGY",
- value: 2522525.29,
- formattedValue: "2,522,525 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "EGY",
- count: 1,
- investment: 2522525.29,
- },
- ],
- totalInvestments: {
- committed: 2777508.29,
- disbursed: 2522525.29,
- signed: 3112421,
- },
- percValue: "90.81972136976052",
- },
- },
- {
- name: "CMR",
- value: 2510071.13,
- formattedValue: "2,510,071 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "CMR",
- count: 1,
- investment: 2510071.13,
- },
- ],
- totalInvestments: {
- committed: 18117536.52,
- disbursed: 2510071.13,
- signed: 37518372.16,
- },
- percValue: "13.854373232415595",
- },
- },
- {
- name: "CPV",
- value: 2360092.74,
- formattedValue: "2,360,093 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "CPV",
- count: 1,
- investment: 2360092.74,
- },
- ],
- totalInvestments: {
- committed: 2293600.24,
- disbursed: 2360092.74,
- signed: 2293600.24,
- },
- percValue: "102.89904486581324",
- },
- },
- {
- name: "LAO",
- value: 1913737.38,
- formattedValue: "1,913,737 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "LAO",
- count: 1,
- investment: 1913737.38,
- },
- ],
- totalInvestments: {
- committed: 6203422.86,
- disbursed: 1913737.38,
- signed: 15507232,
- },
- percValue: "30.849700611897347",
- },
- },
- {
- name: "SLB",
- value: 1225804.18,
- formattedValue: "1,225,804 USD",
- color: "#70777E",
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "SLB",
- count: 1,
- investment: 1225804.18,
- },
- ],
- totalInvestments: {
- committed: 1512241,
- disbursed: 1225804.18,
- signed: 1512241,
- },
- percValue: "81.05878494234715",
- },
- },
- ],
- tooltip: {
- header: "TB/HIV",
- componentsStats: [
- {
- name: "TB/HIV",
- count: 91,
- investment: 3625684503.7600007,
- },
- ],
- totalInvestments: {
- committed: 4401315220.53,
- disbursed: 3625684503.7600007,
- signed: 5766631509.95,
- },
- percValue: "82.37729683272723",
- },
- },
- {
- name: "RSSH",
- color: "#DFE3E5",
- value: 778969073.44,
- formattedValue: "778,969,073 USD",
- _children: [
- {
- name: "TZA",
- value: 110136808.53,
- formattedValue: "110,136,809 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "TZA",
- count: 1,
- investment: 110136808.53,
- },
- ],
- totalInvestments: {
- committed: 110136808.53,
- disbursed: 110136808.53,
- signed: 110136808.53,
- },
- percValue: "100",
- },
- },
- {
- name: "ETH",
- value: 93893185.29,
- formattedValue: "93,893,185 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "ETH",
- count: 2,
- investment: 93893185.29,
- },
- ],
- totalInvestments: {
- committed: 95112306.89,
- disbursed: 93893185.29,
- signed: 129691887,
- },
- percValue: "98.71822938601422",
- },
- },
- {
- name: "ZWE",
- value: 74106559.43,
- formattedValue: "74,106,559 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "ZWE",
- count: 1,
- investment: 74106559.43,
- },
- ],
- totalInvestments: {
- committed: 74106559.43,
- disbursed: 74106559.43,
- signed: 74106559.43,
- },
- percValue: "100",
- },
- },
- {
- name: "VNM",
- value: 62111060.45,
- formattedValue: "62,111,060 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "VNM",
- count: 1,
- investment: 62111060.45,
- },
- ],
- totalInvestments: {
- committed: 62111060.45,
- disbursed: 62111060.45,
- signed: 62111060.45,
- },
- percValue: "100",
- },
- },
- {
- name: "NGA",
- value: 59235626.59,
- formattedValue: "59,235,627 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "NGA",
- count: 3,
- investment: 59235626.59,
- },
- ],
- totalInvestments: {
- committed: 81258042.97,
- disbursed: 59235626.59,
- signed: 99616090,
- },
- percValue: "72.89817035326516",
- },
- },
- {
- name: "SSD",
- value: 40394243.22,
- formattedValue: "40,394,243 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "SSD",
- count: 1,
- investment: 40394243.22,
- },
- ],
- totalInvestments: {
- committed: 40394243.22,
- disbursed: 40394243.22,
- signed: 40394243.22,
- },
- percValue: "100",
- },
- },
- {
- name: "MWI",
- value: 40211129.29,
- formattedValue: "40,211,129 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "MWI",
- count: 1,
- investment: 40211129.29,
- },
- ],
- totalInvestments: {
- committed: 40211129.29,
- disbursed: 40211129.29,
- signed: 40211129.29,
- },
- percValue: "100",
- },
- },
- {
- name: "UGA",
- value: 33882325.76,
- formattedValue: "33,882,326 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "UGA",
- count: 4,
- investment: 33882325.76,
- },
- ],
- totalInvestments: {
- committed: 33882325.76,
- disbursed: 33882325.76,
- signed: 33882325.76,
- },
- percValue: "100",
- },
- },
- {
- name: "RWA",
- value: 33789554.53,
- formattedValue: "33,789,555 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "RWA",
- count: 1,
- investment: 33789554.53,
- },
- ],
- totalInvestments: {
- committed: 33789554.53,
- disbursed: 33789554.53,
- signed: 33789554.53,
- },
- percValue: "100",
- },
- },
- {
- name: "KHM",
- value: 28810707.32,
- formattedValue: "28,810,707 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "KHM",
- count: 3,
- investment: 28810707.32,
- },
- ],
- totalInvestments: {
- committed: 30989710.29,
- disbursed: 28810707.32,
- signed: 32226872.55,
- },
- percValue: "92.96862426396049",
- },
- },
- {
- name: "BEN",
- value: 28494505.3,
- formattedValue: "28,494,505 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "BEN",
- count: 2,
- investment: 28494505.3,
- },
- ],
- totalInvestments: {
- committed: 31359377.56,
- disbursed: 28494505.3,
- signed: 44471985.72,
- },
- percValue: "90.86438417178839",
- },
- },
- {
- name: "AFG",
- value: 26410019.72,
- formattedValue: "26,410,020 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "AFG",
- count: 3,
- investment: 26410019.72,
- },
- ],
- totalInvestments: {
- committed: 26545006.67,
- disbursed: 26410019.72,
- signed: 26545006.67,
- },
- percValue: "99.49147893734546",
- },
- },
- {
- name: "COD",
- value: 24075016.38,
- formattedValue: "24,075,016 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "COD",
- count: 1,
- investment: 24075016.38,
- },
- ],
- totalInvestments: {
- committed: 42299648.48,
- disbursed: 24075016.38,
- signed: 68645564,
- },
- percValue: "56.91540531686235",
- },
- },
- {
- name: "BFA",
- value: 17146618.13,
- formattedValue: "17,146,618 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "BFA",
- count: 1,
- investment: 17146618.13,
- },
- ],
- totalInvestments: {
- committed: 16738750.6,
- disbursed: 17146618.13,
- signed: 16738750.6,
- },
- percValue: "102.43666650962588",
- },
- },
- {
- name: "SDN",
- value: 16359742.91,
- formattedValue: "16,359,743 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "SDN",
- count: 1,
- investment: 16359742.91,
- },
- ],
- totalInvestments: {
- committed: 16359742.91,
- disbursed: 16359742.91,
- signed: 16359742.91,
- },
- percValue: "100",
- },
- },
- {
- name: "MOZ",
- value: 14937604.44,
- formattedValue: "14,937,604 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "MOZ",
- count: 1,
- investment: 14937604.44,
- },
- ],
- totalInvestments: {
- committed: 14937604.44,
- disbursed: 14937604.44,
- signed: 14937604.44,
- },
- percValue: "100",
- },
- },
- {
- name: "LKA",
- value: 12743582.55,
- formattedValue: "12,743,583 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "LKA",
- count: 1,
- investment: 12743582.55,
- },
- ],
- totalInvestments: {
- committed: 12743582.55,
- disbursed: 12743582.55,
- signed: 12743582.55,
- },
- percValue: "100",
- },
- },
- {
- name: "IDN",
- value: 12421365.68,
- formattedValue: "12,421,366 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "IDN",
- count: 1,
- investment: 12421365.68,
- },
- ],
- totalInvestments: {
- committed: 12421365.68,
- disbursed: 12421365.68,
- signed: 12421365.68,
- },
- percValue: "100",
- },
- },
- {
- name: "SWZ",
- value: 8212962.23,
- formattedValue: "8,212,962 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "SWZ",
- count: 1,
- investment: 8212962.23,
- },
- ],
- totalInvestments: {
- committed: 8212962.23,
- disbursed: 8212962.23,
- signed: 8212962.23,
- },
- percValue: "100",
- },
- },
- {
- name: "PRY",
- value: 7575218.88,
- formattedValue: "7,575,219 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "PRY",
- count: 1,
- investment: 7575218.88,
- },
- ],
- totalInvestments: {
- committed: 7575218.88,
- disbursed: 7575218.88,
- signed: 7575218.88,
- },
- percValue: "100",
- },
- },
- {
- name: "MAR",
- value: 6801523.77,
- formattedValue: "6,801,524 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "MAR",
- count: 1,
- investment: 6801523.77,
- },
- ],
- totalInvestments: {
- committed: 6802876.36,
- disbursed: 6801523.77,
- signed: 6802876.36,
- },
- percValue: "99.98011738081918",
- },
- },
- {
- name: "MNG",
- value: 5306003.95,
- formattedValue: "5,306,004 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "MNG",
- count: 2,
- investment: 5306003.95,
- },
- ],
- totalInvestments: {
- committed: 5306003.95,
- disbursed: 5306003.95,
- signed: 5306003.95,
- },
- percValue: "100",
- },
- },
- {
- name: "SEN",
- value: 4903437.81,
- formattedValue: "4,903,438 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "SEN",
- count: 1,
- investment: 4903437.81,
- },
- ],
- totalInvestments: {
- committed: 4958574.84,
- disbursed: 4903437.81,
- signed: 4958574.84,
- },
- percValue: "98.88804683242412",
- },
- },
- {
- name: "NER",
- value: 4310170.08,
- formattedValue: "4,310,170 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "NER",
- count: 1,
- investment: 4310170.08,
- },
- ],
- totalInvestments: {
- committed: 4919134.34,
- disbursed: 4310170.08,
- signed: 4919134.34,
- },
- percValue: "87.62049950439044",
- },
- },
- {
- name: "LAO",
- value: 3355904.32,
- formattedValue: "3,355,904 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "LAO",
- count: 1,
- investment: 3355904.32,
- },
- ],
- totalInvestments: {
- committed: 3355904.32,
- disbursed: 3355904.32,
- signed: 3355904.32,
- },
- percValue: "100",
- },
- },
- {
- name: "HTI",
- value: 2150577.97,
- formattedValue: "2,150,578 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "HTI",
- count: 1,
- investment: 2150577.97,
- },
- ],
- totalInvestments: {
- committed: 17377590.35,
- disbursed: 2150577.97,
- signed: 23460621.72,
- },
- percValue: "12.37558215313782",
- },
- },
- {
- name: "ARM",
- value: 2143126.76,
- formattedValue: "2,143,127 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "ARM",
- count: 1,
- investment: 2143126.76,
- },
- ],
- totalInvestments: {
- committed: 2142804.94,
- disbursed: 2143126.76,
- signed: 2142804.94,
- },
- percValue: "100.01501863254057",
- },
- },
- {
- name: "PAK",
- value: 1700097.09,
- formattedValue: "1,700,097 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "PAK",
- count: 1,
- investment: 1700097.09,
- },
- ],
- totalInvestments: {
- committed: 1700097.09,
- disbursed: 1700097.09,
- signed: 1700097.09,
- },
- percValue: "100",
- },
- },
- {
- name: "MLI",
- value: 1375389.49,
- formattedValue: "1,375,389 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "MLI",
- count: 1,
- investment: 1375389.49,
- },
- ],
- totalInvestments: {
- committed: 15796257.23,
- disbursed: 1375389.49,
- signed: 26077172,
- },
- percValue: "8.707059336738846",
- },
- },
- {
- name: "GUY",
- value: 1342707.89,
- formattedValue: "1,342,708 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "GUY",
- count: 1,
- investment: 1342707.89,
- },
- ],
- totalInvestments: {
- committed: 1342707.89,
- disbursed: 1342707.89,
- signed: 1342707.89,
- },
- percValue: "100.00000000000001",
- },
- },
- {
- name: "GNB",
- value: 632297.68,
- formattedValue: "632,298 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "GNB",
- count: 1,
- investment: 632297.68,
- },
- ],
- totalInvestments: {
- committed: 632297.69,
- disbursed: 632297.68,
- signed: 632297.68,
- },
- percValue: "99.99999841846649",
- },
- },
- {
- name: "CIV",
- value: 0,
- formattedValue: "0 USD",
- color: "#70777E",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "CIV",
- count: 1,
- investment: 0,
- },
- ],
- totalInvestments: {
- committed: 0,
- disbursed: 0,
- signed: 28079014.36,
- },
- percValue: "NaN",
- },
- },
- ],
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "RSSH",
- count: 44,
- investment: 778969073.44,
- },
- ],
- totalInvestments: {
- committed: 855519250.36,
- disbursed: 778969073.44,
- signed: 993595523.93,
- },
- percValue: "91.05219702680122",
- },
- },
- {
- name: "Multicomponent",
- color: "#DFE3E5",
- value: 255224955.28000003,
- formattedValue: "255,224,955 USD",
- _children: [
- {
- name: "SLE",
- value: 102946647.53,
- formattedValue: "102,946,648 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "SLE",
- count: 1,
- investment: 102946647.53,
- },
- ],
- totalInvestments: {
- committed: 110261561.74,
- disbursed: 102946647.53,
- signed: 115127088.71,
- },
- percValue: "93.36585289146477",
- },
- },
- {
- name: "QSF",
- value: 63349338.74,
- formattedValue: "63,349,339 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "QSF",
- count: 1,
- investment: 63349338.74,
- },
- ],
- totalInvestments: {
- committed: 69237390.36,
- disbursed: 63349338.74,
- signed: 76314083.4,
- },
- percValue: "91.49584987333425",
- },
- },
- {
- name: "SEN",
- value: 23156440.99,
- formattedValue: "23,156,441 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "SEN",
- count: 2,
- investment: 23156440.99,
- },
- ],
- totalInvestments: {
- committed: 52901819.49,
- disbursed: 23156440.99,
- signed: 73839967.95,
- },
- percValue: "43.77248497923072",
- },
- },
- {
- name: "PRK",
- value: 15679305.21,
- formattedValue: "15,679,305 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "PRK",
- count: 1,
- investment: 15679305.21,
- },
- ],
- totalInvestments: {
- committed: 25889984.34,
- disbursed: 15679305.21,
- signed: 43409437,
- },
- percValue: "60.56127730357677",
- },
- },
- {
- name: "AGO",
- value: 14609640.14,
- formattedValue: "14,609,640 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "AGO",
- count: 1,
- investment: 14609640.14,
- },
- ],
- totalInvestments: {
- committed: 22577090,
- disbursed: 14609640.14,
- signed: 22577090,
- },
- percValue: "64.71002303662695",
- },
- },
- {
- name: "MRT",
- value: 10541087.97,
- formattedValue: "10,541,088 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "MRT",
- count: 1,
- investment: 10541087.97,
- },
- ],
- totalInvestments: {
- committed: 11532663.66,
- disbursed: 10541087.97,
- signed: 13664387,
- },
- percValue: "91.40202368478681",
- },
- },
- {
- name: "STP",
- value: 8679233.88,
- formattedValue: "8,679,234 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "STP",
- count: 2,
- investment: 8679233.88,
- },
- ],
- totalInvestments: {
- committed: 13777989.58,
- disbursed: 8679233.88,
- signed: 20988809.53,
- },
- percValue: "62.993471069238545",
- },
- },
- {
- name: "CPV",
- value: 5704541.86,
- formattedValue: "5,704,542 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "CPV",
- count: 1,
- investment: 5704541.86,
- },
- ],
- totalInvestments: {
- committed: 6551777.86,
- disbursed: 5704541.86,
- signed: 9631175.54,
- },
- percValue: "87.06860919121577",
- },
- },
- {
- name: "NAM",
- value: 5055056.11,
- formattedValue: "5,055,056 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "NAM",
- count: 1,
- investment: 5055056.11,
- },
- ],
- totalInvestments: {
- committed: 19281082.05,
- disbursed: 5055056.11,
- signed: 39563486,
- },
- percValue: "26.21769928104217",
- },
- },
- {
- name: "DJI",
- value: 3832002.85,
- formattedValue: "3,832,003 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "DJI",
- count: 1,
- investment: 3832002.85,
- },
- ],
- totalInvestments: {
- committed: 6899040.09,
- disbursed: 3832002.85,
- signed: 10896526,
- },
- percValue: "55.5440003248336",
- },
- },
- {
- name: "RWA",
- value: 1671660,
- formattedValue: "1,671,660 USD",
- color: "#70777E",
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "RWA",
- count: 1,
- investment: 1671660,
- },
- ],
- totalInvestments: {
- committed: 1671660,
- disbursed: 1671660,
- signed: 1671660,
- },
- percValue: "100",
- },
- },
- ],
- tooltip: {
- header: "Multicomponent",
- componentsStats: [
- {
- name: "Multicomponent",
- count: 13,
- investment: 255224955.28000003,
- },
- ],
- totalInvestments: {
- committed: 340582059.17,
- disbursed: 255224955.28000003,
- signed: 427683711.13,
- },
- percValue: "74.93787426794717",
- },
- },
-];
-
-export const mockdata2: DisbursementsTreemapDataItem[] = [
- {
- name: "HIV",
- value: 22406794003.499992,
- formattedValue: "US$22,406,794,003",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "HIV",
- count: 585,
- investment: 22406794003.499992,
- },
- ],
- totalInvestments: {
- committed: 23470867864.36001,
- disbursed: 22406794003.499992,
- signed: 25509347381.529987,
- },
- percValue: "99.88",
- },
- color: "rgba(134, 142, 150, 0.3)",
- _children: [
- {
- name: "Comprehensive prevention programes for MSM 1",
- value: 1469001508.8300002,
- formattedValue: "US$1,469,001,509",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "Comprehensive prevention programes for MSM 1",
- count: 6,
- investment: 1469001508.8300002,
- },
- ],
- totalInvestments: {
- committed: 1473744545.5800002,
- disbursed: 1469001508.8300002,
- signed: 1475159376.8000002,
- },
- percValue: "99.68",
- },
- color: "#ADB5BD",
- },
- {
- name: "Comprehensive prevention programes for MSM 2",
- value: 1462725954.9999998,
- formattedValue: "US$1,462,725,955",
- tooltip: {
- header: "HIV",
- componentsStats: [
- {
- name: "Comprehensive prevention programes for MSM 2",
- count: 8,
- investment: 1462725954.9999998,
- },
- ],
- totalInvestments: {
- committed: 1575765642.66,
- disbursed: 1462725954.9999998,
- signed: 1802434435.6299999,
- },
- percValue: "92.83",
- },
- color: "#ADB5BD",
- },
- ],
- },
- {
- name: "RSSH",
- value: 12406794003.499992,
- formattedValue: "US$12,406,794,003",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "RSSH",
- count: 585,
- investment: 22406794003.499992,
- },
- ],
- totalInvestments: {
- committed: 23470867864.36001,
- disbursed: 22406794003.499992,
- signed: 25509347381.529987,
- },
- percValue: "99.88",
- },
- color: "rgba(134, 142, 150, 0.3)",
- _children: [
- {
- name: "Comprehensive prevention programes for MSM 1",
- value: 1469001508.8300002,
- formattedValue: "US$1,469,001,509",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "Comprehensive prevention programes for MSM 1",
- count: 6,
- investment: 1469001508.8300002,
- },
- ],
- totalInvestments: {
- committed: 1473744545.5800002,
- disbursed: 1469001508.8300002,
- signed: 1475159376.8000002,
- },
- percValue: "99.68",
- },
- color: "#ADB5BD",
- },
- {
- name: "Comprehensive prevention programes for MSM 2",
- value: 1462725954.9999998,
- formattedValue: "US$1,462,725,955",
- tooltip: {
- header: "RSSH",
- componentsStats: [
- {
- name: "Comprehensive prevention programes for MSM 2",
- count: 8,
- investment: 1462725954.9999998,
- },
- ],
- totalInvestments: {
- committed: 1575765642.66,
- disbursed: 1462725954.9999998,
- signed: 1802434435.6299999,
- },
- percValue: "92.83",
- },
- color: "#ADB5BD",
- },
- ],
- },
-];
diff --git a/src/app/components/Charts/Investments/Disbursements/index.tsx b/src/app/components/Charts/Investments/Disbursements/index.tsx
index c214eeda3..b947f6c63 100644
--- a/src/app/components/Charts/Investments/Disbursements/index.tsx
+++ b/src/app/components/Charts/Investments/Disbursements/index.tsx
@@ -2,11 +2,14 @@
/* eslint-disable import/no-cycle */
/* third-party */
import React from "react";
+import get from "lodash/get";
import CloseIcon from "@material-ui/icons/Close";
import IconButton from "@material-ui/core/IconButton";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { ResponsiveTreeMapHtml, TreeMapNodeDatum } from "@nivo/treemap";
/* project */
+import { appColors } from "app/theme";
+import { useCMSData } from "app/hooks/useCMSData";
import { isTouchDevice } from "app/utils/isTouchDevice";
import {
TooltipButton,
@@ -17,8 +20,6 @@ import { DisbursementsTreemapProps } from "app/components/Charts/Investments/Dis
import { NoDataTreemap } from "app/components/Charts/Investments/Disbursements/components/nodata";
import { TreemapTooltip } from "app/components/Charts/Investments/Disbursements/components/tooltip";
import { TreeemapNode } from "app/components/Charts/Investments/Disbursements/components/treemapnode";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
export function DisbursementsTreemap(props: DisbursementsTreemapProps) {
const cmsData = useCMSData({ returnData: true });
@@ -55,10 +56,10 @@ export function DisbursementsTreemap(props: DisbursementsTreemapProps) {
> div {
> div {
> div:first-of-type {
- background: #373d43;
+ background: ${appColors.TREEMAP.BACKGROUND_COLOR};
@media (max-width: 767px) {
- background: #fff;
+ background: ${appColors.COMMON.WHITE};
}
}
}
@@ -115,8 +116,8 @@ export function DisbursementsTreemap(props: DisbursementsTreemapProps) {
borderRadius: 20,
padding: "16px 25px",
position: "relative",
- backgroundColor: "#f5f5f7",
display: isMobile || isTouchDevice() ? "none" : "inherit",
+ backgroundColor: appColors.TREEMAP.TOOLTIP_BACKGROUND_COLOR,
},
},
}}
@@ -147,20 +148,21 @@ export function DisbursementsTreemap(props: DisbursementsTreemapProps) {
css={`
padding: 16px 25px;
position: relative;
- background: #f5f5f7;
+ background: ${appColors.TREEMAP.TOOLTIP_BACKGROUND_COLOR};
border-radius: 20px;
> div {
- background: #f5f5f7 !important;
+ background: ${appColors.TREEMAP
+ .TOOLTIP_BACKGROUND_COLOR} !important;
}
@media (max-width: 767px) {
padding: 16px;
- background: #fff;
+ background: ${appColors.COMMON.WHITE};
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.3);
> div {
- background: #fff !important;
+ background: ${appColors.COMMON.WHITE} !important;
}
}
`}
diff --git a/src/app/components/Charts/Investments/TimeCycle/components/bar/index.tsx b/src/app/components/Charts/Investments/TimeCycle/components/bar/index.tsx
index 437a8d305..8c5f8483b 100644
--- a/src/app/components/Charts/Investments/TimeCycle/components/bar/index.tsx
+++ b/src/app/components/Charts/Investments/TimeCycle/components/bar/index.tsx
@@ -1,5 +1,6 @@
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { InvestmentsTimeCycleTooltip } from "../tooltip";
export function BarComponent(props: any) {
@@ -20,8 +21,7 @@ export function BarComponent(props: any) {
const height = (item.value / props.data.value) * props.height;
const localPrevY = prevY;
prevY += height;
- let nodecss =
- "cursor: pointer;transition: opacity 0.2s ease-in-out;stroke: #1B2127;";
+ let nodecss = `cursor: pointer;transition: opacity 0.2s ease-in-out;stroke: ${appColors.TIME_CYCLE.NODE_STROKE_HOVER_COLOR};`;
if (props.selected === props.data.indexValue) {
nodecss += "z-index: 2;";
} else if (
diff --git a/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx b/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx
index 6cf12deb7..96733070f 100644
--- a/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx
+++ b/src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx
@@ -1,19 +1,20 @@
import React from "react";
import get from "lodash/get";
-import { formatFinancialValue } from "app/utils/formatFinancialValue";
+import { appColors } from "app/theme";
import { useCMSData } from "app/hooks/useCMSData";
+import { formatFinancialValue } from "app/utils/formatFinancialValue";
export function InvestmentsTimeCycleTooltip(props: any) {
const cmsData = useCMSData({ returnData: true });
-
+
return (
diff --git a/src/app/components/Charts/Investments/TimeCycle/data.ts b/src/app/components/Charts/Investments/TimeCycle/data.ts
index 896895ff8..c64e9d92b 100644
--- a/src/app/components/Charts/Investments/TimeCycle/data.ts
+++ b/src/app/components/Charts/Investments/TimeCycle/data.ts
@@ -4,1196 +4,3 @@ export interface InvestmentsTimeCycleProps {
data: Record[];
onNodeClick: (node: string, x: number, y: number) => void;
}
-
-export const mockdata: Record[] = [
- {
- year: "2002",
- disbursed: 897869,
- cumulative: 897869,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 429599,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 468270,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 429599,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 468270,
- },
- ],
- },
- {
- year: "2003",
- disbursed: 231200246,
- cumulative: 232098115,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 121075744,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 49499456,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 19945715,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 40679331,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 121505343,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 49499456,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 19945715,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 41147601,
- },
- ],
- },
- {
- year: "2004",
- disbursed: 627505820,
- cumulative: 859603935,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 360849559,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 135534537,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 1687514,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 22243780,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 107190430,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 482354902,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 185033993,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 1687514,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 42189495,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 148338031,
- },
- ],
- },
- {
- year: "2005",
- disbursed: 1053520591,
- cumulative: 1913124526,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 579339937,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 308168894,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 8663218,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 30120009,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 127228533,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1061694839,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 493202887,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 10350732,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 72309504,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 275566564,
- },
- ],
- },
- {
- year: "2006",
- disbursed: 1325873198,
- cumulative: 3238997724,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 695754234,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 407778996,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 7446356,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 18427720,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 196465892,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1757449073,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 900981883,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 17797088,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 90737224,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 472032456,
- },
- ],
- },
- {
- year: "2007",
- disbursed: 1725151295,
- cumulative: 4964149019,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1073208983,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 350932605,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 3690337,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 21865222,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 275454148,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 2830658056,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1251914488,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 21487425,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 112602446,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 747486604,
- },
- ],
- },
- {
- year: "2008",
- disbursed: 2246870479,
- cumulative: 7211019498,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1332447275,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 518707176,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 28524156,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 52026664,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 315165208,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 4163105331,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1770621664,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 50011581,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 164629110,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 1062651812,
- },
- ],
- },
- {
- year: "2009",
- disbursed: 2749053423,
- cumulative: 9960072921,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1292024100,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1014012166,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 37271117,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 18505090,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 387240950,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 5455129431,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 2784633830,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 87282698,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 183134200,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 1449892762,
- },
- ],
- },
- {
- year: "2010",
- disbursed: 3070865139,
- cumulative: 13030938060,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1582140741,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 927976947,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 33379909,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 11949675,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 515417867,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 7037270172,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 3712610777,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 120662607,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 195083875,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 1965310629,
- },
- ],
- },
- {
- year: "2011",
- disbursed: 2631916590,
- cumulative: 15662854650,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1468501089,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 620913962,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 109669412,
- },
- {
- name: "TB/HIV",
- color: "",
- value: -1450758,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 434282885,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 8505771261,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 4333524739,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 230332019,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 193633117,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 2399593514,
- },
- ],
- },
- {
- year: "2012",
- disbursed: 3331939274,
- cumulative: 18994793924,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1759918012,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 962553004,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 115228322,
- },
- {
- name: "TB/HIV",
- color: "",
- value: -4250,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 494244186,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 10265689273,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 5296077743,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 345560341,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 193628867,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 2893837700,
- },
- ],
- },
- {
- year: "2013",
- disbursed: 3968752783,
- cumulative: 22769917840,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 2101675199,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1043369627,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 93107174,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 730600783,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 12367364472,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 6339447370,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 438667515,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 3624438483,
- },
- ],
- },
- {
- year: "2014",
- disbursed: 2878907411,
- cumulative: 25648825251,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1540131665,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 825130452,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 59164211,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 1064213,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 453416870,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 13907496137,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 7164577822,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 497831726,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 1064213,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 4077855353,
- },
- ],
- },
- {
- year: "2015",
- disbursed: 3181728142,
- cumulative: 28830553393,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1604054733,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 910560104,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 48025164,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 113876530,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 505211611,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 15511550870,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 8075137926,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 545856890,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 114940743,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 4583066964,
- },
- ],
- },
- {
- year: "2016",
- disbursed: 3546149191,
- cumulative: 32376702584,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1493871016,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1054855326,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 9808263,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 65621908,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 327853205,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 594139473,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 17005421886,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 9129993252,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 9808263,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 611478798,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 442793948,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 5177206437,
- },
- ],
- },
- {
- year: "2017",
- disbursed: 4230214270,
- cumulative: 36606916854,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1524372905,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1335906418,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 34286748,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 78971342,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 524764737,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 731912120,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 18529794791,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 10465899670,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 44095011,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 690450140,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 967558685,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 5909118557,
- },
- ],
- },
- {
- year: "2018",
- disbursed: 3177524823,
- cumulative: 39784441677,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1049601115,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 957773885,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 56907824,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 17892997,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 603176575,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 492172427,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 19579395906,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 11423673555,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 101002835,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 708343137,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 1570735260,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 6401290984,
- },
- ],
- },
- {
- year: "2019",
- disbursed: 3492046192,
- cumulative: 43276487869,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1058823267,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1178274992,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 36979459,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 17173383,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 699173179,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 501621912,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 20638219173,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 12601948547,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 137982294,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 725516520,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 2269908439,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 6902912896,
- },
- ],
- },
- {
- year: "2020",
- disbursed: 4198792109,
- cumulative: 47475279978,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 1360234653,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 1369764711,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 78756522,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 41843592,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 740717633,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 607474998,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 21998453826,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 13971713258,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 216738816,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 767360112,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 3010626072,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 7510387894,
- },
- ],
- },
- {
- year: "2021",
- disbursed: 1608318355,
- cumulative: 49083598333,
- disbursedChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 440049241,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 521289190,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 38486137,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 11608953,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 421429559,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 175455275,
- },
- ],
- cumulativeChildren: [
- {
- name: "HIV",
- color: "#70777E",
- value: 22438503067,
- },
- {
- name: "Malaria",
- color: "#262C34",
- value: 14493002448,
- },
- {
- name: "Multicomponent",
- color: "#373D43",
- value: 255224953,
- },
- {
- name: "RSSH",
- color: "#ADB5BD",
- value: 778969065,
- },
- {
- name: "TB/HIV",
- color: "",
- value: 3432055631,
- },
- {
- name: "Tuberculosis",
- color: "#252C34",
- value: 7685843169,
- },
- ],
- },
-];
diff --git a/src/app/components/Charts/Investments/TimeCycle/index.tsx b/src/app/components/Charts/Investments/TimeCycle/index.tsx
index 0688e3ace..cad6ddaf7 100644
--- a/src/app/components/Charts/Investments/TimeCycle/index.tsx
+++ b/src/app/components/Charts/Investments/TimeCycle/index.tsx
@@ -5,7 +5,6 @@ import filter from "lodash/filter";
import Grid from "@material-ui/core/Grid";
import { ResponsiveBar } from "@nivo/bar";
import CloseIcon from "@material-ui/icons/Close";
-import { InfoIcon } from "app/assets/icons/Info";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
import { isTouchDevice } from "app/utils/isTouchDevice";
@@ -25,6 +24,7 @@ import {
import { InvestmentsTimeCycleTooltip } from "./components/tooltip";
import get from "lodash/get";
import { useCMSData } from "app/hooks/useCMSData";
+import { appColors } from "app/theme";
function getKeysFromData(data: Record[]) {
if (data.length === 0) {
@@ -156,7 +156,7 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
spacing={!isMobile ? 0 : 2}
css={`
> div {
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 14px;
}
`}
@@ -185,7 +185,7 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
}
`}
>
- Investments - {props.type || "Disbursement"}
+ Investments - {props.type || "Disbursement"}
{formatFinancialValue(totalInvestmentValue)}
@@ -296,13 +296,13 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
&::-webkit-scrollbar {
height: 5px;
- background: #262c34;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
}
&::-webkit-scrollbar-track {
- background: #dfe3e6;
+ background: ${appColors.COMMON.SECONDARY_COLOR_7};
}
&::-webkit-scrollbar-thumb {
- background: #262c34;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
}
}
`}
@@ -382,11 +382,11 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
ticks: {
line: {
strokeWidth: 1,
- stroke: "#868E96",
+ stroke: appColors.TIME_CYCLE.AXIS_GRID_COLOR,
strokeOpacity: 0.3,
},
text: {
- fill: "#262c34",
+ fill: appColors.TIME_CYCLE.AXIS_COLOR,
fontSize: 12,
},
},
@@ -404,7 +404,7 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
grid: {
line: {
strokeWidth: 1,
- stroke: "#868E96",
+ stroke: appColors.TIME_CYCLE.AXIS_GRID_COLOR,
strokeOpacity: 0.3,
},
},
@@ -425,19 +425,22 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
css={`
padding: 16px 25px;
position: relative;
- background: #f5f5f7;
+ background: ${appColors.TIME_CYCLE
+ .MOBILE_TOOLTIP_BACKGROUND_COLOR};
border-radius: 20px;
@media (max-width: 767px) {
padding: 25px;
- color: #262c34;
- background: #fff;
+ color: ${appColors.TIME_CYCLE.MOBILE_TOOLTIP_COLOR};
+ background: ${appColors.TIME_CYCLE
+ .MOBILE_TOOLTIP_BACKGROUND_COLOR};
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.3);
> div {
padding: 0;
- background: #fff !important;
+ background: ${appColors.TIME_CYCLE
+ .MOBILE_TOOLTIP_BACKGROUND_COLOR} !important;
}
}
`}
@@ -449,7 +452,7 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
justify-content flex-end;
path {
- fill: #2E4063;
+ fill: ${appColors.TIME_CYCLE.MOBILE_TOOLTIP_CLOSE_ICON_COLOR};
}
`}
>
diff --git a/src/app/components/Charts/Network/components/legends/index.tsx b/src/app/components/Charts/Network/components/legends/index.tsx
index f0ff76b40..beb439231 100644
--- a/src/app/components/Charts/Network/components/legends/index.tsx
+++ b/src/app/components/Charts/Network/components/legends/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { css } from "styled-components/macro";
import get from "lodash/get";
import { useCMSData } from "app/hooks/useCMSData";
+import { appColors } from "app/theme";
export function NetworkLegends() {
const cmsData = useCMSData({ returnData: true });
@@ -10,7 +11,7 @@ export function NetworkLegends() {
100%",
@@ -213,13 +214,13 @@ const styles = {
justify-content: space-between;
`,
title: css`
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 12px;
font-weight: bold;
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
`,
noData: (reported: boolean) => css`
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 12px;
padding-left: 20px;
position: relative;
@@ -237,13 +238,13 @@ const styles = {
height: 13px;
position: absolute;
border-radius: 50%;
- border: 0.5px solid #262c34;
+ border: 0.5px solid ${appColors.COMMON.PRIMARY_COLOR_1};
background: ${reported
? "transparent"
: `repeating-linear-gradient(
-45deg,
- #262c34 0 0.5px,
- #fff 1.5px 2px
+ ${appColors.COMMON.PRIMARY_COLOR_1} 0 0.5px,
+ ${appColors.COMMON.WHITE} 1.5px 2px
)`};
}
`,
@@ -306,7 +307,7 @@ export function AchievementRateLegend() {
top: 20px;
left: -5px;
position: relative;
- color: color: #262C34;
+ color: color: ${appColors.COMMON.PRIMARY_COLOR_1};
content: "${item.label}";
}
`}
diff --git a/src/app/components/Charts/Network/data.ts b/src/app/components/Charts/Network/data.ts
index a0aefc5a4..595f8e4a9 100644
--- a/src/app/components/Charts/Network/data.ts
+++ b/src/app/components/Charts/Network/data.ts
@@ -13,283 +13,3 @@ export interface NetworkVizProps {
selectedNodeId?: string;
onNodeClick: (node: string, x: number, y: number) => void;
}
-
-export const mockdata = {
- nodes: [
- {
- id: "Jan, 2017 - Jun, 2017",
- radius: 12,
- depth: 0,
- color: "#262C34",
- borderColor: "#ADB5BD",
- },
- {
- id: "Coverage / Output indicator",
- radius: 12,
- depth: 1,
- color: "#ADB5BD",
- borderColor: "#262C34",
- },
- {
- id: "Process indicator / WPTM",
- radius: 12,
- depth: 1,
- color: "#ADB5BD",
- borderColor: "#262C34",
- },
- {
- id: "PMTCT|Coverage / Output indicator",
- radius: 12,
- depth: 2,
- color: "#fff",
- borderColor: "#262C34",
- },
- {
- id: "Prevention programs for general population|Coverage / Output indicator",
- radius: 12,
- depth: 2,
- color: "#fff",
- borderColor: "#262C34",
- },
- {
- id: "TB/HIV|Coverage / Output indicator",
- radius: 12,
- depth: 2,
- color: "#fff",
- borderColor: "#262C34",
- },
- {
- id: "Treatment, care and support|Coverage / Output indicator",
- radius: 12,
- depth: 2,
- color: "#fff",
- borderColor: "#262C34",
- },
- {
- id: "PMTCT|Process indicator / WPTM",
- radius: 12,
- depth: 2,
- color: "#fff",
- borderColor: "#262C34",
- },
- {
- id: "TB/HIV|Process indicator / WPTM",
- radius: 12,
- depth: 2,
- color: "#fff",
- borderColor: "#262C34",
- },
- {
- id: "Percentage of HIV-positive pregnant women who received antiretrovirals to reduce the risk of mother-to-child transmission",
- radius: 12,
- depth: 3,
- color: "#97ff46",
- borderColor: "#262C34",
- },
- {
- id: "Percentage of infants born to HIV-positive women receiving a virological test for HIV within 2 months of birth",
- radius: 12,
- depth: 3,
- color: "#ffaa46",
- borderColor: "#262C34",
- },
- {
- id: "Percentage of pregnant women who know their HIV status",
- radius: 12,
- depth: 3,
- color: "#daff46",
- borderColor: "#262C34",
- },
- {
- id: "Number of women and men aged 15+ who received an HIV test and know their results",
- radius: 12,
- depth: 3,
- color: "#60ff46",
- borderColor: "#262C34",
- },
- {
- id: "Percentage of HIV-positive patients who were screened for TB in HIV care or treatment settings",
- radius: 12,
- depth: 3,
- color: "#97ff46",
- borderColor: "#262C34",
- },
- {
- id: "Percentage of HIV-positive registered TB patients given anti-retroviral therapy during TB treatment",
- radius: 12,
- depth: 3,
- color: "#daff46",
- borderColor: "#262C34",
- },
- {
- id: "Percentage of TB patients who had an HIV test result recorded in the TB register",
- radius: 12,
- depth: 3,
- color: "#daff46",
- borderColor: "#262C34",
- },
- {
- id: "Percentage of adults and children that initiated ART, with an undetectable viral load at 12 months (<1000 copies/ml)",
- radius: 12,
- depth: 3,
- color: "#daff46",
- borderColor: "#262C34",
- },
- {
- id: "TCS-other 1: Percentage of adults currently receiving ART among all adults living with HIV",
- radius: 12,
- depth: 3,
- color: "#daff46",
- borderColor: "#262C34",
- },
- {
- id: "TCS-other 2: Percentage of children currently receiving ART among all children living with HIV",
- radius: 12,
- depth: 3,
- color: "#daff46",
- borderColor: "#262C34",
- },
- {
- id: "TCS-other 3: Percentage of adults and children enrolled in care who have received a CD4 count.",
- radius: 12,
- depth: 3,
- color: "#fa9a55",
- borderColor: "#262C34",
- },
- {
- id: "Ensure the supervision of community service providers and primary healthcare centers (CSPS) (50% of sites performing poorly) by the District Team each semester",
- radius: 12,
- depth: 3,
- color: "#E2E2E2",
- borderColor: "#262C34",
- },
- {
- id: "TB/HIV-4: Percentage of new HIV-positive patients starting IPT during the reporting period",
- radius: 12,
- depth: 3,
- color: "#E2E2E2",
- borderColor: "#262C34",
- },
- ],
- links: [
- {
- source: "Jan, 2017 - Jun, 2017",
- target: "Coverage / Output indicator",
- distance: 10,
- },
- {
- source: "Coverage / Output indicator",
- target: "PMTCT|Coverage / Output indicator",
- distance: 60,
- },
- {
- source: "PMTCT|Coverage / Output indicator",
- target:
- "Percentage of HIV-positive pregnant women who received antiretrovirals to reduce the risk of mother-to-child transmission",
- distance: 70,
- },
- {
- source: "PMTCT|Coverage / Output indicator",
- target:
- "Percentage of infants born to HIV-positive women receiving a virological test for HIV within 2 months of birth",
- distance: 70,
- },
- {
- source: "PMTCT|Coverage / Output indicator",
- target: "Percentage of pregnant women who know their HIV status",
- distance: 70,
- },
- {
- source: "Coverage / Output indicator",
- target:
- "Prevention programs for general population|Coverage / Output indicator",
- distance: 60,
- },
- {
- source:
- "Prevention programs for general population|Coverage / Output indicator",
- target:
- "Number of women and men aged 15+ who received an HIV test and know their results",
- distance: 70,
- },
- {
- source: "Coverage / Output indicator",
- target: "TB/HIV|Coverage / Output indicator",
- distance: 60,
- },
- {
- source: "TB/HIV|Coverage / Output indicator",
- target:
- "Percentage of HIV-positive patients who were screened for TB in HIV care or treatment settings",
- distance: 70,
- },
- {
- source: "TB/HIV|Coverage / Output indicator",
- target:
- "Percentage of HIV-positive registered TB patients given anti-retroviral therapy during TB treatment",
- distance: 70,
- },
- {
- source: "TB/HIV|Coverage / Output indicator",
- target:
- "Percentage of TB patients who had an HIV test result recorded in the TB register",
- distance: 70,
- },
- {
- source: "Coverage / Output indicator",
- target: "Treatment, care and support|Coverage / Output indicator",
- distance: 60,
- },
- {
- source: "Treatment, care and support|Coverage / Output indicator",
- target:
- "Percentage of adults and children that initiated ART, with an undetectable viral load at 12 months (<1000 copies/ml)",
- distance: 70,
- },
- {
- source: "Treatment, care and support|Coverage / Output indicator",
- target:
- "TCS-other 1: Percentage of adults currently receiving ART among all adults living with HIV",
- distance: 70,
- },
- {
- source: "Treatment, care and support|Coverage / Output indicator",
- target:
- "TCS-other 2: Percentage of children currently receiving ART among all children living with HIV",
- distance: 70,
- },
- {
- source: "Treatment, care and support|Coverage / Output indicator",
- target:
- "TCS-other 3: Percentage of adults and children enrolled in care who have received a CD4 count.",
- distance: 70,
- },
- {
- source: "Jan, 2017 - Jun, 2017",
- target: "Process indicator / WPTM",
- distance: 10,
- },
- {
- source: "Process indicator / WPTM",
- target: "PMTCT|Process indicator / WPTM",
- distance: 60,
- },
- {
- source: "PMTCT|Process indicator / WPTM",
- target:
- "Ensure the supervision of community service providers and primary healthcare centers (CSPS) (50% of sites performing poorly) by the District Team each semester",
- distance: 70,
- },
- {
- source: "Process indicator / WPTM",
- target: "TB/HIV|Process indicator / WPTM",
- distance: 60,
- },
- {
- source: "TB/HIV|Process indicator / WPTM",
- target:
- "TB/HIV-4: Percentage of new HIV-positive patients starting IPT during the reporting period",
- distance: 70,
- },
- ],
-};
diff --git a/src/app/components/Charts/Network/index.tsx b/src/app/components/Charts/Network/index.tsx
index 6a56047f5..74ab6926c 100644
--- a/src/app/components/Charts/Network/index.tsx
+++ b/src/app/components/Charts/Network/index.tsx
@@ -7,6 +7,7 @@ import { useMediaQuery, Tooltip } from "@material-ui/core";
import { NetworkVizProps } from "app/components/Charts/Network/data";
import { NoDataLabel } from "app/components/Charts/common/nodatalabel";
import { AchievementRateLegend } from "app/components/Charts/Network/components/legends";
+import { appColors } from "app/theme";
export function NetworkViz(props: NetworkVizProps) {
const cmsData = useCMSData({ returnData: true });
@@ -24,7 +25,7 @@ export function NetworkViz(props: NetworkVizProps) {
"path"
);
pathElement.setAttribute("d", "M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2");
- pathElement.setAttribute("stroke", "#262c34");
+ pathElement.setAttribute("stroke", appColors.COMMON.PRIMARY_COLOR_1);
pathElement.setAttribute("strokeWidth", "0.5");
const patternElement = document.createElementNS(
@@ -60,7 +61,7 @@ export function NetworkViz(props: NetworkVizProps) {
stroke={node.borderColor}
transform={`translate(${node.x}, ${node.y}) scale(1)`}
css={
- node.color === "#E2E2E2"
+ node.color === appColors.COMMON.SELECTED_ITEM_VALUE_COLOR
? `fill: url(#diagonalHatch);`
: `fill: ${node.color};`
}
@@ -158,8 +159,8 @@ export function NetworkViz(props: NetworkVizProps) {
strokeLinecap="round"
stroke={
props.selectedNodeId && props.selectedNodeId === link.source.id
- ? "#262C34"
- : "#DFE3E6"
+ ? appColors.COMMON.PRIMARY_COLOR_1
+ : appColors.COMMON.SECONDARY_COLOR_7
}
/>
));
@@ -171,7 +172,7 @@ export function NetworkViz(props: NetworkVizProps) {
0 ? props.data.nodes : []}
diff --git a/src/app/components/Charts/PerformanceRating/data.ts b/src/app/components/Charts/PerformanceRating/data.ts
index 4bf1fc028..e3409a298 100644
--- a/src/app/components/Charts/PerformanceRating/data.ts
+++ b/src/app/components/Charts/PerformanceRating/data.ts
@@ -3,26 +3,3 @@ export interface PerformanceRatingProps {
}
export const ratingValues = ["N/A", "C", "B2", "B1", "A2", "A1"];
-
-export const mockdata: Record[] = [
- {
- year: "May 2010 - Jul 2010",
- rating: 3,
- },
- {
- year: "Aug 2010 - Oct 2010",
- rating: 3,
- },
- {
- year: "Nov 2010 - Jan 2011",
- rating: 3,
- },
- {
- year: "Feb 2011 - Apr 2011",
- rating: 3,
- },
- {
- year: "May 2011 - Jul 2011",
- rating: 3,
- },
-];
diff --git a/src/app/components/Charts/PerformanceRating/index.tsx b/src/app/components/Charts/PerformanceRating/index.tsx
index 9f07bf390..ac7ebf52c 100644
--- a/src/app/components/Charts/PerformanceRating/index.tsx
+++ b/src/app/components/Charts/PerformanceRating/index.tsx
@@ -1,13 +1,13 @@
import React from "react";
+import get from "lodash/get";
+import { appColors } from "app/theme";
import { ResponsiveBar } from "@nivo/bar";
-import { InfoIcon } from "app/assets/icons/Info";
+import { useCMSData } from "app/hooks/useCMSData";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import {
PerformanceRatingProps,
ratingValues,
} from "app/components/Charts/PerformanceRating/data";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
export function PerformanceRating(props: PerformanceRatingProps) {
const isMobile = useMediaQuery("(max-width: 767px)");
@@ -40,8 +40,7 @@ export function PerformanceRating(props: PerformanceRatingProps) {
cmsData,
"componentsChartsPerformanceRating.performanceRating",
""
- )}{" "}
-
+ )}
diff --git a/src/app/components/Charts/PledgesContributions/TimeCycle/data.ts b/src/app/components/Charts/PledgesContributions/TimeCycle/data.ts
index c96328e3f..07dd9743b 100644
--- a/src/app/components/Charts/PledgesContributions/TimeCycle/data.ts
+++ b/src/app/components/Charts/PledgesContributions/TimeCycle/data.ts
@@ -21,55 +21,3 @@ export interface PledgesContributionsTreemapDataItem {
value: number;
};
}
-
-export const mockdata: Record[] = [
- {
- year: "2001-2005",
- pledge: 4855441149.2,
- contribution: 4855441149.2,
- pledgeColor: "#868E96",
- contributionColor: "#262C34",
- },
- {
- year: "2006-2007",
- pledge: 4750213146,
- contribution: 4803345662.25,
- pledgeColor: "#868E96",
- contributionColor: "#262C34",
- },
- {
- year: "2008-2010",
- pledge: 10039407985.1,
- contribution: 9643861786.12,
- pledgeColor: "#868E96",
- contributionColor: "#262C34",
- },
- {
- year: "2011-2013",
- pledge: 10307673846.25,
- contribution: 10303883939.29,
- pledgeColor: "#868E96",
- contributionColor: "#262C34",
- },
- {
- year: "2014-2016",
- pledge: 12448929788.12,
- contribution: 11713105696.93,
- pledgeColor: "#868E96",
- contributionColor: "#262C34",
- },
- {
- year: "2017-2019",
- pledge: 12242930684.09,
- contribution: 11374762402.26,
- pledgeColor: "#868E96",
- contributionColor: "#262C34",
- },
- {
- year: "2020-2022",
- pledge: 17942307515.71,
- contribution: 4191700290.72,
- pledgeColor: "#868E96",
- contributionColor: "#262C34",
- },
-];
diff --git a/src/app/components/Charts/PledgesContributions/TimeCycle/index.tsx b/src/app/components/Charts/PledgesContributions/TimeCycle/index.tsx
index 218720eb7..ccb92a9dc 100644
--- a/src/app/components/Charts/PledgesContributions/TimeCycle/index.tsx
+++ b/src/app/components/Charts/PledgesContributions/TimeCycle/index.tsx
@@ -1,8 +1,10 @@
import React from "react";
+import get from "lodash/get";
+import { appColors } from "app/theme";
import Grid from "@material-ui/core/Grid";
import { ResponsiveBar } from "@nivo/bar";
-import { InfoIcon } from "app/assets/icons/Info";
import CloseIcon from "@material-ui/icons/Close";
+import { useCMSData } from "app/hooks/useCMSData";
import IconButton from "@material-ui/core/IconButton";
import { isTouchDevice } from "app/utils/isTouchDevice";
import useMediaQuery from "@material-ui/core/useMediaQuery";
@@ -17,8 +19,6 @@ import {
TooltipButton,
XsContainer,
} from "app/components/Charts/common/styles";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
export function PledgesContributionsTimeCycle(
props: PledgesContributionsProps
@@ -33,8 +33,14 @@ export function PledgesContributionsTimeCycle(
"pledgesContributionsBar"
);
const legends = [
- { name: get(cmsData, "componentsChartsPledges.pledge", ""), color: "#BFCFEE" },
- { name: get(cmsData, "componentsChartsPledges.contribution", ""), color: "#252C34" },
+ {
+ name: get(cmsData, "componentsChartsPledges.pledge", ""),
+ color: appColors.TIME_CYCLE.PLEDGE_COLOR,
+ },
+ {
+ name: get(cmsData, "componentsChartsPledges.contribution", ""),
+ color: appColors.TIME_CYCLE.CONTRIBUTION_COLOR,
+ },
];
const Bars = (bprops: any) => {
@@ -86,7 +92,7 @@ export function PledgesContributionsTimeCycle(
- {get(cmsData, "componentsChartsPledges.replenishmentPeriods", "")}
+ {get(cmsData, "componentsChartsPledges.replenishmentPeriods", "")}
@@ -210,11 +216,11 @@ export function PledgesContributionsTimeCycle(
ticks: {
line: {
strokeWidth: 1,
- stroke: "#868E96",
+ stroke: appColors.TIME_CYCLE.AXIS_COLOR,
strokeOpacity: 0.3,
},
text: {
- fill: "#262c34",
+ stroke: appColors.TIME_CYCLE.AXIS_TEXT_COLOR,
fontSize: 12,
},
},
@@ -232,7 +238,7 @@ export function PledgesContributionsTimeCycle(
grid: {
line: {
strokeWidth: 1,
- stroke: "#868E96",
+ stroke: appColors.TIME_CYCLE.AXIS_GRID_COLOR,
strokeOpacity: 0.3,
},
},
@@ -251,19 +257,21 @@ export function PledgesContributionsTimeCycle(
css={`
padding: 16px 25px;
position: relative;
- background: #f5f5f7;
+ background: ${appColors.TIME_CYCLE.TOOLTIP_BACKGROUND_COLOR};
border-radius: 20px;
@media (max-width: 767px) {
padding: 25px;
- color: #262c34;
- background: #fff;
+ color: ${appColors.TIME_CYCLE.MOBILE_TOOLTIP_COLOR};
+ background: ${appColors.TIME_CYCLE
+ .MOBILE_TOOLTIP_BACKGROUND_COLOR};
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.3);
> div {
padding: 0;
- background: #fff !important;
+ background: ${appColors.TIME_CYCLE
+ .MOBILE_TOOLTIP_BACKGROUND_COLOR} !important;
}
}
`}
@@ -275,7 +283,7 @@ export function PledgesContributionsTimeCycle(
justify-content flex-end;
path {
- fill: #2E4063;
+ fill: ${appColors.TIME_CYCLE.MOBILE_TOOLTIP_CLOSE_ICON_COLOR};
}
`}
>
diff --git a/src/app/components/Charts/common/backbtn/index.tsx b/src/app/components/Charts/common/backbtn/index.tsx
index f2dd5e129..13223eb29 100644
--- a/src/app/components/Charts/common/backbtn/index.tsx
+++ b/src/app/components/Charts/common/backbtn/index.tsx
@@ -17,9 +17,6 @@ export function VizBackBtn(props: Props) {
const setDataPathSteps = useStoreActions(
(actions) => actions.DataPathSteps.setSteps
);
- const setShowDataPath = useStoreActions(
- (state) => state.DataPathPanelVisibilityState.setValue
- );
const setActiveStep = useStoreActions(
(actions) => actions.DataPathActiveStep.setStep
);
diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index 1d5323e96..94879c60c 100644
--- a/src/app/components/Charts/common/breadcrumbs/index.tsx
+++ b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -3,6 +3,7 @@ import { useRecoilState } from "recoil";
import { useHistory } from "react-router-dom";
import RightIcon from "@material-ui/icons/ChevronRight";
import { breadCrumbItems } from "app/state/recoil/atoms";
+import { appColors } from "app/theme";
export default function BreadCrumbs() {
const history = useHistory();
@@ -65,14 +66,15 @@ export default function BreadCrumbs() {
diff --git a/src/app/components/Charts/common/styles.ts b/src/app/components/Charts/common/styles.ts
index d6bce971b..84cb34597 100644
--- a/src/app/components/Charts/common/styles.ts
+++ b/src/app/components/Charts/common/styles.ts
@@ -1,3 +1,4 @@
+import { appColors } from "app/theme";
import styled from "styled-components/macro";
export const XsContainer = styled.div`
@@ -21,11 +22,11 @@ export const XsContainer = styled.div`
export const TooltipButton = styled.button`
width: 100%;
padding: 12px;
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 14px;
border-width: 0px;
border-radius: 20px;
font-weight: 700;
- background: #dfe3e6;
+ background: ${appColors.COMMON.SECONDARY_COLOR_7};
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
`;
diff --git a/src/app/components/CookieDialog/common/message.tsx b/src/app/components/CookieDialog/common/message.tsx
index bd02a5543..504dd3a0b 100644
--- a/src/app/components/CookieDialog/common/message.tsx
+++ b/src/app/components/CookieDialog/common/message.tsx
@@ -1,18 +1,19 @@
import React from "react";
-import styled from "styled-components/macro";
-import { useMediaQuery, Box } from "@material-ui/core";
import get from "lodash/get";
+import { appColors } from "app/theme";
+import styled from "styled-components/macro";
import { useCMSData } from "app/hooks/useCMSData";
+import { useMediaQuery, Box } from "@material-ui/core";
const Button = styled((props) => )`
- color: #fff;
+ color: ${appColors.COMMON.WHITE};
padding: 5px 16px;
line-height: 17px;
font-weight: bold;
border-style: none;
border-radius: 20px;
- background: #262c34;
text-transform: unset;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
&:hover {
@@ -54,7 +55,7 @@ export const Message = (props: MessageProps) => {
{
a {
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
}
@media (min-width: 960px) {
diff --git a/src/app/components/CookieDialog/index.tsx b/src/app/components/CookieDialog/index.tsx
index 6e8ca86a8..29543f706 100644
--- a/src/app/components/CookieDialog/index.tsx
+++ b/src/app/components/CookieDialog/index.tsx
@@ -1,4 +1,5 @@
import React, { useState } from "react";
+import { appColors } from "app/theme";
import styled from "styled-components/macro";
import useCookie from "@devhammed/use-cookie";
import Snackbar from "@material-ui/core/Snackbar";
@@ -11,7 +12,7 @@ const BaseSnackbar = styled((props) =>
)`
}
& [class*="MuiSnackbarContent-root"] {
- background: #f5f5f7;
+ background: ${appColors.COMMON.SECONDARY_COLOR_10};
border-radius: 21px;
box-shadow: 0 8px 17px -4px rgba(130, 142, 148, 0.35),
0 0 4px 0 rgba(130, 142, 148, 0.16), 0 0 2px 0 rgba(130, 142, 148, 0.12);
diff --git a/src/app/components/DatasetCarousel/index.tsx b/src/app/components/DatasetCarousel/index.tsx
deleted file mode 100644
index ca17814e3..000000000
--- a/src/app/components/DatasetCarousel/index.tsx
+++ /dev/null
@@ -1,388 +0,0 @@
-import React from "react";
-import get from "lodash/get";
-import { Link } from "react-router-dom";
-// @ts-ignore
-import Carousel from "react-grid-carousel";
-import { useMediaQuery } from "@material-ui/core";
-import { useCMSData } from "app/hooks/useCMSData";
-import { ArrowForwardIcon } from "app/assets/icons/ArrowForward";
-import { BudgetFlowPreview } from "app/assets/dataset-preview/budgetFlow";
-import { GrantsListPreview } from "app/assets/dataset-preview/grantsList";
-import { ResultsListPreview } from "app/assets/dataset-preview/resultsList";
-import { DocumentsTablePreview } from "app/assets/dataset-preview/documentsTable";
-import { EligibilityDotsPreview } from "app/assets/dataset-preview/eligibilityDots";
-import { AllocationsRadialPreview } from "app/assets/dataset-preview/allocationsRadial";
-import { InvestmentsTreemapPreview } from "app/assets/dataset-preview/investmentsTreemap";
-
-const griditem = (content: React.ReactElement, link: string) => (
-
-
div {
- font-weight: bold;
- margin-bottom: 10px;
- font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
- }
-
- > svg {
- width: 100%;
- height: calc(100% - 30px);
- }
-
- &:hover {
- border-color: #13183f;
- }
- `}
- >
- {content}
-
-
-);
-
-export function DatasetCarousel() {
- const isSmallScreen = useMediaQuery("(max-width: 960px)");
- const cmsData = useCMSData({ returnData: true });
-
- const fpText = {
- __html: get(
- cmsData,
- "componentsDatasetCarousel.financePledgesContributions",
- ""
- ),
- };
- const fsText = {
- __html: get(cmsData, "componentsDatasetCarousel.financeSignedAmounts", ""),
- };
- const fcText = {
- __html: get(cmsData, "componentsDatasetCarousel.financeCommitments", ""),
- };
- const fdText = {
- __html: get(cmsData, "componentsDatasetCarousel.financeDisbursements", ""),
- };
- const fbText = {
- __html: get(cmsData, "componentsDatasetCarousel.financeBudgets", ""),
- };
- const aeText = {
- __html: get(cmsData, "componentsDatasetCarousel.accessEligibility", ""),
- };
- const aaText = {
- __html: get(cmsData, "componentsDatasetCarousel.accessAllocations", ""),
- };
-
- return (
-
div {
- > div:nth-of-type(2) {
- margin: 0;
- }
- > div:nth-of-type(3) {
- padding-top: ${isSmallScreen ? "10px" : 0};
- }
- }
- `}
- >
-
svg {
- transform: rotate(-180deg);
- }
- `}
- >
-
-
- }
- arrowRight={
-
- }
- >
-
- {griditem(
- <>
-
-
- >,
- "/viz/pledges-contributions/treemap"
- )}
-
-
- {griditem(
- <>
-
-
- >,
- "/viz/signed/treemap"
- )}
-
-
- {griditem(
- <>
-
-
- >,
- "/viz/commitment/treemap"
- )}
-
-
- {griditem(
- <>
-
-
- >,
- "/viz/disbursements/treemap"
- )}
-
-
- {griditem(
- <>
-
-
- >,
- "/viz/budgets/flow"
- )}
-
-
- {griditem(
- <>
-
-
- >,
- "/viz/eligibility"
- )}
-
-
- {griditem(
- <>
-
-
- >,
- "/viz/allocations"
- )}
-
-
- {griditem(
- <>
-
- {get(cmsData, "componentsDatasetCarousel.grants", "")}
-
-
- >,
- "/grants"
- )}
-
-
- {griditem(
- <>
-
- {get(cmsData, "componentsDatasetCarousel.results", "")}
-
-
- >,
- "/results"
- )}
-
-
- {griditem(
- <>
-
- {get(cmsData, "componentsDatasetCarousel.documents", "")}
-
-
- >,
- "/documents"
- )}
-
- {/*
- {griditem(
- <>
-
- Finance · Budgets Time cycle
-
-
- >,
- "/viz/budgets/time-cycle"
- )}
- */}
- {/*
- {griditem(
- <>
-
- Finance · Budgets Map
-
-
- >,
- "/viz/budgets/map"
- )}
- */}
- {/*
- {griditem(
- <>
-
- Finance · Disbursements Time cycle
-
-
- >,
- "/viz/disbursements/time-cycle"
- )}
-
-
- {griditem(
- <>
-
- Finance · Disbursements Map
-
-
- >,
- "/viz/disbursements/map"
- )}
- */}
- {/*
- {griditem(
- <>
-
- Finance · Signed Time cycle
-
-
- >,
- "/viz/signed/time-cycle"
- )}
-
-
- {griditem(
- <>
-
- Finance · Signed Map
-
-
- >,
- "/viz/signed/map"
- )}
- */}
- {/*
- {griditem(
- <>
-
- Finance · Commitments Time cycle
-
-
- >,
- "/viz/commitment/time-cycle"
- )}
-
-
- {griditem(
- <>
-
- Finance · Commitments Map
-
-
- >,
- "/viz/commitment/map"
- )}
- */}
- {/*
- {griditem(
- <>
-
- Finance · Pledges & Contributions Time cycle
-
-
- >,
- "/viz/pledges-contributions/time-cycle"
- )}
-
-
- {griditem(
- <>
-
- Finance · Pledges & Contributions Map
-
-
- >,
- "/viz/pledges-contributions/map"
- )}
- */}
- {/*
- {griditem(
- <>
-
- Finance · Allocations Map
-
-
- >,
- "/viz/allocations/map"
- )}
- */}
-
-
- );
-}
diff --git a/src/app/components/DrilldownArrowSelector/index.tsx b/src/app/components/DrilldownArrowSelector/index.tsx
index 37b9f5f71..d64f3d870 100644
--- a/src/app/components/DrilldownArrowSelector/index.tsx
+++ b/src/app/components/DrilldownArrowSelector/index.tsx
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from "react";
+import { appColors } from "app/theme";
import findIndex from "lodash/findIndex";
import { css } from "styled-components/macro";
import IconChevronRight from "app/assets/icons/IconChevronRight";
@@ -8,7 +9,7 @@ import IconChevronRight from "app/assets/icons/IconChevronRight";
export const styles = {
container: css`
display: flex;
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 12px;
font-weight: 400;
text-align: center;
@@ -23,7 +24,7 @@ export const styles = {
svg {
path {
- fill: #262c34;
+ fill: ${appColors.COMMON.PRIMARY_COLOR_1};
}
}
diff --git a/src/app/components/Dropdown/index.tsx b/src/app/components/Dropdown/index.tsx
index 44206edda..1e465d12d 100644
--- a/src/app/components/Dropdown/index.tsx
+++ b/src/app/components/Dropdown/index.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { appColors } from "app/theme";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import InputBase from "@material-ui/core/InputBase";
@@ -17,9 +18,9 @@ const BootstrapInput = withStyles((theme: Theme) =>
outline: "none",
position: "relative",
borderRadius: "20px",
- backgroundColor: "#DFE3E6",
+ backgroundColor: appColors.COMMON.SECONDARY_COLOR_7,
textTransform: "capitalize",
- border: "1px solid #ced4da",
+ border: `1px solid ${appColors.COMMON.SECONDARY_COLOR_10}`,
padding: "10px 26px 10px 12px",
fontFamily: "GothamNarrow-Book",
transition: theme.transitions.create(["border-color", "box-shadow"]),
diff --git a/src/app/components/InformationPanel/index.tsx b/src/app/components/InformationPanel/index.tsx
deleted file mode 100644
index 9cba07e2d..000000000
--- a/src/app/components/InformationPanel/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React from "react";
-import Slide from "@material-ui/core/Slide";
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
-
-interface InformationPanelProps {
- open: boolean;
- buttonLabel?: string;
- onButtonClick: () => void;
- children: React.ReactNode;
-}
-
-export function InformationPanel(props: InformationPanelProps) {
- const cmsData = useCMSData({ returnData: true });
-
- return (
- {
- if (props.open) {
- props.onButtonClick();
- }
- }}
- >
-
-
-
-
props.onButtonClick()}
- >
- {props.buttonLabel
- ? props.buttonLabel
- : get(cmsData, "componentsInformationPanel.defaultLabel", "")}
-
- {props.children}
-
-
-
-
- );
-}
diff --git a/src/app/components/Mobile/AppBarSearch/index.tsx b/src/app/components/Mobile/AppBarSearch/index.tsx
index 89ce8b1ac..a14b21ca4 100644
--- a/src/app/components/Mobile/AppBarSearch/index.tsx
+++ b/src/app/components/Mobile/AppBarSearch/index.tsx
@@ -14,6 +14,7 @@ import {
/* project */
import { SearchLayout } from "app/components/Search/layout";
import { SearchResultsTabModel } from "app/components/Search/components/results/data";
+import { appColors } from "app/theme";
export function MobileAppbarSearch() {
const history = useHistory();
@@ -87,7 +88,7 @@ export function MobileAppbarSearch() {
`}
onClick={() => setOpen(!open)}
>
-
+
)}
{open && (
diff --git a/src/app/components/Mobile/BottomNavigation/index.tsx b/src/app/components/Mobile/BottomNavigation/index.tsx
index 5f350d4f3..f82f6eef4 100644
--- a/src/app/components/Mobile/BottomNavigation/index.tsx
+++ b/src/app/components/Mobile/BottomNavigation/index.tsx
@@ -1,5 +1,6 @@
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import findIndex from "lodash/findIndex";
import { useHistory } from "react-router-dom";
import HomeIcon from "@material-ui/icons/Home";
@@ -17,7 +18,7 @@ const useStyles = makeStyles({
zIndex: 100,
width: "100%",
position: "fixed",
- borderTop: "1px solid #dfe3e6",
+ borderTop: `1px solid ${appColors.COMMON.SECONDARY_COLOR_7}`,
},
});
@@ -97,10 +98,14 @@ export function MobileBottomNavigation() {
label={btn.label}
css={`
&& {
- color: ${isActive ? "#262C34" : "#70777e"};
+ color: ${isActive
+ ? appColors.COMMON.PRIMARY_COLOR_1
+ : appColors.COMMON.SECONDARY_COLOR_2};
svg {
- fill: ${isActive ? "#262C34" : "#70777e"};
+ fill: ${isActive
+ ? appColors.COMMON.PRIMARY_COLOR_1
+ : appColors.COMMON.SECONDARY_COLOR_2};
}
}
`}
diff --git a/src/app/components/Mobile/ViewsControl/index.tsx b/src/app/components/Mobile/ViewsControl/index.tsx
index f0a7241e9..b66e01581 100644
--- a/src/app/components/Mobile/ViewsControl/index.tsx
+++ b/src/app/components/Mobile/ViewsControl/index.tsx
@@ -1,5 +1,6 @@
import React from "react";
import find from "lodash/find";
+import { appColors } from "app/theme";
import Button from "@material-ui/core/Button";
import MenuItem from "@material-ui/core/MenuItem";
import { withStyles } from "@material-ui/core/styles";
@@ -23,19 +24,22 @@ const StyledMenu = withStyles({
paper: {
minWidth: 220,
borderRadius: 10,
- border: "1px solid #d3d4d5",
+ border: `1px solid ${appColors.MOBILE_VIEWS_CONTROL.MENU_PAPER_BORDER_COLOR}`,
"&::-webkit-scrollbar": {
width: 5,
borderRadius: 10,
- background: "#262c34",
+ background:
+ appColors.MOBILE_VIEWS_CONTROL.MENU_SCROLLBAR_BACKGROUND_COLOR,
},
"&::-webkit-scrollbar-track": {
borderRadius: 10,
- background: "#dfe3e6",
+ background:
+ appColors.MOBILE_VIEWS_CONTROL.MENU_SCROLLBAR_TRACK_BACKGROUND_COLOR,
},
"&::-webkit-scrollbar-thumb": {
borderRadius: 10,
- background: "#262c34",
+ background:
+ appColors.MOBILE_VIEWS_CONTROL.MENU_SCROLLBAR_THUMB_BACKGROUND_COLOR,
},
},
list: {
@@ -64,11 +68,11 @@ export const StyledMenuItem = withStyles(() => ({
padding: 0,
minHeight: 0,
width: "100%",
- borderBottom: "1px solid #DFE3E6",
+ borderBottom: `1px solid ${appColors.MOBILE_VIEWS_CONTROL.MENU_ITEM_BORDER_COLOR}`,
"& a": {
width: "100%",
fontSize: "14px",
- color: "#262c34",
+ color: appColors.MOBILE_VIEWS_CONTROL.MENU_ITEM_COLOR,
padding: "10px 12px",
textDecoration: "none",
},
@@ -170,13 +174,15 @@ export function MobileViewControl(props: MobileViewControlProps) {
font-weight: bold;
padding: 6px 16px;
border-radius: 20px;
- background: #dfe3e6;
text-transform: capitalize;
max-width: calc(50vw - 32px);
font-family: "GothamNarrow-Bold", sans-serif;
+ background: ${appColors.MOBILE_VIEWS_CONTROL
+ .BUTTON_BACKGROUND_COLOR};
&:hover {
- background: #dfe3e6;
+ background: ${appColors.MOBILE_VIEWS_CONTROL
+ .BUTTON_BACKGROUND_HOVER_COLOR};
}
svg {
@@ -184,7 +190,7 @@ export function MobileViewControl(props: MobileViewControlProps) {
transition: all 0.2s ease-in-out;
transform: rotate(${anchorEl ? "180" : "0"}deg);
> path {
- fill: #262c34;
+ fill: ${appColors.COMMON.SECONDARY_COLOR_7};
}
}
`}
@@ -252,11 +258,14 @@ export function MobileViewControl(props: MobileViewControlProps) {
? "border-radius: 0 20px 20px 0;"
: ""}
background: ${selectedView === option.value
- ? "#262C34"
- : "#dfe3e6"};
+ ? appColors.MOBILE_VIEWS_CONTROL.LINK_BACKGROUND_COLOR
+ : appColors.MOBILE_VIEWS_CONTROL
+ .LINK_BACKGROUND_SELECTED_COLOR};
path {
- fill: ${selectedView === option.value ? "#fff" : "#868A9D"};
+ fill: ${selectedView === option.value
+ ? appColors.MOBILE_VIEWS_CONTROL.LINK_ICON_COLOR
+ : appColors.MOBILE_VIEWS_CONTROL.LINK_ICON_SELECTED_COLOR};
}
`}
>
@@ -277,14 +286,17 @@ export function MobileViewControl(props: MobileViewControlProps) {
flex-direction: row;
border-radius: 20px;
align-items: center;
- color: ${selectedView === option.value ? "#fff" : "#262C34"};
+ color: ${selectedView === option.value
+ ? appColors.MOBILE_VIEWS_CONTROL.BUTTON_SELECTED_COLOR
+ : appColors.MOBILE_VIEWS_CONTROL.BUTTON_COLOR};
${index === 0 ? "border-radius: 20px 0 0 20px;" : ""}
${index === controlItems.views.length - 1
? "border-radius: 0 20px 20px 0;"
: ""}
background: ${selectedView === option.value
- ? "#262C34"
- : "#dfe3e6"};
+ ? appColors.MOBILE_VIEWS_CONTROL
+ .BUTTON_BACKGROUND_SELECTED_COLOR
+ : appColors.MOBILE_VIEWS_CONTROL.BUTTON_BACKGROUND_COLOR};
`}
>
{option.label}
diff --git a/src/app/components/PageHeader/components/filterbar/common/Chip.tsx b/src/app/components/PageHeader/components/filterbar/common/Chip.tsx
index a37eaef83..728065d19 100644
--- a/src/app/components/PageHeader/components/filterbar/common/Chip.tsx
+++ b/src/app/components/PageHeader/components/filterbar/common/Chip.tsx
@@ -1,5 +1,6 @@
import React from "react";
import sortBy from "lodash/sortBy";
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
import { Chip as MUIChip } from "@material-ui/core";
import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
@@ -8,12 +9,12 @@ import { ChipModel } from "app/components/PageHeader/components/filterbar/data";
const chipstyle = css`
&& {
height: unset;
- color: #262c34;
+ color: ${appColors.MOBILE_FILTER_BAR.CHIP_COLOR};
font-size: 14px;
min-height: 32px;
line-height: 17px;
font-weight: bold;
- background-color: #dfe3e6;
+ background-color: ${appColors.MOBILE_FILTER_BAR.CHIP_BACKGROUND_COLOR};
.MuiChip-label {
padding-top: 7px;
@@ -22,7 +23,7 @@ const chipstyle = css`
}
.MuiChip-deleteIcon {
- color: #262c34;
+ color: ${appColors.MOBILE_FILTER_BAR.CHIP_DELETE_BUTTON_COLOR};
}
.MuiChip-label {
diff --git a/src/app/components/PageHeader/components/filterbar/styles.ts b/src/app/components/PageHeader/components/filterbar/styles.ts
index 5517f5d6f..d9ae957c7 100644
--- a/src/app/components/PageHeader/components/filterbar/styles.ts
+++ b/src/app/components/PageHeader/components/filterbar/styles.ts
@@ -1,3 +1,4 @@
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
export const styles = {
@@ -7,8 +8,8 @@ export const styles = {
display: flex;
min-height: 52px;
padding: 10px 20px;
- background: #262c34;
align-items: center;
+ background: ${appColors.MOBILE_FILTER_BAR.CONTAINER_BACKGROUND_COLOR};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -19,9 +20,9 @@ export const styles = {
}
`,
label: css`
- color: #fff;
min-width: 80px;
font-size: 12px;
+ color: ${appColors.MOBILE_FILTER_BAR.LABEL_COLOR};
`,
chipsContainer: css`
gap: 12px;
@@ -43,15 +44,17 @@ export const styles = {
&::-webkit-scrollbar {
width: 6px;
height: 2px;
- background: #ededf6;
+ background: ${appColors.MOBILE_FILTER_BAR.SCROLLBAR_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-track {
border-radius: 4px;
- background: #fff;
+ background: ${appColors.MOBILE_FILTER_BAR
+ .SCROLLBAR_TRACK_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background: #262c34;
+ background: ${appColors.MOBILE_FILTER_BAR
+ .SCROLLBAR_THUMB_BACKGROUND_COLOR};
}
}
`,
diff --git a/src/app/components/PageHeader/components/tabs/index.tsx b/src/app/components/PageHeader/components/tabs/index.tsx
index 8e73e32f5..22f8b1ff9 100644
--- a/src/app/components/PageHeader/components/tabs/index.tsx
+++ b/src/app/components/PageHeader/components/tabs/index.tsx
@@ -1,8 +1,8 @@
import React from "react";
import find from "lodash/find";
import filter from "lodash/filter";
-import { ProjectPalette } from "app/theme";
import { css } from "styled-components/macro";
+import { appColors, ProjectPalette } from "app/theme";
import { NavLink, useLocation, useParams } from "react-router-dom";
import { StyledMenu, StyledMenuItem } from "app/components/AppBar";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
@@ -58,15 +58,15 @@ const styles = {
&::-webkit-scrollbar {
width: 1px;
height: 3px;
- background: #ededf6;
+ background: ${appColors.TABS.SCROLLBAR_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-track {
border-radius: 4px;
- background: #ededf6;
+ background: ${appColors.TABS.SCROLLBAR_TRACK_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background: #2e4063;
+ background: ${appColors.TABS.SCROLLBAR_THUMB_BACKGROUND_COLOR};
}
`,
tabcss: (active?: boolean) => css`
@@ -75,7 +75,9 @@ const styles = {
margin-right: 1px;
align-items: center;
transition: background 0.2s ease-in-out;
- background: ${active ? "#262C34" : "#C7CDD1"};
+ background: ${active
+ ? appColors.TABS.ITEM_BACKGROUND_ACTIVE_COLOR
+ : appColors.TABS.ITEM_BACKGROUND_HOVER_COLOR};
:first-of-type {
border-radius: 15px 0px 0px 0px;
@@ -92,12 +94,14 @@ const styles = {
@media (hover: hover) and (pointer: fine) {
&:hover {
- background: #262c34;
+ background: ${appColors.TABS.ITEM_BACKGROUND_HOVER_COLOR};
a,
div {
- color: #fff;
+ color: ${appColors.TABS.LINK_COLOR};
cursor: pointer;
- text-shadow: 0 0 0.9px #fff, 0 0 0.9px #fff, 0 0 0.9px #fff;
+ text-shadow: 0 0 0.9px ${appColors.TABS.LINK_ACTIVE_COLOR},
+ 0 0 0.9px ${appColors.TABS.LINK_ACTIVE_COLOR},
+ 0 0 0.9px ${appColors.TABS.LINK_ACTIVE_COLOR};
}
}
}
@@ -108,9 +112,11 @@ const styles = {
padding: 10px 15px;
white-space: nowrap;
text-decoration: none;
- color: ${active ? "#fff" : "#13183F"};
+ color: ${active
+ ? appColors.TABS.LINK_ACTIVE_COLOR
+ : appColors.TABS.LINK_COLOR};
text-shadow: ${active
- ? "0 0 0.9px #fff, 0 0 0.9px #fff, 0 0 0.9px #fff"
+ ? `0 0 0.9px ${appColors.TABS.LINK_ACTIVE_COLOR}, 0 0 0.9px ${appColors.TABS.LINK_ACTIVE_COLOR}, 0 0 0.9px ${appColors.TABS.LINK_ACTIVE_COLOR}`
: "none"};
}
@@ -261,13 +267,13 @@ function PageHeaderTabWDropdown(props: TabProps) {
border-bottom-style: none;
> a {
- background: #c7cdd1;
+ background: ${appColors.TABS.ITEM_BACKGROUND_COLOR};
${tab.isActive &&
`
- color: #fff;
+ color: ${appColors.TABS.LINK_ACTIVE_COLOR};
font-weight: bold;
- background: #262c34;
+ background: ${appColors.TABS.ITEM_BACKGROUND_ACTIVE_COLOR};
transition: background 0.2s ease-in-out;
font-family: "GothamNarrow-Bold", "Helvetica Neue",
sans-serif;
@@ -275,9 +281,9 @@ function PageHeaderTabWDropdown(props: TabProps) {
@media (min-width: 768px) {
&:hover {
- color: #fff;
+ color: ${appColors.TABS.LINK_HOVER_COLOR};
font-weight: bold;
- background: #262c34;
+ background: ${appColors.TABS.ITEM_BACKGROUND_HOVER_COLOR};
transition: background 0.2s ease-in-out;
font-family: "GothamNarrow-Bold", "Helvetica Neue",
sans-serif;
diff --git a/src/app/components/PageHeader/index.tsx b/src/app/components/PageHeader/index.tsx
index 2e0f9d352..8bc0b59d5 100644
--- a/src/app/components/PageHeader/index.tsx
+++ b/src/app/components/PageHeader/index.tsx
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from "react";
+import { appColors } from "app/theme";
import Grid from "@material-ui/core/Grid";
import { css } from "styled-components/macro";
import { useHistory } from "react-router-dom";
@@ -28,7 +29,7 @@ const styles = {
display: flex;
position: sticky;
padding-top: 10px;
- background: #dfe3e6;
+ background: ${appColors.PAGE_HEADER.CONTAINER_BACKGROUND_COLOR};
flex-direction: column;
@media (min-width: 768px) {
@@ -46,7 +47,7 @@ const styles = {
`,
title: (bigPadding: boolean) => css`
width: 100%;
- color: #262c34;
+ color: ${appColors.PAGE_HEADER.TITLE_COLOR};
font-size: 18px;
overflow: hidden;
line-height: 24px;
diff --git a/src/app/components/PerformanceFrameworkExpandedView/components/ArrowSelector/index.tsx b/src/app/components/PerformanceFrameworkExpandedView/components/ArrowSelector/index.tsx
index ab9d50101..065341387 100644
--- a/src/app/components/PerformanceFrameworkExpandedView/components/ArrowSelector/index.tsx
+++ b/src/app/components/PerformanceFrameworkExpandedView/components/ArrowSelector/index.tsx
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from "react";
+import { appColors } from "app/theme";
import findIndex from "lodash/findIndex";
import IconButton from "@material-ui/core/IconButton";
import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
@@ -48,7 +49,7 @@ export function ArrowSelector(props: ArrowSelectorProps) {
}
> div {
- color: #262c34;
+ color: ${appColors.NETWORK.EXPANDED_VIEW_SELECTOR_COLOR};
font-size: 12px;
max-width: 150px;
line-height: 15px;
diff --git a/src/app/components/PerformanceFrameworkExpandedView/components/InterventionsTable/index.tsx b/src/app/components/PerformanceFrameworkExpandedView/components/InterventionsTable/index.tsx
index 7fce8d903..cee4f04e3 100644
--- a/src/app/components/PerformanceFrameworkExpandedView/components/InterventionsTable/index.tsx
+++ b/src/app/components/PerformanceFrameworkExpandedView/components/InterventionsTable/index.tsx
@@ -1,12 +1,12 @@
import React from "react";
+import get from "lodash/get";
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
+import { useCMSData } from "app/hooks/useCMSData";
import {
- PFIndicatorResult,
PFIndicatorResultIntervention,
PFIndicatorResultInterventionValue,
-} from "../../data";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
+} from "app/components/PerformanceFrameworkExpandedView/data";
const styles = {
table: css`
@@ -18,8 +18,8 @@ const styles = {
th {
padding: 9px 0;
text-align: start;
- border-top: 1px solid #adb5bd;
- border-bottom: 1px solid #adb5bd;
+ border-top: 1px solid ${appColors.NETWORK.TABLE_BORDER_COLOR};
+ border-bottom: 1px solid ${appColors.NETWORK.TABLE_BORDER_COLOR};
}
`,
tablebody: css`
@@ -27,8 +27,8 @@ const styles = {
padding: 5px;
font-size: 10px;
width: calc(100% / 3);
- border-top: 1px solid #adb5bd;
- border-bottom: 1px solid #adb5bd;
+ border-top: 1px solid ${appColors.NETWORK.TABLE_BORDER_COLOR};
+ border-bottom: 1px solid ${appColors.NETWORK.TABLE_BORDER_COLOR};
}
`,
};
@@ -46,9 +46,27 @@ export function InterventionsTable(props: PFIndicatorResultIntervention) {
- {get(cmsData, "componentsPerformanceFrameworkComponents.interventionTableInterventions", "")} |
- {get(cmsData, "componentsPerformanceFrameworkComponents.interventionTableAchievementRate", "")} |
- {get(cmsData, "componentsPerformanceFrameworkComponents.interventionTableValueText", "")} |
+
+ {get(
+ cmsData,
+ "componentsPerformanceFrameworkComponents.interventionTableInterventions",
+ ""
+ )}
+ |
+
+ {get(
+ cmsData,
+ "componentsPerformanceFrameworkComponents.interventionTableAchievementRate",
+ ""
+ )}
+ |
+
+ {get(
+ cmsData,
+ "componentsPerformanceFrameworkComponents.interventionTableValueText",
+ ""
+ )}
+ |
diff --git a/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx b/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx
index 44d934e49..809ec6af2 100644
--- a/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx
+++ b/src/app/components/PerformanceFrameworkExpandedView/components/ResultsTable/index.tsx
@@ -1,5 +1,6 @@
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
import Button from "@material-ui/core/Button";
import { useCMSData } from "app/hooks/useCMSData";
@@ -29,8 +30,8 @@ const styles = {
th {
padding: 9px 0;
text-align: start;
- border-top: 1px solid #adb5bd;
- border-bottom: 1px solid #adb5bd;
+ border-top: 1px solid ${appColors.NETWORK.TABLE_BORDER_COLOR};
+ border-bottom: 1px solid ${appColors.NETWORK.TABLE_BORDER_COLOR};
}
`,
tablebody: css`
@@ -147,7 +148,9 @@ function ResultsTableRow(props: ResultsTableRowProps) {
return (
{props.type} |
@@ -200,12 +203,9 @@ function ResultsTableRow(props: ResultsTableRowProps) {
width: 12px;
height: 12px;
border-radius: 50%;
- background: ${props.color === "#E2E2E2"
- ? `repeating-linear-gradient(
- -45deg,
- #262c34 0 0.5px,
- #fff 1.5px 2px
- )`
+ background: ${props.color ===
+ appColors.COMMON.SELECTED_ITEM_VALUE_COLOR
+ ? appColors.NETWORK.TABLE_CIRCLE_INDICATOR_BACKGROUND_COLOR
: props.color};
`}
/>
@@ -289,7 +289,7 @@ function MobileResultsTable(props: PFIndicator) {
css={`
font-size: 12px;
padding-bottom: 15px;
- border-bottom: 1px solid #262c34;
+ border-bottom: 1px solid ${appColors.COMMON.PRIMARY_COLOR_1};
`}
>
Indicator: {props.name}
@@ -425,12 +425,9 @@ function MobileResultsTable(props: PFIndicator) {
width: 12px;
height: 12px;
border-radius: 50%;
- background: ${selectedItem.color === "#E2E2E2"
- ? `repeating-linear-gradient(
- -45deg,
- #262c34 0 0.5px,
- #fff 1.5px 2px
- )`
+ background: ${selectedItem.color ===
+ appColors.COMMON.SELECTED_ITEM_VALUE_COLOR
+ ? appColors.NETWORK.TABLE_CIRCLE_INDICATOR_BACKGROUND_COLOR
: selectedItem.color};
`}
/>
@@ -448,15 +445,15 @@ function MobileResultsTable(props: PFIndicator) {
css={`
width: 100%;
margin-top: 20px;
- background: #dfe3e6;
+ background: ${appColors.NETWORK.TOOLTIP_BUTTON_BACKGROUND_COLOR};
border-radius: 22px;
&:hover {
- background: #dfe3e6;
+ background: ${appColors.NETWORK.TOOLTIP_BUTTON_BACKGROUND_COLOR};
}
> span {
- color: #262c34;
+ color: ${appColors.NETWORK.TOOLTIP_BUTTON_TEXT_COLOR}
font-size: 14px;
font-weight: bold;
text-transform: none;
diff --git a/src/app/components/PerformanceFrameworkExpandedView/components/ToolTip/index.tsx b/src/app/components/PerformanceFrameworkExpandedView/components/ToolTip/index.tsx
index 06249c387..7ea466432 100644
--- a/src/app/components/PerformanceFrameworkExpandedView/components/ToolTip/index.tsx
+++ b/src/app/components/PerformanceFrameworkExpandedView/components/ToolTip/index.tsx
@@ -1,8 +1,11 @@
import React from "react";
+import get from "lodash/get";
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
import { IconButton } from "@material-ui/core";
import Tooltip from "@material-ui/core/Tooltip";
import CloseIcon from "@material-ui/icons/Close";
+import { useCMSData } from "app/hooks/useCMSData";
import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
import { ArrowForwardIcon } from "app/assets/icons/ArrowForward";
import {
@@ -10,8 +13,6 @@ import {
PFIndicatorResultDisaggregation,
PFIndicatorResultDisaggregationGroup,
} from "app/components/PerformanceFrameworkExpandedView/data";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
const styles = {
container: (showAggrs: boolean) => css`
@@ -19,12 +20,14 @@ const styles = {
width: 267px;
display: flex;
padding: 15px;
- color: #262c34;
+ color: ${appColors.NETWORK.TOOLTIP_CONTAINER_COLOR};
font-size: 12px;
position: relative;
border-radius: 20px;
flex-direction: column;
- background: ${showAggrs ? "#262C34" : "#fff"};
+ background: ${showAggrs
+ ? appColors.NETWORK.TOOLTIP_CONTAINER_BACKGROUND_COLOR_1
+ : appColors.NETWORK.TOOLTIP_CONTAINER_BACKGROUND_COLOR_2};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -44,7 +47,7 @@ const styles = {
bottombtn: (showAggrs: boolean) => css`
left: 0;
gap: 15px;
- color: #fff;
+ color: ${appColors.NETWORK.TOOLTIP_BOTTOM_BUTTON_TEXT_COLOR};
width: 267px;
display: flex;
cursor: pointer;
@@ -52,8 +55,9 @@ const styles = {
padding: 10px 15px;
flex-direction: row;
align-items: center;
- background: #262c34;
- border-bottom: 1px solid #fff;
+ background: ${appColors.NETWORK.TOOLTIP_BOTTOM_BUTTON_BACKGROUND_COLOR};
+ border-bottom: 1px solid
+ ${appColors.NETWORK.TOOLTIP_BOTTOM_BUTTON_BORDER_COLOR};
${showAggrs ? "top" : "bottom"}: 0;
border-bottom-style: ${showAggrs ? "solid" : "none"};
border-radius: ${showAggrs ? "20px 20px 0px 0px" : "0px 0px 20px 20px"};
@@ -70,7 +74,7 @@ const styles = {
transform: rotate(${showAggrs ? 180 : 0}deg);
> path {
- fill: #fff;
+ fill: ${appColors.COMMON.WHITE};
}
}
@@ -85,7 +89,7 @@ const styles = {
svg {
path {
- fill: #fff;
+ fill: ${appColors.COMMON.WHITE};
}
}
}
@@ -106,11 +110,11 @@ const styles = {
> hr {
width: 100%;
- border-color: #c7cdd1;
+ border-color: ${appColors.COMMON.SECONDARY_COLOR_11};
}
> div {
- color: #fff;
+ color: ${appColors.COMMON.WHITE};
display: flex;
flex-direction: row;
@@ -130,7 +134,7 @@ const styles = {
transform: scale(0.7);
path {
- fill: #fff;
+ fill: ${appColors.COMMON.WHITE};
}
}
}
diff --git a/src/app/components/PerformanceFrameworkExpandedView/data.ts b/src/app/components/PerformanceFrameworkExpandedView/data.ts
index 02b326ebc..357234ffa 100644
--- a/src/app/components/PerformanceFrameworkExpandedView/data.ts
+++ b/src/app/components/PerformanceFrameworkExpandedView/data.ts
@@ -66,427 +66,3 @@ export interface PerformanceFrameworkExpandedViewProps {
setSelectedModule: (value: string) => void;
interventions: PFIndicatorResultIntervention[];
}
-
-export const mockdata: PFIndicatorSet[] = [
- {
- name: "Coverage / Output indicator",
- modules: [
- {
- name: "Differentiated HIV Testing Services",
- indicators: [
- {
- name:
- "Number of people who were tested for HIV and received their results during the reporting period",
- results: [
- {
- type: "Percentage",
- baseline: "60%",
- target: "60%",
- result: "60%",
- achievementRate: "60%",
- color: "#FFD646",
- period: "01-01-2019:01-01-2020",
- isReversed: "No",
- aggregationType: "Non cumulative",
- coverage: "National",
- disaggregations: [
- {
- name: "Age",
- values: [
- {
- category: "<15",
- baseline: {
- numerator: 111,
- denominator: 0,
- percentage: null,
- },
- reported: {
- numerator: 111,
- denominator: 0,
- percentage: null,
- },
- },
- ],
- },
- ],
- },
- {
- type: "Percentage",
- baseline: "90%",
- target: "90%",
- result: "90%",
- achievementRate: "90%",
- color: "#11AD6B",
- period: "01-01-2018:01-01-2019",
- isReversed: "No",
- aggregationType: "Non cumulative",
- coverage: "National",
- disaggregations: [],
- },
- ],
- },
- ],
- interventions: [
- {
- name: "Service delivery infrastructure",
- values: [
- {
- name:
- "Contracts for the work and supervision of the refurbishment of the national reference laboratory (LNR)",
- achievementRate: null,
- valueText:
- "Tender for works and supervision of the refurbishment of the national reference laboratory (LNR)",
- },
- ],
- },
- ],
- },
- ],
- },
-];
-
-export const expandindicatorsmockdata: PFIndicator[] = [
- {
- name:
- "Percentage of HIV-positive pregnant women who received antiretrovirals to reduce the risk of mother-to-child transmission",
- results: [
- {
- type: "Percentage",
- baseline: "59.3%",
- target: "92%",
- result: "90.6%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2017-07-01:2017-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "59.3%",
- target: "92%",
- result: "102.8%",
- achievementRate: 1.12,
- color: "#97ff46",
- period: "2017-01-01:2017-06-30",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "59.3%",
- target: "82%",
- result: "88.5%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2016-07-01:2016-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "59.3%",
- target: "82%",
- result: "84%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2016-01-01:2016-06-30",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "59.3%",
- target: "73%",
- result: "86.4%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2015-07-01:2015-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- ],
- },
- {
- name: "Percentage of pregnant women who know their HIV status",
- results: [
- {
- type: "Percentage",
- baseline: "0.62%",
- target: "82%",
- result: "70.8%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2017-07-01:2017-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [
- {
- name: "HIV test status",
- values: [
- {
- category: "Known positive HIV infection at ANC",
- baseline: {
- numerator: 5106,
- denominator: 824668,
- percentage: 0.62,
- },
- reported: {
- numerator: 736321,
- denominator: 1040504,
- percentage: 70.8,
- },
- },
- ],
- },
- ],
- },
- {
- type: "Percentage",
- baseline: "0.62%",
- target: "82%",
- result: "68.5%",
- achievementRate: 0.84,
- color: "#daff46",
- period: "2017-01-01:2017-06-30",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [
- {
- name: "HIV test status",
- values: [
- {
- category: "Known positive HIV infection at ANC",
- baseline: {
- numerator: 5106,
- denominator: 824668,
- percentage: 0.62,
- },
- reported: {
- numerator: 356268,
- denominator: 520252,
- percentage: 68.5,
- },
- },
- ],
- },
- ],
- },
- {
- type: "Percentage",
- baseline: "0.62%",
- target: "81.1%",
- result: "73.1%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2016-07-01:2016-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [
- {
- name: "HIV test status",
- values: [
- {
- category: "Known positive HIV infection at ANC",
- baseline: {
- numerator: 5106,
- denominator: 824668,
- percentage: 0.62,
- },
- reported: {
- numerator: 737430,
- denominator: 1008823,
- percentage: 73.1,
- },
- },
- ],
- },
- ],
- },
- {
- type: "Percentage",
- baseline: "0.62%",
- target: "81.1%",
- result: "72%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2016-01-01:2016-06-30",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [
- {
- name: "HIV test status",
- values: [
- {
- category: "Known positive HIV infection at ANC",
- baseline: {
- numerator: 5106,
- denominator: 824668,
- percentage: 0.62,
- },
- reported: {
- numerator: 363299,
- denominator: 504412,
- percentage: 72,
- },
- },
- ],
- },
- ],
- },
- {
- type: "Percentage",
- baseline: "0.62%",
- target: "77.6%",
- result: "73.8%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2015-07-01:2015-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [
- {
- name: "HIV test status",
- values: [
- {
- category: "Known positive HIV infection at ANC",
- baseline: {
- numerator: 5106,
- denominator: 824668,
- percentage: 0.62,
- },
- reported: {
- numerator: 726789,
- denominator: 984372,
- percentage: 73.8,
- },
- },
- ],
- },
- ],
- },
- ],
- },
- {
- name:
- "Percentage of infants born to HIV-positive women receiving a virological test for HIV within 2 months of birth",
- results: [
- {
- type: "Percentage",
- baseline: "53.6%",
- target: "70%",
- result: "37.5%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2017-07-01:2017-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "53.6%",
- target: "70%",
- result: "36.1%",
- achievementRate: 0.52,
- color: "#ffaa46",
- period: "2017-01-01:2017-06-30",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "53.6%",
- target: "65%",
- result: "34.8%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2016-07-01:2016-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "53.6%",
- target: "60%",
- result: "54.5%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2015-07-01:2015-12-31",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- {
- type: "Percentage",
- baseline: "53.6%",
- target: "65%",
- result: "29.1%",
- achievementRate: null,
- color: "#E2E2E2",
- period: "2016-01-01:2016-06-30",
- isReversed: "No",
- aggregationType: "Cumulative annually",
- coverage: "National",
- disaggregations: [],
- },
- ],
- },
-];
-
-export const expandinterventionsmockdata: PFIndicatorResultIntervention[] = [
- {
- name:
- "Ensure the supervision of community service providers and primary healthcare centers (CSPS) (50% of sites performing poorly) by the District Team each semester",
- values: [
- {
- name: "Prong 3: Preventing vertical HIV transmission",
- achievementRate: null,
- valueText:
- "Analysis each semester by the SR and the PR of the supervision reports",
- },
- {
- name: "Prong 3: Preventing vertical HIV transmission",
- achievementRate: null,
- valueText: "Supervisions carried out",
- },
- {
- name: "Prong 3: Preventing vertical HIV transmission",
- achievementRate: null,
- valueText:
- "Identification, each semester, of CSPS/sites that are performing poorly",
- },
- {
- name: "Prong 3: Preventing vertical HIV transmission",
- achievementRate: null,
- valueText: "Programming of the supervisions made",
- },
- {
- name: "Prong 3: Preventing vertical HIV transmission",
- achievementRate: null,
- valueText: "Completed",
- },
- ],
- },
-];
diff --git a/src/app/components/PerformanceFrameworkExpandedView/index.tsx b/src/app/components/PerformanceFrameworkExpandedView/index.tsx
index cb51d13ec..5f7cf3230 100644
--- a/src/app/components/PerformanceFrameworkExpandedView/index.tsx
+++ b/src/app/components/PerformanceFrameworkExpandedView/index.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
import { ResultsTable } from "app/components/PerformanceFrameworkExpandedView/components/ResultsTable";
import { ArrowSelector } from "app/components/PerformanceFrameworkExpandedView/components/ArrowSelector";
@@ -57,15 +58,18 @@ const styles = {
&::-webkit-scrollbar {
width: 1px;
height: 3px;
- background: #ededf6;
+ background: ${appColors.NETWORK
+ .EXPANDED_VIEW_TABS_LIST_SCROLLBAR_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-track {
border-radius: 4px;
- background: #ededf6;
+ background: ${appColors.NETWORK
+ .EXPANDED_VIEW_TABS_LIST_SCROLLBAR_TRACK_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background: #2e4063;
+ background: ${appColors.NETWORK
+ .EXPANDED_VIEW_TABS_LIST_SCROLLBAR_THUMB_BACKGROUND_COLOR};
}
`,
tabcss: (active: boolean) => css`
@@ -78,10 +82,14 @@ const styles = {
white-space: nowrap;
align-items: center;
text-decoration: none;
- color: ${active ? "#fff" : "#13183F"};
+ color: ${active
+ ? appColors.NETWORK.EXPANDED_VIEW_TAB_ITEM_ACTIVE_COLOR
+ : appColors.NETWORK.EXPANDED_VIEW_TAB_ITEM_COLOR};
transition: background 0.2s ease-in-out;
font-weight: ${active ? "bold" : "normal"};
- background: ${active ? "#262C34" : "#C7CDD1"};
+ background: ${active
+ ? appColors.NETWORK.EXPANDED_VIEW_TAB_ITEM_BACKGROUND_ACTIVE_COLOR
+ : appColors.NETWORK.EXPANDED_VIEW_TAB_ITEM_BACKGROUND_COLOR};
font-family: "GothamNarrow-${active ? "Bold" : "Book"}", "Helvetica Neue",
sans-serif;
@@ -95,9 +103,9 @@ const styles = {
}
&:hover {
- color: #fff;
+ color: ${appColors.NETWORK.EXPANDED_VIEW_TAB_ITEM_COLOR};
font-weight: bold;
- background: #262c34;
+ background: ${appColors.NETWORK.EXPANDED_VIEW_TAB_ITEM_ACTIVE_COLOR};
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
}
@@ -134,7 +142,7 @@ export function PerformanceFrameworkExpandedView(
{
data-label={props.index}
style={{
top: "-28px",
- color: "#fff",
+ color: appColors.COMMON.WHITE,
display: "block",
fontSize: "10px",
padding: "0 10px",
@@ -49,7 +50,7 @@ const ThumbLabel = (props: any) => {
borderRadius: "3px",
whiteSpace: "nowrap",
position: "absolute",
- backgroundColor: "#262C34",
+ backgroundColor: appColors.COMMON.PRIMARY_COLOR_1,
...(style as React.CSSProperties),
}}
>
@@ -73,7 +74,7 @@ const Track = (params: {
...params.props.style,
height: "6px",
width: "calc(100% - 50px)",
- background: `linear-gradient(to right, #fff,#7e8a96,#0a0b0c)`,
+ background: appColors.RANGE_SLIDER.TRACK_BACKGROUND_COLOR,
}}
>
{params.children}
@@ -121,12 +122,12 @@ export function RangeSlider(props: RangeSliderProps) {
height: `${THUMB_SIZE}px`,
width: `${THUMB_SIZE}px`,
borderRadius: "50%",
- backgroundColor: "#fff",
+ backgroundColor: appColors.COMMON.WHITE,
display: "flex",
outline: "none",
justifyContent: "center",
alignItems: "center",
- boxShadow: "0px 2px 6px #AAA",
+ boxShadow: `0px 2px 6px ${appColors.RANGE_SLIDER.THUMB_BOX_SHADOW_COLOR}`,
}}
>
css`
- color: #262c34;
+ color: ${appColors.SEARCH.TAB_TEXT_COLOR};
padding: 5px 0;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
- border-bottom: 2px solid ${active ? "#262c34" : "transparent"};
+ border-bottom: 2px solid
+ ${active
+ ? appColors.SEARCH.TAB_BORDER_ACTIVE_COLOR
+ : appColors.SEARCH.TAB_BORDER_COLOR};
&:hover {
cursor: pointer;
- border-color: #262c34;
+ border-color: ${appColors.SEARCH.TAB_BORDER_HOVER_COLOR};
}
@media (max-width: 767px) {
padding: 2px 10px;
border-radius: 16px;
border-bottom-style: none;
- color: ${active ? "#fff" : "#262c34"};
- background: ${active ? "#262c34" : "#dfe3e6"};
+ color: ${active
+ ? appColors.SEARCH.MOBILE_TAB_ACTIVE_COLOR
+ : appColors.SEARCH.TAB_TEXT_COLOR};
+ background: ${active
+ ? appColors.SEARCH.MOBILE_TAB_ACTIVE_BACKGROUND_COLOR
+ : appColors.SEARCH.MOBILE_TAB_BACKGROUND_COLOR};
}
`;
@@ -92,17 +100,17 @@ export const result = css`
padding: 12px 37px;
flex-direction: row;
text-decoration: none;
- border-top: 1px solid #dfe3e6;
+ border-top: 1px solid ${appColors.SEARCH.RESULT_BORDER_COLOR};
@media (max-width: 767px) {
padding: 12px;
}
&:hover {
- background: #262c34;
+ background: ${appColors.SEARCH.RESULT_HOVER_BACKGROUND_COLOR};
> div {
- color: #fff;
+ color: ${appColors.SEARCH.RESULT_HOVER_TEXT_COLOR};
}
}
@@ -116,7 +124,7 @@ export const result = css`
}
> div {
- color: #262c34;
+ color: ${appColors.SEARCH.RESULT_TEXT_COLOR};
font-size: 14px;
width: calc(100% - 37px - 24px - 40px);
}
diff --git a/src/app/components/Search/icons.tsx b/src/app/components/Search/icons.tsx
index 6116f63b4..1cf9e40da 100644
--- a/src/app/components/Search/icons.tsx
+++ b/src/app/components/Search/icons.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { appColors } from "app/theme";
export function getIcon(type: string) {
switch (type) {
@@ -22,7 +23,7 @@ export function getIcon(type: string) {
export const AllCategoriesIcon = () => (
@@ -31,7 +32,7 @@ export const AllCategoriesIcon = () => (
export const LocationsIcon = () => (
@@ -40,11 +41,11 @@ export const LocationsIcon = () => (
export const PartnersIcon = () => (
@@ -53,7 +54,7 @@ export const PartnersIcon = () => (
export const DonorsIcon = () => (
*": {
userSelect: "none",
- borderBottom: "1px solid #DFE3E6",
+ borderBottom: `1px solid ${appColors.TABLE.BORDER_BOTTOM_COLOR}`,
},
},
});
@@ -53,20 +54,22 @@ function Row(props: {
}}
css={`
transition: background 0.2s ease-in-out;
- background: ${props.paddingLeft ? "#fff" : "#f5f5f7"};
+ background: ${props.paddingLeft
+ ? appColors.TABLE.ROW_BACKGROUND_COLOR_1
+ : appColors.TABLE.ROW_BACKGROUND_COLOR_2};
${row.link || props.row.docCategories || props.row.docs
? `
:hover {
cursor: pointer;
- background: #262C34;
+ background: ${appColors.TABLE.ROW_BACKGROUND_HOVER_COLOR};
> td {
- color: #fff;
+ color: ${appColors.TABLE.ROW_TEXT_HOVER_COLOR};
}
path {
- fill: #fff;
+ fill: ${appColors.TABLE.ROW_TEXT_HOVER_COLOR};
}
}
`
@@ -141,7 +144,11 @@ function Row(props: {
}
`}
>
- {row.link ? : row.count}
+ {row.link ? (
+
+ ) : (
+ row.count
+ )}
*": {
userSelect: "none",
- borderBottom: "1px solid #DFE3E6",
+ borderBottom: `1px solid ${appColors.TABLE.BORDER_BOTTOM_COLOR}`,
},
},
});
@@ -60,20 +61,22 @@ function Row(props: {
}}
css={`
transition: background 0.2s ease-in-out;
- background: ${props.paddingLeft ? "#fff" : "#f5f5f7"};
+ background: ${props.paddingLeft
+ ? appColors.TABLE.ROW_BACKGROUND_COLOR_1
+ : appColors.TABLE.ROW_BACKGROUND_COLOR_2};
${props.row.children
? `
:hover {
cursor: pointer;
- background: #262C34;
+ background: ${appColors.TABLE.ROW_BACKGROUND_HOVER_COLOR};
> td {
- color: #fff;
+ color: ${appColors.TABLE.ROW_TEXT_HOVER_COLOR};
}
path {
- fill: #fff;
+ fill: ${appColors.TABLE.ROW_TEXT_HOVER_COLOR};
}
}
`
diff --git a/src/app/components/Table/Simple/styles.ts b/src/app/components/Table/Simple/styles.ts
index f09cd09d1..61c59fd51 100644
--- a/src/app/components/Table/Simple/styles.ts
+++ b/src/app/components/Table/Simple/styles.ts
@@ -1,7 +1,8 @@
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
export const tablecell = css`
- color: #262c34;
+ color: ${appColors.TABLE.ROW_TEXT_COLOR};
font-size: 14px;
line-height: 20px;
letter-spacing: 0.5px;
diff --git a/src/app/components/ToolBoxPanel/components/aggregateby/index.tsx b/src/app/components/ToolBoxPanel/components/aggregateby/index.tsx
index d06f15684..b0c186bed 100644
--- a/src/app/components/ToolBoxPanel/components/aggregateby/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/aggregateby/index.tsx
@@ -1,6 +1,7 @@
import React from "react";
import get from "lodash/get";
import find from "lodash/find";
+import { appColors } from "app/theme";
import { Dropdown } from "app/components/Dropdown";
import { ViewModel } from "app/components/ToolBoxPanel/utils/getControlItems";
@@ -38,7 +39,8 @@ export function ToolBoxPanelAggregateBy(props: ToolBoxPanelAggregateByProps) {
flex-direction: row;
align-items: center;
justify-content: space-between;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
@media (max-width: 767px) {
padding: 16px;
diff --git a/src/app/components/ToolBoxPanel/components/budgetflowlevelselectors/index.tsx b/src/app/components/ToolBoxPanel/components/budgetflowlevelselectors/index.tsx
index 230d26ad2..ddb131ffe 100644
--- a/src/app/components/ToolBoxPanel/components/budgetflowlevelselectors/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/budgetflowlevelselectors/index.tsx
@@ -2,6 +2,7 @@
import React from "react";
import get from "lodash/get";
import find from "lodash/find";
+import { appColors } from "app/theme";
import { useStoreState, useStoreActions } from "app/state/store/hooks";
/* project */
import { Dropdown } from "app/components/Dropdown";
@@ -35,7 +36,8 @@ export function ToolBoxPanelBudgetFlowLevelSelectors() {
flex-direction: row;
align-items: center;
padding: 15px 35px 15px 25px;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
diff --git a/src/app/components/ToolBoxPanel/components/budgettimecycleyearselector/index.tsx b/src/app/components/ToolBoxPanel/components/budgettimecycleyearselector/index.tsx
index 9350b4e80..8af685037 100644
--- a/src/app/components/ToolBoxPanel/components/budgettimecycleyearselector/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/budgettimecycleyearselector/index.tsx
@@ -1,5 +1,6 @@
/* third-party */
import React from "react";
+import { appColors } from "app/theme";
import { useStoreState, useStoreActions } from "app/state/store/hooks";
/* project */
import { DrillDownArrowSelector } from "app/components/DrilldownArrowSelector";
@@ -23,7 +24,8 @@ export function ToolBoxPanelBudgetTimeCycleYearSelector() {
width: 100%;
margin-bottom: 20px;
padding: 15px 35px 15px 25px;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
`}
>
* {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -75,16 +77,16 @@ export function ToolBoxPanelControlRow(props: ToolBoxPanelControlRowProps) {
path {
fill: ${props.selected === option.value
- ? "#13183F"
- : "#868A9D"};
+ ? appColors.TOOLBOX.VIEWS_ICON_ACTIVE_COLOR
+ : appColors.TOOLBOX.VIEWS_ICON_COLOR};
}
&:hover {
- color: #fff;
+ color: ${appColors.COMMON.WHITE};
cursor: pointer;
path {
- fill: #13183f;
+ fill: ${appColors.TOOLBOX.VIEWS_ICON_ACTIVE_COLOR};
}
}
`}
@@ -107,10 +109,12 @@ export function ToolBoxPanelControlRow(props: ToolBoxPanelControlRowProps) {
flex-direction: row;
border-radius: 20px;
align-items: center;
- color: ${props.selected === option.value ? "#fff" : "#262C34"};
+ color: ${props.selected === option.value
+ ? appColors.COMMON.WHITE
+ : appColors.COMMON.PRIMARY_COLOR_1};
background: ${props.selected === option.value
- ? "#262C34"
- : "#fff"};
+ ? appColors.COMMON.PRIMARY_COLOR_1
+ : appColors.COMMON.WHITE};
> * {
@supports (-webkit-touch-callout: none) and
@@ -122,11 +126,11 @@ export function ToolBoxPanelControlRow(props: ToolBoxPanelControlRowProps) {
}
&:hover {
- color: #fff;
+ color: ${appColors.COMMON.WHITE};
cursor: pointer;
background: ${props.selected === option.value
- ? "#262C34"
- : "#13183F"};
+ ? appColors.COMMON.PRIMARY_COLOR_1
+ : appColors.COMMON.SECONDARY_COLOR_13};
}
`}
>
diff --git a/src/app/components/ToolBoxPanel/components/datapath/index.tsx b/src/app/components/ToolBoxPanel/components/datapath/index.tsx
index c0de97726..dd43e7b24 100644
--- a/src/app/components/ToolBoxPanel/components/datapath/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/datapath/index.tsx
@@ -11,6 +11,7 @@ import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
import TimelineConnector from "@material-ui/lab/TimelineConnector";
import { useStoreState, useStoreActions } from "app/state/store/hooks";
+import { appColors } from "app/theme";
export function DataPathPanel() {
const history = useHistory();
@@ -57,7 +58,7 @@ export function DataPathPanel() {
flex-direction: row;
align-items: center;
justify-content: space-between;
- border-bottom: 1px solid #cfd4da;
+ border-bottom: 1px solid ${appColors.COMMON.SECONDARY_COLOR_6};
@media (max-width: 767px) {
padding: 16px;
@@ -72,7 +73,7 @@ export function DataPathPanel() {
`}
onClick={() => setShowDataPath(false)}
>
-
+
{dataPathSteps.length > 0 && (
@@ -97,7 +98,7 @@ export function DataPathPanel() {
.MuiTimelineDot-root {
margin: 0;
padding: 3px;
- background: #262c34;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
}
.MuiTimelineContent-root {
@@ -106,7 +107,7 @@ export function DataPathPanel() {
}
.MuiTimelineConnector-root {
- background: #adb5bd;
+ background: ${appColors.COMMON.SECONDARY_COLOR_5};
}
}
`}
@@ -132,18 +133,6 @@ export function DataPathPanel() {
? drilldown.name.split("-")[1]
: drilldown.name}
- {/*
- By Components
-
*/}
))}
diff --git a/src/app/components/ToolBoxPanel/components/disbursementslider/index.tsx b/src/app/components/ToolBoxPanel/components/disbursementslider/index.tsx
index 829ccf745..01899013d 100644
--- a/src/app/components/ToolBoxPanel/components/disbursementslider/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/disbursementslider/index.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { appColors } from "app/theme";
import { RangeSlider } from "app/components/RangeSlider";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
@@ -16,7 +17,8 @@ export function ToolBoxPanelDisbursementsSlider(props: { label: string }) {
width: 100%;
padding: 15px 25px;
text-transform: capitalize;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
`}
>
{props.label}
diff --git a/src/app/components/ToolBoxPanel/components/eligibilityadvanced/index.tsx b/src/app/components/ToolBoxPanel/components/eligibilityadvanced/index.tsx
index 2578cd794..e01403d53 100644
--- a/src/app/components/ToolBoxPanel/components/eligibilityadvanced/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/eligibilityadvanced/index.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { appColors } from "app/theme";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { useStoreState, useStoreActions } from "app/state/store/hooks";
@@ -25,7 +26,8 @@ export function ToolBoxPanelEligibilityAdvanced() {
flex-direction: row;
align-items: center;
justify-content: space-between;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
diff --git a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
index be58e1e98..2715af402 100644
--- a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
@@ -20,6 +20,7 @@ import {
FilterGroupProps,
FilterOptionProps,
} from "app/components/ToolBoxPanel/components/filters/data";
+import { appColors } from "app/theme";
interface ExpandedFilterGroupProps extends FilterGroupModel, FilterGroupProps {
goBack: () => void;
@@ -351,11 +352,13 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
position: relative;
padding: 10px 20px;
border-radius: 20px;
- background: #dfe3e6;
+ background: ${appColors.TOOLBOX
+ .FILTERS_EXPANDED_GROUP_SEARCH_BACKGROUND_COLOR};
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.05);
path {
- fill: #98a1aa;
+ fill: ${appColors.TOOLBOX
+ .FILTERS_EXPANDED_GROUP_SEARCH_ICON_COLOR};
}
`}
>
@@ -364,10 +367,12 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
css={`
width: 100%;
outline: none;
- color: #262c34;
+ color: ${appColors.TOOLBOX
+ .FILTERS_EXPANDED_GROUP_SEARCH_TEXT_COLOR};
font-size: 14px;
border-style: none;
- background: #dfe3e6;
+ background: ${appColors.TOOLBOX
+ .FILTERS_EXPANDED_GROUP_SEARCH_BACKGROUND_COLOR};
`}
tabIndex={0}
value={value}
@@ -382,7 +387,8 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
width: 100%;
height: 25px;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
`}
/>
@@ -399,15 +405,18 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
&::-webkit-scrollbar {
width: 4px;
border-radius: 4px;
- background: #262c34;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-track {
border-radius: 4px;
- background: #f5f5f7;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_TRACK_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background: #262c34;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_THUMB_BACKGROUND_COLOR};
}
`}
>
@@ -436,7 +445,8 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
type="button"
onClick={handleApply}
css={`
- color: #fff;
+ color: ${appColors.TOOLBOX
+ .FILTERS_EXPANDED_GROUP_APPLY_BUTTON_TEXT_COLOR};
margin: 30px 0;
font-size: 14px;
cursor: pointer;
@@ -445,7 +455,8 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
padding: 10px 20px;
border-style: none;
border-radius: 20px;
- background: #262c34;
+ background: ${appColors.TOOLBOX
+ .FILTERS_EXPANDED_GROUP_APPLY_BUTTON_BACKGROUND_COLOR};
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.05);
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
`}
@@ -475,7 +486,8 @@ function FilterOption(props: FilterOptionProps) {
width: 100%;
display: flex;
flex-direction: column;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
border-bottom-style: ${props.subOptions ? "solid" : "none"};
`}
>
diff --git a/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
index 94adcde4a..2cbced613 100644
--- a/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
@@ -9,6 +9,7 @@ import {
FilterGroupModel,
FilterGroupOptionModel,
} from "app/components/ToolBoxPanel/components/filters/data";
+import { appColors } from "app/theme";
interface FilterGroupCompProps extends FilterGroupModel {
expandGroup: () => void;
@@ -72,7 +73,8 @@ export function FilterGroup(props: FilterGroupCompProps) {
display: flex;
padding: 15px 0;
flex-direction: column;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -131,15 +133,18 @@ export function FilterGroup(props: FilterGroupCompProps) {
&::-webkit-scrollbar {
height: 4px;
- background: #262c34;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-track {
border-radius: 4px;
- background: #f5f5f7;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_TRACK_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background: #262c34;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_THUMB_BACKGROUND_COLOR};
}
`}
>
@@ -155,9 +160,9 @@ export function FilterGroup(props: FilterGroupCompProps) {
css={`
gap: 6px;
display: flex;
- color: #262c34;
+ color: ${appColors.TOOLBOX.FILTER_PILL_TEXT_COLOR};
font-size: 10px;
- background: #fff;
+ background: ${appColors.TOOLBOX.FILTER_PILL_BACKGROUND_COLOR};
padding: 5px 10px;
border-radius: 20px;
flex-direction: row;
diff --git a/src/app/components/ToolBoxPanel/components/filters/index.tsx b/src/app/components/ToolBoxPanel/components/filters/index.tsx
index b98f8f4e3..029834e93 100644
--- a/src/app/components/ToolBoxPanel/components/filters/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/index.tsx
@@ -1,16 +1,17 @@
import React from "react";
import get from "lodash/get";
import isEqual from "lodash/isEqual";
-import { ResetIcon } from "app/assets/icons/Reset";
+import { appColors } from "app/theme";
+import { useRecoilState } from "recoil";
import Button from "@material-ui/core/Button";
+import { ResetIcon } from "app/assets/icons/Reset";
+import { filterExpandedGroup } from "app/state/recoil/atoms";
import { useFilterOptions } from "app/hooks/useFilterOptions";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters";
import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
import { FilterGroup } from "app/components/ToolBoxPanel/components/filters/common/group";
import { ExpandedFilterGroup } from "app/components/ToolBoxPanel/components/filters/common/expandedgroup";
-import { useRecoilState } from "recoil";
-import { filterExpandedGroup } from "app/state/recoil/atoms";
interface ToolBoxPanelFiltersProps {
groups: FilterGroupProps[];
@@ -53,15 +54,17 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
&::-webkit-scrollbar {
width: 4px;
- background: #262c34;
+ background: ${appColors.TOOLBOX.FILTERS_SCROLLBAR_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-track {
border-radius: 4px;
- background: #f5f5f7;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_TRACK_BACKGROUND_COLOR};
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background: #262c34;
+ background: ${appColors.TOOLBOX
+ .FILTERS_SCROLLBAR_THUMB_BACKGROUND_COLOR};
}
@media (max-width: 767px) {
@@ -84,7 +87,8 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
flex-direction: row;
align-items: center;
justify-content: space-between;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
@media (max-width: 767px) {
font-size: 18px;
diff --git a/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx b/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx
index 0211dc591..8620f1951 100644
--- a/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/grantperiods/index.tsx
@@ -3,9 +3,14 @@ import get from "lodash/get";
import find from "lodash/find";
import { useStoreState } from "app/state/store/hooks";
import { useParams, useHistory } from "react-router-dom";
-import { GrantDetailPeriod } from "app/modules/grant-detail-module/components/InfoContent";
import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
+interface GrantDetailPeriod {
+ number: number;
+ endDate: string;
+ startDate: string;
+}
+
export function GrantImplementationPeriods() {
const history = useHistory();
const params = useParams<{ code: string; period: string; vizType: string }>();
diff --git a/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx b/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx
index 9bd30f7fd..9fe72c368 100644
--- a/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/iconbuttons/index.tsx
@@ -2,6 +2,7 @@
import React from "react";
import get from "lodash/get";
import { CSVLink } from "react-csv";
+import { appColors } from "app/theme";
import Snackbar from "@material-ui/core/Snackbar";
import MenuItem from "@material-ui/core/MenuItem";
import { useStoreState } from "app/state/store/hooks";
@@ -62,7 +63,7 @@ export const locationsToNotShowExport = [
const StyledMenu = withStyles({
paper: {
borderRadius: 10,
- border: "1px solid #d3d4d5",
+ border: `1px solid ${appColors.TOOLBOX.MENU_EXPORT_BORDER_COLOR}`,
},
list: {
padding: 0,
@@ -88,11 +89,11 @@ const StyledMenuItem = withStyles(() => ({
root: {
padding: 0,
width: "100%",
- borderBottom: "1px solid #DFE3E6",
+ borderBottom: `1px solid ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR}`,
"& a": {
width: "100%",
fontSize: "14px",
- color: "#262c34",
+ color: appColors.TOOLBOX.MENU_EXPORT_TEXT_COLOR,
padding: "6px 12px",
textDecoration: "none",
},
@@ -297,7 +298,8 @@ export function ToolBoxPanelIconButtons(props: ToolBoxPanelIconButtonsProps) {
padding: 0 25px;
flex-direction: row;
justify-content: flex-end;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
@media (max-width: 767px) {
padding: 0 16px;
diff --git a/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx b/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx
index d7f47a77e..621f4ec9c 100644
--- a/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/pf-reportingperiods/index.tsx
@@ -4,6 +4,7 @@ import React from "react";
import useMeasure from "react-use/lib/useMeasure";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
import Draggable, { DraggableEvent, DraggableData } from "react-draggable";
+import { appColors } from "app/theme";
export interface PerformanceFrameworkReportingPeriodsProps {
periods: string[][];
@@ -36,7 +37,8 @@ export function PerformanceFrameworkReportingPeriods(
display: flex;
padding: 15px 25px;
flex-direction: column;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -61,7 +63,7 @@ export function PerformanceFrameworkReportingPeriods(
margin-top: 50px;
position: relative;
flex-direction: row;
- background: #262c34;
+ background: ${appColors.TOOLBOX.REPORTING_PERIODS_BACKGROUND_COLOR};
border-radius: 20px;
> div:not(:first-child) {
@@ -76,7 +78,7 @@ export function PerformanceFrameworkReportingPeriods(
height: 4px;
content: "";
position: absolute;
- background: #c7cdd1;
+ background: ${appColors.COMMON.SECONDARY_COLOR_11};
}
}
@@ -87,7 +89,7 @@ export function PerformanceFrameworkReportingPeriods(
height: 4px;
content: "";
position: absolute;
- background: #c7cdd1;
+ background: ${appColors.COMMON.SECONDARY_COLOR_11};
}
> div {
@@ -120,8 +122,8 @@ export function PerformanceFrameworkReportingPeriods(
css={`
top: -2px;
z-index: 15;
- background: #fff;
cursor: ew-resize;
+ background: ${appColors.COMMON.WHITE};
border-radius: 4px;
position: absolute;
height: calc(100% + 4px);
diff --git a/src/app/components/ToolBoxPanel/components/tabs/index.tsx b/src/app/components/ToolBoxPanel/components/tabs/index.tsx
deleted file mode 100644
index 301872c04..000000000
--- a/src/app/components/ToolBoxPanel/components/tabs/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-
-interface ToolBoxPanelTabsProps {
- selected: string;
- options: string[];
- onSelect: (tab: string) => void;
-}
-
-export function ToolBoxPanelTabs(props: ToolBoxPanelTabsProps) {
- return (
- button {
- color: #fff;
- outline: none;
- padding: 12px 0;
- font-size: 14px;
- line-height: 1.7;
- font-weight: bold;
- border-style: none;
- text-align: center;
- width: calc(100% / ${props.options.length});
- font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
-
- &:hover {
- cursor: pointer;
- background: #13183f;
- }
- }
- `}
- >
- {props.options.map((option: string) => (
-
- ))}
-
- );
-}
diff --git a/src/app/components/ToolBoxPanel/index.tsx b/src/app/components/ToolBoxPanel/index.tsx
index a54c877d2..213e89a30 100644
--- a/src/app/components/ToolBoxPanel/index.tsx
+++ b/src/app/components/ToolBoxPanel/index.tsx
@@ -17,6 +17,7 @@ import { useStoreActions, useStoreState } from "app/state/store/hooks";
import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
import { SubToolBoxPanel } from "app/components/ToolBoxPanel/components/subtoolboxpanel";
import { ToolBoxPanelIconButtons } from "app/components/ToolBoxPanel/components/iconbuttons";
+import { appColors } from "app/theme";
export interface ToolBoxPanelProps {
open: boolean;
@@ -155,7 +156,7 @@ export function ToolBoxPanel(props: ToolBoxPanelProps) {
width: 400px;
top: ${top}px;
position: fixed;
- background: #f5f5f7;
+ background: ${appColors.TOOLBOX.BACKGROUND_COLOR};
height: calc(100vh - ${top}px);
visibility: visible !important;
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
@@ -183,13 +184,13 @@ export function ToolBoxPanel(props: ToolBoxPanelProps) {
tabIndex={-1}
css={`
top: 38%;
- color: #fff;
+ color: ${appColors.TOOLBOX.BUTTON_COLOR};
width: 16px;
height: 133px;
display: flex;
cursor: pointer;
position: absolute;
- background: #262c34;
+ background: ${appColors.TOOLBOX.BUTTON_BACKGROUND_COLOR};
align-items: center;
flex-direction: column;
justify-content: center;
@@ -200,13 +201,14 @@ export function ToolBoxPanel(props: ToolBoxPanelProps) {
left: -16px;
&:hover {
- background: #13183f;
+ background: ${appColors.TOOLBOX
+ .BUTTON_BACKGROUND_HOVER_COLOR};
}
> svg {
transform: rotate(${!props.open ? "-" : ""}90deg);
> path {
- fill: #fff;
+ fill: ${appColors.COMMON.WHITE};
}
}
`}
@@ -225,7 +227,8 @@ export function ToolBoxPanel(props: ToolBoxPanelProps) {
display: flex;
flex-direction: row;
justify-content: space-between;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
`}
>
props.onCloseBtnClick()}
>
diff --git a/src/app/hooks/useDatasetMenuItems.tsx b/src/app/hooks/useDatasetMenuItems.tsx
index efbd99141..3f9dc0a40 100644
--- a/src/app/hooks/useDatasetMenuItems.tsx
+++ b/src/app/hooks/useDatasetMenuItems.tsx
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from "react";
+import { appColors } from "app/theme";
import { Link, useLocation } from "react-router-dom";
import { ArrowForwardIcon } from "app/assets/icons/ArrowForward";
@@ -24,7 +25,7 @@ function Expandable(props: ExpandableProps) {
css={`
width: 100%;
display: flex;
- color: #262c34;
+ color: ${appColors.APPBAR.DATASETS_MENU_ITEM_COLOR};
font-size: 14px;
padding: 10px 12px;
align-items: center;
@@ -35,19 +36,19 @@ function Expandable(props: ExpandableProps) {
transform: rotate(${expanded ? "-" : ""}90deg) scale(0.5);
> path {
- fill: #13183f;
+ fill: ${appColors.COMMON.SECONDARY_COLOR_10};
}
}
@media (min-width: 768px) {
&:hover {
- color: #fff;
- background: #262c34;
+ color: ${appColors.COMMON.WHITE};
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
transition: background 0.2s ease-in-out;
> svg {
> path {
- fill: #fff;
+ fill: ${appColors.COMMON.WHITE};
}
}
}
@@ -67,16 +68,16 @@ function Expandable(props: ExpandableProps) {
a {
width: 100%;
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 14px;
padding: 10px 15px;
text-decoration: none;
@media (min-width: 768px) {
&:hover {
- color: #fff;
+ color: ${appColors.COMMON.WHITE};
font-weight: bold;
- background: #262c34;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
transition: background 0.2s ease-in-out;
}
}
@@ -92,44 +93,6 @@ function Expandable(props: ExpandableProps) {
export function useDatasetMenuItems(): React.ReactChild[] {
const location = useLocation();
return [
- //
svg {
- // margin-right: 16px;
- // transform: rotate(-180deg) scale(0.5);
-
- // > path {
- // fill: #13183f;
- // }
- // }
-
- // @media (min-width: 768px) {
- // &:hover {
- // color: #fff;
- // background: #262C34;
- // transition: background 0.2s ease-in-out;
-
- // > svg {
- // > path {
- // fill: #fff;
- // }
- // }
- // }
- // }
- // `}
- // >
- //
- //
Datasets
- // ,
Pledges & Contributions
@@ -144,8 +107,8 @@ export function useDatasetMenuItems(): React.ReactChild[] {
css={`
@media (min-width: 768px) {
&:hover {
- color: #fff;
- background: #262c34;
+ color: ${appColors.COMMON.WHITE};
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
transition: background 0.2s ease-in-out;
}
}
@@ -165,8 +128,8 @@ export function useDatasetMenuItems(): React.ReactChild[] {
css={`
@media (min-width: 768px) {
&:hover {
- color: #fff;
- background: #262c34;
+ color: ${appColors.COMMON.WHITE};
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
transition: background 0.2s ease-in-out;
}
}
@@ -179,8 +142,8 @@ export function useDatasetMenuItems(): React.ReactChild[] {
css={`
@media (min-width: 768px) {
&:hover {
- color: #fff;
- background: #262c34;
+ color: ${appColors.COMMON.WHITE};
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
transition: background 0.2s ease-in-out;
}
}
diff --git a/src/app/modules/about-module/index.tsx b/src/app/modules/about-module/index.tsx
index a32bedef6..7f21264fd 100644
--- a/src/app/modules/about-module/index.tsx
+++ b/src/app/modules/about-module/index.tsx
@@ -1,12 +1,13 @@
import React from "react";
+import get from "lodash/get";
+import { appColors } from "app/theme";
import Grid from "@material-ui/core/Grid";
import useTitle from "react-use/lib/useTitle";
import { useMediaQuery } from "@material-ui/core";
+import { useCMSData } from "app/hooks/useCMSData";
import LinkList from "app/modules/about-module/links";
import { PageHeader } from "app/components/PageHeader";
import { PageTopSpacer } from "app/modules/common/page-top-spacer";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
export default function About() {
const cmsData = useCMSData({ returnData: true });
@@ -14,7 +15,7 @@ export default function About() {
useTitle(get(cmsData, "modulesAbout.title", ""));
React.useEffect(() => {
- document.body.style.background = "#F5F5F7";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_2;
}, []);
const isMobile = useMediaQuery("(max-width: 767px)");
@@ -72,7 +73,7 @@ export default function About() {
}
> p {
> a {
- color: #000;
+ color: ${appColors.ABOUT_PAGE.LINK_COLOR};
}
}
}
diff --git a/src/app/modules/about-module/links.tsx b/src/app/modules/about-module/links.tsx
index ad7ba079e..7508f1a7d 100644
--- a/src/app/modules/about-module/links.tsx
+++ b/src/app/modules/about-module/links.tsx
@@ -5,6 +5,7 @@ import useTitle from "react-use/lib/useTitle";
import { PageHeader } from "app/components/PageHeader";
import get from "lodash/get";
import { useCMSData } from "app/hooks/useCMSData";
+import { appColors } from "app/theme";
export default function LinkList() {
const cmsData = useCMSData({ returnData: true });
@@ -43,15 +44,15 @@ export default function LinkList() {
> a {
width: 100%;
- color: #000;
+ color: ${appColors.ABOUT_PAGE.LINK_COLOR};
font-size: 14px;
padding: 10px 0;
font-weight: bold;
text-align: center;
- background: #dfe3e6;
+ background: ${appColors.ABOUT_PAGE.LINK_BACKGROUND_COLOR};
border-radius: 20px;
text-decoration: none;
- border: 1px solid #dfe3e6;
+ border: 1px solid ${appColors.ABOUT_PAGE.LINK_BORDER_COLOR};
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.05);
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
}
diff --git a/src/app/modules/common/no-match-page/index.tsx b/src/app/modules/common/no-match-page/index.tsx
index c01c05567..1b09df4cc 100644
--- a/src/app/modules/common/no-match-page/index.tsx
+++ b/src/app/modules/common/no-match-page/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { Link } from "react-router-dom";
import get from "lodash/get";
import { useCMSData } from "app/hooks/useCMSData";
+import { appColors } from "app/theme";
// cc:refactor this component, inline css need to be moved to proper styled components
@@ -31,7 +32,7 @@ export const NoMatchPage = () => {
font-stretch: normal;
line-height: 1.71;
letter-spacing: 0.1px;
- color: #525252;
+ color: ${appColors.COMMON.SECONDARY_COLOR_19};
`}
>
{get(cmsData, "modulesCommon.noMatchOops", "")}
@@ -44,7 +45,7 @@ export const NoMatchPage = () => {
font-stretch: normal;
line-height: normal;
letter-spacing: 2.15px;
- color: #525252;
+ color: ${appColors.COMMON.SECONDARY_COLOR_19};
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
`}
>
@@ -60,7 +61,7 @@ export const NoMatchPage = () => {
line-height: 1.71;
letter-spacing: 1.25px;
text-align: center;
- color: #525252;
+ color: ${appColors.COMMON.SECONDARY_COLOR_19};
margin-bottom: 50px;
`}
>
@@ -79,7 +80,7 @@ export const NoMatchPage = () => {
align-items: center;
width: 204px;
height: 46px;
- background: #262c34;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
border-radius: 20px;
`}
>
diff --git a/src/app/modules/country-detail-module/components/InfoContent/index.tsx b/src/app/modules/country-detail-module/components/InfoContent/index.tsx
deleted file mode 100644
index aa1c90c26..000000000
--- a/src/app/modules/country-detail-module/components/InfoContent/index.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { formatFinancialValue } from "app/utils/formatFinancialValue";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
-
-interface LocationInfoContentProps {
- title: string;
- code: string;
- investments: {
- disbursed: number;
- committed: number;
- signed: number;
- };
- countries: {
- name: string;
- code: string;
- }[];
- multicountries: {
- name: string;
- code: string;
- }[];
- manager: {
- name: string;
- email: string;
- };
-}
-
-export function LocationInfoContent(props: LocationInfoContentProps) {
- const cmsData = useCMSData({ returnData: true });
- return (
-
-
- {props.title}
-
- {props.code.length === 3 && (
-
- {get(cmsData, "modulesCountryDetail.seeResultsStart", "")}{" "}
- {props.title}
- {get(cmsData, "modulesCountryDetail.seeResultsEnd", "")}
-
- )}
-
- {get(cmsData, "modulesCountryDetail.investments", "")}
-
-
- {get(cmsData, "modulesCountryDetail.disbursed", "")}
- {formatFinancialValue(props.investments.disbursed)}
-
-
- {get(cmsData, "modulesCountryDetail.committed", "")}
- {formatFinancialValue(props.investments.committed)}
-
-
- {get(cmsData, "modulesCountryDetail.signed", "")}
- {formatFinancialValue(props.investments.signed)}
-
-
- {props.multicountries.length > 0 &&
- `Multicountries with ${props.title}`}
- {props.countries.length > 0 && `Countries in ${props.title}`}
-
-
- {props.multicountries.map(
- (mc: { name: string; code: string }, index: number) => (
-
- {mc.name}
- {index < props.multicountries.length - 1 && ", "}
-
- )
- )}
- {props.countries.map(
- (c: { name: string; code: string }, index: number) => (
-
- {c.name}
- {index < props.countries.length - 1 && ", "}
-
- )
- )}
-
-
-
- {get(cmsData, "modulesCountryDetail.fundManager", "")}
-
-
- {props.manager.name}
-
-
- {props.manager.email}
-
-
- );
-}
diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
index 5dfa9a991..2aa0535cd 100644
--- a/src/app/modules/country-detail-module/index.tsx
+++ b/src/app/modules/country-detail-module/index.tsx
@@ -1,10 +1,10 @@
/* third-party */
-import React, { useEffect, useMemo } from "react";
-import get from "lodash/get";
-import { startCase } from "lodash";
-import { useRecoilState } from "recoil";
+import React from "react";
import { v4 } from "uuid";
+import get from "lodash/get";
+import { appColors } from "app/theme";
import queryString from "query-string";
+import { useRecoilState } from "recoil";
import { useMediaQuery } from "@material-ui/core";
import { useTitle, useUpdateEffect } from "react-use";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
@@ -102,7 +102,7 @@ export default function CountryDetail() {
React.useEffect(() => {
if (location.pathname.indexOf("/overview") === -1) {
- document.body.style.background = "#fff";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
}
countrySummaryCMSAction({
values: {
@@ -156,8 +156,9 @@ export default function CountryDetail() {
return 0;
}
- const breadcrumbID = useMemo(() => v4(), []);
- useEffect(() => {
+ const breadcrumbID = React.useMemo(() => v4(), []);
+
+ React.useEffect(() => {
if (breadCrumbList.length < 1) {
setBreadCrumList([
{ name: "Datasets", path: "/", id: v4() },
@@ -177,15 +178,11 @@ export default function CountryDetail() {
name: components || locationInfoData.locationName,
path: location.pathname,
id: breadcrumbID,
- // vizSelected:
},
- // prevViz,
]);
}
}, [locationInfoData]);
- console.log(locationInfoData, "loc");
-
const tabs = countryDetailTabs;
if (params.code.length > 3) {
diff --git a/src/app/modules/country-detail-module/sub-modules/overview/components/radial/index.tsx b/src/app/modules/country-detail-module/sub-modules/overview/components/radial/index.tsx
index cfa55f2e7..b9da62bf0 100644
--- a/src/app/modules/country-detail-module/sub-modules/overview/components/radial/index.tsx
+++ b/src/app/modules/country-detail-module/sub-modules/overview/components/radial/index.tsx
@@ -1,6 +1,7 @@
/* third-party */
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import findIndex from "lodash/findIndex";
import { ApexOptions } from "apexcharts";
import ReactApexCharts from "react-apexcharts";
@@ -31,7 +32,7 @@ export function InvestmentsRadialViz() {
locationInfoData.signed,
locationInfoData.disbursed,
];
- const colors = ["#727F95", "#21262B", "#595C70"];
+ const colors = appColors.LOCATION.OVERVIEW_VISUALISATION_COLORS;
const keys = ["Committed", "Signed", "Disbursed"];
const [keysPercentagesColors, setKeysPercentagesColors] = React.useState<{
percentages: number[];
@@ -67,12 +68,12 @@ export function InvestmentsRadialViz() {
show: true,
opacity: 0.5,
strokeWidth: "1px",
- background: "#252C34",
+ background: appColors.COMMON.PRIMARY_COLOR_1,
},
dataLabels: {
name: {
show: true,
- color: "#262c34",
+ color: appColors.COMMON.PRIMARY_COLOR_1,
fontFamily: "GothamNarrow-Book",
},
value: {
diff --git a/src/app/modules/country-detail-module/sub-modules/overview/components/time-cyle/index.tsx b/src/app/modules/country-detail-module/sub-modules/overview/components/time-cyle/index.tsx
index fed1451c5..04bd424ea 100644
--- a/src/app/modules/country-detail-module/sub-modules/overview/components/time-cyle/index.tsx
+++ b/src/app/modules/country-detail-module/sub-modules/overview/components/time-cyle/index.tsx
@@ -1,5 +1,6 @@
import React from "react";
import orderBy from "lodash/orderBy";
+import { appColors } from "app/theme";
import findIndex from "lodash/findIndex";
import useMeasure from "react-use/lib/useMeasure";
import { BarTooltipDatum, ResponsiveBar } from "@nivo/bar";
@@ -59,11 +60,11 @@ function InvestmentsTimeCycleVizTooltip(props: BarTooltipDatum) {
return (
@@ -74,7 +75,7 @@ function InvestmentsTimeCycleVizTooltip(props: BarTooltipDatum) {
line-height: 20px;
padding-bottom: 16px;
text-transform: capitalize;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid ${appColors.COMMON.SECONDARY_COLOR_7};
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
`}
>
@@ -87,7 +88,7 @@ function InvestmentsTimeCycleVizTooltip(props: BarTooltipDatum) {
font-size: 12px;
padding: 16px 0;
flex-direction: column;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid ${appColors.COMMON.SECONDARY_COLOR_7};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -138,7 +139,7 @@ function InvestmentsTimeCycleVizTooltip(props: BarTooltipDatum) {
}
export function InvestmentsTimeCycleViz(props: Props) {
- const colors = ["#727F95", "#21262B", "#595C70"];
+ const colors = appColors.LOCATION.OVERVIEW_VISUALISATION_COLORS;
const isMobile = useMediaQuery("(max-width: 767px)");
const [ref, { height }] = useMeasure
();
const [data, setData] = React.useState(formatData(props.rawData));
@@ -173,13 +174,13 @@ export function InvestmentsTimeCycleViz(props: Props) {
&::-webkit-scrollbar {
height: 5px;
- background: #262c34;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
}
&::-webkit-scrollbar-track {
- background: #dfe3e6;
+ background: ${appColors.COMMON.SECONDARY_COLOR_7};
}
&::-webkit-scrollbar-thumb {
- background: #262c34;
+ background: ${appColors.COMMON.PRIMARY_COLOR_1};
}
@media (max-width: 767px) {
@@ -275,12 +276,12 @@ export function InvestmentsTimeCycleViz(props: Props) {
ticks: {
line: {
strokeWidth: 1,
- stroke: "#868E96",
+ stroke: appColors.TIME_CYCLE.AXIS_COLOR,
strokeOpacity: 0.1,
},
text: {
fontSize: 10,
- fill: "#262c34",
+ fill: appColors.TIME_CYCLE.AXIS_GRID_COLOR,
fontFamily:
'"GothamNarrow-Book", "Helvetica Neue", sans-serif',
},
@@ -303,7 +304,7 @@ export function InvestmentsTimeCycleViz(props: Props) {
grid: {
line: {
strokeWidth: 1,
- stroke: "#868E96",
+ stroke: appColors.TIME_CYCLE.AXIS_GRID_COLOR,
strokeOpacity: 0.1,
},
},
@@ -311,7 +312,7 @@ export function InvestmentsTimeCycleViz(props: Props) {
container: {
padding: 0,
borderRadius: 20,
- background: "#f5f5f7",
+ background: appColors.TIME_CYCLE.TOOLTIP_BACKGROUND_COLOR,
},
},
}}
diff --git a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
index 88c9b9ac0..5139c6c05 100644
--- a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
+++ b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
@@ -2,6 +2,7 @@
import React from "react";
import get from "lodash/get";
import groupBy from "lodash/groupBy";
+import { appColors } from "app/theme";
import parse from "html-react-parser";
import { Link } from "react-router-dom";
import Collapse from "@material-ui/core/Collapse";
@@ -63,9 +64,9 @@ export function LocationDetailOverviewModule(props: Props) {
}
React.useEffect(() => {
- document.body.style.background = "#F5F5F7";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_2;
return () => {
- document.body.style.background = "#FFFFFF";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
};
}, []);
@@ -83,8 +84,8 @@ export function LocationDetailOverviewModule(props: Props) {
opacity: 0.3;
margin: 20px 0;
margin-left: -24px;
- border-color: #dfe3e6;
width: calc(100% + 48px);
+ border-color: ${appColors.COMMON.SECONDARY_COLOR_7};
}
`}
>
@@ -315,13 +316,13 @@ export function LocationDetailOverviewModule(props: Props) {
spacing={2}
css={`
* {
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
}
> div {
> div {
padding: 24px;
- background: #fff;
+ background: ${appColors.COMMON.WHITE};
margin-bottom: ${!countrySummaryCMSData ? "20px" : 0};
}
}
diff --git a/src/app/modules/country-detail-module/sub-modules/results/index.tsx b/src/app/modules/country-detail-module/sub-modules/results/index.tsx
index 06b7206fb..86262b68a 100644
--- a/src/app/modules/country-detail-module/sub-modules/results/index.tsx
+++ b/src/app/modules/country-detail-module/sub-modules/results/index.tsx
@@ -1,6 +1,7 @@
/* third-party */
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { useDebounce, useUpdateEffect } from "react-use";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
/* project */
@@ -32,7 +33,7 @@ export function LocationResults(props: Props) {
const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
React.useEffect(() => {
- document.body.style.background = "#fff";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
fetchYearOptionsData({});
}, []);
diff --git a/src/app/modules/datasets-module/index.tsx b/src/app/modules/datasets-module/index.tsx
index 9781782e7..dcb8fa484 100644
--- a/src/app/modules/datasets-module/index.tsx
+++ b/src/app/modules/datasets-module/index.tsx
@@ -1,6 +1,7 @@
/* third-party */
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import useTitle from "react-use/lib/useTitle";
import useMediaQuery from "@material-ui/core/useMediaQuery";
/* project */
@@ -19,7 +20,7 @@ export default function Datasets() {
const isMobile = useMediaQuery("(max-width: 767px)");
React.useEffect(() => {
- document.body.style.background = "#DFE3E5";
+ document.body.style.background = appColors.COMMON.SECONDARY_COLOR_7;
}, []);
return (
diff --git a/src/app/modules/datasets-module/style.ts b/src/app/modules/datasets-module/style.ts
index a901a55f1..5bee8e915 100644
--- a/src/app/modules/datasets-module/style.ts
+++ b/src/app/modules/datasets-module/style.ts
@@ -1,3 +1,4 @@
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
export const dataSetsCss = css`
@@ -13,10 +14,10 @@ export const dataSetsGridCss = css`
width: 100%;
height: 28vh;
padding: 20px;
- color: #262c34;
- background: #fff;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
+ background: ${appColors.COMMON.WHITE};
border-radius: 20px;
- border: 2px solid #fff;
+ border: 2px solid ${appColors.COMMON.WHITE};
@media screen and (min-width: 900px) {
height: 370px;
@@ -39,7 +40,7 @@ export const dataSetsGridCss = css`
}
&:hover {
- border-color: #13183f;
+ border-color: ${appColors.COMMON.SECONDARY_COLOR_13};
}
`;
diff --git a/src/app/modules/documents-module/index.tsx b/src/app/modules/documents-module/index.tsx
index 71e2b4fb0..86204b62b 100644
--- a/src/app/modules/documents-module/index.tsx
+++ b/src/app/modules/documents-module/index.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from "react";
import { v4 } from "uuid";
import get from "lodash/get";
+import { appColors } from "app/theme";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import TablePagination from "@material-ui/core/TablePagination";
import { useTitle, useDebounce, useUpdateEffect } from "react-use";
@@ -43,7 +44,7 @@ export default function DocumentsModule() {
const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
React.useEffect(() => {
- document.body.style.background = "#fff";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
}, []);
React.useEffect(() => {
diff --git a/src/app/modules/grant-detail-module/components/InfoContent/index.tsx b/src/app/modules/grant-detail-module/components/InfoContent/index.tsx
deleted file mode 100644
index 0d396b88f..000000000
--- a/src/app/modules/grant-detail-module/components/InfoContent/index.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import React from "react";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
-import { LocationIcon } from "app/assets/icons/Location";
-import { ComponentIcon } from "app/assets/icons/Component";
-import { formatFinancialValue } from "app/utils/formatFinancialValue";
-import { ratingValues } from "app/components/Charts/PerformanceRating/data";
-
-interface GrantInfoContentProps {
- title: string;
- code: string;
- rating: string | null;
- status: string;
- location: string;
- component: string;
- description: string | null;
- investments: {
- disbursed: number;
- committed: number;
- signed: number;
- };
- manager: {
- name: string;
- email: string;
- };
- periods: GrantDetailPeriod[];
-}
-
-export interface GrantDetailPeriod {
- number: number;
- startDate: string;
- endDate: string;
-}
-
-export interface GrantDetailPeriodInformation {
- disbursed: number;
- committed: number;
- signed: number;
- rating: string;
-}
-
-export function GrantInfoContent(props: GrantInfoContentProps) {
- const cmsData = useCMSData({ returnData: true });
-
- return (
-
-
- {get(cmsData, "modulesGrantDetail.grantStatus", "")} {props.status}
-
-
- {props.title}
-
-
* {
- @supports (-webkit-touch-callout: none) and (not (translate: none)) {
- &:not(:last-child) {
- margin-right: 6px;
- }
- }
- }
- `}
- >
-
-
- {get(cmsData, "modulesGrantDetail.location", "")} {props.location}
-
-
-
* {
- @supports (-webkit-touch-callout: none) and (not (translate: none)) {
- &:not(:last-child) {
- margin-right: 6px;
- }
- }
- }
- `}
- >
-
-
- {get(cmsData, "modulesGrantDetail.component", "")} {props.component}
-
-
-
- {get(cmsData, "modulesGrantDetail.rating", "")}
-
-
* {
- @supports (-webkit-touch-callout: none) and (not (translate: none)) {
- &:not(:last-child) {
- margin-right: 12px;
- }
- }
- }
- `}
- >
- {ratingValues.map((value: string) => (
-
- {value}
-
- ))}
-
-
- {props.description}
-
-
- {get(cmsData, "modulesGrantDetail.disbursed", "")}
- {formatFinancialValue(props.investments.disbursed)}
-
-
- {get(cmsData, "modulesGrantDetail.committed", "")}
- {formatFinancialValue(props.investments.committed)}
-
-
- {get(cmsData, "modulesGrantDetail.signed", "")}
- {formatFinancialValue(props.investments.signed)}
-
-
- {get(cmsData, "modulesGrantDetail.fundManager", "")}
-
-
- {props.manager.name}
-
-
-
-
-
- );
-}
diff --git a/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx b/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx
index f2ef045b4..e45b156fb 100644
--- a/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx
+++ b/src/app/modules/grant-detail-module/components/sub-modules/overview/index.tsx
@@ -1,6 +1,7 @@
/* third-party */
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { Link } from "react-router-dom";
import { useStoreState } from "app/state/store/hooks";
import { Grid, useMediaQuery } from "@material-ui/core";
@@ -110,7 +111,7 @@ export function GrantDetailOverviewModule() {
border-radius: 50%;
align-items: center;
justify-content: center;
- border: 2px solid #262c34;
+ border: 2px solid ${appColors.COMMON.PRIMARY_COLOR_1};
opacity: ${(grantInfoData.rating || ratingValues[0]) === value
? 1
: 0.3};
@@ -208,7 +209,7 @@ export function GrantDetailOverviewModule() {
@@ -327,7 +328,7 @@ export function GrantDetailOverviewModule() {
diff --git a/src/app/modules/grant-detail-module/components/sub-modules/performance-framework/index.tsx b/src/app/modules/grant-detail-module/components/sub-modules/performance-framework/index.tsx
index 2301e4727..cd8ec013a 100644
--- a/src/app/modules/grant-detail-module/components/sub-modules/performance-framework/index.tsx
+++ b/src/app/modules/grant-detail-module/components/sub-modules/performance-framework/index.tsx
@@ -8,7 +8,6 @@ import { useStoreActions, useStoreState } from "app/state/store/hooks";
/* project */
import { NetworkViz } from "app/components/Charts/Network";
import { PageLoader } from "app/modules/common/page-loader";
-import { VizBackBtn } from "app/components/Charts/common/backbtn";
import { PerformanceFrameworkExpandedView } from "app/components/PerformanceFrameworkExpandedView";
import {
PFIndicator,
diff --git a/src/app/modules/grant-detail-module/index.tsx b/src/app/modules/grant-detail-module/index.tsx
index 0d3441294..982b37875 100644
--- a/src/app/modules/grant-detail-module/index.tsx
+++ b/src/app/modules/grant-detail-module/index.tsx
@@ -1,9 +1,9 @@
/* third-party */
-import React, { useMemo } from "react";
+import React from "react";
import { v4 } from "uuid";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { useRecoilState } from "recoil";
-
import { useMediaQuery } from "@material-ui/core";
import { useTitle, useUpdateEffect } from "react-use";
import { Switch, Route, useParams, useLocation } from "react-router-dom";
@@ -93,8 +93,7 @@ export default function GrantDetail() {
);
React.useEffect(() => {
- document.body.style.background = "#fff";
-
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
fetchGrantInfoData({
filterString: `grantNumber=${params.code}`,
});
@@ -133,7 +132,7 @@ export default function GrantDetail() {
if (openToolboxPanel && widthThreshold < 0) return 1;
return 0;
}
- const breadCrumbId = useMemo(() => v4(), []);
+ const breadCrumbId = React.useMemo(() => v4(), []);
React.useEffect(() => {
if (grantInfoData) {
diff --git a/src/app/modules/grants-module/components/List/index.tsx b/src/app/modules/grants-module/components/List/index.tsx
index bf1bacb37..c6156ef6c 100644
--- a/src/app/modules/grants-module/components/List/index.tsx
+++ b/src/app/modules/grants-module/components/List/index.tsx
@@ -14,6 +14,7 @@ import {
GrantsListProps,
GrantListItemModel,
} from "app/modules/grants-module/data";
+import { appColors } from "app/theme";
export function GrantsList(props: GrantsListProps) {
const isMobile = useMediaQuery("(max-width: 767px)");
@@ -240,7 +241,7 @@ export function GrantsList(props: GrantsListProps) {
diff --git a/src/app/modules/grants-module/components/List/styles.ts b/src/app/modules/grants-module/components/List/styles.ts
index c95843ac8..8a2ea7294 100644
--- a/src/app/modules/grants-module/components/List/styles.ts
+++ b/src/app/modules/grants-module/components/List/styles.ts
@@ -1,11 +1,12 @@
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
export const listitem = css`
height: 100%;
display: flex;
- color: #262c34;
+ color: ${appColors.GRANT_LIST.ITEM_TEXT_COLOR};
padding: 12px 20px;
- background: #f5f5f7;
+ background: ${appColors.GRANT_LIST.ITEM_BACKGROUND_COLOR};
border-radius: 20px;
text-decoration: none;
flex-direction: column;
@@ -14,11 +15,11 @@ export const listitem = css`
&:hover {
cursor: pointer;
- background-color: #13183f;
+ background-color: ${appColors.GRANT_LIST.ITEM_BACKGROUND_HOVER_COLOR};
* {
- fill: #fff;
- color: #fff;
+ fill: ${appColors.GRANT_LIST.ITEM_TEXT_HOVER_COLOR};
+ color: ${appColors.GRANT_LIST.ITEM_TEXT_HOVER_COLOR};
}
}
`;
diff --git a/src/app/modules/grants-module/components/Search/styles.ts b/src/app/modules/grants-module/components/Search/styles.ts
index bac1b96f9..6449b3817 100644
--- a/src/app/modules/grants-module/components/Search/styles.ts
+++ b/src/app/modules/grants-module/components/Search/styles.ts
@@ -1,3 +1,4 @@
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
export const container = css`
@@ -6,20 +7,20 @@ export const container = css`
position: relative;
padding: 10px 20px;
border-radius: 20px;
- background: #dfe3e6;
+ background: ${appColors.GRANT_LIST.SEARCH_CONTAINER_BACKGROUND_COLOR};
box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.05);
`;
export const input = css`
width: 100%;
outline: none;
- color: #262c34;
+ color: ${appColors.GRANT_LIST.SEARCH_INPUT_COLOR};
font-size: 14px;
border-style: none;
- background: #dfe3e6;
+ background: ${appColors.GRANT_LIST.SEARCH_INPUT_BACKGROUND_COLOR};
::placeholder {
- color: #262c34;
+ color: ${appColors.GRANT_LIST.SEARCH_INPUT_COLOR};
font-weight: bold;
}
diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
index 5c08ecae0..c5c5b943c 100644
--- a/src/app/modules/grants-module/index.tsx
+++ b/src/app/modules/grants-module/index.tsx
@@ -29,6 +29,7 @@ import { GrantsList } from "app/modules/grants-module/components/List";
import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
import { useGetAllAvailableGrants } from "app/hooks/useGetAllAvailableGrants";
import { pathnameToFilterGroups } from "app/components/ToolBoxPanel/components/filters/data";
+import { appColors } from "app/theme";
interface GrantsModuleProps {
code?: string;
@@ -122,7 +123,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
useEffectOnce(() => {
reloadData();
- document.body.style.background = "#fff";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
});
useUpdateEffect(() => {
diff --git a/src/app/modules/landing-module/components/dataset-grid/index.tsx b/src/app/modules/landing-module/components/dataset-grid/index.tsx
index 5fe4e4747..b539f1a13 100644
--- a/src/app/modules/landing-module/components/dataset-grid/index.tsx
+++ b/src/app/modules/landing-module/components/dataset-grid/index.tsx
@@ -10,6 +10,7 @@ import { TableIcon } from "app/assets/icons/charts/Table";
import { SankeyIcon } from "app/assets/icons/charts/Sankey";
import { TreemapIcon } from "app/assets/icons/charts/Treemap";
import { AllocationIcon } from "app/assets/icons/charts/Allocation";
+import { appColors } from "app/theme";
function GridItem(props: {
link: string;
@@ -26,10 +27,10 @@ function GridItem(props: {
css={`
padding: 16px;
height: 125px;
- color: #262c34;
- background: #fff;
+ color: ${appColors.DATASETS_GRID.ITEM_TEXT_COLOR};
+ background: ${appColors.DATASETS_GRID.ITEM_BACKGROUND_COLOR};
position: relative;
- border: 2px solid #fff;
+ border: 2px solid ${appColors.COMMON.WHITE};
@media (max-width: 767px) {
height: 125px;
@@ -49,7 +50,7 @@ function GridItem(props: {
}
&:hover {
- border-color: #13183f;
+ border-color: ${appColors.DATASETS_GRID.ITEM_BORDER_HOVER_COLOR};
}
`}
>
@@ -70,17 +71,18 @@ function GridItem(props: {
transform: scale(1.2);
&:not(:last-child) {
- border-right: 1px solid #868a9d;
+ border-right: 1px solid
+ ${appColors.DATASETS_GRID.ICON_LINK_COLOR};
}
> svg {
> path {
- fill: #868a9d;
+ fill: ${appColors.DATASETS_GRID.ICON_LINK_COLOR};
}
&:hover {
> path {
- fill: #13183f;
+ fill: ${appColors.DATASETS_GRID.ICON_LINK_HOVER_COLOR};
}
}
}
diff --git a/src/app/modules/landing-module/index.tsx b/src/app/modules/landing-module/index.tsx
index 188bd7e6c..943653282 100644
--- a/src/app/modules/landing-module/index.tsx
+++ b/src/app/modules/landing-module/index.tsx
@@ -1,6 +1,7 @@
/* third-party */
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import useTitle from "react-use/lib/useTitle";
/* project */
import { useRecoilState } from "recoil";
@@ -12,11 +13,11 @@ export default function Landing() {
const cmsData = useCMSData({ returnData: true });
useTitle(get(cmsData, "modulesLanding.title", ""));
- const [_, setBreadCrumList] = useRecoilState(breadCrumbItems);
+ const [_, setBreadCrumbList] = useRecoilState(breadCrumbItems);
React.useEffect(() => {
- document.body.style.background = "#dfe3e6";
- setBreadCrumList([]);
+ document.body.style.background = appColors.COMMON.SECONDARY_COLOR_7;
+ setBreadCrumbList([]);
}, []);
return ;
diff --git a/src/app/modules/landing-module/styles.ts b/src/app/modules/landing-module/styles.ts
index 53a5e02e8..67645c5a6 100644
--- a/src/app/modules/landing-module/styles.ts
+++ b/src/app/modules/landing-module/styles.ts
@@ -1,3 +1,4 @@
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
export const container = css`
@@ -16,7 +17,7 @@ export const container = css`
`;
export const subtitle = css`
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 18px;
margin: 12px 0 24px 0;
@@ -28,7 +29,7 @@ export const subtitle = css`
export const datasetstitle = css`
width: 100%;
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 14px;
margin-top: 24px;
font-weight: bold;
@@ -44,6 +45,6 @@ export const datasetslink = css`
justify-content: flex-end;
> a {
- color: #13183f;
+ color: ${appColors.COMMON.SECONDARY_COLOR_13};
}
`;
diff --git a/src/app/modules/partner-detail-module/index.tsx b/src/app/modules/partner-detail-module/index.tsx
index a0b8d0859..25e3bcb9f 100644
--- a/src/app/modules/partner-detail-module/index.tsx
+++ b/src/app/modules/partner-detail-module/index.tsx
@@ -1,7 +1,8 @@
/* third-party */
-import React, { useEffect } from "react";
+import React from "react";
import { v4 } from "uuid";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { useRecoilState } from "recoil";
import { useMediaQuery } from "@material-ui/core";
import { useTitle, useUpdateEffect } from "react-use";
@@ -14,11 +15,12 @@ import {
useLocation,
} from "react-router-dom";
/* project */
-
import GrantsModule from "app/modules/grants-module";
import { PageHeader } from "app/components/PageHeader";
+import { breadCrumbItems } from "app/state/recoil/atoms";
import { ToolBoxPanel } from "app/components/ToolBoxPanel";
import { PageTopSpacer } from "app/modules/common/page-top-spacer";
+import BreadCrumbs from "app/components/Charts/common/breadcrumbs";
import { useDatasetMenuItems } from "app/hooks/useDatasetMenuItems";
import { MobileViewControl } from "app/components/Mobile/ViewsControl";
import { BudgetsGeoMap } from "app/modules/viz-module/sub-modules/budgets/geomap";
@@ -34,8 +36,6 @@ import {
filtergroups,
pathnameToFilterGroups,
} from "app/components/ToolBoxPanel/components/filters/data";
-import BreadCrumbs from "app/components/Charts/common/breadcrumbs";
-import { breadCrumbItems } from "app/state/recoil/atoms";
export default function PartnerDetail() {
useTitle("The Data Explorer - Partner");
@@ -65,7 +65,7 @@ export default function PartnerDetail() {
const paramCode = params.code.replace(/\|/g, "/");
React.useEffect(() => {
- document.body.style.background = "#fff";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
fetchPartnerInfoData({
filterString: `partners=${paramCode}`,
});
@@ -97,8 +97,7 @@ export default function PartnerDetail() {
return 0;
}
- //breadcrumbs setter
- useEffect(() => {
+ React.useEffect(() => {
if (!breadCrumbList.find((item) => item.path === location.pathname)) {
setBreadCrumList([
{ name: "Datasets", path: "/", id: v4() },
diff --git a/src/app/modules/results-module/components/InfoContent/index.tsx b/src/app/modules/results-module/components/InfoContent/index.tsx
deleted file mode 100644
index ad7dad3a1..000000000
--- a/src/app/modules/results-module/components/InfoContent/index.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from "react";
-import { ComponentIcon } from "app/assets/icons/Component";
-import {
- ResultsInfoContentProps,
- ResultsInfoContentStatsProps,
-} from "app/modules/results-module/data";
-
-function evenRound(num: number, decimalPlaces: number) {
- const d = decimalPlaces || 0;
- const m = 10 ** d;
- const n = +(d ? num * m : num).toFixed(8); // Avoid rounding errors
- const i = Math.floor(n);
- const f = n - i;
- const e = 1e-8; // Allow for rounding errors in f
- const r =
- // eslint-disable-next-line no-nested-ternary
- f > 0.5 - e && f < 0.5 + e ? (i % 2 === 0 ? i : i + 1) : Math.round(n);
- return d ? r / m : r;
-}
-
-function fnum(x: number) {
- if (Number.isNaN(x)) {
- return {
- number: x,
- text: "",
- };
- }
- if (x < 9999) {
- return {
- number: evenRound(x, 0),
- text: "",
- };
- }
- if (x < 1000000) {
- return {
- number: evenRound(x, 2),
- text: "thousand",
- };
- }
- // if (x < 10000000) {
- // const n =
- // x.toString()[2] > 0 && x.toString()[3] > 0
- // ? Math.round((x / 1000000) * 2) / 2
- // : (x / 1000000).toFixed(2);
- // return {
- // number: Number(n),
- // text: 'million'
- // };
- // }
- if (x < 10000000) {
- return {
- number: evenRound(x / 1000000, 2),
- text: "million",
- };
- }
- if (x < 100000000) {
- return {
- number: evenRound(x / 1000000, 2),
- text: "million",
- };
- }
- if (x < 1000000000) {
- return {
- number: Math.round(x / 1000000),
- text: "million",
- };
- }
- if (x < 1000000000000) {
- return {
- number: Math.round(x / 1000000000),
- text: "billion",
- };
- }
- return {
- number: 1,
- text: "T+",
- };
-}
-
-export function ResultsInfoContent(props: ResultsInfoContentProps) {
- return (
- * {
- @supports (-webkit-touch-callout: none) and (not (translate: none)) {
- &:not(:last-child) {
- margin-right: 40px;
- }
- }
- }
- `}
- >
-
- {props.description}
-
- {props.stats.map((stat: ResultsInfoContentStatsProps) => (
-
- ))}
-
- );
-}
-
-function StatItem(props: ResultsInfoContentStatsProps) {
- const fValue = fnum(props.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: 6px;
- }
- }
- }
- `}
- >
-
- {props.name}
-
-
- {fValue.number} {fValue.text}
-
-
{props.description}
-
- );
-}
diff --git a/src/app/modules/results-module/components/List/styles.ts b/src/app/modules/results-module/components/List/styles.ts
index 8c6ea5d76..7268623fd 100644
--- a/src/app/modules/results-module/components/List/styles.ts
+++ b/src/app/modules/results-module/components/List/styles.ts
@@ -1,14 +1,18 @@
+import { appColors } from "app/theme";
import { css } from "styled-components/macro";
export const listitem = (outline: boolean) => css`
height: 210px;
display: flex;
- color: #262c34;
- background: #f5f5f7;
+ color: ${appColors.RESULTS_LIST.ITEM_TEXT_COLOR};
+ background: ${appColors.RESULTS_LIST.ITEM_BACKGROUND_COLOR};
border-radius: 20px;
flex-direction: column;
justify-content: space-between;
- border: 2px solid ${outline ? "#13183F" : "#f5f5f7"};
+ border: 2px solid
+ ${outline
+ ? appColors.RESULTS_LIST.ITEM_ACTIVE_BORDER_COLOR
+ : appColors.RESULTS_LIST.ITEM_BACKGROUND_COLOR};
`;
export const row = (size: number, style: string) => css`
@@ -32,10 +36,20 @@ export const buttonrow = (position: "up" | "down") => css`
flex-direction: row;
align-items: center;
transition: background 0.2s ease-in-out;
- color: ${position === "up" ? "#fff" : "#262C34"};
- background: ${position === "up" ? "#262C34" : "transparent"};
+ color: ${
+ position === "up"
+ ? appColors.RESULTS_LIST.ITEM_BUTTON_UP_COLOR
+ : appColors.RESULTS_LIST.ITEM_BUTTON_DOWN_COLOR
+ };
+ background: ${
+ position === "up"
+ ? appColors.RESULTS_LIST.ITEM_BUTTON_UP_BACKGROUND_COLOR
+ : appColors.RESULTS_LIST.ITEM_BUTTON_DOWN_BACKGROUND_COLOR
+ };
font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
- border-${position === "up" ? "bottom" : "top"}: 1px solid #c7cdd1;
+ border-${position === "up" ? "bottom" : "top"}: 1px solid ${
+ appColors.RESULTS_LIST.ITEM_ACTIVE_COLOR
+};
border-radius: ${position === "up" ? "20px 20px 0 0" : "0 0 20px 20px"};
> * {
@@ -50,30 +64,46 @@ export const buttonrow = (position: "up" | "down") => css`
transform: rotate(${position === "up" ? "180deg" : "0deg"});
path {
- fill: ${position === "up" ? "#fff" : "#262C34"};
+ fill: ${
+ position === "up"
+ ? appColors.RESULTS_LIST.ITEM_BUTTON_UP_COLOR
+ : appColors.RESULTS_LIST.ITEM_BUTTON_DOWN_COLOR
+ };
}
}
&:hover {
cursor: pointer;
- color: ${position === "down" ? "#fff" : "#262C34"};
- background: ${position === "down" ? "#13183F" : "transparent"};
+ color: ${
+ position === "down"
+ ? appColors.RESULTS_LIST.ITEM_BUTTON_UP_COLOR
+ : appColors.RESULTS_LIST.ITEM_BUTTON_DOWN_COLOR
+ };
+ background: ${
+ position === "down"
+ ? appColors.RESULTS_LIST.ITEM_BUTTON_UP_BACKGROUND_COLOR
+ : appColors.RESULTS_LIST.ITEM_BUTTON_DOWN_BACKGROUND_COLOR
+ };
path {
- fill: ${position === "down" ? "#fff" : "#262C34"};
+ fill: ${
+ position === "down"
+ ? appColors.RESULTS_LIST.ITEM_BUTTON_UP_COLOR
+ : appColors.RESULTS_LIST.ITEM_BUTTON_DOWN_COLOR
+ };
}
}
`;
export const locationlist = css`
gap: 6px;
- color: #fff;
+ color: ${appColors.RESULTS_LIST.LOCATION_LIST_ITEM_COLOR};
display: flex;
overflow-y: auto;
max-height: 150px;
min-height: 150px;
padding: 14px 20px;
- background: #262c34;
+ background: ${appColors.RESULTS_LIST.LOCATION_LIST_BACKGROUND_COLOR};
flex-direction: column;
border-radius: 0 0 20px 20px;
diff --git a/src/app/modules/results-module/index.tsx b/src/app/modules/results-module/index.tsx
index 9a55ddcbd..668718e5c 100644
--- a/src/app/modules/results-module/index.tsx
+++ b/src/app/modules/results-module/index.tsx
@@ -2,6 +2,7 @@
import React, { useEffect } from "react";
import { v4 } from "uuid";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { useLocation } from "react-router-dom";
import { useRecoilState } from "recoil";
import useMediaQuery from "@material-ui/core/useMediaQuery";
@@ -46,7 +47,7 @@ export default function ResultsModule() {
const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
React.useEffect(() => {
- document.body.style.background = "#fff";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
fetchYearOptionsData({});
}, []);
diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 97471c715..d5bae5c72 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -1,6 +1,7 @@
/* third-party */
-import React, { useEffect, useState } from "react";
+import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import startCase from "lodash/startCase";
import { useUpdateEffect } from "react-use";
import { useMediaQuery } from "@material-ui/core";
@@ -44,10 +45,10 @@ export default function VizModule() {
const params = useParams<{ vizType: string; subType?: string }>();
const [openToolboxPanel, setOpenToolboxPanel] = React.useState(!isMobile);
const [_, setBreadCrumList] = useRecoilState(breadCrumbItems);
- const [subTypeCopy, setSubTypeCopy] = useState(params.subType);
+ const [subTypeCopy, setSubTypeCopy] = React.useState(params.subType);
React.useEffect(() => {
- document.body.style.background = "#fff";
+ document.body.style.background = appColors.COMMON.PAGE_BACKGROUND_COLOR_1;
}, []);
React.useEffect(() => {
@@ -100,7 +101,7 @@ export default function VizModule() {
}
};
- useEffect(() => {
+ React.useEffect(() => {
setBreadCrumList((list) => {
if (list[list.length - 1]?.vizSelected) {
return [
@@ -294,10 +295,7 @@ export default function VizModule() {
{/* Pledges & Contributions */}
-
+
diff --git a/src/app/modules/viz-module/sub-modules/allocations/components/mobiletooltip/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/components/mobiletooltip/index.tsx
index daa87d22e..b1db16610 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/components/mobiletooltip/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/components/mobiletooltip/index.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { appColors } from "app/theme";
import Button from "@material-ui/core/Button";
import CloseIcon from "@material-ui/icons/Close";
import IconButton from "@material-ui/core/IconButton";
@@ -12,8 +13,8 @@ export function AllocationsRadialMobileTooltip(
@@ -47,7 +48,8 @@ export function AllocationsRadialMobileTooltip(
padding-bottom: 16px;
align-items: flex-end;
justify-content: space-between;
- border-bottom: 1px solid #dfe3e6;
+ border-bottom: 1px solid
+ ${appColors.ALLOCATIONS.MOBILE_TOOLTIP_BORDER_COLOR};
> * {
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
@@ -68,15 +70,17 @@ export function AllocationsRadialMobileTooltip(
css={`
width: 100%;
margin-top: 20px;
- background: #dfe3e6;
+ background: ${appColors.ALLOCATIONS
+ .MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_COLOR};
border-radius: 22px;
&:hover {
- background: #dfe3e6;
+ background: ${appColors.ALLOCATIONS
+ .MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_HOVER_COLOR};
}
> span {
- color: #262c34;
+ color: ${appColors.ALLOCATIONS.MOBILE_TOOLTIP_DRILLDOWN_COLOR};
font-size: 14px;
font-weight: bold;
text-transform: none;
diff --git a/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx
index cad255a3e..02e4856dc 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { appColors } from "app/theme";
export function NoDataAllocations() {
return (
@@ -18,107 +19,107 @@ export function NoDataAllocations() {
>
diff --git a/src/app/modules/viz-module/sub-modules/allocations/data.ts b/src/app/modules/viz-module/sub-modules/allocations/data.ts
index b79c26f4c..1fb5eda0c 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/data.ts
+++ b/src/app/modules/viz-module/sub-modules/allocations/data.ts
@@ -1,4 +1,5 @@
import max from "lodash/max";
+import { appColors } from "app/theme";
import { hexToRGBA } from "app/utils/hexToRGBA";
export interface AllocationsProps {
@@ -31,13 +32,6 @@ export interface AllocationsRadialMobileTooltipProps {
drilldown: () => void;
}
-export const allocationmockdata: AllocationsProps = {
- total: 37633989374.46,
- values: [19273674061.22, 11694379284.57, 6665936028.67],
- keys: ["HIV", "Malaria", "Tuberculosis"],
- colors: ["#DFE3E6", "#868E96", "#ADB5BD"],
-};
-
export function getKeysPercentages(
total: number,
values: number[]
@@ -48,7 +42,7 @@ export function getKeysPercentages(
(value: number) => (value * 100) / (maxVal || total)
);
const colors = colorpercentages.map((value: number) =>
- hexToRGBA("#1B2127", value / 100)
+ hexToRGBA(appColors.COMMON.SECONDARY_COLOR_17, value / 100)
);
return { percentages, colors };
diff --git a/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
index f8d6f22ec..99c2a5818 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
@@ -1,6 +1,7 @@
/* third-party */
import React from "react";
import get from "lodash/get";
+import { appColors } from "app/theme";
import { FeatureCollection } from "geojson";
import useTitle from "react-use/lib/useTitle";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
@@ -9,10 +10,7 @@ import { GeoMap } from "app/components/Charts/GeoMap";
import { PageLoader } from "app/modules/common/page-loader";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import {
- AllocationsGeoMapPinMarker,
- NO_DATA_COLOR,
-} from "app/components/Charts/GeoMap/data";
+import { AllocationsGeoMapPinMarker } from "app/components/Charts/GeoMap/data";
interface Props {
code?: string;
@@ -162,7 +160,11 @@ export function AllocationsGeoMap(props: Props) {
width: 100%;
height: 6px;
border-radius: 20px;
- background: linear-gradient(90deg, #cdd4df 0%, #252c34 100%);
+ background: linear-gradient(
+ 90deg,
+ ${appColors.GEOMAP.DATA_LAYER_COLOR_1} 0%,
+ ${appColors.GEOMAP.DATA_LAYER_COLOR_12} 100%
+ );
`}
/>
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index 1f8be917f..a7b7fc341 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -3,6 +3,7 @@ import React from "react";
import get from "lodash/get";
import sum from "lodash/sum";
import find from "lodash/find";
+import { appColors } from "app/theme";
import uniqueId from "lodash/uniqueId";
import findIndex from "lodash/findIndex";
import { ApexOptions } from "apexcharts";
@@ -11,11 +12,9 @@ import ReactApexCharts from "react-apexcharts";
import { useTitle, useMeasure } from "react-use";
import useMediaQuery from "@material-ui/core/useMediaQuery";
/* project */
-import { InfoIcon } from "app/assets/icons/Info";
import { isTouchDevice } from "app/utils/isTouchDevice";
import { getIso3FromName } from "app/utils/getIso3FromName";
import { PageLoader } from "app/modules/common/page-loader";
-import { VizBackBtn } from "app/components/Charts/common/backbtn";
import { XsContainer } from "app/components/Charts/common/styles";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { NoDataLabel } from "app/components/Charts/common/nodatalabel";
@@ -125,12 +124,12 @@ export function AllocationsModule(props: AllocationsModuleProps) {
track: {
show: true,
strokeWidth: "1px",
- background: "#262C34",
+ background: appColors.ALLOCATIONS.RADIAL_TRACK_BACKGROUND_COLOR,
},
dataLabels: {
name: {
show: true,
- color: "#262c34",
+ color: appColors.ALLOCATIONS.RADIAL_DATA_LABELS_COLOR,
fontFamily: "GothamNarrow-Book",
},
value: {
@@ -508,10 +507,12 @@ export function AllocationsModule(props: AllocationsModuleProps) {
z-index: 1;
cursor: pointer;
transition: fill 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
- fill: ${vizSelected === "Total" ? "#cfd4da" : "transparent"};
+ fill: ${vizSelected === "Total"
+ ? appColors.ALLOCATIONS.RADIAL_CENTER_LABEL_HOVER_COLOR
+ : "transparent"};
&:hover {
- fill: #cfd4da;
+ fill: ${appColors.ALLOCATIONS.RADIAL_CENTER_LABEL_HOVER_COLOR};
}
}
`}
@@ -519,7 +520,7 @@ export function AllocationsModule(props: AllocationsModuleProps) {
- Allocations | {selectedPeriod}
+ Allocations | {selectedPeriod}
{formatFinancialValue(total)}
diff --git a/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx b/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
index 5cb3e6aea..fb06464fe 100644
--- a/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
@@ -21,6 +21,7 @@ import { useRecoilState } from "recoil";
import { breadCrumbItems } from "app/state/recoil/atoms";
import { Grid } from "@material-ui/core";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
+import { appColors } from "app/theme";
interface BudgetsFlowModuleProps {
nodes: {
@@ -280,7 +281,11 @@ export function BudgetsFlowModule(props: BudgetsFlowModuleProps) {
item
xs={12}
sm={2}
- css="font-size: 12px !important; color: #262C34; margin-top: -9px;"
+ css={`
+ font-size: 12px !important;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
+ margin-top: -9px;
+ `}
>
Budget
diff --git a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
index 9b59a9566..eb49c0640 100644
--- a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
@@ -1,28 +1,27 @@
/* third-party */
-import React, { useState } from "react";
-import find from "lodash/find";
+import React from "react";
import { v4 } from "uuid";
-
+import get from "lodash/get";
+import find from "lodash/find";
+import sumBy from "lodash/sumBy";
import uniqueId from "lodash/uniqueId";
+import { useRecoilState } from "recoil";
+import Grid from "@material-ui/core/Grid";
import { useHistory } from "react-router-dom";
import { TreeMapNodeDatum } from "@nivo/treemap";
+import { useCMSData } from "app/hooks/useCMSData";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
/* project */
import { DrilldownModelUpdated } from "app/interfaces";
+import { breadCrumbItems } from "app/state/recoil/atoms";
import { PageLoader } from "app/modules/common/page-loader";
import { getNameFromIso3 } from "app/utils/getIso3FromName";
-import { VizBackBtn } from "app/components/Charts/common/backbtn";
+import { formatFinancialValue } from "app/utils/formatFinancialValue";
+import ReRouteDialogBox from "app/components/Charts/common/dialogBox";
import { BudgetsTreemap } from "app/components/Charts/Budgets/Treemap";
import { BudgetsTimeCycle } from "app/components/Charts/Budgets/TimeCycle";
import { BudgetsTreemapDataItem } from "app/components/Charts/Budgets/Treemap/data";
-import ReRouteDialogBox from "app/components/Charts/common/dialogBox";
-import { useRecoilState } from "recoil";
-import { breadCrumbItems } from "app/state/recoil/atoms";
-import { get, sumBy } from "lodash";
-import { useCMSData } from "app/hooks/useCMSData";
-import { Grid, useMediaQuery } from "@material-ui/core";
-import { InfoIcon } from "app/assets/icons/Info";
-import { formatFinancialValue } from "app/utils/formatFinancialValue";
interface BudgetsTimeCycleModuleProps {
data: Record
[];
@@ -60,7 +59,7 @@ export function BudgetsTimeCycleModule(props: BudgetsTimeCycleModuleProps) {
(actions) => actions.DataPathSteps.addSteps
);
- const [reRouteDialog, setReRouteDialog] = useState({
+ const [reRouteDialog, setReRouteDialog] = React.useState({
display: false,
code: "",
});
@@ -272,10 +271,7 @@ export function BudgetsTimeCycleModule(props: BudgetsTimeCycleModuleProps) {
}
`}
>
-
- {get(cmsData, "componentsChartsBudgets.budget", "")}{" "}
-
-
+ {get(cmsData, "componentsChartsBudgets.budget", "")}
Year {selectedYear}
-
-
-
div {
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 14px;
}
@@ -299,7 +297,7 @@ export function InvestmentsDisbursedModule(
}
`}
>
- Investments - {props.type || "Disbursement"}
+ Investments - {props.type || "Disbursement"}
{formatFinancialValue(totalValue)}
diff --git a/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx b/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx
index 1bb3106f3..e7b7c75de 100644
--- a/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/investments/geomap/index.tsx
@@ -2,6 +2,7 @@
import React from "react";
import get from "lodash/get";
import find from "lodash/find";
+import { appColors } from "app/theme";
import uniqueId from "lodash/uniqueId";
import { FeatureCollection } from "geojson";
import useTitle from "react-use/lib/useTitle";
@@ -12,10 +13,7 @@ import { GeoMap } from "app/components/Charts/GeoMap";
import { PageLoader } from "app/modules/common/page-loader";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import {
- InvestmentsGeoMapPinMarker,
- NO_DATA_COLOR,
-} from "app/components/Charts/GeoMap/data";
+import { InvestmentsGeoMapPinMarker } from "app/components/Charts/GeoMap/data";
interface Props {
code?: string;
@@ -215,7 +213,11 @@ export function InvestmentsGeoMap(props: Props) {
width: 100%;
height: 6px;
border-radius: 20px;
- background: linear-gradient(90deg, #cdd4df 0%, #252c34 100%);
+ background: linear-gradient(
+ 90deg,
+ ${appColors.GEOMAP.DATA_LAYER_COLOR_1} 0%,
+ ${appColors.GEOMAP.DATA_LAYER_COLOR_12} 100%
+ );
`}
/>
[];
@@ -177,13 +173,13 @@ export function InvestmentsTimeCycleModule(
/>
);
} else if (props.vizLevel === 2) {
- vizComponent = (
-
{}}
- />
- );
+ // vizComponent = (
+ // {}}
+ // />
+ // );
}
}
diff --git a/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx b/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx
index d6ac6dd0d..0ebd6010f 100644
--- a/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/pledgescontributions/geomap/index.tsx
@@ -2,16 +2,14 @@
import React from "react";
import get from "lodash/get";
import filter from "lodash/filter";
+import { appColors } from "app/theme";
import { FeatureCollection } from "geojson";
import useTitle from "react-use/lib/useTitle";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
/* project */
import { GeoMap } from "app/components/Charts/GeoMap";
import { PageLoader } from "app/modules/common/page-loader";
-import {
- GeoMapPinMarker,
- NO_DATA_COLOR,
-} from "app/components/Charts/GeoMap/data";
+import { GeoMapPinMarker } from "app/components/Charts/GeoMap/data";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
@@ -145,7 +143,11 @@ export function PledgesContributionsGeoMap() {
width: 100%;
height: 6px;
border-radius: 20px;
- background: linear-gradient(90deg, #cdd4df 0%, #252c34 100%);
+ background: linear-gradient(
+ 90deg,
+ ${appColors.GEOMAP.DATA_LAYER_COLOR_1} 0%,
+ ${appColors.GEOMAP.DATA_LAYER_COLOR_12} 100%
+ );
`}
/>
void;
-}
-
-export function PledgesContributionsTimeCycleModule(props: Props) {
+export function PledgesContributionsTimeCycleModule() {
useTitle("The Data Explorer - Pledges & Contributions/Time cycle");
const [vizLevel, setVizLevel] = React.useState(0);
diff --git a/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx b/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx
index a2c50511f..c821809d8 100644
--- a/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/pledgescontributions/treemap/index.tsx
@@ -9,20 +9,15 @@ import { TreeMapNodeDatum } from "@nivo/treemap";
import { useTitle, useUpdateEffect } from "react-use";
import { useStoreActions, useStoreState } from "app/state/store/hooks";
/* project */
-import { InfoIcon } from "app/assets/icons/Info";
import { PageLoader } from "app/modules/common/page-loader";
-// import { SlideInContainer } from "app/components/SlideInPanel";
import { formatFinancialValue } from "app/utils/formatFinancialValue";
import { BudgetsTreemap } from "app/components/Charts/Budgets/Treemap";
-// import { TransitionContainer } from "app/components/TransitionContainer";
import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
import { BudgetsTreemapDataItem } from "app/components/Charts/Budgets/Treemap/data";
-// import { DisbursementsTreemap } from "app/components/Charts/Investments/Disbursements";
+import { appColors } from "app/theme";
export function PledgesContributionsTreemap() {
useTitle("The Data Explorer - Pledges & Contributions/Treemap");
- // const [vizLevel, setVizLevel] = React.useState(0);
- // const [vizTranslation, setVizTranslation] = React.useState({ x: 0, y: 0 });
const [vizSelected, setVizSelected] = React.useState
(
undefined
);
@@ -44,20 +39,6 @@ export function PledgesContributionsTreemap() {
const isLoading = useStoreState(
(state) => state.PledgesContributionsTreemap.loading
);
- // const fetchDrilldownData = useStoreActions(
- // (store) => store.DisbursementsTreemapDrilldown.fetch
- // );
- // const drilldownData = useStoreState(
- // (state) =>
- // get(
- // state.DisbursementsTreemapDrilldown.data,
- // "data",
- // []
- // ) as DisbursementsTreemapDataItem[]
- // );
- // const isDrilldownLoading = useStoreState(
- // (state) => state.DisbursementsTreemapDrilldown.loading
- // );
const [treemapData, setTreemapData] =
React.useState(data);
@@ -109,47 +90,8 @@ export function PledgesContributionsTreemap() {
);
}, [data, toolboxPanelDisbursementsSliderValues]);
- // useUpdateEffect(() => {
- // if (vizSelected) {
- // const splits = vizSelected.split("-");
- // if (splits.length > 0) {
- // const locations = [...appliedFilters.locations];
- // if (props.code) {
- // locations.push(props.code);
- // }
- // locations.push(splits[0]);
- // const filterString = getAPIFormattedFilters({
- // ...appliedFilters,
- // locations,
- // });
- // fetchDrilldownData({ filterString });
- // }
- // }
- // }, [vizSelected]);
-
const totalBudget = sumBy(treemapData, "value");
- // const vizDrilldowns = useStoreState(
- // (state) => state.PageHeaderVizDrilldownsState.value
- // );
- // const setVizDrilldowns = useStoreActions(
- // (actions) => actions.PageHeaderVizDrilldownsState.setValue
- // );
-
- // React.useEffect(() => {
- // if (props.vizLevel === 0) {
- // setVizDrilldowns([]);
- // }
- // if (props.vizLevel > 0 && props.vizSelected) {
- // setVizDrilldowns([
- // { name: "Dataset" },
- // { name: props.vizSelected.split("-")[0] },
- // ]);
- // }
- // }, [vizLevel, vizSelected]);
-
- // useUnmount(() => setVizDrilldowns([]));
-
if (isLoading) {
return ;
}
@@ -164,7 +106,7 @@ export function PledgesContributionsTreemap() {
margin-bottom: 20px;
> div {
- color: #262c34;
+ color: ${appColors.COMMON.PRIMARY_COLOR_1};
font-size: 14px;
}
@@ -190,7 +132,7 @@ export function PledgesContributionsTreemap() {
}
`}
>
- Donors {valueType}s
+ Donors {valueType}s
{formatFinancialValue(totalBudget)}
@@ -208,7 +150,6 @@ export function PledgesContributionsTreemap() {
: ""}
`}
>
- {/* */}
{
- // if (props.allowDrilldown) {
- // props.setVizLevel(1);
- // props.setVizSelected(node);
- // props.setVizTranslation({ x: x * -1, y: y * -1 });
- // } else if (props.onNodeClick && code) {
- // props.onNodeClick(code);
- // }
- }}
+ onNodeClick={(
+ _node: string,
+ _x: number,
+ _y: number,
+ _code?: string
+ ) => {}}
/>
- {/*
- {
- setVizLevel(0);
- setVizSelected(undefined);
- setVizTranslation({ x: 0, y: 0 });
- }}
- >
- {}}
- />
- */}
);
diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
index ffd6aa37a..742ead916 100644
--- a/src/app/theme/index.ts
+++ b/src/app/theme/index.ts
@@ -315,3 +315,427 @@ export default createTheme({
spacing: 8,
palette: ProjectPalette,
});
+
+// COMMON
+const WHITE = "#fff";
+
+const PRIMARY_COLOR_1 = "#262C34";
+const PRIMARY_COLOR_2 = "#495057";
+
+const SECONDARY_COLOR_1 = "#373D43";
+const SECONDARY_COLOR_2 = "#70777E";
+const SECONDARY_COLOR_3 = "#868E96";
+const SECONDARY_COLOR_4 = "#98A1AA";
+const SECONDARY_COLOR_5 = "#ADB5BD";
+const SECONDARY_COLOR_6 = "#CFD4DA";
+const SECONDARY_COLOR_7 = "#DFE3E6";
+const SECONDARY_COLOR_8 = "#F1F3F5";
+const SECONDARY_COLOR_9 = "#FFFFFF";
+const SECONDARY_COLOR_10 = "#F5F5F7";
+const SECONDARY_COLOR_11 = "#C7CDD1";
+const SECONDARY_COLOR_12 = "#595c70";
+const SECONDARY_COLOR_13 = "#13183F";
+const SECONDARY_COLOR_14 = "#ACAFBC";
+const SECONDARY_COLOR_15 = "#C4C4C4";
+const SECONDARY_COLOR_17 = "#1B2127";
+const SECONDARY_COLOR_18 = "#2E4063";
+const SECONDARY_COLOR_19 = "#525252";
+
+const GRAPH_COLOR_1 = "#B1BCC8";
+const GRAPH_COLOR_2 = "#D7D8DD";
+const GRAPH_COLOR_3 = "#F1ECEC";
+const GRAPH_COLOR_4 = "#FFFFFF";
+const GRAPH_COLOR_5 = "#E4EBF8";
+const GRAPH_COLOR_6 = "#D9D4FA";
+const GRAPH_COLOR_7 = "#C3C9EC";
+const GRAPH_COLOR_8 = "#CBD1D7";
+const GRAPH_COLOR_9 = "#D7D8DD";
+const GRAPH_COLOR_10 = "#ECE9E9";
+const GRAPH_COLOR_11 = "#F2F2F2";
+const GRAPH_COLOR_12 = "#E0E5ED";
+const GRAPH_COLOR_13 = "#DFDDF0";
+const GRAPH_COLOR_14 = "#D4D7E9";
+const GRAPH_COLOR_15 = "#FA7355";
+const GRAPH_COLOR_16 = "#FA9A55";
+const GRAPH_COLOR_17 = "#FFAA46";
+const GRAPH_COLOR_18 = "#FFD646";
+const GRAPH_COLOR_19 = "#DAFF46";
+const GRAPH_COLOR_20 = "#97FF46";
+const GRAPH_COLOR_21 = "#60FF46";
+const GRAPH_COLOR_22 = "#73D3CD";
+const GRAPH_COLOR_23 = "#11AD6B";
+
+const GRADIENT = "linear-gradient(90deg, #cdd4df 0%, #252c34 100%)";
+
+export const appColors = {
+ COMMON: {
+ WHITE,
+ PRIMARY_COLOR_1,
+ PRIMARY_COLOR_2,
+ SECONDARY_COLOR_1,
+ SECONDARY_COLOR_2,
+ SECONDARY_COLOR_3,
+ SECONDARY_COLOR_4,
+ SECONDARY_COLOR_5,
+ SECONDARY_COLOR_6,
+ SECONDARY_COLOR_7,
+ SECONDARY_COLOR_10,
+ SECONDARY_COLOR_11,
+ SECONDARY_COLOR_12,
+ SECONDARY_COLOR_13,
+ SECONDARY_COLOR_14,
+ SECONDARY_COLOR_15,
+ SECONDARY_COLOR_17,
+ SECONDARY_COLOR_18,
+ SECONDARY_COLOR_19,
+ COMMON_ICON_COLOR: WHITE,
+ PAGE_BACKGROUND_COLOR_1: WHITE,
+ PAGE_BACKGROUND_COLOR_2: SECONDARY_COLOR_10,
+ SELECTED_ITEM_VALUE_COLOR: "#E2E2E2",
+ },
+ GRAPH_COLORS: {
+ GRAPH_COLOR_1,
+ GRAPH_COLOR_2,
+ GRAPH_COLOR_3,
+ GRAPH_COLOR_4,
+ GRAPH_COLOR_5,
+ GRAPH_COLOR_6,
+ GRAPH_COLOR_7,
+ GRAPH_COLOR_8,
+ GRAPH_COLOR_9,
+ GRAPH_COLOR_10,
+ GRAPH_COLOR_11,
+ GRAPH_COLOR_12,
+ GRAPH_COLOR_13,
+ GRAPH_COLOR_14,
+ GRAPH_COLOR_15,
+ GRAPH_COLOR_16,
+ GRAPH_COLOR_17,
+ GRAPH_COLOR_18,
+ GRAPH_COLOR_19,
+ GRAPH_COLOR_20,
+ GRAPH_COLOR_21,
+ GRAPH_COLOR_22,
+ GRAPH_COLOR_23,
+ },
+ BREADCRUMBS: {
+ ITEM_BUTTON_BACKGROUND_COLOR: SECONDARY_COLOR_3,
+ ITEM_BUTTON_SELECTED_BACKGROUND_COLOR: PRIMARY_COLOR_2,
+ ITEM_BUTTON_COLOR: WHITE,
+ ITEM_ARROW_COLOR: PRIMARY_COLOR_2,
+ },
+ APPBAR: {
+ MOBILE_HEADER_CHEVRON_ICON_COLOR: WHITE,
+ DATASETS_MENU_SCROLLBAR_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ DATASETS_MENU_SCROLLBAR_TRACK_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ DATASETS_MENU_SCROLLBAR_THUMB_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ DATASETS_MENU_ITEM_COLOR: PRIMARY_COLOR_1,
+ DATASETS_MENU_ITEM_BORDER_BOTTOM_COLOR: SECONDARY_COLOR_7,
+ LINK_COLOR: PRIMARY_COLOR_1,
+ LINK_ACTIVE_COLOR: WHITE,
+ SEARCH_ICON_COLOR: PRIMARY_COLOR_1,
+ SEARCH_CLOSE_ICON_COLOR: WHITE,
+ SEARCH_ICON_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ },
+ BUDGETS_FLOW: {
+ NODE_STROKE_HOVER_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ MOBILE_TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_BACKGROUND_COLOR: WHITE,
+ MOBILE_TOOLTIP_CLOSE_ICON_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_DRILLDOWN_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_7,
+ },
+ TIME_CYCLE: {
+ NODE_STROKE_HOVER_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ MOBILE_TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_BACKGROUND_COLOR: WHITE,
+ MOBILE_TOOLTIP_CLOSE_ICON_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_DRILLDOWN_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_7,
+ PLEDGE_COLOR: "#BFCFEE",
+ CONTRIBUTION_COLOR: PRIMARY_COLOR_1,
+ AXIS_COLOR: SECONDARY_COLOR_3,
+ AXIS_TEXT_COLOR: PRIMARY_COLOR_1,
+ AXIS_GRID_COLOR: SECONDARY_COLOR_3,
+ },
+ TREEMAP: {
+ TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ TOOLTIP_BORDER_COLOR: SECONDARY_COLOR_7,
+ BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_PROGRESS_BAR_COLOR: SECONDARY_COLOR_1,
+ TOOLTIP_PROGRESS_BAR_BACKGROUND_COLOR: SECONDARY_COLOR_11,
+ MOBILE_TOOLTIP_BACKGROUND_COLOR: WHITE,
+ MOBILE_NODE_BACKGROUND_COLOR: SECONDARY_COLOR_12,
+ MOBILE_NODE_COLOR: WHITE,
+ CHILD_NODE_COLOR: WHITE,
+ NODE_COLOR: PRIMARY_COLOR_1,
+ },
+ GEOMAP: {
+ TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ TOOLTIP_BORDER_COLOR: SECONDARY_COLOR_7,
+ TOOLTIP_PROGRESS_BAR_COLOR: SECONDARY_COLOR_1,
+ TOOLTIP_PROGRESS_BAR_BACKGROUND_COLOR: SECONDARY_COLOR_11,
+ MOBILE_TOOLTIP_BACKGROUND_COLOR: WHITE,
+ LINE_COLOR: SECONDARY_COLOR_13,
+ NO_DATA_LAYER_COLOR: "#F7FAFF",
+ NO_DATA_BORDER_COLOR: SECONDARY_COLOR_11,
+ DATA_LAYER_COLOR_1: "#CDD4DF",
+ DATA_LAYER_COLOR_2: "#C0C7D2",
+ DATA_LAYER_COLOR_3: "#AFB6C1",
+ DATA_LAYER_COLOR_4: "#A0A7B1",
+ DATA_LAYER_COLOR_5: "#939AA4",
+ DATA_LAYER_COLOR_6: "#868D96",
+ DATA_LAYER_COLOR_7: "#787F88",
+ DATA_LAYER_COLOR_8: "#6B727B",
+ DATA_LAYER_COLOR_9: "#575E67",
+ DATA_LAYER_COLOR_10: "#444B53",
+ DATA_LAYER_COLOR_11: "#343B43",
+ DATA_LAYER_COLOR_12: PRIMARY_COLOR_1,
+ },
+ GRANTS: {
+ DETAIL_LINK_COLOR: "#000",
+ TEXT_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ TOOLTIP_BORDER_COLOR: SECONDARY_COLOR_7,
+ MOBILE_TOOLTIP_BACKGROUND_COLOR: WHITE,
+ MOBILE_TOOLTIP_BUTTON_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_BUTTON_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ MOBILE_TOOLTIP_BUTTON_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_7,
+ ITEM_LINE_COLOR: PRIMARY_COLOR_1,
+ LATEST_RATING_COLOR_1: "#3B873E",
+ LATEST_RATING_COLOR_2: "#7BC67E",
+ LATEST_RATING_COLOR_3: GRAPH_COLOR_17,
+ LATEST_RATING_COLOR_4: GRAPH_COLOR_16,
+ LATEST_RATING_COLOR_5: GRAPH_COLOR_15,
+ OUTLINE_COLOR: "#60647e",
+ COMPONENT_DIVIDER_COLOR: SECONDARY_COLOR_11,
+ },
+ ELIGIBILITY: {
+ DOT_CHART_BORDER_COLOR: SECONDARY_COLOR_14,
+ ELIGIBLE_COLOR: GRAPH_COLOR_23,
+ NOT_ELIGIBLE_COLOR: GRAPH_COLOR_15,
+ TRANSITION_FUNDING_COLOR: GRAPH_COLOR_18,
+ ITEM_BORDER_COLOR: SECONDARY_COLOR_17,
+ AXIS_TEXT_COLOR: PRIMARY_COLOR_1,
+ AXIS_GRID_COLOR: SECONDARY_COLOR_5,
+ },
+ NETWORK: {
+ GRAPH_LINK_COLOR: SECONDARY_COLOR_7,
+ ACHIEVEMENT_RATE_COLOR_1: GRAPH_COLOR_15,
+ ACHIEVEMENT_RATE_COLOR_2: GRAPH_COLOR_16,
+ ACHIEVEMENT_RATE_COLOR_3: GRAPH_COLOR_17,
+ ACHIEVEMENT_RATE_COLOR_4: GRAPH_COLOR_18,
+ ACHIEVEMENT_RATE_COLOR_5: GRAPH_COLOR_19,
+ ACHIEVEMENT_RATE_COLOR_6: GRAPH_COLOR_20,
+ ACHIEVEMENT_RATE_COLOR_7: GRAPH_COLOR_21,
+ ACHIEVEMENT_RATE_COLOR_8: GRAPH_COLOR_23,
+ EXPANDED_VIEW_SELECTOR_COLOR: PRIMARY_COLOR_1,
+ TABLE_BORDER_COLOR: SECONDARY_COLOR_5,
+ TABLE_ROW_COLOR: "transparent",
+ TABLE_ROW_SELECTED_COLOR: SECONDARY_COLOR_6,
+ EXPANDED_VIEW_TABS_LIST_SCROLLBAR_BACKGROUND_COLOR: "#ededf6",
+ EXPANDED_VIEW_TABS_LIST_SCROLLBAR_TRACK_BACKGROUND_COLOR: "#ededf6",
+ EXPANDED_VIEW_TABS_LIST_SCROLLBAR_THUMB_BACKGROUND_COLOR: "#2e4063",
+ EXPANDED_VIEW_TAB_ITEM_COLOR: SECONDARY_COLOR_13,
+ EXPANDED_VIEW_TAB_ITEM_ACTIVE_COLOR: WHITE,
+ EXPANDED_VIEW_TAB_ITEM_HOVER_COLOR: WHITE,
+ EXPANDED_VIEW_TAB_ITEM_BACKGROUND_COLOR: SECONDARY_COLOR_11,
+ EXPANDED_VIEW_TAB_ITEM_BACKGROUND_ACTIVE_COLOR: PRIMARY_COLOR_1,
+ EXPANDED_VIEW_TAB_ITEM_BACKGROUND_HOVER_COLOR: PRIMARY_COLOR_1,
+ TABLE_CIRCLE_INDICATOR_BACKGROUND_COLOR:
+ "repeating-linear-gradient(-45deg, #262c34 0 0.5px, #fff 1.5px 2px)",
+ TOOLTIP_BUTTON_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ TOOLTIP_BUTTON_TEXT_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_CONTAINER_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_CONTAINER_BACKGROUND_COLOR_1: PRIMARY_COLOR_1,
+ TOOLTIP_CONTAINER_BACKGROUND_COLOR_2: WHITE,
+ TOOLTIP_BOTTOM_BUTTON_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ TOOLTIP_BOTTOM_BUTTON_TEXT_COLOR: WHITE,
+ TOOLTIP_BOTTOM_BUTTON_BORDER_COLOR: WHITE,
+ },
+ PERFORMANCE_RATING: {
+ NODE_COLOR: SECONDARY_COLOR_17,
+ AXIS_COLOR: SECONDARY_COLOR_3,
+ AXIS_TEXT_COLOR: PRIMARY_COLOR_1,
+ AXIS_GRID_COLOR: SECONDARY_COLOR_3,
+ },
+ ALLOCATIONS: {
+ TEXT_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_BACKGROUND_COLOR: WHITE,
+ MOBILE_TOOLTIP_BORDER_COLOR: SECONDARY_COLOR_7,
+ MOBILE_TOOLTIP_CLOSE_ICON_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_DRILLDOWN_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ MOBILE_TOOLTIP_DRILLDOWN_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_7,
+ RADIAL_TRACK_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ RADIAL_DATA_LABELS_COLOR: PRIMARY_COLOR_1,
+ RADIAL_CENTER_LABEL_HOVER_COLOR: SECONDARY_COLOR_6,
+ },
+ MOBILE_VIEWS_CONTROL: {
+ MENU_PAPER_BORDER_COLOR: "#d3d4d5",
+ MENU_SCROLLBAR_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ MENU_SCROLLBAR_TRACK_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ MENU_SCROLLBAR_THUMB_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ MENU_ITEM_BORDER_COLOR: SECONDARY_COLOR_7,
+ MENU_ITEM_COLOR: PRIMARY_COLOR_1,
+ BUTTON_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ BUTTON_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_7,
+ LINK_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ LINK_BACKGROUND_SELECTED_COLOR: SECONDARY_COLOR_7,
+ LINK_ICON_COLOR: "#868A9D",
+ LINK_ICON_SELECTED_COLOR: WHITE,
+ BUTTON_COLOR: SECONDARY_COLOR_7,
+ BUTTON_SELECTED_COLOR: WHITE,
+ BUTTON_BACKGROUND_SELECTED_COLOR: WHITE,
+ },
+ MOBILE_FILTER_BAR: {
+ CHIP_COLOR: PRIMARY_COLOR_1,
+ CHIP_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ CHIP_DELETE_BUTTON_COLOR: PRIMARY_COLOR_1,
+ CONTAINER_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ LABEL_COLOR: WHITE,
+ SCROLLBAR_BACKGROUND_COLOR: "#ededf6",
+ SCROLLBAR_TRACK_BACKGROUND_COLOR: WHITE,
+ SCROLLBAR_THUMB_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ },
+ TABS: {
+ SCROLLBAR_BACKGROUND_COLOR: "#ededf6",
+ SCROLLBAR_TRACK_BACKGROUND_COLOR: "#ededf6",
+ SCROLLBAR_THUMB_BACKGROUND_COLOR: "#2e4063",
+ ITEM_BACKGROUND_COLOR: SECONDARY_COLOR_11,
+ ITEM_BACKGROUND_ACTIVE_COLOR: PRIMARY_COLOR_1,
+ ITEM_BACKGROUND_HOVER_COLOR: PRIMARY_COLOR_1,
+ LINK_COLOR: SECONDARY_COLOR_13,
+ LINK_ACTIVE_COLOR: WHITE,
+ LINK_HOVER_COLOR: WHITE,
+ },
+ PAGE_HEADER: {
+ CONTAINER_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ TITLE_COLOR: PRIMARY_COLOR_1,
+ },
+ SEARCH: {
+ CONTAINER_BACKGROUND: WHITE,
+ TAB_TEXT_COLOR: PRIMARY_COLOR_1,
+ TAB_BORDER_COLOR: "transparent",
+ TAB_BORDER_ACTIVE_COLOR: PRIMARY_COLOR_1,
+ TAB_BORDER_HOVER_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TAB_ACTIVE_COLOR: WHITE,
+ MOBILE_TAB_ACTIVE_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ MOBILE_TAB_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ RESULT_BORDER_COLOR: SECONDARY_COLOR_7,
+ RESULT_HOVER_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ RESULT_HOVER_TEXT_COLOR: WHITE,
+ RESULT_TEXT_COLOR: PRIMARY_COLOR_1,
+ CATEGORY_ICONS_COLOR: "#868A9D",
+ DROPDOWN_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ DROPDOWN_SCROLLBAR_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ DROPDOWN_SCROLLBAR_TRACK_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ DROPDOWN_SCROLLBAR_THUMB_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ DROPDOWN_ITEM_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ DROPDOWN_ITEM_HOVER_COLOR: WHITE,
+ DROPDOWN_ITEM_HOVER_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ DROPDOWN_ITEM_ACTIVE_COLOR: WHITE,
+ DROPDOWN_ITEM_ACTIVE_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ DROPDOWN_BUTTON_BACKGROUND_COLOR: SECONDARY_COLOR_6,
+ DROPDOWN_BUTTON_TEXT_HOVER_COLOR: WHITE,
+ DROPDOWN_BUTTON_BACKGROUND_HOVER_COLOR: PRIMARY_COLOR_1,
+ DROPDOWN_BUTTON_TEXT_COLOR: PRIMARY_COLOR_1,
+ CONTAINER_BORDER_COLOR: PRIMARY_COLOR_1,
+ INPUT_COLOR: PRIMARY_COLOR_1,
+ INPUT_BACKGROUND_COLOR: WHITE,
+ },
+ TABLE: {
+ BORDER_BOTTOM_COLOR: SECONDARY_COLOR_7,
+ ROW_BACKGROUND_COLOR_1: WHITE,
+ ROW_BACKGROUND_COLOR_2: SECONDARY_COLOR_1,
+ ROW_BACKGROUND_HOVER_COLOR: PRIMARY_COLOR_1,
+ ROW_TEXT_HOVER_COLOR: WHITE,
+ ROW_TEXT_COLOR: PRIMARY_COLOR_1,
+ DOWNLOAD_ICON_COLOR: PRIMARY_COLOR_2,
+ TOOLBAR_BACKGROUND_COLOR: "#dfe3e5",
+ TOOLBAR_ICON_BUTTON_HOVER_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ TOOLBAR_ICON_BUTTON_HOVER_COLOR: WHITE,
+ TOOLBAR_SEARCH_TEXT_COLOR: PRIMARY_COLOR_1,
+ TOOLBAR_SEARCH_BACKGROUND_COLOR: WHITE,
+ TOOLBAR_ICON_COLOR: PRIMARY_COLOR_1,
+ },
+ TOOLBOX: {
+ SECTION_BORDER_BOTTOM_COLOR: SECONDARY_COLOR_7,
+ FILTERS_SCROLLBAR_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ FILTERS_SCROLLBAR_TRACK_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ FILTERS_SCROLLBAR_THUMB_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ VIEWS_ICON_COLOR: "#868A9D",
+ VIEWS_ICON_ACTIVE_COLOR: SECONDARY_COLOR_13,
+ MENU_EXPORT_BORDER_COLOR: "#d3d4d5",
+ MENU_EXPORT_TEXT_COLOR: PRIMARY_COLOR_1,
+ REPORTING_PERIODS_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ FILTERS_EXPANDED_GROUP_SEARCH_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ FILTERS_EXPANDED_GROUP_SEARCH_ICON_COLOR: SECONDARY_COLOR_4,
+ FILTERS_EXPANDED_GROUP_SEARCH_TEXT_COLOR: PRIMARY_COLOR_1,
+ FILTERS_EXPANDED_GROUP_APPLY_BUTTON_TEXT_COLOR: WHITE,
+ FILTERS_EXPANDED_GROUP_APPLY_BUTTON_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ FILTER_PILL_TEXT_COLOR: PRIMARY_COLOR_1,
+ FILTER_PILL_BACKGROUND_COLOR: WHITE,
+ BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ BUTTON_COLOR: WHITE,
+ BUTTON_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ BUTTON_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_13,
+ },
+ LOCATION: {
+ OVERVIEW_VISUALISATION_COLORS: ["#727F95", "#21262B", "#595C70"],
+ },
+ GRANT_LIST: {
+ DIVIDER: SECONDARY_COLOR_7,
+ PROGRESS_BAR_COLOR: SECONDARY_COLOR_1,
+ PROGRESS_BAR_BACKGROUND_COLOR: SECONDARY_COLOR_11,
+ ITEM_TEXT_COLOR: PRIMARY_COLOR_1,
+ ITEM_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ ITEM_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_13,
+ ITEM_TEXT_HOVER_COLOR: WHITE,
+ SEARCH_CONTAINER_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ SEARCH_INPUT_COLOR: PRIMARY_COLOR_1,
+ SEARCH_INPUT_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ },
+ DATASETS_GRID: {
+ ITEM_TEXT_COLOR: PRIMARY_COLOR_1,
+ ITEM_BACKGROUND_COLOR: WHITE,
+ ITEM_BORDER_HOVER_COLOR: SECONDARY_COLOR_13,
+ ICON_LINK_COLOR: "#868a9d",
+ ICON_LINK_HOVER_COLOR: SECONDARY_COLOR_13,
+ },
+ RESULTS_LIST: {
+ ITEM_TEXT_COLOR: PRIMARY_COLOR_1,
+ ITEM_BACKGROUND_COLOR: SECONDARY_COLOR_10,
+ ITEM_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_13,
+ ITEM_TEXT_HOVER_COLOR: WHITE,
+ ITEM_ACTIVE_COLOR: SECONDARY_COLOR_11,
+ ITEM_ACTIVE_BORDER_COLOR: SECONDARY_COLOR_13,
+ ITEM_BUTTON_UP_COLOR: WHITE,
+ ITEM_BUTTON_DOWN_COLOR: PRIMARY_COLOR_1,
+ ITEM_BUTTON_UP_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ ITEM_BUTTON_DOWN_BACKGROUND_COLOR: "transparent",
+ ITEM_BUTTON_BORDER_COLOR: SECONDARY_COLOR_7,
+ LOCATION_LIST_ITEM_COLOR: WHITE,
+ LOCATION_LIST_BACKGROUND_COLOR: PRIMARY_COLOR_1,
+ },
+ RANGE_SLIDER: {
+ TRACK_BACKGROUND_COLOR: "linear-gradient(to right,#fff,#7e8a96,#0a0b0c)",
+ THUMB_BOX_SHADOW_COLOR: "#AAA",
+ },
+ ABOUT_PAGE: {
+ LINK_COLOR: "#000",
+ LINK_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+ LINK_BORDER_COLOR: SECONDARY_COLOR_7,
+ },
+};