wix-style-react
Version:
wix-style-react
68 lines • 3.64 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
const calculateBarsHeights = ({ funnelChartData, startValue }) => funnelChartData.map(i => {
const percentage = countPercentageFromBase(startValue, i.value, 0);
return percentage > 100 ? 100 : percentage;
});
/** FunnelChart */
const FunnelChart = ({ dataHook, className, data, hideDifferenceBadge, differenceBadgeTooltipContent = () => '', onDifferenceBadgeTooltipShow = () => { }, }) => {
if (data.length < 2) {
return null;
}
const barsHeights = calculateBarsHeights({
funnelChartData: data,
startValue: data[0].value,
});
return (React.createElement("div", { "data-hook": dataHook, className: className },
React.createElement("section", { className: classes.funnel }, data.map((item, index) => {
const currentBarHeight = barsHeights[index];
const nextBarHeight = barsHeights[index + 1];
const isLastItem = index === data.length - 1;
return (React.createElement(Fragment, { key: item.label },
React.createElement(FunnelBar, { height: currentBarHeight, dataHook: dataHooks.funnelChartItem }),
isLastItem || data[index + 1].value === 0 ? (React.createElement(EmptyFunnelStep, null)) : (React.createElement(FunnelStep, { currentBarIndex: index, currentBarData: data[index], nextBarData: data[index + 1], currentBarHeight: currentBarHeight, nextBarHeight: nextBarHeight, hideDifferenceBadge: hideDifferenceBadge, getTooltipContent: differenceBadgeTooltipContent, onTooltipShow: onDifferenceBadgeTooltipShow }))));
})),
React.createElement("section", { className: classes.labels }, data.map(item => {
return (React.createElement("div", { key: item.label, className: classes.labelWrapper },
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,
};
export default FunnelChart;
//# sourceMappingURL=FunnelChart.js.map