Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Subscriber Line Chart: Fix line chart tick formatting #100451

Merged
merged 8 commits into from
Feb 26, 2025
Merged

Subscriber Line Chart: Fix line chart tick formatting #100451

merged 8 commits into from
Feb 26, 2025
+47 −23

Conversation

kangzj
Copy link
Contributor

@kangzj kangzj commented Feb 26, 2025 •
edited
Loading

Related to #

Proposed Changes

  • Updated charts lib to 0.8.3
  • Added different tick formatting for different period
  • Remove unnecessary code after lib upgrade

Why are these changes being made?

  • Better tick format

Testing Instructions

  • Open http://calypso.localhost:3000/stats/subscribers/day/your-site.com?flags=stats/chart-library
  • Ensure the ticks are formatted like Jan 29 for Days and Weeks
  • Formatted like Dec 2024 for Months
  • Formatted like 2024 for Years
Before After
image image

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)?

@kangzj kangzj added the [Feature] Stats Everything related to our analytics product at /stats/ label Feb 26, 2025
@kangzj kangzj requested a review from annacmc February 26, 2025 02:07
@kangzj kangzj self-assigned this Feb 26, 2025
@matticbot 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 26, 2025
@github-actions GitHub Actions
Copy link

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

Calypso Live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-134419
Jetpack Cloud live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-134419&env=jetpack
Automattic for Agencies live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-134419&env=a8c-for-agencies

@kangzj kangzj requested a review from a team February 26, 2025 02:11
@kangzj kangzj marked this pull request as ready for review February 26, 2025 02:15
@kangzj kangzj added the Reviewer Can Merge PR author indicates the reviewer is free to merge/deploy if they want to own the change. label Feb 26, 2025
@kangzj
Copy link
Contributor Author

kangzj commented Feb 26, 2025

It seems the number of ticks still isn't ideal and I'll take a look from the lib later. Thanks!

image

@matticbot
Copy link
Contributor

matticbot commented Feb 26, 2025 •
edited
Loading

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

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

name                                                     parsed_size           gzip_size
async-load-calypso-my-sites-stats-pages-subscribers           +371 B  (+0.3%)      +80 B  (+0.2%)
async-load-calypso-my-sites-stats-components-line-chart       +283 B  (+0.1%)     +132 B  (+0.1%)
async-load-calypso-my-sites-stats-pages-realtime-chart        +231 B  (+0.1%)      +99 B  (+0.1%)

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.

@matticbot
Copy link
Contributor

matticbot commented Feb 26, 2025 •
edited
Loading

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

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

  • blaze-dashboard
  • command-palette-wp-admin
  • help-center
  • newsletter
  • notifications
  • odyssey-stats
  • whats-new
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/line-chart-ticks on your sandbox.

@kangzj kangzj changed the title Subscriber Line Chart: Fix line chart ticks Subscriber Line Chart: Fix line chart tick formatting Feb 26, 2025
annacmc
annacmc approved these changes Feb 26, 2025
View reviewed changes
Copy link
Contributor

@annacmc annacmc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I notice the ticks don't line up vertically
very well with the data point tooltips, specifically in daily/weekly. Also as you already noted, it's giving some unexpected duplication of yearly ticks.

image

But it's definitely progress! Happy to approve this with these improvements then keep iterating (and checking the library for what we need to update over there, too)

client/my-sites/stats/stats-subscribers-chart-section/index.tsx
@@ -121,6 +121,33 @@ export default function SubscribersChartSection( {
const legendRef = useRef< HTMLDivElement >( null );
const translate = useTranslate();

const formatTimeTick = useCallback(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think maybe the naming of this constant stems from when we were using time ticks for realtime stats. Does this name still make sense? or should it be something else, like formatDateTick?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I'll follow up with it...

@kangzj kangzj merged commit 7fd36a1 into trunk Feb 26, 2025
15 checks passed
@kangzj kangzj deleted the fix/line-chart-ticks branch February 26, 2025 06:09
@github-actions 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 26, 2025
@kangzj
Copy link
Contributor Author

kangzj commented Feb 26, 2025

I notice the ticks don't line up vertically
very well with the data point tooltips, specifically in daily/weekly.

this could be a issue how the date object is constructed and it happens when timezone kicks in (related).

@kangzj kangzj mentioned this pull request Feb 27, 2025
Merged
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@annacmc annacmc annacmc approved these changes

Assignees

@kangzj kangzj

Labels
[Feature] Stats Everything related to our analytics product at /stats/ Reviewer Can Merge PR author indicates the reviewer is free to merge/deploy if they want to own the change.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@kangzj @matticbot @annacmc