Page GLQL analytics charts by limit with Previous and Next

Jatin Pariharrequested to merge
631399-glql-chart-pagination into master

What does this MR do and why?

When an analytics chart sets limit:, it only fetched one page of that size and there was no way to see the rest. Now these charts show Previous and Next controls: column, line, bar, area and diverging bar.

This uses client-side paging, the same way the bar list does in !257546 (merged). The chart fetches every page like it does without a limit (up to 1,000 rows). Each page then shows limit values of the first dimension. The charts do the paging themselves, so a two-dimension chart builds its series and the Other fold from every row and only slices for drawing. That keeps each series' color the same on every page, and a series with nothing on a page still shows in the legend.

Why client-side:

  • Pages are cut by first-dimension value, not by row. A two-dimension bar always keeps all of its segments on one page. This is the problem the server-side approach in !256798 (closed) could not solve.
  • Turning a page makes no request, and there is no new fetch path.

barList, stat and heatMap keep the current behaviour, where limit fetches a single page. Heat map is left out because its maxColumns, maxRows and colour scale would be worked out per page and drop columns. Anything other than a positive whole number for limit still goes to the server as before.

Things to know:

  • limit on a chart now means page size, not fetch size. A chart with a small limit now makes up to 10 requests instead of one.
  • The value axis is worked out per page. On a one-dimension bar chart so are the categoryLabels shares. The docs say so.
  • On a one-dimension chart, date labels decide whether to show the year from the rows on the page. A page inside one year can drop the year even when the full data spans two.
  • At the 1,000-row cap, the last value on a two-dimension chart can be missing some of its rows. resultsTruncated is set but not shown yet. That is tracked in glql#216.
  • The change event still carries every fetched row, so Copy contents copies all of them.

References

Screenshots or screen recordings

Recorded in GDK. My GDK has no license or Siphon for the analytics sources, so the chart's API response is mocked in the browser. The before line chart uses AI usage events seeded locally, and everything else uses generated counts. All the rendering and paging is the real frontend code.

lineChart with limit: 30, 90 days of data:

Before After
before-line-1 after-line-1

columnChart with two dimensions and limit: 5. Before, the five rows were one week's features, so only one week showed. After, each page shows five full weeks:

Before After
before-column-1 after-column-1

Paging through both charts:

Line chart Column chart

How to set up and validate locally

  1. Add this block to an issue description or a wiki page in a project with pipelines: 
    query: type = pipeline
mode: analytics
display: lineChart
dimensions: started(daily)
metrics: successRate
limit: 50
  2. Check that Previous is disabled on the first page, and that Next steps through the pages with no new network requests.
  3. Check that Next is disabled on the last page.
  4. Remove limit and check that the controls go away and every row renders.
  5. Try a columnChart with two dimensions and a small limit, and check that no first-dimension value shows up on two pages.
  6. Check that a barList, stat and heatMap with limit behave the same as on master.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jatin Parihar

Merge request reports