carbon-addons-iot-react 2.149.0-next.45 → 2.149.0-next.48

package/es/components/StackedAreaChartCard/StackedAreaChartCard.js

@@ -0,0 +1,125 @@
+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 _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 React__default from 'react';
+import Card from '../Card/Card.js';
+import { CARD_TYPES, CARD_SIZES } from '../../constants/LayoutConstants.js';
+import { CardPropTypes, StackedAreaChartCardPropTypes } from '../../constants/CardPropTypes.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(_objectSpread({}, CardPropTypes), StackedAreaChartCardPropTypes);
+
+var defaultProps = {
+  size: CARD_SIZES.MEDIUM,
+  title: null,
+  testId: 'stacked-area-chart-testId',
+  content: {
+    xLabel: 'x label',
+    yLabel: 'y label',
+    pairing: {
+      option: 1
+    },
+    legendPosition: 'bottom',
+    curve: 'curveMonotoneX'
+  },
+  locale: 'en',
+  values: []
+};
+
+var StackedAreaChartCard = function StackedAreaChartCard(_ref) {
+  var title = _ref.title,
+      values = _ref.values,
+      content = _ref.content,
+      size = _ref.size,
+      breakpoint = _ref.breakpoint,
+      locale = _ref.locale,
+      isLoading = _ref.isLoading,
+      testId = _ref.testId,
+      footerContent = _ref.footerContent,
+      isExpanded = _ref.isExpanded,
+      i18n = _ref.i18n;
+      _ref.style;
+      var others = _objectWithoutProperties(_ref, ["title", "values", "content", "size", "breakpoint", "locale", "isLoading", "testId", "footerContent", "isExpanded", "i18n", "style"]);
+
+  return /*#__PURE__*/React__default.createElement(Card, _extends({
+    title: title,
+    size: size,
+    breakpoint: breakpoint,
+    locale: locale,
+    isExpanded: isExpanded,
+    isLoading: isLoading,
+    testId: testId,
+    footerContent: !isExpanded ? footerContent : null,
+    i18n: i18n,
+    data: values,
+    type: CARD_TYPES.STACKED_AREA_CHART,
+    content: content
+  }, others));
+};
+
+StackedAreaChartCard.propTypes = propTypes;
+StackedAreaChartCard.defaultProps = defaultProps;
+StackedAreaChartCard.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "StackedAreaChartCard",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "CARD_SIZES.MEDIUM",
+        "computed": true
+      },
+      "required": false
+    },
+    "title": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "testId": {
+      "defaultValue": {
+        "value": "'stacked-area-chart-testId'",
+        "computed": false
+      },
+      "required": false
+    },
+    "content": {
+      "defaultValue": {
+        "value": "{\n  xLabel: 'x label',\n  yLabel: 'y label',\n  pairing: {\n    option: 1,\n  },\n  legendPosition: 'bottom',\n  curve: 'curveMonotoneX',\n}",
+        "computed": false
+      },
+      "required": false
+    },
+    "locale": {
+      "defaultValue": {
+        "value": "'en'",
+        "computed": false
+      },
+      "required": false
+    },
+    "values": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
+      "required": false
+    }
+  },
+  "composes": ["../../constants/CardPropTypes"]
+};
+
+export default StackedAreaChartCard;

package/es/constants/CardPropTypes.js

@@ -13,6 +13,7 @@ import deprecate from '../internal/deprecate.js';
 import { DateTimePickerDefaultValuePropTypes } from '../components/DateTimePicker/DateTimePickerV2.js';
 import { CARD_DATA_STATE, CARD_SIZES, BAR_CHART_LAYOUTS, BAR_CHART_TYPES, LEGACY_CARD_SIZES, CARD_LAYOUTS, DASHBOARD_SIZES } from './LayoutConstants.js';
 import { SvgPropType, OverridePropTypes, ButtonIconPropType } from './SharedPropTypes.js';
+import { MeterChartPropTypes, SparklineChartPropTypes, StackedAreaChartPropTypes } from './ChartPropTypes.js';
 
 var CHART_COLORS = [purple70, cyan50, teal70, magenta70, red50, red90, green60, blue80, magenta50, teal50, cyan90, purple50];
 var AttributePropTypes = PropTypes.shape({
@@ -661,6 +662,60 @@ var MapCardPropTypes = {
   /** the ref used needed by a drag and drop library like react-dnd. Is added to the map container element. */
   dropRef: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func])
 };
