carbon-addons-iot-react 4.3.6 → 4.4.0

package/umd/carbon-addons-iot-react.js

@@ -280806,6 +280806,8 @@ React keys must be passed directly to JSX without using spread:
       defaultFilterStringPlaceholdText: PropTypes.string,
       downloadIconDescription: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     cardVariables: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number, PropTypes.bool])),
     /** default date format pattern that follows the dayjs formatting patterns */
     defaultDateFormatPattern: PropTypes.string
@@ -284150,6 +284152,20 @@ React keys must be passed directly to JSX without using spread:
     })) || ((_card$content2 = card.content) === null || _card$content2 === void 0 ? void 0 : _card$content2.type) === BAR_CHART_TYPES.SIMPLE && ((_card$content3 = card.content) === null || _card$content3 === void 0 ? void 0 : _card$content3.timeDataSourceId) || ((_card$content4 = card.content) === null || _card$content4 === void 0 ? void 0 : _card$content4.type) === BAR_CHART_TYPES.STACKED && ((_card$content5 = card.content) === null || _card$content5 === void 0 ? void 0 : _card$content5.timeDataSourceId);
   };
 
+  /**
+   * Get translated label or title from i18n object, fallback to original if not found
+   * @param {string} label - The label or title key to translate
+   * @param {boolean} shouldUseTranslatedLabels - Flag to determine if translation should be used
+   * @param {Object} i18n - The i18n object containing translations
+   * @returns {string} - The translated label or original label if translation not found
+   */
+  var getTranslatedLabel = function getTranslatedLabel(label, shouldUseTranslatedLabels, i18n) {
+    if (!isEmpty(label) && shouldUseTranslatedLabels && i18n && i18n[label]) {
+      return i18n[label];
+    }
+    return label;
+  };
+
   var REPLACE = wellKnownSymbol('replace');
   var $TypeError = TypeError;
   var indexOf = functionUncurryThis(''.indexOf);
@@ -285454,7 +285470,7 @@ React keys must be passed directly to JSX without using spread:
   };
 
   var _excluded$F = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-    _excluded2$4 = ["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"];
+    _excluded2$4 = ["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"];
   function ownKeys$1p(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$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var prefix$l = settings.prefix,
@@ -285670,7 +285686,8 @@ React keys must be passed directly to JSX without using spread:
     overrides: undefined,
     type: null,
     data: null,
-    content: null
+    content: null,
+    shouldUseTranslatedLabels: false
   };
 
   /** Dumb component that renders the card basics */
@@ -285678,7 +285695,7 @@ React keys must be passed directly to JSX without using spread:
     var _overrides$errorMessa, _overrides$errorMessa2, _overrides$errorMessa3;
     var size = props.size,
       children = props.children,
-      title = props.title,
+      titleProp = props.title,
       subtitleProp = props.subtitle,
       hasTitleWrap = props.hasTitleWrap;
       props.layout;
@@ -285692,7 +285709,7 @@ React keys must be passed directly to JSX without using spread:
       error = props.error,
       hideHeader = props.hideHeader,
       id = props.id,
-      tooltip = props.tooltip,
+      tooltipProp = props.tooltip,
       titleTextTooltip = props.titleTextTooltip,
       timeRange = props.timeRange,
       timeRangeOptions = props.timeRangeOptions,
@@ -285716,8 +285733,13 @@ React keys must be passed directly to JSX without using spread:
       type = props.type,
       data = props.data,
       content = props.content,
+      shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
       others = _objectWithoutProperties$3(props, _excluded2$4);
 
+    // Get translated title if shouldUseTranslatedLabels is true
+    var title = getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
+    var tooltip = getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n);
+
     // TODO: remove once final version of range prop is supported
     React$1.useEffect(function () {
       if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
@@ -286205,6 +286227,13 @@ React keys must be passed directly to JSX without using spread:
           "computed": false
         },
         "required": false
+      },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "required": false
       }
     },
     "composes": ["../../constants/CardPropTypes"]
