google / google/site-kit-wp

Traffic Overview: daily traffic chart

Open
#13,409 1 comment 0 reactions 0 assignees View on GitHub
Module: Analytics P1 Team S Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 14h
Merged PRs (30d)
77

Description

## 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: } ], 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 #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](https://www.figma.com/design/MWN8TXAjfTeKLF0DZ91bIX/Performance-benchmarking?node-id=552-11454)).
- 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.

Contributor guide

Open the contributing guide

Research direction

Start with assets/js/modules/analytics-4/components/traffic-overview/tabs/TrafficOverviewPanel.tsx and the existing All Traffic widget chart implementation, then read the specified traffic-overview constants, chart, data-helper, options, styles, and test locations. Run the focused traffic-overview tests before making changes. Done means the daily chart, empty-range axis, creation marker, fixed colour, entity data, hidden accessible text, stories, and listed tests all match the acceptance criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
accessibility, analytics, frontend, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
70/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.