+var MeterChartCardPropTypes = {
+  content: MeterChartPropTypes.content,
+  values: MeterChartPropTypes.data,
+  size: function size(props, propName, componentName) {
+    var error;
+
+    if (!Object.keys(CARD_SIZES).includes(props[propName])) {
+      error = new Error("`".concat(componentName, "` prop `").concat(propName, "` must be one of ").concat(Object.keys(CARD_SIZES).join(','), "."));
+    } // If the size
+
+
+    if (props[propName] === CARD_SIZES.SMALL || props[propName] === CARD_SIZES.SMALLWIDE || props[propName] === CARD_SIZES.SMALLFULL || props[propName] === CARD_SIZES.MEDIUMTHIN) {
+      error = new Error("Deprecation notice: `".concat(componentName, "` prop `").concat(propName, "` cannot be `").concat(props[propName], "` as the charts will not render correctly. Minimum size is `MEDIUM`"));
+    }
+
+    return error;
+  }
+};
+var SparklineChartCardPropTypes = {
+  content: SparklineChartPropTypes.content,
+  values: SparklineChartPropTypes.data,
+  size: function size(props, propName, componentName) {
+    var error;
+
+    if (!Object.keys(CARD_SIZES).includes(props[propName])) {
+      error = new Error("`".concat(componentName, "` prop `").concat(propName, "` must be one of ").concat(Object.keys(CARD_SIZES).join(','), "."));
+    } // If the size
+
+
+    if (props[propName] === CARD_SIZES.SMALL || props[propName] === CARD_SIZES.SMALLWIDE || props[propName] === CARD_SIZES.SMALLFULL || props[propName] === CARD_SIZES.MEDIUMTHIN) {
+      error = new Error("Deprecation notice: `".concat(componentName, "` prop `").concat(propName, "` cannot be `").concat(props[propName], "` as the charts will not render correctly. Minimum size is `MEDIUM`"));
+    }
+
+    return error;
+  }
+};
+var StackedAreaChartCardPropTypes = {
+  content: StackedAreaChartPropTypes.content,
+  values: StackedAreaChartPropTypes.data,
+  size: function size(props, propName, componentName) {
+    var error;
+
+    if (!Object.keys(CARD_SIZES).includes(props[propName])) {
+      error = new Error("`".concat(componentName, "` prop `").concat(propName, "` must be one of ").concat(Object.keys(CARD_SIZES).join(','), "."));
+    } // If the size
+
+
+    if (props[propName] === CARD_SIZES.SMALL || props[propName] === CARD_SIZES.SMALLWIDE || props[propName] === CARD_SIZES.SMALLFULL || props[propName] === CARD_SIZES.MEDIUMTHIN) {
+      error = new Error("Deprecation notice: `".concat(componentName, "` prop `").concat(propName, "` cannot be `").concat(props[propName], "` as the charts will not render correctly. Minimum size is `MEDIUM`"));
+    }
+
+    return error;
+  }
+};
 var DATE_PICKER_OPTIONS = {
   ICON_ONLY: 'iconOnly',
   FULL: 'full'
@@ -836,4 +891,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, ValueContentPropTypes, ZoomBarPropTypes };
+export { AttributePropTypes, BarChartCardPropTypes, CHART_COLORS, CardDimensionPropTypes, CardDimensionsPropTypes, CardPropTypes, CardSizesToDimensionsPropTypes, ComboChartPropTypes, DATE_PICKER_OPTIONS, DashboardBreakpointsPropTypes, DashboardColumnsPropTypes, DashboardLayoutPropTypes, GaugeCardPropTypes, ImageCardPropTypes, ImageCardValuesPropType, MapCardPropTypes, MapControlPropType, MeterChartCardPropTypes, PieCardPropTypes, RowHeightPropTypes, SparklineChartCardPropTypes, StackedAreaChartCardPropTypes, TableCardPropTypes, TimeRangeOptionsPropTypes, TruncationPropTypes, ValueContentPropTypes, ZoomBarPropTypes };

package/es/constants/ChartPropTypes.js

