"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _StackedBarChartSt = require("./StackedBarChart.st.css.js");
var _colorsSt = require("../Foundation/stylable/colors.st.css.js");
var _d3Scale = require("d3-scale");
var _d3Selection = require("d3-selection");
var _d3Axis = require("d3-axis");
var _d3Format = require("d3-format");
var _constants = require("./constants");
var _Text = _interopRequireDefault(require("../Text"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/StackedBarChart/StackedBarChart.tsx";
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; }
var defaultYAxisTickFormat = (0, _d3Format.format)(',');
var CONSTANTS = {
  top: 30,
  right: 30,
  bottom: 30,
  left: 100,
  gap: 18,
  barWidth: 48
};
class StackedBarChart extends _react.default.PureComponent {
  constructor(props) {
    var _this, _props$height;
    super(props);
    _this = this;
    this.chart = void 0;
    this.data = void 0;
    this.colors = [_colorsSt.stVars.A1, _colorsSt.stVars.A2];
    this.margin = void 0;
    this.height = void 0;
    this.chartHeight = void 0;
    this._getAmountOfBarsCanRender = function () {
      var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
      var {
        width = StackedBarChart.defaultProps.width
      } = _this.props;
      var result = [];
      var availableWidthForBars = width - _this.margin.left;
      var barWidth = CONSTANTS.barWidth + CONSTANTS.gap;
      var availableBarsForRender = Math.floor(availableWidthForBars / barWidth);
      for (var i = 0; i < availableBarsForRender; i++) {
        if (!!data[i]) {
          result.push(data[i]);
        }
      }
      return result;
    };
    this._update = () => {
      var {
        data,
        yAxisTickFormat = StackedBarChart.defaultProps.yAxisTickFormat,
        width = StackedBarChart.defaultProps.width
      } = this.props;
      var {
        svg,
        x,
        y
      } = this.state;

      // Data
      var _data = this._getAmountOfBarsCanRender(data).map(d => _objectSpread(_objectSpread({}, d), {}, {
        sum: d.values.reduce((a, b) => a + b, 0)
      }));
      var innerPadding = _data.length > 4 ? 0.8 : 0.75;
      var scalesPadding = 0.5;
      var scaleWidth = _data.length * (CONSTANTS.barWidth + CONSTANTS.gap) + CONSTANTS.gap;

      // Scales
      var _x = x.domain(_data.map(d => d.label)).range([0, scaleWidth]).paddingInner(innerPadding).paddingOuter(scalesPadding).round(true);
      var _y = y.domain([0, Math.max(..._data.map(d => d.sum))]);
      var yAxis = (0, _d3Axis.axisRight)(_y).tickSize(width).tickFormat(d => yAxisTickFormat(d, defaultYAxisTickFormat(d))).ticks(4);
      svg.select("[data-hook=\"".concat(_constants.dataHooks.yAxis, "\"]"))
      // @ts-expect-error some confusion between call signatures - generic gets lost?
      .call(yAxis).selectAll('.tick text').attr('x', -6).attr('dy', 4);
      this.setState({
        data: _data,
        x: _x,
        y: _y,
        yAxis,
        width
      });
    };
    this.chart = /*#__PURE__*/_react.default.createRef();
    this.data = [];
    this.margin = Object.assign(CONSTANTS, props.margin);
    this.height = (_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : StackedBarChart.defaultProps.height;
    this.chartHeight = this.height - this.margin.top - this.margin.bottom;
    this.state = {
      data: [],
      x: (0, _d3Scale.scaleBand)().range([0, props.weight]),
      y: (0, _d3Scale.scaleLinear)().range([this.chartHeight, 0]),
      width: props.weight
    };
  }
  componentDidMount() {
    this.setState({
      svg: (0, _d3Selection.select)(this.chart.current)
    }, this._update);
  }
  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) {
      this.setState({
        svg: (0, _d3Selection.select)(this.chart.current)
      }, this._update);
      return true;
    }
    return false;
  }
  render() {
    var {
      tooltipTemplate,
      tooltipCommonProps,
      className,
      dataHook
    } = this.props;
    var {
      data,
      x,
      y,
      width
    } = this.state;
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": dataHook,
      className: (0, _StackedBarChartSt.st)(_StackedBarChartSt.classes.root, {}, className),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 191,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("svg", {
      ref: this.chart,
      width: width,
      height: this.height,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 193,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement("g", {
      "data-hook": _constants.dataHooks.yAxis,
      className: _StackedBarChartSt.classes.yAxis,
      transform: "translate(".concat(this.margin.left, ", ").concat(this.margin.top, ")"),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 195,
        columnNumber: 11
      }
    }), /*#__PURE__*/_react.default.createElement("g", {
      "data-hook": _constants.dataHooks.bars,
      transform: "translate(".concat(this.margin.left, ", ").concat(this.margin.top, ")"),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 201,
        columnNumber: 11
      }
    }, data.map((d, itemIndex) => {
      var stacked = this.chartHeight;
      return /*#__PURE__*/_react.default.createElement("g", {
        key: itemIndex,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 208,
          columnNumber: 17
        }
      }, d.values.map((value, index) => {
        var height = this.chartHeight - y(value);
        stacked -= height;
        return /*#__PURE__*/_react.default.createElement("rect", {
          key: index,
          fill: this.colors[index],
          height: height,
          width: CONSTANTS.barWidth,
          x: x(d.label) - 25,
          y: stacked,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 213,
            columnNumber: 23
          }
        });
      }));
    }))), data && data.map((d, index) => /*#__PURE__*/_react.default.createElement("div", {
      key: index,
      className: _StackedBarChartSt.classes.textPosition,
      style: {
        left: x(d.label) + this.margin.left - 25,
        top: this.height - 15
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 230,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
      textAlign: "center",
      skin: "standard",
      light: true,
      secondary: true,
      weight: "normal",
      size: "small",
      ellipsis: true,
      "data-hook": _constants.dataHooks.xAxis,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 238,
        columnNumber: 15
      }
    }, d.label))), tooltipTemplate && data.map((d, index) => /*#__PURE__*/_react.default.createElement("div", {
      key: index,
      className: _StackedBarChartSt.classes.tooltip,
      style: {
        left: x(d.label) + this.margin.left - 25,
        top: y(d.sum) + this.margin.top
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 256,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, tooltipCommonProps, {
      content: tooltipTemplate(d),
      dataHook: _constants.dataHooks.tooltip,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 264,
        columnNumber: 15
      }
    }), /*#__PURE__*/_react.default.createElement("button", {
      className: _StackedBarChartSt.classes.tooltipInner,
      style: {
        height: "".concat(this.chartHeight - y(d.sum), "px")
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 269,
        columnNumber: 17
      }
    })))));
  }
}
StackedBarChart.displayName = 'StackedBarChart';
StackedBarChart.defaultProps = {
  data: [],
  width: 900,
  height: 350,
  margin: CONSTANTS,
  tooltipCommonProps: {},
  yAxisTickFormat: defaultYAxisTickFormat
};
var _default = exports.default = StackedBarChart;
//# sourceMappingURL=StackedBarChart.js.map