carbon-addons-iot-react 2.149.0-next.8 → 2.149.1-next.0

package/es/components/Card/CardTypeContent.js

@@ -0,0 +1,162 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import defaultsDeep from '../../node_modules/lodash-es/defaultsDeep.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CARD_TYPES } from '../../constants/LayoutConstants.js';
+import { MeterChartPropTypes, SparklineChartPropTypes } from '../../constants/ChartPropTypes.js';
+import { settings } from '../../constants/Settings.js';
+import { getChartOptions } from '../../utils/cardTypeUtilityFunctions.js';
+import { MeterChart, AreaChart, StackedAreaChart } from '@carbon/charts-react';
+
+var iotPrefix = settings.iotPrefix;
+var propTypes = {
+  testId: PropTypes.string,
+  isExpanded: PropTypes.bool,
+  type: PropTypes.oneOf([CARD_TYPES.METER_CHART, CARD_TYPES.SPARKLINE_CHART, CARD_TYPES.STACKED_AREA_CHART]).isRequired,
+  data: PropTypes.oneOf([MeterChartPropTypes.data, SparklineChartPropTypes.data]),
+  content: PropTypes.oneOf([MeterChartPropTypes.content, SparklineChartPropTypes.content])
+};
+var defaultProps = {
+  testId: 'cart-type-content',
+  isExpanded: false,
+  data: [],
+  content: null
+};
+
+var CardTypeContent = function CardTypeContent(_ref) {
+  var _listRef$current2, _content$listContent, _contentWithDefaults$;
+
+  var testId = _ref.testId,
+      isExpanded = _ref.isExpanded,
+      type = _ref.type,
+      data = _ref.data,
+      content = _ref.content;
+  var listRef = useRef(null);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      listHeight = _useState2[0],
+      setListHeight = _useState2[1];
+
+  var contentWithDefaults = useMemo(function () {
+    return defaultsDeep({}, content, defaultProps.content);
+  }, [content]);
+  var options = getChartOptions(type, data.length > 1, contentWithDefaults);
+  useEffect(function () {
+    var _listRef$current;
+
+    setListHeight((_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.clientHeight);
+  }, [(_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.clientHeight]);
+  var Chart = type === CARD_TYPES.METER_CHART ? MeterChart : type === CARD_TYPES.SPARKLINE_CHART ? AreaChart : type === CARD_TYPES.STACKED_AREA_CHART ? StackedAreaChart : null;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames("".concat(iotPrefix, "--").concat(type.replaceAll('_', '-').toLowerCase(), "--wrapper"), _defineProperty({}, "".concat(iotPrefix, "--").concat(type.replaceAll('_', '-').toLowerCase(), "--wrapper__expanded"), isExpanded)),
+    style: {
+      '--card-list-height': ((_content$listContent = content.listContent) === null || _content$listContent === void 0 ? void 0 : _content$listContent.length) > 0 ? "".concat(listHeight, "px") : '0px'
+    }
+  }, /*#__PURE__*/React__default.createElement(Chart, {
+    data: data,
+    options: options
+  }), ((_contentWithDefaults$ = contentWithDefaults.listContent) === null || _contentWithDefaults$ === void 0 ? void 0 : _contentWithDefaults$.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    ref: listRef,
+    "data-testid": "".concat(testId, "-list")
+  }, contentWithDefaults.listContent.map(function (_ref2) {
+    var label = _ref2.label,
+        value = _ref2.value;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(iotPrefix, "--").concat(type.replace('_', '-').toLowerCase(), "--wrapper--list")
+    }, /*#__PURE__*/React__default.createElement("p", null, label), /*#__PURE__*/React__default.createElement("span", null, value));
+  })) : null);
+};
+
+CardTypeContent.propTypes = propTypes;
+CardTypeContent.defaultProps = defaultProps;
+CardTypeContent.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "CardTypeContent",
+  "props": {
+    "testId": {
+      "defaultValue": {
+        "value": "'cart-type-content'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isExpanded": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "data": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "MeterChartPropTypes.data",
+          "computed": true
+        }, {
+          "value": "SparklineChartPropTypes.data",
+          "computed": true
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "content": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "MeterChartPropTypes.content",
+          "computed": true
+        }, {
+          "value": "SparklineChartPropTypes.content",
+          "computed": true
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "type": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "CARD_TYPES.METER_CHART",
+          "computed": true
+        }, {
+          "value": "CARD_TYPES.SPARKLINE_CHART",
+          "computed": true
+        }, {
+          "value": "CARD_TYPES.STACKED_AREA_CHART",
+          "computed": true
+        }]
+      },
+      "required": true,
+      "description": ""
+    }
+  }
+};
+
+export default CardTypeContent;

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/CardEditor/CardEditForm/CardEditForm.js