@@ -0,0 +1,79 @@
+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 _defineProperty from '@babel/runtime/helpers/defineProperty';
+import PropTypes from 'prop-types';
+
+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 ChartColorPropType = {
+  color: PropTypes.shape({
+    gradient: PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string),
+      enabled: PropTypes.boolean
+    }),
+    pairing: PropTypes.shape({
+      numberOfVariants: PropTypes.number,
+      option: PropTypes.number
+    }),
+    scale: PropTypes.shape(PropTypes.any)
+  })
+};
+var MeterChartPropTypes = {
+  content: PropTypes.shape(_objectSpread({
+    peak: PropTypes.number,
+    meterTotal: PropTypes.number,
+    meterUnit: PropTypes.string,
+    legendPosition: PropTypes.string
+  }, ChartColorPropType)),
+  data: PropTypes.arrayOf(PropTypes.shape({
+    group: PropTypes.string,
+    value: PropTypes.number
+  }))
+};
+var SparklineChartPropTypes = {
+  content: PropTypes.shape(_objectSpread({
+    xLabel: PropTypes.string,
+    yLabel: PropTypes.string,
+    xProperty: PropTypes.string.isRequired,
+    yProperty: PropTypes.string.isRequired,
+    listContent: PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string
+    }))
+  }, ChartColorPropType)),
+  data: PropTypes.arrayOf(PropTypes.shape({
+    group: PropTypes.string.isRequired
+  }))
+};
+var StackedAreaChartPropTypes = {
+  content: PropTypes.shape(_objectSpread({
+    xLabel: PropTypes.string,
+    yLabel: PropTypes.string,
+    xProperty: PropTypes.string.isRequired,
+    xThresholds: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.number.isRequired,
+      valueFormatter: PropTypes.func,
+      label: PropTypes.string,
+      fillColor: PropTypes.string
+    })),
+    yProperty: PropTypes.string.isRequired,
+    yThresholds: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.number.isRequired,
+      valueFormatter: PropTypes.func,
+      label: PropTypes.string,
+      fillColor: PropTypes.string
+    })),
+    curve: PropTypes.string,
+    legendPosition: PropTypes.oneOf(['bottom', 'left', 'right', 'top'])
+  }, ChartColorPropType)),
+  data: PropTypes.arrayOf(PropTypes.shape({
+    group: PropTypes.string.isRequired
+  }))
+};
+
+export { ChartColorPropType, MeterChartPropTypes, SparklineChartPropTypes, StackedAreaChartPropTypes };

package/es/constants/LayoutConstants.js

@@ -37,7 +37,10 @@ var CARD_TYPES = {
   PIE: 'PIE',
   TABLE: 'TABLE',
   TIMESERIES: 'TIMESERIES',
-  VALUE: 'VALUE'
+  VALUE: 'VALUE',
+  METER_CHART: 'METER_CHART',
+  SPARKLINE_CHART: 'SPARKLINE_CHART',
+  STACKED_AREA_CHART: 'STACKED_AREA_CHART'
 };
 var CARD_ACTIONS = {
   OPEN_EXPANDED_CARD: 'OPEN_EXPANDED_CARD',

package/es/index.js

@@ -70,6 +70,9 @@ export { default as TableCard } from './components/TableCard/TableCard.js';
 export { default as GaugeCard } from './components/GaugeCard/GaugeCard.js';
 export { DragAndDrop } from './utils/DragAndDropUtils.js';
 export { default as ValueContent } from './components/ValueCard/ValueContent.js';
+export { default as MeterChartCard } from './components/MeterChartCard/MeterChartCard.js';
+export { default as SparklineChartCard } from './components/SparklineChartCard/SparklineChartCard.js';
+export { default as StackedAreaChartCard } from './components/StackedAreaChartCard/StackedAreaChartCard.js';
 export { default as ListCard } from './components/ListCard/ListCard.js';
 export { default as PageWizard } from './components/PageWizard/PageWizard.js';
 export { default as PageWizardStep } from './components/PageWizard/PageWizardStep/PageWizardStep.js';
@@ -138,3 +141,4 @@ export { default as EmptystateErrorIcon } from './icons/static/EmptyStateErrorIc
 export { default as EmptystateNoresultsIcon } from './icons/static/EmptyStateNoResultsIcon.js';
 export { default as EmptystateNotauthorizedIcon } from './icons/static/EmptyStateNotAuthorizedIcon.js';
 export { default as EmptystateSuccessIcon } from './icons/static/EmptyStateSuccessIcon.js';
+export { AreaChart, MeterChart, StackedAreaChart } from '@carbon/charts-react';

package/es/utils/cardTypeUtilityFunctions.js

@@ -0,0 +1,103 @@
+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 _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import 'core-js/modules/es.array.concat.js';
+import { CARD_TYPES } from '../constants/LayoutConstants.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 getChartOptions = function getChartOptions(type, hasData, content) {
+  var _content$status, _content$status2, _content$status3;
+
+  var basicOptionsObject = {
+    color: content.color,
+    animations: false,
+    accessibility: true,
+    toolbar: {
+      enabled: false
+    },
+    legend: {
+      position: content.legendPosition,
+      enabled: hasData,
+      truncation: content.truncation
+    }
+  };
+  return type === CARD_TYPES.METER_CHART ? _objectSpread(_objectSpread({}, basicOptionsObject), {}, {
+    containerResizable: true,
+    meter: {
+      peak: content.peak,
+      proportional: {
+        total: content.meterTotal,
+        unit: content.meterUnit
+      },
+      status: {
+        ranges: [].concat(_toConsumableArray(content !== null && content !== void 0 && (_content$status = content.status) !== null && _content$status !== void 0 && _content$status.success ? [{
+          range: content.status.success,
+          status: 'success'
+        }] : []), _toConsumableArray(content !== null && content !== void 0 && (_content$status2 = content.status) !== null && _content$status2 !== void 0 && _content$status2.warning ? [{
+          range: content.status.warning,
+          status: 'warning'
+        }] : []), _toConsumableArray(content !== null && content !== void 0 && (_content$status3 = content.status) !== null && _content$status3 !== void 0 && _content$status3.danger ? [{
+          range: content.status.danger,
+          status: 'danger'
+        }] : []))
+      }
+    }
+  }) : type === CARD_TYPES.SPARKLINE_CHART ? _objectSpread(_objectSpread({}, basicOptionsObject), {}, {
+    grid: {
+      x: {
+        enabled: false
+      },
+      y: {
+        enabled: false
+      }
+    },
+    axes: {
+      bottom: {
+        visible: false,
+        title: content.xLabel,
+        mapsTo: content.xProperty,
+        thresholds: content.xThresholds,
+        scaleType: 'time'
+      },
+      left: {
+        visible: false,
+        title: content.yLabel,
+        mapsTo: content.yProperty,
+        thresholds: content.yThresholds,
+        scaleType: 'linear'
+      }
+    },
+    points: {
+      enabled: false
+    },
+    legend: {
+      enabled: false
+    }
+  }) : type === CARD_TYPES.STACKED_AREA_CHART ? _objectSpread(_objectSpread({}, basicOptionsObject), {}, {
+    axes: {
+      left: {
+        stacked: true,
+        title: content.yLabel,
+        mapsTo: content.yProperty,
+        thresholds: content.yThresholds,
+        scaleType: 'linear'
+      },
+      bottom: {
+        title: content.xLabel,
+        mapsTo: content.xProperty,
+        thresholds: content.xThresholds,
+        scaleType: 'time'
+      }
+    },
+    curve: content.curve
+  }) : content;
+};
+
+export { getChartOptions };

