Update recharts dependency to v2.0.0 and fix breaking changes

Signed-off-by: Leonardo Maier <leonarmaier@gmail.com>
Signed-off-by: Leonardo Maier <lmaier_c@wellapp.com>

.changeset/short-balloons-work.md

@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-bitrise': patch
+'@backstage/plugin-code-coverage': patch
+'@backstage/plugin-cost-insights': minor
+'@backstage/plugin-git-release-manager': patch
+'@backstage/plugin-xcmetrics': patch
+---
+
+Updated recharts to v2.0.0 and fixed typing issues

plugins/bitrise/package.json

@@ -36,7 +36,7 @@
     "luxon": "^3.0.0",
     "qs": "^6.9.6",
     "react-use": "^17.2.4",
-    "recharts": "^1.8.5"
+    "recharts": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"

plugins/code-coverage/package.json

@@ -37,7 +37,7 @@
     "highlight.js": "^10.6.0",
     "luxon": "^3.0.0",
     "react-use": "^17.2.4",
-    "recharts": "^1.8.5"
+    "recharts": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",

plugins/cost-insights/api-report.md

@@ -11,14 +11,12 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
 import { ChangeStatistic as ChangeStatistic_2 } from '@backstage/plugin-cost-insights-common';
 import * as common from '@backstage/plugin-cost-insights-common';
-import { ContentRenderer } from 'recharts';
 import { Dispatch } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { Maybe as Maybe_2 } from '@backstage/plugin-cost-insights-common';
 import { PaletteOptions } from '@material-ui/core/styles/createPalette';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
-import { RechartsFunction } from 'recharts';
 import { RefAttributes } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { SetStateAction } from 'react';
@@ -178,10 +176,10 @@ export type BarChartProps = {
   resources: ResourceData[];
   responsive?: boolean;
   displayAmount?: number;
-  options?: Partial<BarChartData>;
-  tooltip?: ContentRenderer<TooltipProps>;
-  onClick?: RechartsFunction;
-  onMouseMove?: RechartsFunction;
+  options?: Partial<BarChartOptions>;
+  tooltip?: TooltipRenderer;
+  onClick?: (...args: any[]) => void;
+  onMouseMove?: (...args: any[]) => void;
 };
 
 // @public (undocumented)
@@ -586,10 +584,15 @@ export interface ResourceData {
 // @public (undocumented)
 export type TooltipItem = {
   fill: string;
-  label: string;
-  value: string;
+  label?: string;
+  value?: string;
 };
 
+// @public (undocumented)
+export type TooltipRenderer = (
+  props: TooltipProps<string, string>,
+) => ReactNode;
+
 // @public @deprecated (undocumented)
 export type Trendline = common.Trendline;
 

plugins/cost-insights/package.json

@@ -49,7 +49,7 @@
     "pluralize": "^8.0.0",
     "qs": "^6.9.4",
     "react-use": "^17.2.4",
-    "recharts": "^1.8.5",
+    "recharts": "^2.0.0",
     "regression": "^2.0.1",
     "yup": "^0.32.9"
   },

plugins/cost-insights/src/components/BarChart/BarChart.tsx

@@ -19,11 +19,8 @@ import {
   Bar,
   BarChart as RechartsBarChart,
   CartesianGrid,
-  ContentRenderer,
-  TooltipProps as RechartsTooltipProps,
-  RechartsFunction,
-  ResponsiveContainer,
   Tooltip as RechartsTooltip,
+  ResponsiveContainer,
   XAxis,
   YAxis,
 } from 'recharts';
@@ -34,20 +31,18 @@ import { BarChartTooltip } from './BarChartTooltip';
 import { BarChartTooltipItem } from './BarChartTooltipItem';
 import { currencyFormatter } from '../../utils/formatters';
 import {
-  BarChartData,
   ResourceData,
   DataKey,
   CostInsightsTheme,
+  BarChartOptions,
 } from '../../types';
 import { notEmpty } from '../../utils/assert';
 import { useBarChartStyles } from '../../utils/styles';
 import { resourceSort } from '../../utils/sort';
 import { isInvalid, titleOf, tooltipItemOf } from '../../utils/graphs';
+import { TooltipRenderer } from '../../types/Tooltip';
 
