Y-Axis includes negative range on some charts with non-negative values

Bug Description

Spotted this while testing #3083

On my live test site, within Google Analytics module page, in the y-axis data there’s a minus figure, which causes issues with the output of the graph. It appears for the different datasets, i.e. Users, Sessions, Bounce Rate and Session Duration. It would appear that the issue arises when you have days with zero data or, Site Kit is disabled for a period of time and no data is tracked. The issue does not exist in the current release.

The screencast details the issue.

https://user-images.githubusercontent.com/73545194/121716097-8995b000-cad7-11eb-9fd2-d81edbc05e06.mp4

Please let me know and I can give you access to my Analytics for this site.

---

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

Acceptance criteria

• The overview charts which are found on top of each module page (Search Console, AdSense, Analytics) should be modified to enforce showing only the positive part of the vertical axis, by using the configuration vAxis: { viewWindow: { min: 0 } } (which is already present in the All Traffic widget).
  • This configuration should be incorporated into all three of the above widgets, for both their widget-based and legacy versions (which likely means this change has to be added to 6 places in total).
  • The reason we need to enforce showing only the positive part of the vertical axis although all values are positive anyway is that due to the curving, the curve may in some cases slip below 0 - we cannot fix that, so cutting off that part since it’s irrelevant is a solid solution for now to avoid confusion.

Implementation Brief

• In the following files, add viewWindow: { min: 0 } to the existing chart options under the vAxis key:
  • assets/js/modules/adsense/components/module/ModuleOverviewWidget/Stats.js
  • assets/js/modules/analytics/components/module/ModuleOverviewWidget/SiteStats.js
  • assets/js/modules/search-console/components/module/ModuleOverviewWidget/Stats.js
  • assets/js/modules/adsense/components/dashboard/LegacyAdSenseDashboardWidgetSiteStats.js
  • assets/js/modules/analytics/components/dashboard/LegacyAnalyticsDashboardWidgetSiteStats.js
  • assets/js/modules/search-console/components/dashboard/LegacySearchConsoleDashboardWidgetSiteStats.js

Test Coverage

• No new tests needed.

Visual Regression Changes

• Images of the overview charts may need updating.

QA Brief

• Consult with @wpdarren in order to verify that negative values are no longer displayed.

Changelog entry

• Fix issue with Google Charts showing negative labels in some charts.

[felixarntz]

@aaemnnosttv After consulting with the maintainer of the Google Charts library, it looks like we should be able to at least cap the overall graph to only show the positive vertical axis by using vAxis: { viewWindow: { min: 0 } }, which we are actually already doing for the All Traffic widget specifically. I’ve just tested this and it works as expected - it obviously doesn’t fix the curve, but I think it results in a much better UX and resolves the confusion that @wpdarren raised above.

I’ll add ACs to use this configuration throughout.

[felixarntz]

@wpdarren Per @aaemnnosttv’s comment, it looks like we cannot fix this problem since it is a result of the implementation in the Google Charts library we’re using, which so far looks like it doesn’t provide control for allowing only non-negative values to be displayed.

There obviously aren’t any actual negative values here, but due to the way that the curving function is defined, unfortunately the line goes below 0, possibly evoking false expectations of “negative revenue”. It would be great if we could at least only display the positive part of the y-axis, effectively cutting off the part below, but it looks like that isn’t possible via the Google Charts library either.

I’m going to investigate internally whether we can submit a feature request to enhance this. For now fixing this is infeasible, so I will move to Stalled.