package/lib/components/Card/Card.js

@@ -12,6 +12,7 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var isEmpty = require('../../node_modules/lodash-es/isEmpty.js');
 require('core-js/modules/es.array.iterator.js');
 require('core-js/modules/es.object.to-string.js');
 require('core-js/modules/web.dom-collections.iterator.js');
@@ -33,6 +34,7 @@ var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var dateTimePickerUtils = require('../DateTimePicker/dateTimePickerUtils.js');
 var useSizeObserver = require('../../hooks/useSizeObserver.js');
 var EmptyState = require('../EmptyState/EmptyState.js');
+var CardTypeContent = require('./CardTypeContent.js');
 var CardToolbar = require('./CardToolbar.js');
 var CardTitle = require('./CardTitle.js');
 
@@ -118,8 +120,9 @@ var CardContent = function CardContent(props) {
       isExpanded = props.isExpanded,
       className = props.className,
       testId = props.testId,
-      noPadding = props.noPadding;
-  var height = "".concat(dimensions.y - LayoutConstants.CARD_TITLE_HEIGHT, "px");
+      noPadding = props.noPadding,
+      hasFooter = props.hasFooter;
+  var height = "".concat(dimensions.y - LayoutConstants.CARD_TITLE_HEIGHT - (hasFooter ? '40' : '0'), "px");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": testId,
     style: _defineProperty__default['default']({}, "--card-content-height", height),
@@ -174,13 +177,16 @@ CardContent.propTypes = {
     y: PropTypes__default['default'].number
   }).isRequired,
   isExpanded: CardPropTypes.CardPropTypes.isExpanded.isRequired,