@@ -7,9 +7,9 @@ import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _typeof from '@babel/runtime/helpers/typeof';
-import pick from '../../../packages/react/node_modules/lodash-es/pick.js';
-import omit from '../../../packages/react/node_modules/lodash-es/omit.js';
-import isEmpty from '../../../packages/react/node_modules/lodash-es/isEmpty.js';
+import pick from '../../../node_modules/lodash-es/pick.js';
+import omit from '../../../node_modules/lodash-es/omit.js';
+import isEmpty from '../../../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.iterator.js';
@@ -190,19 +190,19 @@ var hideCardPropertiesForEditor = function hideCardPropertiesForEditor(card) {
 
   if ((_card$content = card.content) !== null && _card$content !== void 0 && _card$content.attributes) {
     attributes = card.content.attributes.map(function (attribute) {
-      return omit(attribute, ['aggregationMethods', 'grain']);
+      return omit(attribute, ['aggregationMethods', 'grain', 'downSampleMethods']);
     });
   }
 
   if ((_card$content2 = card.content) !== null && _card$content2 !== void 0 && _card$content2.series) {
     series = card.content.series.map(function (attribute) {
-      return omit(attribute, ['aggregationMethods', 'grain']);
+      return omit(attribute, ['aggregationMethods', 'grain', 'downSampleMethods']);
     });
   }
 
   if ((_card$content3 = card.content) !== null && _card$content3 !== void 0 && _card$content3.columns) {
     columns = card.content.columns.map(function (column) {
-      return omit(column, ['aggregationMethods', 'grain']);
+      return omit(column, ['aggregationMethods', 'grain', 'downSampleMethods']);
     });
   } // Need to exclued content for custom cards because the card's JSX element lives on it in this case
 

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

@@ -5,8 +5,8 @@ import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import omit from '../../../../packages/react/node_modules/lodash-es/omit.js';
-import isEmpty from '../../../../packages/react/node_modules/lodash-es/isEmpty.js';
+import omit from '../../../../node_modules/lodash-es/omit.js';
+import isEmpty from '../../../../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.object.keys.js';
@@ -67,11 +67,17 @@ var propTypes = {
     dataSourceId: PropTypes.string,
     dataFilter: PropTypes.objectOf(PropTypes.string),
     type: PropTypes.string,
+    hasStreamingMetricEnabled: PropTypes.bool,
     aggregationMethods: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.string,
       text: PropTypes.string
     })),
     aggregationMethod: PropTypes.string,
+    downSampleMethods: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string,
+      text: PropTypes.string
+    })),
+    downSampleMethod: PropTypes.string,
     grain: PropTypes.string,
     label: PropTypes.string,
     dataItemId: PropTypes.string,
@@ -157,13 +163,16 @@ var defaultProps = {
     dataItemSource: 'Data item source',
     primaryButtonLabelText: 'Save',
     secondaryButtonLabelText: 'Cancel',
-    decimalPlaces: 'Decimal places'
+    decimalPlaces: 'Decimal places',
+    downSampleMethod: 'Downsample method'
   },
   editDataSeries: [],
   showEditor: false,
   setShowEditor: null,
   availableDimensions: {},
-  editDataItem: {},
+  editDataItem: {
+    hasStreamingMetricEnabled: false
+  },
   setEditDataItem: null,
   isSummaryDashboard: false,
   isLarge: false,
@@ -208,7 +217,7 @@ var DATAITEM_COLORS_OPTIONS = [{
 }];
 
 var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
-  var _content$columns, _validDataItems$find, _validDataItems$find2;
+  var _content$columns, _validDataItems$find, _validDataItems$find2, _validDataItems$find3;
 
   var cardConfig = _ref.cardConfig,
       isSummaryDashboard = _ref.isSummaryDashboard,
@@ -275,15 +284,19 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
     var dataSourceId = _ref2.dataSourceId;
     return dataSourceId === editDataItem.dataSourceId;
   })) === null || _validDataItems$find === void 0 ? void 0 : _validDataItems$find.aggregationMethod;
