Update Charts package (#107591)

* Upgrade Charts to ^0.50.0

* Remove usage of deprecated Jetpack theme

ThemeProvider is no longer necessary, as the line chart will create it's own global charts context with theme

* Yarn dedupe

Author: adamwoodnz

client/my-sites/stats/components/line-chart/index.tsx

@@ -1,10 +1,4 @@
-import {
-	LineChart,
-	ThemeProvider,
-	jetpackTheme,
-	type EventHandlerParams,
-	type DataPointDate,
-} from '@automattic/charts';
+import { LineChart, type EventHandlerParams, type DataPointDate } from '@automattic/charts';
 import { formatNumber } from '@automattic/number-formatters';
 import clsx from 'clsx';
 import { translate } from 'i18n-calypso';
@@ -196,40 +190,38 @@ function StatsLineChart( {
 		<div className={ clsx( 'stats-line-chart', className ) }>
 			{ isEmpty && emptyState }
 			{ ! isEmpty && (
-				<ThemeProvider theme={ jetpackTheme }>
-					<LineChart
-						data={ chartData }
-						withTooltips
-						withGradientFill
-						height={ height }
-						curveType={ curveType }
-						onPointerUp={ onPointerUp }
-						margin={ {
-							left: 20,
-							top: 20,
-							bottom: 20,
-							right: Math.max( formatValue( maxValue ).length * 10, 40 ), //TODO: we should support this from the lib.
-						} }
-						options={ {
-							yScale: {
-								type: yScaleType,
-								...( fixedDomain && { domain: [ 0, maxValue ] } ),
-								zero: zeroBaseline,
+				<LineChart
+					data={ chartData }
+					withTooltips
+					withGradientFill
+					height={ height }
+					curveType={ curveType }
+					onPointerUp={ onPointerUp }
+					margin={ {
+						left: 20,
+						top: 20,
+						bottom: 20,
+						right: Math.max( formatValue( maxValue ).length * 10, 40 ), //TODO: we should support this from the lib.
+					} }
+					options={ {
+						yScale: {
+							type: yScaleType,
+							...( fixedDomain && { domain: [ 0, maxValue ] } ),
+							zero: zeroBaseline,
+						},
+						axis: {
+							x: {
+								tickFormat: formatTime,
 							},
-							axis: {
-								x: {
-									tickFormat: formatTime,
-								},
-								y: {
-									orientation: 'right',
-									tickFormat: formatValue,
-									numTicks: yNumTicks,
-								},
+							y: {
+								orientation: 'right',
+								tickFormat: formatValue,
+								numTicks: yNumTicks,
 							},
-						} }
-						renderTooltip={ renderTooltip }
-					/>
-				</ThemeProvider>
+						},
+					} }
+					renderTooltip={ renderTooltip }
+				/>
 			) }
 		</div>
 	);

client/my-sites/stats/pages/realtime/chart.tsx

@@ -1,4 +1,4 @@
-import { LineChart, ThemeProvider, jetpackTheme } from '@automattic/charts';
+import { LineChart } from '@automattic/charts';
 import clsx from 'clsx';
 import moment from 'moment';
 import { useEffect, useState, useMemo } from 'react';
@@ -135,32 +135,30 @@ const RealtimeChart = ( { siteId }: { siteId: number } ) => {
 
 	return (
 		<div className={ clsx( 'stats-line-chart', 'stats-realtime-chart' ) }>
-			<ThemeProvider theme={ jetpackTheme }>
-				<LineChart
-					data={ chartDataSeries }
-					withTooltips
-					withGradientFill
-					height={ 425 }
-					margin={ { left: 15, top: 20, bottom: 20 } }
-					options={ {
-						yScale: {
-							type: 'linear',
-							domain: [ 0, maxViews ],
-							zero: false,
+			<LineChart
+				data={ chartDataSeries }
+				withTooltips
+				withGradientFill
+				height={ 425 }
+				margin={ { left: 15, top: 20, bottom: 20 } }
+				options={ {
+					yScale: {
+						type: 'linear',
+						domain: [ 0, maxViews ],
+						zero: false,
+					},
+					axis: {
+						x: {
+							tickFormat: formatTimeTick,
 						},
-						axis: {
-							x: {
-								tickFormat: formatTimeTick,
-							},
-							y: {
-								orientation: 'right',
-								tickFormat: formatViews,
-								numTicks: maxViews > 4 ? 4 : 1,
-							},
+						y: {
+							orientation: 'right',
+							tickFormat: formatViews,
+							numTicks: maxViews > 4 ? 4 : 1,
 						},
-					} }
-				/>
-			</ThemeProvider>
+					},
+				} }
+			/>
 		</div>
 	);
 };

package.json

@@ -155,7 +155,7 @@
 		"@automattic/calypso-products": "workspace:^",
 		"@automattic/calypso-razorpay": "workspace:^",
 		"@automattic/calypso-router": "workspace:^",
-		"@automattic/charts": "^0.46.1",
+		"@automattic/charts": "^0.50.0",
 		"@automattic/color-studio": "^4.1.0",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",

yarn.lock

@@ -885,7 +885,43 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@automattic/charts@npm:>=0.14.0 <1.0.0, @automattic/charts@npm:^0.46.1":
+"@automattic/charts@npm:>=0.14.0 <1.0.0, @automattic/charts@npm:^0.50.0":
+  version: 0.50.2
+  resolution: "@automattic/charts@npm:0.50.2"
+  dependencies:
+    "@automattic/number-formatters": "npm:^1.0.15"
+    "@babel/runtime": "npm:7.28.4"
+    "@react-spring/web": "npm:9.7.5"
+    "@visx/annotation": "npm:^3.12.0"
+    "@visx/axis": "npm:^3.12.0"
+    "@visx/curve": "npm:^3.12.0"
+    "@visx/event": "npm:^3.12.0"
+    "@visx/gradient": "npm:^3.12.0"
+    "@visx/grid": "npm:^3.12.0"
+    "@visx/group": "npm:^3.12.0"
+    "@visx/legend": "npm:^3.12.0"
+    "@visx/pattern": "npm:^3.12.0"
+    "@visx/responsive": "npm:^3.12.0"
+    "@visx/scale": "npm:^3.12.0"
+    "@visx/shape": "npm:^3.12.0"
+    "@visx/text": "npm:^3.12.0"
+    "@visx/tooltip": "npm:^3.12.0"
+    "@visx/xychart": "npm:^3.12.0"
+    "@wordpress/i18n": "npm:^6.0.0"
+    clsx: "npm:2.1.1"
+    date-fns: "npm:^4.1.0"
+    deepmerge: "npm:4.3.1"
+    fast-deep-equal: "npm:3.1.3"
+    gridicons: "npm:3.4.2"
+    tslib: "npm:2.8.1"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  checksum: e0bdce896e10910973c422eb9626e86375731abd53223f06f77daa717da30fb04457d5ed71d54d51c323a037518c722d947d8b50b869cc65a3bcd4c0c690d76d
+  languageName: node
+  linkType: hard
+
+"@automattic/charts@npm:^0.46.1":
   version: 0.46.1
   resolution: "@automattic/charts@npm:0.46.1"
   dependencies:
@@ -1800,14 +1836,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@automattic/number-formatters@npm:^1.0.1, @automattic/number-formatters@npm:^1.0.14":
-  version: 1.0.14
-  resolution: "@automattic/number-formatters@npm:1.0.14"
+"@automattic/number-formatters@npm:^1.0.1, @automattic/number-formatters@npm:^1.0.14, @automattic/number-formatters@npm:^1.0.15":
+  version: 1.0.15
+  resolution: "@automattic/number-formatters@npm:1.0.15"
   dependencies:
     "@wordpress/date": "npm:^5.19.0"
     debug: "npm:^4.4.0"
     tslib: "npm:^2.5.0"
-  checksum: 271214c5a2b5363a5e85b12f4773ec02d52fcd214d41e6877f780287684f279e8c194128c7f4a57e66fde51f37f4243579666216ef437a4ed4b69e2229abfe8b
+  checksum: 033aee63dbb320d3ab6e34eec73453bf434911123371501014027fed5251793bedf96047d7158ef326cfc35fe75175dbe48a6c53f2343ec91004d43c007ea022
   languageName: node
   linkType: hard
 
@@ -38491,7 +38527,7 @@ __metadata:
     "@automattic/calypso-razorpay": "workspace:^"
     "@automattic/calypso-router": "workspace:^"
     "@automattic/calypso-storybook": "workspace:^"
-    "@automattic/charts": "npm:^0.46.1"
+    "@automattic/charts": "npm:^0.50.0"
     "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/command-palette": "workspace:^"
     "@automattic/components": "workspace:^"