Chart y-axis numbers cut off in the PDF #13218

Bug Description

The y-axis numbers on the search traffic chart cut off with an ellipsis. The column reads 5,500 then 5,0... then 4,500 then 4,0..., so every second number loses its digits. A reader can't tell whether 5,0... is 5,000 or 5,000,000. The bottom 0 also sits on top of the last date label. That happens on all five line charts.

The numbers should fit the column, and the 0 should clear the date row.

Steps to reproduce

Screenshots

Additional Context

• PHP Version:
• OS:
• Browser:
• Plugin Version:
• Device:

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

Acceptance criteria

• Every value on a line chart's vertical axis is fully readable, with no number cut off by an ellipsis.
• Large values are shortened with a magnitude letter, so 58,000 reads as 58K, and the same applies to millions, billions and trillions.
• Values below one thousand keep their plain number, as they do today.
• The zero at the bottom of the vertical axis sits clear of the date labels below it.
• Date labels along the bottom stay on a single line, with fewer dates shown when the labels would otherwise crowd or wrap.
• All five line charts in the report behave the same way.

Implementation Brief

• In assets/js/components/pdf-export/chart-axis.ts (new file):
  • Export formatShortValue( value ), returning the value with a K, M, B or T suffix above one thousand and a plain rounded number below it.
  • Export getValueAxisGutter( maxValue, fontSize ), returning the pixel width the value labels need, measured from the widest of the maximum and its quarters.
  • Export pickDateTicks( dates, plotWidth, fontSize ), returning every Nth date so the labels fit plotWidth on one line.
  • Estimate label widths from the character count and font size rather than a canvas measurement, which is unavailable in the offscreen container the charts render into.
• In assets/js/modules/search-console/components/dashboard/SearchFunnelWidgetGA4/getPDFData.ts:
  • Move the value axis styling from vAxis into vAxes[ 1 ], the axis the series actually render against, and add format: 'short' to it.
  • Add vAxes[ 0 ] with transparent gridlines and textPosition: 'none' so only one set of gridlines and labels draws.
  • Replace the fixed chartArea.right with the value returned by getValueAxisGutter.
  • Pass the horizontal axis the reduced list from pickDateTicks, using the chart width minus the gutter and the left inset as the plot width.
• In assets/js/modules/adsense/components/module/ModuleOverviewWidget/getPDFData.ts: apply the same four changes.
• In assets/js/modules/analytics-4/components/dashboard/DashboardAllTrafficWidgetGA4/getPDFData.ts: apply the same four changes, at this chart's unscaled font size of 14.

Test Coverage

• assets/js/components/pdf-export/chart-axis.test.ts (new file):
  • values below one thousand keep their plain number, and values above it take the matching magnitude letter through to trillions
  • the gutter grows with the width of the widest label
  • the date list thins as the plot narrows, and never returns fewer than two dates
• assets/js/modules/search-console/components/dashboard/SearchFunnelWidgetGA4/getPDFData.test.ts, and the matching tests for the AdSense and Analytics charts:
  • the drawn options carry the styled vAxes[ 1 ] with the short format
  • the reserved right gutter widens for data in the tens of thousands
  • these three suites currently assert vAxis and will fail until updated

QA Brief

• With the trafficOverview flag on, connect Search Console, Analytics 4, and AdSense to a site with data. Use a site with a chart whose values go above 1,000, so some value labels end in a letter.
• Download the PDF report with the default 28-day range. Check that every value label to the right of each line chart shows in full, and none ends in an ellipsis.
• Check that a value of 1,000 or more ends in a letter, such as 4K or 1.6M. Check that a smaller value shows its plain number, such as 500 or 0.12.
• Check that the 0 at the bottom of each value axis doesn't touch any date label.
• Open the PDF report design beside the report. Check that on each line chart, the first date label starts at the chart's left edge, and the last one ends at its right edge.
• Set the dashboard's date range to Last 90 days and download the report again. Check that the date labels stay on one line and show fewer dates than at 28 days, with none cut off at either edge.
• Turn the trafficOverview flag off and download the report again. Check that the All visitors chart beside the donuts shows its value labels in full, and that its 0 doesn't touch any date label.
• Set Settings > General > Site Language to Deutsch, keep your profile's Language on Site Default, and download the report again. Check that the date labels use German month names, such as Sept. 23, and stay on one line. Check that every value label shows in full, such as 58.000 for 58,000, and none ends in an ellipsis.

Note: on a 14-day range, the half-width charts have no date label on the second and the second-to-last days. That leaves room for the first and last labels. The wide All visitors chart labels every day.

Changelog entry

• Fix cut-off and overlapping axis labels on the PDF report charts.