-  noPadding: PropTypes__default['default'].bool
+  noPadding: PropTypes__default['default'].bool,
+  // define the actual card content depending if it has a footer or not
+  hasFooter: PropTypes__default['default'].bool
 };
 CardContent.defaultProps = {
   children: undefined,
   className: '',
   testId: 'card-content',
-  noPadding: false
+  noPadding: false,
+  hasFooter: false
 };
 ({
   children: PropTypes__default['default'].node.isRequired
@@ -267,7 +273,10 @@ var defaultProps = {
   footerContent: undefined,
   dateTimeMask: 'YYYY-MM-DD HH:mm',
   padding: 'default',
-  overrides: undefined
+  overrides: undefined,
+  type: null,
+  data: null,
+  content: null
 };
 /** Dumb component that renders the card basics */
 
@@ -281,7 +290,7 @@ var Card = function Card(props) {
       hasTitleWrap = props.hasTitleWrap;
       props.layout;
       var isLoading = props.isLoading,
-      isEmpty = props.isEmpty,
+      isEmptyProp = props.isEmpty,
       isEditable = props.isEditable,
       isExpanded = props.isExpanded,
       isLazyLoading = props.isLazyLoading,
@@ -310,7 +319,10 @@ var Card = function Card(props) {
       extraActions = props.extraActions,
       padding = props.padding,
       overrides = props.overrides,
-      others = _objectWithoutProperties__default['default'](props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides"]); // TODO: remove once final version of range prop is supported
+      type = props.type,
+      data = props.data,
+      content = props.content,
+      others = _objectWithoutProperties__default['default'](props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content"]); // TODO: remove once final version of range prop is supported
 
 
   React.useEffect(function () {
@@ -431,6 +443,9 @@ var Card = function Card(props) {
     dateTimeMask: dateTimeMask,
     extraActions: extraActions
   }) : null;
+  var isSupportedType = type === LayoutConstants.CARD_TYPES.METER_CHART || type === LayoutConstants.CARD_TYPES.SPARKLINE_CHART || type === LayoutConstants.CARD_TYPES.STACKED_AREA_CHART; // validate if the data is empty or prop says it's empty
+
+  var isCardEmpty = isSupportedType && isEmpty(data) || isEmptyProp;
   var card = /*#__PURE__*/React__default['default'].createElement(CardWrapper, _extends__default['default']({}, others, {
     // you need all of these to support dynamic positioning during edit
     ref: function ref(node) {
@@ -470,7 +485,8 @@ var Card = function Card(props) {
     dimensions: dimensions,
     isExpanded: isExpanded,
     className: contentClassName,
-    noPadding: padding === 'none'
+    noPadding: padding === 'none',
+    hasFooter: !!CardFooter
   }, !isVisible && isLazyLoading ? // if not visible don't show anything
   '' : isLoading ? /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
@@ -485,10 +501,20 @@ var Card = function Card(props) {
     icon: isSmall ? '' : 'error',
     title: strings.errorLoadingDataShortLabel,
     body: error
-  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$errorMessa2 = overrides.errorMessage) === null || _overrides$errorMessa2 === void 0 ? void 0 : _overrides$errorMessa2.props)) : isEmpty && !isEditable ? /*#__PURE__*/React__default['default'].createElement(ErrorMessage, _extends__default['default']({
+  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$errorMessa2 = overrides.errorMessage) === null || _overrides$errorMessa2 === void 0 ? void 0 : _overrides$errorMessa2.props)) : isCardEmpty && !isEditable ? /*#__PURE__*/React__default['default'].createElement(ErrorMessage, _extends__default['default']({
     title: isSmallOrThin ? strings.noDataShortLabel : strings.noDataLabel,
     icon: isSmall ? '' : 'empty'
-  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$errorMessa3 = overrides.errorMessage) === null || _overrides$errorMessa3 === void 0 ? void 0 : _overrides$errorMessa3.props)) : Array.isArray(children) && typeof (children === null || children === void 0 ? void 0 : children[0]) === 'function' ? // pass the measured size down to the children if it's an render function
+  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$errorMessa3 = overrides.errorMessage) === null || _overrides$errorMessa3 === void 0 ? void 0 : _overrides$errorMessa3.props)) : isSupportedType ?
+  /*#__PURE__*/
+  // render card content based on supported type
+  // TODO: remove deprecated testID prop in v3
+  React__default['default'].createElement(CardTypeContent, {
+    testId: testID || testId,
+    isExpanded: isExpanded,
+    type: type,
+    data: data,
+    content: content
+  }) : Array.isArray(children) && typeof (children === null || children === void 0 ? void 0 : children[0]) === 'function' ? // pass the measured size down to the children if it's an render function
   [// first option is a function
   children === null || children === void 0 ? void 0 : children[0](getChildSize(cardSize, title), _objectSpread({
     cardToolbar: cardToolbar
@@ -764,6 +790,27 @@ Card.__docgenInfo = {
         "computed": true
       },
       "required": false
+    },
+    "type": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "data": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "content": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]