carbon-addons-iot-react 4.3.6 → 4.4.0

package/es/components/ValueCard/ValueCard.js

@@ -20,7 +20,7 @@ import { getUpdatedCardSize, getResizeHandles, handleCardVariables } from '../..
 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"];
+var _excluded = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "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; }
 
@@ -49,6 +49,7 @@ var ValueCard = function ValueCard(_ref) {
     testId = _ref.testId,
     onAttributeClick = _ref.onAttributeClick,
     className = _ref.className,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     others = _objectWithoutProperties(_ref, _excluded);
   var availableActions = _objectSpread({
     expand: false
@@ -73,6 +74,7 @@ var ValueCard = function ValueCard(_ref) {
     isResizable: isResizable,
     resizeHandles: resizeHandles,
     i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     locale: locale,
     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))
@@ -93,7 +95,9 @@ var ValueCard = function ValueCard(_ref) {
     values: values,
     isEditable: isEditable,
     fontSize: fontSize,
-    isNumberValueCompact: isNumberValueCompact
+    isNumberValueCompact: isNumberValueCompact,
+    i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels
   }, others)), resizeHandles);
 };
 ValueCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes), ValueContentPropTypes);
@@ -109,7 +113,8 @@ ValueCard.defaultProps = {
   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",
@@ -185,6 +190,13 @@ ValueCard.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/es/components/ValueCard/ValueContent.js

@@ -20,7 +20,7 @@ import DataStateRenderer from '../Card/DataStateRenderer.js';
 import { DEFAULT_FONT_SIZE, BASE_CLASS_NAME, determineValue } from './valueCardUtils.js';
 import Attribute from './Attribute.js';
 
-var _excluded = ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"];
+var _excluded = ["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(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 propTypes = _objectSpread({
@@ -28,7 +28,9 @@ var propTypes = _objectSpread({
   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 = {
   id: 'valueContent-id',
@@ -36,6 +38,7 @@ var defaultProps = {
   layout: 'VERTICAL',
   locale: 'en',
   isEditable: false,
+  shouldUseTranslatedLabels: false,
   dataState: null,
   values: null,
   fontSize: DEFAULT_FONT_SIZE,
@@ -54,6 +57,7 @@ var ValueContent = function ValueContent(_ref) {
     dataState = _ref.dataState,
     locale = _ref.locale,
     isEditable = _ref.isEditable,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     customFormatter = _ref.customFormatter,
     fontSize = _ref.fontSize,
     isNumberValueCompact = _ref.isNumberValueCompact,
@@ -73,6 +77,8 @@ var ValueContent = function ValueContent(_ref) {
       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(_objectSpread({}, attribute.secondaryValue), {}, {
@@ -160,6 +166,17 @@ ValueContent.__docgenInfo = {
       },
       "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",

package/es/constants/CardPropTypes.js

@@ -165,6 +165,8 @@ var TableCardPropTypes = {
     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

package/es/utils/cardUtilityFunctions.js

@@ -4,6 +4,7 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import mapValues from '../packages/react/node_modules/lodash-es/mapValues.js';
 import isNil from '../packages/react/node_modules/lodash-es/isNil.js';
+import isEmpty from '../packages/react/node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
@@ -573,4 +574,18 @@ var isTimeBasedCard = function isTimeBasedCard(card) {
   })) || ((_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);
 };
 
-export { chartValueFormatter, compareGrains, determineCardRange, determinePrecision, fetchDataURL, findMatchingAlertRange, findMatchingThresholds, formatNumberWithPrecision, getCardVariables, getResizeHandles, getUpdatedCardSize, getVariables, handleCardVariables, handleTooltip, increaseSmallCardSize, isTimeBasedCard, replaceVariables, useCardResizing };
+/**
+ * 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;
+};
+
+export { chartValueFormatter, compareGrains, determineCardRange, determinePrecision, fetchDataURL, findMatchingAlertRange, findMatchingThresholds, formatNumberWithPrecision, getCardVariables, getResizeHandles, getTranslatedLabel, getUpdatedCardSize, getVariables, handleCardVariables, handleTooltip, increaseSmallCardSize, isTimeBasedCard, replaceVariables, useCardResizing };

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"];
+  _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"];
 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,
@@ -267,7 +267,8 @@ var defaultProps = {
   overrides: undefined,
   type: null,
   data: null,
-  content: null
+  content: null,
+  shouldUseTranslatedLabels: false
 };
 
 /** Dumb component that renders the card basics */
@@ -275,7 +276,7 @@ var Card = function Card(props) {
   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;
@@ -289,7 +290,7 @@ var Card = function Card(props) {
     error = props.error,
     hideHeader = props.hideHeader,
     id = props.id,
-    tooltip = props.tooltip,
+    tooltipProp = props.tooltip,
     titleTextTooltip = props.titleTextTooltip,
     timeRange = props.timeRange,
     timeRangeOptions = props.timeRangeOptions,
@@ -313,8 +314,13 @@ var Card = function Card(props) {
     type = props.type,
     data = props.data,
     content = props.content,
+    shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
     others = _objectWithoutProperties__default.default(props, _excluded2);
 
+  // Get translated title if shouldUseTranslatedLabels is true
+  var title = cardUtilityFunctions.getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
+  var tooltip = cardUtilityFunctions.getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n);
+
   // TODO: remove once final version of range prop is supported
   React.useEffect(function () {
     if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
@@ -802,6 +808,13 @@ Card.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/lib/components/CardEditor/CardEditForm/CardEditForm.js

@@ -59,6 +59,8 @@ var propTypes = {
     modalHelpText: PropTypes__default.default.string,
     modalIconDescription: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   /** if provided, returns an array of strings which are the dataItems to be allowed
    * on each card
    * getValidDataItems(card, selectedTimeRange)
@@ -120,6 +122,7 @@ var defaultProps = {
     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: [],
@@ -141,6 +144,7 @@ var CardEditForm = function CardEditForm(_ref) {
     availableDimensions = _ref.availableDimensions,
     dataSeriesItemLinks = _ref.dataSeriesItemLinks,
     onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     actions = _ref.actions;
   var mergedI18n = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
@@ -157,6 +161,7 @@ var CardEditForm = function CardEditForm(_ref) {
     onChange: onChange,
     isSummaryDashboard: isSummaryDashboard,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataItems: dataItems,
     availableDimensions: availableDimensions,
     getValidDataItems: getValidDataItems,
@@ -304,6 +309,17 @@ CardEditForm.__docgenInfo = {
       },
       "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",

package/lib/components/CardEditor/CardEditForm/CardEditFormContent.js

@@ -89,6 +89,8 @@ var propTypes = {
     thisQuarterLabel: PropTypes__default.default.string,
     thisYearLabel: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   /** if provided, returns an array of strings which are the timeRanges to be allowed
    * on each card
    * getValidTimeRanges(card, selectedDataItems)
@@ -125,6 +127,7 @@ var propTypes = {
 var defaultProps = {
   cardConfig: {},
   i18n: {},
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   getValidTimeRanges: null,
   dataItems: [],
@@ -154,6 +157,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     isSummaryDashboard = _ref.isSummaryDashboard,
     onChange = _ref.onChange,
     i18n = _ref.i18n,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     dataItems = _ref.dataItems,
     getValidDataItems = _ref.getValidDataItems,
     getValidTimeRanges = _ref.getValidTimeRanges,
@@ -188,6 +192,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     ,
     onChange: onChange,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     getValidTimeRanges: getValidTimeRanges,
     currentBreakpoint: currentBreakpoint,
     selectedDataItems: selectedDataItems,
@@ -234,6 +239,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     getValidDataItems: getValidDataItems,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataSeriesItemLinks: dataSeriesItemLinks,
     translateWithId: handleTranslation,
     actions: actions
@@ -472,6 +478,17 @@ CardEditFormContent.__docgenInfo = {
       },
       "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",

package/lib/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.js

@@ -136,6 +136,8 @@ var propTypes = {
     primaryButtonLabelText: PropTypes__default.default.string,
     secondaryButtonLabelText: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   actions: editorUtils.DashboardEditorActionsPropTypes,
   /**
    * Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default
@@ -189,6 +191,7 @@ var defaultProps = {
     secondaryButtonLabelText: 'Cancel',
     decimalPlacesLabel: 'Decimal places'
   },
+  shouldUseTranslatedLabels: false,
   editDataSeries: [],
   showEditor: false,
   setShowEditor: null,
@@ -259,6 +262,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
     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,
@@ -415,7 +419,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
           label: evt.target.value
         }));
       },
-      value: editDataItem.label,
+      value: cardUtilityFunctions.getTranslatedLabel(editDataItem.label, shouldUseTranslatedLabels, i18n),
       helperText: mergedI18n.dataItemEditorDataItemHelperText(mergedI18n.dataItemSource, editDataItem.dataItemId)
     })), hasColorDropdown &&
     /*#__PURE__*/
@@ -560,7 +564,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       },
       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, 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, mergedI18n, selectedDimensionFilter, setEditDataItem, shouldUseTranslatedLabels, type]);
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, showEditor && /*#__PURE__*/React__default.default.createElement("div", {
     className: "".concat(baseClassName, "--modal-wrapper")
   }, /*#__PURE__*/React__default.default.createElement(ComposedModal.default, {
@@ -790,6 +794,17 @@ DataSeriesFormItemModal.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "editDataSeries": {
       "defaultValue": {
         "value": "[]",

package/lib/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.js

@@ -34,6 +34,7 @@ var DataSeriesFormItemModal = require('../DataSeriesFormItemModal.js');
 var LayoutConstants = require('../../../../../constants/LayoutConstants.js');
 var ContentFormItemTitle = require('../ContentFormItemTitle.js');
 var HierarchyDataFormItems = require('../HierarchyDataFormItems/HierarchyDataFormItems.js');
+var cardUtilityFunctions = require('../../../../../utils/cardUtilityFunctions.js');
 var BarChartDataSeriesContent = require('./BarChartDataSeriesContent.js');
 var iconsReact = require('@carbon/icons-react');
 
@@ -132,6 +133,8 @@ var propTypes = {
     incrementNumberText: PropTypes__default.default.string,
     decrementNumberText: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   translateWithId: PropTypes__default.default.func.isRequired,
   actions: editorUtils.DashboardEditorActionsPropTypes
 };
@@ -165,6 +168,7 @@ var defaultProps = {
     incrementNumberText: 'Increment number',
     decrementNumberText: 'Decrement number'
   },
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   dataItems: [],
   selectedDataItems: [],
@@ -252,6 +256,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
     selectedTimeRange = _ref2.selectedTimeRange,
     availableDimensions = _ref2.availableDimensions,
     i18n = _ref2.i18n,
+    shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
     dataSeriesItemLinks = _ref2.dataSeriesItemLinks,
     translateWithId = _ref2.translateWithId,
     actions = _ref2.actions;
@@ -397,7 +402,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
       return {
         id: dataItem.dataSourceId,
         content: {
-          value: dataItem.label || dataItem.dataItemId,
+          value: cardUtilityFunctions.getTranslatedLabel(dataItem.label || dataItem.dataItemId, shouldUseTranslatedLabels, i18n),
           icon: cardConfig.type === LayoutConstants.CARD_TYPES.TIMESERIES || cardConfig.type === LayoutConstants.CARD_TYPES.BAR ? /*#__PURE__*/React__default.default.createElement("div", {
             className: "".concat(baseClassName, "--data-item-list--item-color-icon"),
             style: {
@@ -434,7 +439,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
         }
       };
     })) || [];
-  }, [cardConfig.type, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]);
+  }, [cardConfig.type, handleEditButton, handleRemoveButton, i18n, mergedI18n.edit, mergedI18n.remove, shouldUseTranslatedLabels]);
   var dataItemListItems = React.useMemo(function () {
     return generateListItems(dataSection);
   }, [dataSection, generateListItems]);
@@ -455,6 +460,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
     dataSection: dataSection,
     onChange: _onChange,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     actions: actions,
     options: {
       hasColorDropdown: type === LayoutConstants.CARD_TYPES.TIMESERIES || type === LayoutConstants.CARD_TYPES.BAR,
@@ -776,6 +782,17 @@ DataSeriesFormItem.__docgenInfo = {
       },
       "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",

package/lib/components/CardEditor/CardEditForm/CommonCardEditFormFields.js

@@ -21,6 +21,7 @@ var react = require('@carbon/react');
 var LayoutConstants = require('../../../constants/LayoutConstants.js');
 var Settings = require('../../../constants/Settings.js');
 var editorUtils = require('../../DashboardEditor/editorUtils.js');
+var cardUtilityFunctions = require('../../../utils/cardUtilityFunctions.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -85,6 +86,8 @@ var propTypes = {
     thisQuarterLabel: PropTypes__default.default.string,
     thisYearLabel: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   /** if provided, returns an array of strings which are the timeRanges to be allowed
    * on each card
    * getValidTimeRanges(card, selectedDataItems)
@@ -118,6 +121,7 @@ var defaultProps = {
     thisQuarterLabel: 'This quarter',
     thisYearLabel: 'This year'
   },
+  shouldUseTranslatedLabels: false,
   selectedDataItems: [],
   getValidTimeRanges: null,
   currentBreakpoint: 'xl',
@@ -141,6 +145,7 @@ var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
   var cardConfig = _ref.cardConfig,
     _onChange = _ref.onChange,
     i18n = _ref.i18n,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     getValidTimeRanges = _ref.getValidTimeRanges,
     currentBreakpoint = _ref.currentBreakpoint,
     selectedDataItems = _ref.selectedDataItems,
@@ -171,7 +176,7 @@ var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
         title: evt.target.value
       }));
     },
-    value: title
+    value: cardUtilityFunctions.getTranslatedLabel(title, shouldUseTranslatedLabels, mergedI18n)
   })), /*#__PURE__*/React__default.default.createElement("div", {
     className: "".concat(baseClassName, "--input")
   }, /*#__PURE__*/React__default.default.createElement(react.TextArea, {
@@ -464,6 +469,17 @@ CommonCardEditFormFields.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "selectedDataItems": {
       "defaultValue": {
         "value": "[]",

package/lib/components/CardEditor/CardEditor.js

@@ -149,6 +149,8 @@ var propTypes = {
     searchPlaceHolderText: PropTypes__default.default.string,
     editDataItems: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   currentBreakpoint: PropTypes__default.default.string,
   isSummaryDashboard: PropTypes__default.default.bool,
   /** Id that can be used for testing */
@@ -182,6 +184,7 @@ var defaultProps = {
     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,
@@ -327,6 +330,7 @@ var CardEditor = function CardEditor(_ref) {
     onRenderCardEditForm = _ref.onRenderCardEditForm,
     icons = _ref.icons,
     i18n = _ref.i18n,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     currentBreakpoint = _ref.currentBreakpoint,
     testId = _ref.testId,
     dataSeriesItemLinks = _ref.dataSeriesItemLinks,
@@ -392,6 +396,7 @@ var CardEditor = function CardEditor(_ref) {
     getValidTimeRanges: getValidTimeRanges,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -557,6 +562,17 @@ CardEditor.__docgenInfo = {
       },
       "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",

package/lib/components/DashboardEditor/DashboardEditor.js

@@ -29,6 +29,7 @@ var LayoutConstants = require('../../constants/LayoutConstants.js');
 var DashboardGrid = require('../Dashboard/DashboardGrid.js');
 var CardEditor = require('../CardEditor/CardEditor.js');
 var ImageGalleryModal = require('../ImageGalleryModal/ImageGalleryModal.js');
+var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var DashboardEditorHeader = require('./DashboardEditorHeader/DashboardEditorHeader.js');
 var DashboardEditorCardRenderer = require('./DashboardEditorCardRenderer.js');
 var editorUtils = require('./editorUtils.js');
@@ -306,6 +307,8 @@ var propTypes = {
     abbreviateNumbersTooltip: PropTypes__default.default.string,
     editDataItems: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   /** locale data */
   locale: PropTypes__default.default.string,
   /** optional link href's for each card type that will appear in a tooltip */
@@ -396,6 +399,7 @@ var defaultProps = {
     saveTitleButton: 'Save title',
     editDataItems: 'Edit data items'
   },
+  shouldUseTranslatedLabels: false,
   locale: 'en',
   dataSeriesItemLinks: null,
   onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -465,6 +469,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     isSummaryDashboard = _ref.isSummaryDashboard,
     isLoading = _ref.isLoading,
     i18n = _ref.i18n,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     locale = _ref.locale,
     dataSeriesItemLinks = _ref.dataSeriesItemLinks,
     isTitleEditable = _ref.isTitleEditable,
@@ -721,7 +726,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     className: classnames__default.default("".concat(baseClassName, "--content"), _defineProperty__default.default({}, "".concat(baseClassName, "__overflow"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index)),
     ref: scrollContainerRef
   }, renderHeader ? renderHeader() : /*#__PURE__*/React__default.default.createElement(DashboardEditorHeader, {
-    title: (dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title) || title,
+    title: cardUtilityFunctions.getTranslatedLabel(dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title, shouldUseTranslatedLabels, i18n) || title,
     breadcrumbs: headerBreadcrumbs,
     onImport: onImport,
     onExport: function onExport() {
@@ -805,6 +810,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
       key: cardConfig.id,
       isResizable: isCardResizable,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       isSelected: isSelected,
       availableDimensions: availableDimensions,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -849,6 +855,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     getValidDimensions: getValidDimensions,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -1771,6 +1778,17 @@ DashboardEditor.__docgenInfo = {
       },
       "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'",