Premium Analytics: add a global chart interval control (#51112)

* make date comparison an additive control

swap the SelectControl for a DropdownMenu and style it as the select it replaced

* draw the comparison trigger border explicitly

the shipped wp-components Button carries border: 0, so recoloring alone painted nothing; same for its accent focus shadow

* remove wrap prop

* drop the previous-week comparison preset

the picker offers previous period, month and year; a saved URL carrying the old id degrades to no comparison

* name the comparison preset on the picker trigger

the trigger shows Prev. period instead of the resolved dates, which the section header subtitle already spells out

* stack the section header when it runs out of width

grid plus a container query on the header's own box, so it follows the panel it sits in rather than the viewport

* drop the select fallback from the date presets

the pills abbreviate and stay pills at every width; removes the second measurement, the compact panel layout and the collapsed trigger variant

* keep the preset group on a single row

wrapping hung a doubled divider on the group's own frame; the pills stop shrinking too, so the custom trigger is what gives

* stop the comparison trigger from wrapping

its slot was shrinkable, so an overflowing row squeezed the control to the button's min-width and broke the label over two lines

* measure the comparison control with the row

the probe only covered the presets, so the + and a labelled trigger ran off the header before the labels ever shortened

* cap the title half so the subtitle wraps first

an auto track takes its max-content before an fr track gets anything, so a long date range shortened the preset labels while the header still had room

* give the subtitle a row of its own

out of the title column it stops setting the split, so the controls keep their width; stacked, it swaps back under the title

* abbreviate last 24 hours to 24H

it was the only short label keeping a word, which cost the row width the other three had already given up

* trim the date control comments

cut the development history and the alternatives not taken; keep the contracts that are not visible from the code

* abbreviate the month on the range trigger

a compact range form with the CLDR elision intact, so the trigger reads Aug 2 - 9, 2025 without inventing an English convention

* move the interval vocabulary into datetime

the interval type moves next to the presets it is derived from, and the allowed-interval list becomes public so a control can list exactly what the range permits

* extract the shared menu trigger styles

the comparison trigger's box and states are the same ones an icon-only trigger needs, so they move to a mixin instead of being copied

* add the chart interval dropdown

a glyph opening the buckets the active range allows; a single-option range still opens the menu, since the trigger carries no text to read the choice off

* keep a still-allowed interval across ranges

the range change no longer drops the bucket on every preset switch; the range rules coerce it only when the new range disallows it

* expose the chart interval from the date filters

the applied range derives both the buckets on offer and the one checked; the change applies on click unless a range draft is staged, as a comparison change does

* render the interval control in the date panel

it sits between the preset group and the comparison trigger, and goes through the probe too so the measured row accounts for its width

* name the chart interval in the section subtitle

the control renders as a glyph, so the subtitle carries the active bucket as a cadence beside the window length

* add the interval control to the dashboard date bar

both surfaces carry it: the rolling panel asks for it explicitly, and the year surface composes it beside the year presets

* fix linting issue

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/31184274896

Upstream-Ref: Automattic/jetpack@b5aeec7

Author: retrofox

CHANGELOG.md

@@ -12,6 +12,7 @@ This is an alpha version! The changes listed here are not final.
 ### Added
 - Add Total views and Total visitors dashboard widgets.
 - Add translated DateFiltersPanel stories (Russian, Dutch, German) that render the date bar at several container widths, so the layout is reviewed against real language packs rather than English only.
+- Date controls: add a chart interval control that sets the bucket size for every chart on the page.
 - Detail pages: Show the report the visitor came from in the breadcrumb.
 - Insights: add an all-time and yearly date selection, configurable per dashboard section.
 - Insights: add a Popular post widget, and adapt the single-post highlight card to both the width and the height of its dashboard cell.

build/modules/data/index.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-core-data', 'wp-data', 'wp-date', 'wp-html-entities', 'wp-i18n', 'wp-url'), 'version' => '64c477608a47c8927f48');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-core-data', 'wp-data', 'wp-date', 'wp-html-entities', 'wp-i18n', 'wp-url'), 'version' => '7d844d7e2a78690dc29d');