@@ -312923,6 +312952,9 @@ React keys must be passed directly to JSX without using spread:
     isEditable: PropTypes.bool,
     layout: PropTypes.oneOf(Object.values(CARD_LAYOUTS)),
     locale: PropTypes.string,
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
+    i18n: PropTypes.objectOf(PropTypes.any),
     renderIconByName: PropTypes.func,
     /** Optional trend information */
     secondaryValue: PropTypes.shape({
@@ -312950,6 +312982,8 @@ React keys must be passed directly to JSX without using spread:
     locale: 'en',
     customFormatter: null,
     isEditable: false,
+    shouldUseTranslatedLabels: false,
+    i18n: {},
     testId: 'attribute',
     onValueClick: null
   };
@@ -312973,6 +313007,8 @@ React keys must be passed directly to JSX without using spread:
       isEditable = _ref.isEditable,
       layout = _ref.layout,
       locale = _ref.locale,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+      i18n = _ref.i18n,
       renderIconByName = _ref.renderIconByName,
       secondaryValue = _ref.secondaryValue,
       value = _ref.value,
@@ -312991,6 +313027,9 @@ React keys must be passed directly to JSX without using spread:
 
     // need to reduce the width size to fit multiple attributes when card layout is horizontal
     var attributeWidthPercentage = layout === CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100;
+
+    // Get translated label if shouldUseTranslatedLabels is true
+    var displayLabel = getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
     return /*#__PURE__*/React$1.createElement("div", {
       className: classnames("".concat(BEM_BASE, "-wrapper"), _defineProperty$c(_defineProperty$c({}, "".concat(BEM_BASE, "-wrapper--vertical"), layout === CARD_LAYOUTS.VERTICAL), "".concat(BEM_BASE, "-wrapper--horizontal"), layout === CARD_LAYOUTS.HORIZONTAL)),
       style: {
@@ -313010,10 +313049,10 @@ React keys must be passed directly to JSX without using spread:
     }) : null, tooltip ? /*#__PURE__*/React$1.createElement(Tooltip, {
       direction: "right",
       showIcon: false,
-      triggerText: label
+      triggerText: displayLabel
     }, /*#__PURE__*/React$1.createElement("p", null, tooltip)) : /*#__PURE__*/React$1.createElement("span", {
       "data-testid": "".concat(testId, "-threshold-label")
-    }, label)), /*#__PURE__*/React$1.createElement("div", {
+    }, displayLabel)), /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(BEM_BASE)
     }, /*#__PURE__*/React$1.createElement(ValueRenderer$1, {
       value: value,
@@ -313189,6 +313228,31 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
+      "i18n": {
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        },
+        "description": "",
+        "type": {
+          "name": "objectOf",
+          "value": {
+            "name": "any"
+          }
+        },
+        "required": false
+      },
       "testId": {
         "defaultValue": {
           "value": "'attribute'",
@@ -313315,7 +313379,7 @@ React keys must be passed directly to JSX without using spread:
   };
   var Attribute$1 = Attribute;
 
-  var _excluded$q = ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"];
+  var _excluded$q = ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "shouldUseTranslatedLabels", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"];
   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$Y(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$c(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 propTypes$15 = _objectSpread$Y({
@@ -313323,7 +313387,9 @@ React keys must be passed directly to JSX without using spread:
     title: PropTypes.string,
     layout: PropTypes.oneOf(['HORIZONTAL', 'VERTICAL']),
     locale: PropTypes.string,
-    isEditable: PropTypes.bool
+    isEditable: PropTypes.bool,
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool
   }, ValueContentPropTypes);
   var defaultProps$18 = {
     id: 'valueContent-id',
@@ -313331,6 +313397,7 @@ React keys must be passed directly to JSX without using spread:
     layout: 'VERTICAL',
     locale: 'en',
     isEditable: false,
+    shouldUseTranslatedLabels: false,
     dataState: null,
     values: null,
     fontSize: DEFAULT_FONT_SIZE,
@@ -313349,6 +313416,7 @@ React keys must be passed directly to JSX without using spread:
       dataState = _ref.dataState,
       locale = _ref.locale,
       isEditable = _ref.isEditable,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       customFormatter = _ref.customFormatter,
       fontSize = _ref.fontSize,
       isNumberValueCompact = _ref.isNumberValueCompact,
@@ -313368,6 +313436,8 @@ React keys must be passed directly to JSX without using spread:
         locale: locale,
         isEditable: isEditable,
         title: title,
+        shouldUseTranslatedLabels: shouldUseTranslatedLabels,
+        i18n: others.i18n,
         renderIconByName: others.renderIconByName,
         value: determineValue(attribute.dataSourceId, values, attribute.dataFilter),
         secondaryValue: attribute.secondaryValue && _objectSpread$Y(_objectSpread$Y({}, attribute.secondaryValue), {}, {
@@ -313455,6 +313525,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "dataState": {
         "defaultValue": {
           "value": "null",
@@ -313516,7 +313597,7 @@ React keys must be passed directly to JSX without using spread:
   };
   var ValueContent$1 = ValueContent;
 
-  var _excluded$p = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className"];
+  var _excluded$p = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className", "shouldUseTranslatedLabels"];
   function ownKeys$Z(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$X(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Z(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
@@ -313545,6 +313626,7 @@ React keys must be passed directly to JSX without using spread:
       testId = _ref.testId,
       onAttributeClick = _ref.onAttributeClick,
       className = _ref.className,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       others = _objectWithoutProperties$3(_ref, _excluded$p);
     var availableActions = _objectSpread$X({
       expand: false
@@ -313569,6 +313651,7 @@ React keys must be passed directly to JSX without using spread:
       isResizable: isResizable,
       resizeHandles: resizeHandles,
       i18n: i18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       locale: locale,
       id: id,
       className: classnames(className, _defineProperty$c(_defineProperty$c({}, "".concat(BASE_CLASS_NAME$2, "__horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), "".concat(BASE_CLASS_NAME$2, "__vertical"), layout === CARD_LAYOUTS.VERTICAL))
@@ -313589,7 +313672,9 @@ React keys must be passed directly to JSX without using spread:
       values: values,
       isEditable: isEditable,
       fontSize: fontSize,
-      isNumberValueCompact: isNumberValueCompact
+      isNumberValueCompact: isNumberValueCompact,
+      i18n: i18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels
     }, others)), resizeHandles);
   };
   ValueCard.propTypes = _objectSpread$X(_objectSpread$X({}, CardPropTypes), ValueContentPropTypes);
@@ -313605,7 +313690,8 @@ React keys must be passed directly to JSX without using spread:
     isNumberValueCompact: false,
     // TODO: fix this default in V3, so that cards are unique not inherited from the base Card
     testId: 'Card',
-    onAttributeClick: null
+    onAttributeClick: null,
+    shouldUseTranslatedLabels: false
   };
   ValueCard.__docgenInfo = {
     "description": "This components responsibilities include:\nRendering the attribute groups\nDetermining the layout\ndetermines the data to render",
@@ -313681,6 +313767,13 @@ React keys must be passed directly to JSX without using spread:
           "computed": false
         },
         "required": false
+      },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "required": false
       }
     },
     "composes": ["../../constants/CardPropTypes"]
@@ -326709,6 +326802,8 @@ React keys must be passed directly to JSX without using spread:
       thisQuarterLabel: PropTypes.string,
       thisYearLabel: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** if provided, returns an array of strings which are the timeRanges to be allowed
      * on each card
      * getValidTimeRanges(card, selectedDataItems)
@@ -326742,6 +326837,7 @@ React keys must be passed directly to JSX without using spread:
       thisQuarterLabel: 'This quarter',
       thisYearLabel: 'This year'
     },
+    shouldUseTranslatedLabels: false,
     selectedDataItems: [],
     getValidTimeRanges: null,
     currentBreakpoint: 'xl',
@@ -326765,6 +326861,7 @@ React keys must be passed directly to JSX without using spread:
     var cardConfig = _ref.cardConfig,
       _onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       getValidTimeRanges = _ref.getValidTimeRanges,
       currentBreakpoint = _ref.currentBreakpoint,
       selectedDataItems = _ref.selectedDataItems,
@@ -326795,7 +326892,7 @@ React keys must be passed directly to JSX without using spread:
           title: evt.target.value
         }));
       },
-      value: title
+      value: getTranslatedLabel(title, shouldUseTranslatedLabels, mergedI18n)
     })), /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(baseClassName, "--input")
     }, /*#__PURE__*/React$1.createElement(react.TextArea, {
@@ -327088,6 +327185,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "selectedDataItems": {
         "defaultValue": {
           "value": "[]",
@@ -328370,6 +328478,8 @@ React keys must be passed directly to JSX without using spread:
       primaryButtonLabelText: PropTypes.string,
       secondaryButtonLabelText: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     actions: DashboardEditorActionsPropTypes,
     /**
      * Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default
@@ -328423,6 +328533,7 @@ React keys must be passed directly to JSX without using spread:
       secondaryButtonLabelText: 'Cancel',
       decimalPlacesLabel: 'Decimal places'
     },
+    shouldUseTranslatedLabels: false,
     editDataSeries: [],
     showEditor: false,
     setShowEditor: null,
@@ -328493,6 +328604,7 @@ React keys must be passed directly to JSX without using spread:
       availableDimensions = _ref.availableDimensions,
       onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       isLarge = _ref.isLarge,
       _ref$actions$dataSeri = _ref.actions.dataSeriesFormActions,
       hasAggregationsDropDown = _ref$actions$dataSeri.hasAggregationsDropDown,
@@ -328649,7 +328761,7 @@ React keys must be passed directly to JSX without using spread:
             label: evt.target.value
           }));
         },
-        value: editDataItem.label,
+        value: getTranslatedLabel(editDataItem.label, shouldUseTranslatedLabels, i18n),
         helperText: mergedI18n.dataItemEditorDataItemHelperText(mergedI18n.dataItemSource, editDataItem.dataItemId)
       })), hasColorDropdown &&
       /*#__PURE__*/
@@ -328794,7 +328906,7 @@ React keys must be passed directly to JSX without using spread:
         },
         columnType: editDataItem.columnType || editDataItem.type
       }));
