Ignore stacked on single-metric GLQL column charts

What does this MR do and why?

useSingleAxisChart in single_dimension_column_chart.vue decides whether a GLQL columnChart renders as GlColumnChart or GlStackedColumnChart. Before this change it based that decision only on the stacked display config flag, without checking how many metrics were selected.

With a single metric there is only one series, so stacking has nothing to stack against. The two components are not interchangeable though: GlStackedColumnChart renders a ChartLegend, GlColumnChart renders no legend at all. So the only visible effect of stacked: true on a one-metric column chart was a legend row appearing under the chart, which is not what the flag is for. The y-axis title was unaffected either way, since the helper that builds it returns the same value for a single metric on both paths.

The fix changes the condition in useSingleAxisChart so a single metric never triggers the stacked component:

return (this.stacked && this.metrics.length > 1) || this.metrics.length > 2;

The other single-dimension chart types that read stacked, barChart and areaChart, did not need the same fix. Both keep the same component regardless of stacked and only change a prop (presentation for barChart) or a series grouping (areaChart), so a single series looks the same either way. columnChart was the only one that switched components, so it was the only one with a visible bug. Two-dimension charts are not affected at all, since none of the two_dimensions_* components receive stacked and they are always stacked by design.

Added a new test block, with 1 metric and stacked=true, to single_dimension_column_chart_spec.js, covering a case that was previously untested (existing coverage only checked stacked: true with 2 metrics and with 3+ metrics).

References

Screenshots or screen recordings

There is no meaningful before/after screenshot beyond a legend row disappearing. Before this change, a one-metric columnChart with stacked: true showed a legend listing that single series underneath the chart. After this change, the same configuration renders with no legend, matching a non-stacked one-metric column chart.

How to set up and validate locally

  1. Run yarn jest spec/frontend/glql/components/presenters/column_chart/single_dimension_column_chart_spec.js and confirm all tests pass, including the new with 1 metric and stacked=true block.
  2. To check manually, render a GLQL block with a columnChart display type, one dimension, exactly one metric, and displayConfig: stacked: true. Confirm no legend appears below the chart. Before this change, a legend appeared.

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.

Merge request reports

Loading
Loading