carbon-addons-iot-react 4.4.1 → 4.5.1

package/es/components/ListCard/ListCard.js

@@ -24,8 +24,9 @@ import { CardPropTypes } from '../../constants/CardPropTypes.js';
 import Card from '../Card/Card.js';
 import { getResizeHandles } from '../../utils/cardUtilityFunctions.js';
 import deprecate from '../../internal/deprecate.js';
+import dayjs from '../../utils/dayjs.js';
 
-var _excluded = ["id", "title", "size", "data", "isLoading", "isResizable", "loadData", "hasMoreData", "layout", "className", "children", "testID", "testId"];
+var _excluded = ["id", "title", "size", "data", "isLoading", "isResizable", "loadData", "hasMoreData", "layout", "className", "children", "testID", "testId", "timeZone"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ListCard = function ListCard(_ref) {
@@ -42,7 +43,10 @@ var ListCard = function ListCard(_ref) {
     children = _ref.children,
     testID = _ref.testID,
     testId = _ref.testId,
+    timeZone = _ref.timeZone,
     others = _objectWithoutProperties(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
   var handleScroll = function handleScroll(e) {
     var element = e.target;
     //  height of the elements content - height element’s content is scrolled vertically === height of the scrollable part of the element
@@ -60,7 +64,8 @@ var ListCard = function ListCard(_ref) {
     resizeHandles: resizeHandles
     // TODO: remove deprecated 'testID' in v3.
     ,
-    testId: testID || testId
+    testId: testID || testId,
+    timeZone: effectiveTimezone
   }, others), /*#__PURE__*/React__default.createElement("div", {
     className: classnames('list-card', className),
     style: {

package/es/components/TableCard/TableCard.js

@@ -43,13 +43,14 @@ import { createColumnsWithFormattedLinks, determineFilterFunction, determinePrec
 import ThresholdIcon from './ThresholdIcon.js';
 import { OverflowMenuVertical } from '@carbon/icons-react';
 
-var _excluded = ["id", "title", "isExpanded", "content", "children", "size", "onCardAction", "values", "filters", "isEditable", "isResizable", "i18n", "tooltip", "locale", "timeRange", "timeRangeOptions", "availableActions", "isLoading", "testID", "testId", "className", "renderDateDropdownInPortal", "withToolbarTooltips", "defaultDateFormatPattern", "extraActions"];
+var _excluded = ["id", "title", "isExpanded", "content", "children", "size", "onCardAction", "values", "filters", "isEditable", "isResizable", "i18n", "tooltip", "locale", "timeZone", "timeRange", "timeRangeOptions", "availableActions", "isLoading", "testID", "testId", "className", "renderDateDropdownInPortal", "withToolbarTooltips", "defaultDateFormatPattern", "extraActions"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = settings.iotPrefix;
 var defaultProps = {
   size: CARD_SIZES.LARGE,
   locale: 'en',
+  timeZone: undefined,
   values: [],
   filters: [],
   i18n: {
@@ -103,6 +104,7 @@ var TableCard = function TableCard(_ref) {
     i18n = _ref.i18n,
     tooltip = _ref.tooltip,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     timeRange = _ref.timeRange,
     timeRangeOptions = _ref.timeRangeOptions,
     availableActions = _ref.availableActions,
@@ -116,8 +118,8 @@ var TableCard = function TableCard(_ref) {
     extraActions = _ref.extraActions,
     others = _objectWithoutProperties(_ref, _excluded);
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
-
-  // Set the locale
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
   dayjs.locale(locale);
   /** Searches for variables and updates the card if it is passed the cardVariables prop */
   // Need to skip the linkTemplate variable for now because we will handle it at render time per row
@@ -300,7 +302,7 @@ var TableCard = function TableCard(_ref) {
       var values = _objectSpread({}, row.values);
       Object.keys(values).forEach(function (column) {
         if (!isEditable && filteredTimestampColumns.includes(column)) {
-          values[column] = values[column] ? dayjs(values[column]).format(defaultDateFormatPattern) : '';
+          values[column] = values[column] ? dayjs.tz(values[column]).format(defaultDateFormatPattern) : '';
         }
       });
       return _objectSpread(_objectSpread({}, row), {}, {
@@ -478,6 +480,7 @@ var TableCard = function TableCard(_ref) {
     timeRangeOptions: timeRangeOptions,
     renderDateDropdownInPortal: renderDateDropdownInPortal,
     locale: locale,
+    timeZone: effectiveTimezone,
     id: id,
     extraActions: extraActions
   });
@@ -495,6 +498,7 @@ var TableCard = function TableCard(_ref) {
     isExpanded: isExpanded,
     i18n: mergedI18n,
     locale: locale,
+    timeZone: effectiveTimezone,
     resizeHandles: resizeHandles,
     hideHeader: true,
     className: classnames("".concat(iotPrefix, "--table-card"), className, _defineProperty({}, "".concat(iotPrefix, "--table-card--with-tooltips"), withToolbarTooltips))
@@ -602,6 +606,13 @@ TableCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "values": {
       "defaultValue": {
         "value": "[]",

package/es/components/TableCard/tableCardUtils.js

@@ -63,7 +63,7 @@ var createColumnsWithFormattedLinks = function createColumnsWithFormattedLinks(c
               });
               var variableValue =
               // format the TIMESTAMP type columns
-              (matchingColumn === null || matchingColumn === void 0 ? void 0 : matchingColumn.type) === 'TIMESTAMP' ? dayjs(row[variable]).format(defaultDateFormatPattern) : row[variable];
+              (matchingColumn === null || matchingColumn === void 0 ? void 0 : matchingColumn.type) === 'TIMESTAMP' ? dayjs.tz(row[variable]).format(defaultDateFormatPattern) : row[variable];
               // encode value so the URL can be valid
               var encodedValue = typeof variableValue === 'string' && variableValue !== null && variableValue !== void 0 && variableValue.includes('https') ? variableValue : encodeURIComponent(variableValue);
               variableLink = variableLink.replace("{".concat(variable, "}"), encodedValue);
@@ -131,7 +131,7 @@ var determineFilterFunction = function determineFilterFunction(column, defaultFi
   var defaultDateFormatPattern = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DAYJS_INPUT_FORMATS.SECONDS;
   return _objectSpread(_objectSpread({}, column.type === 'TIMESTAMP' ? {
     filterFunction: function filterFunction(cellValue, filterValue) {
-      var dateString = dayjs(cellValue).format(defaultDateFormatPattern);
+      var dateString = dayjs.tz(cellValue).format(defaultDateFormatPattern);
       return dateString.includes(filterValue);
     }
   } : {}), {}, {

package/es/components/TimeSeriesCard/TimeSeriesCard.js

@@ -43,7 +43,7 @@ import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { usePrevious } from '../../hooks/usePrevious.js';
 import { generateSampleValues, formatGraphTick, formatColors, formatChartData, applyStrokeColor, applyFillColor, applyIsFilled } from './timeSeriesUtils.js';
 
-var _excluded = ["title", "content", "children", "size", "interval", "isEditable", "isResizable", "values", "locale", "i18n", "isExpanded", "timeRange", "isLazyLoading", "isLoading", "domainRange", "tooltipDateFormatPattern", "tooltipShowTotals", "showTimeInGMT", "testID", "testId", "defaultDateFormatPattern"];
+var _excluded = ["title", "content", "children", "size", "interval", "isEditable", "isResizable", "values", "locale", "timeZone", "i18n", "isExpanded", "timeRange", "isLazyLoading", "isLoading", "domainRange", "tooltipDateFormatPattern", "tooltipShowTotals", "showTimeInGMT", "testID", "testId", "defaultDateFormatPattern"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = settings.iotPrefix;
@@ -160,6 +160,7 @@ var defaultProps = {
   },
   chartType: TIME_SERIES_TYPES.LINE,
   locale: 'en',
+  timeZone: undefined,
   content: {
     series: [],
     timeDataSourceId: 'timestamp',
@@ -190,6 +191,7 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     isResizable = _ref.isResizable,
     initialValues = _ref.values,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     i18n = _ref.i18n,
     isExpanded = _ref.isExpanded,
     timeRange = _ref.timeRange,
@@ -203,6 +205,9 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     testId = _ref.testId,
     defaultDateFormatPattern = _ref.defaultDateFormatPattern,
     others = _objectWithoutProperties(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
+  dayjs.locale(locale);
   // need to deep merge the nested content default props as default props only uses a shallow merge natively
   var contentWithDefaults = useMemo(function () {
     return _defaultsDeep({}, content, defaultProps.content);
@@ -232,8 +237,6 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     valuesProp = _handleCardVariables.values;
   var chartRef = useRef(null);
   var previousTick = useRef();
-  dayjs.locale(locale);
-
   // Workaround since downstream consumers might keep regenerating the series object and useMemo does a direct in-memory comparison for the object
   var objectAgnosticSeries = JSON.stringify(series);
   var objectAgnosticThresholds = JSON.stringify(thresholds);
@@ -313,7 +316,7 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
         });
         return {
           id: "dataindex-".concat(index),
-          values: _objectSpread(_objectSpread({}, _omit(value, timeDataSourceId)), {}, _defineProperty({}, timeDataSourceId, dayjs(value[timeDataSourceId]).format(defaultDateFormatPattern))),
+          values: _objectSpread(_objectSpread({}, _omit(value, timeDataSourceId)), {}, _defineProperty({}, timeDataSourceId, dayjs.tz(value[timeDataSourceId]).format(defaultDateFormatPattern))),
           isSelectable: false
         };
       });
@@ -467,6 +470,7 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     timeRange: timeRange
   }, others, {
     locale: locale,
+    timeZone: effectiveTimezone,
     isExpanded: isExpanded,
     isEditable: isEditable,
     isEmpty: isChartDataEmpty,
@@ -617,6 +621,13 @@ TimeSeriesCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "content": {
       "defaultValue": {
         "value": "{\n  series: [],\n  timeDataSourceId: 'timestamp',\n  includeZeroOnXaxis: false,\n  includeZeroOnYaxis: false,\n  showLegend: true,\n  legendPosition: 'bottom',\n  truncation: {\n    type: 'end_line',\n    threshold: 20,\n    numCharacter: 20,\n  },\n}",

package/es/components/TimeSeriesCard/timeSeriesUtils.js

@@ -139,7 +139,7 @@ var formatGraphTick = function formatGraphTick(timestamp, index, ticks, interval
   var previousTickTimestamp = arguments.length > 5 ? arguments[5] : undefined;
   var shouldDisplayGMT = arguments.length > 6 ? arguments[6] : undefined;
   dayjs.locale(locale);
-  var currentTimestamp = shouldDisplayGMT ? dayjs.utc(timestamp) : dayjs(timestamp);
+  var currentTimestamp = shouldDisplayGMT ? dayjs.utc(timestamp) : dayjs.tz(timestamp);
   var sameDay = dayjs(previousTickTimestamp).isSame(currentTimestamp, 'day');
   var sameMonth = dayjs(previousTickTimestamp).isSame(currentTimestamp, 'month');
   var sameYear = dayjs(previousTickTimestamp).isSame(currentTimestamp, 'year');
@@ -233,7 +233,7 @@ var formatChartData = function formatChartData() {
           // Check to see if the data Item actually exists in this timestamp before adding to data (to support sparse data in the values)
           if (!isNil(dataItem[dataSourceId])) {
             data.push({
-              date: dataItem[timeDataSourceId] instanceof Date ? dataItem[timeDataSourceId] : new Date(dataItem[timeDataSourceId]),
+              date: dayjs.tz(dataItem[timeDataSourceId]).toDate(),
               value: dataItem[dataSourceId],
               group: label,
               dataSourceId: dataSourceId

package/es/components/ValueCard/ValueCard.js

@@ -17,10 +17,11 @@ import { CardPropTypes, ValueContentPropTypes } from '../../constants/CardPropTy
 import { CARD_LAYOUTS, CARD_SIZES } from '../../constants/LayoutConstants.js';
 import Card from '../Card/Card.js';
 import { getUpdatedCardSize, getResizeHandles, handleCardVariables } from '../../utils/cardUtilityFunctions.js';
+import dayjs from '../../utils/dayjs.js';
 import { determineLayout, BASE_CLASS_NAME, DEFAULT_FONT_SIZE } from './valueCardUtils.js';
 import ValueContent from './ValueContent.js';
 
-var _excluded = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className", "shouldUseTranslatedLabels"];
+var _excluded = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "timeZone", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className", "shouldUseTranslatedLabels"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
@@ -41,6 +42,7 @@ var ValueCard = function ValueCard(_ref) {
     dataState = _ref.dataState,
     id = _ref.id,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     customFormatter = _ref.customFormatter,
     children = _ref.children,
     fontSize = _ref.fontSize,
@@ -51,6 +53,8 @@ var ValueCard = function ValueCard(_ref) {
     className = _ref.className,
     shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     others = _objectWithoutProperties(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
   var availableActions = _objectSpread({
     expand: false
   }, others.availableActions);
@@ -76,6 +80,7 @@ var ValueCard = function ValueCard(_ref) {
     i18n: i18n,
     shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     locale: locale,
+    timeZone: effectiveTimezone,
     id: id,
     className: classnames(className, _defineProperty(_defineProperty({}, "".concat(BASE_CLASS_NAME, "__horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), "".concat(BASE_CLASS_NAME, "__vertical"), layout === CARD_LAYOUTS.VERTICAL))
     // TODO: remove deprecated 'testID' in v3.

package/es/constants/CardPropTypes.js

@@ -746,6 +746,8 @@ var CardPropTypes = {
   testId: PropTypes.string,
   /** the locale of the card, needed for number and date formatting */
   locale: PropTypes.string,
+  /** IANA timezone string to set as default timezone for dayjs */
+  timeZone: PropTypes.string,
   /** a way to pass down dashboard grid resize handles, only used by other card types */
   resizeHandles: PropTypes.array,
   /** Optional callback function that is passed an onChange function and the original cardConfig object.

package/es/utils/cardUtilityFunctions.js

@@ -539,7 +539,7 @@ var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip,
   : dataOrHoveredElement;
   var timeStamp = Array.isArray(data) ? (_data$ = data[0]) === null || _data$ === void 0 || (_data$ = _data$.date) === null || _data$ === void 0 ? void 0 : _data$.getTime() : data === null || data === void 0 || (_data$date = data.date) === null || _data$date === void 0 ? void 0 : _data$date.getTime();
   var dateLabel = timeStamp ? "<li class='datapoint-tooltip'>\n        <p class='label'>".concat((showTimeInGMT // show timestamp in gmt or local time
-  ? dayjs.utc(timeStamp) : dayjs(timeStamp)).format(tooltipDateFormatPattern), "</p>\n      </li>") : '';
+  ? dayjs.utc(timeStamp) : dayjs.tz(timeStamp)).format(tooltipDateFormatPattern), "</p>\n      </li>") : '';
   var matchingAlertRanges = findMatchingAlertRange(alertRanges, data);
   var matchingAlertLabels = Array.isArray(matchingAlertRanges) ? matchingAlertRanges.map(function (matchingAlertRange) {
     return "<li class='datapoint-tooltip'><a style=\"background-color:".concat(matchingAlertRange.color, "\" class=\"tooltip-color\"></a><p class='label'>").concat(alertDetected, " ").concat(matchingAlertRange.details, "</p></li>");

package/es/utils/dayjs.js

@@ -1,5 +1,7 @@
+import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.string.trim.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import dayjs$2 from 'dayjs';
 
@@ -8,12 +10,14 @@ var utc = require('dayjs/plugin/utc');
 var pluralGetSet = require('dayjs/plugin/pluralGetSet');
 var timezone = require('dayjs/plugin/timezone');
 var localeData = require('dayjs/plugin/localeData');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
 var dayjs = dayjs$2;
 dayjs.extend(localizedFormat); // gives the 'L' formatting ability for .format
 dayjs.extend(utc); // gives .utc() and .local()
 dayjs.extend(pluralGetSet); // gives .hour .minute get/set ability
 dayjs.extend(timezone); // timezone support
 dayjs.extend(localeData); // gives local specific data
+dayjs.extend(customParseFormat);
 
 /* eslint-disable global-require */
 var locales = {
@@ -443,6 +447,22 @@ var DAYJS_INPUT_FORMATS = {
   SECONDS: 'L HH:mm:ss',
   RANGE: 'L HH:mm'
 };
+var formats = [
+// ISO Variations (Most common for APIs)
+'YYYY-MM-DDTHH:mm:ssZ', 'YYYY-MM-DDTHH:mm:ss.SSSZ', 'YYYY-MM-DDTHH:mm:ss', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm',
+// US / Common UI Variations
+'MM/DD/YYYY HH:mm:ss', 'MM/DD/YYYY HH:mm', 'MM-DD-YYYY HH:mm:ss', 'MM-DD-YYYY HH:mm',
+// 12-Hour Variations (If users can type AM/PM)
+'MM/DD/YYYY hh:mm A', 'YYYY-MM-DD hh:mm A',
+// Date Only Fallbacks
+'YYYY-MM-DD', 'MM/DD/YYYY', 'MM-DD-YYYY', 'L' // Localized format (uses the loaded Day.js locale)
+];
+var detectDateTimeFormat = function detectDateTimeFormat(dateTimeString) {
+  if (!(dateTimeString !== null && dateTimeString !== void 0 && dateTimeString.trim())) return null;
+  return formats.find(function (format) {
+    return dayjs(dateTimeString, format, true).isValid();
+  });
+};
 var dayjs$1 = dayjs;
 
-export { DAYJS_INPUT_FORMATS, dayjs$1 as default };
+export { DAYJS_INPUT_FORMATS, dayjs$1 as default, detectDateTimeFormat, formats };

package/lib/components/BarChartCard/BarChartCard.js

@@ -45,7 +45,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["title", "content", "children", "size", "values", "availableDimensions", "locale", "i18n", "isExpanded", "isLazyLoading", "isEditable", "isDashboardPreview", "isLoading", "isResizable", "interval", "className", "domainRange", "timeRange", "showTimeInGMT", "tooltipDateFormatPattern", "testID", "testId", "defaultDateFormatPattern"];
+var _excluded = ["title", "content", "children", "size", "values", "availableDimensions", "locale", "timeZone", "i18n", "isExpanded", "isLazyLoading", "isEditable", "isDashboardPreview", "isLoading", "isResizable", "interval", "className", "domainRange", "timeRange", "showTimeInGMT", "tooltipDateFormatPattern", "testID", "testId", "defaultDateFormatPattern"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix;
@@ -70,6 +70,7 @@ var defaultProps = {
     series: []
   },
   locale: 'en',
+  timeZone: undefined,
   showTimeInGMT: false,
   tooltipDateFormatPattern: dayjs.DAYJS_INPUT_FORMATS.SECONDS,
   values: null,
@@ -83,6 +84,7 @@ var BarChartCard = function BarChartCard(_ref) {
     initialValues = _ref.values,
     availableDimensions = _ref.availableDimensions,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     i18n = _ref.i18n,
     isExpanded = _ref.isExpanded,
     isLazyLoading = _ref.isLazyLoading,
@@ -100,6 +102,8 @@ var BarChartCard = function BarChartCard(_ref) {
     testId = _ref.testId,
     defaultDateFormatPattern = _ref.defaultDateFormatPattern,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
   // need to deep merge the nested content default props as default props only uses a shallow merge natively
   var contentWithDefaults = React.useMemo(function () {
     return defaultsDeep({}, content, defaultProps.content);
@@ -260,7 +264,7 @@ var BarChartCard = function BarChartCard(_ref) {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return barChartUtils.handleTooltip.apply(void 0, args.concat([timeDataSourceId, showTimeInGMT, tooltipDateFormatPattern, locale]));
+          return barChartUtils.handleTooltip.apply(void 0, args.concat([timeDataSourceId, showTimeInGMT, tooltipDateFormatPattern, locale, effectiveTimezone]));
         },
         groupLabel: mergedI18n.tooltipGroupLabel,
         totalLabel: mergedI18n.tooltipTotalLabel
@@ -279,7 +283,7 @@ var BarChartCard = function BarChartCard(_ref) {
         enabled: false
       }
     });
-  }, [xLabel, layout, unit, scaleType, type, timeDataSourceId, axes.bottomAxesMapsTo, axes.leftAxesMapsTo, domainRange, decimalPrecision, maxTicksPerSize, formatTick, yLabel, legendPosition, chartData.length, isEditable, truncation, colors, mergedI18n.tooltipGroupLabel, mergedI18n.tooltipTotalLabel, zoomBar, size, isExpanded, locale, showTimeInGMT, tooltipDateFormatPattern]);
+  }, [xLabel, layout, unit, scaleType, type, timeDataSourceId, axes.bottomAxesMapsTo, axes.leftAxesMapsTo, domainRange, decimalPrecision, maxTicksPerSize, formatTick, yLabel, legendPosition, chartData.length, isEditable, truncation, colors, mergedI18n.tooltipGroupLabel, mergedI18n.tooltipTotalLabel, zoomBar, size, isExpanded, locale, showTimeInGMT, tooltipDateFormatPattern, effectiveTimezone]);
   return /*#__PURE__*/React__default.default.createElement(Card.default, _extends__default.default({
     title: title,
     className: classnames__default.default(className, "".concat(iotPrefix, "--bar-chart-card")),
@@ -293,7 +297,8 @@ var BarChartCard = function BarChartCard(_ref) {
     isResizable: isResizable,
     resizeHandles: resizeHandles,
     timeRange: timeRange,
-    locale: locale
+    locale: locale,
+    timeZone: effectiveTimezone
     // TODO: remove deprecated testID in v3.
     ,
     testId: testID || testId
@@ -389,6 +394,13 @@ BarChartCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "showTimeInGMT": {
       "defaultValue": {
         "value": "false",

package/lib/components/BarChartCard/barChartUtils.js

@@ -266,8 +266,7 @@ var formatChartData = function formatChartData(seriesArg, values, categoryDataSo
                 // bar this data belongs to
                 value: value[dataset.dataSourceId]
               }, timeDataSourceId && type !== LayoutConstants.BAR_CHART_TYPES.GROUPED ? {
-                date: new Date(value[timeDataSourceId]),
-                // timestamp
+                date: dayjs.default.tz(value[timeDataSourceId]).toDate(),
                 key: value[timeDataSourceId]
               } : {
                 key: value[categoryDataSourceId]
@@ -312,14 +311,13 @@ var formatChartData = function formatChartData(seriesArg, values, categoryDataSo
         dataset.forEach(function (value) {
           // if value is null, don't add it to the formatted chartData
           if (!isNil(value[series[0].dataSourceId])) {
-            var dataDate = new Date(value[timeDataSourceId]);
             data.push({
               // Use the label if one exists
               group: series[0].label ? series[0].label : series[0].dataSourceId,
               // bar this data belongs to
               value: value[series[0].dataSourceId],
               // there should only be one series here because its a simple bar
-              date: dataDate // timestamp
+              date: dayjs.default.tz(value[timeDataSourceId]).toDate()
             });
           }
         });
@@ -440,10 +438,12 @@ var formatColors = function formatColors(series, datasetNames, isDashboardPrevie
  * @param {string} timeDatasourceId time-based attribute
  * @param {bool} showTimeInGMT
  * @param {string} tooltipDataFormatPattern
+ * @param {string} timezone
  */
 var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip, _datum, timeDataSourceId, showTimeInGMT) {
   var tooltipDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : dayjs.DAYJS_INPUT_FORMATS.SECONDS;
   var locale = arguments.length > 6 ? arguments[6] : undefined;
+  var timezone = arguments.length > 7 ? arguments[7] : undefined;
   dayjs.default.locale(locale);
   var data = dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle
   ? dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle
@@ -457,8 +457,7 @@ var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip,
   if (timeDataSourceId) {
     // generate the formatted label
     var timestamp = typedData === null || typedData === void 0 ? void 0 : typedData.date;
-    var dateLabel = timestamp ? "<li class='datapoint-tooltip'>\n            <p class='label'>\n              ".concat((showTimeInGMT // show timestamp in gmt or local time
-    ? dayjs.default.utc(timestamp) : dayjs.default(timestamp)).format(tooltipDateFormatPattern), "</p>\n          </li>") : '';
+    var dateLabel = timestamp ? "<li class='datapoint-tooltip'>\n            <p class='label'>\n              ".concat((showTimeInGMT ? dayjs.default.utc(timestamp) : dayjs.default(timestamp).tz(timezone)).format(tooltipDateFormatPattern), "</p>\n          </li>") : '';
     var _convertStringsToDOME3 = componentUtilityFunctions.convertStringsToDOMElement([dateLabel]),
       _convertStringsToDOME4 = _slicedToArray__default.default(_convertStringsToDOME3, 1),
       parsedDateLabel = _convertStringsToDOME4[0];
@@ -524,6 +523,8 @@ var generateTableColumns = function generateTableColumns(timeDataSourceId, categ
  * @param {string} type of chart i.e. simple, grouped, stacked
  * @param {Array<Object>} values values before they are formatted for charting
  * @param {Array<Object>} chartData values after they are formatted for charting
+ * @param {string} defaultDateFormatPattern date format pattern
+ * @param {string} timezone timezone to use for formatting dates
  */
 var formatTableData = function formatTableData(timeDataSourceId, categoryDataSourceId, type, values, chartData) {
   var defaultDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : dayjs.DAYJS_INPUT_FORMATS.SECONDS;
@@ -548,7 +549,7 @@ var formatTableData = function formatTableData(timeDataSourceId, categoryDataSou
         });
         tableData.push({
           id: "dataindex-".concat(index),
-          values: _objectSpread(_objectSpread({}, barTimeValue), {}, _defineProperty__default.default({}, timeDataSourceId, dayjs.default(timestamp).format(defaultDateFormatPattern))),
+          values: _objectSpread(_objectSpread({}, barTimeValue), {}, _defineProperty__default.default({}, timeDataSourceId, dayjs.default.tz(timestamp).format(defaultDateFormatPattern))),
           isSelectable: false
         });
       });

package/lib/components/Card/Card.js

@@ -51,7 +51,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var warning__default = /*#__PURE__*/_interopDefault(warning);
 
 var _excluded = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-  _excluded2 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "shouldUseTranslatedLabels"];
+  _excluded2 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "timeZone", "shouldUseTranslatedLabels"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var prefix = Settings.settings.prefix,
@@ -314,9 +314,11 @@ var Card = function Card(props) {
     type = props.type,
     data = props.data,
     content = props.content,
+    timeZone = props.timeZone,
     shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
     others = _objectWithoutProperties__default.default(props, _excluded2);
-
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
   // Get translated title if shouldUseTranslatedLabels is true
   var title = cardUtilityFunctions.getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
   var tooltip = cardUtilityFunctions.getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n);
@@ -354,12 +356,12 @@ var Card = function Card(props) {
       return subtitleProp;
     }
     if (mergedAvailableActions.range === 'full' || mergedAvailableActions.range === 'iconOnly') {
-      var _parseValue = dateTimePickerUtils.parseValue(timeRange, dateTimeMask, strings.toLabel),
+      var _parseValue = dateTimePickerUtils.parseValue(timeRange, dateTimeMask, strings.toLabel, true, effectiveTimezone),
         readableValue = _parseValue.readableValue;
       return readableValue;
     }
     return undefined;
-  }, [dateTimeMask, mergedAvailableActions.range, strings.toLabel, subtitleProp, timeRange]);
+  }, [dateTimeMask, mergedAvailableActions.range, strings.toLabel, subtitleProp, timeRange, effectiveTimezone]);
   var _useState = React.useState(getTheSubtitle),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     subtitle = _useState2[0],
@@ -417,6 +419,7 @@ var Card = function Card(props) {
     isExpanded: isExpanded,
     timeRange: timeRange,
     locale: others.locale,
+    timeZone: effectiveTimezone,
     timeRangeOptions: timeRangeOptions,
     onCardAction: cachedOnCardAction
     // TODO: remove deprecated testID prop in v3

package/lib/components/Card/CardToolbar.js

@@ -146,7 +146,8 @@ var CardToolbar = function CardToolbar(_ref) {
     dateTimeMask = _ref.dateTimeMask,
     extraActions = _ref.extraActions,
     renderDateDropdownInPortal = _ref.renderDateDropdownInPortal,
-    id = _ref.id;
+    id = _ref.id,
+    timeZone = _ref.timeZone;
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   var langDir = useLangDirection.useLangDirection();
   var overflowMenuPosition = React__default.default.useMemo(function () {
@@ -250,6 +251,7 @@ var CardToolbar = function CardToolbar(_ref) {
     i18n: mergedI18n,
     dateTimeMask: dateTimeMask,
     locale: locale,
+    timeZone: timeZone,
     hasIconOnly: true,
     presets: Object.entries(timeRangeOptions).reduce(function (acc, _ref2) {
       var _ref3 = _slicedToArray__default.default(_ref2, 2),

package/lib/components/DateTimePicker/DateTimePicker.js

@@ -38,7 +38,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["testId", "defaultValue", "dateTimeMask", "presets", "intervals", "relatives", "expanded", "disabled", "invalid", "showRelativeOption", "showCustomRangeLink", "hasTimeInput", "renderPresetTooltipText", "onCancel", "onApply", "i18n", "light", "locale", "style"];
+var _excluded = ["testId", "defaultValue", "dateTimeMask", "presets", "intervals", "relatives", "expanded", "disabled", "invalid", "showRelativeOption", "showCustomRangeLink", "hasTimeInput", "renderPresetTooltipText", "onCancel", "onApply", "i18n", "light", "locale", "timeZone", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix,
@@ -185,6 +185,8 @@ var propTypes = {
   light: PropTypes__default.default.bool,
   /** The language locale used to format the days of the week, months, and numbers. */
   locale: PropTypes__default.default.string,
+  /** IANA timezone string to interpret datetime values in (e.g., 'America/New_York') */
+  timeZone: PropTypes__default.default.string,
   /** Unique id of the component */
   id: PropTypes__default.default.string,
   style: PropTypes__default.default.objectOf(PropTypes__default.default.string)
@@ -260,6 +262,7 @@ var defaultProps = {
   },
   light: false,
   locale: 'en',
+  timeZone: undefined,
   id: undefined,
   style: {}
 };
@@ -282,10 +285,13 @@ var DateTimePicker = function DateTimePicker(_ref) {
     i18n = _ref.i18n,
     light = _ref.light,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     style = _ref.style,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
   var id = React.useRef(others.id || uuid.v4()).current;
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
   dayjs.default.locale(locale);
 
   // State
@@ -412,7 +418,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       value.kind = PICKER_KINDS.PRESET;
     }
     setCurrentValue(value);
-    var parsedValue = dateTimePickerUtils.parseValue(value, dateTimeMask, mergedI18n.toLabel);
+    var parsedValue = dateTimePickerUtils.parseValue(value, dateTimeMask, mergedI18n.toLabel, hasTimeInput, effectiveTimezone);
     setHumanValue(parsedValue.readableValue);
     return _objectSpread(_objectSpread({}, value), parsedValue);
   };
@@ -467,15 +473,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
         setIsCustomRange(true);
         setCustomRangeKind(PICKER_KINDS.ABSOLUTE);
         if (!absolute.hasOwnProperty('start')) {
-          absolute.start = dayjs.default("".concat(absolute.startDate, " ").concat(absolute.startTime)).valueOf();
+          var startDateTime = "".concat(absolute.startDate, " ").concat(absolute.startTime);
+          absolute.start = dayjs.default.tz(startDateTime, dayjs.detectDateTimeFormat(startDateTime), effectiveTimezone).valueOf();
         }
         if (!absolute.hasOwnProperty('end')) {
-          absolute.end = dayjs.default("".concat(absolute.endDate, " ").concat(absolute.endTime)).valueOf();
+          var endDateTime = "".concat(absolute.endDate, " ").concat(absolute.endTime);
+          absolute.end = dayjs.default.tz(endDateTime, dayjs.detectDateTimeFormat(endDateTime), effectiveTimezone).valueOf();
         }
-        absolute.startDate = dayjs.default(absolute.start).format('MM/DD/YYYY');
-        absolute.startTime = dayjs.default(absolute.start).format('HH:mm');
-        absolute.endDate = dayjs.default(absolute.end).format('MM/DD/YYYY');
-        absolute.endTime = dayjs.default(absolute.end).format('HH:mm');
+        absolute.startDate = dayjs.default.tz(absolute.start).format('MM/DD/YYYY');
+        absolute.startTime = dayjs.default.tz(absolute.start).format('HH:mm');
+        absolute.endDate = dayjs.default.tz(absolute.end).format('MM/DD/YYYY');
+        absolute.endTime = dayjs.default.tz(absolute.end).format('HH:mm');
         setAbsoluteValue(absolute);
       }
     } else {
@@ -564,7 +572,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     humanValue: humanValue
   });
   var disableRelativeApply = isCustomRange && customRangeKind === PICKER_KINDS.RELATIVE && (relativeLastNumberInvalid || relativeToTimeInvalid);
-  var disableAbsoluteApply = isCustomRange && customRangeKind === PICKER_KINDS.ABSOLUTE && (absoluteStartTimeInvalid || absoluteEndTimeInvalid || absoluteValue.startDate === '' && absoluteValue.endDate === '' || (hasTimeInput ? !absoluteValue.startTime || !absoluteValue.endTime : false));
+  var disableAbsoluteApply = isCustomRange && customRangeKind === PICKER_KINDS.ABSOLUTE && (absoluteStartTimeInvalid || absoluteEndTimeInvalid || !absoluteValue.startDate || !absoluteValue.endDate || (hasTimeInput ? !absoluteValue.startTime || !absoluteValue.endTime : false));
   var disableApply = disableRelativeApply || disableAbsoluteApply;
   React.useEffect(function () {
     return setInvalidState(invalid || disableApply);
@@ -1278,6 +1286,17 @@ DateTimePicker.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "description": "IANA timezone string to interpret datetime values in (e.g., 'America/New_York')",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "id": {
       "defaultValue": {
         "value": "undefined",