Duplicate dates displayed when in gathering data state

[wpdarren]

Bug Description

This was reported on the Performance Benchmarking bug bash.

The dates along the bottom are duplicated when gathering data. This appears to be more of an issue on 7, 14 days. Also, on 90 day timeframe, there is no duplication but the timeframe segments are unequal at the beginning and end of months.

For 7, 14 days:

For 90 days:

Steps to reproduce

1. Set up a Site with Analytics in gathering data state.
2. Change the date periods, 7, 14 and 90 days to observe the issues reported.

---

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

Acceptance criteria

• While the Analytics property is gathering data, the date labels under the Traffic overview chart meet all of the following for the "Last 7 days", "Last 14 days", "Last 28 days" and "Last 90 days" date ranges:
  • Each date appears at most once.
  • Consecutive labels are the same whole number of days apart. For example, "Last 7 days" shows one label per day, from the second day of the range to its last day.
  • The labels fall on the same days that the chart labels for the same date range once the property has data.
  • This replaces the "no per-day labels" wording in Traffic Overview: Add loading, gathering-data, zero-data, and error states #13411: for "Last 7 days", one label per day is what the chart shows once it has data.
• While gathering data, the chart's horizontal axis still spans exactly the selected date range, and the chart keeps its "gathering data…" notice and its flat line along the bottom.
• The above applies on the main dashboard, the entity dashboard and the view-only dashboard, at every viewport width.
• The other line charts with a gathering-data state stay unchanged: the All Traffic widget chart, the Search Console widget charts and the WordPress dashboard unique visitors chart.

Implementation Brief

While the property is gathering data, TrafficChart passes gatheringData to GoogleChart, and getChartOptions() then sets hAxis.viewWindow to the selected range and deletes hAxis.ticks, because the chart's options set no hAxis.viewWindow of their own

site-kit-wp/assets/js/components/GoogleChart/utils.js

Lines 158 to 174 in a98127b

	if ( ! options?.hAxis?.viewWindow?.min ) {
	set(
	chartOptions,
	'hAxis.viewWindow.min',
	stringToDate( startDate )
	);
	delete chartOptions.hAxis.ticks;
	}
	if ( ! options?.hAxis?.viewWindow?.max ) {
	set(
	chartOptions,
	'hAxis.viewWindow.max',
	stringToDate( endDate )
	);
	delete chartOptions.hAxis.ticks;
	}

With no ticks, Google Charts picks its own: 6-hour steps for short ranges, which the MMM d format prints as the same date four times, and a mix of month starts and weekly steps for "Last 90 days", which leaves uneven gaps around each month start.

• In assets/js/modules/analytics-4/components/traffic-overview/charts/getTrafficChartData.ts:

  • Add an optional gatheringData option (default false) to getTrafficChartData() and TrafficChartDataOptions.
  • When gatheringData is true, ignore report and return:
    • the three zero-visitor points from getZeroVisitorPoints()

      site-kit-wp/assets/js/modules/analytics-4/components/traffic-overview/charts/getTrafficChartData.ts

      Lines 101 to 113 in a98127b

      	function getZeroVisitorPoints(
      	startDate: string,
      	endDate: string
      	): TrafficChartPoint[] {
      	const secondDay = stringToDate( startDate );
      	secondDay.setDate( secondDay.getDate() + 1 );
      	return [
      	stringToDate( startDate ),
      	secondDay,
      	stringToDate( endDate ),
      	].map( ( date ): TrafficChartPoint => [ date, 0 ] );
      	}

      , as today;
    • hasVisitors: false;
    • ticks holding every day from the day after startDate through endDate. The chart gets these same ticks once the range has one row per day, so the labels land on the same days, and Google Charts thins them evenly for longer ranges. Build the list with a local helper that steps one day at a time from stringToDate( startDate ), the same way getZeroVisitorPoints() builds the second day.
  • Leave the other cases unchanged: ticks from the report's rows, and the second and last day for a report with no rows.

• In assets/js/modules/analytics-4/components/traffic-overview/charts/TrafficChart.tsx:

  • Pass report and gatheringData to getTrafficChartData(), replacing the gatheringData ? undefined : report ternary

    site-kit-wp/assets/js/modules/analytics-4/components/traffic-overview/charts/TrafficChart.tsx

    Lines 86 to 92 in a98127b

    	const { chartData, ticks, hasVisitors } = getTrafficChartData( {
    	// A property still gathering data shows no visitors, so the chart draws
    	// a flat line at zero.
    	report: gatheringData ? undefined : report,
    	startDate,
    	endDate,
    	} );

  • While gatheringData is true, set hAxis.viewWindow to stringToDate( startDate ) and stringToDate( endDate ). These are the values getChartOptions() sets today, so the axis keeps the same span, and because hAxis.viewWindow is now set, getChartOptions() keeps hAxis.ticks. Leave hAxis.viewWindow unset in every other state, so the chart with data renders as before.
  • Note: the fix stays in this chart rather than in getChartOptions(). The other LineChart consumers of gatheringData (UserCountGraph, SearchConsoleStats, AnalyticsStats, WPDashboardUniqueVisitorsChartGA4) depend on the ticks being dropped. For example, UserCountGraph builds an empty tick list while gathering data.

Test Coverage

• In charts/getTrafficChartData.test.ts:
  • With gatheringData, ticks holds one date per day from the second day to the last day for a 7-day range and for a 90-day range (89 dates, one day apart).
  • With gatheringData, the points are the three zero points and hasVisitors is false, even when the report has visitors.
  • The existing cases without gatheringData keep passing unchanged.
• In charts/TrafficChart.test.tsx:
  • While gathering data, the options passed to GoogleChart hold hAxis.viewWindow from the range's first day to its last day, plus the per-day hAxis.ticks.
  • Passing those options through getChartOptions() with gatheringData: true keeps hAxis.ticks. This is the regression test that fails without the fix.
  • With data, hAxis.viewWindow stays unset.
• In assets/js/modules/analytics-4/components/traffic-overview/charts/TrafficChart.stories.tsx:
  • Let Template pass an optional gatheringData arg through to TrafficChart.
  • Add a GatheringData story on the last-7-days range with gatheringData set, with the same scenario as NoVisitors. The 7-day range is where the duplicated labels show.

QA Brief

Changelog entry