wix-style-react
Version:
309 lines (258 loc) • 12.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
var _StackedBarChartSt = require("./StackedBarChart.st.css");
var _colorsSt = require("../Foundation/stylable/colors.st.css");
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"));
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) { (0, _defineProperty2["default"])(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; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var defaultYAxisTickFormat = (0, _d3Format.format)(',');
var CONSTANTS = {
top: 30,
right: 30,
bottom: 30,
left: 100,
gap: 18,
barWidth: 48
};
/** StackedBarChart */
var StackedBarChart = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(StackedBarChart, _React$PureComponent);
var _super = _createSuper(StackedBarChart);
function StackedBarChart(props) {
var _this;
(0, _classCallCheck2["default"])(this, StackedBarChart);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getAmountOfBarsCanRender", function (data) {
var width = _this.props.width;
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;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_update", function () {
var _this$props = _this.props,
data = _this$props.data,
yAxisTickFormat = _this$props.yAxisTickFormat,
width = _this$props.width;
var _this$state = _this.state,
svg = _this$state.svg,
x = _this$state.x,
y = _this$state.y; // Data
var _data = _this._getAmountOfBarsCanRender(data).map(function (d) {
return _objectSpread(_objectSpread({}, d), {}, {
sum: d.values.reduce(function (a, b) {
return 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(function (d) {
return d.label;
})).range([0, scaleWidth]).paddingInner(innerPadding).paddingOuter(scalesPadding).round(true);
var _y = y.domain([0, Math.max.apply(Math, (0, _toConsumableArray2["default"])(_data.map(function (d) {
return d.sum;
})))]);
var yAxis = (0, _d3Axis.axisRight)(_y).tickSize(width).tickFormat(function (d) {
return yAxisTickFormat(d, defaultYAxisTickFormat(d));
}).ticks(4);
svg.select("[data-hook=\"".concat(_constants.dataHooks.yAxis, "\"]")).call(yAxis).selectAll('.tick text').attr('x', -6).attr('dy', 4);
_this.setState({
data: _data,
x: _x,
y: _y,
yAxis: yAxis,
width: width
});
});
_this.chart = /*#__PURE__*/_react["default"].createRef();
window.chart = (0, _assertThisInitialized2["default"])(_this);
_this.data = [];
_this.colors = [_colorsSt.stVars.A1, _colorsSt.stVars.A6];
_this.margin = Object.assign(CONSTANTS, props.margin);
_this.height = props.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
};
return _this;
}
(0, _createClass2["default"])(StackedBarChart, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
svg: (0, _d3Selection.select)(this.chart.current)
}, this._update);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
this.setState({
svg: (0, _d3Selection.select)(this.chart.current)
}, this._update);
return true;
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
tooltipTemplate = _this$props2.tooltipTemplate,
tooltipCommonProps = _this$props2.tooltipCommonProps,
className = _this$props2.className,
dataHook = _this$props2.dataHook;
var _this$state2 = this.state,
data = _this$state2.data,
x = _this$state2.x,
y = _this$state2.y,
width = _this$state2.width;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _StackedBarChartSt.st)(_StackedBarChartSt.classes.root, {}, className)
}, /*#__PURE__*/_react["default"].createElement("svg", {
ref: this.chart,
width: width,
height: this.height
}, /*#__PURE__*/_react["default"].createElement("g", {
"data-hook": _constants.dataHooks.yAxis,
className: _StackedBarChartSt.classes.yAxis,
transform: "translate(".concat(this.margin.left, ", ").concat(this.margin.top, ")")
}), /*#__PURE__*/_react["default"].createElement("g", {
"data-hook": _constants.dataHooks.bars,
transform: "translate(".concat(this.margin.left, ", ").concat(this.margin.top, ")")
}, data.map(function (d, itemIndex) {
var stacked = _this2.chartHeight;
return /*#__PURE__*/_react["default"].createElement("g", {
key: itemIndex
}, d.values.map(function (value, index) {
var height = _this2.chartHeight - y(value);
stacked -= height;
return /*#__PURE__*/_react["default"].createElement("rect", {
key: index,
fill: _this2.colors[index],
height: height,
width: CONSTANTS.barWidth,
x: x(d.label) - 25,
y: stacked
});
}));
}))), data && data.map(function (d, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: _StackedBarChartSt.classes.textPosition,
style: {
left: x(d.label) + _this2.margin.left - 25,
top: _this2.height - 15
}
}, /*#__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
}, d.label));
}), tooltipTemplate && data.map(function (d, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: _StackedBarChartSt.classes.tooltip,
style: {
left: x(d.label) + _this2.margin.left - 25,
top: y(d.sum) + _this2.margin.top
}
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipCommonProps, {
content: tooltipTemplate(d),
dataHook: _constants.dataHooks.tooltip
}), /*#__PURE__*/_react["default"].createElement("button", {
className: _StackedBarChartSt.classes.tooltipInner,
style: {
height: "".concat(_this2.chartHeight - y(d.sum), "px")
}
})));
}));
}
}]);
return StackedBarChart;
}(_react["default"].PureComponent);
StackedBarChart.displayName = 'StackedBarChart';
StackedBarChart.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** A css class to be applied to the component's root element */
className: _propTypes["default"].string,
/** Chart data */
data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
label: _propTypes["default"].node,
values: _propTypes["default"].arrayOf(_propTypes["default"].number)
})),
/** Tooltip template function */
tooltipTemplate: _propTypes["default"].func,
/** Props that modify the Tooltip created from text bar charts */
tooltipCommonProps: _propTypes["default"].shape(_TooltipCommon.TooltipCommonProps),
/** Chart height (px) */
height: _propTypes["default"].number,
/** Chart width (px) */
width: _propTypes["default"].number,
/** Margin (px) for each side of the Chart. For example, in order to render larger number of digits at the yAxis, increase the left margin prop. */
margin: _propTypes["default"].shape({
right: _propTypes["default"].number,
left: _propTypes["default"].number,
bottom: _propTypes["default"].number,
top: _propTypes["default"].number
}),
/**
* ##### Formats Y axis ticks
* * `param` {string} `rawValue` - a raw value e.g. 10000
* * `param` {string} `rawValue` - number formatted value, comma separated e.g. 10,000
* * `return` {string} - the value to be shown as Y axis tick
*/
yAxisTickFormat: _propTypes["default"].func
};
StackedBarChart.defaultProps = {
data: [],
width: 900,
height: 350,
margin: CONSTANTS,
tooltipCommonProps: {},
yAxisTickFormat: defaultYAxisTickFormat
};
var _default = StackedBarChart;
exports["default"] = _default;