-    }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, type]);
+    }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, i18n, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, shouldUseTranslatedLabels, type]);
     return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, showEditor && /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(baseClassName, "--modal-wrapper")
     }, /*#__PURE__*/React$1.createElement(ComposedModal$1, {
@@ -329024,6 +329136,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "editDataSeries": {
         "defaultValue": {
           "value": "[]",
@@ -329981,6 +330104,8 @@ React keys must be passed directly to JSX without using spread:
       incrementNumberText: PropTypes.string,
       decrementNumberText: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     translateWithId: PropTypes.func.isRequired,
     actions: DashboardEditorActionsPropTypes
   };
@@ -330014,6 +330139,7 @@ React keys must be passed directly to JSX without using spread:
       incrementNumberText: 'Increment number',
       decrementNumberText: 'Decrement number'
     },
+    shouldUseTranslatedLabels: false,
     getValidDataItems: null,
     dataItems: [],
     selectedDataItems: [],
@@ -330101,6 +330227,7 @@ React keys must be passed directly to JSX without using spread:
       selectedTimeRange = _ref2.selectedTimeRange,
       availableDimensions = _ref2.availableDimensions,
       i18n = _ref2.i18n,
+      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
       dataSeriesItemLinks = _ref2.dataSeriesItemLinks,
       translateWithId = _ref2.translateWithId,
       actions = _ref2.actions;
@@ -330246,7 +330373,7 @@ React keys must be passed directly to JSX without using spread:
         return {
           id: dataItem.dataSourceId,
           content: {
-            value: dataItem.label || dataItem.dataItemId,
+            value: getTranslatedLabel(dataItem.label || dataItem.dataItemId, shouldUseTranslatedLabels, i18n),
             icon: cardConfig.type === CARD_TYPES.TIMESERIES || cardConfig.type === CARD_TYPES.BAR ? /*#__PURE__*/React$1.createElement("div", {
               className: "".concat(baseClassName$3, "--data-item-list--item-color-icon"),
               style: {
@@ -330283,7 +330410,7 @@ React keys must be passed directly to JSX without using spread:
           }
         };
       })) || [];
-    }, [cardConfig.type, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]);
+    }, [cardConfig.type, handleEditButton, handleRemoveButton, i18n, mergedI18n.edit, mergedI18n.remove, shouldUseTranslatedLabels]);
     var dataItemListItems = React$1.useMemo(function () {
       return generateListItems(dataSection);
     }, [dataSection, generateListItems]);
