ui: air: make the grid show days if granularity > 1day

Signed-off-by: Jakub Kicinski <kuba@kernel.org>

Author: kuba-moo

ui/air.html

@@ -1344,9 +1344,13 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                         delete reviewChart.options.scales.y1;
                     }
 
+                    reviewChart.options.scales.x.time.unit = bucketSize >= 24 ? 'day' : 'hour';
+                    reviewChart.options.scales.x.time.stepSize = bucketSize >= 24 ? 1 : bucketSize;
+                    reviewChart.options.scales.x.time.displayFormats = bucketSize >= 24 ? { day: 'MMM d' } : { hour: 'MMM d HH:mm' };
                     reviewChart.update();
                 } else {
                     // Create new chart
+                    const timeUnit = bucketSize >= 24 ? 'day' : 'hour';
                     const datasets = [
                         {
                             label: 'Completed',
@@ -1388,11 +1392,9 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                         x: {
                             type: 'time',
                             time: {
-                                unit: 'hour',
-                                stepSize: 6,
-                                displayFormats: {
-                                    hour: 'MMM d HH:mm'
-                                }
+                                unit: timeUnit,
+                                stepSize: bucketSize >= 24 ? 1 : bucketSize,
+                                displayFormats: bucketSize >= 24 ? { day: 'MMM d' } : { hour: 'MMM d HH:mm' }
                             },
                             grid: {
                                 color: getComputedStyle(document.documentElement).getPropertyValue('--border-color')
@@ -1653,6 +1655,9 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                         delete averagesChart.options.scales.y1;
                     }
 
+                    averagesChart.options.scales.x.time.unit = bucketSize >= 24 ? 'day' : 'hour';
+                    averagesChart.options.scales.x.time.stepSize = bucketSize >= 24 ? 1 : bucketSize;
+                    averagesChart.options.scales.x.time.displayFormats = bucketSize >= 24 ? { day: 'MMM d' } : { hour: 'MMM d HH:mm' };
                     averagesChart.update();
                 } else {
                     // Create new chart
@@ -1710,10 +1715,9 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                         x: {
                             type: 'time',
                             time: {
-                                unit: 'day',
-                                displayFormats: {
-                                    day: 'MMM d'
-                                }
+                                unit: bucketSize >= 24 ? 'day' : 'hour',
+                                stepSize: bucketSize >= 24 ? 1 : bucketSize,
+                                displayFormats: bucketSize >= 24 ? { day: 'MMM d' } : { hour: 'MMM d HH:mm' }
                             },
                             grid: {
                                 color: getComputedStyle(document.documentElement).getPropertyValue('--border-color')
@@ -1831,6 +1835,9 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
             if (volumeChart) {
                 volumeChart.data.datasets[0].data = submissionsData;
                 volumeChart.data.datasets[1].data = patchesData;
+                volumeChart.options.scales.x.time.unit = bucketSize >= 24 ? 'day' : 'hour';
+                volumeChart.options.scales.x.time.stepSize = bucketSize >= 24 ? 1 : bucketSize;
+                volumeChart.options.scales.x.time.displayFormats = bucketSize >= 24 ? { day: 'MMM d' } : { hour: 'MMM d HH:mm' };
                 volumeChart.update();
             } else {
                 const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-primary');
@@ -1883,9 +1890,9 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                             x: {
                                 type: 'time',
                                 time: {
-                                    unit: 'hour',
-                                    stepSize: 6,
-                                    displayFormats: { hour: 'MMM d HH:mm' }
+                                    unit: bucketSize >= 24 ? 'day' : 'hour',
+                                    stepSize: bucketSize >= 24 ? 1 : bucketSize,
+                                    displayFormats: bucketSize >= 24 ? { day: 'MMM d' } : { hour: 'MMM d HH:mm' }
                                 },
                                 grid: { color: borderColor },
                                 ticks: { color: textColor }