Merge branch 'feat/support-grafana-timezone-settings' into dev-baseV1.0.4

Author: Cyan

provisioning/dashboards/dashboard.json

@@ -41,52 +41,29 @@
       },
       "targets": [
         {
-          "csvWave": [
-            {
-              "timeStep": 78000,
-              "valuesCSV": "0,0,2,2,1,1"
-            }
-          ],
           "datasource": {
             "type": "grafana-testdata-datasource",
-            "uid": "db84e60d-b92a-4089-82cb-34842fb1754b"
+            "uid": "trlxrdZVk"
           },
           "refId": "A",
-          "scenarioId": "predictable_csv_wave"
+          "scenarioId": "csv_content",
+          "csvContent": "time,value\n2026-02-28T00:30:00Z,1\n2026-02-28T16:30:00Z,2\n2026-02-28T23:30:00Z,3\n2026-02-27T00:30:00Z,4\n2026-02-27T16:30:00Z,5\n2026-02-27T23:30:00Z,6\n2026-02-26T00:30:00Z,7\n2026-02-26T16:30:00Z,8\n2026-02-26T23:30:00Z,9"
         }
       ],
-      "title": "Sample Panel Title",
-      "type": "tim012432-calendarheatmap-panel"
-    },
-    {
-      "datasource": {
-        "type": "grafana-testdata-datasource",
-        "uid": "trlxrdZVk"
-      },
-      "gridPos": {
-        "h": 8,
-        "w": 12,
-        "x": 12,
-        "y": 0
-      },
-      "id": 2,
-      "options": {
-        "seriesCountSize": "sm",
-        "showSeriesCount": false,
-        "text": "Default value of text input option"
-      },
-      "targets": [
+      "title": "Calendar Heatmap Panel (Timezone test)",
+      "transformations": [
         {
-          "alias": "",
-          "datasource": {
-            "type": "grafana-testdata-datasource",
-            "uid": "db84e60d-b92a-4089-82cb-34842fb1754b"
-          },
-          "refId": "A",
-          "scenarioId": "no_data_points"
+          "id": "convertFieldType",
+          "options": {
+            "conversions": [
+              {
+                "destinationType": "time",
+                "targetField": "time"
+              }
+            ]
+          }
         }
       ],
-      "title": "Sample Panel Title",
       "type": "tim012432-calendarheatmap-panel"
     }
   ],
@@ -97,13 +74,13 @@
     "list": []
   },
   "time": {
-    "from": "now-6h",
-    "to": "now"
+    "from": "2026-02-25T00:00:00Z",
+    "to": "2026-03-02T00:00:00Z"
   },
   "timepicker": {},
   "timezone": "",
-  "title": "Provisioned calendar-heatmap-panel dashboard",
+  "title": "Provisioned calendar-heatmap-panel dashboard (Timezone test)",
   "uid": "a538aeff-5a8a-42a5-901c-938d896fdd6f",
-  "version": 1,
+  "version": 2,
   "weekStart": ""
-}
+}

src/components/CalendarHeatmapPanel.tsx

@@ -29,7 +29,6 @@ function parseAnyYMD(dateStr: string): Date | null {
   return new Date(y, m - 1, d);
 }
 
-/** Must match dataProcessor.ts formatDate(): YYYY/MM/DD */
 function toKey(date: Date): string {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -45,21 +44,25 @@ function splitCsv(input: string): string[] {
 }
 
 function rotateWeek(labelsSunFirst: string[], weekStart: 'sunday' | 'monday'): string[] {
-  // Input is always Sun..Sat
   if (labelsSunFirst.length !== 7) {
     return labelsSunFirst;
   }
-  return weekStart === 'monday'
-    ? [...labelsSunFirst.slice(1), labelsSunFirst[0]] // Mon..Sat + Sun
-    : labelsSunFirst; // Sun..Sat
+  return weekStart === 'monday' ? [...labelsSunFirst.slice(1), labelsSunFirst[0]] : labelsSunFirst;
 }
 
-export const CalendarHeatmapPanel: React.FC<Props> = ({ data, width, height, options, timeRange }) => {
+export const CalendarHeatmapPanel: React.FC<Props> = ({
+  data,
+  width,
+  height,
+  options,
+  timeRange,
+  timeZone,
+}) => {
   const theme = useTheme2();
 
   const heatmapData = useMemo(() => {
-    return processTimeSeriesData(data.series, options.aggregation);
-  }, [data.series, options.aggregation]);
+    return processTimeSeriesData(data.series, options.aggregation, timeZone);
+  }, [data.series, options.aggregation, timeZone]);
 
   const countByOriginalDate = useMemo(() => {
     const m = new Map<string, number>();
@@ -71,7 +74,6 @@ export const CalendarHeatmapPanel: React.FC<Props> = ({ data, width, height, opt
 
   const rawStartDate = useMemo(() => new Date(timeRange.from.valueOf()), [timeRange.from]);
   const rawEndDate = useMemo(() => new Date(timeRange.to.valueOf()), [timeRange.to]);
-
   const availableWidth = useMemo(() => Math.max(0, width - 32), [width]);
 
   // Monday-first: shift render dates by -1 day to rotate weekday rows so Sunday becomes last

src/utils/dataProcessor.ts

@@ -1,9 +1,13 @@
-import { DataFrame, FieldType, GrafanaTheme2 } from '@grafana/data';
+import { DataFrame, FieldType, GrafanaTheme2, dateTime, dateTimeFormat } from '@grafana/data';
 import { HeatmapValue } from '../types';
 
 type Aggregation = 'sum' | 'count' | 'avg' | 'max' | 'min';
 
-export function processTimeSeriesData(series: DataFrame[], aggregation: Aggregation): HeatmapValue[] {
+export function processTimeSeriesData(
+  series: DataFrame[],
+  aggregation: Aggregation,
+  timeZone?: string
+): HeatmapValue[] {
   const dailyData = new Map<string, number[]>();
 
   // Iterate through all data frames
@@ -15,7 +19,7 @@ export function processTimeSeriesData(series: DataFrame[], aggregation: Aggregat
       continue;
     }
 
-    // Group values by date
+    // Group values by date (using Grafana timezone passed from panel props)
     for (let i = 0; i < frame.length; i++) {
       const timestamp = timeField.values[i];
       const value = valueField.values[i];
@@ -24,7 +28,11 @@ export function processTimeSeriesData(series: DataFrame[], aggregation: Aggregat
         continue;
       }
 
-      const date = formatDate(new Date(timestamp));
+      // IMPORTANT: pass Grafana's timezone so day-bucketing follows dashboard/user settings
+      const date = dateTimeFormat(dateTime(timestamp), {
+        format: 'YYYY/MM/DD',
+        timeZone,
+      });
 
       if (!dailyData.has(date)) {
         dailyData.set(date, []);
@@ -68,13 +76,6 @@ function aggregate(values: number[], method: Aggregation): number {
   }
 }
 
-function formatDate(date: Date): string {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${year}/${month}/${day}`;
-}
-
 // --------------------
 // Custom color helpers
 // --------------------
@@ -146,7 +147,6 @@ function buildCustomLevels(base: RGB, theme: GrafanaTheme2): string[] {
     rgbToCss(mix(base, black, 0.35)),
   ];
 
-  // Keep behavior aligned with existing logic:
   // reverse in dark mode for perceived contrast
   return theme.isDark ? [...levels].reverse() : levels;
 }