Different Date Formats on Site Kit Dashboard widgets

[wpdarren]

Bug Description

Creating this ticket for UX/UI discussion. Is there a reason why we have two different date formats on the dashboard. In the All Traffic widget we have MonDD (i.e. Sep 03) where in the charts are, i.e. Search traffic widget, the format is MM/DD/YY Wondering if the date formats should be consistent?

Screenshots

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• All of the charts in Site Kit that display a date axis should use the MMM d (e.g. "Sep 3") date format.
• Specifically, that means the line charts in the following widgets:
  • The "All Visitors" widget (this already uses the correct format and can serve as a reference).
  • The "Search traffic over the last x days" widget.
  • The "Performance over the last x days" widget.
  • The "Unique visitors over the last x days" widget on the WP Dashboard.
• The All Visitors widget chart should be updated so it displays the number of date labels using the same logic as the Search Traffic and Performance widgets, providing a consistent look across all SK Dashboard charts.
• For all of these SK Dashboard charts, ensure the date labels don't line-wrap when the viewport is too narrow. In this scenario the number of ticks should be reduced instead. We want to avoid situations like this:

Implementation Brief

Note that the Google Chart does reduce the number of ticks to avoid overcrowding based on the chart width, so we may be able to leverage the native behaviour for the last AC point.

Changing the date format:

• Change the hAxis format to 'MMM d' in following files:
  • assets/js/components/wp-dashboard/chart-options.js
  • assets/js/modules/adsense/components/module/ModuleOverviewWidget/Stats.js
  • assets/js/modules/search-console/components/common/AnalyticsStats.js
  • assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/SearchConsoleStats.js
  • assets/js/components/GoogleChart/index.stories.js

Enforce the chart labels to never wrap in multiple lines and limit items along the x-axis:

