Duplicate dates displayed when in gathering data state #13658

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

• 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

• Enable trafficOverview feature flag.
• On a site where the Analytics property is still gathering data, open the Site Kit dashboard and look at the date labels under the Traffic overview chart on the "Last 7 days" range: each date appears once, one label per day from the second day of the range to the last.
• Switch to "Last 14 days", "Last 28 days" and "Last 90 days" and confirm no date repeats on any of them, and that the gaps between labels stay even across the whole axis, including around the start of a month.
• Confirm the chart still covers the full selected range, still shows the "Gathering data" notice, and still draws its flat line along the bottom.
• Repeat the "Last 7 days" check on a single post's dashboard and on the view-only dashboard, and at a narrow browser width, to confirm the labels behave the same.
• On a site where Analytics already has data, confirm the Traffic overview chart's date labels are unchanged, and that the All Traffic chart, the Search Console charts and the WordPress dashboard unique visitors chart are unchanged while they are gathering data.

Changelog entry

• Fix duplicate date labels on the Traffic overview chart while Analytics is gathering data.