Stats: Update module headers to SectionHeader #2863

alternatekev · 2016-01-27T22:20:37Z

This PR takes the current Stats modules and standardizes on the SectionHeader components:

jancavan · 2016-01-27T23:14:47Z

Good job updating these! I have a couple comments:

When I click on the graph icon, I'm taken to the full listing, but clicking this again (from the full list) jumps to an empty page. I don't think the graph icons communicate very well that clicking them means you'll be taken to the full list. It felt like it was going to take me to some additional stats for that particular module. It may just be the type of icon, but I think we can also just remove them since we already have "View all" which works great.
UPDATE: The "Latest Post Summary" module could probably retain this icon though since clicking it actually takes you to additional stats for that post.
On Today's Stats and All-time modules, there's a very faint drop shadow (or border?) right under the SectionHeading's bottom border.
On the Post Summary (Post & Pages module > click on a post), info icons are still there.

Other than those comments, it's looking good. The modules look much cleaner!

folletto · 2016-01-29T21:57:05Z

"Posting activity" on background instead of white created a nice variation in style, but it's just a personal preference. :)

Apart from that, I like the change. :)

jancavan · 2016-01-30T00:06:16Z

Another minor thing I noticed are the extra empty squares on the Posting Activity.

alternatekev · 2016-03-02T21:59:07Z

@dmsnell can i get a review on this?

timmyc · 2016-03-09T19:14:44Z

client/my-sites/stats/all-time/index.jsx

+				<SectionHeader label={ this.translate( 'All-time posts, views, and visitors' ) }></SectionHeader>
+				<Card className={ classNames( 'stats-module', 'stats-all-time', classes ) }>
+					<div className="module-content">
+						<div className="module-content-text module-content-text-info">


If the info toggles are no more, we can rip out these div's. Sounds like we should do a follow up PR and remove all info / toggle logic once this PR lands.

timmyc · 2016-03-09T21:15:39Z

A bit more sweeping done on this branch. After this is merged we can do away with the mixin-* files in stats too 🎉

4909647 - Removed info boxes / toggle logic from various components
02a18cd - Removes the view all gridicon from components on the insights page that have no summary pages ( Tags & Categories, Publicize )
5627e00 - Fixes up the follower summary page to use the new header design

From our discussion in slack, we are going to punt for now on removing the (i) icons from the post summary pages.

@alternatekev and @jancavan if you could both give this branch another test drive after these updates that would be excellent.

timmyc · 2016-03-10T00:06:21Z

Also want to summarize some of the big changes in the branch for anyone wanting to check it out:

Removes (i) info icons from the header
Removes collapse option for modules
Header Text is no longer linked to summary pages when applicable
"View All" links have also been removed from the footer to summary pages

Before

After

Note: Only gridicon now links to summary pages ( when available )

jancavan · 2016-03-10T00:24:05Z

Thanks for wrangling this @timmyc and @alternatekev. The section header looks nice and clean.

I think everything else looks good, but I don't think we should be removing "View all". It's not obvious that clicking on the graph icon takes you to the entire list and it's also really not the right symbol for it - a graph that takes you to a list item. The module heading should at least be clickable if we're removing "View all", but my vote is to add it back.

timmyc · 2016-03-10T19:33:44Z

@alternatekev shall I add the footer/view all back in?

alternatekev · 2016-03-10T19:41:24Z

I’m walking through this with Sheri today in order to get a better feel for where she thinks users will get tripped up. I’d almost like to investigate using a clickable compact Card instead of SectionHeader here since that uses the full bar to click and has a more appropriate default icon (the right-facing chevron).

timmyc · 2016-03-10T21:01:03Z

Updating the status until we have some direction on that.

dmsnell · 2016-03-10T23:16:29Z

@dmsnell can i get a review on this?

sorry @alternatekev I don't think I'll be able to right now

timmyc · 2016-03-11T01:51:00Z

@alternatekev & @jancavan "View All" links added back in 4032165

timmyc · 2016-03-31T00:06:31Z

@alternatekev if you don't mind doing one last test pass then we can get this merged in ( finally ).

modified stats-module to use sectionheader css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization updated insights to use section-header modified stats-module to use sectionheader css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization updated insights to use section-header css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization updated insights to use section-header modified stats-module to use sectionheader css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization fixes to sectionheaders & view all buttons/icons es6 upgrades and formatting cleanup es6 upgrades and formatting cleanup removed extraneous left/right arrows from post-trends added use of containerClass var fixed scroll bug on post-trends added borderless prop to stats-tabs to remove shadow effect from insights page removed extra icon removed extra site icon Removing unused toggle/info logic. Fix up lint errors. Use props.period to handle instances where modules do not have summary pages. Clean up header on followers page. Add View All links back in. changed chart icon to chevron-right