build/modules/data/index.min.js

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-components', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-private-apis'), 'module_dependencies' => array(array('id' => '@jetpack-premium-analytics/data', 'import' => 'static'), array('id' => '@jetpack-premium-analytics/externals', 'import' => 'static'), array('id' => '@jetpack-premium-analytics/ui', 'import' => 'static'), array('id' => '@wordpress/route', 'import' => 'static')), 'version' => '79465629a78654ee5c78');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-components', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-private-apis'), 'module_dependencies' => array(array('id' => '@jetpack-premium-analytics/data', 'import' => 'static'), array('id' => '@jetpack-premium-analytics/externals', 'import' => 'static'), array('id' => '@jetpack-premium-analytics/ui', 'import' => 'static'), array('id' => '@wordpress/route', 'import' => 'static')), 'version' => '9a25e7c371a143d0bd3d');

build/modules/data/index.min.js.map

@@ -39,6 +39,13 @@ __( "%1$s – %2$s", "jetpack-premium-analytics-pkg" );
 __( "No comparison", "jetpack-premium-analytics-pkg" );
 __( "Compare to", "jetpack-premium-analytics-pkg" );
 __( "Add comparison", "jetpack-premium-analytics-pkg" );
+__( "By hours", "jetpack-premium-analytics-pkg" );
+__( "By days", "jetpack-premium-analytics-pkg" );
+__( "By weeks", "jetpack-premium-analytics-pkg" );
+__( "By months", "jetpack-premium-analytics-pkg" );
+__( "By quarters", "jetpack-premium-analytics-pkg" );
+__( "By years", "jetpack-premium-analytics-pkg" );
+__( "Chart interval", "jetpack-premium-analytics-pkg" );
 __( "From", "jetpack-premium-analytics-pkg" );
 __( "To", "jetpack-premium-analytics-pkg" );
 __( "Cancel", "jetpack-premium-analytics-pkg" );
@@ -55,7 +62,15 @@ _n( "%d month", "%d months", 1, "jetpack-premium-analytics-pkg" );
 _n( "%d year", "%d years", 1, "jetpack-premium-analytics-pkg" );
 /* translators: %d is a number of days. */
 _n( "%d day", "%d days", 1, "jetpack-premium-analytics-pkg" );
-/* translators: %1$s is a date range, %2$s is how long it is, e.g. "7 days". */
+__( "hourly", "jetpack-premium-analytics-pkg" );
+__( "daily", "jetpack-premium-analytics-pkg" );
+__( "weekly", "jetpack-premium-analytics-pkg" );
+__( "monthly", "jetpack-premium-analytics-pkg" );
+__( "quarterly", "jetpack-premium-analytics-pkg" );
+__( "yearly", "jetpack-premium-analytics-pkg" );
+/* translators: %1$s is a date range, %2$s is how long it is, e.g. "7 days", %3$s is the chart interval, e.g. "daily". */
+__( "%1$s (%2$s, %3$s)", "jetpack-premium-analytics-pkg" );
+/* translators: %1$s is a date range, %2$s is either how long it is, e.g. "7 days", or the chart interval, e.g. "daily". */
 __( "%1$s (%2$s)", "jetpack-premium-analytics-pkg" );
 /* translators: %1$s is a date range with its length, %2$s is the compared period, e.g. "Previous period". */
 __( "%1$s vs. %2$s", "jetpack-premium-analytics-pkg" );

build/modules/fields/index.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-private-apis', 'wp-theme'), 'module_dependencies' => array(array('id' => '@jetpack-premium-analytics/data', 'import' => 'static'), array('id' => '@jetpack-premium-analytics/externals', 'import' => 'static'), array('id' => '@wordpress/a11y', 'import' => 'static'), array('id' => '@wordpress/route', 'import' => 'static')), 'version' => '04755de69e8abd93c5b0');
+<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-private-apis', 'wp-theme'), 'module_dependencies' => array(array('id' => '@jetpack-premium-analytics/data', 'import' => 'static'), array('id' => '@jetpack-premium-analytics/externals', 'import' => 'static'), array('id' => '@wordpress/a11y', 'import' => 'static'), array('id' => '@wordpress/route', 'import' => 'static')), 'version' => 'dc819e2518aa94137f1b');