This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 2e29e33dd8 fix(calendar-heatmap): correct month display across
timezones (#37064)
2e29e33dd8 is described below
commit 2e29e33dd8e5bee431b168ecba7d8e09f419fe00
Author: Jean Massucatto <[email protected]>
AuthorDate: Mon Jan 19 06:37:40 2026 -0300
fix(calendar-heatmap): correct month display across timezones (#37064)
---
.../legacy-plugin-chart-calendar/src/Calendar.js | 3 +-
.../legacy-plugin-chart-calendar/src/utils.ts | 10 ++-
.../test/getFormattedUTCTime.ts | 28 -------
.../test/utils.test.ts | 96 ++++++++++++++++++++++
4 files changed, 107 insertions(+), 30 deletions(-)
diff --git
a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
index 4103411f6e..bff582d62e 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
@@ -22,6 +22,7 @@ import { select as d3Select } from 'd3-selection';
import { getSequentialSchemeRegistry } from '@superset-ui/core';
import { t } from '@apache-superset/core/ui';
import CalHeatMap from './vendor/cal-heatmap';
+import { convertUTCTimestampToLocal } from './utils';
const propTypes = {
data: PropTypes.shape({
@@ -105,7 +106,7 @@ function Calendar(element, props) {
const cal = new CalHeatMap();
cal.init({
- start: data.start,
+ start: convertUTCTimestampToLocal(data.start),
data: timestamps,
itemSelector: calContainer.node(),
legendVerticalPosition: 'top',
diff --git
a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/utils.ts
b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/utils.ts
index 9f3c0bee1b..d5676fc906 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/utils.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/utils.ts
@@ -19,7 +19,7 @@
import { getTimeFormatter } from '@superset-ui/core';
-// Assume that given timestamp is UTC
+// Cal-Heatmap provides local timestamps. We subtract the offset so that
utcFormat displays the correct local date.
export const getFormattedUTCTime = (
ts: number | string,
timeFormat?: string,
@@ -28,3 +28,11 @@ export const getFormattedUTCTime = (
const offset = date.getTimezoneOffset() * 60 * 1000;
return getTimeFormatter(timeFormat)(date.getTime() - offset);
};
+
+// The vendor library interprets timestamps as local time but the backend
sends UTC timestamps.
+// That's why we need to add the offset
+export const convertUTCTimestampToLocal = (utcTimestamp: number): number => {
+ const date = new Date(utcTimestamp);
+ const offsetMs = date.getTimezoneOffset() * 60 * 1000;
+ return utcTimestamp + offsetMs;
+};
diff --git
a/superset-frontend/plugins/legacy-plugin-chart-calendar/test/getFormattedUTCTime.ts
b/superset-frontend/plugins/legacy-plugin-chart-calendar/test/getFormattedUTCTime.ts
deleted file mode 100644
index 535542e868..0000000000
---
a/superset-frontend/plugins/legacy-plugin-chart-calendar/test/getFormattedUTCTime.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { getFormattedUTCTime } from '../src/utils';
-
-describe('getFormattedUTCTime', () => {
- it('formatted date string should equal to UTC date', () => {
- const ts = 1420070400000; // 2015.01.01 00:00:00 UTC
- const formattedTime = getFormattedUTCTime(ts, '%Y-%m-%d %H:%M:%S');
- expect(formattedTime).toEqual('2015-01-01 00:00:00');
- });
-});
diff --git
a/superset-frontend/plugins/legacy-plugin-chart-calendar/test/utils.test.ts
b/superset-frontend/plugins/legacy-plugin-chart-calendar/test/utils.test.ts
new file mode 100644
index 0000000000..a7543d7642
--- /dev/null
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/test/utils.test.ts
@@ -0,0 +1,96 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getFormattedUTCTime, convertUTCTimestampToLocal } from '../src/utils';
+
+describe('getFormattedUTCTime', () => {
+ it('formats local timestamp for display as UTC date', () => {
+ const utcTimestamp = 1420070400000; // 2015-01-01 00:00:00 UTC
+ const localTimestamp = convertUTCTimestampToLocal(utcTimestamp);
+ const formattedTime = getFormattedUTCTime(
+ localTimestamp,
+ '%Y-%m-%d %H:%M:%S',
+ );
+
+ expect(formattedTime).toEqual('2015-01-01 00:00:00');
+ });
+});
+
+describe('convertUTCTimestampToLocal', () => {
+ it('adjusts timestamp so local Date shows UTC date', () => {
+ const utcTimestamp = 1704067200000;
+ const adjustedTimestamp = convertUTCTimestampToLocal(utcTimestamp);
+ const adjustedDate = new Date(adjustedTimestamp);
+
+ expect(adjustedDate.getFullYear()).toEqual(2024);
+ expect(adjustedDate.getMonth()).toEqual(0);
+ expect(adjustedDate.getDate()).toEqual(1);
+ });
+
+ it('handles month boundaries', () => {
+ const utcTimestamp = 1706745600000;
+ const adjustedDate = new Date(convertUTCTimestampToLocal(utcTimestamp));
+
+ expect(adjustedDate.getFullYear()).toEqual(2024);
+ expect(adjustedDate.getMonth()).toEqual(1);
+ expect(adjustedDate.getDate()).toEqual(1);
+ });
+
+ it('handles year boundaries', () => {
+ const utcTimestamp = 1735689600000;
+ const adjustedDate = new Date(convertUTCTimestampToLocal(utcTimestamp));
+
+ expect(adjustedDate.getFullYear()).toEqual(2025);
+ expect(adjustedDate.getMonth()).toEqual(0);
+ expect(adjustedDate.getDate()).toEqual(1);
+ });
+
+ it('adds timezone offset to timestamp', () => {
+ const utcTimestamp = 1704067200000;
+ const adjustedTimestamp = convertUTCTimestampToLocal(utcTimestamp);
+ const expectedOffset =
+ new Date(utcTimestamp).getTimezoneOffset() * 60 * 1000;
+
+ expect(adjustedTimestamp - utcTimestamp).toEqual(expectedOffset);
+ });
+});
+
+describe('integration', () => {
+ it('fixes timezone bug for CalHeatMap', () => {
+ const febFirst2024UTC = 1706745600000;
+ const adjustedDate = new Date(convertUTCTimestampToLocal(febFirst2024UTC));
+
+ expect(adjustedDate.getMonth()).toEqual(1);
+ expect(adjustedDate.getDate()).toEqual(1);
+ });
+
+ it('both functions work together to display dates correctly', () => {
+ const utcTimestamp = 1704067200000;
+
+ // convertUTCTimestampToLocal adjusts UTC for Cal-Heatmap (which
interprets as local)
+ const localTimestamp = convertUTCTimestampToLocal(utcTimestamp);
+ const calHeatmapDate = new Date(localTimestamp);
+ expect(calHeatmapDate.getMonth()).toEqual(0);
+ expect(calHeatmapDate.getDate()).toEqual(1);
+
+ // getFormattedUTCTime receives LOCAL timestamp (from Cal-Heatmap) and
formats it
+ const formattedTime = getFormattedUTCTime(localTimestamp, '%Y-%m-%d');
+ expect(formattedTime).toContain('2024-01-01');
+ });
+});
