feat: add support for pie chart panel type (#4751)

frontend/package.json

@@ -44,6 +44,9 @@
 		"@sentry/webpack-plugin": "2.16.0",
 		"@signozhq/design-tokens": "0.0.8",
 		"@uiw/react-md-editor": "3.23.5",
+		"@visx/group": "3.3.0",
+		"@visx/shape": "3.5.0",
+		"@visx/tooltip": "3.3.0",
 		"@xstate/react": "^3.0.0",
 		"ansi-to-html": "0.7.2",
 		"antd": "5.11.0",

frontend/src/constants/panelTypes.ts

@@ -29,6 +29,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
+		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -285,6 +285,7 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
+	PIE = 'pie',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 

frontend/src/container/GridCardLayout/GridCard/FullView/contants.ts

@@ -26,5 +26,6 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 	LIST: false,
 	TRACE: false,
 	BAR: true,
+	PIE: false,
 	EMPTY_WIDGET: false,
 };

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -166,7 +166,8 @@ function GridCardGraph({
 
 	const menuList =
 		widget.panelTypes === PANEL_TYPES.TABLE ||
-		widget.panelTypes === PANEL_TYPES.LIST
+		widget.panelTypes === PANEL_TYPES.LIST ||
+		widget.panelTypes === PANEL_TYPES.PIE
 			? headerMenuList.filter((menu) => menu !== MenuItemKeys.CreateAlerts)
 			: headerMenuList;
 

frontend/src/container/GridPanelSwitch/index.tsx

@@ -42,6 +42,7 @@ const GridPanelSwitch = forwardRef<
 					thresholds,
 				},
 				[PANEL_TYPES.LIST]: null,
+				[PANEL_TYPES.PIE]: null,
 				[PANEL_TYPES.TRACE]: null,
 				[PANEL_TYPES.BAR]: {
 					data,

frontend/src/container/GridPanelSwitch/types.ts

@@ -38,6 +38,7 @@ export type PropsTypePropsMap = {
 	[PANEL_TYPES.VALUE]: GridValueComponentProps;
 	[PANEL_TYPES.TABLE]: GridTableComponentProps;
 	[PANEL_TYPES.TRACE]: null;
+	[PANEL_TYPES.PIE]: null;
 	[PANEL_TYPES.LIST]: null;
 	[PANEL_TYPES.BAR]: UplotProps & {
 		ref: ForwardedRef<ToggleGraphProps | undefined>;

frontend/src/container/NewDashboard/ComponentsSlider/constants.ts

@@ -10,6 +10,7 @@ export const PANEL_TYPES_INITIAL_QUERY = {
 	[PANEL_TYPES.LIST]: initialQueriesMap.logs,
 	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
 	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
+	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
 	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
 };
 

frontend/src/container/NewDashboard/ComponentsSlider/menuItems.tsx

@@ -1,6 +1,13 @@
 import { Color } from '@signozhq/design-tokens';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { BarChart3, LineChart, List, SigmaSquare, Table } from 'lucide-react';
+import {
+	BarChart3,
+	LineChart,
+	List,
+	PieChart,
+	SigmaSquare,
+	Table,
+} from 'lucide-react';
 
 const Items: ItemsProps[] = [
 	{
@@ -28,6 +35,11 @@ const Items: ItemsProps[] = [
 		icon: <BarChart3 size={32} color={Color.BG_ROBIN_400} />,
 		display: 'Bar',
 	},
+	{
+		name: PANEL_TYPES.PIE,
+		icon: <PieChart size={32} color={Color.BG_ROBIN_400} />,
+		display: 'Pie',
+	},
 ];
 
 export interface ItemsProps {

frontend/src/container/NewWidget/RightContainer/constants.ts

@@ -26,6 +26,7 @@ export const panelTypeVsThreshold: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.VALUE]: true,
 	[PANEL_TYPES.TABLE]: true,
 	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
 	[PANEL_TYPES.BAR]: true,
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
@@ -36,6 +37,7 @@ export const panelTypeVsSoftMinMax: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.VALUE]: false,
 	[PANEL_TYPES.TABLE]: false,
 	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
 	[PANEL_TYPES.BAR]: true,
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
@@ -45,6 +47,7 @@ export const panelTypeVsDragAndDrop: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.TIME_SERIES]: false,
 	[PANEL_TYPES.VALUE]: true,
 	[PANEL_TYPES.TABLE]: true,
+	[PANEL_TYPES.PIE]: false,
 	[PANEL_TYPES.LIST]: false,
 	[PANEL_TYPES.BAR]: false,
 	[PANEL_TYPES.TRACE]: false,
@@ -56,6 +59,7 @@ export const panelTypeVsFillSpan: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.VALUE]: false,
 	[PANEL_TYPES.TABLE]: false,
 	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
 	[PANEL_TYPES.BAR]: false,
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
@@ -66,6 +70,7 @@ export const panelTypeVsYAxisUnit: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.VALUE]: true,
 	[PANEL_TYPES.TABLE]: true,
 	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
 	[PANEL_TYPES.BAR]: true,
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
@@ -76,6 +81,7 @@ export const panelTypeVsCreateAlert: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.VALUE]: true,
 	[PANEL_TYPES.TABLE]: false,
 	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
 	[PANEL_TYPES.BAR]: true,
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
@@ -88,6 +94,7 @@ export const panelTypeVsPanelTimePreferences: {
 	[PANEL_TYPES.VALUE]: true,
 	[PANEL_TYPES.TABLE]: true,
 	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: true,
 	[PANEL_TYPES.BAR]: true,
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,

frontend/src/container/NewWidget/utils.ts

@@ -25,6 +25,7 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.TABLE]: 'table';
 	[PANEL_TYPES.TIME_SERIES]: 'graph';
 	[PANEL_TYPES.VALUE]: 'value';
