import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import isEqual from '../../node_modules/lodash-es/isEqual.js';
import _defaultsDeep from '../../node_modules/lodash-es/defaultsDeep.js';
import capitalize from '../../node_modules/lodash-es/capitalize.js';
import _omit from '../../node_modules/lodash-es/omit.js';
import isEmpty from '../../node_modules/lodash-es/isEmpty.js';
import isNil from '../../node_modules/lodash-es/isNil.js';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.array.find.js';
import 'core-js/modules/es.array.from.js';
import 'core-js/modules/es.array.includes.js';
import 'core-js/modules/es.array.iterator.js';
import 'core-js/modules/es.array.join.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.array.sort.js';
import 'core-js/modules/es.object.get-own-property-descriptor.js';
import 'core-js/modules/es.object.get-own-property-descriptors.js';
import 'core-js/modules/es.object.keys.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.object.values.js';
import 'core-js/modules/es.set.js';
import 'core-js/modules/es.string.includes.js';
import 'core-js/modules/es.string.iterator.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import 'core-js/modules/web.dom-collections.iterator.js';
import React__default, { useMemo, useRef, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { StackedBarChart, LineChart } from '@carbon/charts-react';
import { csvDownloadHandler } from '../../utils/componentUtilityFunctions.js';
import { ZoomBarPropTypes, TruncationPropTypes, CardPropTypes } from '../../constants/CardPropTypes.js';
import { TIME_SERIES_TYPES, CARD_SIZES, ZOOM_BAR_ENABLED_CARD_SIZES } from '../../constants/LayoutConstants.js';
import Card from '../Card/Card.js';
import StatefulTable from '../Table/StatefulTable.js';
import { settings } from '../../constants/Settings.js';
import { handleCardVariables, getUpdatedCardSize, chartValueFormatter, getResizeHandles, handleTooltip } from '../../utils/cardUtilityFunctions.js';
import deprecate from '../../internal/deprecate.js';
import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
import { usePrevious } from '../../hooks/usePrevious.js';
import { generateSampleValues, formatGraphTick, formatColors, formatChartData, applyStrokeColor, applyFillColor, applyIsFilled } from './timeSeriesUtils.js';

var _excluded = ["title", "content", "children", "size", "interval", "isEditable", "isResizable", "values", "locale", "timeZone", "i18n", "isExpanded", "timeRange", "isLazyLoading", "isLoading", "domainRange", "tooltipDateFormatPattern", "tooltipShowTotals", "showTimeInGMT", "testID", "testId", "defaultDateFormatPattern"];
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 iotPrefix = settings.iotPrefix;
var TimeSeriesDatasetPropTypes = PropTypes.shape({
  label: PropTypes.string.isRequired,
  /** the attribute in values to map to */
  dataSourceId: PropTypes.string.isRequired,
  /** optional filter to apply to this particular line */
  dataFilter: PropTypes.objectOf(PropTypes.any),
  /** optional param to disable DataFilter */
  disableDataFilter: PropTypes.bool,
  /** optional param to set the colors */
  color: PropTypes.string
});
var TimeSeriesCardPropTypes = {
  content: PropTypes.shape({
    series: PropTypes.oneOfType([TimeSeriesDatasetPropTypes, PropTypes.arrayOf(TimeSeriesDatasetPropTypes)]).isRequired,
    /** Custom X-axis label */
    xLabel: PropTypes.string,
    /** Custom Y-axis label */
    yLabel: PropTypes.string,
    /** the number of decimals to show in the legend and on the y-axis */
    decimalPrecision: PropTypes.number,
    /** Optionally hide zero. Useful when chart values are not close to zero, giving a better view of the meaningful data */
    includeZeroOnXaxis: PropTypes.bool,
    /** Optionally hide zero. Useful when chart values are not close to zero, giving a better view of the meaningful data */
    includeZeroOnYaxis: PropTypes.bool,
    /** Which attribute is the time attribute i.e. 'timestamp' */
    timeDataSourceId: PropTypes.string,
    /** should it be a line chart or bar chart, default is line chart */
    chartType: deprecate(PropTypes.oneOf(Object.values(TIME_SERIES_TYPES)), '\nThe prop `chartType` for Card has been deprecated. BarChartCard now handles all bar chart functionality including time-based bar charts.'),
    /** optional units to put in the legend */
    unit: PropTypes.string,
    /** Optionally adds a zoom bar to the chart */
    zoomBar: ZoomBarPropTypes,
    /** Number of grid-line spaces to the left and right of the chart to add white space to. Defaults to 1 */
    addSpaceOnEdges: PropTypes.number,
    /** whether or not to show a legend at the bottom of the card
     * if not explicitly stated, the card will show based on the length of the series
     */
    showLegend: PropTypes.bool,
    /** Where to place the chart legend */
    legendPosition: PropTypes.string,
    /** carbon charts legend truncation options */
    truncation: TruncationPropTypes,
    /** if there are alerts associated with this chart (used to markup datapoints), this is a start/end set of alert ranges for each alert */
    alertRanges: PropTypes.arrayOf(PropTypes.shape({
      endTimestamp: PropTypes.number,
      startTimestamp: PropTypes.number,
      /** color of the alert */
      color: PropTypes.string,
      /** more information about the alert */
      details: PropTypes.string
    })),
    /** set of thresholds these render dotted lines on the graph to indicate that the line values might be crossing logical thresholds */
    thresholds: PropTypes.arrayOf(PropTypes.shape({
      axis: PropTypes.oneOf(['x', 'y']),
      value: PropTypes.number,
      label: PropTypes.string,
      fillColor: PropTypes.string
    }))
  }).isRequired,
  i18n: PropTypes.shape({
    alertDetected: PropTypes.string,
    noData: PropTypes.string,
    tooltipGroupLabel: PropTypes.string,
    defaultFilterStringPlaceholdText: PropTypes.string
  }),
  /** array of data from the backend for instance [{timestamp: Date object || ms timestamp, temperature: 35, humidity: 10}, ...] */
  values: PropTypes.arrayOf(PropTypes.shape({
    timestamp: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])
  })),
  cardVariables: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number, PropTypes.bool])),
  /** Interval for time series configuration used for formatting the x-axis */
  interval: PropTypes.oneOf(['minute', 'hour', 'day', 'week', 'quarter', 'month', 'year']),
  /** optional domain to graph from. First value is the beginning of the range. Second value is the end of the range
   * can be date instance or timestamp
   */
  domainRange: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])),
  /** Region for value and text formatting */
  locale: PropTypes.string,
  /** Show timestamp in browser local time or GMT */
  showTimeInGMT: PropTypes.bool,
  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) {
      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;
  },
  /** tooltip format pattern that follows the dayjs formatting patterns */
  tooltipDateFormatPattern: PropTypes.string,
  /** should the tooltip total the line chart values? */
  tooltipShowTotals: PropTypes.bool,
  // TODO: remove deprecated 'testID' in v3
  // eslint-disable-next-line react/require-default-props
  testID: deprecate(PropTypes.string, "The 'testID' prop has been deprecated. Please use 'testId' instead."),
  testId: PropTypes.string,
  /** default date format pattern that follows the dayjs formatting patterns */
  defaultDateFormatPattern: PropTypes.string
};
var defaultProps = {
  size: CARD_SIZES.MEDIUM,
  values: [],
  i18n: {
    alertDetected: 'Alert detected:',
    noDataLabel: 'No data is available for this time range.',
    tooltipGroupLabel: 'Group',
    defaultFilterStringPlaceholdText: 'Filter'
  },
  chartType: TIME_SERIES_TYPES.LINE,
  locale: 'en',
  timeZone: undefined,
  content: {
    series: [],
    timeDataSourceId: 'timestamp',
    includeZeroOnXaxis: false,
    includeZeroOnYaxis: false,
    showLegend: true,
    legendPosition: 'bottom',
    truncation: {
      type: 'end_line',
      threshold: 20,
      numCharacter: 20
    }
  },
  interval: 'hour',
  showTimeInGMT: false,
  domainRange: null,
  tooltipDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
  tooltipShowTotals: true,
  defaultDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS
};
var TimeSeriesCard = function TimeSeriesCard(_ref) {
  var titleProp = _ref.title,
    content = _ref.content,
    children = _ref.children,
    size = _ref.size,
    interval = _ref.interval,
    isEditable = _ref.isEditable,
    isResizable = _ref.isResizable,
    initialValues = _ref.values,
    locale = _ref.locale,
    timeZone = _ref.timeZone,
    i18n = _ref.i18n,
    isExpanded = _ref.isExpanded,
    timeRange = _ref.timeRange,
    isLazyLoading = _ref.isLazyLoading,
    isLoading = _ref.isLoading,
    domainRange = _ref.domainRange,
    tooltipDateFormatPattern = _ref.tooltipDateFormatPattern,
    tooltipShowTotals = _ref.tooltipShowTotals,
    showTimeInGMT = _ref.showTimeInGMT,
    testID = _ref.testID,
    testId = _ref.testId,
    defaultDateFormatPattern = _ref.defaultDateFormatPattern,
    others = _objectWithoutProperties(_ref, _excluded);
  var effectiveTimezone = timeZone || dayjs.tz.guess();
  dayjs.tz.setDefault(effectiveTimezone);
  dayjs.locale(locale);
  // need to deep merge the nested content default props as default props only uses a shallow merge natively
  var contentWithDefaults = useMemo(function () {
    return _defaultsDeep({}, content, defaultProps.content);
  }, [content]);
  var mergedI18n = useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  var _handleCardVariables = handleCardVariables(titleProp, contentWithDefaults, initialValues, others),
    title = _handleCardVariables.title,
    _handleCardVariables$ = _handleCardVariables.content,
    series = _handleCardVariables$.series,
    timeDataSourceId = _handleCardVariables$.timeDataSourceId,
    alertRanges = _handleCardVariables$.alertRanges,
    xLabel = _handleCardVariables$.xLabel,
    yLabel = _handleCardVariables$.yLabel,
    includeZeroOnXaxis = _handleCardVariables$.includeZeroOnXaxis,
    includeZeroOnYaxis = _handleCardVariables$.includeZeroOnYaxis,
    decimalPrecision = _handleCardVariables$.decimalPrecision,
    unit = _handleCardVariables$.unit,
    chartType = _handleCardVariables$.chartType,
    zoomBar = _handleCardVariables$.zoomBar,
    showLegend = _handleCardVariables$.showLegend,
    legendPosition = _handleCardVariables$.legendPosition,
    addSpaceOnEdges = _handleCardVariables$.addSpaceOnEdges,
    truncation = _handleCardVariables$.truncation,
    thresholds = _handleCardVariables$.thresholds,
    valuesProp = _handleCardVariables.values;
  var chartRef = useRef(null);
  var previousTick = useRef();
  // Workaround since downstream consumers might keep regenerating the series object and useMemo does a direct in-memory comparison for the object
  var objectAgnosticSeries = JSON.stringify(series);
  var objectAgnosticThresholds = JSON.stringify(thresholds);
  var sampleValues = useMemo(function () {
    return isEditable ? generateSampleValues(series, timeDataSourceId, interval, timeRange, thresholds) : [];
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [objectAgnosticSeries, timeDataSourceId, interval, timeRange, objectAgnosticThresholds, isEditable]);
  var values = useMemo(function () {
    return isEditable ? sampleValues : valuesProp;
  }, [isEditable, sampleValues, valuesProp]);

  // Unfortunately the API returns the data out of order sometimes
  var valueSort = useMemo(function () {
    return values.sort(function (left, right) {
      return dayjs.utc(left[timeDataSourceId]).diff(dayjs.utc(right[timeDataSourceId]));
    });
  }, [values, timeDataSourceId]);

  // Checks size property against new size naming convention and reassigns to closest supported size if necessary.
  var newSize = useMemo(function () {
    return getUpdatedCardSize(size);
  }, [size]);
  var maxTicksPerSize = useMemo(function () {
    switch (newSize) {
      case CARD_SIZES.MEDIUMTHIN:
        return 2;
      case CARD_SIZES.MEDIUM:
        return 4;
      case CARD_SIZES.MEDIUMWIDE:
      case CARD_SIZES.LARGE:
      case CARD_SIZES.LARGETHIN:
        return 6;
      case CARD_SIZES.LARGEWIDE:
        return 14;
      default:
        return 10;
    }
  }, [newSize]);
  var formatTick = useCallback(
  /** *
   * timestamp of current value
   * index of current value
   * ticks: array of current ticks
   */
  function (timestamp, index, ticks) {
    var previousTimestamp = previousTick.current;
    // store current in the previous tick
    previousTick.current = timestamp;
    return formatGraphTick(timestamp, index, ticks, interval, locale, previousTimestamp, showTimeInGMT);
  }, [interval, locale, showTimeInGMT]);

  // Set the colors for each dataset
  var colors = useMemo(function () {
    return formatColors(series);
  }, [series]);

  /** This caches the chart value */
  var chartData = useMemo(function () {
    return formatChartData(timeDataSourceId, series, valueSort);
  }, [timeDataSourceId, series, valueSort]);
  var previousChartData = usePrevious(chartData);

  /** This is needed to update the chart when the lines and values change */
  useEffect(function () {
    var _chartRef$current;
    if (chartRef !== null && chartRef !== void 0 && (_chartRef$current = chartRef.current) !== null && _chartRef$current !== void 0 && _chartRef$current.chart && !isEqual(chartData, previousChartData)) {
      chartRef.current.chart.model.setData(chartData);
    }
  }, [chartData, previousChartData]);
  var isChartDataEmpty = isEmpty(chartData);
  var _useMemo = useMemo(function () {
      var columnNamesSet = new Set();
      var tableValues = valueSort.map(function (value, index) {
        Object.keys(_omit(value, timeDataSourceId)).forEach(function (key) {
          return columnNamesSet.add(key);
        });
        return {
          id: "dataindex-".concat(index),
          values: _objectSpread(_objectSpread({}, _omit(value, timeDataSourceId)), {}, _defineProperty({}, timeDataSourceId, dayjs.tz(value[timeDataSourceId]).format(defaultDateFormatPattern))),
          isSelectable: false
        };
      });
      return {
        tableData: tableValues,
        columnNames: Array.from(columnNamesSet)
      };
    }, [defaultDateFormatPattern, timeDataSourceId, valueSort]),
    tableData = _useMemo.tableData,
    columnNames = _useMemo.columnNames;

  // In expanded mode we show the data underneath the linechart in a table so need to build the columns
  var tableColumns = useMemo(function () {
    // First column is timestamp
    var columns = [{
      id: timeDataSourceId,
      name: capitalize(timeDataSourceId),
      isSortable: true,
      type: 'TIMESTAMP'
    }];
    // then the rest in series order
    return columns.concat(columnNames.map(function (columnName) {
      var matchingDataSource = Array.isArray(series) ? series.find(function (d) {
        return d.dataSourceId === columnName;
      }) : series;
      return {
        id: columnName,
        // use the label if one exists as it will be the user-defined, readable name
        // UNLESS dataFilter is enabled as the matchingDataSource will only find the first match
        name: matchingDataSource ? matchingDataSource.dataFilter ? matchingDataSource.dataSourceId : matchingDataSource.label : columnName,
        isSortable: true,
        filter: {
          placeholderText: mergedI18n.defaultFilterStringPlaceholdText
        },
        renderDataFunction: function renderDataFunction(_ref2) {
          var value = _ref2.value;
          if (typeof value === 'number' && !isNil(decimalPrecision)) {
            return chartValueFormatter(value, size, unit, locale, decimalPrecision);
          }
          return value;
        }
      };
    }));
  }, [columnNames, decimalPrecision, mergedI18n.defaultFilterStringPlaceholdText, locale, series, size, timeDataSourceId, unit]);

  // TODO: remove in next release
  var ChartComponent = chartType === TIME_SERIES_TYPES.BAR ? StackedBarChart : LineChart;
  var resizeHandles = isResizable ? getResizeHandles(children) : [];
  var handleStrokeColor = useMemo(function () {
    return applyStrokeColor(alertRanges);
  }, [alertRanges]);
  var handleFillColor = useMemo(function () {
    return applyFillColor(alertRanges);
  }, [alertRanges]);
  var handleIsFilled = useMemo(function () {
    return applyIsFilled(alertRanges);
  }, [alertRanges]);
  var options = useMemo(function () {
    return _objectSpread(_objectSpread({
      animations: false,
      accessibility: false,
      axes: {
        bottom: _objectSpread(_objectSpread({
          title: xLabel || ' ',
          mapsTo: 'date',
          scaleType: 'time',
          ticks: {
            number: maxTicksPerSize,
            formatter: formatTick
          }
        }, thresholds !== null && thresholds !== void 0 && thresholds.some(function (threshold) {
          return threshold.axis === 'x';
        }) ? {
          thresholds: thresholds === null || thresholds === void 0 ? void 0 : thresholds.filter(function (threshold) {
            return threshold.axis === 'x';
          })
        } : {}), {}, {
          includeZero: includeZeroOnXaxis
        }, domainRange ? {
          domain: domainRange
        } : {}),
        left: _objectSpread(_objectSpread({
          title: "".concat(yLabel || '', " ").concat(unit ? "(".concat(unit, ")") : ''),
          mapsTo: 'value',
          ticks: {
            formatter: function formatter(axisValue) {
              return chartValueFormatter(axisValue, newSize, null, locale, decimalPrecision);
            }
          }
        }, thresholds !== null && thresholds !== void 0 && thresholds.some(function (threshold) {
          return threshold.axis === 'y';
        }) ? {
          thresholds: thresholds === null || thresholds === void 0 ? void 0 : thresholds.filter(function (threshold) {
            return threshold.axis === 'y';
          })
        } : {}), {}, {
          stacked: chartType === TIME_SERIES_TYPES.BAR && series.length > 1,
          includeZero: includeZeroOnYaxis,
          scaleType: 'linear'
        })
      },
      legend: {
        position: legendPosition,
        clickable: !isEditable,
        enabled: showLegend !== null && showLegend !== void 0 ? showLegend : series.length > 1,
        truncation: truncation
      },
      containerResizable: true,
      tooltip: {
        showTotal: tooltipShowTotals,
        truncation: {
          type: 'none'
        },
        valueFormatter: function valueFormatter(tooltipValue) {
          return chartValueFormatter(tooltipValue, newSize, unit, locale, decimalPrecision);
        },
        customHTML: function customHTML() {
          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
          }
          return handleTooltip.apply(void 0, args.concat([alertRanges, mergedI18n.alertDetected, showTimeInGMT, tooltipDateFormatPattern, locale]));
        },
        groupLabel: mergedI18n.tooltipGroupLabel
      },
      getStrokeColor: handleStrokeColor,
      getFillColor: handleFillColor,
      getIsFilled: handleIsFilled,
      color: colors
    }, zoomBar !== null && zoomBar !== void 0 && zoomBar.enabled && (ZOOM_BAR_ENABLED_CARD_SIZES.includes(size) || isExpanded) ? {
      zoomBar: {
        // [zoomBar.axes]: {    TODO: the top axis is the only axis supported at the moment so default to top
        top: {
          enabled: zoomBar.enabled,
          initialZoomDomain: zoomBar.initialZoomDomain,
          type: zoomBar.view || 'slider_view' // default to slider view
        }
      }
    } : {}), {}, {
      timeScale: {
        addSpaceOnEdges: !isNil(addSpaceOnEdges) ? addSpaceOnEdges : 1
      },
      toolbar: {
        enabled: false
      }
    });
  }, [xLabel, maxTicksPerSize, formatTick, thresholds, includeZeroOnXaxis, domainRange, yLabel, unit, chartType, series.length, includeZeroOnYaxis, legendPosition, isEditable, showLegend, truncation, tooltipShowTotals, mergedI18n.tooltipGroupLabel, mergedI18n.alertDetected, handleStrokeColor, handleFillColor, handleIsFilled, colors, zoomBar, size, isExpanded, addSpaceOnEdges, newSize, locale, decimalPrecision, alertRanges, showTimeInGMT, tooltipDateFormatPattern]);
  return /*#__PURE__*/React__default.createElement(Card, _extends({
    title: title,
    size: newSize,
    i18n: mergedI18n,
    timeRange: timeRange
  }, others, {
    locale: locale,
    timeZone: effectiveTimezone,
    isExpanded: isExpanded,
    isEditable: isEditable,
    isEmpty: isChartDataEmpty,
    isLazyLoading: isLazyLoading || valueSort && valueSort.length > 200,
    isLoading: isLoading,
    resizeHandles: resizeHandles,
    testId: testID || testId
  }), !isChartDataEmpty ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(iotPrefix, "--time-series-card--wrapper"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--time-series-card--wrapper__expanded"), isExpanded), "".concat(iotPrefix, "--time-series-card--wrapper__lots-of-points"), valueSort && valueSort.length > 50), "".concat(iotPrefix, "--time-series-card--wrapper__editable"), isEditable))
  }, /*#__PURE__*/React__default.createElement(ChartComponent, {
    ref: chartRef,
    data: chartData,
    options: options,
    width: "100%",
    height: "100%",
    key: "thresholds-key".concat(thresholds !== null && thresholds !== void 0 && thresholds.length ? objectAgnosticThresholds : '') // have to regen the component if thresholds change
  })), isExpanded ? /*#__PURE__*/React__default.createElement(StatefulTable, {
    testId: "".concat(testId, "-table"),
    id: "TimeSeries-table",
    className: "".concat(iotPrefix, "--time-series-card--stateful-table"),
    columns: tableColumns,
    data: tableData,
    options: {
      hasPagination: true,
      hasSearch: true,
      hasFilter: true
    },
    actions: {
      toolbar: {
        onDownloadCSV: function onDownloadCSV(filteredData) {
          return csvDownloadHandler(filteredData, title);
        }
      }
    },
    view: {
      pagination: {
        pageSize: 10,
        pageSizes: [10, 20, 30]
      },
      toolbar: {
        activeBar: null
      },
      filters: [],
      table: {
        sort: {
          columnId: timeDataSourceId,
          direction: 'DESC'
        },
        emptyState: {
          message: mergedI18n.noDataLabel
        }
      }
    },
    i18n: mergedI18n
  }) : null) : null);
};
TimeSeriesCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes), TimeSeriesCardPropTypes);
TimeSeriesCard.defaultProps = defaultProps;
TimeSeriesCard.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TimeSeriesCard",
  "props": {
    "size": {
      "defaultValue": {
        "value": "CARD_SIZES.MEDIUM",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "(props, propName, componentName) => {\n  let error;\n  if (!Object.keys(CARD_SIZES).includes(props[propName])) {\n    error = new Error(\n      `\\`${componentName}\\` prop \\`${propName}\\` must be one of ${Object.keys(CARD_SIZES).join(\n        ','\n      )}.`\n    );\n  }\n  // If the size\n  if (\n    props[propName] === CARD_SIZES.SMALL ||\n    props[propName] === CARD_SIZES.SMALLWIDE ||\n    props[propName] === CARD_SIZES.SMALLFULL\n  ) {\n    error = new Error(\n      `Deprecation notice: \\`${componentName}\\` prop \\`${propName}\\` cannot be \\`${props[propName]}\\` as the charts will not render correctly. Minimum size is \\`MEDIUM\\``\n    );\n  }\n  return error;\n}"
      },
      "required": false
    },
    "values": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "array of data from the backend for instance [{timestamp: Date object || ms timestamp, temperature: 35, humidity: 10}, ...]",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "timestamp": {
              "name": "union",
              "value": [{
                "name": "number"
              }, {
                "name": "string"
              }, {
                "name": "instanceOf",
                "value": "Date"
              }],
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  alertDetected: 'Alert detected:',\n  noDataLabel: 'No data is available for this time range.',\n  tooltipGroupLabel: 'Group',\n  defaultFilterStringPlaceholdText: 'Filter',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "alertDetected": {
            "name": "string",
            "required": false
          },
          "noData": {
            "name": "string",
            "required": false
          },
          "tooltipGroupLabel": {
            "name": "string",
            "required": false
          },
          "defaultFilterStringPlaceholdText": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "chartType": {
      "defaultValue": {
        "value": "TIME_SERIES_TYPES.LINE",
        "computed": true
      },
      "required": false
    },
    "locale": {
      "defaultValue": {
        "value": "'en'",
        "computed": false
      },
      "description": "Region for value and text formatting",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "timeZone": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "required": false
    },
    "content": {
      "defaultValue": {
        "value": "{\n  series: [],\n  timeDataSourceId: 'timestamp',\n  includeZeroOnXaxis: false,\n  includeZeroOnYaxis: false,\n  showLegend: true,\n  legendPosition: 'bottom',\n  truncation: {\n    type: 'end_line',\n    threshold: 20,\n    numCharacter: 20,\n  },\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "series": {
            "name": "union",
            "value": [{
              "name": "custom",
              "raw": "TimeSeriesDatasetPropTypes"
            }, {
              "name": "arrayOf",
              "value": {
                "name": "custom",
                "raw": "TimeSeriesDatasetPropTypes"
              }
            }],
            "required": true
          },
          "xLabel": {
            "name": "string",
            "description": "Custom X-axis label",
            "required": false
          },
          "yLabel": {
            "name": "string",
            "description": "Custom Y-axis label",
            "required": false
          },
          "decimalPrecision": {
            "name": "number",
            "description": "the number of decimals to show in the legend and on the y-axis",
            "required": false
          },
          "includeZeroOnXaxis": {
            "name": "bool",
            "description": "Optionally hide zero. Useful when chart values are not close to zero, giving a better view of the meaningful data",
            "required": false
          },
          "includeZeroOnYaxis": {
            "name": "bool",
            "description": "Optionally hide zero. Useful when chart values are not close to zero, giving a better view of the meaningful data",
            "required": false
          },
          "timeDataSourceId": {
            "name": "string",
            "description": "Which attribute is the time attribute i.e. 'timestamp'",
            "required": false
          },
          "chartType": {
            "name": "custom",
            "raw": "deprecate(\n  PropTypes.oneOf(Object.values(TIME_SERIES_TYPES)),\n  '\\nThe prop `chartType` for Card has been deprecated. BarChartCard now handles all bar chart functionality including time-based bar charts.'\n)",
            "description": "should it be a line chart or bar chart, default is line chart",
            "required": false
          },
          "unit": {
            "name": "string",
            "description": "optional units to put in the legend",
            "required": false
          },
          "zoomBar": {
            "name": "custom",
            "raw": "ZoomBarPropTypes",
            "description": "Optionally adds a zoom bar to the chart",
            "required": false
          },
          "addSpaceOnEdges": {
            "name": "number",
            "description": "Number of grid-line spaces to the left and right of the chart to add white space to. Defaults to 1",
            "required": false
          },
          "showLegend": {
            "name": "bool",
            "description": "whether or not to show a legend at the bottom of the card\nif not explicitly stated, the card will show based on the length of the series",
            "required": false
          },
          "legendPosition": {
            "name": "string",
            "description": "Where to place the chart legend",
            "required": false
          },
          "truncation": {
            "name": "custom",
            "raw": "TruncationPropTypes",
            "description": "carbon charts legend truncation options",
            "required": false
          },
          "alertRanges": {
            "name": "arrayOf",
            "value": {
              "name": "shape",
              "value": {
                "endTimestamp": {
                  "name": "number",
                  "required": false
                },
                "startTimestamp": {
                  "name": "number",
                  "required": false
                },
                "color": {
                  "name": "string",
                  "description": "color of the alert",
                  "required": false
                },
                "details": {
                  "name": "string",
                  "description": "more information about the alert",
                  "required": false
                }
              }
            },
            "description": "if there are alerts associated with this chart (used to markup datapoints), this is a start/end set of alert ranges for each alert",
            "required": false
          },
          "thresholds": {
            "name": "arrayOf",
            "value": {
              "name": "shape",
              "value": {
                "axis": {
                  "name": "enum",
                  "value": [{
                    "value": "'x'",
                    "computed": false
                  }, {
                    "value": "'y'",
                    "computed": false
                  }],
                  "required": false
                },
                "value": {
                  "name": "number",
                  "required": false
                },
                "label": {
                  "name": "string",
                  "required": false
                },
                "fillColor": {
                  "name": "string",
                  "required": false
                }
              }
            },
            "description": "set of thresholds these render dotted lines on the graph to indicate that the line values might be crossing logical thresholds",
            "required": false
          }
        }
      },
      "required": false
    },
    "interval": {
      "defaultValue": {
        "value": "'hour'",
        "computed": false
      },
      "description": "Interval for time series configuration used for formatting the x-axis",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'minute'",
          "computed": false
        }, {
          "value": "'hour'",
          "computed": false
        }, {
          "value": "'day'",
          "computed": false
        }, {
          "value": "'week'",
          "computed": false
        }, {
          "value": "'quarter'",
          "computed": false
        }, {
          "value": "'month'",
          "computed": false
        }, {
          "value": "'year'",
          "computed": false
        }]
      },
      "required": false
    },
    "showTimeInGMT": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Show timestamp in browser local time or GMT",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "domainRange": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "optional domain to graph from. First value is the beginning of the range. Second value is the end of the range\ncan be date instance or timestamp",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "union",
          "value": [{
            "name": "number"
          }, {
            "name": "object"
          }]
        }
      },
      "required": false
    },
    "tooltipDateFormatPattern": {
      "defaultValue": {
        "value": "DAYJS_INPUT_FORMATS.SECONDS",
        "computed": true
      },
      "description": "tooltip format pattern that follows the dayjs formatting patterns",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "tooltipShowTotals": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "should the tooltip total the line chart values?",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "defaultDateFormatPattern": {
      "defaultValue": {
        "value": "DAYJS_INPUT_FORMATS.SECONDS",
        "computed": true
      },
      "description": "default date format pattern that follows the dayjs formatting patterns",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "cardVariables": {
      "description": "",
      "type": {
        "name": "objectOf",
        "value": {
          "name": "union",
          "value": [{
            "name": "string"
          }, {
            "name": "func"
          }, {
            "name": "number"
          }, {
            "name": "bool"
          }]
        }
      },
      "required": false
    },
    "testID": {
      "description": "",
      "type": {
        "name": "custom",
        "raw": "deprecate(\n  PropTypes.string,\n  `The 'testID' prop has been deprecated. Please use 'testId' instead.`\n)"
      },
      "required": false
    },
    "testId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    }
  },
  "composes": ["../../constants/CardPropTypes"]
};
var TimeSeriesCard$1 = TimeSeriesCard;

export { TimeSeriesCard$1 as default };
