diff --git a/src/app/components/chart-block/components/button-toolbar/index.tsx b/src/app/components/chart-block/components/button-toolbar/index.tsx index 95fa2c82e..dde7bbbdb 100644 --- a/src/app/components/chart-block/components/button-toolbar/index.tsx +++ b/src/app/components/chart-block/components/button-toolbar/index.tsx @@ -80,12 +80,12 @@ const SharePanel: React.FC = ( if (url.endsWith("/")) { url = url.slice(0, -1); } + let chartType = props.chartType; + if (chartType) { + chartType = `|${chartType}`; + } navigator.clipboard.writeText( - type === "code" - ? "" - : `${url}#${props.hashId}${ - props.chartType ? `|${props.chartType}` : "" - }` + type === "code" ? "" : `${url}#${props.hashId}${chartType}` ); setFeedbackMessage(`${type} copied!`); }; diff --git a/src/app/components/charts/bar-series/data.tsx b/src/app/components/charts/bar-series/data.tsx index 8e0f18c7f..3c381c758 100644 --- a/src/app/components/charts/bar-series/data.tsx +++ b/src/app/components/charts/bar-series/data.tsx @@ -1,5 +1,3 @@ -import { appColors } from "app/theme"; - export interface BarSeriesChartDataItem { name: string; values: number[]; diff --git a/src/app/components/charts/bar-series/index.tsx b/src/app/components/charts/bar-series/index.tsx index c14f302a3..3dc2321d2 100644 --- a/src/app/components/charts/bar-series/index.tsx +++ b/src/app/components/charts/bar-series/index.tsx @@ -224,8 +224,7 @@ export const BarSeriesChart: React.FC = ( show: true, ...chartTooltipCommonConfig(isTouch), formatter: (params: any) => { - const html = ReactDOMServer.renderToString(); - return html; + return ReactDOMServer.renderToString(); }, }, }; diff --git a/src/app/components/charts/bar/index.tsx b/src/app/components/charts/bar/index.tsx index d7c5aeddb..cc4e29087 100644 --- a/src/app/components/charts/bar/index.tsx +++ b/src/app/components/charts/bar/index.tsx @@ -275,8 +275,7 @@ export const BarChart: React.FC = (props: BarChartProps) => { show: true, ...chartTooltipCommonConfig(isTouch), formatter: (params: any) => { - const html = ReactDOMServer.renderToString(); - return html; + return ReactDOMServer.renderToString(); }, }, }; diff --git a/src/app/components/charts/expandable-horizontal-bar/index.tsx b/src/app/components/charts/expandable-horizontal-bar/index.tsx index 3735ed867..4c9f25239 100644 --- a/src/app/components/charts/expandable-horizontal-bar/index.tsx +++ b/src/app/components/charts/expandable-horizontal-bar/index.tsx @@ -308,8 +308,7 @@ export const ExpandableHorizontalBar: React.FC< show: true, ...chartTooltipCommonConfig(isTouch), formatter: (params: any) => { - const html = ReactDOMServer.renderToString(); - return html; + return ReactDOMServer.renderToString(); }, }, }; @@ -338,11 +337,11 @@ export const ExpandableHorizontalBar: React.FC< item.items && item.items.length > 0 ) { - item.items.forEach((item) => { - newData.push(item); - if (expandedBars.includes(item.name) && item.items) { - item.items.forEach((item) => { - newData.push(item); + item.items.forEach((subItem) => { + newData.push(subItem); + if (expandedBars.includes(subItem.name) && subItem.items) { + subItem.items.forEach((subSubItem) => { + newData.push(subSubItem); }); } }); @@ -390,7 +389,7 @@ export const ExpandableHorizontalBar: React.FC< yAxis: { data: xAxisKeys, }, - series: seriesData.map((values, index) => ({ + series: seriesData.map((values) => ({ data: values, })), }); diff --git a/src/app/components/charts/heatmap/index.tsx b/src/app/components/charts/heatmap/index.tsx index 6940d6c2c..dbbf604a2 100644 --- a/src/app/components/charts/heatmap/index.tsx +++ b/src/app/components/charts/heatmap/index.tsx @@ -78,10 +78,10 @@ export function Heatmap(props: HeatmapProps) { props.data .filter((item) => item.parentRow === name) .map((item) => { - const name = item.row; - const children = uniqBy( + const subName = item.row; + const subChildren = uniqBy( props.data - .filter((subitem) => subitem.parentRow === name) + .filter((subitem) => subitem.parentRow === subName) .map((subitem) => ({ name: subitem.row, expanded: false, @@ -90,9 +90,9 @@ export function Heatmap(props: HeatmapProps) { "name" ); return { - name, - expanded: expandedRows.includes(name), - children: children.length > 0 ? children : undefined, + name: subName, + expanded: expandedRows.includes(subName), + children: subChildren.length > 0 ? subChildren : undefined, level: 1, }; }), @@ -125,10 +125,10 @@ export function Heatmap(props: HeatmapProps) { props.data .filter((item) => item.parentColumn === name) .map((item) => { - const name = item.column; - const children = uniqBy( + const subName = item.column; + const subChildren = uniqBy( props.data - .filter((subitem) => subitem.parentColumn === name) + .filter((subitem) => subitem.parentColumn === subName) .map((subitem) => ({ name: subitem.column, expanded: false, @@ -137,10 +137,10 @@ export function Heatmap(props: HeatmapProps) { "name" ); return { - name, level: 1, - expanded: expandedColumns.includes(name), - children: children.length > 0 ? children : undefined, + name: subName, + expanded: expandedColumns.includes(subName), + children: subChildren.length > 0 ? subChildren : undefined, }; }), "name" diff --git a/src/app/components/charts/line/index.tsx b/src/app/components/charts/line/index.tsx index 6e30f1380..131f34723 100644 --- a/src/app/components/charts/line/index.tsx +++ b/src/app/components/charts/line/index.tsx @@ -204,10 +204,9 @@ export const LineChart: React.FC = (props: LineChartProps) => { .forEach((value: number) => { cumulative += value; }); - const html = ReactDOMServer.renderToString( + return ReactDOMServer.renderToString( ); - return html; }, }, }; diff --git a/src/app/components/charts/pie/index.tsx b/src/app/components/charts/pie/index.tsx index 714dcc05e..406242c03 100644 --- a/src/app/components/charts/pie/index.tsx +++ b/src/app/components/charts/pie/index.tsx @@ -113,8 +113,7 @@ export const PieChart: React.FC = (props: PieChartProps) => { show: true, ...chartTooltipCommonConfig(isTouch), formatter: (params: any) => { - const html = ReactDOMServer.renderToString(); - return html; + return ReactDOMServer.renderToString(); }, }, }; diff --git a/src/app/components/charts/radial/index.tsx b/src/app/components/charts/radial/index.tsx index 1cd115bfa..a6926fc09 100644 --- a/src/app/components/charts/radial/index.tsx +++ b/src/app/components/charts/radial/index.tsx @@ -167,14 +167,13 @@ export const RadialChart: React.FC = ( show: true, ...chartTooltipCommonConfig(isTouch), formatter: (params: any) => { - const html = ReactDOMServer.renderToString( + return ReactDOMServer.renderToString( ); - return html; }, }, }; diff --git a/src/app/components/charts/sankey/data.ts b/src/app/components/charts/sankey/data.ts index fd2bcda04..fe76a1f15 100644 --- a/src/app/components/charts/sankey/data.ts +++ b/src/app/components/charts/sankey/data.ts @@ -1,5 +1,3 @@ -import { appColors } from "app/theme"; - interface SankeyChartNode { name: string; level: number; diff --git a/src/app/components/charts/sankey/index.tsx b/src/app/components/charts/sankey/index.tsx index 2c8772c6b..534d45063 100644 --- a/src/app/components/charts/sankey/index.tsx +++ b/src/app/components/charts/sankey/index.tsx @@ -179,7 +179,7 @@ export const SankeyChart: React.FC = ( ); } - const html = ReactDOMServer.renderToString( + return ReactDOMServer.renderToString( = ( totalValue={totalValue} /> ); - return html; }, }, }; diff --git a/src/app/components/charts/sankey/tooltip.tsx b/src/app/components/charts/sankey/tooltip.tsx index 2bcc0192e..a894e96ea 100644 --- a/src/app/components/charts/sankey/tooltip.tsx +++ b/src/app/components/charts/sankey/tooltip.tsx @@ -26,12 +26,12 @@ export const SankeyChartTooltip: React.FC = ( }[] = []; const items = props.data.links.filter((link) => link.source === props.name); items.forEach((item) => { - const node = props.data.nodes.find((node) => node.name === item.target); + const node = props.data.nodes.find((n) => n.name === item.target); const itemValue = props.data.links .filter( (link) => link.target === item.target && link.source === props.name ) - .reduce((acc, item) => acc + item.value, 0); + .reduce((acc, item2) => acc + item2.value, 0); returnItems.push({ value: itemValue, name: item.target, diff --git a/src/app/components/charts/sunburst/index.tsx b/src/app/components/charts/sunburst/index.tsx index 5e268cf82..16bf3d6c9 100644 --- a/src/app/components/charts/sunburst/index.tsx +++ b/src/app/components/charts/sunburst/index.tsx @@ -133,10 +133,9 @@ export const SunburstChart: React.FC = ( show: true, ...chartTooltipCommonConfig(isTouch), formatter: (params: any) => { - const html = ReactDOMServer.renderToString( + return ReactDOMServer.renderToString( ); - return html; }, }, }; diff --git a/src/app/components/charts/treemap/index.tsx b/src/app/components/charts/treemap/index.tsx index a94011a54..726f5a322 100644 --- a/src/app/components/charts/treemap/index.tsx +++ b/src/app/components/charts/treemap/index.tsx @@ -162,10 +162,9 @@ export const Treemap: React.FC = (props: TreemapProps) => { show: true, ...chartTooltipCommonConfig(isTouch), formatter: (params: any) => { - const html = ReactDOMServer.renderToString( + return ReactDOMServer.renderToString( ); - return html; }, }, }; @@ -183,10 +182,9 @@ export const Treemap: React.FC = (props: TreemapProps) => { }, tooltip: { formatter: (params: any) => { - const html = ReactDOMServer.renderToString( + return ReactDOMServer.renderToString( ); - return html; }, }, }); diff --git a/src/app/components/search/components/results/index.tsx b/src/app/components/search/components/results/index.tsx index e98049200..23c069f7c 100644 --- a/src/app/components/search/components/results/index.tsx +++ b/src/app/components/search/components/results/index.tsx @@ -71,7 +71,7 @@ export function SearchResults(props: SearchResultsProps) { key={result.value} scroll={(el) => { const yCoordinate = - el.getBoundingClientRect().top + window.pageYOffset; + el.getBoundingClientRect().top + window.scrollY; const yOffset = -130; window.scrollTo({ top: yCoordinate + yOffset, diff --git a/src/app/components/search/data.tsx b/src/app/components/search/data.tsx index 731d7f8d2..1aa18e70b 100644 --- a/src/app/components/search/data.tsx +++ b/src/app/components/search/data.tsx @@ -1,11 +1,11 @@ import { AllCategoriesIcon, - DocumentsIcon, - DonorsIcon, + // DocumentsIcon, + // DonorsIcon, GrantsIcon, LocationsIcon, - PartnersIcon, - ResultsIcon, + // PartnersIcon, + // ResultsIcon, } from "app/components/search/icons"; export const categories = [ diff --git a/src/app/components/table-container/TableContainer.stories.tsx b/src/app/components/table-container/TableContainer.stories.tsx index b23d4ee4b..7a0362322 100644 --- a/src/app/components/table-container/TableContainer.stories.tsx +++ b/src/app/components/table-container/TableContainer.stories.tsx @@ -6,14 +6,6 @@ import { withRouter } from "storybook-addon-remix-react-router"; import { TABLE_VARIATION_1_DATA, TABLE_VARIATION_1_COLUMNS, - TABLE_VARIATION_2_DATA, - TABLE_VARIATION_2_COLUMNS, - TABLE_VARIATION_3_DATA, - TABLE_VARIATION_3_COLUMNS, - TABLE_VARIATION_4_DATA, - TABLE_VARIATION_4_COLUMNS, - TABLE_VARIATION_5_DATA, - TABLE_VARIATION_5_COLUMNS, } from "app/components/table/data"; const Variant2Wrapper = (args: any) => { diff --git a/src/app/components/table-container/index.tsx b/src/app/components/table-container/index.tsx index e7f56dbf8..aea274b85 100644 --- a/src/app/components/table-container/index.tsx +++ b/src/app/components/table-container/index.tsx @@ -21,7 +21,7 @@ import { ReactComponent as FullscreenIcon } from "app/assets/vectors/TableToolba export const TableContainer: React.FC = ( props: TableContainerProps ) => { - const [table, setTable] = React.useState(null); + // const [table, setTable] = React.useState(null); const [columns, setColumns] = React.useState( props.columns.map((column) => ({ ...column, @@ -42,15 +42,15 @@ export const TableContainer: React.FC = ( const fullscreenRef = React.useRef(null); - React.useEffect(() => { - const element = document.getElementById("table"); - if (element) { - const tabulatorTables = Tabulator.findTable("#table"); - if (tabulatorTables.length > 0 && tabulatorTables[0]) { - setTable(tabulatorTables[0]); - } - } - }, []); + // React.useEffect(() => { + // const element = document.getElementById("table"); + // if (element) { + // const tabulatorTables = Tabulator.findTable("#table"); + // if (tabulatorTables.length > 0 && tabulatorTables[0]) { + // setTable(tabulatorTables[0]); + // } + // } + // }, []); // const download = () => { // if (table) { diff --git a/src/app/components/table/data.ts b/src/app/components/table/data.ts index 273880042..b04cacb0b 100644 --- a/src/app/components/table/data.ts +++ b/src/app/components/table/data.ts @@ -7,10 +7,18 @@ import { TabulatorFull as Tabulator, } from "tabulator-tables"; +export type TableDataItem = + | string + | number + | boolean + | null + | object + | Array; + export interface TableProps { id: string; data: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[]; columns: ColumnDefinition[]; dataTree?: boolean; @@ -56,7 +64,6 @@ export const cellBGColorFormatter = (cell: CellComponent) => { backgroundColor = appColors.ELIGIBILITY.DISEASE_BURDEN_COLORS[5]; break; case "NA": - backgroundColor = "#FFFFFF"; break; default: text = cellValue.toString(); @@ -103,7 +110,7 @@ export const TABLE_VARIATION_1_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_1_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "Africa", @@ -327,7 +334,7 @@ export const TABLE_VARIATION_2_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_2_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { components: "HIV", @@ -497,7 +504,7 @@ export const TABLE_VARIATION_3_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_3_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "Algeria", @@ -600,7 +607,7 @@ export const TABLE_VARIATION_4_COLUMNS: ColumnDefinition[] = [ title: "2020", field: "2020", formatter: (cell: CellComponent) => { - var tableEl = document.createElement("div"); + const tableEl = document.createElement("div"); cell.getElement().appendChild(tableEl); const data = cell.getValue(); @@ -629,7 +636,7 @@ export const TABLE_VARIATION_4_COLUMNS: ColumnDefinition[] = [ title: "2021", field: "2021", formatter: (cell: CellComponent) => { - var tableEl = document.createElement("div"); + const tableEl = document.createElement("div"); cell.getElement().appendChild(tableEl); const data = cell.getValue(); @@ -657,7 +664,7 @@ export const TABLE_VARIATION_4_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_4_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "TB CARE AND PREVENTION", @@ -826,7 +833,7 @@ export const TABLE_VARIATION_5_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_5_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { grantId: "AFG-H-MOH001", @@ -875,7 +882,7 @@ export const TABLE_VARIATION_6_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_6_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "Kenya", @@ -1017,7 +1024,7 @@ export const TABLE_VARIATION_7_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_7_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { description: "People on antiretroviral therapy for HIV", @@ -1085,7 +1092,7 @@ export const TABLE_VARIATION_8_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_8_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "Affordable Medicines Facility - malaria (AMFm)", @@ -1926,7 +1933,7 @@ export const TABLE_VARIATION_9_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_9_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "2022", @@ -3495,7 +3502,7 @@ export const TABLE_VARIATION_10_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_10_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "Algeria", @@ -3805,7 +3812,7 @@ export const TABLE_VARIATION_11_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_11_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "Afghanistan", @@ -6400,7 +6407,7 @@ export const TABLE_VARIATION_12_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_12_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { components: "Afghanistan", @@ -7434,7 +7441,7 @@ export const TABLE_VARIATION_13_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_13_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { component: "HIV/AIDS", @@ -7502,7 +7509,7 @@ export const TABLE_VARIATION_14_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_14_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "Capacity Building and Technical Assistance", @@ -7637,7 +7644,7 @@ export const TABLE_VARIATION_15_COLUMNS: ColumnDefinition[] = [ ]; export const TABLE_VARIATION_15_DATA: { - [key: string]: string | number | boolean | null | object | Array; + [key: string]: TableDataItem; }[] = [ { name: "HIV/AIDS", diff --git a/src/app/components/table/index.tsx b/src/app/components/table/index.tsx index 4dd2c0df3..8e6a7ae40 100644 --- a/src/app/components/table/index.tsx +++ b/src/app/components/table/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import Box from "@mui/material/Box"; import { TableProps } from "app/components/table/data"; import "tabulator-tables/dist/css/tabulator_simple.min.css"; -import { TabulatorFull as Tabulator } from "tabulator-tables"; +import { RowComponent, TabulatorFull as Tabulator } from "tabulator-tables"; const ExpandElement = ``; const CollapseElement = ``; @@ -14,6 +14,16 @@ export const Table: React.FC = (props: TableProps) => { React.useEffect(() => { if (ref.current) { + let dataTreeStartExpanded: + | boolean + | boolean[] + | ((row: RowComponent, level: number) => boolean) + | undefined = false; + if (props.dataTreeStartExpanded) { + dataTreeStartExpanded = Boolean(props.dataTreeStartExpanded); + } else if (props.dataTreeStartExpandedFn) { + dataTreeStartExpanded = props.dataTreeStartExpandedFn; + } const table = new Tabulator(ref.current, { height: props.data.length > 20 ? "500px" : "auto", data: props.data, @@ -28,11 +38,7 @@ export const Table: React.FC = (props: TableProps) => { dataTreeExpandElement: ExpandElement, dataTreeCollapseElement: CollapseElement, dataTreeBranchElement: props.dataTreeBranchElement, - dataTreeStartExpanded: props.dataTreeStartExpanded - ? Boolean(props.dataTreeStartExpanded) - : props.dataTreeStartExpandedFn - ? props.dataTreeStartExpandedFn - : false, + dataTreeStartExpanded, }); table.on("dataTreeRowExpanded", (_, level) => { diff --git a/src/app/hooks/useFilterOptions.tsx b/src/app/hooks/useFilterOptions.tsx index b92052582..481ea220b 100644 --- a/src/app/hooks/useFilterOptions.tsx +++ b/src/app/hooks/useFilterOptions.tsx @@ -1,7 +1,5 @@ import React from "react"; import get from "lodash/get"; -import find from "lodash/find"; -import { useLocation } from "react-router-dom"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; interface FilterGroupOptionModel {} @@ -29,7 +27,6 @@ export interface UseFilterOptionsReturn { export function useFilterOptions( props: UseFilterOptionsProps ): null | UseFilterOptionsReturn { - const location = useLocation(); const getLocations = useStoreActions( (store) => store.LocationFilterOptions.fetch ); diff --git a/src/app/pages/datasets/access-to-funding/index.tsx b/src/app/pages/datasets/access-to-funding/index.tsx index 894da93ae..2f584fb2e 100644 --- a/src/app/pages/datasets/access-to-funding/index.tsx +++ b/src/app/pages/datasets/access-to-funding/index.tsx @@ -86,8 +86,8 @@ export const AccessToFundingPage: React.FC = () => { return { ...item, top: true, - _children: item._children.map((item: any) => ({ - ...item, + _children: item._children.map((subItem: any) => ({ + ...subItem, top: true, })), }; @@ -165,8 +165,8 @@ export const AccessToFundingPage: React.FC = () => { return { ...item, top: true, - _children: item._children.map((item: any) => ({ - ...item, + _children: item._children.map((subItem: any) => ({ + ...subItem, top: true, })), }; @@ -188,11 +188,11 @@ export const AccessToFundingPage: React.FC = () => { return { ...item, top: true, - _children: item._children.map((item: any) => ({ - ...item, + _children: item._children.map((subItem: any) => ({ + ...subItem, top: true, - _children: item._children.map((subitem: any) => ({ - ...subitem, + _children: subItem._children.map((subSubItem: any) => ({ + ...subSubItem, top: true, })), })), @@ -445,12 +445,12 @@ export const AccessToFundingPage: React.FC = () => { ]); const filterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( appliedFiltersData.locations.length > 0 && location.search.includes("locations=") ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( appliedFiltersData.locations.join(",") )}`; } @@ -458,23 +458,21 @@ export const AccessToFundingPage: React.FC = () => { appliedFiltersData.components.length > 0 && location.search.includes("components=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( appliedFiltersData.components.join(",") )}`; } - return filterString; + return value; }, [appliedFiltersData, location.search]); const chart1FilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chart1AppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chart1AppliedFiltersData.locations, @@ -486,9 +484,7 @@ export const AccessToFundingPage: React.FC = () => { location.search.includes("components=")) || chart1AppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chart1AppliedFiltersData.components, @@ -500,26 +496,24 @@ export const AccessToFundingPage: React.FC = () => { location.search.includes("cycles=")) || chart1AppliedFiltersData.cycles.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }cycles=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}cycles=${encodeURIComponent( uniq([ ...appliedFiltersData.cycles, ...chart1AppliedFiltersData.cycles, ]).join(",") )}`; } - return filterString; + return value; }, [appliedFiltersData, chart1AppliedFiltersData, location.search]); const chart2FilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chart2AppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chart2AppliedFiltersData.locations, @@ -531,9 +525,7 @@ export const AccessToFundingPage: React.FC = () => { location.search.includes("components=")) || chart2AppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chart2AppliedFiltersData.components, @@ -541,11 +533,11 @@ export const AccessToFundingPage: React.FC = () => { )}`; } if (allocationCycleDropdownSelected) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }cycles=${encodeURIComponent(allocationCycleDropdownSelected)}`; + value += `${value.length > 0 ? "&" : ""}cycles=${encodeURIComponent( + allocationCycleDropdownSelected + )}`; } - return filterString; + return value; }, [ location.search, appliedFiltersData, @@ -554,13 +546,13 @@ export const AccessToFundingPage: React.FC = () => { ]); const chart3FilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chart3AppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chart3AppliedFiltersData.locations, @@ -572,9 +564,7 @@ export const AccessToFundingPage: React.FC = () => { location.search.includes("components=")) || chart3AppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chart3AppliedFiltersData.components, @@ -586,16 +576,14 @@ export const AccessToFundingPage: React.FC = () => { location.search.includes("cycles=")) || chart3AppliedFiltersData.cycles.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }periods=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}periods=${encodeURIComponent( uniq([ ...appliedFiltersData.cycles.map((c) => c.split("-")[0]), ...chart3AppliedFiltersData.cycles.map((c) => c.split("-")[0]), ]).join(",") )}`; } - return filterString; + return value; }, [appliedFiltersData, chart3AppliedFiltersData, location.search]); const range = React.useMemo(() => { @@ -690,14 +678,9 @@ export const AccessToFundingPage: React.FC = () => { if (location.hash) { const blockId = location.hash.slice(1).split("|")[0]; const blockChartType = location.hash.slice(1).split("|")[1]; - if (blockId && blockChartType) { - switch (blockId) { - case "disbursements": - setDropdownSelected(decodeURIComponent(blockChartType)); - break; - default: - break; - } + if (blockId && blockChartType && blockId === "allocation") { + setDropdownSelected(decodeURIComponent(blockChartType)); + break; } } }, [location.hash]); diff --git a/src/app/pages/datasets/annual-results/index.tsx b/src/app/pages/datasets/annual-results/index.tsx index 01a69b454..e46a6f40d 100644 --- a/src/app/pages/datasets/annual-results/index.tsx +++ b/src/app/pages/datasets/annual-results/index.tsx @@ -257,12 +257,12 @@ export const AnnualResultsPage: React.FC = () => { }, [dataLocationFilterOptions, dataComponentFilterOptions]); const filterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( appliedFiltersData.locations.length > 0 && location.search.includes("locations=") ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( appliedFiltersData.locations.join(",") )}`; } @@ -270,23 +270,21 @@ export const AnnualResultsPage: React.FC = () => { appliedFiltersData.components.length > 0 && location.search.includes("components=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( appliedFiltersData.components.join(",") )}`; } - return filterString; + return value; }, [appliedFiltersData, location.search]); const chartFilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chartAppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chartAppliedFiltersData.locations, @@ -298,16 +296,14 @@ export const AnnualResultsPage: React.FC = () => { location.search.includes("components=")) || chartAppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chartAppliedFiltersData.components, ]).join(",") )}`; } - return filterString; + return value; }, [appliedFiltersData, chartAppliedFiltersData, location.search]); const toolbarRightContent = React.useMemo(() => { @@ -370,14 +366,8 @@ export const AnnualResultsPage: React.FC = () => { if (location.hash) { const blockId = location.hash.slice(1).split("|")[0]; const blockChartType = location.hash.slice(1).split("|")[1]; - if (blockId && blockChartType) { - switch (blockId) { - case "disbursements": - setDropdownSelected(decodeURIComponent(blockChartType)); - break; - default: - break; - } + if (blockId && blockChartType && blockId === "annual-results") { + setDropdownSelected(decodeURIComponent(blockChartType)); } } }, [location.hash]); diff --git a/src/app/pages/datasets/common/chart-block/index.tsx b/src/app/pages/datasets/common/chart-block/index.tsx index 455ac9352..480418532 100644 --- a/src/app/pages/datasets/common/chart-block/index.tsx +++ b/src/app/pages/datasets/common/chart-block/index.tsx @@ -8,11 +8,11 @@ import Divider from "@mui/material/Divider"; import Typography from "@mui/material/Typography"; import { Dropdown } from "app/components/dropdown"; import { FilterPanel } from "app/components/filters/panel"; -import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore"; +// import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore"; import CircularProgress from "@mui/material/CircularProgress"; import { DatasetChartBlockProps } from "app/pages/datasets/common/chart-block/data"; -import { ReactComponent as CollapseIcon } from "app/assets/vectors/Collapse_ButtonIcon.svg"; -import { ReactComponent as SettingsIcon } from "app/assets/vectors/Settings_ButtonIcon.svg"; +// import { ReactComponent as CollapseIcon } from "app/assets/vectors/Collapse_ButtonIcon.svg"; +// import { ReactComponent as SettingsIcon } from "app/assets/vectors/Settings_ButtonIcon.svg"; import { ChartBlockButtonToolbar } from "app/components/chart-block/components/button-toolbar"; export const DatasetChartBlock: React.FC = ( @@ -190,7 +190,7 @@ export const DatasetChartBlock: React.FC = ( */} - {props.extraDropdown && props.extraDropdown} + {props.extraDropdown} {props.dropdownItems && props.dropdownSelected && props.handleDropdownChange && ( diff --git a/src/app/pages/datasets/common/page/index.tsx b/src/app/pages/datasets/common/page/index.tsx index a5bbf9e2f..b866f6484 100644 --- a/src/app/pages/datasets/common/page/index.tsx +++ b/src/app/pages/datasets/common/page/index.tsx @@ -143,7 +143,7 @@ export const DatasetPage: React.FC = ( /> - {props.toolbarRightContent && props.toolbarRightContent} + {props.toolbarRightContent} { const [geographyGrouping, setGeographyGrouping] = React.useState( geographyGroupingOptions[0].value ); - const [componentsGrouping, setComponentsGrouping] = React.useState( + const [componentsGrouping] = React.useState( componentsGroupingOptions[1].value ); const [disbursementsDropdownSelected, setDisbursementsDropdownSelected] = @@ -149,13 +150,7 @@ export const GrantImplementationPage: React.FC = () => { const dataFinancialInsightsDisbursementsTable = useStoreState( (state) => get(state.FinancialInsightsDisbursementsTable, "data.data", []) as { - [key: string]: - | string - | number - | boolean - | null - | object - | Array; + [key: string]: TableDataItem; }[] ); const fetchFinancialInsightsDisbursementsTable = useStoreActions( @@ -266,13 +261,7 @@ export const GrantImplementationPage: React.FC = () => { const dataBudgetTable = useStoreState( (state) => get(state.FinancialInsightsBudgetTable, "data.data", []) as { - [key: string]: - | string - | number - | boolean - | null - | object - | Array; + [key: string]: TableDataItem; }[] ); const fetchBudgetTable = useStoreActions( @@ -327,13 +316,7 @@ export const GrantImplementationPage: React.FC = () => { const dataExpendituresTable = useStoreState( (state) => get(state.FinancialInsightsExpendituresTable, "data.data", []) as { - [key: string]: - | string - | number - | boolean - | null - | object - | Array; + [key: string]: TableDataItem; }[] ); const fetchExpendituresTable = useStoreActions( @@ -460,9 +443,9 @@ export const GrantImplementationPage: React.FC = () => { setGeographyGrouping(value); }; - const handleComponentsGroupingChange = (value: string) => { - setComponentsGrouping(value); - }; + // const handleComponentsGroupingChange = (value: string) => { + // setComponentsGrouping(value); + // }; const handleResetFilters = () => { appliedFiltersActions.setAll({ @@ -698,13 +681,9 @@ export const GrantImplementationPage: React.FC = () => { const disbursementsChartContent = React.useMemo(() => { let range; - let maxValue = 0; switch (disbursementsDropdownSelected) { case dropdownItemsDisbursements[0].value: range = getRange(dataFinancialInsightsDisbursementsBarChart, ["value"]); - maxValue = - maxBy(dataFinancialInsightsDisbursementsBarChart, "value")?.value || - 0; return ( { }); }); range = getRange(values, ["value"]); - maxValue = maxBy(values, "value")?.value || 0; return ( { ]); const filterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( appliedFiltersData.locations.length > 0 && location.search.includes("locations=") ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( appliedFiltersData.locations.join(",") )}`; } @@ -1198,9 +1176,7 @@ export const GrantImplementationPage: React.FC = () => { appliedFiltersData.components.length > 0 && location.search.includes("components=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( appliedFiltersData.components.join(",") )}`; } @@ -1208,8 +1184,8 @@ export const GrantImplementationPage: React.FC = () => { appliedFiltersData.principalRecipientTypes.length > 0 && location.search.includes("principalRecipientTypes=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientTypes=${encodeURIComponent( appliedFiltersData.principalRecipientTypes.join(",") )}`; @@ -1218,8 +1194,8 @@ export const GrantImplementationPage: React.FC = () => { appliedFiltersData.principalRecipientSubTypes.length > 0 && location.search.includes("principalRecipientSubTypes=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientSubTypes=${encodeURIComponent( appliedFiltersData.principalRecipientSubTypes.join(",") )}`; @@ -1228,8 +1204,8 @@ export const GrantImplementationPage: React.FC = () => { appliedFiltersData.principalRecipients.length > 0 && location.search.includes("principalRecipients=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipients=${encodeURIComponent( appliedFiltersData.principalRecipients.join(",") )}`; @@ -1238,9 +1214,9 @@ export const GrantImplementationPage: React.FC = () => { appliedFiltersData.status.length > 0 && location.search.includes("status=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }status=${encodeURIComponent(appliedFiltersData.status.join(","))}`; + value += `${value.length > 0 ? "&" : ""}status=${encodeURIComponent( + appliedFiltersData.status.join(",") + )}`; } if ( appliedFiltersData.cycles.length > 0 && @@ -1252,26 +1228,26 @@ export const GrantImplementationPage: React.FC = () => { // const yearsTo = appliedFiltersData.cycles.map( // (cycle) => cycle.replace(/ /g, "").split("-")[1] // ); - // filterString += `${ - // filterString.length > 0 ? "&" : "" + // value += `${ + // value.length > 0 ? "&" : "" // }years=${encodeURIComponent( // years.join(",") // )}&yearsTo=${encodeURIComponent(yearsTo.join(","))}`; - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }cycleNames=${appliedFiltersData.cycles.join(",")}`; } - return filterString; + return value; }, [appliedFiltersData, location.search]); const chart1FilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chart1AppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chart1AppliedFiltersData.locations, @@ -1283,9 +1259,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("components=")) || chart1AppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chart1AppliedFiltersData.components, @@ -1297,8 +1271,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipients=")) || chart1AppliedFiltersData.principalRecipients.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipients=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipients, @@ -1311,8 +1285,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipientSubTypes=")) || chart1AppliedFiltersData.principalRecipientSubTypes.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientSubTypes=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipientSubTypes, @@ -1325,8 +1299,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipientTypes=")) || chart1AppliedFiltersData.principalRecipientTypes.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientTypes=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipientTypes, @@ -1339,9 +1313,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("status=")) || chart1AppliedFiltersData.status.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }status=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}status=${encodeURIComponent( uniq([ ...appliedFiltersData.status, ...chart1AppliedFiltersData.status, @@ -1361,27 +1333,27 @@ export const GrantImplementationPage: React.FC = () => { // ...appliedFiltersData.cycles, // ...chart1AppliedFiltersData.cycles, // ]).map((cycle) => cycle.replace(/ /g, "").split("-")[1]); - // filterString += `${ - // filterString.length > 0 ? "&" : "" + // value += `${ + // value.length > 0 ? "&" : "" // }years=${encodeURIComponent( // years.join(",") // )}&yearsTo=${encodeURIComponent(yearsTo.join(","))}`; - filterString += `${filterString.length > 0 ? "&" : ""}cycleNames=${uniq([ + value += `${value.length > 0 ? "&" : ""}cycleNames=${uniq([ ...appliedFiltersData.cycles, ...chart1AppliedFiltersData.cycles, ]).join(",")}`; } - return filterString; + return value; }, [appliedFiltersData, chart1AppliedFiltersData, location.search]); const chart2FilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chart2AppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chart2AppliedFiltersData.locations, @@ -1393,9 +1365,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("components=")) || chart2AppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chart2AppliedFiltersData.components, @@ -1407,8 +1377,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipients=")) || chart2AppliedFiltersData.principalRecipients.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipients=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipients, @@ -1421,8 +1391,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipientSubTypes=")) || chart2AppliedFiltersData.principalRecipientSubTypes.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientSubTypes=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipientSubTypes, @@ -1435,8 +1405,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipientTypes=")) || chart2AppliedFiltersData.principalRecipientTypes.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientTypes=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipientTypes, @@ -1449,9 +1419,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("status=")) || chart2AppliedFiltersData.status.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }status=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}status=${encodeURIComponent( uniq([ ...appliedFiltersData.status, ...chart2AppliedFiltersData.status, @@ -1463,14 +1431,14 @@ export const GrantImplementationPage: React.FC = () => { // const yearTo = budgetCycleDropdownSelected // .replace(/ /g, "") // .split("-")[1]; - // filterString += `${ - // filterString.length > 0 ? "&" : "" + // value += `${ + // value.length > 0 ? "&" : "" // }years=${encodeURIComponent(year)}&yearsTo=${encodeURIComponent(yearTo)}`; - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }cycleNames=${budgetCycleDropdownSelected}`; } - return filterString; + return value; }, [ location.search, appliedFiltersData, @@ -1479,13 +1447,13 @@ export const GrantImplementationPage: React.FC = () => { ]); const chart3FilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chart3AppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chart3AppliedFiltersData.locations, @@ -1497,9 +1465,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("components=")) || chart3AppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chart3AppliedFiltersData.components, @@ -1511,8 +1477,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipients=")) || chart3AppliedFiltersData.principalRecipients.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipients=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipients, @@ -1539,8 +1505,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipientTypes=")) || chart3AppliedFiltersData.principalRecipientTypes.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientTypes=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipientTypes, @@ -1553,9 +1519,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("status=")) || chart3AppliedFiltersData.status.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }status=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}status=${encodeURIComponent( uniq([ ...appliedFiltersData.status, ...chart3AppliedFiltersData.status, @@ -1572,11 +1536,11 @@ export const GrantImplementationPage: React.FC = () => { // filterString += `${ // filterString.length > 0 ? "&" : "" // }years=${encodeURIComponent(year)}&yearsTo=${encodeURIComponent(yearTo)}`; - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }cycleNames=${financialMetricsCycleDropdownSelected}`; } - return filterString; + return value; }, [ location.search, appliedFiltersData, @@ -1585,13 +1549,13 @@ export const GrantImplementationPage: React.FC = () => { ]); const chart4FilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.locations.length > 0 && location.search.includes("locations=")) || chart4AppliedFiltersData.locations.length > 0 ) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( uniq([ ...appliedFiltersData.locations, ...chart4AppliedFiltersData.locations, @@ -1603,9 +1567,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("components=")) || chart4AppliedFiltersData.components.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( uniq([ ...appliedFiltersData.components, ...chart4AppliedFiltersData.components, @@ -1617,8 +1579,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipients=")) || chart4AppliedFiltersData.principalRecipients.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipients=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipients, @@ -1645,8 +1607,8 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("principalRecipientTypes=")) || chart4AppliedFiltersData.principalRecipientTypes.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientTypes=${encodeURIComponent( uniq([ ...appliedFiltersData.principalRecipientTypes, @@ -1659,9 +1621,7 @@ export const GrantImplementationPage: React.FC = () => { location.search.includes("status=")) || chart4AppliedFiltersData.status.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }status=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}status=${encodeURIComponent( uniq([ ...appliedFiltersData.status, ...chart4AppliedFiltersData.status, @@ -1675,14 +1635,14 @@ export const GrantImplementationPage: React.FC = () => { // const yearTo = expendituresCycleDropdownSelected // .replace(/ /g, "") // .split("-")[1]; - // filterString += `${ - // filterString.length > 0 ? "&" : "" + // value += `${ + // value.length > 0 ? "&" : "" // }years=${encodeURIComponent(year)}&yearsTo=${encodeURIComponent(yearTo)}`; - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }cycleNames=${expendituresCycleDropdownSelected}`; } - return filterString; + return value; }, [ location.search, appliedFiltersData, diff --git a/src/app/pages/datasets/resource-mobilization/index.tsx b/src/app/pages/datasets/resource-mobilization/index.tsx index e947a2787..fb891ea8a 100644 --- a/src/app/pages/datasets/resource-mobilization/index.tsx +++ b/src/app/pages/datasets/resource-mobilization/index.tsx @@ -254,12 +254,12 @@ export const ResourceMobilizationPage: React.FC = () => { }, [dataDonorFilterOptions, dataReplenishmentPeriodFilterOptions]); const filterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( appliedFiltersData.donorTypes.length > 0 && location.search.includes("donorTypes=") ) { - filterString += `donorTypes=${encodeURIComponent( + value += `donorTypes=${encodeURIComponent( appliedFiltersData.donorTypes.join(",") )}`; } @@ -267,31 +267,29 @@ export const ResourceMobilizationPage: React.FC = () => { appliedFiltersData.donors.length > 0 && location.search.includes("donors=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }donors=${encodeURIComponent(appliedFiltersData.donors.join(","))}`; + value += `${value.length > 0 ? "&" : ""}donors=${encodeURIComponent( + appliedFiltersData.donors.join(",") + )}`; } if ( appliedFiltersData.replenishmentPeriods.length > 0 && location.search.includes("periods=") ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }periods=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}periods=${encodeURIComponent( appliedFiltersData.replenishmentPeriods.join(",") )}`; } - return filterString; + return value; }, [appliedFiltersData, location.search]); const chartFilterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if ( (appliedFiltersData.donorTypes.length > 0 && location.search.includes("donorTypes=")) || chartAppliedFiltersData.donorTypes.length > 0 ) { - filterString += `donorTypes=${encodeURIComponent( + value += `donorTypes=${encodeURIComponent( uniq([ ...appliedFiltersData.donorTypes, ...chartAppliedFiltersData.donorTypes, @@ -303,9 +301,7 @@ export const ResourceMobilizationPage: React.FC = () => { location.search.includes("donors=")) || chartAppliedFiltersData.donors.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }donors=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}donors=${encodeURIComponent( uniq([ ...appliedFiltersData.donors, ...chartAppliedFiltersData.donors, @@ -317,16 +313,14 @@ export const ResourceMobilizationPage: React.FC = () => { location.search.includes("periods=")) || chartAppliedFiltersData.replenishmentPeriods.length > 0 ) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }periods=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}periods=${encodeURIComponent( uniq([ ...appliedFiltersData.replenishmentPeriods, ...chartAppliedFiltersData.replenishmentPeriods, ]).join(",") )}`; } - return filterString; + return value; }, [appliedFiltersData, chartAppliedFiltersData, location.search]); React.useEffect(() => { diff --git a/src/app/pages/geography/index.tsx b/src/app/pages/geography/index.tsx index 7ff3ad8db..630d791fa 100644 --- a/src/app/pages/geography/index.tsx +++ b/src/app/pages/geography/index.tsx @@ -124,21 +124,17 @@ export const Geography: React.FC = () => { React.useEffect(() => { const updatedData = [...dataList]; if (search.length > 0) { - for (let i = 0; i < updatedData.length; i++) { - for (let j = 0; j < updatedData[i].items.length; j++) { - for (let k = 0; k < updatedData[i].items[j].items.length; k++) { - const highlighted = updatedData[i].items[j].items[k].name + for (let item of updatedData) { + for (let subItem of item.items) { + for (let subItemItem of subItem.items) { + const highlighted = subItemItem.name .toLowerCase() .includes(search.toLowerCase()); - updatedData[i].items[j].items[k].highlighted = highlighted; + subItemItem.highlighted = highlighted; } - updatedData[i].items[j].highlighted = updatedData[i].items[ - j - ].items.some((item) => item.highlighted); + subItem.highlighted = subItem.items.some((i) => i.highlighted); } - updatedData[i].highlighted = updatedData[i].items.some( - (item) => item.highlighted - ); + item.highlighted = item.items.some((i) => i.highlighted); } } setFilteredData(updatedData); diff --git a/src/app/pages/grant/views/targets-results/index.tsx b/src/app/pages/grant/views/targets-results/index.tsx index 64ab99c43..efdc1eec7 100644 --- a/src/app/pages/grant/views/targets-results/index.tsx +++ b/src/app/pages/grant/views/targets-results/index.tsx @@ -34,8 +34,8 @@ export const GrantTargetsResults: React.FC = () => { (actions) => actions.GrantTargetsResultsTable.fetch ); - const handleTabChange = (tab: string) => { - setTab(TABS.find((t) => t.name === tab) || TABS[0]); + const handleTabChange = (value: string) => { + setTab(TABS.find((t) => t.name === value) || TABS[0]); }; useUpdateEffect(() => { @@ -57,7 +57,7 @@ export const GrantTargetsResults: React.FC = () => { title: year, field: year, formatter: (cell: CellComponent) => { - var tableEl = document.createElement("div"); + const tableEl = document.createElement("div"); cell.getElement().appendChild(tableEl); const data = cell.getValue(); @@ -90,7 +90,7 @@ export const GrantTargetsResults: React.FC = () => { title: date, field: date, formatter: (cell: CellComponent) => { - var tableEl = document.createElement("div"); + const tableEl = document.createElement("div"); cell.getElement().appendChild(tableEl); const data = cell.getValue(); diff --git a/src/app/pages/grants/index.tsx b/src/app/pages/grants/index.tsx index dd6eb11b9..095a652c2 100644 --- a/src/app/pages/grants/index.tsx +++ b/src/app/pages/grants/index.tsx @@ -273,46 +273,44 @@ export const Grants: React.FC = () => { ]); const filterString = React.useMemo(() => { - let filterString = ""; + let value = ""; if (appliedFiltersData.locations.length > 0) { - filterString += `geographies=${encodeURIComponent( + value += `geographies=${encodeURIComponent( appliedFiltersData.locations.join(",") )}`; } if (appliedFiltersData.components.length > 0) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }components=${encodeURIComponent( + value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent( appliedFiltersData.components.join(",") )}`; } if (appliedFiltersData.principalRecipientTypes.length > 0) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientTypes=${encodeURIComponent( appliedFiltersData.principalRecipientTypes.join(",") )}`; } if (appliedFiltersData.principalRecipientSubTypes.length > 0) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipientSubTypes=${encodeURIComponent( appliedFiltersData.principalRecipientSubTypes.join(",") )}`; } if (appliedFiltersData.principalRecipients.length > 0) { - filterString += `${ - filterString.length > 0 ? "&" : "" + value += `${ + value.length > 0 ? "&" : "" }principalRecipients=${encodeURIComponent( appliedFiltersData.principalRecipients.join(",") )}`; } if (appliedFiltersData.status.length > 0) { - filterString += `${ - filterString.length > 0 ? "&" : "" - }status=${encodeURIComponent(appliedFiltersData.status.join(","))}`; + value += `${value.length > 0 ? "&" : ""}status=${encodeURIComponent( + appliedFiltersData.status.join(",") + )}`; } - return filterString; + return value; }, [appliedFiltersData]); React.useEffect(() => { diff --git a/src/app/pages/home/index.tsx b/src/app/pages/home/index.tsx index 198e92dd4..fd1a8dbc7 100644 --- a/src/app/pages/home/index.tsx +++ b/src/app/pages/home/index.tsx @@ -551,8 +551,7 @@ export const Home: React.FC = () => { values.push({ value }); }); }); - const range = getRange(values, ["value"]); - return range; + return getRange(values, ["value"]); }, [dataDisbursementsLineChart.data]); const fullWidthDivider = ( diff --git a/src/app/pages/location/views/access-to-funding/index.tsx b/src/app/pages/location/views/access-to-funding/index.tsx index 677a1e2f0..29b52a893 100644 --- a/src/app/pages/location/views/access-to-funding/index.tsx +++ b/src/app/pages/location/views/access-to-funding/index.tsx @@ -203,7 +203,7 @@ export const AccessToFunding: React.FC = () => { }, [dataAllocationsRadialChart]); const raceBarData = React.useMemo(() => { - const res = [ + return [ { name: "Signed", value: dataFundingRequestStats.signed, @@ -223,7 +223,6 @@ export const AccessToFunding: React.FC = () => { percentage: 100, }, ]; - return res; }, [dataFundingRequestStats]); const fullWidthDivider = ( diff --git a/src/app/pages/location/views/grant-implementation/index.tsx b/src/app/pages/location/views/grant-implementation/index.tsx index 01eae9216..5739a1ee3 100644 --- a/src/app/pages/location/views/grant-implementation/index.tsx +++ b/src/app/pages/location/views/grant-implementation/index.tsx @@ -435,8 +435,7 @@ export const GrantImplementation = () => { values.push({ value }); }); }); - const range = getRange(values, ["value"]); - return range; + return getRange(values, ["value"]); }, [dataDisbursementsLineChart.data]); const fullWidthDivider = ( diff --git a/src/app/state/api/action-reducers/sync/filters/index.ts b/src/app/state/api/action-reducers/sync/filters/index.ts index 652a9e3d3..ba1fe7cb5 100644 --- a/src/app/state/api/action-reducers/sync/filters/index.ts +++ b/src/app/state/api/action-reducers/sync/filters/index.ts @@ -186,7 +186,7 @@ export const AppliedFiltersState: AppliedFiltersStateModel = { payload.portfolioCategories.length + payload.documentTypes.length; }), - actionDefaultNone: action((state, payload: string[]) => { + actionDefaultNone: action(() => { console.log("Incorrect filter type"); }), appliedFiltersCount: 0, diff --git a/src/app/utils/applyResultValueFormula.ts b/src/app/utils/applyResultValueFormula.ts index 4202b9d96..886dc5a56 100644 --- a/src/app/utils/applyResultValueFormula.ts +++ b/src/app/utils/applyResultValueFormula.ts @@ -64,9 +64,12 @@ function evenRound(num: number, decimalPlaces: number) { 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); + let r = 0; + if (f > 0.5 - e && f < 0.5 + e) { + r = i % 2 === 0 ? i : i + 1; + } else { + r = Math.round(n); + } return d ? r / m : r; } diff --git a/src/app/utils/getFinancialValueWithMetricPrefix.ts b/src/app/utils/getFinancialValueWithMetricPrefix.ts index ff580ff8f..b7a276c71 100644 --- a/src/app/utils/getFinancialValueWithMetricPrefix.ts +++ b/src/app/utils/getFinancialValueWithMetricPrefix.ts @@ -37,8 +37,12 @@ export function getRange( data.forEach((item: any) => { let v = 0; + let accessor = ""; + if (fieldPrefix) { + accessor = `${fieldPrefix}.`; + } fields.forEach((field: string) => { - v += get(item, `${fieldPrefix ? `${fieldPrefix}.` : ""}${field}`, 0); + v += get(item, `${accessor}${field}`, 0); }); if (v >= ranges[0].divider) { rangesCount[0]++;