@wix/design-system
Version:
@wix/design-system
204 lines (201 loc) • 7.79 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FunnelChartSt = require("./FunnelChart.st.css.js");
var _FunnelLabel = require("./FunnelLabel");
var _FunnelBar = require("./FunnelBar");
var _FunnelStep = require("./FunnelStep");
var _numberFormatters = require("../utils/numberFormatters");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FunnelChart/FunnelChart.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// TODO - this can be memoized
var calculateBarsHeights = _ref => {
var {
funnelChartData,
startValue
} = _ref;
return funnelChartData.map(i => {
var percentage = (0, _numberFormatters.countPercentageFromBase)(startValue, i.value, 0);
return percentage > 100 ? 100 : percentage;
});
};
/** FunnelChart */
var FunnelChart = _ref2 => {
var {
dataHook,
className,
data,
hideDifferenceBadge,
fullHeight,
differenceBadgeSkin = 'standard',
differenceBadgeProps = () => ({}),
differenceBadgeTooltipContent = () => '',
differenceBadgeTooltipProps = () => ({}),
onDifferenceBadgeTooltipShow = () => {},
differenceStepSkin = () => 'standard'
} = _ref2;
if (data.length < 2) {
return null;
}
var barsHeights = calculateBarsHeights({
funnelChartData: data,
startValue: data[0].value
});
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _FunnelChartSt.st)(_FunnelChartSt.classes.root, className),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("section", {
className: (0, _FunnelChartSt.st)(_FunnelChartSt.classes.funnel, {
fullHeight
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 7
}
}, data.map((item, index) => {
var currentBarHeight = barsHeights[index];
var nextBarHeight = barsHeights[index + 1];
var isLastItem = index === data.length - 1;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
key: item.label,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_FunnelBar.FunnelBar, {
height: currentBarHeight,
dataHook: _constants.dataHooks.funnelChartItem,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 15
}
}), isLastItem || data[index + 1].value === 0 ? /*#__PURE__*/_react.default.createElement(_FunnelStep.EmptyFunnelStep, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 17
}
}) : /*#__PURE__*/_react.default.createElement(_FunnelStep.FunnelStep, {
currentBarIndex: index,
currentBarData: data[index],
nextBarData: data[index + 1],
currentBarHeight: currentBarHeight,
nextBarHeight: nextBarHeight,
hideDifferenceBadge: hideDifferenceBadge,
differenceBadgeSkin: differenceBadgeSkin // mark as deprecated
,
getDifferenceBadgeProps: differenceBadgeProps,
getDifferenceStepSkin: differenceStepSkin,
getTooltipContent: differenceBadgeTooltipContent,
getTooltipProps: differenceBadgeTooltipProps,
onTooltipShow: onDifferenceBadgeTooltipShow,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 17
}
}));
})), /*#__PURE__*/_react.default.createElement("section", {
className: _FunnelChartSt.classes.labels,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 7
}
}, data.map(item => {
return /*#__PURE__*/_react.default.createElement("div", {
key: item.label,
className: _FunnelChartSt.classes.labelWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_FunnelLabel.FunnelLabel, {
value: item.value,
label: item.label,
displayValue: item.displayValue,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 15
}
}));
})));
};
FunnelChart.displayName = 'FunnelChart';
FunnelChart.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className: _propTypes.default.string,
/**
* Array of Funnel Chart items
* * `value` - Item's value.
* * `label` - Short label under the value.
* * `displayValue` - Item's value send by the user.
*/
data: _propTypes.default.arrayOf(_propTypes.default.shape({
value: _propTypes.default.number.isRequired,
label: _propTypes.default.string.isRequired,
displayValue: _propTypes.default.string
})).isRequired,
/** When provided, allows bars to take full height */
fullHeight: _propTypes.default.bool,
/** A flag that controls the appearance of the calculated percentage badge */
hideDifferenceBadge: _propTypes.default.bool,
/** When provided, changes badge skin
* @deprecated
*/
differenceBadgeSkin: _propTypes.default.oneOf(['standard', 'dark']),
/** Returns the step skin by current index, badge's percentage and raw values
* ##### Signature:
* `({currentIndex: number, difference: string, differenceValue: number}) => 'standard' | 'success'`
*/
differenceStepSkin: _propTypes.default.func,
/** Returns the badge props by current index, badge's percentage and raw values
* ##### Signature:
* `({currentIndex: number, difference: string, differenceValue: number}) => FunnelBadgeCommonProps`
*/
differenceBadgeProps: _propTypes.default.func,
/** Returns the tooltip props by current index, badge's percentage and raw values
* ##### Signature:
* `({currentIndex: number, difference: string, differenceValue: number}) => React.ReactNode`
*/
differenceBadgeTooltipContent: _propTypes.default.func,
/** Returns the tooltip props by current index, badge's percentage and raw values
* ##### Signature:
* `({currentIndex: number, difference: string, differenceValue: number}) => TooltipCommonProps`
*/
differenceBadgeTooltipProps: _propTypes.default.func,
/** Callback on tooltip content show event by current index, badge's percentage and raw values
* ##### Signature:
* `({currentIndex: number, difference: string, differenceValue: number}) => void`
*/
onDifferenceBadgeTooltipShow: _propTypes.default.func
};
var _default = exports.default = FunnelChart;
//# sourceMappingURL=FunnelChart.js.map