carbon-addons-iot-react 2.149.0-next.32 → 2.149.0-next.35

package/es/components/Card/DataStateRenderer.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { ErrorFilled24, WarningFilled24 } from '@carbon/icons-react';
 import { Tooltip } from '../Tooltip/index.js';
 import { settings } from '../../constants/Settings.js';
-import { ValueCardPropTypes, CardPropTypes } from '../../constants/CardPropTypes.js';
+import { ValueContentPropTypes, CardPropTypes } from '../../constants/CardPropTypes.js';
 import { CARD_CONTENT_PADDING, CARD_SIZES, CARD_DATA_STATE } from '../../constants/LayoutConstants.js';
 
 var iotPrefix = settings.iotPrefix;
@@ -26,7 +26,7 @@ var TooltipContent = function TooltipContent(_ref) {
   }, label), /*#__PURE__*/React__default.createElement("p", null, description), extraTooltipText && /*#__PURE__*/React__default.createElement("p", null, extraTooltipText), learnMoreElement);
 };
 TooltipContent.propTypes = {
-  tooltipContent: ValueCardPropTypes.dataState.isRequired
+  tooltipContent: ValueContentPropTypes.dataState.isRequired
 };
 
 var DataStateRenderer = function DataStateRenderer(_ref2) {
@@ -96,7 +96,7 @@ var DataStateRenderer = function DataStateRenderer(_ref2) {
 DataStateRenderer.propTypes = {
   size: CardPropTypes.size,
   id: CardPropTypes.id,
-  dataState: ValueCardPropTypes.dataState.isRequired
+  dataState: ValueContentPropTypes.dataState.isRequired
 };
 DataStateRenderer.defaultProps = {
   size: CARD_SIZES.MEDIUM,
@@ -134,7 +134,7 @@ DataStateRenderer.__docgenInfo = {
     "dataState": {
       "type": {
         "name": "custom",
-        "raw": "ValueCardPropTypes.dataState.isRequired"
+        "raw": "ValueContentPropTypes.dataState.isRequired"
       },
       "required": false,
       "description": ""
@@ -149,7 +149,7 @@ TooltipContent.__docgenInfo = {
     "tooltipContent": {
       "type": {
         "name": "custom",
-        "raw": "ValueCardPropTypes.dataState.isRequired"
+        "raw": "ValueContentPropTypes.dataState.isRequired"
       },
       "required": false,
       "description": ""

package/es/components/ReadOnlyValue/ReadOnlyValue.js

@@ -0,0 +1,109 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { settings } from '../../constants/Settings.js';
+
+var iotPrefix = settings.iotPrefix;
+var propTypes = {
+  type: PropTypes.oneOf(['stacked', 'inline', 'inline_small']),
+  label: PropTypes.string,
+  value: PropTypes.string,
+  testId: PropTypes.string
+};
+var defaultProps = {
+  type: 'stacked',
+  label: '',
+  value: '',
+  testId: 'read-only-value'
+};
+
+var ReadOnlyValue = function ReadOnlyValue(_ref) {
+  var _classnames;
+
+  var type = _ref.type,
+      label = _ref.label,
+      value = _ref.value,
+      className = _ref.className,
+      testId = _ref.testId;
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": testId,
+    className: classnames(className, "".concat(iotPrefix, "--read-only-value"), (_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--read-only-value__inline"), type === 'inline' || type === 'inline_small'), _defineProperty(_classnames, "".concat(iotPrefix, "--read-only-value__inline_small"), type === 'inline_small'), _classnames))
+  }, /*#__PURE__*/React__default.createElement("label", {
+    "data-testid": "".concat(testId, "--label"),
+    htmlFor: "readonly-".concat(label)
+  }, label, /*#__PURE__*/React__default.createElement("textarea", {
+    "data-testid": "".concat(testId, "--value"),
+    type: "text",
+    id: "readonly-".concat(label),
+    name: value,
+    value: value,
+    readOnly: true
+  })));
+};
+
+ReadOnlyValue.propTypes = propTypes;
+ReadOnlyValue.defaultProps = defaultProps;
+ReadOnlyValue.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ReadOnlyValue",
+  "props": {
+    "type": {
+      "defaultValue": {
+        "value": "'stacked'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'stacked'",
+          "computed": false
+        }, {
+          "value": "'inline'",
+          "computed": false
+        }, {
+          "value": "'inline_small'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "label": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "testId": {
+      "defaultValue": {
+        "value": "'read-only-value'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+export default ReadOnlyValue;

package/es/components/ValueCard/Attribute.js

@@ -13,12 +13,14 @@ import useMatchingThreshold from '../../hooks/useMatchingThreshold.js';
 import ValueRenderer from './ValueRenderer.js';
 import UnitRenderer from './UnitRenderer.js';
 import { BASE_CLASS_NAME } from './valueCardUtils.js';
+import { Link } from 'carbon-components-react';
 
 var propTypes = {
   attribute: PropTypes.shape({
     label: PropTypes.string,
     unit: PropTypes.string,
     dataSourceId: PropTypes.string,
+    measurementUnitLabel: PropTypes.string,
     // decimal precision
     precision: PropTypes.number,
     thresholds: PropTypes.arrayOf(PropTypes.shape({
@@ -38,7 +40,9 @@ var propTypes = {
   secondaryValue: PropTypes.shape({
     color: PropTypes.string,
     trend: PropTypes.oneOf(['up', 'down']),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
+    href: PropTypes.string,
+    onClick: PropTypes.func
   }),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
   fontSize: PropTypes.number.isRequired,
@@ -79,6 +83,7 @@ var Attribute = function Attribute(_ref) {
       thresholds = _ref$attribute.thresholds,
       precision = _ref$attribute.precision,
       dataSourceId = _ref$attribute.dataSourceId,
+      measurementUnitLabel = _ref$attribute.measurementUnitLabel,
       attributeCount = _ref.attributeCount,
       customFormatter = _ref.customFormatter,
       isEditable = _ref.isEditable,
@@ -131,6 +136,7 @@ var Attribute = function Attribute(_ref) {
     isNumberValueCompact: isNumberValueCompact,
     testId: "".concat(testId, "-value"),
     dataSourceId: dataSourceId,
+    measurementUnitLabel: measurementUnitLabel,
     onClick: onValueClick
   }), /*#__PURE__*/React__default.createElement(UnitRenderer, {
     unit: unit,
@@ -141,7 +147,7 @@ var Attribute = function Attribute(_ref) {
     style: {
       '--secondary-value-color': gray60
     }
-  }, secondaryValue.trend && secondaryValue.trend === 'up' ? /*#__PURE__*/React__default.createElement(CaretUp16, {
+  }, secondaryValue.trend === 'up' ? /*#__PURE__*/React__default.createElement(CaretUp16, {
     className: "".concat(BEM_BASE, "_trend-icon"),
     "aria-label": "trending up",
     "data-testid": "".concat(testId, "-trending-up"),
@@ -151,7 +157,18 @@ var Attribute = function Attribute(_ref) {
     "aria-label": "trending down",
     "data-testid": "".concat(testId, "-trending-down"),
     fill: secondaryValue.color || gray60
-  }) : null, secondaryValue.value) : null));
+  }) : null, secondaryValue.href || secondaryValue.onClick ? /*#__PURE__*/React__default.createElement(Link, {
+    "data-testid": "".concat(testId, "-secondary-value--link"),
+    className: "".concat(BEM_BASE, "-secondary-value--link"),
+    href: secondaryValue === null || secondaryValue === void 0 ? void 0 : secondaryValue.href,
+    rel: "noopener noreferrer",
+    onClick: function onClick() {
+      return secondaryValue === null || secondaryValue === void 0 ? void 0 : secondaryValue.onClick({
+        dataSourceId: dataSourceId,
+        secondaryValue: secondaryValue
+      });
+    }
+  }, secondaryValue.value) : secondaryValue.value) : null));
 };
 
 Attribute.propTypes = propTypes;
@@ -236,6 +253,14 @@ Attribute.__docgenInfo = {
               "name": "number"
             }],
             "required": false
+          },
+          "href": {
+            "name": "string",
+            "required": false
+          },
+          "onClick": {
+            "name": "func",
+            "required": false
           }
         }
       },
@@ -313,6 +338,10 @@ Attribute.__docgenInfo = {
             "name": "string",
             "required": false
           },
+          "measurementUnitLabel": {
+            "name": "string",
+            "required": false
+          },
           "precision": {
             "name": "number",
             "required": false

package/es/components/ValueCard/ValueCard.js

@@ -1,9 +1,3 @@
-import 'core-js/modules/es.object.keys.js';
-import 'core-js/modules/es.symbol.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.object.get-own-property-descriptor.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -11,17 +5,20 @@ import isEmpty from '../../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.get-own-property-descriptor.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import React__default from 'react';
 import classnames from 'classnames';
-import { CardPropTypes, ValueCardPropTypes } from '../../constants/CardPropTypes.js';
+import { CardPropTypes, ValueContentPropTypes } from '../../constants/CardPropTypes.js';
 import { CARD_LAYOUTS, CARD_SIZES } from '../../constants/LayoutConstants.js';
 import Card from '../Card/Card.js';
 import { getUpdatedCardSize, getResizeHandles, handleCardVariables } from '../../utils/cardUtilityFunctions.js';
-import DataStateRenderer from '../Card/DataStateRenderer.js';
-import { BASE_CLASS_NAME, PREVIEW_DATA, determineValue, DEFAULT_FONT_SIZE, determineLayout } from './valueCardUtils.js';
-import Attribute from './Attribute.js';
+import { BASE_CLASS_NAME, DEFAULT_FONT_SIZE, determineLayout } from './valueCardUtils.js';
+import ValueContent from './ValueContent.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -70,7 +67,6 @@ var ValueCard = function ValueCard(_ref) {
       values = _handleCardVariables.values;
 
   var layout = determineLayout(newSize);
-  var attributeCount = content.attributes.length;
   return /*#__PURE__*/React__default.createElement(Card, _extends({
     title: title,
     size: newSize,
@@ -85,41 +81,25 @@ var ValueCard = function ValueCard(_ref) {
     className: classnames((_classnames = {}, _defineProperty(_classnames, "".concat(BASE_CLASS_NAME, "__horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), _defineProperty(_classnames, "".concat(BASE_CLASS_NAME, "__vertical"), layout === CARD_LAYOUTS.VERTICAL), _classnames)) // TODO: remove deprecated 'testID' in v3.
     ,
     testId: testID || testId
-  }, others), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("".concat(BASE_CLASS_NAME, "__content-wrapper"), _defineProperty({}, "".concat(BASE_CLASS_NAME, "__content-wrapper--vertical"), layout === CARD_LAYOUTS.VERTICAL))
-  }, !dataState ? content.attributes.map(function (attribute, index) {
-    return /*#__PURE__*/React__default.createElement(Attribute, {
-      key: "fragment-".concat(attribute.dataSourceId, "-").concat(JSON.stringify(attribute.dataFilter || {})),
-      attribute: attribute,
-      attributeCount: attributeCount,
-      layout: layout,
-      locale: locale,
-      isEditable: isEditable,
-      title: title,
-      renderIconByName: others.renderIconByName,
-      value: // When the card is in the editable state, we will show a preview
-      isEditable ? PREVIEW_DATA : determineValue(attribute.dataSourceId, values, attribute.dataFilter),
-      secondaryValue: attribute.secondaryValue && _objectSpread(_objectSpread({}, attribute.secondaryValue), {}, {
-        // When the card is in the editable state, we will show a preview
-        value: isEditable ? PREVIEW_DATA : determineValue(attribute.secondaryValue.dataSourceId, values)
-      }),
-      customFormatter: customFormatter,
-      fontSize: fontSize,
-      isNumberValueCompact: isNumberValueCompact // TODO: remove deprecated 'testID' in v3.
-      ,
-      testId: "".concat(testID || testId, "-attribute-").concat(index),
-      onValueClick: onAttributeClick
-    });
-  }) : /*#__PURE__*/React__default.createElement(DataStateRenderer, {
+  }, others), /*#__PURE__*/React__default.createElement(ValueContent, _extends({
+    id: id,
+    layout: layout,
     dataState: dataState,
+    content: content,
+    locale: locale,
+    title: title,
+    customFormatter: customFormatter,
+    testId: testID || testId,
+    onAttributeClick: onAttributeClick,
     size: newSize,
-    id: id // TODO: remove deprecated 'testID' in v3.
-    ,
-    testId: "".concat(testID || testId, "-data-state")
-  })), resizeHandles);
+    values: values,
+    isEditable: isEditable,
+    fontSize: fontSize,
+    isNumberValueCompact: isNumberValueCompact
+  }, others)), resizeHandles);
 };
 
-ValueCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes), ValueCardPropTypes);
+ValueCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes), ValueContentPropTypes);
 ValueCard.defaultProps = {
   size: CARD_SIZES.MEDIUM,
   locale: 'en',

package/es/components/ValueCard/ValueContent.js

@@ -0,0 +1,230 @@
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.get-own-property-descriptor.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.get-own-property-descriptors.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.concat.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CARD_LAYOUTS, CARD_SIZES } from '../../constants/LayoutConstants.js';
+import { ValueContentPropTypes } from '../../constants/CardPropTypes.js';
+import DataStateRenderer from '../Card/DataStateRenderer.js';
+import { BASE_CLASS_NAME, PREVIEW_DATA, determineValue, DEFAULT_FONT_SIZE } from './valueCardUtils.js';
+import Attribute from './Attribute.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var propTypes = _objectSpread({
+  id: PropTypes.string,
+  title: PropTypes.string,
+  layout: PropTypes.oneOf(['HORIZONTAL', 'VERTICAL']),
+  locale: PropTypes.string,
+  isEditable: PropTypes.bool
+}, ValueContentPropTypes);
+
+var defaultProps = {
+  id: 'valueContent-id',
+  title: '',
+  layout: 'VERTICAL',
+  locale: 'en',
+  isEditable: false,
+  dataState: null,
+  values: null,
+  fontSize: DEFAULT_FONT_SIZE,
+  customFormatter: null,
+  isNumberValueCompact: false,
+  testId: 'ValueContent',
+  onAttributeClick: null,
+  size: CARD_SIZES.MEDIUM
+};
+
+var ValueContent = function ValueContent(_ref) {
+  var id = _ref.id,
+      title = _ref.title,
+      content = _ref.content,
+      values = _ref.values,
+      layout = _ref.layout,
+      dataState = _ref.dataState,
+      locale = _ref.locale,
+      isEditable = _ref.isEditable,
+      customFormatter = _ref.customFormatter,
+      fontSize = _ref.fontSize,
+      isNumberValueCompact = _ref.isNumberValueCompact,
+      testId = _ref.testId,
+      onAttributeClick = _ref.onAttributeClick,
+      size = _ref.size,
+      others = _objectWithoutProperties(_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
+
+  var attributeCount = content.attributes.length;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames("".concat(BASE_CLASS_NAME, "__content-wrapper"), _defineProperty({}, "".concat(BASE_CLASS_NAME, "__content-wrapper--vertical"), layout === CARD_LAYOUTS.VERTICAL))
+  }, !dataState ? content.attributes.map(function (attribute, index) {
+    return /*#__PURE__*/React__default.createElement(Attribute, {
+      key: "fragment-".concat(attribute.dataSourceId, "-").concat(JSON.stringify(attribute.dataFilter || {})),
+      attribute: attribute,
+      attributeCount: attributeCount,
+      layout: layout,
+      locale: locale,
+      isEditable: isEditable,
+      title: title,
+      renderIconByName: others.renderIconByName,
+      value: // When the card is in the editable state, we will show a preview
+      isEditable ? PREVIEW_DATA : determineValue(attribute.dataSourceId, values, attribute.dataFilter),
+      secondaryValue: attribute.secondaryValue && _objectSpread(_objectSpread({}, attribute.secondaryValue), {}, {
+        // When the card is in the editable state, we will show a preview
+        value: isEditable ? PREVIEW_DATA : determineValue(attribute.secondaryValue.dataSourceId, values)
+      }),
+      customFormatter: customFormatter,
+      fontSize: fontSize,
+      isNumberValueCompact: isNumberValueCompact,
+      testId: "".concat(testId, "-attribute-").concat(index),
+      onValueClick: onAttributeClick
+    });
+  }) : /*#__PURE__*/React__default.createElement(DataStateRenderer, {
+    dataState: dataState,
+    size: size,
+    id: id,
+    testId: "".concat(testId, "-data-state")
+  }));
+};
+
+ValueContent.propTypes = propTypes;
+ValueContent.defaultProps = defaultProps;
+ValueContent.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ValueContent",
+  "props": {
+    "id": {
+      "defaultValue": {
+        "value": "'valueContent-id'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "title": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "layout": {
+      "defaultValue": {
+        "value": "'VERTICAL'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'HORIZONTAL'",
+          "computed": false
+        }, {
+          "value": "'VERTICAL'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "locale": {
+      "defaultValue": {
+        "value": "'en'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isEditable": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "dataState": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "values": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "fontSize": {
+      "defaultValue": {
+        "value": "DEFAULT_FONT_SIZE",
+        "computed": true
+      },
+      "required": false
+    },
+    "customFormatter": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "isNumberValueCompact": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
+    },
+    "testId": {
+      "defaultValue": {
+        "value": "'ValueContent'",
+        "computed": false
+      },
+      "required": false
+    },
+    "onAttributeClick": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "size": {
+      "defaultValue": {
+        "value": "CARD_SIZES.MEDIUM",
+        "computed": true
+      },
+      "required": false
+    }
+  },
+  "composes": ["../../constants/CardPropTypes"]
+};
+
+export default ValueContent;

package/es/components/ValueCard/ValueRenderer.js

@@ -29,7 +29,8 @@ var propTypes = {
 
   /** callback to trigger further action when clicking the value */
   onClick: PropTypes.func,
-  dataSourceId: PropTypes.string.isRequired
+  dataSourceId: PropTypes.string.isRequired,
+  measurementUnitLabel: PropTypes.string
 };
 var defaultProps = {
   layout: CARD_LAYOUTS.HORIZONTAL,
@@ -38,7 +39,8 @@ var defaultProps = {
   locale: 'en',
   customFormatter: null,
   testId: 'value',
-  onClick: null
+  onClick: null,
+  measurementUnitLabel: null
 };
 /**
  * This components job is determining how to render different kinds of card values.
@@ -57,7 +59,8 @@ var ValueRenderer = function ValueRenderer(_ref) {
       isNumberValueCompact = _ref.isNumberValueCompact,
       testId = _ref.testId,
       _onClick = _ref.onClick,
-      dataSourceId = _ref.dataSourceId;
+      dataSourceId = _ref.dataSourceId,
+      measurementUnitLabel = _ref.measurementUnitLabel;
   var renderValue = value;
 
   if (typeof value === 'boolean') {
@@ -82,7 +85,7 @@ var ValueRenderer = function ValueRenderer(_ref) {
       // otherwise, trucate the first line
       '--value-renderer-max-lines': fontSize < 20 ? 2 : 1
     },
-    title: renderValue
+    title: measurementUnitLabel ? /*#__PURE__*/React__default.createElement("div", null, renderValue, " ", measurementUnitLabel) : renderValue
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(BASE_CLASS_NAME, "__value-renderer--wrapper")
@@ -94,7 +97,11 @@ var ValueRenderer = function ValueRenderer(_ref) {
       });
     },
     kind: "ghost"
-  }), renderValue) : /*#__PURE__*/React__default.createElement("span", commonProps, renderValue));
+  }), measurementUnitLabel ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderValue, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(BASE_CLASS_NAME, "__value-renderer--value--measurement-unit")
+  }, measurementUnitLabel)) : renderValue) : /*#__PURE__*/React__default.createElement("span", commonProps, measurementUnitLabel ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderValue, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(BASE_CLASS_NAME, "__value-renderer--value--measurement-unit")
+  }, measurementUnitLabel)) : renderValue));
 };
 
 ValueRenderer.propTypes = propTypes;
