From 0aa6de67d9ec9e1b0ccda7ca51e82cac3b808a48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?= Date: Tue, 5 Mar 2024 18:24:42 +0100 Subject: [PATCH] WIP --- client/package.json | 1 + client/src/components/button/component.tsx | 12 +- .../components/icons/commodities/cattle.tsx | 19 ++ .../components/icons/commodities/cocoa.tsx | 19 ++ .../components/icons/commodities/coffee.tsx | 18 ++ .../components/icons/commodities/palm-oil.tsx | 19 ++ .../components/icons/commodities/rubber.tsx | 19 ++ .../src/components/icons/commodities/soy.tsx | 19 ++ .../src/components/icons/commodities/wood.tsx | 19 ++ .../breakdown/breakdown-item/index.tsx | 14 +- .../breakdown/breakdown-item/utils.ts | 36 ++++ .../deforestation-free-suppliers/index.tsx | 67 ++++++- .../category-list/breakdown/index.tsx | 15 ++ .../index.tsx | 64 +++++- .../suppliers-with-no-location-data/index.tsx | 64 +++++- .../analysis-eudr/category-list/index.tsx | 42 ++-- .../suppliers-stacked-bar/component.tsx | 70 +------ client/yarn.lock | 185 +++++++++++++++++- 18 files changed, 598 insertions(+), 104 deletions(-) create mode 100644 client/src/components/icons/commodities/cattle.tsx create mode 100644 client/src/components/icons/commodities/cocoa.tsx create mode 100644 client/src/components/icons/commodities/coffee.tsx create mode 100644 client/src/components/icons/commodities/palm-oil.tsx create mode 100644 client/src/components/icons/commodities/rubber.tsx create mode 100644 client/src/components/icons/commodities/soy.tsx create mode 100644 client/src/components/icons/commodities/wood.tsx create mode 100644 client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts create mode 100644 client/src/containers/analysis-eudr/category-list/breakdown/index.tsx diff --git a/client/package.json b/client/package.json index ca08044d54..61aca4c580 100644 --- a/client/package.json +++ b/client/package.json @@ -73,6 +73,7 @@ "react-map-gl": "7.1.7", "react-range": "1.8.14", "react-redux": "8.0.2", + "react-world-flags": "1.6.0", "recharts": "2.9.0", "rooks": "7.14.1", "sharp": "0.32.6", diff --git a/client/src/components/button/component.tsx b/client/src/components/button/component.tsx index 32e7c2255f..17b5ac4282 100644 --- a/client/src/components/button/component.tsx +++ b/client/src/components/button/component.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import classNames from 'classnames'; import Link from 'next/link'; import { pickBy } from 'lodash-es'; import Loading from 'components/loading'; +import { cn } from '@/lib/utils'; import type { LinkProps } from 'next/link'; import type { FC } from 'react'; @@ -53,7 +53,7 @@ const PRIMARY = const BASE_BORDER = 'border bg-transparent focus:outline-offset-2 focus:outline focus:outline-none focus:ring-1'; -const SECONDARY = classNames( +const SECONDARY = cn( BASE_BORDER, 'border border-gray-300 focus:border-navy-400 text-gray-600 hover:bg-gray-50 focus:ring-green-700', ); @@ -61,7 +61,7 @@ const SECONDARY = classNames( const TERTIARY = 'border-transparent shadow-sm text-white bg-gray-500 hover:bg-gray-600 focus:outline-offset-2 focus:outline focus:outline-gray-500/20'; -const PRIMARY_LIGHT = classNames(BASE_BORDER, 'text-navy-400 border-navy-400'); +const PRIMARY_LIGHT = cn(BASE_BORDER, 'text-navy-400 border-navy-400'); export const THEME = { default: COMMON_CLASSNAMES, @@ -106,7 +106,7 @@ const buildClassName = ({ size, variant, }: ButtonProps | AnchorProps) => - classNames( + cn( classes.base, danger ? classes.variant[variant].danger : classes.variant[variant].default, classes.size[size], @@ -121,7 +121,7 @@ const ButtonTemplate: React.FC = ({ danger, icon, loading, si {!loading && icon && (
{React.cloneElement(icon, { - className: classNames( + className: cn( { 'w-3 h-3': size === 'xs', 'w-4 h-4': size !== 'xs', @@ -134,7 +134,7 @@ const ButtonTemplate: React.FC = ({ danger, icon, loading, si )} {loading && ( ) => { + return ( + + + + + ); +}; + +export default CattleSVG; diff --git a/client/src/components/icons/commodities/cocoa.tsx b/client/src/components/icons/commodities/cocoa.tsx new file mode 100644 index 0000000000..49121f464e --- /dev/null +++ b/client/src/components/icons/commodities/cocoa.tsx @@ -0,0 +1,19 @@ +import type { SVGAttributes } from 'react'; + +const CocoaSVG = (props?: SVGAttributes) => { + return ( + + + + + ); +}; + +export default CocoaSVG; diff --git a/client/src/components/icons/commodities/coffee.tsx b/client/src/components/icons/commodities/coffee.tsx new file mode 100644 index 0000000000..1d437c4f58 --- /dev/null +++ b/client/src/components/icons/commodities/coffee.tsx @@ -0,0 +1,18 @@ +import type { SVGAttributes } from 'react'; + +const CoffeeSVG = (props?: SVGAttributes) => { + return ( + + + + ); +}; + +export default CoffeeSVG; diff --git a/client/src/components/icons/commodities/palm-oil.tsx b/client/src/components/icons/commodities/palm-oil.tsx new file mode 100644 index 0000000000..5c9b7b304b --- /dev/null +++ b/client/src/components/icons/commodities/palm-oil.tsx @@ -0,0 +1,19 @@ +import type { SVGAttributes } from 'react'; + +const PalmOilSVG = (props?: SVGAttributes) => { + return ( + + + + + ); +}; + +export default PalmOilSVG; diff --git a/client/src/components/icons/commodities/rubber.tsx b/client/src/components/icons/commodities/rubber.tsx new file mode 100644 index 0000000000..7829d7293d --- /dev/null +++ b/client/src/components/icons/commodities/rubber.tsx @@ -0,0 +1,19 @@ +import type { SVGAttributes } from 'react'; + +const RubberSVG = (props?: SVGAttributes) => { + return ( + + + + + ); +}; + +export default RubberSVG; diff --git a/client/src/components/icons/commodities/soy.tsx b/client/src/components/icons/commodities/soy.tsx new file mode 100644 index 0000000000..fa6c7daf89 --- /dev/null +++ b/client/src/components/icons/commodities/soy.tsx @@ -0,0 +1,19 @@ +import type { SVGAttributes } from 'react'; + +const SoySVG = (props?: SVGAttributes) => { + return ( + + + + + ); +}; + +export default SoySVG; diff --git a/client/src/components/icons/commodities/wood.tsx b/client/src/components/icons/commodities/wood.tsx new file mode 100644 index 0000000000..1def181713 --- /dev/null +++ b/client/src/components/icons/commodities/wood.tsx @@ -0,0 +1,19 @@ +import type { SVGAttributes } from 'react'; + +const WoodSVG = (props?: SVGAttributes) => { + return ( + + + + + ); +}; + +export default WoodSVG; diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/index.tsx b/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/index.tsx index c2317c0e96..40b46d5ff3 100644 --- a/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/index.tsx +++ b/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/index.tsx @@ -1,4 +1,4 @@ -import { formatPercentage } from '@/utils/number-format'; +import type { ReactNode } from 'react'; const BreakdownItem = ({ name, @@ -8,21 +8,21 @@ const BreakdownItem = ({ }: { name: string; color: string; - icon: string; + icon: ReactNode; value: number; }): JSX.Element => { return ( -
-
-
+
+
+ {icon ?? null} {name}
- {formatPercentage(value)} of suppliers + {`${value}%`} of suppliers
-
+
diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts b/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts new file mode 100644 index 0000000000..d8b863d73c --- /dev/null +++ b/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts @@ -0,0 +1,36 @@ +import { cloneElement } from 'react'; + +import CocoaSVG from '@/components/icons/commodities/cocoa'; +import SoySVG from '@/components/icons/commodities/soy'; +import RubberSVG from '@/components/icons/commodities/rubber'; +import WoodSVG from '@/components/icons/commodities/wood'; +import CoffeeSVG from '@/components/icons/commodities/coffee'; +import PalmOilSVG from '@/components/icons/commodities/palm-oil'; +import CattleSVG from '@/components/icons/commodities/cattle'; +import { cn } from '@/lib/utils'; + +export type CommodityName = 'cocoa' | 'soy' | 'rubber' | 'wood' | 'coffee' | 'palm-oil' | 'cattle'; + +const SVGS_DICTIONARY = { + cocoa: CocoaSVG, + soy: SoySVG, + rubber: RubberSVG, + wood: WoodSVG, + coffee: CoffeeSVG, + 'palm-oil': PalmOilSVG, + cattle: CattleSVG, +}; + +export function getCommodityIconByName( + commodity: CommodityName, + iconProps?: React.SVGProps, +) { + const Icon = SVGS_DICTIONARY[commodity]; + + if (Icon === undefined) return null; + + return cloneElement(Icon(), { + ...iconProps, + className: cn('w-[56px] h-[56px]', iconProps?.className), + }); +} diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx b/client/src/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx index 8018737790..1f39c3d2f4 100644 --- a/client/src/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx +++ b/client/src/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx @@ -1,16 +1,67 @@ -const SAMPLE_DATA = { - byMaterial: [ - { name: 'Supplier 1', value: 100 }, - { name: 'Supplier 1', value: 100 }, +import { useMemo, type ComponentProps } from 'react'; +import Flag from 'react-world-flags'; + +import { getCommodityIconByName } from '../breakdown-item/utils'; +import Breakdown from '..'; + +import { eudr } from '@/store/features/eudr'; +import { useAppSelector } from '@/store/hooks'; + +import type BreakdownItem from '../breakdown-item'; +import type { CommodityName } from '../breakdown-item/utils'; + +type CommonData = { + name: string; + value: number; +}; + +type CommodityData = CommonData & { + name: CommodityName; +}; + +type CountryData = CommonData & { + iso3: string; +}; + +const SAMPLE_DATA: { commodities: CommodityData[]; countries: CountryData[] } = { + commodities: [ + { name: 'cattle', value: 80 }, + { name: 'cocoa', value: 22 }, + { name: 'coffee', value: 54 }, + { name: 'palm-oil', value: 50 }, + { name: 'wood', value: 11 }, + { name: 'soy', value: 5 }, + { name: 'rubber', value: 70 }, ], - byOrigin: [ - { name: 'Supplier 1', value: 100, iso3: 'ITA' }, - { name: 'Supplier 1', value: 100, iso3: 'ITA' }, + countries: [ + { name: 'Italy', value: 33, iso3: 'ITA' }, + { name: 'Spain', value: 56, iso3: 'ESP' }, + { name: 'Brazil', value: 8, iso3: 'BRA' }, ], }; +export const CATEGORY_COLOR = '#4AB7F3'; + const DeforestationFreeSuppliersBreakdown = () => { - return
DeforestationFreeSuppliersBreakdown
; + const { viewBy } = useAppSelector(eudr); + + const data: ComponentProps[] = useMemo(() => { + if (viewBy === 'commodities') { + return SAMPLE_DATA[viewBy].map((item) => ({ + ...item, + color: CATEGORY_COLOR, + icon: getCommodityIconByName(item.name, { fill: CATEGORY_COLOR }), + })); + } + + return SAMPLE_DATA[viewBy].map((item) => ({ + ...item, + color: CATEGORY_COLOR, + icon: , + })); + }, [viewBy]); + + return ; }; export default DeforestationFreeSuppliersBreakdown; diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/index.tsx b/client/src/containers/analysis-eudr/category-list/breakdown/index.tsx new file mode 100644 index 0000000000..baaa74db46 --- /dev/null +++ b/client/src/containers/analysis-eudr/category-list/breakdown/index.tsx @@ -0,0 +1,15 @@ +import BreakdownItem from './breakdown-item'; + +import type { ComponentProps } from 'react'; + +const Breakdown = ({ data }: { data: ComponentProps[] }): JSX.Element => { + return ( +
+ {data.map((item) => ( + + ))} +
+ ); +}; + +export default Breakdown; diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx b/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx index 4a5546533f..c73da15396 100644 --- a/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx +++ b/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx @@ -1,5 +1,67 @@ +import { useMemo, type ComponentProps } from 'react'; +import Flag from 'react-world-flags'; + +import { getCommodityIconByName } from '../breakdown-item/utils'; +import Breakdown from '..'; + +import { eudr } from '@/store/features/eudr'; +import { useAppSelector } from '@/store/hooks'; + +import type BreakdownItem from '../breakdown-item'; +import type { CommodityName } from '../breakdown-item/utils'; + +type CommonData = { + name: string; + value: number; +}; + +type CommodityData = CommonData & { + name: CommodityName; +}; + +type CountryData = CommonData & { + iso3: string; +}; + +const SAMPLE_DATA: { commodities: CommodityData[]; countries: CountryData[] } = { + commodities: [ + { name: 'cattle', value: 80 }, + { name: 'cocoa', value: 22 }, + { name: 'coffee', value: 54 }, + { name: 'palm-oil', value: 50 }, + { name: 'wood', value: 11 }, + { name: 'soy', value: 5 }, + { name: 'rubber', value: 70 }, + ], + countries: [ + { name: 'Italy', value: 33, iso3: 'ITA' }, + { name: 'Spain', value: 56, iso3: 'ESP' }, + { name: 'Brazil', value: 8, iso3: 'BRA' }, + ], +}; + +export const CATEGORY_COLOR = '#FFC038'; + const SuppliersWithDeforestationAlertsBreakdown = () => { - return
SuppliersWithDeforestationAlertsBreakdown
; + const { viewBy } = useAppSelector(eudr); + + const data: ComponentProps[] = useMemo(() => { + if (viewBy === 'commodities') { + return SAMPLE_DATA[viewBy].map((item) => ({ + ...item, + color: CATEGORY_COLOR, + icon: getCommodityIconByName(item.name, { fill: CATEGORY_COLOR }), + })); + } + + return SAMPLE_DATA[viewBy].map((item) => ({ + ...item, + color: CATEGORY_COLOR, + icon: , + })); + }, [viewBy]); + + return ; }; export default SuppliersWithDeforestationAlertsBreakdown; diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx b/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx index dbd62935f8..e9b78fdee1 100644 --- a/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx +++ b/client/src/containers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx @@ -1,5 +1,67 @@ +import { useMemo, type ComponentProps } from 'react'; +import Flag from 'react-world-flags'; + +import { getCommodityIconByName } from '../breakdown-item/utils'; +import Breakdown from '..'; + +import { eudr } from '@/store/features/eudr'; +import { useAppSelector } from '@/store/hooks'; + +import type BreakdownItem from '../breakdown-item'; +import type { CommodityName } from '../breakdown-item/utils'; + +type CommonData = { + name: string; + value: number; +}; + +type CommodityData = CommonData & { + name: CommodityName; +}; + +type CountryData = CommonData & { + iso3: string; +}; + +const SAMPLE_DATA: { commodities: CommodityData[]; countries: CountryData[] } = { + commodities: [ + { name: 'cattle', value: 80 }, + { name: 'cocoa', value: 22 }, + { name: 'coffee', value: 54 }, + { name: 'palm-oil', value: 50 }, + { name: 'wood', value: 11 }, + { name: 'soy', value: 5 }, + { name: 'rubber', value: 70 }, + ], + countries: [ + { name: 'Italy', value: 33, iso3: 'ITA' }, + { name: 'Spain', value: 56, iso3: 'ESP' }, + { name: 'Brazil', value: 8, iso3: 'BRA' }, + ], +}; + +export const CATEGORY_COLOR = '#8561FF'; + const SuppliersWithNoLocationDataBreakdown = () => { - return
SuppliersWithNoLocationData
; + const { viewBy } = useAppSelector(eudr); + + const data: ComponentProps[] = useMemo(() => { + if (viewBy === 'commodities') { + return SAMPLE_DATA[viewBy].map((item) => ({ + ...item, + color: CATEGORY_COLOR, + icon: getCommodityIconByName(item.name, { fill: CATEGORY_COLOR }), + })); + } + + return SAMPLE_DATA[viewBy].map((item) => ({ + ...item, + color: CATEGORY_COLOR, + icon: , + })); + }, [viewBy]); + + return ; }; export default SuppliersWithNoLocationDataBreakdown; diff --git a/client/src/containers/analysis-eudr/category-list/index.tsx b/client/src/containers/analysis-eudr/category-list/index.tsx index 98744d88b6..f0a552360d 100644 --- a/client/src/containers/analysis-eudr/category-list/index.tsx +++ b/client/src/containers/analysis-eudr/category-list/index.tsx @@ -1,8 +1,14 @@ import { useState } from 'react'; -import DeforestationFreeSuppliersBreakdown from './breakdown/deforestation-free-suppliers'; -import SuppliersWithDeforestationAlertsBreakdown from './breakdown/suppliers-with-deforestation-alerts'; -import SuppliersWithNoLocationDataBreakdown from './breakdown/suppliers-with-no-location-data'; +import DeforestationFreeSuppliersBreakdown, { + CATEGORY_COLOR as DEFORESTATION_FREE_SUPPLIERS_COLOR, +} from './breakdown/deforestation-free-suppliers'; +import SuppliersWithDeforestationAlertsBreakdown, { + CATEGORY_COLOR as SUPPLIERS_WITH_DEFORESTATION_ALERTS_COLOR, +} from './breakdown/suppliers-with-deforestation-alerts'; +import SuppliersWithNoLocationDataBreakdown, { + CATEGORY_COLOR as SUPPLIERS_WITH_NO_LOCATION_DATA_COLOR, +} from './breakdown/suppliers-with-no-location-data'; import { Button } from '@/components/button'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; @@ -12,21 +18,21 @@ const CATEGORIES = [ { name: 'Deforestation-free suppliers', slug: 'deforestation-free-suppliers', - color: 'bg-[#4AB7F3]', + color: DEFORESTATION_FREE_SUPPLIERS_COLOR, // todo move this value field to the component value: 0.3, }, { name: 'Suppliers with deforestation alerts', slug: 'suppliers-with-deforestation-alerts', - color: 'bg-[#FFC038]', + color: SUPPLIERS_WITH_DEFORESTATION_ALERTS_COLOR, // todo move this value field to the component value: 0.6, }, { name: 'Suppliers with no location data', slug: 'suppliers-with-no-location-data', - color: 'bg-[#8460FF]', + color: SUPPLIERS_WITH_NO_LOCATION_DATA_COLOR, // todo move this value field to the component value: 0.1, }, @@ -63,20 +69,34 @@ export const CategoryList = (): JSX.Element => { }} >
-
{category.name}
+
+ + {category.name} +
- {formatPercentage(category.value)} of suppliers + {formatPercentage(category.value)} of suppliers
- diff --git a/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx b/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx index d0d35110de..499c8dd518 100644 --- a/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx +++ b/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx @@ -165,75 +165,7 @@ const SuppliersStackedBar = () => {
-
- - {/* - -
-
Deforestation-free suppliers
-
-
- 31% of suppliers -
-
-
-
-
- - -
- - -
test
- - - - -
-
Suppliers with deforestation alerts
-
-
- 36% of suppliers -
-
-
-
-
- -
- - -
test
- - - - -
-
Suppliers with no location data
-
-
- 33% of suppliers -
-
-
-
-
-
- -
-
- - -
test
- - */} -
+
); }; diff --git a/client/yarn.lock b/client/yarn.lock index 55bf1d2712..9bc7835d74 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -2096,6 +2096,13 @@ __metadata: languageName: node linkType: hard +"@trysound/sax@npm:0.2.0": + version: 0.2.0 + resolution: "@trysound/sax@npm:0.2.0" + checksum: 11226c39b52b391719a2a92e10183e4260d9651f86edced166da1d95f39a0a1eaa470e44d14ac685ccd6d3df7e2002433782872c0feeb260d61e80f21250e65c + languageName: node + linkType: hard + "@types/chroma-js@npm:2.1.3": version: 2.1.3 resolution: "@types/chroma-js@npm:2.1.3" @@ -3343,6 +3350,13 @@ __metadata: languageName: node linkType: hard +"boolbase@npm:^1.0.0": + version: 1.0.0 + resolution: "boolbase@npm:1.0.0" + checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0 + languageName: node + linkType: hard + "brace-expansion@npm:^1.1.7": version: 1.1.11 resolution: "brace-expansion@npm:1.1.11" @@ -3810,6 +3824,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^7.2.0": + version: 7.2.0 + resolution: "commander@npm:7.2.0" + checksum: 53501cbeee61d5157546c0bef0fedb6cdfc763a882136284bed9a07225f09a14b82d2a84e7637edfd1a679fb35ed9502fd58ef1d091e6287f60d790147f68ddc + languageName: node + linkType: hard + "common-tags@npm:^1.8.0": version: 1.8.2 resolution: "common-tags@npm:1.8.2" @@ -3884,6 +3905,46 @@ __metadata: languageName: node linkType: hard +"css-select@npm:^5.1.0": + version: 5.1.0 + resolution: "css-select@npm:5.1.0" + dependencies: + boolbase: ^1.0.0 + css-what: ^6.1.0 + domhandler: ^5.0.2 + domutils: ^3.0.1 + nth-check: ^2.0.1 + checksum: 2772c049b188d3b8a8159907192e926e11824aea525b8282981f72ba3f349cf9ecd523fdf7734875ee2cb772246c22117fc062da105b6d59afe8dcd5c99c9bda + languageName: node + linkType: hard + +"css-tree@npm:^2.3.1": + version: 2.3.1 + resolution: "css-tree@npm:2.3.1" + dependencies: + mdn-data: 2.0.30 + source-map-js: ^1.0.1 + checksum: 493cc24b5c22b05ee5314b8a0d72d8a5869491c1458017ae5ed75aeb6c3596637dbe1b11dac2548974624adec9f7a1f3a6cf40593dc1f9185eb0e8279543fbc0 + languageName: node + linkType: hard + +"css-tree@npm:~2.2.0": + version: 2.2.1 + resolution: "css-tree@npm:2.2.1" + dependencies: + mdn-data: 2.0.28 + source-map-js: ^1.0.1 + checksum: b94aa8cc2f09e6f66c91548411fcf74badcbad3e150345074715012d16333ce573596ff5dfca03c2a87edf1924716db765120f94247e919d72753628ba3aba27 + languageName: node + linkType: hard + +"css-what@npm:^6.1.0": + version: 6.1.0 + resolution: "css-what@npm:6.1.0" + checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe + languageName: node + linkType: hard + "cssesc@npm:^3.0.0": version: 3.0.0 resolution: "cssesc@npm:3.0.0" @@ -3893,6 +3954,15 @@ __metadata: languageName: node linkType: hard +"csso@npm:^5.0.5": + version: 5.0.5 + resolution: "csso@npm:5.0.5" + dependencies: + css-tree: ~2.2.0 + checksum: 0ad858d36bf5012ed243e9ec69962a867509061986d2ee07cc040a4b26e4d062c00d4c07e5ba8d430706ceb02dd87edd30a52b5937fd45b1b6f2119c4993d59a + languageName: node + linkType: hard + "csstype@npm:^3.0.2": version: 3.1.0 resolution: "csstype@npm:3.1.0" @@ -4336,6 +4406,44 @@ __metadata: languageName: node linkType: hard +"dom-serializer@npm:^2.0.0": + version: 2.0.0 + resolution: "dom-serializer@npm:2.0.0" + dependencies: + domelementtype: ^2.3.0 + domhandler: ^5.0.2 + entities: ^4.2.0 + checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6 + languageName: node + linkType: hard + +"domelementtype@npm:^2.3.0": + version: 2.3.0 + resolution: "domelementtype@npm:2.3.0" + checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6 + languageName: node + linkType: hard + +"domhandler@npm:^5.0.2, domhandler@npm:^5.0.3": + version: 5.0.3 + resolution: "domhandler@npm:5.0.3" + dependencies: + domelementtype: ^2.3.0 + checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c + languageName: node + linkType: hard + +"domutils@npm:^3.0.1": + version: 3.1.0 + resolution: "domutils@npm:3.1.0" + dependencies: + dom-serializer: ^2.0.0 + domelementtype: ^2.3.0 + domhandler: ^5.0.3 + checksum: e5757456ddd173caa411cfc02c2bb64133c65546d2c4081381a3bafc8a57411a41eed70494551aa58030be9e58574fcc489828bebd673863d39924fb4878f416 + languageName: node + linkType: hard + "draco3d@npm:1.5.5": version: 1.5.5 resolution: "draco3d@npm:1.5.5" @@ -4442,6 +4550,13 @@ __metadata: languageName: node linkType: hard +"entities@npm:^4.2.0": + version: 4.5.0 + resolution: "entities@npm:4.5.0" + checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7 + languageName: node + linkType: hard + "env-paths@npm:^2.2.0": version: 2.2.1 resolution: "env-paths@npm:2.2.1" @@ -7141,6 +7256,7 @@ __metadata: react-map-gl: 7.1.7 react-range: 1.8.14 react-redux: 8.0.2 + react-world-flags: 1.6.0 recharts: 2.9.0 rooks: 7.14.1 sharp: 0.32.6 @@ -7499,6 +7615,20 @@ __metadata: languageName: node linkType: hard +"mdn-data@npm:2.0.28": + version: 2.0.28 + resolution: "mdn-data@npm:2.0.28" + checksum: f51d587a6ebe8e426c3376c74ea6df3e19ec8241ed8e2466c9c8a3904d5d04397199ea4f15b8d34d14524b5de926d8724ae85207984be47e165817c26e49e0aa + languageName: node + linkType: hard + +"mdn-data@npm:2.0.30": + version: 2.0.30 + resolution: "mdn-data@npm:2.0.30" + checksum: d6ac5ac7439a1607df44b22738ecf83f48e66a0874e4482d6424a61c52da5cde5750f1d1229b6f5fa1b80a492be89465390da685b11f97d62b8adcc6e88189aa + languageName: node + linkType: hard + "merge-stream@npm:^2.0.0": version: 2.0.0 resolution: "merge-stream@npm:2.0.0" @@ -7978,6 +8108,15 @@ __metadata: languageName: node linkType: hard +"nth-check@npm:^2.0.1": + version: 2.1.1 + resolution: "nth-check@npm:2.1.1" + dependencies: + boolbase: ^1.0.0 + checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3 + languageName: node + linkType: hard + "nyc-report-lcov-absolute@npm:1.0.0": version: 1.0.0 resolution: "nyc-report-lcov-absolute@npm:1.0.0" @@ -9159,6 +9298,19 @@ __metadata: languageName: node linkType: hard +"react-world-flags@npm:1.6.0": + version: 1.6.0 + resolution: "react-world-flags@npm:1.6.0" + dependencies: + svg-country-flags: ^1.2.10 + svgo: ^3.0.2 + world-countries: ^5.0.0 + peerDependencies: + react: ">=0.14" + checksum: 29ea43e8ce58c402bac5fe8323bcbc23930c661ed620c050705274ea95227118b62bc8543c636465ea027218c5b3a9dacaf0a10abf795cd7db6eabf41b60bc54 + languageName: node + linkType: hard + "react@npm:18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -9941,7 +10093,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:^1.0.2": +"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": version: 1.0.2 resolution: "source-map-js@npm:1.0.2" checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c @@ -10347,6 +10499,30 @@ __metadata: languageName: node linkType: hard +"svg-country-flags@npm:^1.2.10": + version: 1.2.10 + resolution: "svg-country-flags@npm:1.2.10" + checksum: 52e8a946d5f9edb8f52b2b98754943604e82b465009a01774310b15be018b749ffa8b600b0c78ad18a4efd7c247e80c0cee33ef3930a60b18f751c587706cbdd + languageName: node + linkType: hard + +"svgo@npm:^3.0.2": + version: 3.2.0 + resolution: "svgo@npm:3.2.0" + dependencies: + "@trysound/sax": 0.2.0 + commander: ^7.2.0 + css-select: ^5.1.0 + css-tree: ^2.3.1 + css-what: ^6.1.0 + csso: ^5.0.5 + picocolors: ^1.0.0 + bin: + svgo: ./bin/svgo + checksum: 42168748a5586d85d447bec2867bc19814a4897f973ff023e6aad4ff19ba7408be37cf3736e982bb78e3f1e52df8785da5dca77a8ebc64c0ebd6fcf9915d2895 + languageName: node + linkType: hard + "synckit@npm:^0.8.4": version: 0.8.5 resolution: "synckit@npm:0.8.5" @@ -11232,6 +11408,13 @@ __metadata: languageName: node linkType: hard +"world-countries@npm:^5.0.0": + version: 5.0.0 + resolution: "world-countries@npm:5.0.0" + checksum: 10c58f7fdc7fae180574866c1662defd63c04c828a682aeec13f69ccb9c08d0eb0e328b84f35dc6ebfc3bd5996815bc3cfb102857ef09404751aa29028016fe7 + languageName: node + linkType: hard + "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0": version: 7.0.0 resolution: "wrap-ansi@npm:7.0.0"