-  var initialGrain = validDataItems === null || validDataItems === void 0 ? void 0 : (_validDataItems$find2 = validDataItems.find(function (_ref3) {
+  var initialDownSample = validDataItems === null || validDataItems === void 0 ? void 0 : (_validDataItems$find2 = validDataItems.find(function (_ref3) {
     var dataSourceId = _ref3.dataSourceId;
     return dataSourceId === editDataItem.dataSourceId;
-  })) === null || _validDataItems$find2 === void 0 ? void 0 : _validDataItems$find2.grain;
+  })) === null || _validDataItems$find2 === void 0 ? void 0 : _validDataItems$find2.downSampleMethod;
+  var initialGrain = validDataItems === null || validDataItems === void 0 ? void 0 : (_validDataItems$find3 = validDataItems.find(function (_ref4) {
+    var dataSourceId = _ref4.dataSourceId;
+    return dataSourceId === editDataItem.dataSourceId;
+  })) === null || _validDataItems$find3 === void 0 ? void 0 : _validDataItems$find3.grain;
   var selectedDimensionFilter = editDataItem.dataFilter ? Object.keys(editDataItem.dataFilter)[0] : '';
   var DataEditorContent = useMemo(function () {
-    var _editDataItem$aggrega, _editDataItem$aggrega2, _editDataItem$precisi, _editDataItem$precisi2, _classnames, _availableDimensions$;
+    var _editDataItem$aggrega, _editDataItem$aggrega2, _editDataItem$precisi, _editDataItem$precisi2, _classnames, _availableDimensions$, _editDataItem$downSam, _editDataItem$downSam2;
 
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (editDataItem === null || editDataItem === void 0 ? void 0 : editDataItem.type) !== 'DIMENSION' && (editDataItem === null || editDataItem === void 0 ? void 0 : editDataItem.type) !== 'TIMESTAMP' && /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (editDataItem === null || editDataItem === void 0 ? void 0 : editDataItem.type) !== 'DIMENSION' && (editDataItem === null || editDataItem === void 0 ? void 0 : editDataItem.type) !== 'TIMESTAMP' && !(editDataItem !== null && editDataItem !== void 0 && editDataItem.hasStreamingMetricEnabled) && /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(baseClassName, "--input-group")
     }, !initialAggregation || !isSummaryDashboard ?
     /*#__PURE__*/
@@ -306,10 +319,10 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       },
       titleText: mergedI18n.aggregationMethod,
       light: true,