-export const defaultTooltip: ContentRenderer<RechartsTooltipProps> = ({
-  label,
-  payload = [],
-}) => {
+export const defaultTooltip: TooltipRenderer = ({ label, payload = [] }) => {
   if (isInvalid({ label, payload })) return null;
 
   const title = titleOf(label);
@@ -66,10 +61,10 @@ export type BarChartProps = {
   resources: ResourceData[];
   responsive?: boolean;
   displayAmount?: number;
-  options?: Partial<BarChartData>;
-  tooltip?: ContentRenderer<RechartsTooltipProps>;
-  onClick?: RechartsFunction;
-  onMouseMove?: RechartsFunction;
+  options?: Partial<BarChartOptions>;
+  tooltip?: TooltipRenderer;
+  onClick?: (...args: any[]) => void;
+  onMouseMove?: (...args: any[]) => void;
 };
 
 /** @public */

plugins/cost-insights/src/components/BarChart/BarChartTooltipItem.tsx

@@ -22,8 +22,8 @@ import { useTooltipStyles as useStyles } from '../../utils/styles';
 /** @public */
 export type TooltipItem = {
   fill: string;
-  label: string;
-  value: string;
+  label?: string;
+  value?: string;
 };
 
 /** @public */

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx

@@ -25,8 +25,6 @@ import {
 import { default as FullScreenIcon } from '@material-ui/icons/Fullscreen';
 import {
   AreaChart,
-  ContentRenderer,
-  TooltipProps,
   XAxis,
   YAxis,
   Tooltip as RechartsTooltip,
@@ -52,6 +50,7 @@ import { getPreviousPeriodTotalCost } from '../../utils/change';
 import { formatPeriod } from '../../utils/formatters';
 import { aggregationSum } from '../../utils/sum';
 import { BarChartLegendOptions } from '../BarChart/BarChartLegend';
+import { TooltipRenderer } from '../../types/Tooltip';
 
 export type CostOverviewBreakdownChartProps = {
   costBreakdown: Cost[];
@@ -168,17 +167,15 @@ export const CostOverviewBreakdownChart = ({
           fill={color}
           onClick={() => setExpanded(true)}
           style={{
-            cursor: breakdown === 'Other' && !isExpanded ? 'pointer' : null,
+            cursor:
+              breakdown === 'Other' && !isExpanded ? 'pointer' : undefined,
           }}
         />
       );
     });
   };
 
-  const tooltipRenderer: ContentRenderer<TooltipProps> = ({
-    label,
-    payload = [],
-  }) => {
+  const tooltipRenderer: TooltipRenderer = ({ label, payload = [] }) => {
     if (isInvalid({ label, payload })) return null;
 
     const date =
@@ -186,10 +183,10 @@ export const CostOverviewBreakdownChart = ({
         ? DateTime.fromMillis(label)
         : DateTime.fromISO(label!);
     const dateTitle = date.toUTC().toFormat(DEFAULT_DATE_FORMAT);
-    const items = payload.map(p => ({
+    const items = payload.map((p, i) => ({
       label: p.dataKey as string,
-      value: formatGraphValue(p.value as number),
-      fill: p.fill!,
+      value: formatGraphValue(Number(p.value), i),
+      fill: p.color!,
     }));
     const expandText = (
       <Box>

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.test.tsx

@@ -53,6 +53,22 @@ function renderInContext(children: JSX.Element) {
 }
 
 describe('<CostOverviewCard/>', () => {
+  beforeEach(() => {
+    // @ts-expect-error: Since we have strictNullChecks enabled, this will throw an error as window.ResizeObserver
+    // it's not an optional operand
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
+
   it('Renders without exploding', async () => {
     const { getByText } = await renderInContext(
       <CostOverviewCard dailyCostData={mockGroupDailyCost} metricData={null} />,

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx

@@ -18,8 +18,6 @@ import { DateTime } from 'luxon';
 import { useTheme, Box } from '@material-ui/core';
 import {
   ComposedChart,
-  ContentRenderer,
-  TooltipProps,
   XAxis,
   YAxis,
   Tooltip as RechartsTooltip,
@@ -50,6 +48,7 @@ import { useCostOverviewStyles as useStyles } from '../../utils/styles';
 import { groupByDate, toDataMax, trendFrom } from '../../utils/charts';
 import { aggregationSort } from '../../utils/sort';
 import { CostOverviewLegend } from './CostOverviewLegend';
+import { TooltipRenderer } from '../../types/Tooltip';
 
 type CostOverviewChartProps = {
   metric: Maybe<Metric>;
@@ -98,10 +97,7 @@ export const CostOverviewChart = ({
         : {}),
     }));
 
-  const tooltipRenderer: ContentRenderer<TooltipProps> = ({
-    label,
-    payload = [],
-  }) => {
+  const tooltipRenderer: TooltipRenderer = ({ label, payload = [] }) => {
     if (isInvalid({ label, payload })) return null;
 
     const dataKeys = [data.dailyCost.dataKey, data.metric.dataKey];
@@ -112,15 +108,15 @@ export const CostOverviewChart = ({
     const title = date.toUTC().toFormat(DEFAULT_DATE_FORMAT);
     const items = payload
       .filter(p => dataKeys.includes(p.dataKey as string))
-      .map(p => ({
+      .map((p, i) => ({
         label:
           p.dataKey === data.dailyCost.dataKey
             ? data.dailyCost.name
             : data.metric.name,
         value:
           p.dataKey === data.dailyCost.dataKey
-            ? formatGraphValue(p.value as number, data.dailyCost.format)
-            : formatGraphValue(p.value as number, data.metric.format),
+            ? formatGraphValue(Number(p.value), i, data.dailyCost.format)
+            : formatGraphValue(Number(p.value), i, data.metric.format),
         fill:
           p.dataKey === data.dailyCost.dataKey
             ? theme.palette.blue
@@ -186,7 +182,6 @@ export const CostOverviewChart = ({
             dataKey="trend"
             dot={false}
             isAnimationActive={false}
-            label={false}
             strokeWidth={2}
             stroke={theme.palette.blue}
             yAxisId={data.dailyCost.dataKey}
@@ -196,7 +191,6 @@ export const CostOverviewChart = ({
               dataKey={data.metric.dataKey}
               dot={false}
               isAnimationActive={false}
-              label={false}
               strokeWidth={2}
               stroke={theme.palette.magenta}
               yAxisId={data.metric.dataKey}

plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx

@@ -15,11 +15,6 @@
  */
 
 import React, { useMemo, useState } from 'react';
-import {
-  ContentRenderer,
-  TooltipProps as RechartsTooltipProps,
-  RechartsFunction,
-} from 'recharts';
 import pluralize from 'pluralize';
 import { Box, Typography } from '@material-ui/core';
 import { default as FullScreenIcon } from '@material-ui/icons/Fullscreen';
@@ -55,6 +50,7 @@ import {
 } from '../../utils/styles';
 import { Duration, Entity, Maybe } from '../../types';
 import { choose } from '../../utils/change';
+import { TooltipRenderer } from '../../types/Tooltip';
 
 export type ProductInsightsChartProps = {
   billingDate: string;
@@ -96,7 +92,7 @@ export const ProductInsightsChart = ({
     currentName: formatPeriod(duration, billingDate, true),
   };
 
-  const onMouseMove: RechartsFunction = (
+  const onMouseMove: (...args: any[]) => void = (
     data: Record<'activeLabel', string | undefined>,
   ) => {
     if (isLabeled(data)) {
@@ -108,7 +104,9 @@ export const ProductInsightsChart = ({
     }
   };
 
-  const onClick: RechartsFunction = (data: Record<'activeLabel', string>) => {
+  const onClick: (...args: any[]) => void = (
+    data: Record<'activeLabel', string>,
+  ) => {
     if (isLabeled(data)) {
       setSelected(data.activeLabel);
     } else if (isUnlabeled(data)) {
@@ -118,7 +116,7 @@ export const ProductInsightsChart = ({
     }
   };
 
-  const renderProductInsightsTooltip: ContentRenderer<RechartsTooltipProps> = ({
+  const renderProductInsightsTooltip: TooltipRenderer = ({
     label,
     payload = [],
   }) => {

plugins/cost-insights/src/types/Tooltip.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ReactNode } from 'react';
+import { TooltipProps } from 'recharts';
+
+/** @public */
+export type TooltipRenderer = (
+  props: TooltipProps<string, string>,
+) => ReactNode;

plugins/cost-insights/src/types/index.ts

@@ -27,6 +27,7 @@ export * from './Filters';
 export * from './Icon';
 export * from './Loading';
 export * from './Theme';
+export * from './Tooltip';
 
 /**
  * Deprecated types moved to `@backstage/plugin-cost-insights-common`

plugins/cost-insights/src/utils/graphs.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { TooltipPayload, TooltipProps } from 'recharts';
+import { TooltipProps } from 'recharts';
+import { Payload } from 'recharts/types/component/DefaultTooltipContent';
 import { AlertCost, DataKey, Entity, ResourceData } from '../types';
 import {
   currencyFormatter,
@@ -22,7 +23,11 @@ import {
   lengthyCurrencyFormatter,
 } from './formatters';
 
-export function formatGraphValue(value: number, format?: string) {
+export function formatGraphValue(
+  value: number,
+  _index: number,
+  format?: string,
+) {
   if (format === 'number') {
     return value.toLocaleString();
   }
@@ -37,12 +42,12 @@ export function formatGraphValue(value: number, format?: string) {
 export const overviewGraphTickFormatter = (millis: string | number) =>
   typeof millis === 'number' ? dateFormatter.format(millis) : millis;
 
-export const tooltipItemOf = (payload: TooltipPayload) => {
+export const tooltipItemOf = (payload: Payload<string, string>) => {
   const value =
     typeof payload.value === 'number'
       ? currencyFormatter.format(payload.value)
-      : (payload.value as string);
-  const fill = payload.fill as string;
+      : payload.value;
+  const fill = payload.color as string;
 
   switch (payload.dataKey) {
     case DataKey.Current:
@@ -67,7 +72,7 @@ export const titleOf = (label?: string | number) => {
   return label ? String(label) : 'Unlabeled';
 };
 
-export const isInvalid = ({ label, payload }: TooltipProps) => {
+export const isInvalid = ({ label, payload }: TooltipProps<string, string>) => {
   // null labels are empty strings, which are valid
   return label === undefined || !payload || !payload.length;
 };

plugins/git-release-manager/package.json

@@ -34,7 +34,7 @@
     "luxon": "^3.0.0",
     "qs": "^6.10.1",
     "react-use": "^17.2.4",
-    "recharts": "^1.8.5"
+    "recharts": "^2.0.0"
   },
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0",

plugins/xcmetrics/package.json

@@ -33,7 +33,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
     "react-use": "^17.2.4",
-    "recharts": "^1.8.5"
+    "recharts": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"

plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.test.tsx

@@ -21,6 +21,24 @@ jest.mock('../../api/XcmetricsClient');
 const client = require('../../api/XcmetricsClient');
 
 describe('BuildTimeline', () => {
+  const { ResizeObserver } = window;
+
+  beforeEach(() => {
+    // @ts-expect-error: Since we have strictNullChecks enabled, this will throw an error as window.ResizeObserver
+    // it's not an optional operand
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
+
   it('should render', async () => {
     const rendered = await renderInTestApp(
       <BuildTimeline targets={[client.mockTarget]} height={100} width={100} />,

yarn.lock

@@ -4445,7 +4445,7 @@ __metadata:
     msw: ^0.47.0
     qs: ^6.9.6
     react-use: ^17.2.4
-    recharts: ^1.8.5
+    recharts: ^2.0.0
   peerDependencies:
     react: ^16.13.1 || ^17.0.0
   languageName: unknown
@@ -5182,7 +5182,7 @@ __metadata:
     luxon: ^3.0.0
     msw: ^0.47.0
     react-use: ^17.2.4
-    recharts: ^1.8.5
+    recharts: ^2.0.0
   peerDependencies:
     react: ^16.13.1 || ^17.0.0
     react-router: 6.0.0-beta.0 || ^6.3.0
@@ -5294,7 +5294,7 @@ __metadata:
     pluralize: ^8.0.0
     qs: ^6.9.4
     react-use: ^17.2.4
-    recharts: ^1.8.5
+    recharts: ^2.0.0
     regression: ^2.0.1
     yup: ^0.32.9
   peerDependencies:
@@ -5532,7 +5532,7 @@ __metadata:
     msw: ^0.47.0
     qs: ^6.10.1
     react-use: ^17.2.4
-    recharts: ^1.8.5
+    recharts: ^2.0.0
   peerDependencies:
     "@types/react": ^16.13.1 || ^17.0.0
     react: ^16.13.1 || ^17.0.0
@@ -7626,7 +7626,7 @@ __metadata:
     luxon: ^3.0.0
     msw: ^0.47.0
     react-use: ^17.2.4
-    recharts: ^1.8.5
+    recharts: ^2.0.0
   peerDependencies:
     react: ^16.13.1 || ^17.0.0
   languageName: unknown
@@ -13251,7 +13251,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/d3-interpolate@npm:*":
+"@types/d3-interpolate@npm:*, @types/d3-interpolate@npm:^3.0.1":
   version: 3.0.1
   resolution: "@types/d3-interpolate@npm:3.0.1"
   dependencies:
@@ -13299,6 +13299,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-scale@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "@types/d3-scale@npm:4.0.2"
+  dependencies:
+    "@types/d3-time": "*"
+  checksum: 6b3c0337f38f82b582d9f3190fde82edfce7ffafb371e5b2464c443137c2660bac644099d259f1f5cc829085eb5688bed0bea2b336a957d0845433bd07bf2ddd
+  languageName: node
+  linkType: hard
+
 "@types/d3-selection@npm:*, @types/d3-selection@npm:^3.0.1":
   version: 3.0.3
   resolution: "@types/d3-selection@npm:3.0.3"
@@ -13324,7 +13333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/d3-shape@npm:^3.0.1":
+"@types/d3-shape@npm:^3.0.1, @types/d3-shape@npm:^3.1.0":
   version: 3.1.0
   resolution: "@types/d3-shape@npm:3.1.0"
   dependencies:
@@ -13333,6 +13342,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-time@npm:*":
+  version: 3.0.0
+  resolution: "@types/d3-time@npm:3.0.0"
+  checksum: e76adb056daccf80107f4db190ac6deb77e8774f00362bb6c76f178e67f2f217422fe502b654edbc9ac6451f6619045b9f6f5fe0db1ec5520e2ada377af7c72e
+  languageName: node
+  linkType: hard
+
 "@types/d3-time@npm:^2":
   version: 2.1.1
   resolution: "@types/d3-time@npm:2.1.1"
@@ -16747,13 +16763,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"balanced-match@npm:^0.4.2":
-  version: 0.4.2
-  resolution: "balanced-match@npm:0.4.2"
-  checksum: 205ebb42ce8529fa8e043a808b41bfb9818d5f98a8eb76a1cd5483f8a98dd0baefc8a9d940f36b591b1316a04f56b35c32b60ac9b1f848e41e4698672cec6c1e
-  languageName: node
-  linkType: hard
-
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -19450,6 +19459,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-array@npm:2 - 3, d3-array@npm:2.10.0 - 3":
+  version: 3.2.0
+  resolution: "d3-array@npm:3.2.0"
+  dependencies:
+    internmap: 1 - 2
+  checksum: e236f6670b60b64abb6c435da25b5cbbdc2c7c0decdbf9355bc4cf6803d6da4fa820b7b78b9cbd127edb493555934a9788d45084c2f39d7c2e1a2b7aa48264a4
+  languageName: node
+  linkType: hard
+
 "d3-array@npm:2, d3-array@npm:^2.3.0":
   version: 2.12.1
   resolution: "d3-array@npm:2.12.1"
@@ -19459,27 +19477,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-array@npm:^1.2.0":
-  version: 1.2.4
-  resolution: "d3-array@npm:1.2.4"
-  checksum: d0be1fa7d72dbfac8a3bcffbb669d42bcb9128d8818d84d2b1df0c60bbe4c8e54a798be0457c55a219b399e2c2fabcbd581cbb130eb638b5436b0618d7e56000
-  languageName: node
-  linkType: hard
-
-"d3-collection@npm:1":
-  version: 1.0.7
-  resolution: "d3-collection@npm:1.0.7"
-  checksum: 9c6b910a9da0efb021e294509f98263ca4f62d10b997bb30ccfb6edd582b703da36e176b968b5bac815fbb0f328e49643c38cf93b5edf8572a179ba55cf4a09d
-  languageName: node
-  linkType: hard
-
-"d3-color@npm:1":
-  version: 1.4.1
-  resolution: "d3-color@npm:1.4.1"
-  checksum: a214b61458b5fcb7ad1a84faed0e02918037bab6be37f2d437bf0e2915cbd854d89fbf93754f17b0781c89e39d46704633d05a2bfae77e6209f0f4b140f9894b
-  languageName: node
-  linkType: hard
-
 "d3-color@npm:1 - 2":
   version: 2.0.0
   resolution: "d3-color@npm:2.0.0"
@@ -19529,13 +19526,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-format@npm:1":
-  version: 1.4.5
-  resolution: "d3-format@npm:1.4.5"
-  checksum: 1b8b2c0bca182173bccd290a43e8b635a83fc8cfe52ec878c7bdabb997d47daac11f2b175cebbe73f807f782ad655f542bdfe18180ca5eb3498a3a82da1e06ab
-  languageName: node
-  linkType: hard
-
 "d3-format@npm:1 - 2":
   version: 2.0.0
   resolution: "d3-format@npm:2.0.0"
@@ -19543,7 +19533,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-interpolate@npm:1 - 3":
+"d3-format@npm:1 - 3":
+  version: 3.1.0
+  resolution: "d3-format@npm:3.1.0"
+  checksum: f345ec3b8ad3cab19bff5dead395bd9f5590628eb97a389b1dd89f0b204c7c4fc1d9520f13231c2c7cf14b7c9a8cf10f8ef15bde2befbab41454a569bd706ca2
+  languageName: node
+  linkType: hard
+
+"d3-interpolate@npm:1 - 3, d3-interpolate@npm:1.2.0 - 3, d3-interpolate@npm:^3.0.1":
   version: 3.0.1
   resolution: "d3-interpolate@npm:3.0.1"
   dependencies:
@@ -19552,15 +19549,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-interpolate@npm:1, d3-interpolate@npm:^1.3.0":
-  version: 1.4.0
-  resolution: "d3-interpolate@npm:1.4.0"
-  dependencies:
-    d3-color: 1
-  checksum: d98988bd1e2f59d01f100d0a19315ad8f82ef022aa09a65aff76f747a44f9b52f2d64c6578b8f47e01f2b14a8f0ef88f5460d11173c0dd2d58238c217ac0ec03
-  languageName: node
-  linkType: hard
-
 "d3-interpolate@npm:1.2.0 - 2, d3-interpolate@npm:^2.0.0":
   version: 2.0.1
   resolution: "d3-interpolate@npm:2.0.1"
@@ -19570,13 +19558,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-path@npm:1":
-  version: 1.0.9
-  resolution: "d3-path@npm:1.0.9"
-  checksum: d4382573baf9509a143f40944baeff9fead136926aed6872f7ead5b3555d68925f8a37935841dd51f1d70b65a294fe35c065b0906fb6e42109295f6598fc16d0
-  languageName: node
-  linkType: hard
-
 "d3-path@npm:1 - 2":
   version: 2.0.0
   resolution: "d3-path@npm:2.0.0"
@@ -19598,20 +19579,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-scale@npm:^2.1.0":
-  version: 2.2.2
-  resolution: "d3-scale@npm:2.2.2"
-  dependencies:
-    d3-array: ^1.2.0
-    d3-collection: 1
-    d3-format: 1
-    d3-interpolate: 1
-    d3-time: 1
-    d3-time-format: 2
-  checksum: 42086d4b9db9f8492a99dbbdacf546983faef1bb6260fe875c0c1884f1ca9cf5fd233de3702c2f9e24145b1c5383945e929c8682d80fa57ab515ef2c4f2c61f6
-  languageName: node
-  linkType: hard
-
 "d3-scale@npm:^3.0.0":
   version: 3.3.0
   resolution: "d3-scale@npm:3.3.0"
@@ -19625,6 +19592,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-scale@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "d3-scale@npm:4.0.2"
+  dependencies:
+    d3-array: 2.10.0 - 3
+    d3-format: 1 - 3
+    d3-interpolate: 1.2.0 - 3
+    d3-time: 2.1.1 - 3
+    d3-time-format: 2 - 4
+  checksum: a9c770d283162c3bd11477c3d9d485d07f8db2071665f1a4ad23eec3e515e2cefbd369059ec677c9ac849877d1a765494e90e92051d4f21111aa56791c98729e
+  languageName: node
+  linkType: hard
+
 "d3-selection@npm:2 - 3, d3-selection@npm:3, d3-selection@npm:^3.0.0":
   version: 3.0.0
   resolution: "d3-selection@npm:3.0.0"
@@ -19632,15 +19612,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-shape@npm:^1.2.0":
-  version: 1.3.7
-  resolution: "d3-shape@npm:1.3.7"
-  dependencies:
-    d3-path: 1
-  checksum: 46566a3ab64a25023653bf59d64e81e9e6c987e95be985d81c5cedabae5838bd55f4a201a6b69069ca862eb63594cd263cac9034afc2b0e5664dfe286c866129
-  languageName: node
-  linkType: hard
-
 "d3-shape@npm:^2.0.0":
   version: 2.1.0
   resolution: "d3-shape@npm:2.1.0"
@@ -19650,7 +19621,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-shape@npm:^3.0.0":
+"d3-shape@npm:^3.0.0, d3-shape@npm:^3.1.0":
   version: 3.1.0
   resolution: "d3-shape@npm:3.1.0"
   dependencies:
@@ -19659,15 +19630,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-time-format@npm:2":
-  version: 2.3.0
-  resolution: "d3-time-format@npm:2.3.0"
-  dependencies:
-    d3-time: 1
-  checksum: 5445eaaf2b3b2095cdc1fa75dfd2f361a61c39b677dcc1c2ba4cb6bc0442953de0fbaaa397d7d7a9325ad99c63d869f162a713e150e826ff8af482615664cb3f
-  languageName: node
-  linkType: hard
-
 "d3-time-format@npm:2 - 3":
   version: 3.0.0
   resolution: "d3-time-format@npm:3.0.0"
@@ -19677,10 +19639,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-time@npm:1":
-  version: 1.1.0
-  resolution: "d3-time@npm:1.1.0"
-  checksum: 33fcfff94ff093dde2048c190ecca8b39fe0ec8b3c61e9fc39c5f6072ce5b86dd2b91823f086366995422bbbac7f74fd9abdb7efe4f292a73b1c6197c699cc78
+"d3-time-format@npm:2 - 4":
+  version: 4.1.0
+  resolution: "d3-time-format@npm:4.1.0"
+  dependencies:
+    d3-time: 1 - 3
+  checksum: 7342bce28355378152bbd4db4e275405439cabba082d9cd01946d40581140481c8328456d91740b0fe513c51ec4a467f4471ffa390c7e0e30ea30e9ec98fcdf4
   languageName: node
   linkType: hard
 
@@ -19693,6 +19657,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-time@npm:1 - 3, d3-time@npm:2.1.1 - 3":
+  version: 3.0.0
+  resolution: "d3-time@npm:3.0.0"
+  dependencies:
+    d3-array: 2 - 3
+  checksum: 01646568ef01682550b7ee9f32394e4eb116a29515564861958871ed8de8fff02a25cd50dd8c4413921e6d9ecb8c8ce39be3266f655c8c18599fe58bcb253d60
+  languageName: node
+  linkType: hard
+
 "d3-timer@npm:1 - 3":
   version: 3.0.1
   resolution: "d3-timer@npm:3.0.1"
@@ -25173,6 +25146,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"internmap@npm:1 - 2":
+  version: 2.0.3
+  resolution: "internmap@npm:2.0.3"
+  checksum: 7ca41ec6aba8f0072fc32fa8a023450a9f44503e2d8e403583c55714b25efd6390c38a87161ec456bf42d7bc83aab62eb28f5aef34876b1ac4e60693d5e1d241
+  languageName: node
+  linkType: hard
+
 "internmap@npm:^1.0.0":
   version: 1.0.1
   resolution: "internmap@npm:1.0.1"
@@ -28334,13 +28314,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.throttle@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "lodash.throttle@npm:4.1.1"
-  checksum: 129c0a28cee48b348aef146f638ef8a8b197944d4e9ec26c1890c19d9bf5a5690fe11b655c77a4551268819b32d27f4206343e30c78961f60b561b8608c8c805
-  languageName: node
-  linkType: hard
-
 "lodash.union@npm:^4.6.0":
   version: 4.6.0
   resolution: "lodash.union@npm:4.6.0"
@@ -28355,7 +28328,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4.17.21, lodash@npm:^4.17.10, lodash@npm:^4.17.11, lodash@npm:^4.17.13, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.17.5, lodash@npm:^4.7.0, lodash@npm:~4.17.0, lodash@npm:~4.17.15, lodash@npm:~4.17.4":
+"lodash@npm:4.17.21, lodash@npm:^4.17.10, lodash@npm:^4.17.11, lodash@npm:^4.17.13, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.7.0, lodash@npm:~4.17.0, lodash@npm:~4.17.15":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -28793,13 +28766,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"math-expression-evaluator@npm:^1.2.14":
-  version: 1.2.22
-  resolution: "math-expression-evaluator@npm:1.2.22"
-  checksum: 97b46e3311025699209d5178ea197e4df8286ac378075f105ab0cbc467f55a926a522a7e5a5ce8fc2d88881b6d32f1e3eacd81f34f265e7907cc5715e0f61a38
-  languageName: node
-  linkType: hard
-
 "md5.js@npm:^1.3.4":
   version: 1.3.5
   resolution: "md5.js@npm:1.3.5"
@@ -32853,7 +32819,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.5.7, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.5.7, prop-types@npm:^15.5.8, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -33695,20 +33661,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-resize-detector@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "react-resize-detector@npm:2.3.0"
-  dependencies:
-    lodash.debounce: ^4.0.8
-    lodash.throttle: ^4.1.1
-    prop-types: ^15.6.0
-    resize-observer-polyfill: ^1.5.0
-  peerDependencies:
-    react: ^0.14.7 || ^15.0.0 || ^16.0.0
-  checksum: c409cc31edaa6bb943aa1098c5830f1c430b448ebc7d2a1c4c14b1ad0eb4ea0d0bd1f48e4315569692af52270f7dc8d7fb0862c1b6121411589c4d5cd39fc1e4
-  languageName: node
-  linkType: hard
-
 "react-resize-detector@npm:^6.6.3":
   version: 6.7.8
   resolution: "react-resize-detector@npm:6.7.8"
@@ -33723,6 +33675,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-resize-detector@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "react-resize-detector@npm:7.1.2"
+  dependencies:
+    lodash: ^4.17.21
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 55f4abad7f7523d16b081b5ab20f75c539a54a08253ce7e9df473d48386f42ceca6c31584ba9fa26e3528b498ef6685ec77fb9a22cffc97df05fb326d0bf1b26
+  languageName: node
+  linkType: hard
+
 "react-router-beta@npm:react-router@6.0.0-beta.0, react-router@npm:6.0.0-beta.0":
   version: 6.0.0-beta.0
   resolution: "react-router@npm:6.0.0-beta.0"
@@ -33782,21 +33746,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-smooth@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "react-smooth@npm:1.0.5"
-  dependencies:
-    lodash: ~4.17.4
-    prop-types: ^15.6.0
-    raf: ^3.4.0
-    react-transition-group: ^2.5.0
-  peerDependencies:
-    react: ^15.0.0 || ^16.0.0
-    react-dom: ^15.0.0 || ^16.0.0
-  checksum: 29a2a00e09e0f5d4dea4424f945dc7dab9b611184c60b01bd24082b6293f9e5e4bafe0e4386d4c52a2c9c651caff3eeb5ce0966917a0bd06ba1165306853c822
-  languageName: node
-  linkType: hard
-
 "react-smooth@npm:^2.0.0":
   version: 2.0.0
   resolution: "react-smooth@npm:2.0.0"
@@ -33812,6 +33761,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-smooth@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "react-smooth@npm:2.0.1"
+  dependencies:
+    fast-equals: ^2.0.0
+    react-transition-group: 2.9.0
+  peerDependencies:
+    prop-types: ^15.6.0
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 65678491cbd506573f2dba82778ebf8259714d68dd227e0ee7c0e204bcbc7839cf97401620b4223814066581f1dce0493f97162a03dc2a68058b5a7ad2b41085
+  languageName: node
+  linkType: hard
+
 "react-sparklines@npm:^1.7.0":
   version: 1.7.0
   resolution: "react-sparklines@npm:1.7.0"
@@ -33865,7 +33828,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:2.9.0, react-transition-group@npm:^2.5.0":
+"react-transition-group@npm:2.9.0":
   version: 2.9.0
   resolution: "react-transition-group@npm:2.9.0"
   dependencies:
@@ -34113,7 +34076,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recharts-scale@npm:^0.4.2, recharts-scale@npm:^0.4.4":
+"recharts-scale@npm:^0.4.4":
   version: 0.4.5
   resolution: "recharts-scale@npm:0.4.5"
   dependencies:
@@ -34122,25 +34085,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recharts@npm:^1.8.5":
-  version: 1.8.5
-  resolution: "recharts@npm:1.8.5"
+"recharts@npm:^2.0.0":
+  version: 2.1.14
+  resolution: "recharts@npm:2.1.14"
   dependencies:
+    "@types/d3-interpolate": ^3.0.1
+    "@types/d3-scale": ^4.0.2
+    "@types/d3-shape": ^3.1.0
     classnames: ^2.2.5
-    core-js: ^2.6.10
-    d3-interpolate: ^1.3.0
-    d3-scale: ^2.1.0
-    d3-shape: ^1.2.0
-    lodash: ^4.17.5
-    prop-types: ^15.6.0
-    react-resize-detector: ^2.3.0
-    react-smooth: ^1.0.5
-    recharts-scale: ^0.4.2
-    reduce-css-calc: ^1.3.0
+    d3-interpolate: ^3.0.1
+    d3-scale: ^4.0.2
+    d3-shape: ^3.1.0
+    eventemitter3: ^4.0.1
+    lodash: ^4.17.19
+    react-is: ^16.10.2
+    react-resize-detector: ^7.1.2
+    react-smooth: ^2.0.1
+    recharts-scale: ^0.4.4
+    reduce-css-calc: ^2.1.8
   peerDependencies:
-    react: ^15.0.0 || ^16.0.0
-    react-dom: ^15.0.0 || ^16.0.0
-  checksum: bdc1b712b90a3e5f5fcc1bbb7755dde8666c056f67cad90f4e4a2dd726ed45f9fcc82fce4a679ae168c2ed2e243a4c1acffb3e1f45ad4d96c47bcf9e764b5c8f
+    prop-types: ^15.6.0
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 58f11fe8c9c4c36ddfe464ed896a7fd61b3c6cedeeab07cd86f286604dc11e96d2dc9288c55bb9c4e3c083ee325ffcccb5d0e6bc43a747c72110d25300624b22
   languageName: node
   linkType: hard
 
@@ -34222,17 +34189,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reduce-css-calc@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "reduce-css-calc@npm:1.3.0"
-  dependencies:
-    balanced-match: ^0.4.2
-    math-expression-evaluator: ^1.2.14
-    reduce-function-call: ^1.0.1
-  checksum: 72696db02ede8772fe5ba9c47c6d451557bea0d11525f4e54b6adfcc4e540558755bb0ad454824cb6b998f0bd940eb2ef594f35b3d509dfa37934d93ece0f707
-  languageName: node
-  linkType: hard
-
 "reduce-css-calc@npm:^2.1.8":
   version: 2.1.8
   resolution: "reduce-css-calc@npm:2.1.8"
@@ -34243,15 +34199,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reduce-function-call@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "reduce-function-call@npm:1.0.3"
-  dependencies:
-    balanced-match: ^1.0.0
-  checksum: d0169016ea22b59d55fa3206507c8f2d009574abd0f9b86552035a8405d52f6d7d5b60d084c5950d6f2884df7de42f87a6260b1b386b79ede63bfc87ea0c3ce8
-  languageName: node
-  linkType: hard
-
 "redux-immutable@npm:^4.0.0":
   version: 4.0.0
   resolution: "redux-immutable@npm:4.0.0"
@@ -34670,7 +34617,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resize-observer-polyfill@npm:^1.5.0, resize-observer-polyfill@npm:^1.5.1":
+"resize-observer-polyfill@npm:^1.5.1":
   version: 1.5.1
   resolution: "resize-observer-polyfill@npm:1.5.1"
   checksum: 57e7f79489867b00ba43c9c051524a5c8f162a61d5547e99333549afc23e15c44fd43f2f318ea0261ea98c0eb3158cca261e6f48d66e1ed1cd1f340a43977094