@@ -183,6 +190,17 @@ ValueRenderer.__docgenInfo = {
       "required": false,
       "description": "callback to trigger further action when clicking the value"
     },
+    "measurementUnitLabel": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "value": {
       "type": {
         "name": "any"

package/es/constants/CardPropTypes.js

@@ -57,7 +57,7 @@ var DashboardColumnsPropTypes = PropTypes.shape({
   sm: PropTypes.number,
   xs: PropTypes.number
 });
-var ValueCardPropTypes = {
+var ValueContentPropTypes = {
   content: PropTypes.shape({
     attributes: PropTypes.arrayOf(AttributePropTypes).isRequired
   }),
@@ -826,4 +826,4 @@ var CardPropTypes = {
   })
 };
 
-export { AttributePropTypes, BarChartCardPropTypes, CHART_COLORS, CardDimensionPropTypes, CardDimensionsPropTypes, CardPropTypes, CardSizesToDimensionsPropTypes, ComboChartPropTypes, DATE_PICKER_OPTIONS, DashboardBreakpointsPropTypes, DashboardColumnsPropTypes, DashboardLayoutPropTypes, GaugeCardPropTypes, ImageCardPropTypes, ImageCardValuesPropType, MapCardPropTypes, MapControlPropType, PieCardPropTypes, RowHeightPropTypes, TableCardPropTypes, TimeRangeOptionsPropTypes, TruncationPropTypes, ValueCardPropTypes, ZoomBarPropTypes };
+export { AttributePropTypes, BarChartCardPropTypes, CHART_COLORS, CardDimensionPropTypes, CardDimensionsPropTypes, CardPropTypes, CardSizesToDimensionsPropTypes, ComboChartPropTypes, DATE_PICKER_OPTIONS, DashboardBreakpointsPropTypes, DashboardColumnsPropTypes, DashboardLayoutPropTypes, GaugeCardPropTypes, ImageCardPropTypes, ImageCardValuesPropType, MapCardPropTypes, MapControlPropType, PieCardPropTypes, RowHeightPropTypes, TableCardPropTypes, TimeRangeOptionsPropTypes, TruncationPropTypes, ValueContentPropTypes, ZoomBarPropTypes };