-
Notifications
You must be signed in to change notification settings - Fork 2k
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.
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
display the total clicks and total impressions in advertising pages #95391
base: trunk
Are you sure you want to change the base?
display the total clicks and total impressions in advertising pages #95391
Conversation
Link to live branch is being generated... |
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: Sections (~574 bytes added 📈 [gzipped])
Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. 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. Generated by performance advisor bot at iscalypsofastyet.com. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @therocket-gr!
I found a couple of things that we need to change, but overall, the changes look great and worked as expected.
client/my-sites/promote-post-i2/components/campaigns-total-stats/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
…and-clicks-in-advertising-pages
…and-clicks-in-advertising-pages
@@ -244,6 +244,15 @@ export const formatNumber = ( number: number, onlyPositives = false ): string => | |||
return number.toLocaleString(); | |||
}; | |||
|
|||
export const formatLargeNumber = ( number: number ): string => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I searched in Calypso, and I found this function that do a similar thing:
https://github.com/Automattic/wp-calypso/tree/trunk/client/lib/format-number-compact
Do you think we could use that one instead? It might behave differently, which is what you wanted to achieve here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the function is a bit strange.. it wont format millions properly. i tested and I think my method works better. i just added a small improvement to add locale formatting in the number (so for some countries that use comma instead of a point for decimals it will display the result better)
Related to #
Proposed Changes
2638-gh-tumblr/a8c-dsp
Why are these changes being made?
we want to add a total impressions and total clicks (for all campaigns) for a user in the advertising pages (both in ready to promote and campaigns page)
the added elements look like this (ss from browser)
and ss from figma
please note that I haven't added the icons for more info (the ones with the 'i') but I am missing the context of what will happen if hovered ( I guess we need some kind of popover with some additional messages)
Update:
I added a function to format large numbers properly..
as we have users who might have very large numbers of campaigns and their impressions (maybe also clicks) can be added to have millions of results
now for example 100000 will be displayed as 100K 125500 will be displayed as 125.5K
1000000 will be displayed as 1M
1255000 will be displayed as 1.255M and so on (for millions I added 3 decimals to have some better understanding of the amount)
to test this you can just hardcode the line
totalClicks={ campaignsStats?.total_clicks }
to
totalClicks={ 1500000 }
in
client/my-sites/promote-post-i2/main.tsx
Testing Instructions
please check out the branch (or test the preview links) check that the elements appear as expected
(I checked the layout both when we do have a banner and when we don't.. you can also test by hardcoding this line
const showBanner = ! campaignsIsLoading && ( totalCampaignsUnfiltered || 0 ) < 3;
and change it to showBanner = true or false accordinglytest that the layout looks ok in tablet and mobile..
do a CR.
Pre-merge Checklist