wix-style-react
Version:
wix-style-react
315 lines (311 loc) • 11.4 kB
JavaScript
"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 _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"));
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/StackedBarChart/StackedBarChart.js";
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
};
/** StackedBarChart */
class StackedBarChart extends _react.default.PureComponent {
constructor(props) {
super(props);
this._getAmountOfBarsCanRender = data => {
var {
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,
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, "\"]")).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();
window.chart = this;
this.data = [];
this.colors = [_colorsSt.stVars.A1, _colorsSt.stVars.A6];
this.newBrandingColors = [_colorsSt.stVars.A1, _colorsSt.stVars.A2];
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
};
}
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;
}
}
render() {
var {
tooltipTemplate,
tooltipCommonProps,
className,
dataHook
} = this.props;
var {
data,
x,
y,
width
} = this.state;
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _StackedBarChartSt.st)(_StackedBarChartSt.classes.root, {}, className),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("svg", {
ref: this.chart,
width: width,
height: this.height,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 13
}
}, /*#__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: 148,
columnNumber: 15
}
}), /*#__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: 154,
columnNumber: 15
}
}, data.map((d, itemIndex) => {
var stacked = this.chartHeight;
return /*#__PURE__*/_react.default.createElement("g", {
key: itemIndex,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 21
}
}, d.values.map((value, index) => {
var height = this.chartHeight - y(value);
stacked -= height;
return /*#__PURE__*/_react.default.createElement("rect", {
key: index,
fill: newColorsBranding ? this.newBrandingColors[index] : this.colors[index],
height: height,
width: CONSTANTS.barWidth,
x: x(d.label) - 25,
y: stacked,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 27
}
});
}));
}))), 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: 187,
columnNumber: 17
}
}, /*#__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: 195,
columnNumber: 19
}
}, 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: 213,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, tooltipCommonProps, {
content: tooltipTemplate(d),
dataHook: _constants.dataHooks.tooltip,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 19
}
}), /*#__PURE__*/_react.default.createElement("button", {
className: _StackedBarChartSt.classes.tooltipInner,
style: {
height: "".concat(this.chartHeight - y(d.sum), "px")
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 21
}
})))));
});
}
}
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
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
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 = exports.default = StackedBarChart;
//# sourceMappingURL=StackedBarChart.js.map