wix-style-react
Version:
116 lines (105 loc) • 4.12 kB
JavaScript
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { classes } from './FunnelChart.st.css';
import { FunnelLabel } from './FunnelLabel';
import { FunnelBar } from './FunnelBar';
import { FunnelStep, EmptyFunnelStep } from './FunnelStep';
import { countPercentageFromBase } from '../utils/numberFormatters';
import { dataHooks } from './constants'; // TODO - this can be memoized
var calculateBarsHeights = function calculateBarsHeights(_ref) {
var funnelChartData = _ref.funnelChartData,
startValue = _ref.startValue;
return funnelChartData.map(function (i) {
var percentage = countPercentageFromBase(startValue, i.value, 0);
return percentage > 100 ? 100 : percentage;
});
};
/** FunnelChart */
var FunnelChart = function FunnelChart(props) {
var dataHook = props.dataHook,
className = props.className,
data = props.data,
hideDifferenceBadge = props.hideDifferenceBadge,
differenceBadgeTooltipContent = props.differenceBadgeTooltipContent,
onDifferenceBadgeTooltipShow = props.onDifferenceBadgeTooltipShow;
if (data.length < 2) {
return null;
}
var barsHeights = calculateBarsHeights({
funnelChartData: data,
startValue: data[0].value
});
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
className: className
}, /*#__PURE__*/React.createElement("section", {
className: classes.funnel
}, data.map(function (item, index) {
var currentBarHeight = barsHeights[index];
var nextBarHeight = barsHeights[index + 1];
var isLastItem = index === data.length - 1;
return /*#__PURE__*/React.createElement(Fragment, {
key: item.label
}, /*#__PURE__*/React.createElement(FunnelBar, {
height: currentBarHeight,
dataHook: dataHooks.funnelChartItem
}), isLastItem ? /*#__PURE__*/React.createElement(EmptyFunnelStep, null) : /*#__PURE__*/React.createElement(FunnelStep, {
currentBarIndex: index,
currentBarData: data[index],
nextBarData: data[index + 1],
currentBarHeight: currentBarHeight,
nextBarHeight: nextBarHeight,
hideDifferenceBadge: hideDifferenceBadge,
getTooltipContent: differenceBadgeTooltipContent,
onTooltipShow: onDifferenceBadgeTooltipShow
}));
})), /*#__PURE__*/React.createElement("section", {
className: classes.labels
}, data.map(function (item) {
return /*#__PURE__*/React.createElement("div", {
key: item.label,
className: classes.labelWrapper
}, /*#__PURE__*/React.createElement(FunnelLabel, {
value: item.value,
label: item.label,
displayValue: item.displayValue
}));
})));
};
FunnelChart.displayName = 'FunnelChart';
FunnelChart.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.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.arrayOf(PropTypes.shape({
value: PropTypes.number.isRequired,
label: PropTypes.string.isRequired,
displayValue: PropTypes.string
})).isRequired,
/** A flag that controls the appearance of the calculated percentage badge */
hideDifferenceBadge: PropTypes.bool,
/** Returns the tooltip content by current index and badge's value (in percentage)
* ##### Signature:
* `({currentIndex: number, difference: string}) => string`
*/
differenceBadgeTooltipContent: PropTypes.func,
/** Callback on tooltip content show event by current index and badge's value (in percentage)
* ##### Signature:
* `({currentIndex: number, difference: string}) => void`
*/
onDifferenceBadgeTooltipShow: PropTypes.func
};
FunnelChart.defaultProps = {
differenceBadgeTooltipContent: function differenceBadgeTooltipContent() {
return '';
},
onDifferenceBadgeTooltipShow: function onDifferenceBadgeTooltipShow() {}
};
export default FunnelChart;