+
+
+ {t('Compare')}
+
+
+
+ {t('Area')}
+ {t('Connectivity')}
+ {t('Total')}
+
+
+
+
{t(countryName)}
+
+
{selectedCountry}
+
+ {chartData &&
}
+ {habitatTableData.length && (
+
+
+
+ |
+ {t('Country')}
+ |
+
+ {t('Stewardship')}
+ |
+
+ {t('Connectivity Score')}
+ |
+
+ {t('Area Score')}
+ |
+
+ {t('Total SHS')}
+ |
+
+
+
+ {habitatTableData.map((row) => (
+ updateCountry({ value: row.country })}
+ className={
+ selectedCountry === row.country ||
+ countryName === row.country
+ ? styles.highlighted
+ : ''
+ }
+ >
+ | {row.country} |
+
+ {formatValue(row.stewardship)}%
+ |
+
+ {formatValue(row.countryConnectivityScore * 100)}
+ |
+
+ {formatValue(row.countryAreaScore * 100)}
+ |
+ {formatValue(row.shs)}% |
+
+ ))}
+
+
+ )}
+
+ {t(
+ '*The Species Habitat Score is calculated using the habitat suitable range map and remote sensing layers.'
+ )}
+
+
+
+
+
{countryName}
+
+
+
+ {selectedIndex === NAVIGATION.HOME && (
+
+ )}
+ {selectedIndex === NAVIGATION.EXPLORE_SPECIES && (
+
+ )}
+ {selectedIndex === NAVIGATION.REGION && (
+
+ )}
+ {!scientificName && selectedIndex === NAVIGATION.DATA_LAYER && (
+
+ )}
+ {scientificName &&
+ (selectedIndex === NAVIGATION.SPECIES ||
+ selectedIndex === NAVIGATION.DATA_LAYER) && (
+
+ )}
+ {selectedIndex === NAVIGATION.BIO_IND && (
+
+ )}
+ {selectedIndex === NAVIGATION.TRENDS && (
+
+ )}
+
+
+ {dataPoints.map((key) => (
+
+ {key.items?.length > 0 && (
+ <>
+
+
+
updateChildren(key)}
+ />
+ }
+ />
+ {/* Place holder, remove span when new icons are available */}
+
+ {/* 
*/}
+ {key.total_no_rows}
+
+ {key.showChildren && (
+
+ {key.items.map((item) => (
+ -
+ {getCheckbox(item)}
+
+
+ {item.no_rows}
+
+ ))}
+
+ )}
+
+ )}
+ {key.items?.length === 0 && (
+
+ )}
+
+ ))}
+
+
+ {t(
+ 'Select a region type below to display on the map and explore species lists for each region.'
+ )}
+
+
+
+ }
+ label={t('Protected Areas')}
+ />
+ {/* } label={t('Proposed Protected Areas')} /> */}
+ }
+ label={t('Provinces')}
+ />
+ {countryISO === 'COD' && (
+ }
+ label={t('Forest Titles')}
+ />
+ )}
+ }
+ className={styles.disabled}
+ disabled
+ label={t('Draw on Map - Coming soon')}
+ />
+ {/* } label={t('Priority Areas')} /> */}
+ {/* } label={t('Community Forests')} /> */}
+
+
+ {/*
+
+
+
*/}
+
+ );
+}
+
+export default RegionsAnalysisComponent;
diff --git a/src/containers/sidebars/dashboard-sidebar/regions-analysis/regions-analysis-styles.module.scss b/src/containers/sidebars/dashboard-sidebar/regions-analysis/regions-analysis-styles.module.scss
new file mode 100644
index 000000000..32dfbb94f
--- /dev/null
+++ b/src/containers/sidebars/dashboard-sidebar/regions-analysis/regions-analysis-styles.module.scss
@@ -0,0 +1,71 @@
+@import 'styles/ui.module';
+@import 'styles/settings';
+@import 'styles/typography-extends';
+@import 'styles/common-animations.module';
+
+.container{
+ display: flex;
+ flex-direction: column;
+ padding: 5px 10px;
+ width: 100%;
+
+ --font-color: #{$white};
+ --border-color: #{$brand-color-main};
+ --selected-font-color: #{$white};
+ --save-button-text: #{$dark-text};
+ --border-color-hover: #{$brand-color-main-hover};
+
+ &.light{
+ --font-color: #{$black};
+ --border-color: #{$mol-blue};
+ --selected-font-color: #{$white};
+ --save-button-text: #{$white};
+ --border-color-hover: #{$mol-blue};
+ }
+
+ .sectionTitle{
+ font-size: $font-size-tick;
+ font-weight: 700;
+ text-transform: uppercase;
+ line-height: 1.5;
+ color: var(--font-color);
+ }
+
+ p{
+ font-size: $font-size-xs;
+ color: var(--font-color);
+ }
+
+ .choices{
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ color: var(--font-color);
+
+ span{
+ color: var(--font-color);
+ }
+
+ .disabled{
+ span{
+ color: var(--font-color);
+ font-style: italic;
+ opacity: 0.5;
+ }
+ }
+ }
+
+ .search{
+ display: flex;
+ column-gap: 8px;
+ margin-top: 8px;
+
+ .saveButton {
+ color: var(--save-button-text);
+ background-color: var(--border-color);
+ &:hover {
+ background-color: var(--border-color-hover);
+ }
+ }
+ }
+}
diff --git a/src/containers/sidebars/dashboard-sidebar/selectors.js b/src/containers/sidebars/dashboard-sidebar/selectors.js
new file mode 100644
index 000000000..ea1aec3d9
--- /dev/null
+++ b/src/containers/sidebars/dashboard-sidebar/selectors.js
@@ -0,0 +1,4 @@
+/* eslint-disable max-len */
+import { createStructuredSelector } from 'reselect';
+
+export default createStructuredSelector({});
diff --git a/src/containers/sidebars/dashboard-sidebar/species-filter/index.js b/src/containers/sidebars/dashboard-sidebar/species-filter/index.js
new file mode 100644
index 000000000..f3c726170
--- /dev/null
+++ b/src/containers/sidebars/dashboard-sidebar/species-filter/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import SpeciesFilterComponent from './species-filter-component';
+
+function SpeciesFilterContainer(props) {
+ return ;
+}
+
+export default SpeciesFilterContainer;
diff --git a/src/containers/sidebars/dashboard-sidebar/species-filter/species-filter-component.jsx b/src/containers/sidebars/dashboard-sidebar/species-filter/species-filter-component.jsx
new file mode 100644
index 000000000..e104765be
--- /dev/null
+++ b/src/containers/sidebars/dashboard-sidebar/species-filter/species-filter-component.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import { useT } from '@transifex/react';
+
+import Button from 'components/button';
+import FilterContainer from 'components/filters';
+import SpeciesListContainer from 'components/species-list';
+
+import { NAVIGATION } from 'constants/dashboard-constants.js';
+
+import styles from '../dashboard-sidebar-styles.module.scss';
+
+function SpeciesFilterComponent(props) {
+ const t = useT();
+ const {
+ selectedRegionOption,
+ setSelectedRegionOption,
+ setSelectedIndex,
+ setSelectedTaxa,
+ speciesListLoading,
+ } = props;
+
+ const filterStart = [
+ {
+ name: 'dataset',
+ title: 'Expected Sources',
+ filters: [
+ {
+ name: 'Refined Range Map',
+ active: false,
+ test: (species) => species.source.indexOf('range') > -1,
+ count: 0,
+ type: 'and',
+ result: false,
+ },
+ ],
+ },
+ {
+ name: 'dataset',
+ title: 'Recorded Sources',
+ filters: [
+ {
+ name: 'Occurrence',
+ active: false,
+ test: (species) => species.source.indexOf('GBIF') > -1,
+ count: 0,
+ result: false,
+ type: 'and',
+ },
+ // {
+ // name: 'Local Inventory',
+ // active: false,
+ // test: (species) =>
+ // species.datasetList.map((d) => d.product_type).indexOf('localinv') >
+ // -1,
+ // result: false,
+ // count: 0,
+ // type: 'and',
+ // },
+ ],
+ },
+ {
+ name: 'threat',
+ title: 'IUCN Status',
+ filters: [
+ {
+ name: 'Critically Endangered',
+ active: false,
+ test: (species) =>
+ species.threat_status.toUpperCase() === 'CRITICALLY ENDANGERED',
+ count: 0,
+ result: false,
+ type: 'or',
+ },
+ {
+ name: 'Endangered',
+ result: false,
+ active: false,
+ test: (species) =>
+ species.threat_status.toUpperCase() === 'ENDANGERED',
+ count: 0,
+ type: 'or',
+ },
+ {
+ name: 'Vulnerable',
+ active: false,
+ test: (species) =>
+ species.threat_status.toUpperCase() === 'VULNERABLE',
+ count: 0,
+ type: 'or',
+ result: false,
+ },
+ {
+ name: 'Least Concern',
+ active: false,
+ test: (species) =>
+ species.threat_status.toUpperCase() === 'LEAST CONCERN',
+ count: 0,
+ type: 'or',
+ result: false,
+ },
+ {
+ name: 'Unknown',
+ active: false,
+ result: false,
+ test: (species) => species.threat_status === undefined,
+ count: 0,
+ type: 'or',
+ },
+ ],
+ },
+ ];
+
+ const [filters, setFilters] = useState(filterStart);
+
+ const handleBack = () => {
+ setSelectedTaxa(null);
+ setSelectedRegionOption(null);
+ setSelectedIndex(NAVIGATION.REGION);
+ };
+
+ const updateActiveFilter = (filter) => {
+ const newFilters = filters.map((filterGroup) => {
+ const newFilterGroup = { ...filterGroup };
+ newFilterGroup.filters = filterGroup.filters.map((f) => {
+ if (f.name === filter.name) {
+ f.active = !f.active;
+ }
+ return f;
+ });
+ return newFilterGroup;
+ });
+ setFilters(newFilters);
+ };
+
+ return (
+
+ {selectedRegionOption && (
+
+ )}
+
+
+
+
+
+
+
+
+ {speciesInfo?.commonname}
+ {speciesInfo?.scientificname}
+
+
+
+
{speciesInfo?.info?.[0].content}
+
+
+
+ {/* {t('Conservation Metrics')}
+ */}
+
+
+
+
+
+
+
+
+ {tabOption === 1 &&
}
+ {tabOption === 2 &&
}
+ {tabOption === 3 &&
}
+
+
+
+
+
+
+
+ {t('Taxa')}
+
+
+ handleSortChange({ value: 'NAME', ascending: true })
+ }
+ />
+
+ handleSortChange({ value: 'NAME', ascending: false })
+ }
+ />
+
+ |
+
+
+ {t('Scientific Name')}
+
+
+ handleSortChange({ value: 'GOV_TYPE', ascending: true })
+ }
+ />
+
+ handleSortChange({
+ value: 'GOV_TYPE',
+ ascending: false,
+ })
+ }
+ />
+
+ |
+
+
+ {t('Stewardship')}
+
+
+ handleSortChange({ value: 'DESIG', ascending: true })
+ }
+ />
+
+ handleSortChange({ value: 'DESIG', ascending: false })
+ }
+ />
+
+ |
+
+
+ {t('Range Size')}
+
+
+ handleSortChange({
+ value: 'DESIG_TYPE',
+ ascending: true,
+ })
+ }
+ />
+
+ handleSortChange({
+ value: 'DESIG_TYPE',
+ ascending: false,
+ })
+ }
+ />
+
+ |
+
+
+ {t('Area Score')}
+
+
+ handleSortChange({ value: 'STATUS', ascending: true })
+ }
+ />
+
+ handleSortChange({ value: 'STATUS', ascending: false })
+ }
+ />
+
+ |
+
+
+ {t('Connectivity Score')}
+
+
+ handleSortChange({
+ value: 'STATUS_YR',
+ ascending: true,
+ })
+ }
+ />
+
+ handleSortChange({
+ value: 'STATUS_YR',
+ ascending: false,
+ })
+ }
+ />
+
+ |
+
+
+ {t('Habitat Score')}
+
+
+ handleSortChange({ value: 'AREA_KM', ascending: true })
+ }
+ />
+
+ handleSortChange({ value: 'AREA_KM', ascending: false })
+ }
+ />
+
+ |
+
+
+
+ {chartData &&
+ chartData.map((row) =>
+ // eslint-disable-next-line react/no-array-index-key
+ row.taxa_scores.map((species, idx) => (
+
+ |
+ {row.speciesgroup}
+ |
+ {species.scientificname} |
+ {species.steward_score.toFixed(1)} |
+
+ {(
+ species.area_score +
+ species.connectivity_score / 2
+ ).toFixed(1)}
+ 2
+ |
+ {species.area_score.toFixed(1)} |
+ {species.connectivity_score.toFixed(1)} |
+
+ {(
+ (species.area_score + species.connectivity_score) /
+ 2
+ ).toFixed(1)}
+ |
+
+ ))
+ )}
+
+
+
+
+
+
{t('Score Distributions')}
+
+
+ {lowAvg}}
+ highAvgBold={{highAvg}}
+ />
+
+
+
+ {t('Species with SHS between')}{' '}
+
+ {lowBucket} - {highBucket}:
+
+
+
+ {isSpeciesLoading &&
}
+ {!isSpeciesLoading && (
+
+ {spsSpecies.map((s) => {
+ return (
+ -
+
+
+ );
+ })}
+
+ )}
+
+ {/* {!showTable && (
+
+
+
+ {!showTable && (
+ <>
+ {/*
*/}
+
+
+ {isLoading &&
}
+ {!isLoading && (
+
+ )}
+
+ )}
+ {showTable && (
+ <>
+ {/*
*/}
+
+
+ )}
+
+
+ {isLoading &&
}
+ {!isLoading && (
+ <>
+
+
+
+ {nationalScores.year}
+ {t('Year')}
+
+
+ {nationalScores.areaScore}
+ {t('Area Score')}
+
+
+
+ {nationalScores.connecivityScore}
+ {t('Connectivity Score')}
+
+
+ {nationalScores.globalRanking}
+ {t('Global Ranking')}
+
+
+
+
{t('SHI')}
+
+
+ {data && (
+
+
+
+
+ 0
+ 100
+
+
+
+
+
{t('Habitat Score')}
+
+
{t('Area Score')}
+
+
{t('Connectivity Score')}
+
+
+
+ )}
+
+ )}
+
+ {isLoading &&
}
+ {!isLoading && (
+
+
+
+
+
+ {filteredProvince.year}
+ {t('Year')}
+
+
+ {filteredProvince.area_clipped_scaled.toFixed(1)}
+ {t('Area Score')}
+
+
+
+ {filteredProvince.connectivity_clipped_scaled.toFixed(1)}
+ {t('Connectivity Score')}
+
+
+ {filteredProvince.habitat_index_rank}
+ {t('Rank')}
+
+
+
+
{t('SHI')}
+
+
+ )}
+
+
+
+
+ 0
+ 100
+
+
+
+
+
{t('Habitat Score')}
+
+
{t('Area Score')}
+
+
{t('Connectivity Score')}
+
+ {data &&
}
+
+
+
+
{t('Temporal Trends')}
+
+ {countryName}}
+ lostAvgBold={{lostAvg}%}
+ shiValueBold={{shiValue}}
+ />
+
+
+ {t(
+ 'The Area Score addresses changes in habitat extent while the Connectivity Score addresses changes in the fragmentation of habitat.'
+ )}
+
+
+
+ {countryISO === 'COD' && (
+
+ )}
+
+
+
+ {t('Toggle national SPI and province-level breakdown.')}
+
+ {/*
+
+ {t('View how the percent of area protected, SPI, and score distributions have changed over time.')}
+ */}
+
+
+ {shiActiveTrend === NATIONAL_TREND && (
+
+ )}
+ {shiActiveTrend === PROVINCE_TREND && (
+
+ )}
+
+
+
{t('Score Distributions')}
+
+
+ View the distribution of the individual Species Information Scores for
+ all terrestrial vertebrates. {lowAvg} have the lowest average
+ information score while {highAvg} have the highest.
+
+
+
+ {t('Species with SIS between')} 0-5:
+
+
+
+
+ {/* {!showTable &&
+
+
+ {!showTable && (
+ <>
+ {/* */}
+ {isLoading && }
+ {!isLoading && (
+
+ )}
+
+ )}
+ {/* {showTable && (<>
+
+
+ )} */}
+
+
+ {isLoading &&
}
+ {!isLoading && (
+ <>
+
+
+
+ {lastYear}
+ {t('Year')}
+
+
+
+ {globalRanking}
+ {t('Global Ranking')}
+
+
+
SII
+
+
+ {data && (
+
+
+
+ )}
+
+ )}
+
+
+
{t('Temporal Trends')}
+
+ {latestValues.spi}%}
+ countryName={countryName}
+ startYear={firstValues.year}
+ highestObservationBold={{highestObservation}}
+ lowestObservationBold={{lowestObservation}}
+ />
+
+
+
+
+
+ {/*
+ {t('Toggle national SPI and province-level breakdown.')}
+ */}
+ {/*
+
+ {t('View how the percent of area protected, SPI, and score distributions have changed over time.')}
+ */}
+
+
+
+
+
+
{t('Score Distributions')}
+
+
+ {/* {lowAvg}}
+ highAvgBold={{highAvg}}
+ /> */}
+
+
+
+
+ {t('Species with SPS between')}{' '}
+ {/* {lowBucket} - {highBucket}: */}0 - 5:
+
+
+ {isSpeciesLoading &&
}
+ {!isSpeciesLoading && (
+
+ {spsSpecies &&
+ spsSpecies.map((s) => {
+ return (
+ -
+
+
+ );
+ })}
+
+ )}
+ {/*
+ {!showTable &&
*/}
+
+
+
+ {isLoading && }
+ {!isLoading && (
+
+ )}
+
+
+ {isLoading &&
}
+ {!isLoading && (
+
+ {currentScore && (
+
+
+ {currentScore?.Year}
+ {t('Year')}
+
+
+
+
+ 82
+ {/* {currentScore.GlobalRanking} */}
+ {t('Global Ranking')}
+
+
+
{t('Area Protected')}
+
SPI
+
+ )}
+
+ )}
+ {data && (
+
+
+
+
+ 0
+ 100
+
+
+
+
+ )}
+
+ {isLoading &&
}
+ {!isLoading && (
+
+
+
+
+
+ {currentYear}
+ {t('Year')}
+
+
+
+ {percentAreaProtected.toFixed(1)}%
+ {t('Area Protected')}
+
+
+
{t('SPI')}
+
+
+ )}
+
+ {bubbleData && (
+ <>
+
+
+
+ 0
+ 100
+
+
+
+
+ )}
+
+
+
+
{t('Temporal Trends')}
+
+
+ {areaProtected.toFixed(1)} km2
+
+ }
+ areaProtectedPercentBold={{areaProtectedPercent}%}
+ spiInfoBold={{spiInfo}}
+ />
+
+
+
+
+
+
+
+ {t('Toggle national SPI and province-level breakdown.')}
+
+ {activeTrend !== NATIONAL_TREND && (
+ <>
+ {!showTable && (
+
+
+ {!showTable && (
+ <>
+ {activeTrend === NATIONAL_TREND && (
+
+ )}
+ {activeTrend === PROVINCE_TREND && (
+
+ )}
+
+ )}
+ {showTable &&
}
+
+
+
+
+
+
+
+ {t('Province')}
+
+
+ handleSortChange({ value: 'NAME', ascending: true })
+ }
+ />
+
+ handleSortChange({ value: 'NAME', ascending: false })
+ }
+ />
+
+ |
+
+
+ {t('SPI')}
+
+
+ handleSortChange({ value: 'GOV_TYPE', ascending: true })
+ }
+ />
+
+ handleSortChange({
+ value: 'GOV_TYPE',
+ ascending: false,
+ })
+ }
+ />
+
+ |
+
+
+
+ {t('Area')}(km2)
+
+
+
+ handleSortChange({ value: 'DESIG', ascending: true })
+ }
+ />
+
+ handleSortChange({ value: 'DESIG', ascending: false })
+ }
+ />
+
+ |
+
+
+ {t('Area Protected')}
+
+
+ handleSortChange({
+ value: 'DESIG_TYPE',
+ ascending: true,
+ })
+ }
+ />
+
+ handleSortChange({
+ value: 'DESIG_TYPE',
+ ascending: false,
+ })
+ }
+ />
+
+ |
+
+
+ {t('Vertebrate Richness')}
+
+
+ handleSortChange({ value: 'STATUS', ascending: true })
+ }
+ />
+
+ handleSortChange({ value: 'STATUS', ascending: false })
+ }
+ />
+
+ |
+
+
+
+ {provinces &&
+ provinces.map((row, index) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+ | {row.region_name} |
+ {row.SPI.toFixed(1)} |
+
+ {row.Area.toFixed(1) ?? 0}
+ km2
+ |
+
+ {row.AreaProtected?.toFixed(1) ?? 0}
+ km2
+ |
+ {row.VertebrateRichness} |
+
+ ))}
+
+
+
+
+
+ {props.children}
+
+
+ );
+}
+
+export { LightModeContext, LightModeProvider };
diff --git a/src/pages/dashboard/dashboard-component.jsx b/src/pages/dashboard/dashboard-component.jsx
new file mode 100644
index 000000000..5e7efd2ba
--- /dev/null
+++ b/src/pages/dashboard/dashboard-component.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import DashboardLogin from '../../components/dashboard-login';
+import DashboardView from '../../containers/views/dashboard-view/dashboard-view';
+
+function DashboardComponent(props) {
+ const { activeLayers, handleMapLoad, loggedIn, setLoggedIn } = props;
+
+ return (
+ <>
+ {!loggedIn && }
+ {loggedIn && (
+ handleMapLoad(map, activeLayers)}
+ {...props}
+ />
+ )}
+
+ );
+}
+
+export default DashboardComponent;
diff --git a/src/pages/dashboard/dashboard-selectors.js b/src/pages/dashboard/dashboard-selectors.js
new file mode 100644
index 000000000..5e6a8f6ba
--- /dev/null
+++ b/src/pages/dashboard/dashboard-selectors.js
@@ -0,0 +1,58 @@
+/* eslint-disable max-len */
+import { createSelector, createStructuredSelector } from 'reselect';
+
+import { selectGlobeUrlState } from 'selectors/location-selectors';
+
+import dashboardViewConfig from '../../containers/views/dashboard-view/dashboard-view-config';
+
+const selectCountryIso = ({ location }) => location.payload.iso.toUpperCase();
+const selectCountriesData = ({ countryData }) =>
+ countryData && (countryData.data || null);
+const selectQueryParams = ({ location }) => location.query;
+
+const getViewSettings = createSelector(selectGlobeUrlState, (globeUrlState) => {
+ return {
+ ...dashboardViewConfig.view,
+ ...globeUrlState,
+ };
+});
+
+export const getActiveLayers = createSelector(
+ getViewSettings,
+ (viewSettings) => viewSettings.activeLayers
+);
+
+export const getCountryISO = createSelector(
+ selectCountryIso,
+ (countryISO) => countryISO
+);
+
+const getCountryData = createSelector(
+ [selectCountriesData, selectCountryIso],
+ (countriesData, countryISO) => {
+ if (!countriesData || !countryISO) {
+ return null;
+ }
+ return countriesData[countryISO];
+ }
+);
+
+const getCountryName = createSelector([getCountryData], (countryData) => {
+ if (!countryData) {
+ return null;
+ }
+ return countryData.NAME_0;
+});
+
+const getQueryParams = createSelector(
+ selectQueryParams,
+ (queryParams) => queryParams
+);
+
+export default createStructuredSelector({
+ viewSettings: getViewSettings,
+ activeLayers: getActiveLayers,
+ countryISO: getCountryISO,
+ countryName: getCountryName,
+ queryParams: getQueryParams,
+});
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
new file mode 100644
index 000000000..969a8dc03
--- /dev/null
+++ b/src/pages/dashboard/index.js
@@ -0,0 +1,659 @@
+/* eslint-disable camelcase */
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import countryDataActions from 'redux_modules/country-data';
+
+import { DASHBOARD } from 'router';
+
+import { useLocale, useT } from '@transifex/react';
+
+import * as urlActions from 'actions/url-actions';
+
+import { activateLayersOnLoad } from 'utils/layer-manager-utils';
+import { setBasemap } from 'utils/layer-manager-utils.js';
+
+import EsriFeatureService from 'services/esri-feature-service';
+
+import { NAVIGATION } from 'constants/dashboard-constants';
+import {
+ COUNTRIES_DATA_SERVICE_URL,
+ DASHBOARD_URLS,
+} from 'constants/layers-urls';
+import { layersConfig } from 'constants/mol-layers-configs';
+
+import DashboardComponent from './dashboard-component.jsx';
+import mapStateToProps from './dashboard-selectors.js';
+
+const actions = { ...countryDataActions, ...urlActions };
+
+function DashboardContainer(props) {
+ const locale = useLocale();
+ const t = useT();
+ const {
+ viewSettings,
+ countryISO,
+ queryParams,
+ setCountryDataLoading,
+ setCountryDataReady,
+ setCountryDataError,
+ browsePage,
+ } = props;
+
+ const [geometry, setGeometry] = useState(null);
+ const [speciesInfo, setSpeciesInfo] = useState(null);
+ const [data, setData] = useState(null);
+ const [dataLayerData, setDataLayerData] = useState(null);
+ const [taxaList, setTaxaList] = useState([]);
+ const [dataByCountry, setDataByCountry] = useState(null);
+ const [spiDataByCountry, setSpiDataByCountry] = useState(null);
+ const [selectedTaxa, setSelectedTaxa] = useState('');
+ const [filteredTaxaList, setFilteredTaxaList] = useState([]);
+ const [scientificName, setScientificName] = useState(null);
+ const [selectedIndex, setSelectedIndex] = useState(NAVIGATION.HOME);
+ const [loggedIn, setLoggedIn] = useState(true);
+ const [selectedRegion, setSelectedRegion] = useState();
+ const [regionLayers, setRegionLayers] = useState({});
+ const [selectedRegionOption, setSelectedRegionOption] = useState('');
+ const [selectedProvince, setSelectedProvince] = useState();
+ const [tabOption, setTabOption] = useState(2);
+ const [provinceName, setProvinceName] = useState();
+ const [speciesListLoading, setSpeciesListLoading] = useState(true);
+ const [prioritySpeciesList, setPrioritySpeciesList] = useState([]);
+ const [user, setUser] = useState();
+ const getQueryParams = () => {
+ if (queryParams) {
+ const {
+ species,
+ tab,
+ trend,
+ region,
+ province,
+ regionLayers,
+ selectedRegionOption,
+ } = queryParams;
+
+ if (species) {
+ setScientificName(species);
+ }
+
+ if (tab) {
+ setSelectedIndex(tab);
+ }
+
+ if (trend) {
+ setTabOption(trend);
+ }
+
+ if (region) {
+ setSelectedRegion(region);
+ }
+
+ if (province) {
+ setProvinceName(province);
+ }
+
+ if (regionLayers) {
+ setRegionLayers(regionLayers);
+ }
+
+ if (selectedRegionOption) {
+ setSelectedRegionOption(selectedRegionOption);
+ }
+ }
+ };
+
+ const getSpeciesData = async () => {
+ const url = `https://next-api-dot-api-2-x-dot-map-of-life.appspot.com/2.x/species/info?lang=en&scientificname=${scientificName}`;
+ const response = await fetch(url);
+ const d = await response.json();
+ setSpeciesInfo(d[0]);
+ };
+
+ const getDataLayersData = async () => {
+ const dataLayerParams = {
+ scientificname: scientificName,
+ group: 'movement',
+ lang: locale,
+ };
+ const dparams = new URLSearchParams(dataLayerParams);
+ const dataLayersURL = `https://dev-api.mol.org/2.x/species/datasets?${dparams}`;
+ const countryCode = { COG: 'CG', GAB: 'GA', COD: 'CD', LBR: 'LR' };
+ const speciesObservationCount = `https://storage.googleapis.com/cdn.mol.org/eow_demo/occ/${
+ countryCode[countryISO]
+ }_counts_${scientificName.replace(' ', '_')}.geojson`;
+
+ const apiCalls = [dataLayersURL, speciesObservationCount];
+
+ const apiResponses = await Promise.all(
+ apiCalls.map(async (url) => {
+ const response = await fetch(url);
+ try {
+ const d = await response.json();
+ return d;
+ } catch (error) {
+ return [];
+ }
+ })
+ );
+
+ const [dataLayersData, speciesObservationData] = apiResponses;
+
+ const ebirdCount = speciesObservationData.find(
+ (sod) => sod.which === 'ebird'
+ );
+ const gbifCount = speciesObservationData.find(
+ (sod) => sod.which === 'gbif'
+ );
+
+ dataLayersData.map((dld) => {
+ if (dld.dataset_title.toUpperCase().match(/EBIRD/)) {
+ if (ebirdCount) {
+ dld.no_rows = ebirdCount.n;
+ } else {
+ dld.no_rows = 0;
+ }
+ }
+
+ if (dld.dataset_title.toUpperCase().match(/GBIF/)) {
+ if (gbifCount) {
+ dld.no_rows = gbifCount.n;
+ } else {
+ dld.no_rows = 0;
+ }
+ }
+ });
+
+ setDataLayerData(dataLayersData);
+ };
+
+ const makeSpeciesListParams = (args, summary = false) => {
+ const params = {};
+ params.lang = locale || 'en';
+ if (args.lat) {
+ params.lat = args.lat.toString();
+ }
+ if (args.lng) {
+ params.lng = args.lng.toString();
+ }
+ if (args.radius) {
+ params.radius = args.radius.toString();
+ }
+ if (args.wkt) {
+ params.wkt = args.wkt;
+ }
+
+ if (args.geojson) {
+ params.geojson = args.geojson;
+ }
+ if (args.region_id) {
+ params.region_id = args.region_id;
+ }
+ if (args.WDPA_PID) {
+ params.region_attribute = 'WDPA_PID';
+ params.region_dataset_id = 'wdpa';
+ params.region_attribute_value = args.WDPA_PID;
+ }
+ if (args.GID_1) {
+ params.region_attribute = 'GID_1';
+ params.region_attribute_value = args.GID_1;
+ params.region_dataset_id = 'gadm_states';
+ }
+ // if(args.region_dataset_id){
+ // params.region_dataset_id = args.region_dataset_id;
+ // }
+
+ if (summary) {
+ params.summary = 'true';
+ }
+ return params;
+ };
+
+ const getTaxaSpecies = async (taxa, slices) => {
+ const json = JSON.parse(slices);
+ let url;
+
+ switch (taxa) {
+ case 'amphibians':
+ url = DASHBOARD_URLS.AMPHIBIAN_LOOKUP;
+ break;
+ case 'birds':
+ url = DASHBOARD_URLS.BIRDS_LOOKUP;
+ break;
+ case 'mammals':
+ url = DASHBOARD_URLS.MAMMALS_LOOKUP;
+ break;
+ case 'reptiles':
+ url = DASHBOARD_URLS.REPTILES_LOOKUP;
+ break;
+ default:
+ break;
+ }
+
+ const response = await EsriFeatureService.getFeatures({
+ url,
+ whereClause: `SliceNumber IN (${json
+ .map((s) => s.SliceNumber)
+ .join(',')})`,
+ returnGeometry: false,
+ });
+
+ return {
+ taxa,
+ title: t(taxa),
+ count: json.length,
+ species: response.map((r) => r.attributes),
+ };
+ };
+
+ const getSpeciesDetails = (speciesData, taxa) => {
+ const species = speciesData.species.map(
+ ({ scientific_name, common_name, attributes }) => {
+ const { source, species_url, threat_status } = JSON.parse(
+ attributes.replace(/NaN/g, 'null')
+ )[0];
+
+ return {
+ common_name,
+ scientific_name,
+ threat_status,
+ source,
+ species_url,
+ taxa,
+ };
+ }
+ );
+
+ return {
+ count: speciesData.species.length,
+ species,
+ taxa,
+ title: taxa,
+ };
+ };
+
+ const getOccurenceSpecies = async (speciesData) => {
+ let url = DASHBOARD_URLS.SPECIES_OCCURENCE_URL;
+ let whereClause = `ISO3 = '${countryISO}'`;
+
+ if (selectedRegion) {
+ const { GID_1, WDPA_PID } = selectedRegion;
+ if (GID_1) {
+ whereClause = `GID_1 = '${GID_1}'`;
+ }
+
+ if (WDPA_PID) {
+ url = DASHBOARD_URLS.WDPA;
+ whereClause = `wdpaid = '${WDPA_PID}'`;
+ }
+ }
+
+ if (!selectedRegion?.mgc) {
+ const occurenceFeatures = await EsriFeatureService.getFeatures({
+ url,
+ whereClause,
+ returnGeometry: false,
+ });
+
+ const list = [...speciesData];
+
+ occurenceFeatures.forEach((feature) => {
+ const { taxa, species, attributes } = feature.attributes;
+
+ const { source, species_url, threat_status } = JSON.parse(
+ attributes.replace(/NaN/g, 'null')
+ )[0];
+
+ const speciesToAdd = {
+ common_name: species,
+ scientific_name: species,
+ threat_status,
+ source,
+ species_url,
+ taxa,
+ };
+
+ const foundTaxa = list.find((t) => t.taxa === taxa);
+
+ const foundSpecies = foundTaxa?.species.find(
+ (speciesToFind) =>
+ speciesToFind.scientific_name === speciesToAdd.scientific_name
+ );
+
+ if (!foundSpecies) {
+ foundTaxa?.species.push(speciesToAdd);
+ }
+ });
+
+ list.forEach((t) => {
+ t.count = t.species.length;
+ });
+
+ setTaxaList(list);
+ } else {
+ setTaxaList(speciesData);
+ }
+ setSpeciesListLoading(false);
+ };
+
+ const getSpeciesList = async () => {
+ setSpeciesListLoading(true);
+ let url = DASHBOARD_URLS.PRECALC_AOI;
+ let whereClause = `GID_0 = '${countryISO}'`;
+
+ if (selectedRegion) {
+ const { GID_1, WDPA_PID, mgc } = selectedRegion;
+ if (GID_1) {
+ whereClause = `GID_1 = '${GID_1}'`;
+ }
+
+ if (WDPA_PID) {
+ whereClause = `WDPA_PID = '${WDPA_PID}'`;
+ url = DASHBOARD_URLS.WDPA_PRECALC;
+ }
+
+ if (mgc) {
+ whereClause = `mgc_id = '${mgc}'`;
+ url = DASHBOARD_URLS.FOREST;
+ }
+ }
+
+ const features = await EsriFeatureService.getFeatures({
+ url,
+ whereClause,
+ returnGeometry: false,
+ });
+
+ if (features && features[0]) {
+ if (selectedRegion?.mgc) {
+ const speciesData = {
+ species: features.map((s) => {
+ const { scientificname, taxa, attributes } = s.attributes;
+
+ const json = JSON.parse(attributes.replace(/NaN/g, 'null'));
+ return {
+ common_name: scientificname,
+ scientific_name: scientificname,
+ threat_status: json[0].threat_status,
+ source: json[0].source ?? '',
+ taxa,
+ };
+ }),
+ };
+
+ const amphibians = speciesData.species.filter(
+ (item) => item.taxa === 'amphibians'
+ );
+ const birds = speciesData.species.filter(
+ (item) => item.taxa === 'birds'
+ );
+ const reptiles = speciesData.species.filter(
+ (item) => item.taxa === 'reptiles'
+ );
+ const mammals = speciesData.species.filter(
+ (item) => item.taxa === 'mammals'
+ );
+
+ const ampSpecies = {
+ count: amphibians.length,
+ species: amphibians,
+ taxa: 'amphibians',
+ title: t('amphibians'),
+ };
+ const birdSpecies = {
+ count: birds.length,
+ species: birds,
+ taxa: 'birds',
+ title: t('birds'),
+ };
+ const repSpecies = {
+ count: reptiles.length,
+ species: reptiles,
+ taxa: 'reptiles',
+ title: t('reptiles'),
+ };
+ const mamSpecies = {
+ count: mammals.length,
+ species: mammals,
+ taxa: 'mammals',
+ title: t('mammals'),
+ };
+ const data = [ampSpecies, birdSpecies, repSpecies, mamSpecies];
+
+ getOccurenceSpecies(data);
+ } else {
+ const { attributes } = features[0];
+
+ const { amphibians, birds, reptiles, mammals } = attributes;
+
+ const [amphibianData, birdsData, reptilesData, mammalsData] =
+ await Promise.all([
+ getTaxaSpecies('amphibians', amphibians),
+ getTaxaSpecies('birds', birds),
+ getTaxaSpecies('reptiles', reptiles),
+ getTaxaSpecies('mammals', mammals),
+ ]);
+
+ const ampSpecies = getSpeciesDetails(amphibianData, 'amphibians');
+ const birdSpecies = getSpeciesDetails(birdsData, 'birds');
+ const repSpecies = getSpeciesDetails(reptilesData, 'reptiles');
+ const mamSpecies = getSpeciesDetails(mammalsData, 'mammals');
+
+ const speciesData = [ampSpecies, birdSpecies, repSpecies, mamSpecies];
+
+ getOccurenceSpecies(speciesData);
+ }
+ }
+ };
+
+ const getSpiDataByCountry = (d) => {
+ const spiCountryData = d.reduce((acc, obj) => {
+ const key = obj.country_name;
+ if (!acc[key]) {
+ acc[key] = { shs: [] };
+ }
+ acc[key].shs.push(obj);
+ return acc;
+ }, {});
+
+ setSpiDataByCountry(spiCountryData);
+ };
+
+ const getDataByCountry = (d) => {
+ let countryData;
+
+ // TODO: figure out what to do when no shs is returned
+ if (d.shs) {
+ countryData = d.shs.reduce((acc, obj) => {
+ const key = obj.country;
+ if (!acc[key]) {
+ acc[key] = { shs: [], frag: [] };
+ }
+ acc[key].shs.push(obj);
+ return acc;
+ }, {});
+ }
+
+ if (d.frag) {
+ countryData = d.frag.reduce((acc, obj) => {
+ const key = obj.country;
+ if (!acc[key]) {
+ acc[key] = { shs: [], frag: [] };
+ }
+
+ acc[key].frag.push(obj);
+ return acc;
+ }, countryData || {});
+ }
+
+ setDataByCountry(countryData);
+ };
+
+ const getPrioritySpeciesList = async () => {
+ const url = DASHBOARD_URLS.PRIORITY_SPECIES;
+ const whereClause = `country_code = '${countryISO}'`;
+
+ const features = await EsriFeatureService.getFeatures({
+ url,
+ whereClause,
+ returnGeometry: false,
+ });
+
+ const species = features.map(({ attributes }) => attributes);
+
+ setPrioritySpeciesList(species);
+ };
+
+ const handleMapLoad = (map, activeLayers) => {
+ setBasemap({
+ map,
+ layersArray: viewSettings.basemap.layersArray,
+ });
+ activateLayersOnLoad(map, activeLayers, layersConfig);
+ };
+
+ const getData = async () => {
+ const habitatTrendUrl = `https://next-api-dot-api-2-x-dot-map-of-life.appspot.com/2.x/species/indicators/habitat-trends/bycountry?scientificname=${scientificName}`;
+ const spiScoreURL = `https://next-api-dot-api-2-x-dot-map-of-life.appspot.com/2.x/indicators/sps/species_bycountry?scientificname=${scientificName}`;
+
+ const apiCalls = [habitatTrendUrl, spiScoreURL];
+
+ const apiResponses = await Promise.all(
+ apiCalls.map(async (url) => {
+ const response = await fetch(url);
+ const d = await response.json();
+ return d;
+ })
+ );
+
+ const [habitatTrendData, spiScoreData] = apiResponses;
+ getDataByCountry(habitatTrendData);
+ getSpiDataByCountry(spiScoreData);
+
+ setData({ habitatTrendData, spiScoreData });
+ };
+
+ // Get Country information, allows to get country name
+ useEffect(() => {
+ getQueryParams();
+
+ // Function to handle back navigation
+ const handleBackButton = () => {
+ // Implement custom behavior here
+ setSelectedIndex(window.history.state?.selectedIndex ?? 1);
+ };
+
+ // Add event listener for popstate event
+ window.addEventListener('popstate', handleBackButton);
+
+ setCountryDataLoading();
+ EsriFeatureService.getFeatures({
+ url: COUNTRIES_DATA_SERVICE_URL,
+ whereClause: `GID_0 = '${countryISO}'`,
+ returnGeometry: true,
+ })
+ .then((features) => {
+ const { geometry } = features[0];
+
+ setCountryDataReady(features);
+ if (geometry) {
+ setGeometry(geometry);
+ }
+ })
+ .catch((error) => {
+ setCountryDataError(error);
+ });
+
+ getSpeciesList();
+ getPrioritySpeciesList();
+
+ // Cleanup event listener on component unmount
+ return () => {
+ window.removeEventListener('popstate', handleBackButton);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (!selectedRegion) return;
+ getSpeciesList();
+ }, [selectedRegion]);
+
+ useEffect(() => {
+ if (!scientificName) return;
+ getSpeciesData();
+ }, [scientificName]);
+
+ useEffect(() => {
+ if (!speciesInfo) return;
+ getDataLayersData();
+ }, [speciesInfo]);
+
+ useEffect(() => {
+ if (!dataLayerData) return;
+ getData();
+ }, [dataLayerData]);
+
+ useEffect(() => {
+ browsePage({
+ type: DASHBOARD,
+ payload: { iso: countryISO.toLowerCase() },
+ query: {
+ species: scientificName ?? undefined,
+ tab: selectedIndex,
+ trend: tabOption ?? undefined,
+ region: selectedRegion ?? undefined,
+ // province: provinceName ?? undefined,
+ lang: user?.culture?.split('-')[0] ?? undefined,
+ },
+ });
+ }, [
+ scientificName,
+ selectedIndex,
+ tabOption,
+ selectedRegion,
+ provinceName,
+ user,
+ ]);
+
+ return (
+
+ );
+}
+
+export default connect(mapStateToProps, actions)(DashboardContainer);
diff --git a/src/router.ts b/src/router.ts
index deac323f4..8bdf03a1a 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,6 +1,6 @@
+import { connectRoutes, NOT_FOUND, redirect } from 'redux-first-router';
import { decodeUrlForState, encodeStateForUrl } from 'utils/state-to-url';
-import { connectRoutes, NOT_FOUND, redirect } from 'redux-first-router';
import type { RoutesMap } from 'redux-first-router';
export const LANDING = 'location/';
@@ -11,6 +11,7 @@ export const NATIONAL_REPORT_CARD_LANDING =
'location/NATIONAL_REPORT_CARD_LANDING';
export const AREA_OF_INTEREST = 'location/AREA_OF_INTEREST';
export const MAP_IFRAME = 'location/MAP_IFRAME';
+export const DASHBOARD = 'location/DASHBOARD';
export const routes: RoutesMap<{ path: string; page?: string }> = {
[LANDING]: {
@@ -37,6 +38,10 @@ export const routes: RoutesMap<{ path: string; page?: string }> = {
path: '/aoi/:id?',
page: 'aoi',
},
+ [DASHBOARD]: {
+ path: '/dashboard/:iso',
+ page: 'dashboard',
+ },
[NOT_FOUND]: {
path: '/404',
thunk: (dispatch) => dispatch(redirect({ type: LANDING })),
diff --git a/src/services/esri-feature-service.ts b/src/services/esri-feature-service.ts
index d33391d4f..5b2c1d14e 100644
--- a/src/services/esri-feature-service.ts
+++ b/src/services/esri-feature-service.ts
@@ -1,15 +1,22 @@
+import { LAYER_OPTIONS, LAYER_TITLE_TYPES } from 'constants/dashboard-constants.js';
+import { LAYERS_URLS } from 'constants/layers-urls';
+import { LOCAL_SPATIAL_REFERENCE } from 'constants/scenes-constants';
+import { AddFeature, GetFeatures, GetLayer } from 'types/services-types';
+import {
+ EXPERT_RANGE_MAP_URL, PROTECTED_AREA_FEATURE_URL, PROTECTED_AREA_GIN_FEATURE_URL,
+ PROTECTED_AREA_GUY_FEATURE_URL, PROTECTED_AREA_LIB_FEATURE_URL, PROTECTED_AREA_SLE_FEATURE_URL,
+ TREND_MAP_URL
+} from 'utils/dashboard-utils';
+
+import CSVLayer from '@arcgis/core/layers/CSVLayer';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
-import * as query from '@arcgis/core/rest/query';
+import GeoJSONLayer from '@arcgis/core/layers/GeoJSONLayer';
+import TileLayer from '@arcgis/core/layers/TileLayer';
+import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer';
+import WebTileLayer from '@arcgis/core/layers/WebTileLayer';
import {
- addFeatures,
- queryFeatures,
- applyEdits,
- IQueryFeaturesResponse,
+ addFeatures, applyEdits, IQueryFeaturesResponse, queryFeatures
} from '@esri/arcgis-rest-feature-layer';
-import { AddFeature, GetFeatures, GetLayer } from 'types/services-types';
-
-import { LAYERS_URLS } from 'constants/layers-urls';
-import { LOCAL_SPATIAL_REFERENCE } from 'constants/scenes-constants';
function getFeatures({
url,
@@ -20,6 +27,7 @@ function getFeatures({
wkid: LOCAL_SPATIAL_REFERENCE,
},
geometry = null,
+ orderByFields = [],
}: GetFeatures) {
return new Promise((resolve) => {
const layer = new FeatureLayer({
@@ -29,10 +37,11 @@ function getFeatures({
const featureQuery = layer.createQuery();
featureQuery.outFields = outFields;
featureQuery.where = whereClause;
- if (geometry) {
- featureQuery.geometry = geometry;
- }
- featureQuery.returnGeometry = returnGeometry;
+ featureQuery.orderByFields = orderByFields;
+ // if (geometry) {
+ // featureQuery.geometry = geometry;
+ // }
+ // featureQuery.returnGeometry = returnGeometry;
featureQuery.outSpatialReference = outSpatialReference;
layer.queryFeatures(featureQuery).then((results) => {
// TODO: TS-TODO: Type results.
@@ -44,6 +53,87 @@ function getFeatures({
});
}
+function getVectorTileLayer(url, id, countryISO) {
+ return new VectorTileLayer({
+ url,
+ id,
+ });
+}
+
+function getFeatureLayer(portalItemId, countryISO, id) {
+ return new FeatureLayer({
+ portalItem: {
+ id: portalItemId,
+ },
+ outFields: ['*'],
+ definitionExpression: countryISO ? `GID_0 = '${countryISO}'` : '',
+ id: id ?? LAYER_OPTIONS.PROVINCES,
+ });
+}
+
+function getFeatureOccurenceLayer(portalItemId, scientificName, id) {
+ return new FeatureLayer({
+ portalItem: {
+ id: portalItemId,
+ },
+ outFields: ['*'],
+ definitionExpression: `scientific= '${scientificName}'`,
+ id,
+ });
+}
+
+function getCSVLayer() {
+ return new CSVLayer({
+ // needs to be public accesible URL for csv file
+ url: 'https://raw.githubusercontent.com/MapofLife/half-earth-v3/refs/heads/develop/src/assets/data/drc_speciesRecords.csv', // URL to your CSV file
+ latitudeField: 'lat', // Name of the latitude column
+ longitudeField: 'long', // Name of the longitude column
+ id: 'POINT_OBSERVATIONS',
+ });
+}
+
+function getGeoJsonLayer(scientificname, id, countryISO = 'CD') {
+ return new GeoJSONLayer({
+ url: `https://storage.googleapis.com/cdn.mol.org/eow_demo/occ/${countryISO}_${scientificname}.geojson`,
+ id,
+ });
+}
+
+async function getXYZLayer(scientificname, id, type) {
+ let url;
+
+ if (type === LAYER_TITLE_TYPES.EXPERT_RANGE_MAPS) {
+ url = `${EXPERT_RANGE_MAP_URL}?scientificname=${scientificname}`;
+ } else if (type === LAYER_TITLE_TYPES.TREND) {
+ url = `${TREND_MAP_URL}?scientificname=${scientificname}`;
+ }
+
+ const response = await fetch(url);
+ const data = await response.json();
+
+ return new WebTileLayer({
+ urlTemplate: data.url,
+ id,
+ });
+}
+
+function getMVTSource(scientificname) {
+ return {
+ type: 'vector',
+ tiles: [
+ 'https://production-dot-tiler-dot-map-of-life.appspot.com/0.x/tiles/regions/regions/{proj}/{z}/{x}/{y}.pbf?region_id=1673cab0-c717-4367-9db0-5c63bf26944d',
+ ],
+ };
+}
+
+function getTileLayer(url, id) {
+ return new TileLayer({
+ url,
+ id,
+ visible: true,
+ });
+}
+
function getLayer({ slug, outFields = ['*'] }: GetLayer) {
return new FeatureLayer({
url: LAYERS_URLS[slug],
@@ -85,8 +175,48 @@ function addFeature({ url, features }: AddFeature) {
});
}
+function addProtectedAreaLayer(id, countryISO = 'COD') {
+ let featurePortalId = PROTECTED_AREA_FEATURE_URL;
+
+ switch (countryISO) {
+ case 'LBR':
+ featurePortalId = PROTECTED_AREA_LIB_FEATURE_URL;
+ break;
+ case 'GIN':
+ featurePortalId = PROTECTED_AREA_GIN_FEATURE_URL;
+ break;
+ case 'SLE':
+ featurePortalId = PROTECTED_AREA_SLE_FEATURE_URL;
+ break;
+ case 'GUY':
+ featurePortalId = PROTECTED_AREA_GUY_FEATURE_URL;
+ break;
+ default:
+ break;
+ }
+
+ const featureLayer = new FeatureLayer({
+ portalItem: {
+ id: featurePortalId,
+ },
+ outFields: ['*'],
+ id: id ?? LAYER_OPTIONS.PROTECTED_AREAS,
+ });
+
+ return featureLayer;
+}
+
export default {
getFeatures,
getLayer,
addFeature,
+ getFeatureLayer,
+ getGeoJsonLayer,
+ getVectorTileLayer,
+ getXYZLayer,
+ getTileLayer,
+ getMVTSource,
+ addProtectedAreaLayer,
+ getCSVLayer,
+ getFeatureOccurenceLayer,
};
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index b27df746b..1313fd993 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -22,9 +22,18 @@ $medium-purple: #8b62e9;
$tango: #e87926;
$french-rose: #eb588f;
$neon-carrot: #ff9c32;
+$bubbles: #FF7841;
$white-opacity: rgba(255, 255, 255, 0.1);
$white-opacity-20: rgba($white, 0.2);
+$connectivity: #8578EB;
+$habitat: #3AA8EE;
+$area: #7DDECC;
+$area-protected: #3ABC64;
+$habitat-country: #2F2CAE;
+$habitat-country-compare: #228D19;
+
+
// Project colors
$space-background: #09141a;
$navy-he: $elephant;
@@ -52,6 +61,10 @@ $birds-color: $saffron-mango;
$fishes-color: #38e5db;
$reptiles-color: $conifer;
+// mol colors
+$mol-blue: #243474;
+$mol-green: #317D56;
+
// layers
$carbon-layer: #ff9500;
@@ -110,6 +123,12 @@ $spi-chart-gradient: linear-gradient(
);
$challenges-view-background: #040e14;
$warning: #dc2626;
+$pointObservations: #54B04A;
+$habitatSuitableRange: #E7C750;
+$localInventories: #7D4182;
+$expertRangeMap: #5A9AB5;
+$regionalChecklist: #AE305C;
+$privatePointObservations: #E93C39;
// country ranking
$endemic-species: #f8d300;
@@ -159,6 +178,7 @@ $font-size-sm: 14px;
$font-size-base: 1rem;
$font-size-legend: 17px;
$font-size-tick: 18px;
+$font-size-ml: 20px;
$font-size-rg: 24px;
$font-size-xl: 32px;
$font-size-xxl: 40px;
@@ -173,6 +193,9 @@ $font-family-1: 'Open Sans', sans-serif;
$font-family-1-light: 'Open Sans', sans-serif;
$font-family-serif: 'ivypresto-display', serif;
$font-family-sans-serif: 'Open Sans', sans-serif;
+$font-family-roboto: 'Roboto', sans-serif;
+$font-family-roboto-condensed: 'Roboto Condensed', sans-serif;
+$font-family-roboto-flex: 'Roboto Flex', sans-serif;
// Layout
$site-gutter: 20px;
@@ -283,6 +306,15 @@ $desktop: 'screen and (min-width: #{$breakpoint-desktop})';
--athens-gray: #{$athens-gray};
--oslo-gray: #{$oslo-gray};
+ // TRENDS
+ --birds: #{$birds-color};
+ --mammals:#{$mammals-color};
+ --reptiles:#{$reptiles-color};
+ --amphibians: #{$amphibians-color};
+ --temporal-spi: #{$regionalChecklist};
+ --bubble: #{$bubbles};
+ --bubble-selected: #{$brand-color-main};
+
// Landcover legend
--water: #{$water};
--trees: #{$trees};
@@ -296,4 +328,16 @@ $desktop: 'screen and (min-width: #{$breakpoint-desktop})';
// FONT FAMILIES
--font-family-serif: #{$font-family-serif};
-}
\ No newline at end of file
+
+ // MOL colors
+ --mol-blue: #{$mol-blue};
+ --mol-green: #{$mol-green};
+ --dark-opacity: #{$dark-opacity};
+
+ --connectivity: #{$connectivity};
+ --habitat: #{$habitat};
+ --area: #{$area};
+ --area-protected: #{$area-protected};
+ --habitat-country: #{$habitat-country};
+ --habitat-country-compare: #{$habitat-country-compare};
+}
diff --git a/src/styles/themes/checkboxes-theme.module.scss b/src/styles/themes/checkboxes-theme.module.scss
index 1b2ce6a54..f7613bf2e 100644
--- a/src/styles/themes/checkboxes-theme.module.scss
+++ b/src/styles/themes/checkboxes-theme.module.scss
@@ -75,3 +75,42 @@
}
}
+
+
+
+.pointObservations{
+ input:checked+label::after {
+ background-color: $pointObservations;
+ }
+}
+
+.privatePointObservations{
+ input:checked+label::after {
+ background-color: $privatePointObservations;
+ }
+}
+
+
+.habitatSuitableRange{
+ input:checked+label::after {
+ background-color: $habitatSuitableRange;
+ }
+}
+
+.localInventories{
+ input:checked+label::after {
+ background-color: $localInventories;
+ }
+}
+
+.expertRangeMap{
+ input:checked+label::after {
+ background-color: $expertRangeMap;
+ }
+}
+
+.regionalChecklist{
+ input:checked+label::after {
+ background-color: $regionalChecklist
+ }
+}
diff --git a/src/styles/ui.module.scss b/src/styles/ui.module.scss
index 70f63c491..1bc3ebd0a 100644
--- a/src/styles/ui.module.scss
+++ b/src/styles/ui.module.scss
@@ -55,6 +55,16 @@ $scrollbar-width: 4px;
}
}
+@mixin lightBackdropBlur($colour: rgba(255, 255, 255, 0.7), $fallback: $space-background, $fallbackOpacity: 0.7) {
+ background-color: rgba($fallback, $fallbackOpacity);
+
+ @supports ((-webkit-backdrop-filter: blur($blur-level)) or (backdrop-filter: blur($blur-level))) {
+ background-color: $colour;
+ -webkit-backdrop-filter: blur($blur-level);
+ backdrop-filter: blur($blur-level);
+ }
+}
+
%spacer {
height: 1px;
background-image: linear-gradient(to right, rgba($alto, $spacer-edge-opacity), rgba($white, $spacer-middle-opacity), rgba($alto, $spacer-edge-opacity))
@@ -102,4 +112,4 @@ $scrollbar-width: 4px;
canvas {
filter: blur($bottom-menu-blur);
}
-}
\ No newline at end of file
+}
diff --git a/src/types/services-types.d.ts b/src/types/services-types.d.ts
index d2ffb2ad9..b131967e7 100644
--- a/src/types/services-types.d.ts
+++ b/src/types/services-types.d.ts
@@ -127,6 +127,7 @@ export interface GetFeatures {
returnGeometry: boolean;
url: string;
whereClause?: string;
+ orderByFields?: string[];
}
export interface GetLayer {
diff --git a/src/utils/dashboard-utils.js b/src/utils/dashboard-utils.js
new file mode 100644
index 000000000..95f6c9def
--- /dev/null
+++ b/src/utils/dashboard-utils.js
@@ -0,0 +1,86 @@
+import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
+import GroupLayer from '@arcgis/core/layers/GroupLayer';
+import TileLayer from '@arcgis/core/layers/TileLayer';
+
+import { DASHBOARD_LAYER_SLUGS } from 'constants/dashboard-constants';
+import { DASHBOARD_URLS } from 'constants/layers-urls';
+
+export const PROVINCE_FEATURE_GLOBAL_SPI_LAYER_ID =
+ 'e3dca98a5bf74c9898c30f72baf6b1ba';
+export const PROVINCE_FEATURE_GLOBAL_OUTLINE_ID =
+ 'c6bc2248f053422da9d8d30ce591ca16';
+
+// DRC LAYERS
+export const PROTECTED_AREA_FEATURE_URL = '6b13aac7863a44bb915d1847dfc5dfd9';
+export const SHI_LAYER_ID = '41981d576d6042aea14595de0fb924f2';
+export const DRC_REGION_FEATURE_ID = '95cac457c0244a2286d914148c24af98';
+export const EXPERT_RANGE_MAP_URL =
+ 'https://next-api-dot-map-of-life.appspot.com/2.x/species/drc_rangemap';
+export const TREND_MAP_URL =
+ 'https://next-api-dot-map-of-life.appspot.com/2.x/species/drc_trend';
+
+// LIBERIA LAYERS
+export const PROTECTED_AREA_LIB_FEATURE_URL =
+ 'db67d0fa645047a18d83c1c5a67e9d99';
+
+// GUINEA LAYERS
+export const PROTECTED_AREA_GIN_FEATURE_URL =
+ 'fd86210b977c4ec3935f297559dcd80b';
+
+// SIERRA LEONE
+export const PROTECTED_AREA_SLE_FEATURE_URL =
+ 'af483c5930f9447080c9e49f8698882d';
+
+// GUYANA
+export const PROTECTED_AREA_GUY_FEATURE_URL =
+ 'd610d9ad96bc4071a31b3aacdfbf844d';
+
+export const GBIF_OCCURENCE_URL = 'fa37779380764f939a4747e92b3d3fb2';
+
+export const DASHBOARD_TABLE_URL =
+ 'https://services9.arcgis.com/IkktFdUAcY3WrH25/arcgis/rest/services/ESRI_table1/FeatureServer';
+
+// temporary for DRC demo
+export const SPECIES_LAYER_IDS = {
+ Myotis_bocagii: 'c41c9e06c2284b44be9fc41d144e63ba',
+ Hyperolius_castaneus: 'a8d710cd5a5f4124b90ff189cdcdfeba',
+ Chiromantis_rufescens: 'eb1019801a8b44bebd98e0452ef20132',
+};
+
+export const createDefaultDashboardLayers = () => {
+ const countries = new FeatureLayer({
+ portalItem: {
+ id: DASHBOARD_URLS.INITIAL_COUNTRY_LAYER,
+ },
+ id: DASHBOARD_LAYER_SLUGS.INITIAL_COUNTRY_LAYER,
+ });
+
+ const graphics = new GraphicsLayer({
+ blendMode: 'destination-in',
+ title: 'layer',
+ });
+
+ const tileLayer = new TileLayer({
+ portalItem: {
+ // bottom layer in the group layer
+ id: '10df2279f9684e4a9f6a7f08febac2a9', // world imagery
+ },
+ });
+
+ const group = new GroupLayer({
+ id: DASHBOARD_LAYER_SLUGS.INITIAL_GROUP_LAYER,
+ layers: [
+ tileLayer,
+ // world imagery layer will show where it overlaps with the graphicslayer
+ graphics,
+ ],
+ opacity: 0, // initially this layer will be transparent
+ });
+
+ return {
+ countries,
+ graphics,
+ group,
+ };
+};
diff --git a/vercel.json b/vercel.json
index 0a3c9786c..cfc171f2b 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,3 +1,9 @@
{
- "outputDirectory": "dist"
-}
\ No newline at end of file
+ "outputDirectory": "dist",
+ "rewrites": [
+ {
+ "source": "/(.*)",
+ "destination": "/"
+ }
+ ]
+}
diff --git a/vite.config.ts b/vite.config.ts
index bdbb506f7..5773808b0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,13 @@
import path from 'path';
-
-import react from '@vitejs/plugin-react';
import { defineConfig, transformWithEsbuild } from 'vite';
import svgr from 'vite-plugin-svgr';
import viteTsconfigPaths from 'vite-tsconfig-paths';
+
+import basicSsl from '@vitejs/plugin-basic-ssl';
+import react from '@vitejs/plugin-react';
+
+// vite.config.js
+
// Custom Vite plugin for directory-named resolution
function directoryNamedResolver() {
return {
@@ -74,6 +78,14 @@ export default defineConfig({
directoryNamedResolver(),
moduleScssResolver(),
svgr(),
+ basicSsl({
+ /** name of certification */
+ name: 'test',
+ /** custom trust domains */
+ domains: ['*.custom.com'],
+ /** custom certification directory */
+ certDir: '/Users/.../.devServer/cert',
+ }),
],
optimizeDeps: {
force: true,
@@ -97,7 +109,7 @@ export default defineConfig({
rollupOptions: {
output: {
manualChunks: undefined,
- },
+ },
},
},
resolve: {
@@ -118,6 +130,7 @@ export default defineConfig({
sideEffects: path.resolve(__dirname, 'src/side-effects'),
actions: path.resolve(__dirname, 'src/store/actions'),
utils: path.resolve(__dirname, 'src/utils'),
+ context: path.resolve(__dirname, 'src/context'),
constants: path.resolve(__dirname, 'src/constants'),
redux_modules: path.resolve(__dirname, 'src/store/redux-modules'),
services: path.resolve(__dirname, 'src/services'),
diff --git a/yarn.lock b/yarn.lock
index f27abe4aa..433f8ae5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -199,6 +199,13 @@
dependencies:
regenerator-runtime "^0.14.0"
+"@babel/runtime@^7.25.0":
+ version "7.25.6"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+ integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/template@^7.24.7":
version "7.24.7"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315"
@@ -309,6 +316,23 @@
source-map "^0.5.7"
stylis "4.2.0"
+"@emotion/babel-plugin@^11.13.5":
+ version "11.13.5"
+ resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0"
+ integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==
+ dependencies:
+ "@babel/helper-module-imports" "^7.16.7"
+ "@babel/runtime" "^7.18.3"
+ "@emotion/hash" "^0.9.2"
+ "@emotion/memoize" "^0.9.0"
+ "@emotion/serialize" "^1.3.3"
+ babel-plugin-macros "^3.1.0"
+ convert-source-map "^1.5.0"
+ escape-string-regexp "^4.0.0"
+ find-root "^1.1.0"
+ source-map "^0.5.7"
+ stylis "4.2.0"
+
"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
version "11.11.0"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
@@ -320,11 +344,38 @@
"@emotion/weak-memoize" "^0.3.1"
stylis "4.2.0"
+"@emotion/cache@^11.13.1":
+ version "11.13.1"
+ resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+ integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+ dependencies:
+ "@emotion/memoize" "^0.9.0"
+ "@emotion/sheet" "^1.4.0"
+ "@emotion/utils" "^1.4.0"
+ "@emotion/weak-memoize" "^0.4.0"
+ stylis "4.2.0"
+
+"@emotion/cache@^11.14.0":
+ version "11.14.0"
+ resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76"
+ integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
+ dependencies:
+ "@emotion/memoize" "^0.9.0"
+ "@emotion/sheet" "^1.4.0"
+ "@emotion/utils" "^1.4.2"
+ "@emotion/weak-memoize" "^0.4.0"
+ stylis "4.2.0"
+
"@emotion/hash@^0.9.1":
version "0.9.1"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+"@emotion/hash@^0.9.2":
+ version "0.9.2"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+ integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
"@emotion/is-prop-valid@^0.8.2":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -332,6 +383,13 @@
dependencies:
"@emotion/memoize" "0.7.4"
+"@emotion/is-prop-valid@^1.3.0":
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz#bd84ba972195e8a2d42462387581560ef780e4e2"
+ integrity sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==
+ dependencies:
+ "@emotion/memoize" "^0.9.0"
+
"@emotion/memoize@0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -342,6 +400,25 @@
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+"@emotion/memoize@^0.9.0":
+ version "0.9.0"
+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+ integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@^11.14.0":
+ version "11.14.0"
+ resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d"
+ integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
+ dependencies:
+ "@babel/runtime" "^7.18.3"
+ "@emotion/babel-plugin" "^11.13.5"
+ "@emotion/cache" "^11.14.0"
+ "@emotion/serialize" "^1.3.3"
+ "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+ "@emotion/utils" "^1.4.2"
+ "@emotion/weak-memoize" "^0.4.0"
+ hoist-non-react-statics "^3.3.1"
+
"@emotion/react@^11.8.1":
version "11.11.4"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.4.tgz#3a829cac25c1f00e126408fab7f891f00ecc3c1d"
@@ -367,11 +444,44 @@
"@emotion/utils" "^1.2.1"
csstype "^3.0.2"
+"@emotion/serialize@^1.3.3":
+ version "1.3.3"
+ resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8"
+ integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
+ dependencies:
+ "@emotion/hash" "^0.9.2"
+ "@emotion/memoize" "^0.9.0"
+ "@emotion/unitless" "^0.10.0"
+ "@emotion/utils" "^1.4.2"
+ csstype "^3.0.2"
+
"@emotion/sheet@^1.2.2":
version "1.2.2"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+"@emotion/sheet@^1.4.0":
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+ integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
+"@emotion/styled@^11.14.0":
+ version "11.14.0"
+ resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.0.tgz#f47ca7219b1a295186d7661583376fcea95f0ff3"
+ integrity sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==
+ dependencies:
+ "@babel/runtime" "^7.18.3"
+ "@emotion/babel-plugin" "^11.13.5"
+ "@emotion/is-prop-valid" "^1.3.0"
+ "@emotion/serialize" "^1.3.3"
+ "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+ "@emotion/utils" "^1.4.2"
+
+"@emotion/unitless@^0.10.0":
+ version "0.10.0"
+ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+ integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
"@emotion/unitless@^0.8.1":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
@@ -382,16 +492,36 @@
resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+"@emotion/use-insertion-effect-with-fallbacks@^1.2.0":
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf"
+ integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==
+
"@emotion/utils@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+"@emotion/utils@^1.4.0":
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.0.tgz#262f1d02aaedb2ec91c83a0955dd47822ad5fbdd"
+ integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
+
+"@emotion/utils@^1.4.2":
+ version "1.4.2"
+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52"
+ integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
+
"@emotion/weak-memoize@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
+"@emotion/weak-memoize@^0.4.0":
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+ integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
"@esbuild/aix-ppc64@0.21.5":
version "0.21.5"
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
@@ -733,6 +863,11 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"
+"@kurkle/color@^0.3.0":
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+ integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
"@lit-labs/ssr-dom-shim@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz#353ce4a76c83fadec272ea5674ede767650762fd"
@@ -843,6 +978,86 @@
hey-listen "^1.0.8"
tslib "^2.3.1"
+"@mui/core-downloads-tracker@^6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz#edaec4015e440b55d535a805bd9dcec7e421d6ce"
+ integrity sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==
+
+"@mui/icons-material@^6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.0.2.tgz#fc0fba40421eb6d44f1266b53f9d5e51b67df42b"
+ integrity sha512-WaTPSvKcx8X7NdWAHzJWDZv+YXvK0MUY8+JI/r4/q2GgIa5RW+n4+08CGX6jB7sWhU1R3zy28NfsDUwwQjOThw==
+ dependencies:
+ "@babel/runtime" "^7.25.0"
+
+"@mui/material@^6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.0.2.tgz#58a3a58d126b1b4ceb842aac401e20542ab0c17e"
+ integrity sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==
+ dependencies:
+ "@babel/runtime" "^7.25.0"
+ "@mui/core-downloads-tracker" "^6.0.2"
+ "@mui/system" "^6.0.2"
+ "@mui/types" "^7.2.16"
+ "@mui/utils" "^6.0.2"
+ "@popperjs/core" "^2.11.8"
+ "@types/react-transition-group" "^4.4.11"
+ clsx "^2.1.1"
+ csstype "^3.1.3"
+ prop-types "^15.8.1"
+ react-is "^18.3.1"
+ react-transition-group "^4.4.5"
+
+"@mui/private-theming@^6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-6.0.2.tgz#498cf18040cdb196d1280f1d829d996d2a07e004"
+ integrity sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==
+ dependencies:
+ "@babel/runtime" "^7.25.0"
+ "@mui/utils" "^6.0.2"
+ prop-types "^15.8.1"
+
+"@mui/styled-engine@^6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-6.0.2.tgz#7eac59f5e9e1a7efba24d245d62de91752a67cc3"
+ integrity sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==
+ dependencies:
+ "@babel/runtime" "^7.25.0"
+ "@emotion/cache" "^11.13.1"
+ csstype "^3.1.3"
+ prop-types "^15.8.1"
+
+"@mui/system@^6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.0.2.tgz#9dce511047f63a5d819914cc978b719f439ebbc3"
+ integrity sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==
+ dependencies:
+ "@babel/runtime" "^7.25.0"
+ "@mui/private-theming" "^6.0.2"
+ "@mui/styled-engine" "^6.0.2"
+ "@mui/types" "^7.2.16"
+ "@mui/utils" "^6.0.2"
+ clsx "^2.1.1"
+ csstype "^3.1.3"
+ prop-types "^15.8.1"
+
+"@mui/types@^7.2.16":
+ version "7.2.16"
+ resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.16.tgz#66710c691b51cd4fca95322100cd74ec230cfe30"
+ integrity sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==
+
+"@mui/utils@^6.0.2":
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.0.2.tgz#be3c7e79af074bce57559b7ea4c693d3a4c3c2ca"
+ integrity sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==
+ dependencies:
+ "@babel/runtime" "^7.25.0"
+ "@mui/types" "^7.2.16"
+ "@types/prop-types" "^15.7.12"
+ clsx "^2.1.1"
+ prop-types "^15.8.1"
+ react-is "^18.3.1"
+
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1038,7 +1253,7 @@
dependencies:
"@webcomponents/shadycss" "^1.9.1"
-"@popperjs/core@^2.9.0":
+"@popperjs/core@^2.11.8", "@popperjs/core@^2.9.0":
version "2.11.8"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -1757,7 +1972,7 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
-"@types/prop-types@*", "@types/prop-types@^15.0.0":
+"@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.12":
version "15.7.12"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
@@ -1786,6 +2001,13 @@
dependencies:
"@types/react" "*"
+"@types/react-transition-group@^4.4.11":
+ version "4.4.11"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
+ integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
+ dependencies:
+ "@types/react" "*"
+
"@types/react@*", "@types/react@^18.0.26":
version "18.3.3"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
@@ -2082,6 +2304,11 @@
dependencies:
"@vaadin/vaadin-development-mode-detector" "^2.0.0"
+"@vitejs/plugin-basic-ssl@^1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz#8b840305a6b48e8764803435ec0c716fa27d3802"
+ integrity sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==
+
"@vitejs/plugin-react@^4.3.1":
version "4.3.1"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz#d0be6594051ded8957df555ff07a991fb618b48e"
@@ -3316,6 +3543,13 @@ charenc@0.0.2, "charenc@>= 0.0.1":
resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+chart.js@^4.4.3:
+ version "4.4.3"
+ resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.3.tgz#3b2e11e7010fefa99b07d0349236f5098e5226ad"
+ integrity sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==
+ dependencies:
+ "@kurkle/color" "^0.3.0"
+
check-more-types@^2.24.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -3427,7 +3661,7 @@ cli-ux@^6.0.9:
supports-hyperlinks "^2.1.0"
tslib "^2.0.0"
-clsx@^2.0.0:
+clsx@^2.0.0, clsx@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -3679,7 +3913,7 @@ cssfilter@0.0.10:
resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
integrity sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -7434,6 +7668,11 @@ rc-util@^5.16.1, rc-util@^5.19.2, rc-util@^5.26.0, rc-util@^5.43.0:
"@babel/runtime" "^7.18.3"
react-is "^18.2.0"
+react-chartjs-2@^5.2.0:
+ version "5.2.0"
+ resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
+ integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
+
react-copy-to-clipboard@^5.0.1:
version "5.1.0"
resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
@@ -7470,7 +7709,7 @@ react-is@^16.10.2, react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-react-is@^18.0.0, react-is@^18.2.0:
+react-is@^18.0.0, react-is@^18.2.0, react-is@^18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+