# The first commit's message is: updated sectionheaders to use href prop instead of action buttons # This is the 2nd commit message: removed extraneous vars

designsimply · 2016-04-01T17:50:05Z

Tested update/stats-standard-ui with Firefox 45.0.1 on Mac OS X 10.11.13

Video walkthrough: 7m51s

Nitpicks/Observations

Fast mouseover on the posting activity graph result in popover artifacts (Firefox-only)
Wasn't sure why some tags are grouped
Not every card has a detailed summary page
I miss the info button, unfortunately
Some summary page headers have a lot of white space at the top, but users want to see more stuff in less space when it comes to stats—they want less scrolling
"Download Data" button is at the bottom on the Followers summary pages but at the top on other pages (i.e. Countries)
"Download Data" button should not be present if the page is empty
The comment follower link is the odd one out being the only one without an arrow or "view all" link—which makes sense because it's not a summary view of the card data… but that link is still oddly placed imo—would rather see total comments number and comment followers as a dropdown selection instead
Info text for "Average per Day" graph on the post detail view doesn't mention that the stat is "average per day"—also, maybe we can be more selective about where we put info buttons and only add them on things ask about the most (the explanations on that page seem terribly obvious to me…)

Most of this list is out of scope for this PR, so I can raise issues separately for any of them that are worth moving forward. Moving the email followers download button to top right is probably the only suggestion I'd make for including now if it can be updated in this round of changes.

Even though users may miss the "View All" links because they are used to it, I think we could still try removing it. A temporary explanation popover could help die-hard stats lovers transition to the more stream-lined design without needing the "View All" link—and then we could test our assumptions with a few user tests to see if any new users cannot figure out how to get to summary pages.

timmyc · 2016-04-01T18:03:18Z

Even though users may miss the "View All" links, I think we could still try removing it. A temporary explanation popover could help die-hard stats lovers transition to the more stream-lined design without needing the "View All" link—and then we could test our assumptions with a few user tests to see if any new users cannot figure out how to get to summary pages.

I think this would be totally worth trying too, perhaps in a follow-up PR though. There are some big changes afoot here already - namely removing of the collapse toggle for modules ( which were persisted in localStorage ), and to some extent the (i) buttons - though those probably aren't used by power users of stats.

My biggest concern with making too many changes here is the fact that there is not a team dedicated to working on stats right now. I think that even this PR will potentially generate some feedback that might require follow-up PRs.

All of your ideas/issues outlined above are great feedback and really should be worked on, but until we can dedicate some dev/design resources around this we need to be careful to not change too much.

designsimply · 2016-04-01T18:17:28Z

@timmyc, would you be willing to remove "View All" links now and just revert sooner than later if users complain too much? (I can help track user feedback for this.)

timmyc · 2016-04-01T18:33:36Z

would you be willing to remove "View All" links now and just revert sooner than later if users complain too much?

Sounds good to me, but we also need to give ti some time to get a good amount of feedback. Also need to give a heads up to all HE's as I think there will be questions around the change.

alternatekev · 2016-04-01T19:36:58Z

@timmyc I've moved the Email Followers download button into the SectionHeader.

timmyc · 2016-04-01T19:51:31Z

LGTM. I think we should get this out the door and follow up with the view-all links.

jancavan · 2016-04-01T20:02:30Z

Thanks for the thorough review @designsimply. I'm still leaning towards keep "View all", but I think the new change to the chevron icon is much more intuitive than the previous version.

Wasn't sure why some tags are grouped

This has always been like this (I think) even before it was ported over and we didn't get around to make this better and yes, it's confusing.

folletto · 2016-04-04T17:36:48Z

A user noted of a bug with "View all", maybe it's related to some changes here? See #4507.

lancewillett · 2016-05-02T19:01:07Z

Fast mouseover on the posting activity graph result in popover artifacts (Firefox-only)

New issue raised for this: #5162

alternatekev added [Feature] Stats Everything related to our analytics product at /stats/ Components labels Jan 27, 2016

alternatekev added this to the Stats: Maintenance milestone Jan 27, 2016

alternatekev mentioned this pull request Jan 27, 2016

SectionHeader: Update default font size #2864