@@ -330304,6 +330431,7 @@ React keys must be passed directly to JSX without using spread:
       dataSection: dataSection,
       onChange: _onChange,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       actions: actions,
       options: {
         hasColorDropdown: type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR,
@@ -330625,6 +330753,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDataItems": {
         "defaultValue": {
           "value": "null",
@@ -336086,6 +336225,8 @@ React keys must be passed directly to JSX without using spread:
       thisQuarterLabel: PropTypes.string,
       thisYearLabel: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** if provided, returns an array of strings which are the timeRanges to be allowed
      * on each card
      * getValidTimeRanges(card, selectedDataItems)
@@ -336122,6 +336263,7 @@ React keys must be passed directly to JSX without using spread:
   var defaultProps$G = {
     cardConfig: {},
     i18n: {},
+    shouldUseTranslatedLabels: false,
     getValidDataItems: null,
     getValidTimeRanges: null,
     dataItems: [],
@@ -336151,6 +336293,7 @@ React keys must be passed directly to JSX without using spread:
       isSummaryDashboard = _ref.isSummaryDashboard,
       onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       dataItems = _ref.dataItems,
       getValidDataItems = _ref.getValidDataItems,
       getValidTimeRanges = _ref.getValidTimeRanges,
@@ -336185,6 +336328,7 @@ React keys must be passed directly to JSX without using spread:
       ,
       onChange: onChange,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       getValidTimeRanges: getValidTimeRanges,
       currentBreakpoint: currentBreakpoint,
       selectedDataItems: selectedDataItems,
@@ -336231,6 +336375,7 @@ React keys must be passed directly to JSX without using spread:
       getValidDataItems: getValidDataItems,
       availableDimensions: availableDimensions,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       dataSeriesItemLinks: dataSeriesItemLinks,
       translateWithId: handleTranslation,
       actions: actions
@@ -336469,6 +336614,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDataItems": {
         "defaultValue": {
           "value": "null",
@@ -338460,6 +338616,8 @@ React keys must be passed directly to JSX without using spread:
       modalHelpText: PropTypes.string,
       modalIconDescription: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** if provided, returns an array of strings which are the dataItems to be allowed
      * on each card
      * getValidDataItems(card, selectedTimeRange)
@@ -338521,6 +338679,7 @@ React keys must be passed directly to JSX without using spread:
       modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
       modalIconDescription: 'Close'
     },
+    shouldUseTranslatedLabels: false,
     getValidDataItems: null,
     getValidTimeRanges: null,
     dataItems: [],
@@ -338542,6 +338701,7 @@ React keys must be passed directly to JSX without using spread:
       availableDimensions = _ref.availableDimensions,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       actions = _ref.actions;
     var mergedI18n = React$1.useMemo(function () {
       return _objectSpread$p(_objectSpread$p({}, defaultProps$z.i18n), i18n);
@@ -338558,6 +338718,7 @@ React keys must be passed directly to JSX without using spread:
       onChange: onChange,
       isSummaryDashboard: isSummaryDashboard,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       dataItems: dataItems,
       availableDimensions: availableDimensions,
       getValidDataItems: getValidDataItems,
@@ -338705,6 +338866,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDataItems": {
         "defaultValue": {
           "value": "null",
@@ -338948,6 +339120,8 @@ React keys must be passed directly to JSX without using spread:
       searchPlaceHolderText: PropTypes.string,
       editDataItems: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     currentBreakpoint: PropTypes.string,
     isSummaryDashboard: PropTypes.bool,
     /** Id that can be used for testing */
@@ -338981,6 +339155,7 @@ React keys must be passed directly to JSX without using spread:
       modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
       modalIconDescription: 'Close'
     },
+    shouldUseTranslatedLabels: false,
     getValidDimensions: null,
     getValidDataItems: null,
     getValidTimeRanges: null,
@@ -339126,6 +339301,7 @@ React keys must be passed directly to JSX without using spread:
       onRenderCardEditForm = _ref.onRenderCardEditForm,
       icons = _ref.icons,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       currentBreakpoint = _ref.currentBreakpoint,
       testId = _ref.testId,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
@@ -339191,6 +339367,7 @@ React keys must be passed directly to JSX without using spread:
       getValidTimeRanges: getValidTimeRanges,
       availableDimensions: availableDimensions,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       currentBreakpoint: currentBreakpoint,
       dataSeriesItemLinks: dataSeriesItemLinks,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -339356,6 +339533,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDimensions": {
         "defaultValue": {
           "value": "null",
@@ -340279,7 +340467,7 @@ React keys must be passed directly to JSX without using spread:
   var DashboardEditorDefaultCardRenderer$1 = DashboardEditorDefaultCardRenderer;
 
   var _excluded$c = ["style", "children"],
-    _excluded2 = ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style"];
+    _excluded2 = ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style", "shouldUseTranslatedLabels"];
   function ownKeys$m(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$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
@@ -340351,6 +340539,7 @@ React keys must be passed directly to JSX without using spread:
       baseClassName = _ref2.baseClassName,
       renderCardPreview = _ref2.renderCardPreview,
       style = _ref2.style,
+      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
       cardConfig = _objectWithoutProperties$3(_ref2, _excluded2);
     // We have to keep track of our dynamic hotspots here
     var _useState5 = React$1.useState([]),
@@ -340384,6 +340573,7 @@ React keys must be passed directly to JSX without using spread:
         key: cardConfig.id,
         tooltip: cardConfig.description,
         i18n: i18n,
+        shouldUseTranslatedLabels: shouldUseTranslatedLabels,
         availableActions: availableActions,
         onCardAction: handleOnCardAction,
         renderIconByName: renderIconByName,
@@ -340396,7 +340586,7 @@ React keys must be passed directly to JSX without using spread:
         onBrowseClick: cardConfig.type === CARD_TYPES.IMAGE && isNil((_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.src) ? onShowImageGallery : undefined,
         validateUploadedImage: cardConfig.type === CARD_TYPES.IMAGE ? onValidateUploadedImage : undefined
       });
-    }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, style]);
+    }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, shouldUseTranslatedLabels, style]);
     React$1.useEffect(function () {
       var _cardProps$values;
       var originalDynamicHotspot = (_cardProps$values = cardProps.values) === null || _cardProps$values === void 0 || (_cardProps$values = _cardProps$values.hotspots) === null || _cardProps$values === void 0 ? void 0 : _cardProps$values.find(function (hotspot) {
@@ -340714,6 +340904,8 @@ React keys must be passed directly to JSX without using spread:
       abbreviateNumbersTooltip: PropTypes.string,
       editDataItems: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** locale data */
     locale: PropTypes.string,
     /** optional link href's for each card type that will appear in a tooltip */
@@ -340804,6 +340996,7 @@ React keys must be passed directly to JSX without using spread:
       saveTitleButton: 'Save title',
       editDataItems: 'Edit data items'
     },
+    shouldUseTranslatedLabels: false,
     locale: 'en',
     dataSeriesItemLinks: null,
     onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -340873,6 +341066,7 @@ React keys must be passed directly to JSX without using spread:
       isSummaryDashboard = _ref.isSummaryDashboard,
       isLoading = _ref.isLoading,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       locale = _ref.locale,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       isTitleEditable = _ref.isTitleEditable,
@@ -341129,7 +341323,7 @@ React keys must be passed directly to JSX without using spread:
       className: classnames("".concat(baseClassName$1, "--content"), _defineProperty$c({}, "".concat(baseClassName$1, "__overflow"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index)),
       ref: scrollContainerRef
     }, renderHeader ? renderHeader() : /*#__PURE__*/React$1.createElement(DashboardEditorHeader$1, {
-      title: (dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title) || title,
+      title: getTranslatedLabel(dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title, shouldUseTranslatedLabels, i18n) || title,
       breadcrumbs: headerBreadcrumbs,
       onImport: onImport,
       onExport: function onExport() {
@@ -341213,6 +341407,7 @@ React keys must be passed directly to JSX without using spread:
         key: cardConfig.id,
         isResizable: isCardResizable,
         i18n: mergedI18n,
+        shouldUseTranslatedLabels: shouldUseTranslatedLabels,
         isSelected: isSelected,
         availableDimensions: availableDimensions,
         onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -341257,6 +341452,7 @@ React keys must be passed directly to JSX without using spread:
       getValidDimensions: getValidDimensions,
       availableDimensions: availableDimensions,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       currentBreakpoint: currentBreakpoint,
       dataSeriesItemLinks: dataSeriesItemLinks,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -342179,6 +342375,17 @@ React keys must be passed directly to JSX without using spread:
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "locale": {
         "defaultValue": {
           "value": "'en'",