Traffic Overview: daily traffic chart

[eugene-manuilov]

Feature Description

The Traffic Overview panel (#13407) lays out three sections and leaves the second of them empty. This issue fills it in with a line chart of daily visitors across the selected date range: one point per day, the day on the horizontal axis and that day's totalUsers on the vertical axis.

Three behaviours of the chart it replaces are kept.

The axis labels start one day in. The chart labels every plotted day except the first. Labelling the first day too pushes the leftmost label against the edge of the plot, where it is dropped, and the axis then opens with an unlabelled day.

The value axis is capped when the range is empty. A site with no visitors at all in the selected range gets a value axis that tops out at 100, so the flat zero line sits along the bottom of a plausible axis instead of filling the plot area.

The property-creation marker stays. A new(-ish) Analytics property has no data before it was created, which shows on the chart as a sudden dropoff ("cliff") at the left edge. A marker at the property's creation date, labelled "Google Analytics property created", explains that cliff where it happens. The property's creation date is not readable on a view-only dashboard, so the marker is absent there, as it is today.

The line colour is fixed. The chart being replaced takes its colour from the donut/pie chart slice the reader has selected, so that the line matches the slice. With no selection there is one series and one colour, and the design names it. That colour is also the one the printed chart in the PDF report (#13412) has to use, so the two stay the same picture.

Link to the design doc: https://docs.google.com/document/d/1dsEs6-NjlP_LNqz5md5fnJMuxh9Vd9f88w4DTrZdLok/edit?tab=t.0
Figma: https://www.figma.com/design/MWN8TXAjfTeKLF0DZ91bIX/Performance-benchmarking?node-id=552-11454&m=dev

---

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

Acceptance criteria

• With the daily-visitors report resolved, the section renders a line chart with one series: one point per day the report returns, the day on the horizontal axis and that day's totalUsers on the vertical axis, in date order from the start of the selected range to its end.
• The first date label on the horizontal axis is the second day of the selected range.
• When the selected range's totalUsers is 0, the vertical axis runs from 0 to 100 and the line sits flat along the bottom of the plot area, with the range's start and end dates labelled on the horizontal axis.
• When the Analytics property's creation date falls inside the selected range, the chart shows a marker at that date labelled "Google Analytics property created".
• When the property's creation date falls before the selected range, the chart shows no marker.
• On a view-only dashboard the chart renders with no property-creation marker.
• The chart draws its single line series in the colour the Figma design gives it, and that colour is the same on the main dashboard, the entity dashboard and the view-only dashboard, and does not change with the date range or with anything the reader clicks.
• On the entity dashboard the chart's daily figures describe the entity's URL alone.
• Hovering a day shows that day's date and its visitor count.
• Clicking anywhere on the chart changes nothing on the card.
• The chart's daily figures are available to a screen reader without hovering the chart, and the property-creation marker's label is readable without hovering it.

Implementation Brief

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

  • Export TRAFFIC_CHART_LINE_COLOR, the hex value of the Sass colour token the design names for the line. The chart being replaced draws with $c-site-kit-sk-500, which is #3c7251.

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

  • Export getTrafficChartData( { report, startDate, endDate, gatheringData } ), a pure function returning { chartData, ticks, hasVisitors }.
  • Pick the rows to plot: report.rows when it is an array; an empty list when gatheringData is true; otherwise three rows with a zero visitor count, for startDate, the day after startDate, and endDate. Build a zero row with a local helper that returns { dimensionValues: [ { value: <the date with its dashes removed> } ], metricValues: [ { value: 0 } ] }, matching createZeroDataRow in the All Traffic widget's utils.js.
  • Build chartData as a header row — a date column labelled __( 'Day', 'google-site-kit' ) and a number column labelled __( 'Users', 'google-site-kit' ) — followed by one row per plotted day: the day parsed with parseDimensionStringToDate, and that day's totalUsers.
  • Build ticks as the plotted dates with the first one dropped.
  • Set hasVisitors from report.totals[ 0 ].metricValues[ 0 ].value parsed with parseInt: false when the value is missing or 0, true otherwise.

• In assets/js/modules/analytics-4/components/traffic-overview/charts/trafficChartOptions.ts (new file):

  • Export TRAFFIC_CHART_OPTIONS, the Google Charts options object for the line chart. Copy UserCountGraph.chartOptions from the All Traffic widget's directory, and set colors, series[ 0 ].color and crosshair.color to TRAFFIC_CHART_LINE_COLOR.

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

  • Take report, and render inside the existing div.googlesitekit-traffic-overview__chart.
  • Read startDate and endDate from getDateRangeDates() on CORE_USER, then call getTrafficChartData().
  • Deep-clone TRAFFIC_CHART_OPTIONS, set hAxis.ticks to the returned ticks, and set vAxis.viewWindow.max to 100 when hasVisitors is false and to undefined when it is true.
  • Render GoogleChart with chartType="LineChart", the built data and options, height="368px", loadingHeight="340px" and width="100%".
  • Read getPropertyCreateTime() on MODULES_ANALYTICS_4, and select nothing on a view-only dashboard, where that value is not available. When it returns a time, pass one dateMarkers entry holding that date and the text __( 'Google Analytics property created', 'google-site-kit' ). Add no check of your own for a creation date outside the selected range: GoogleChart drops such a marker.
  • After the chart, render a VisuallyHidden element holding the same figures as text: one line per plotted day with that day's date and its visitor count, and, when a marker is passed, one line with the marker's date and its text.
  • Add no onSelect and no chartEvents, so a click on the chart changes nothing.
  • The loaded and gatheringData props land in Traffic Overview: Add loading, gathering-data, zero-data, and error states #13411.

• In assets/js/modules/analytics-4/components/traffic-overview/tabs/TrafficOverviewPanel.tsx:

  • Pass the daily-visitors report from useTrafficOverviewReports() to TrafficChart.

• In assets/sass/widgets/_googlesitekit-widget-analyticsTrafficOverview.scss:

  • Style the chart wrapper per the design.

Test Coverage

• Add tests for charts/getTrafficChartData.ts covering:

  • One chart row per report row, in the order the report returns them, with the date parsed and the visitor count carried through.
  • ticks holds the plotted dates with the first one dropped.
  • A report with no rows array gives three zero rows — the range's start, the day after it, and the range's end — and hasVisitors is false.
  • A report whose total is the string '0' gives hasVisitors false, and a report with visitors gives true.
  • gatheringData gives no rows.

• Add tests for charts/TrafficChart.tsx covering:

  • vAxis.viewWindow.max is 100 for a range with no visitors and unset for a range with visitors.
  • One dateMarkers entry labelled "Google Analytics property created" is passed when the property's creation time is known, and none is passed on a view-only dashboard.
  • The visually hidden text lists every plotted day with its count, and the marker's date with its text.
  • The single series draws in TRAFFIC_CHART_LINE_COLOR whichever date range is selected.

• Add charts/TrafficChart.stories.tsx with stories for a resolved range, a range with no visitors, and a range containing the property's creation date, each with scenario = {}.

QA Brief

• Enable the trafficOverview feature flag and connect Analytics 4 to a property with daily visitors across the last 28 days.
• Open the Site Kit dashboard and find the Traffic overview card. Confirm that a line chart sits between the visitor total and the breakdown columns. Confirm that the line runs from the range's first day to its last, and that it matches the design (Figma).
• Rest the pointer on the leftmost point. Confirm that a box names that day's date and its visitor count. Confirm that the first date label under the chart is the day after that date.
• Click the line, the plot, and a date. Confirm that the visitor total and the breakdown columns keep their values.
• Switch the date range between Last 7 days and Last 90 days. Confirm that the line keeps the same color.
• On a property with no visitors in the range, confirm that the numbers on the right run from 0 to 100. Confirm that the line sits flat along the bottom, and that the dates under it are the range's second day and its last day.
• On a property created inside the range, confirm that a marker stands on its creation day, labelled Google Analytics property created.
• On a property created before the range, confirm that no marker appears.
• Note the card's visitor total. Open a single post, click Site Kit in the admin bar, then View more stats. Confirm that the chart's daily counts are lower than the site's.
• Share Analytics with an editor in Site Kit > Settings > Dashboard sharing, then open the dashboard as that editor. Confirm that the chart draws the same line, and that no marker appears even on a property created inside the range.
• Turn on a screen reader and read past the chart. Confirm that it announces each day with its date and visitor count. Where a marker is on the chart, confirm that it announces the marker's day and Google Analytics property created.

Changelog entry

• Add the daily traffic chart to the new Traffic Overview widget.

[tofumatt]

AC and IB ✅