Merged

alternatekev added the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Jan 27, 2016

alternatekev force-pushed the update/stats-standard-ui branch 2 times, most recently from 31c61b4 to 700568b Compare February 18, 2016 18:30

alternatekev added [Status] In Progress and removed [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR labels Mar 1, 2016

alternatekev force-pushed the update/stats-standard-ui branch from 5cf0ba4 to f310415 Compare March 1, 2016 17:42

alternatekev force-pushed the update/stats-standard-ui branch from 75e98d7 to 0f294ba Compare March 9, 2016 18:56

timmyc reviewed Mar 9, 2016
View reviewed changes

timmyc added [Status] In Progress and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 10, 2016

timmyc mentioned this pull request Mar 31, 2016

Stats: Fixes and improvements to loading behavior with empty localStorage #2459

Merged

alternatekev and others added 6 commits March 31, 2016 13:06

# This is a combination of 2 commits.

e4e49fe

# The first commit's message is: updated sectionheaders to use href prop instead of action buttons # This is the 2nd commit message: removed extraneous vars

removed eslintcache

44bdba4

removed empty css block

d12d241

add extra space to [ observe

61fe2a1

Tidy up countries and stats-module.

a6623fe

timmyc force-pushed the update/stats-standard-ui branch from 3f4981f to a6623fe Compare March 31, 2016 20:25

alternatekev added 2 commits April 1, 2016 13:34

moved followers data csv button into sectionheader

8670b6a

formatting changes

08d2eb8

timmyc added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 1, 2016

alternatekev merged commit 3dc2a69 into master Apr 1, 2016

scruffian removed the [Status] Ready to Merge label Apr 1, 2016

timmyc mentioned this pull request Apr 4, 2016

Stats: fix view all footer links in stats modules. #4508

Merged

lancewillett deleted the update/stats-standard-ui branch April 7, 2016 18:20

timmyc mentioned this pull request Apr 8, 2016

Stats: remove mixin-skeleton and mixin-toggle usage. #4612

Merged

lancewillett mentioned this pull request May 2, 2016

Stats hovercard not fully closing/hiding on mouse out #5162

Closed

lancewillett removed the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Oct 19, 2016

tyxla mentioned this pull request Oct 1, 2020

Stats: Remove unused StatsInfoPanel component #46098

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stats: Update module headers to SectionHeader #2863

Stats: Update module headers to SectionHeader #2863

alternatekev commented Jan 27, 2016

jancavan commented Jan 27, 2016

folletto commented Jan 29, 2016

jancavan commented Jan 30, 2016

alternatekev commented Mar 2, 2016

timmyc Mar 9, 2016

timmyc commented Mar 9, 2016

timmyc commented Mar 10, 2016

jancavan commented Mar 10, 2016

timmyc commented Mar 10, 2016

alternatekev commented Mar 10, 2016

timmyc commented Mar 10, 2016

dmsnell commented Mar 10, 2016

timmyc commented Mar 11, 2016

timmyc commented Mar 31, 2016

designsimply commented Apr 1, 2016

timmyc commented Apr 1, 2016

designsimply commented Apr 1, 2016

timmyc commented Apr 1, 2016

alternatekev commented Apr 1, 2016

timmyc commented Apr 1, 2016

jancavan commented Apr 1, 2016

folletto commented Apr 4, 2016

lancewillett commented May 2, 2016

Stats: Update module headers to SectionHeader #2863

Stats: Update module headers to SectionHeader #2863

Conversation

alternatekev commented Jan 27, 2016

jancavan commented Jan 27, 2016

folletto commented Jan 29, 2016

jancavan commented Jan 30, 2016

alternatekev commented Mar 2, 2016

timmyc Mar 9, 2016

Choose a reason for hiding this comment

timmyc commented Mar 9, 2016

timmyc commented Mar 10, 2016

jancavan commented Mar 10, 2016

timmyc commented Mar 10, 2016

alternatekev commented Mar 10, 2016

timmyc commented Mar 10, 2016

dmsnell commented Mar 10, 2016

timmyc commented Mar 11, 2016

timmyc commented Mar 31, 2016

designsimply commented Apr 1, 2016

timmyc commented Apr 1, 2016

designsimply commented Apr 1, 2016

timmyc commented Apr 1, 2016

alternatekev commented Apr 1, 2016

timmyc commented Apr 1, 2016

jancavan commented Apr 1, 2016

folletto commented Apr 4, 2016

lancewillett commented May 2, 2016