• In the assets/js/components/GoogleChart/utils.js within the if ( chartType === 'LineChart' ) { condition:

  • Check if options?.hAxis?.maxTextLines is defined. If not, set hAxis.maxTextLines to 1:
  • set( chartOptions, 'hAxis.maxTextLines', 1 );
  • Check if options?.hAxis?.minTextSpacing is defined. If not, set hAxis.minTextSpacing to 100:
  • set( chartOptions, 'hAxis.minTextSpacing', 100 );

• In the UserCountGraph component

  • Remove all existing logic that generates the manual ticks.
  • Create a new variable ticks, extract the dates from the chartData and remove the first item.
  • const [ , ...ticks ] = chartData.slice( 1 ).map( ( [ date ] ) => date );
  • Pass over the new ticks variable to chartOptions.hAxis.ticks replacing the old logic.

Update the existing charts to not pass the first date item as a tick: Removing the first item from the ticks, prevents the charts from automatically cutting of the first item and replacing it with an elipsis.

• WPDashboardUniqueVisitorsChartGA4:

  • Replace the existing logic around ticks https://github.com/google/site-kit-wp/blob/9f5e981e07231087645aee157ae13c222e8897b9/assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsChartGA4.js#L115-L122 Pass all dates except for the first one as ticks:

    const [ , ticks ] = googleChartData.slice( 1 ).map( ( [ date ] ) => date );
    const options = {
    ...UNIQUE_VISITORS_CHART_OPTIONS,
    hAxis: {
    ...UNIQUE_VISITORS_CHART_OPTIONS.hAxis,
    ticks,
    },
    };

• ModuleOverviewWidget/Stats.js:

  • Similar to the change on the WPDashboardUniqueVisitorsChartGA4 update the existing logic around the ticks to not include the first date item.

• AnalyticsStats

  • Similar to the change on the WPDashboardUniqueVisitorsChartGA4 update the existing logic around the ticks to not include the first date item.

• SearchConsoleStats

  • Similar to the change on the WPDashboardUniqueVisitorsChartGA4 update the existing logic around the ticks to not include the first date item.

Test Coverage

• Update VRT reference images.

QA Brief

• Set up Site Kit and required modules to be able to access the widgets mentioned in the AC.
• Ensure that the new date format is showing up consistently across all widgets. all states (gathering, zero data and data available), and all viewports.
• Verify the storybook stories to double check all is well, and there's no wrapping in the dates.

Changelog entry

• Improve the date legend in charts.

[andreas271828]

Worse yet, it's all American and not considering the locale or format settings of the Wordpress site.

[ronnyadsetts]

See this issue re. localities for the date format:

https://github.com/google/site-kit-wp/issues/1518

It surely can't be that hard to respect the locality preferences of the end users' site when displaying a date. Either that or use an unambiguous format rather than one that leaves you having to think about it.

[derweili]

Google charts automatically reduce the number of ticks based on the available space. So the only setting we to set here it to ensure the labels never wrap. This can be done with the hAxis.maxTextLines option.

[tofumatt]

The IB here looks good, but I wonder about this line in the ACs:

The All Visitors widget chart should be updated so it displays the number of date labels using the same logic as the Search Traffic and Performance widgets, providing a consistent look across all SK Dashboard charts.

The issue reported is about the date format, but not the number of ticks in the chart. Our reduced tick count is an intentional so I don't think should be changed.

@techanvil Was that point brought up elsewhere? If it's a request from UX that's cool, but the original reduced tick was—if I recall correctly—part of a series of chart UX updates and was meant to reduce noise in that chart 🙂

---

(Original IB review feedback follows, written before realising the issue is in the ACs.)

What is the reason for removing the manual haxis.ticks creation in our charts?

If we do that, the number of ticks is quite high. It gets pretty cramped and harder-to-read, especially because if you want the exact date (and year, omitted from the new string, reasonably) you can hover over the chart line.

Here's Google Charts handling the ticks:

Here's our tick creation:

[derweili]

There is an alternative option to manually setting the ticks. Google charts has an minTextSpacing option.

Using this, a spacing between the automatic ticks can be defined. If there is not enough space available, some ticks will be hidden.

[tofumatt]

@derweili Oh, awesome, okay, that seems better than us manually creating the ticks.

I'll move this back to IB with you but I think we just need to add a minTextSpacing to things so we preserve (approximately) the current tick spacing and this can be good-to-go then 🙂

[techanvil]

Hi @tofumatt, to answer your question:

@techanvil Was that point brought up elsewhere? If it's a request from UX that's cool, but the original reduced tick was—if I recall correctly—part of a series of chart UX updates and was meant to reduce noise in that chart 🙂

This is a request from Mariya, following a question from Sigal - here's the relevant Slack conversation.

It seems to me we should set the same minTextSpacing across all of these charts to provide a consistent look, while preventing the ticks from looking too crowded. Even the Search Traffic and Performance charts can look a bit crowded with the default minTextSpacing value, so a higher value all round should be an overall improvement.

@derweili, an additional point, not explicitly stated in the AC but to ensure that visual consistency we should make sure that the first tick on the All Traffic chart doesn't get cut off in the way that can be seen in Matt's first screenshot:

AFAIK this doesn't happen on the Search Traffic and Performance charts with the stock behaviour, so it's worth reviewing the differences between these charts and the All Traffic one to see how to resolve this.

[derweili]

@techanvil good point. This actually happens as soon as you delete the manual ticks. Will need to investigate the chart options on how to fix that.

[derweili]

I tested the minTextSpacing, unfortuntally this does not perform well and ends up in weird spacings.

It also results in the first tick being cut off.

[derweili]

I did some more research on the chart library. There are multiple ways to limit the number of ticks, but all of them can result in the issue seen in the above screenshot, where the ticks are unevenly placed along the x-axis. Therefore I think there is no way to to fix this using the configuration options provided by the chart library.

Instead I think we should reuse the logic we already have implemented for the UserCountGraph component to limit the ticks. Therefore we could create a custom useLineChartTicks() hook, that generates the ticks and subscribes to resize event.

[derweili]

I was unsure where to place the new custom hook in. I know we have a hooks folder, but this new hook only makes sense to be used with the GoogleChart so I thought placing it next to the GoogleChart component makes more sense to me then placing it in the generic hooks folder.

[techanvil]

Hey @derweili, if you review this Slack thread you'll see that we've been explicitly asked to move away from this existing UserCountGraph logic due to the results it gives. Therefore, applying it to all of the graphs would not be the correct approach here.

Actually, I've taken a look and found the minTextSpacing option is working OK for me. Could you have applied it to the UserCountGraph graph without replacing the tick logic which could explain your odd results?

As to the first tick getting cut off - if we provide a full range of dates for the ticks and remove the first one, that seems sufficient to avoid the problem.

Here's a quick PoC and a video of the results:

https://github.com/google/site-kit-wp/assets/18395600/04908304-6e4d-4024-b221-5f05d0141ab2

If we do want to show the first tick, we can achieve this by increasing the chartArea.left value to make room for it. However this means we lose the left-hand alignment of the chart edge to the surrounding context, which we've aimed to avoid to date.

diff --git a/assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidgetGA4/UserCountGraph.js b/assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidgetGA4/UserCountGraph.js
index 119b11aeaf..891ebdeaf2 100644
--- a/assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidgetGA4/UserCountGraph.js
+++ b/assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidgetGA4/UserCountGraph.js
@@ -124,8 +124,6 @@ export default function UserCountGraph( props ) {
        tick.setDate( tick.getDate() + 1 );
    }

-   chartOptions.hAxis.ticks.shift(); // Get rid of the first tick which may otherwise be cut off.
-
    // Set the `max` height of the chart to `undefined` so that the chart will
    // show all content, but only if the report is loaded/has data.
    if (
@@ -184,7 +182,7 @@ UserCountGraph.chartOptions = {
    width: '100%',
    colors: [ '#3c7251' ],
    chartArea: {
-       left: 7,
+       left: 20,
        right: 40,
        height: 300,
        top: 21,

Alternatively we could consider moving the Y axis to the left hand of the chart as that should also provide some additional space for the X axis to render.

Anyhow, to move this along, I think we should take the approach of dropping the first tick, we can see how we get on with that and iterate on it from there.

[derweili]

I tested the options with the minTextSpacing again. Was not able to replicate either. Maybe I had a weird combination of options when trying this yesterday.

Updated IB to not use the manual tick generation but to use the automatic one provided by the Chart library.

The value 100 for minTextSpacing seams to replicate a similar behavior to what we currently have.

[tofumatt]

@derweili The IB mentions useLineChartTicks() in the tests, but I think that can be removed.

Regarding the creation of manual tick marks for WPDashboardUniqueVisitorsChartGA4 and other places… can Google Charts manage the ticks with minTextSpacing everywhere without us actually providing explicit ticks? No worries if not, but given that dimension is already using our date data, I'm curious if we could omit the tick data generation entirely.

Otherwise looks good. 🙂

[derweili]

@tofumatt Google Charts could do this, but this results in the issue @techanvil outlined in this comment, where the first item get's cut of and replaced with a button and a tooltip.

The trick to prevent this is to remove the first tick. That's why we have to explicitly provide in the ticks.

[tofumatt]

Ah, right, sounds good then, thanks for all the investigation on this one! 👍🏻

IB ✅

[mohitwp]

QA Update ⚠️

• Tested on dev environment.
• Verified that All Visitors widget chart updated so it displays the number of date labels using the same logic as the Search Traffic and Performance widgets, providing a consistent look across all SK Dashboard charts.
• Verified that All of the charts in Site Kit that display a date axis which use the MMM d (e.g. "Sep 3") date format.
• Verified zero and gathering data state.
• Verified WP Dashboard.

@kuasha420 I noticed that under viewports having width 324px and less. The Dates are getting hide and not showing.

Pass cases-

          

[mohitwp]

@kuasha420 Did you get chance to look into this ? Can I move this to execution ?

[mohitwp]

QA Update ⚠️

@kuasha420

Tested on dev environment. Note : I've noticed that "All visitors" widget graph first date is getting cut on viewports having width 338px and less than it. It is a regression due to changes introduced in this ticket because on latest environment "All visitors" widgets date is not getting cut.

Let me know if this is quick fix and you want to create follow up issue. For now I created a separate ticket as this is minor issue. https://github.com/google/site-kit-wp/issues/8151

main environment

Latest environment

[mohitwp]

QA Update ✅

As discussed with @kuasha420 in slack. Issue reported above will be fix in a separate PR - I created a new ticket for this https://github.com/google/site-kit-wp/issues/8151 .

• Verified that All Visitors widget chart updated so it displays the number of date labels using the same logic as the Search Traffic and Performance widgets, providing a consistent look across all SK Dashboard charts.
• Verified that All of the charts in Site Kit that display a date axis which use the MMM d (e.g. "Sep 3") date format.
• Verified zero and gathering data state.
• Verified WP Dashboard.
• Issue reported above is now resolved.