+	[PANEL_TYPES.PIE]: 'pie';
 };
 
 export const panelTypeDataSourceFormValuesMap: Record<
@@ -163,6 +164,50 @@ export const panelTypeDataSourceFormValuesMap: Record<
 			},
 		},
 	},
+	[PANEL_TYPES.PIE]: {
+		[DataSource.LOGS]: {
+			builder: {
+				queryData: [
+					'filters',
+					'aggregateOperator',
+					'aggregateAttribute',
+					'groupBy',
+					'limit',
+					'having',
+					'orderBy',
+					'functions',
+				],
+			},
+		},
+		[DataSource.METRICS]: {
+			builder: {
+				queryData: [
+					'filters',
+					'aggregateOperator',
+					'aggregateAttribute',
+					'groupBy',
+					'limit',
+					'having',
+					'orderBy',
+					'functions',
+					'spaceAggregation',
+				],
+			},
+		},
+		[DataSource.TRACES]: {
+			builder: {
+				queryData: [
+					'filters',
+					'aggregateOperator',
+					'aggregateAttribute',
+					'groupBy',
+					'limit',
+					'having',
+					'orderBy',
+				],
+			},
+		},
+	},
 	[PANEL_TYPES.LIST]: {
 		[DataSource.LOGS]: {
 			builder: {

frontend/src/container/PanelWrapper/PiePanelWrapper.styles.scss

@@ -0,0 +1,50 @@
+.piechart-no-data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+.piechart-container {
+    height: 90%;
+    width: 100%;
+}
+
+.piechart-tooltip {
+
+    .piechart-indicator {
+        width: 15px;
+        height: 3px;
+        border-radius: 2px;
+    }
+
+    .tooltip-value {
+        font-size: 12px;
+        font-weight: 600;
+    }
+}
+
+.piechart-legend {
+    width: 100%;
+    height: 40px;
+    overflow-y: scroll;
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .piechart-legend-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 5px;
+
+        .piechart-legend-label {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+    }
+}

frontend/src/container/PanelWrapper/PiePanelWrapper.tsx

@@ -0,0 +1,218 @@
+import './PiePanelWrapper.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Group } from '@visx/group';
+import { Pie } from '@visx/shape';
+import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { themeColors } from 'constants/theme';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { useRef, useState } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { PanelWrapperProps, TooltipData } from './panelWrapper.types';
+import { getLabel, lightenColor, tooltipStyles } from './utils';
+
+// refernce: https://www.youtube.com/watch?v=bL3P9CqQkKw
+function PiePanelWrapper({
+	queryResponse,
+	widget,
+}: PanelWrapperProps): JSX.Element {
+	const [active, setActive] = useState<{
+		label: string;
+		value: string;
+		color: string;
+	} | null>(null);
+
+	const {
+		tooltipOpen,
+		tooltipLeft,
+		tooltipTop,
+		tooltipData,
+		hideTooltip,
+		showTooltip,
+	} = useTooltip<TooltipData>();
+
+	const { containerRef, TooltipInPortal } = useTooltipInPortal({
+		scroll: true,
+		detectBounds: true,
+	});
+
+	const panelData =
+		queryResponse.data?.payload?.data.newResult.data.result || [];
+
+	const isDarkMode = useIsDarkMode();
+
+	const pieChartData: {
+		label: string;
+		value: string;
+		color: string;
+	}[] = [].concat(
+		...(panelData
+			.map((d) =>
+				d.series?.map((s) => ({
+					label:
+						d.series?.length === 1
+							? getLabel(Object.values(s.labels)[0], widget.query, d.queryName)
+							: getLabel(Object.values(s.labels)[0], {} as Query, d.queryName, true),
+					value: s.values[0].value,
+					color: generateColor(
+						d.series?.length === 1
+							? getLabel(Object.values(s.labels)[0], widget.query, d.queryName)
+							: getLabel(Object.values(s.labels)[0], {} as Query, d.queryName, true),
+						themeColors.chartcolors,
+					),
+				})),
+			)
+			.filter((d) => d !== undefined) as never[]),
+	);
+
+	let size = 0;
+	let width = 0;
+	let height = 0;
+
+	const chartRef = useRef<HTMLDivElement>(null);
+	if (chartRef.current) {
+		const { offsetWidth, offsetHeight } = chartRef.current;
+		size = Math.min(offsetWidth, offsetHeight);
+		width = offsetWidth;
+		height = offsetHeight;
+	}
+	const half = size / 2;
+
+	const getFillColor = (color: string): string => {
+		if (active === null) {
+			return color;
+		}
+		const lightenedColor = lightenColor(color, 0.4); // Adjust the opacity value (0.7 in this case)
+		return active.color === color ? color : lightenedColor;
+	};
+
+	return (
+		<>
+			{!pieChartData.length && <div className="piechart-no-data">No data</div>}
+			{pieChartData.length > 0 && (
+				<>
+					<div className="piechart-container" ref={chartRef}>
+						<svg width={width} height={height} ref={containerRef}>
+							<Group top={height / 2} left={width / 2}>
+								<Pie
+									data={pieChartData}
+									pieValue={(data: {
+										label: string;
+										value: string;
+										color: string;
+									}): number => parseFloat(data.value)}
+									outerRadius={({ data }): number => {
+										if (!active) return half - 3;
+										return data.label === active.label ? half : half - 3;
+									}}
+									padAngle={0.02}
+									cornerRadius={3}
+									width={size}
+									height={size}
+								>
+									{
+										// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+										(pie) =>
+											pie.arcs.map((arc, index) => {
+												const { label } = arc.data;
+												const [centroidX, centroidY] = pie.path.centroid(arc);
+												const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.6;
+												const arcPath = pie.path(arc);
+												const arcFill = arc.data.color;
+												return (
+													<g
+														// eslint-disable-next-line react/no-array-index-key
+														key={`arc-${label}-${index}`}
+														onMouseEnter={(): void => {
+															showTooltip({
+																tooltipData: {
+																	label,
+																	value: arc.data.value,
+																	color: arc.data.color,
+																	key: label,
+																},
+																tooltipTop: centroidY + height / 2,
+																tooltipLeft: centroidX + width / 2,
+															});
+															setActive(arc.data);
+														}}
+														onMouseLeave={(): void => {
+															hideTooltip();
+															setActive(null);
+														}}
+													>
+														<path d={arcPath || ''} fill={getFillColor(arcFill)} />
+														{hasSpaceForLabel && (
+															<text
+																x={centroidX}
+																y={centroidY}
+																dy=".33em"
+																fill="#000"
+																fontSize={10}
+																textAnchor="middle"
+																pointerEvents="none"
+															>
+																{arc.data.label}
+															</text>
+														)}
+													</g>
+												);
+											})
+									}
+								</Pie>
+							</Group>
+						</svg>
+						{tooltipOpen && tooltipData && (
+							<TooltipInPortal
+								top={tooltipTop}
+								left={tooltipLeft}
+								style={{
+									...tooltipStyles,
+									background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400,
+								}}
+								className="piechart-tooltip"
+							>
+								<div
+									style={{
+										background: tooltipData.color,
+									}}
+									className="piechart-indicator"
+								/>
+								{tooltipData.key}
+								<div className="tooltip-value">{tooltipData.value}</div>
+							</TooltipInPortal>
+						)}
+					</div>
+					<div className="piechart-legend">
+						{pieChartData.length > 0 &&
+							pieChartData.map((data) => (
+								<div
+									key={data.label}
+									className="piechart-legend-item"
+									onMouseEnter={(): void => {
+										setActive(data);
+									}}
+									onMouseLeave={(): void => {
+										setActive(null);
+									}}
+								>
+									<div
+										style={{
+											backgroundColor: getFillColor(data.color),
+										}}
+										className="piechart-legend-label"
+									/>
+									{data.label}
+								</div>
+							))}
+					</div>
+				</>
+			)}
+		</>
+	);
+}
+
+export default PiePanelWrapper;

frontend/src/container/PanelWrapper/constants.ts

@@ -1,6 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 
 import ListPanelWrapper from './ListPanelWrapper';
+import PiePanelWrapper from './PiePanelWrapper';
 import TablePanelWrapper from './TablePanelWrapper';
 import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
@@ -12,5 +13,6 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,
 	[PANEL_TYPES.TRACE]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
+	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: UplotPanelWrapper,
 };

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -22,3 +22,10 @@ export type PanelWrapperProps = {
 	onDragSelect: (start: number, end: number) => void;
 	selectedGraph?: PANEL_TYPES;
 };
+
+export type TooltipData = {
+	label: string;
+	key: string;
+	value: string;
+	color: string;
+};

frontend/src/container/PanelWrapper/utils.ts

@@ -0,0 +1,73 @@
+import { defaultStyles } from '@visx/tooltip';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+export const tooltipStyles = {
+	...defaultStyles,
+	minWidth: 60,
+	backgroundColor: 'rgba(0,0,0,0.9)',
+	color: 'white',
+	zIndex: 9999,
+	display: 'flex',
+	gap: '10px',
+	justifyContent: 'center',
+	alignItems: 'center',
+	padding: '5px 10px',
+};
+
+export const getLabel = (
+	label: string,
+	query: Query,
+	queryName: string,
+	isQueryContentMultipleResult = false, // If there are more than one aggregation return by the query, this should be set to true. Default is false.
+): string => {
+	let finalQuery;
+	if (!isQueryContentMultipleResult) {
+		finalQuery = query.builder.queryData.find((q) => q.queryName === queryName);
+		if (!finalQuery) {
+			// If the query is not found in queryData, then check in queryFormulas
+			finalQuery = query.builder.queryFormulas.find(
+				(q) => q.queryName === queryName,
+			);
+		}
+	}
+	if (finalQuery) {
+		if (finalQuery.legend !== '') {
+			return finalQuery.legend;
+		}
+		if (label !== undefined) {
+			return label;
+		}
+		return queryName;
+	}
+	return label;
+};
+
+// Function to convert a hex color to RGB format
+const hexToRgb = (
+	color: string,
+): { r: number; g: number; b: number } | null => {
+	const hex = color.replace(
+		/^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+		(m, r, g, b) => r + r + g + g + b + b,
+	);
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	return result
+		? {
+				r: parseInt(result[1], 16),
+				g: parseInt(result[2], 16),
+				b: parseInt(result[3], 16),
+		  }
+		: null;
+};
+
+export const lightenColor = (color: string, opacity: number): string => {
+	// Convert the hex color to RGB format
+	const rgbColor = hexToRgb(color);
+	if (!rgbColor) return color; // Return the original color if unable to parse
+
+	// Extract the RGB components
+	const { r, g, b } = rgbColor;
+
+	// Create a new RGBA color string with the specified opacity
+	return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};

frontend/src/utils/getGraphType.ts

@@ -5,5 +5,8 @@ export const getGraphType = (panelType: PANEL_TYPES): PANEL_TYPES => {
 	if (panelType === PANEL_TYPES.BAR) {
 		return PANEL_TYPES.TIME_SERIES;
 	}
+	if (panelType === PANEL_TYPES.PIE) {
+		return PANEL_TYPES.TABLE;
+	}
 	return panelType;
 };

frontend/yarn.lock

@@ -4186,18 +4186,74 @@
     tapable "^2.0.0"
     webpack "^5.1.0"
 
-"@types/d3-color@*":
+"@types/d3-array@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.3.tgz#87d990bf504d14ad6b16766979d04e943c046dac"
+  integrity sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==
+
+"@types/d3-color@*", "@types/d3-color@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
   integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
 
-"@types/d3-interpolate@^3.0.0":
+"@types/d3-delaunay@6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41"
+  integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==
+
+"@types/d3-format@3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d"
+  integrity sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==
+
+"@types/d3-geo@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.1.0.tgz#b9e56a079449174f0a2c8684a9a4df3f60522440"
+  integrity sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/d3-interpolate@3.0.1", "@types/d3-interpolate@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
   integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
   dependencies:
     "@types/d3-color" "*"
 
+"@types/d3-path@^1", "@types/d3-path@^1.0.8":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.11.tgz#45420fee2d93387083b34eae4fe6d996edf482bc"
+  integrity sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==
+
+"@types/d3-scale@4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.2.tgz#41be241126af4630524ead9cb1008ab2f0f26e69"
+  integrity sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^1.3.1":
+  version "1.3.12"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.3.12.tgz#8f2f9f7a12e631ce6700d6d55b84795ce2c8b259"
+  integrity sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==
+  dependencies:
+    "@types/d3-path" "^1"
+
+"@types/d3-time-format@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-2.1.0.tgz#011e0fb7937be34a9a8f580ae1e2f2f1336a8a22"
+  integrity sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==
+
+"@types/d3-time@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
+  integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
+
+"@types/d3-time@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
 "@types/debug@^4.0.0":
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
@@ -4282,6 +4338,11 @@
   resolved "https://registry.npmjs.org/@types/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz"
   integrity sha512-Vqf183RAiFdIjUi4asKqogf2HIfLDnxn+dQo9GCpnsU5QrrsLMA2bkJU1dHRudQlizLybWD61Csd1zAgUQ3JKQ==
 
+"@types/geojson@*":
+  version "7946.0.14"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
+  integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
+
 "@types/graceful-fs@^4.1.2", "@types/graceful-fs@^4.1.3":
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
@@ -4395,6 +4456,11 @@
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.194.tgz"
   integrity sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==
 
+"@types/lodash@^4.14.172":
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
+  integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
+
 "@types/mdast@^3.0.0":
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
@@ -4526,7 +4592,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@18.0.10", "@types/react-dom@^18.0.0":
+"@types/react-dom@*", "@types/react-dom@18.0.10", "@types/react-dom@^18.0.0":
   version "18.0.10"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz"
   integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
@@ -4921,6 +4987,93 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@visx/bounds@3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@visx/bounds/-/bounds-3.3.0.tgz#6ccecda636f1f970478f392dff2f6136aaead24f"
+  integrity sha512-gESmN+4N2NkeUzqQEDZaS63umkGfMp9XjQcKBqtOR64mjjQtamh3lNVRWvKjJ2Zb421RbYHWq22Wv9nay6ZUOg==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-dom" "*"
+    prop-types "^15.5.10"
+
+"@visx/curve@3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@visx/curve/-/curve-3.3.0.tgz#a5ed8f1511d404ef83c0b956ed5021088ac64b0e"
+  integrity sha512-G1l1rzGWwIs8ka3mBhO/gj8uYK6XdU/3bwRSoiZ+MockMahQFPog0bUkuVgPwwzPSJfsA/E5u53Y/DNesnHQxg==
+  dependencies:
+    "@types/d3-shape" "^1.3.1"
+    d3-shape "^1.0.6"
+
+"@visx/group@3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@visx/group/-/group-3.3.0.tgz#20c1b75c1ab31798c3c702b6f58c412c688a6373"
+  integrity sha512-yKepDKwJqlzvnvPS0yDuW13XNrYJE4xzT6xM7J++441nu6IybWWwextyap8ey+kU651cYDb+q1Oi6aHvQwyEyw==
+  dependencies:
+    "@types/react" "*"
+    classnames "^2.3.1"
+    prop-types "^15.6.2"
+
+"@visx/scale@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@visx/scale/-/scale-3.5.0.tgz#c3db3863bbdd24d44781104ef5ee4cdc8df6f11d"
+  integrity sha512-xo3zrXV2IZxrMq9Y9RUVJUpd93h3NO/r/y3GVi5F9AsbOzOhsLIbsPkunhO9mpUSR8LZ9TiumLEBrY+3frRBSg==
+  dependencies:
+    "@visx/vendor" "3.5.0"
+
+"@visx/shape@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@visx/shape/-/shape-3.5.0.tgz#fa4bb7a9ed863360be541d75c434503246305e36"
+  integrity sha512-DP3t9jBQ7dSE3e6ptA1xO4QAIGxO55GrY/6P+S6YREuQGjZgq20TLYLAsiaoPEzFSS4tp0m12ZTPivWhU2VBTw==
+  dependencies:
+    "@types/d3-path" "^1.0.8"
+    "@types/d3-shape" "^1.3.1"
+    "@types/lodash" "^4.14.172"
+    "@types/react" "*"
+    "@visx/curve" "3.3.0"
+    "@visx/group" "3.3.0"
+    "@visx/scale" "3.5.0"
+    classnames "^2.3.1"
+    d3-path "^1.0.5"
+    d3-shape "^1.2.0"
+    lodash "^4.17.21"
+    prop-types "^15.5.10"
+
+"@visx/tooltip@3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@visx/tooltip/-/tooltip-3.3.0.tgz#9d5e6199dacd82052678207204a33f028fe15e02"
+  integrity sha512-0ovbxnvAphEU/RVJprWHdOJT7p3YfBDpwXclXRuhIY2EkH59g8sDHatDcYwiNPeqk61jBh1KACRZxqToMuutlg==
+  dependencies:
+    "@types/react" "*"
+    "@visx/bounds" "3.3.0"
+    classnames "^2.3.1"
+    prop-types "^15.5.10"
+    react-use-measure "^2.0.4"
+
+"@visx/vendor@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@visx/vendor/-/vendor-3.5.0.tgz#a9990382ba759b9c4049be303d65d2cb3ca034a8"
+  integrity sha512-yt3SEZRVmt36+APsCISSO9eSOtzQkBjt+QRxNRzcTWuzwMAaF3PHCCSe31++kkpgY9yFoF+Gfes1TBe5NlETiQ==
+  dependencies:
+    "@types/d3-array" "3.0.3"
+    "@types/d3-color" "3.1.0"
+    "@types/d3-delaunay" "6.0.1"
+    "@types/d3-format" "3.0.1"
+    "@types/d3-geo" "3.1.0"
+    "@types/d3-interpolate" "3.0.1"
+    "@types/d3-scale" "4.0.2"
+    "@types/d3-time" "3.0.0"
+    "@types/d3-time-format" "2.1.0"
+    d3-array "3.2.1"
+    d3-color "3.1.0"
+    d3-delaunay "6.0.2"
+    d3-format "3.1.0"
+    d3-geo "3.1.0"
+    d3-interpolate "3.0.1"
+    d3-scale "4.0.2"
+    d3-time "3.1.0"
+    d3-time-format "4.1.0"
+    internmap "2.0.3"
+
 "@volar/language-core@1.11.1", "@volar/language-core@~1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.11.1.tgz#ecdf12ea8dc35fb8549e517991abcbf449a5ad4f"
@@ -7401,16 +7554,37 @@ cwd@^0.10.0:
   dependencies:
     internmap "1 - 2"
 
+"d3-array@2.5.0 - 3":
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+d3-array@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.1.tgz#39331ea706f5709417d31bbb6ec152e0328b39b3"
+  integrity sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==
+  dependencies:
+    internmap "1 - 2"
+
 d3-binarytree@1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/d3-binarytree/-/d3-binarytree-1.0.2.tgz"
   integrity sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw==
 
-"d3-color@1 - 3":
+"d3-color@1 - 3", d3-color@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
+d3-delaunay@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92"
+  integrity sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==
+  dependencies:
+    delaunator "5"
+
 "d3-dispatch@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
@@ -7440,11 +7614,18 @@ d3-binarytree@1:
     d3-quadtree "1 - 3"
     d3-timer "1 - 3"
 
-"d3-format@1 - 3":
+"d3-format@1 - 3", d3-format@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
+d3-geo@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.0.tgz#74fd54e1f4cebd5185ac2039217a98d39b0a4c0e"
+  integrity sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
 "d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
@@ -7457,6 +7638,11 @@ d3-octree@1:
   resolved "https://registry.npmjs.org/d3-octree/-/d3-octree-1.0.2.tgz"
   integrity sha512-Qxg4oirJrNXauiuC94uKMbgxwnhdda9xRLl9ihq45srlJ4Ga3CSgqGcAL8iW7N5CIv4Oz8x3E734ulxyvHPvwA==
 
+d3-path@1, d3-path@^1.0.5:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
 "d3-quadtree@1 - 3":
   version "3.0.1"
   resolved "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz"
@@ -7470,7 +7656,7 @@ d3-octree@1:
     d3-color "1 - 3"
     d3-interpolate "1 - 3"
 
-"d3-scale@1 - 4":
+"d3-scale@1 - 4", d3-scale@4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz"
   integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
@@ -7486,14 +7672,21 @@ d3-octree@1:
   resolved "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz"
   integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
 
-"d3-time-format@2 - 4":
+d3-shape@^1.0.6, d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+"d3-time-format@2 - 4", d3-time-format@4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz"
   integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
   dependencies:
     d3-time "1 - 3"
 
-"d3-time@1 - 3", "d3-time@2.1.1 - 3":
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz"
   integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
@@ -7568,6 +7761,11 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@2.6.9, debug@4, debug@4.3.4, debug@^3.2.6, debug@^3.2.7, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@ngokevin/debug#noTimestamp:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -7702,6 +7900,13 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delaunator@5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
+  integrity sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==
+  dependencies:
+    robust-predicates "^3.0.2"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -10132,7 +10337,7 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-"internmap@1 - 2":
+"internmap@1 - 2", internmap@2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
@@ -14138,7 +14343,7 @@ prompts@^2.0.1, prompts@^2.4.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@15, prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15, prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14969,6 +15174,13 @@ react-universal-interface@^0.6.2:
   resolved "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz"
   integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
 
+react-use-measure@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
+  integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
+  dependencies:
+    debounce "^1.2.1"
+
 react-use@17.4.0, react-use@^17.3.2:
   version "17.4.0"
   resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.0.tgz#cefef258b0a6c534a5c8021c2528ac6e1a4cdc6d"
@@ -15553,6 +15765,11 @@ rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+robust-predicates@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 rtl-css-js@^1.14.0:
   version "1.16.1"
   resolved "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz"