Stats: decouple real-time line charts #100200

kangzj · 2025-02-23T22:55:03Z

Related to #

Proposed Changes

Decouple the usage of a shared line component on real-time page, because it's very different.

Why are these changes being made?

Maintenance

Testing Instructions

Open http://calypso.localhost:3000/stats/subscribers/day/yoursite.com?flags=stats/chart-library
Ensure chart look okay
Open http://calypso.localhost:3000/stats/realtime/yoursite.com
Ensure real-time chart still works like it was

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

…c one

github-actions · 2025-02-23T22:55:14Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-134198

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-134198&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-134198&env=a8c-for-agencies

matticbot · 2025-02-23T23:04:26Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/decouple-all-new-line-charts on your sandbox.

kangzj · 2025-02-23T23:05:25Z

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

-							x: {
-								tickFormat: formatTime,
-								numTicks: xAxisNumTicks ?? dataSeries.length,
+			{ ! isEmpty && (


We don't want chart to show up the same time as its empty state.

matticbot · 2025-02-23T23:05:41Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~17 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-subscriptions          +80 B  (+0.0%)      +19 B  (+0.0%)
entry-stepper                +80 B  (+0.0%)      +17 B  (+0.0%)
entry-main                   +80 B  (+0.0%)      +19 B  (+0.0%)
entry-login                  +80 B  (+0.0%)      +19 B  (+0.0%)
entry-domains-landing        +80 B  (+0.0%)      +19 B  (+0.0%)
entry-browsehappy            +80 B  (+0.0%)      +19 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~43 bytes removed 📉 [gzipped])

name   parsed_size           gzip_size
stats        -83 B  (-0.0%)      -43 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~587 bytes added 📈 [gzipped])

name                                                     parsed_size            gzip_size
async-load-calypso-my-sites-stats-pages-realtime-chart     +333584 B     (new)   +91049 B     (new)
async-load-calypso-my-sites-stats-pages-realtime             -1425 B  (-27.8%)     -565 B  (-28.0%)
async-load-calypso-my-sites-stats-pages-subscribers           -104 B   (-0.1%)      -23 B   (-0.0%)
async-load-calypso-my-sites-stats-components-line-chart        +89 B   (+0.0%)      +26 B   (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

kangzj · 2025-02-23T23:06:26Z

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

-					hour: '2-digit',
-					minute: '2-digit',
-					hour12: true,
+				return date.toLocaleDateString( undefined, {


Default formatting to dates.

annacmc

This is great, both charts still work as expected and the code separation looks good & makes sense to me. 👍

kangzj · 2025-02-24T01:37:01Z

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

+	);
+
+	// TODO: we should have this in charts lib.
+	const chartDataSorted = useMemo(


This fixes the issue when the series is not in the order of date asc, which cuases an issue where the tooltip is not showing.

@annacmc we should deal with the sorting from the charts lib side I think

yeah, I think that's wise. Adding to my list ✔️

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

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

Remote outdated comments

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

kangzj · 2025-02-24T02:09:28Z

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

-	const dataSeries = chartData?.[ 0 ].data || [];
+	const isEmpty = ( chartData?.[ 0 ].data || [] ).length === 0;
+
+	const maxViews = useMemo(


We should probably rename all the variables with name views as it doesn't necessarily to be views - they could be anything

yeah sounds like a good idea. I can tackle that in another PR so this one doesn't end up too massive.

…-new-line-charts' into update/decouple-all-new-line-charts

kangzj added 2 commits February 24, 2025 11:41

use a standalone instance of chart for realtime

48e7826

default time format to dates and remove x num ticks to allow automati…

3d8ac54

…c one

kangzj added the [Feature] Stats Everything related to our analytics product at /stats/ label Feb 23, 2025

kangzj requested a review from annacmc February 23, 2025 22:55

kangzj self-assigned this Feb 23, 2025

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 23, 2025

kangzj added 2 commits February 24, 2025 11:57

revert chart x axis time format

7126e78

default formatting time by dates

f027ce3

kangzj requested a review from a team February 23, 2025 23:04

kangzj commented Feb 23, 2025

View reviewed changes

kangzj marked this pull request as ready for review February 23, 2025 23:06

annacmc approved these changes Feb 24, 2025

View reviewed changes

kangzj added 2 commits February 24, 2025 14:23

maxViews could be calculated instead of passed

01f4c66

sort data from distant to near by date

9cc678e

kangzj commented Feb 24, 2025

View reviewed changes

omit formatTimeTick for chart on Traffic page

54bcc3a

kangzj commented Feb 24, 2025

View reviewed changes

client/my-sites/stats/pages/realtime/chart.tsx Outdated Show resolved Hide resolved

kangzj commented Feb 24, 2025

View reviewed changes

client/my-sites/stats/components/line-chart/index.tsx Outdated Show resolved Hide resolved

Apply suggestions from code review

af792c7

Remote outdated comments

kangzj commented Feb 24, 2025

View reviewed changes

client/my-sites/stats/components/line-chart/index.tsx Outdated Show resolved Hide resolved

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

f2a2fd2

kangzj commented Feb 24, 2025

View reviewed changes

kangzj added 2 commits February 24, 2025 15:17

Merge remote-tracking branch 'refs/remotes/origin/update/decouple-all…

f545955

…-new-line-charts' into update/decouple-all-new-line-charts

add back missing comma

431801a

kangzj merged commit a4497ff into trunk Feb 24, 2025
13 checks passed

kangzj deleted the update/decouple-all-new-line-charts branch February 24, 2025 02:35

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 24, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stats: decouple real-time line charts #100200

Stats: decouple real-time line charts #100200

kangzj commented Feb 23, 2025 •

edited

Loading

github-actions bot commented Feb 23, 2025 •

edited by matticbot

Loading

matticbot commented Feb 23, 2025 •

edited

Loading

kangzj Feb 23, 2025

matticbot commented Feb 23, 2025 •

edited

Loading

kangzj Feb 23, 2025

annacmc left a comment

kangzj Feb 24, 2025

annacmc Feb 24, 2025

kangzj Feb 24, 2025

annacmc Feb 24, 2025

Stats: decouple real-time line charts #100200

Stats: decouple real-time line charts #100200

Conversation

kangzj commented Feb 23, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Feb 23, 2025 • edited by matticbot Loading

matticbot commented Feb 23, 2025 • edited Loading

kangzj Feb 23, 2025

Choose a reason for hiding this comment

matticbot commented Feb 23, 2025 • edited Loading

kangzj Feb 23, 2025

Choose a reason for hiding this comment

annacmc left a comment

Choose a reason for hiding this comment

kangzj Feb 24, 2025

Choose a reason for hiding this comment

annacmc Feb 24, 2025

Choose a reason for hiding this comment

kangzj Feb 24, 2025

Choose a reason for hiding this comment

annacmc Feb 24, 2025

Choose a reason for hiding this comment

kangzj commented Feb 23, 2025 •

edited

Loading

github-actions bot commented Feb 23, 2025 •

edited by matticbot

Loading

matticbot commented Feb 23, 2025 •

edited

Loading

matticbot commented Feb 23, 2025 •

edited

Loading