"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _reactChartjs = require("react-chartjs-2");
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _numberFormatters = require("../utils/numberFormatters");
var _chartOptions = require("./chartOptions");
var _AreaChartSt = require("./AreaChart.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AreaChart/AreaChart.jsx";
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) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
_reactChartjs.defaults.global.defaultFontFamily = 'Madefor, Helvetica Neue';

/** An area chart is a way of plotting data points on a line. Often, it is used to show trend data */
var AreaChart = /*#__PURE__*/function (_React$PureComponent) {
  function AreaChart() {
    var _this;
    (0, _classCallCheck2["default"])(this, AreaChart);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, AreaChart, [].concat(args));
    _this.cursorLine = null;
    _this.handleHover = function (_, activeItems) {
      var tooltipItem = activeItems[0];
      if (tooltipItem) {
        var providedTooltipItem = _this.props.data[tooltipItem._index];
        var onTooltipShow = _this.props.onTooltipShow;
        onTooltipShow && onTooltipShow(providedTooltipItem);
      }
    };
    _this.handleHoverThrottled = (0, _throttle["default"])(_this.handleHover, 100);
    _this.onMouseMove = function (tooltip) {
      if (tooltip.y < 0) {
        tooltip.y = tooltip.y + tooltip.height + tooltip.caretSize + tooltip.xPadding;
        tooltip.yAlign = 'top';
      }
      if (tooltip.opacity) {
        _this.cursorLine.style.opacity = '1';
        _this.cursorLine.style.left = "".concat(tooltip.caretX, "px");
        return;
      }
      _this.cursorLine.style.opacity = '0';
    };
    return _this;
  }
  (0, _inherits2["default"])(AreaChart, _React$PureComponent);
  return (0, _createClass2["default"])(AreaChart, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props = this.props,
        _this$props$data = _this$props.data,
        data = _this$props$data === void 0 ? [] : _this$props$data,
        tooltipContent = _this$props.tooltipContent,
        maxYTicksLimit = _this$props.maxYTicksLimit,
        dataHook = _this$props.dataHook,
        className = _this$props.className;
      var labels = data.map(function (i) {
        return i.label;
      });
      var dataset = data.map(function (i) {
        return i.value;
      });
      return /*#__PURE__*/_react["default"].createElement("section", {
        className: (0, _AreaChartSt.st)(_AreaChartSt.classes.lineChart, className),
        "data-hook": dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 67,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_reactChartjs.Line, {
        redraw: true,
        data: {
          labels: labels,
          datasets: [_objectSpread(_objectSpread({}, _chartOptions.DATASET_PROPS), {}, {
            data: dataset
          })]
        },
        options: _objectSpread(_objectSpread({}, _chartOptions.OPTIONS_PROPS), {}, {
          scales: {
            xAxes: [{
              gridLines: _objectSpread(_objectSpread({}, _chartOptions.GRIDLINE_PROPS), {}, {
                tickMarkLength: 0
              }),
              ticks: {
                padding: 5,
                fontColor: _AreaChartSt.stVars.gridLineZeroLineColor,
                maxRotation: 0
              }
            }],
            yAxes: [{
              ticks: _objectSpread(_objectSpread({}, _chartOptions.Y_AXES_TICKS_PROPS), {}, {
                maxTicksLimit: maxYTicksLimit,
                fontColor: _AreaChartSt.stVars.gridLineZeroLineColor,
                callback: function () {
                  var precision;
                  return function (value, index, values) {
                    if (index === values.length - 1) {
                      return;
                    }
                    if (!precision) {
                      precision = (0, _numberFormatters.calcPrecision)(values);
                    }
                    return (0, _numberFormatters.formatToCompactNumber)(value, precision).toLocaleLowerCase();
                  };
                }()
              }),
              gridLines: _objectSpread({
                tickMarkLength: -1
              }, _chartOptions.GRIDLINE_PROPS)
            }]
          },
          tooltips: _objectSpread(_objectSpread({}, _chartOptions.TOOLTIP_PROPS), {}, {
            enabled: !!tooltipContent,
            custom: this.onMouseMove,
            callbacks: {
              title: function title() {
                return '';
              },
              label: function label(tooltipItem) {
                return tooltipContent && tooltipContent((0, _toConsumableArray2["default"])(data)[tooltipItem.index], tooltipItem.index);
              }
            }
          }),
          onHover: this.handleHoverThrottled
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 71,
          columnNumber: 9
        }
      }), /*#__PURE__*/_react["default"].createElement("div", {
        ref: function ref(line) {
          _this2.cursorLine = line;
        },
        className: _AreaChartSt.classes.lineChartCursor,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 144,
          columnNumber: 9
        }
      }));
    }
  }]);
}(_react["default"].PureComponent);
AreaChart.displayName = 'AreaChart';
AreaChart.defaultProps = {
  maxYTicksLimit: 5
};
var _default = exports["default"] = AreaChart;