-      onChange: function onChange(_ref4) {
+      onChange: function onChange(_ref5) {
         var _availableGrains$;
 
-        var selectedItem = _ref4.selectedItem;
+        var selectedItem = _ref5.selectedItem;
         setEditDataItem(omit.apply(void 0, [_objectSpread(_objectSpread({}, editDataItem), {}, {
           aggregationMethod: selectedItem.id
         }, isTimeBasedCard && selectedItem.id !== 'none' && !editDataItem.grain ? {
@@ -340,8 +353,8 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       }) || availableGrains[0],
       titleText: mergedI18n.grain,
       light: true,
-      onChange: function onChange(_ref5) {
-        var selectedItem = _ref5.selectedItem;
+      onChange: function onChange(_ref6) {
+        var selectedItem = _ref6.selectedItem;
         setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
           grain: selectedItem.id
         }));
@@ -370,12 +383,12 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       id: "".concat(id, "_color-dropdown"),
       label: "",
       titleText: type === CARD_TYPES.TIMESERIES ? mergedI18n.dataItemEditorLineColor : mergedI18n.dataItemEditorBarColor,
-      selectedColor: DATAITEM_COLORS_OPTIONS.find(function (_ref6) {
-        var carbonColor = _ref6.carbonColor;
+      selectedColor: DATAITEM_COLORS_OPTIONS.find(function (_ref7) {
+        var carbonColor = _ref7.carbonColor;
         return carbonColor === editDataItem.color;
       }),
-      onChange: function onChange(_ref7) {
-        var color = _ref7.color;
+      onChange: function onChange(_ref8) {
+        var color = _ref8.color;
         return setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
           color: color.carbonColor
         }));
@@ -405,8 +418,8 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       items: [mergedI18n.notSet, '0', '1', '2', '3', '4'],
       light: true,
       selectedItem: ((_editDataItem$precisi = editDataItem.precision) === null || _editDataItem$precisi === void 0 ? void 0 : _editDataItem$precisi.toString()) || mergedI18n.notSet,
-      onChange: function onChange(_ref8) {
-        var selectedItem = _ref8.selectedItem;
+      onChange: function onChange(_ref9) {
+        var selectedItem = _ref9.selectedItem;
         var isSet = selectedItem !== mergedI18n.notSet;
 
         if (isSet) {
@@ -442,8 +455,8 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       items: [mergedI18n.notSet, '0', '1', '2', '3', '4'],
       light: true,
       selectedItem: ((_editDataItem$precisi2 = editDataItem.precision) === null || _editDataItem$precisi2 === void 0 ? void 0 : _editDataItem$precisi2.toString()) || mergedI18n.notSet,
-      onChange: function onChange(_ref9) {
-        var selectedItem = _ref9.selectedItem;
+      onChange: function onChange(_ref10) {
+        var selectedItem = _ref10.selectedItem;
         var isSet = selectedItem !== mergedI18n.notSet;
 
         if (isSet) {
@@ -469,8 +482,8 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       items: [mergedI18n.none].concat(_toConsumableArray(Object.keys(availableDimensions))),
       light: true,
       selectedItem: selectedDimensionFilter || mergedI18n.none,
-      onChange: function onChange(_ref10) {
-        var selectedItem = _ref10.selectedItem;
+      onChange: function onChange(_ref11) {
+        var selectedItem = _ref11.selectedItem;
 
         if (selectedItem !== mergedI18n.none) {
           var dataFilter = _defineProperty({}, selectedItem, availableDimensions[selectedItem].sort()[0]);
@@ -495,8 +508,8 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
         return item === null || item === void 0 ? void 0 : item.toString();
       },
       selectedItem: editDataItem.dataFilter ? editDataItem.dataFilter[selectedDimensionFilter] : undefined,
-      onChange: function onChange(_ref11) {
-        var selectedItem = _ref11.selectedItem;
+      onChange: function onChange(_ref12) {
+        var selectedItem = _ref12.selectedItem;
 
         var dataFilter = _defineProperty({}, selectedDimensionFilter, selectedItem);
 
@@ -524,8 +537,43 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
           thresholds: thresholds
         }));
       }
-    }));
-  }, [availableDimensions, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard, mergedI18n, selectedDimensionFilter, setEditDataItem, type]);
+    }), (editDataItem === null || editDataItem === void 0 ? void 0 : editDataItem.type) !== 'DIMENSION' && (editDataItem === null || editDataItem === void 0 ? void 0 : editDataItem.type) !== 'TIMESTAMP' && (editDataItem === null || editDataItem === void 0 ? void 0 : editDataItem.hasStreamingMetricEnabled) && /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(baseClassName, "--input-group")
+    }, !initialDownSample || !isSummaryDashboard ?
+    /*#__PURE__*/
+    // selector should only be use-able in an instance dash or if there is no initial aggregation
+    React__default.createElement("div", {
+      className: "".concat(baseClassName, "--input-group--item-half")
+    }, /*#__PURE__*/React__default.createElement(Dropdown, {
+      id: "".concat(id, "_downSample-method"),
+      label: "",
+      direction: "bottom",
+      itemToString: function itemToString(item) {
+        return item.text;
+      },
+      items: editDataItem.downSampleMethods || [],
+      selectedItem: ((_editDataItem$downSam = editDataItem.downSampleMethods) === null || _editDataItem$downSam === void 0 ? void 0 : _editDataItem$downSam.find(function (method) {
+        return method.id === editDataItem.downSampleMethod;
+      })) || {
+        id: 'none',
+        text: mergedI18n.none
+      },
+      titleText: mergedI18n.downSampleMethod,
+      light: true,
+      onChange: function onChange(_ref13) {
+        var selectedItem = _ref13.selectedItem;
+        setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
+          downSampleMethod: selectedItem.id
+        }));
+      }
+    })) : /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(baseClassName, "--input-group--item-half")
+    }, /*#__PURE__*/React__default.createElement(FormLabel, {
+      className: "".concat(baseClassName, "--input-group--item-half-label")
+    }, mergedI18n.downSampleMethod), /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(baseClassName, "--input-group--item-half-content")
+    }, "".concat(editDataItem.downSampleMethod ? editDataItem.downSampleMethod[0].toUpperCase() : '').concat(((_editDataItem$downSam2 = editDataItem.downSampleMethod) === null || _editDataItem$downSam2 === void 0 ? void 0 : _editDataItem$downSam2.slice(1)) || '')))));
+  }, [availableDimensions, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard, mergedI18n, selectedDimensionFilter, setEditDataItem, type, initialDownSample]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showEditor && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(baseClassName, "--modal-wrapper")
   }, /*#__PURE__*/React__default.createElement(ComposedModal, {
@@ -675,7 +723,7 @@ DataSeriesFormItemModal.__docgenInfo = {
     },
     "i18n": {
       "defaultValue": {
-        "value": "{\n  dataItemEditorDataSeriesTitle: 'Customize data series',\n  dataItemEditorValueCardTitle: 'Edit data',\n  dataItemEditorDataItemLabel: 'Label',\n  dataItemEditorLegendColor: 'Legend color',\n  dataItemEditorSectionTitle: 'Data series',\n  selectDataItems: 'Select data items',\n  dataItem: 'Data item',\n  edit: 'Edit',\n  example: 'Example',\n  notSet: 'Not set',\n  none: 'None',\n  dataItemEditorDataItemCustomLabel: 'Custom label',\n  dataItemEditorDataItemHelperText: (dataItemSource, dataItemId) =>\n    `${dataItemSource}: ${dataItemId}`,\n  dataItemEditorDataItemUnit: 'Unit',\n  dataItemEditorDataItemFilter: 'Data filter',\n  dataItemEditorDataItemThresholds: 'Thresholds',\n  dataItemEditorDataItemAddThreshold: 'Add threshold',\n  dataItemEditorBarColor: 'Bar color',\n  dataItemEditorLineColor: 'Line color',\n  source: 'Source data item',\n  aggregationMethod: 'Aggregation method',\n  grain: 'Grain',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  yearlyLabel: 'Yearly',\n  dataItemSource: 'Data item source',\n  primaryButtonLabelText: 'Save',\n  secondaryButtonLabelText: 'Cancel',\n  decimalPlaces: 'Decimal places',\n}",
+        "value": "{\n  dataItemEditorDataSeriesTitle: 'Customize data series',\n  dataItemEditorValueCardTitle: 'Edit data',\n  dataItemEditorDataItemLabel: 'Label',\n  dataItemEditorLegendColor: 'Legend color',\n  dataItemEditorSectionTitle: 'Data series',\n  selectDataItems: 'Select data items',\n  dataItem: 'Data item',\n  edit: 'Edit',\n  example: 'Example',\n  notSet: 'Not set',\n  none: 'None',\n  dataItemEditorDataItemCustomLabel: 'Custom label',\n  dataItemEditorDataItemHelperText: (dataItemSource, dataItemId) =>\n    `${dataItemSource}: ${dataItemId}`,\n  dataItemEditorDataItemUnit: 'Unit',\n  dataItemEditorDataItemFilter: 'Data filter',\n  dataItemEditorDataItemThresholds: 'Thresholds',\n  dataItemEditorDataItemAddThreshold: 'Add threshold',\n  dataItemEditorBarColor: 'Bar color',\n  dataItemEditorLineColor: 'Line color',\n  source: 'Source data item',\n  aggregationMethod: 'Aggregation method',\n  grain: 'Grain',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  yearlyLabel: 'Yearly',\n  dataItemSource: 'Data item source',\n  primaryButtonLabelText: 'Save',\n  secondaryButtonLabelText: 'Cancel',\n  decimalPlaces: 'Decimal places',\n  downSampleMethod: 'Downsample method',\n}",
         "computed": false
       },
       "type": {
@@ -815,7 +863,7 @@ DataSeriesFormItemModal.__docgenInfo = {
     },
     "editDataItem": {
       "defaultValue": {
-        "value": "{}",
+        "value": "{\n  hasStreamingMetricEnabled: false,\n}",
         "computed": false
       },
       "type": {
@@ -836,6 +884,10 @@ DataSeriesFormItemModal.__docgenInfo = {
             "name": "string",
             "required": false
           },
+          "hasStreamingMetricEnabled": {
+            "name": "bool",
+            "required": false
+          },
           "aggregationMethods": {
             "name": "arrayOf",
             "value": {
@@ -857,6 +909,27 @@ DataSeriesFormItemModal.__docgenInfo = {
             "name": "string",
             "required": false
           },
+          "downSampleMethods": {
+            "name": "arrayOf",
+            "value": {
+              "name": "shape",
+              "value": {
+                "id": {
+                  "name": "string",
+                  "required": false
+                },
+                "text": {
+                  "name": "string",
+                  "required": false
+                }
+              }
+            },
+            "required": false
+          },
+          "downSampleMethod": {
+            "name": "string",
+            "required": false
+          },
           "grain": {
             "name": "string",
             "required": false

package/es/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/BarChartDataSeriesContent.js

@@ -5,7 +5,7 @@ import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import omit from '../../../../../packages/react/node_modules/lodash-es/omit.js';
+import omit from '../../../../../node_modules/lodash-es/omit.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.object.keys.js';
 import React__default from 'react';

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

@@ -6,8 +6,8 @@ import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import isEmpty from '../../../../../packages/react/node_modules/lodash-es/isEmpty.js';
-import omit from '../../../../../packages/react/node_modules/lodash-es/omit.js';
+import isEmpty from '../../../../../node_modules/lodash-es/isEmpty.js';
+import omit from '../../../../../node_modules/lodash-es/omit.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';

package/es/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.js

@@ -6,7 +6,7 @@ import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import omit from '../../../../../packages/react/node_modules/lodash-es/omit.js';
+import omit from '../../../../../node_modules/lodash-es/omit.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';

package/es/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.js

@@ -6,8 +6,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import omit from '../../../../../packages/react/node_modules/lodash-es/omit.js';
-import isEmpty from '../../../../../packages/react/node_modules/lodash-es/isEmpty.js';
+import omit from '../../../../../node_modules/lodash-es/omit.js';
+import isEmpty from '../../../../../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.filter.js';

package/es/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormSettings.js

@@ -6,7 +6,7 @@ import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import isEmpty from '../../../../../packages/react/node_modules/lodash-es/isEmpty.js';
+import isEmpty from '../../../../../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.array.find-index.js';
 import 'core-js/modules/es.array.concat.js';

package/es/components/CardEditor/CardEditForm/CardEditFormItems/ThresholdsFormItem.js

@@ -6,8 +6,8 @@ import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import isEmpty from '../../../../packages/react/node_modules/lodash-es/isEmpty.js';
-import omit from '../../../../packages/react/node_modules/lodash-es/omit.js';
+import isEmpty from '../../../../node_modules/lodash-es/isEmpty.js';
+import omit from '../../../../node_modules/lodash-es/omit.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.find.js';

package/es/components/CardEditor/CardEditor.js

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import isNil from '../../packages/react/node_modules/lodash-es/isNil.js';
+import isNil from '../../node_modules/lodash-es/isNil.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.array.filter.js';

package/es/components/ColorDropdown/ColorDropdown.js

@@ -1,13 +1,12 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'core-js/modules/es.function.name.js';
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown } from 'carbon-components-react';
 import { purple70, cyan50, teal70, magenta70, red50, red90, green60, blue80, magenta50, purple50, teal50, cyan90 } from '@carbon/colors';
 import warning from 'warning';
 import { settings } from '../../constants/Settings.js';
 import deprecate from '../../internal/deprecate.js';
-import { useDropdownTitleFixer } from '../IconDropdown/dropdownHooks.js';
 
 var iotPrefix = settings.iotPrefix;
 var colorPropType = PropTypes.shape({
@@ -123,17 +122,6 @@ var ColorDropdown = function ColorDropdown(_ref) {
       selectedColor = _useState2[0],
       setSelectedColor = _useState2[1];
 
-  var _useDropdownTitleFixe = useDropdownTitleFixer(),
-      _useDropdownTitleFixe2 = _slicedToArray(_useDropdownTitleFixe, 2),
-      dropdownRef = _useDropdownTitleFixe2[0],
-      updateTitle = _useDropdownTitleFixe2[1];
-
-  useEffect(function () {
-    if ((selectedColor !== null && selectedColor !== void 0 && selectedColor.name || selectedColor !== null && selectedColor !== void 0 && selectedColor.carbonColor) && dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current) {
-      updateTitle(selectedColor.name || selectedColor.carbonColor);
-    }
-  }, [dropdownRef, selectedColor, selectedColorProp, updateTitle]);
-
   var renderColorItem = function renderColorItem(item) {
     return /*#__PURE__*/React__default.createElement("div", {
       title: "".concat(item.name),
@@ -152,10 +140,12 @@ var ColorDropdown = function ColorDropdown(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(Dropdown, {
-    ref: dropdownRef,
     className: "".concat(iotPrefix, "--color-dropdown"),
     id: id,
-    itemToString: renderColorItem,
+    itemToElement: renderColorItem,
+    itemToString: function itemToString(item) {
+      return item.name;
+    },
     items: colors,
     label: label,
     light: light,
@@ -170,6 +160,7 @@ var ColorDropdown = function ColorDropdown(_ref) {
       });
     },
     selectedItem: selectedColor,
+    renderSelectedItem: renderColorItem,
     titleText: titleText,
     type: "default",
     "data-testid": testID || testId,