change how SparklinesGrid.vue does its layouting, instead of using Materialized css, we can start using grid-css. This will allow us to have more dynamic views based on what we have (multiple dates to compare etc)

Author: chippison

plugins/CoreVisualizations/Visualizations/Sparklines.php

@@ -133,8 +133,8 @@ public function render()
 
     /**
      * Whether the redesigned Vue card grid can render the current request. It handles the
-     * no-comparison layout and date comparison of exactly two dates; segment comparison,
-     * segment + date comparison, and comparing three or more dates stay on the legacy Twig layout.
+     * no-comparison layout and date comparison of two or more dates; segment comparison and
+     * segment + date comparison stay on the legacy Twig layout.
      */
     private function isRedesignSupportedForComparison(): bool
     {
@@ -146,9 +146,12 @@ private function isRedesignSupportedForComparison(): bool
         $compareSegments = $request['compareSegments'] ?? [];
         $compareDates = $request['compareDates'] ?? [];
 
+        // A non-empty compareDates (one entry beyond the main date, i.e. two total) means a pure
+        // date comparison. The upper bound is enforced upstream by DataComparisonFilter, which
+        // rejects more than the configured periodCompareLimit before rendering.
         return empty($compareSegments)
             && is_array($compareDates)
-            && count($compareDates) === 1;
+            && count($compareDates) >= 1;
     }
 
     /**

plugins/CoreVisualizations/vue/dist/CoreVisualizations.umd.js

@@ -75,6 +75,24 @@ describe('CoreVisualizations/DateComparison', () => {
     expect(wrapper.findAll('.dateComparison__period').length).toBe(2);
   });
 
+  it('renders a column for every compared date, including three or more', () => {
+    const wrapper = createWrapper(makeSparkline({
+      url: '?module=API&action=get&columns=nb_visits&compareDates[]=2026-05-03&compareDates[]=2026-05-02',
+      metrics: {
+        'Monday, May 4, 2026': [{ value: '10,558', description: 'Visits', title: 'Visits' }],
+        'Sunday, May 3, 2026': [{ value: '12,558', description: 'Visits', title: 'Visits' }],
+        'Saturday, May 2, 2026': [{ value: '9,213', description: 'Visits', title: 'Visits' }],
+      },
+      seriesIndices: [0, 1, 2],
+    }));
+
+    const labels = wrapper.findAll('.dateAtom').map((node) => node.text());
+    expect(labels).toEqual(['Monday, May 4, 2026', 'Sunday, May 3, 2026', 'Saturday, May 2, 2026']);
+    expect(wrapper.findAll('.dateComparison__period').length).toBe(3);
+    expect(wrapper.findAll('.metricValue__number').map((node) => node.text()))
+      .toEqual(['10,558', '12,558', '9,213']);
+  });
+
   it('renders the primary and secondary value of each date column', () => {
     const wrapper = createWrapper();
 

plugins/CoreVisualizations/vue/dist/CoreVisualizations.umd.min.js

@@ -8,70 +8,30 @@
 // Scoped to .sparklinesGrid — Matomo concatenates all LESS into one sheet, so this avoids
 // colliding with the legacy .sparkline styles still used when the feature flag is off.
 .sparklinesGrid {
-  // Row gap: each column's bottom padding, cancelled on the last row by an equal negative
-  // margin on the grid. Shared so the two stay in sync.
-  @_row-gap: 16px;
-
-  // Columns come from Materialize's float classes (col s6 m6 l4 xl3 = 2/2/4/4); the media
-  // queries below add a 5th tier. Floats keep an incomplete last row packed left (flex broke
-  // that). The card frame itself lives in SparklineCard.less.
-  .col {
-    padding: 0 8px @_row-gap;
-  }
-
-  // The grid is itself the .row; pull it up one gap to cancel the last row's bottom padding
-  // (the same offset idiom Materialize uses for the horizontal .col padding).
-  &.row {
-    margin-bottom: -@_row-gap;
-  }
-
-  // Comparison cards: 3-column tier from 1600px (xl6 is 2 cols up to there). 1600 isn't a native
-  // Materialize breakpoint, so set the width directly. xl6 is emitted only for comparison cards, so
-  // this never affects the no-comparison grid.
-  @media (min-width: 1600px) {
-    &.row > .col.xl6 {
-      width: 33.3333%;
-    }
-  }
-
-  // Top tier above 1920px: no-comparison widens to 5 cols, comparison to 4. 5 isn't a native col
-  // fraction (12/5), so set the width directly; the selectors need .xl3/.xl6 (4 classes) to outrank
-  // Materialize's `.row .col.xlN`. Placed after the 1600 block so the comparison rule wins at ≥1920.
-  @media (min-width: 1920px) {
-    &.row > .col.xl3 {
-      width: 20%;
-    }
-
-    &.row > .col.xl6 {
-      width: 25%;
-    }
-  }
-
-  // Single column below 320px, same direct-width override; .s6 outranks `.row .col.s6`.
-  @media (max-width: 320px) {
-    &.row > .col.s6 {
-      width: 100%;
-    }
+  @_gap: 16px;
+
+  // Auto-fill CSS Grid: the column count follows the available width instead of fixed
+  // breakpoints. `--sparklines-card-min-width` is set inline by SparklinesGrid.vue (larger for
+  // comparison cards, and scaled by the number of compared dates), so wider cards pack fewer per
+  // row. `auto-fill` (not `auto-fit`) keeps an incomplete last row packed left at track width,
+  // preserving the old float behaviour. `min(…, 100%)` stops a card whose minimum is wider than
+  // the container (narrow widget / mobile) from forcing horizontal overflow — it is escaped
+  // (~"…") because less.php has a built-in min() that would otherwise fold it to 100% at compile
+  // time, collapsing the grid to a single full-width column.
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(~"min(var(--sparklines-card-min-width, 260px), 100%)", 1fr));
+  gap: @_gap;
+
+  // Grid items default to min-width:auto, which would refuse to shrink below their content;
+  // let each card shrink to its track so long titles/sparklines truncate instead of overflowing.
+  > .sparklineCard {
+    min-width: 0;
   }
 }
 
-// Widget overrides so the cards sit neatly inside a dashboard widget.
+// Widget frame so the cards sit neatly inside a dashboard widget: the widget container adds no
+// padding of its own, so the grid supplies an even 16px frame plus an 8px inter-card gutter.
 .widget .sparklinesGrid {
-  .col {
-    // Inter-card gutter: 4px on every side, so 8px shows between adjacent cards.
-    padding: 4px;
-  }
-
-  .sparkline.sparklineCard {
-    margin-left: 0;
-  }
-
-  // The widget container adds no padding of its own, so the grid supplies an even frame around
-  // the cards: 16px of row padding plus each column's 4px gutter gives 20px on every side. The
-  // base .sparklinesGrid.row negative bottom margin is reset (margin: 0) so it can't pull the
-  // frame in and push the last row past the widget's bottom edge.
-  &.row {
-    margin: 0;
-    padding: 16px;
-  }
+  gap: 8px;
+  padding: 16px;
 }

plugins/CoreVisualizations/vue/src/Sparklines/DateComparison.spec.ts

@@ -66,6 +66,23 @@ describe('CoreVisualizations/SparklinesGrid', () => {
     };
   }
 
+  function comparisonEntry3Dates(order = 1) {
+    // Same as comparisonEntry() but comparing three dates, so the grid should widen the card.
+    return {
+      url: '?module=API&action=get&compareDates[]=2026-05-03&compareDates[]=2026-05-02',
+      metrics: {
+        'Monday, May 4, 2026': [{ value: '1', description: 'Visits', title: 'Visits' }],
+        'Sunday, May 3, 2026': [{ value: '2', description: 'Visits', title: 'Visits' }],
+        'Saturday, May 2, 2026': [{ value: '3', description: 'Visits', title: 'Visits' }],
+      },
+      order,
+      title: null,
+      group: '0',
+      seriesIndices: [0, 1, 2],
+      graphParams: null,
+    };
+  }
+
   function placeholder(order: number) {
     // Mirrors Config::addPlaceholder(): empty url + no metrics, used only for legacy layout.
     return {
@@ -122,11 +139,16 @@ describe('CoreVisualizations/SparklinesGrid', () => {
     expect(wrapper.find('.metricValue__title').attributes('title')).toBe('The number of visits.');
   });
 
-  it('uses the responsive grid columns (s6 m6 l4 xl3) on reporting pages', () => {
+  it('lays cards out on a CSS grid, not the Materialize float row', () => {
     const wrapper = createWrapper();
-    const col = wrapper.find('.row.sparklinesGrid > div');
+    const grid = wrapper.find('.sparklinesGrid');
 
-    expect(col.classes()).toEqual(expect.arrayContaining(['col', 's6', 'm6', 'l4', 'xl3']));
+    // The `row` class must be gone: its clearfix ::after pseudo-element would otherwise become a
+    // stray empty grid cell.
+    expect(grid.classes()).not.toContain('row');
+    // Cards are direct grid children now (no per-card col wrapper div).
+    expect(wrapper.findAllComponents({ name: 'SparklineCard' }).length).toBe(3);
+    expect(grid.attributes('style')).toContain('--sparklines-card-min-width: 260px');
   });
 
   it('orders cards by backend `order`, not by numeric group-key iteration order', () => {
@@ -146,33 +168,32 @@ describe('CoreVisualizations/SparklinesGrid', () => {
     expect(titles).toEqual(['First', 'Second', 'Third']);
   });
 
-  it('collapses to two columns in widget mode', () => {
+  it('uses a smaller card minimum in widget mode so two still fit across', () => {
     const wrapper = createWrapper({ isWidget: true });
-    const col = wrapper.find('.row.sparklinesGrid > div');
+    const grid = wrapper.find('.sparklinesGrid');
 
-    expect(col.classes()).toContain('s6');
-    expect(col.classes()).not.toContain('xl3');
+    expect(grid.attributes('style')).toContain('--sparklines-card-min-width: 160px');
   });
 
-  it('uses the wider comparison columns (s12 m12 l6 xl6) when comparing', () => {
+  it('widens the card minimum when comparing and renders the comparison body', () => {
     const wrapper = createWrapper({ sparklines: { 0: [comparisonEntry()] }, isComparing: true });
-    const col = wrapper.find('.row.sparklinesGrid > div');
+    const grid = wrapper.find('.sparklinesGrid');
 
-    expect(col.classes()).toEqual(expect.arrayContaining(['col', 's12', 'm12', 'l6', 'xl6']));
-    // ...and the comparison body is what renders inside.
+    // 2 compared dates -> 64 + 150 * 2.
+    expect(grid.attributes('style')).toContain('--sparklines-card-min-width: 364px');
     expect(wrapper.findComponent({ name: 'DateComparison' }).exists()).toBe(true);
   });
 
-  it('collapses comparison cards to a single column in widget mode', () => {
+  it('scales the comparison card minimum with the number of compared dates', () => {
     const wrapper = createWrapper({
-      sparklines: { 0: [comparisonEntry()] },
+      sparklines: { 0: [comparisonEntry3Dates()] },
       isComparing: true,
-      isWidget: true,
     });
-    const col = wrapper.find('.row.sparklinesGrid > div');
+    const grid = wrapper.find('.sparklinesGrid');
 
-    expect(col.classes()).toContain('s12');
-    expect(col.classes()).not.toContain('xl6');
+    // 3 compared dates -> 64 + 150 * 3, and one column per date renders inside the card.
+    expect(grid.attributes('style')).toContain('--sparklines-card-min-width: 514px');
+    expect(wrapper.findAll('.dateComparison__period').length).toBe(3);
   });
 
   it('re-runs the sparkline click-to-evolution wiring after mount', async () => {