@wix/design-system
Version:
@wix/design-system
46 lines • 3.14 kB
JavaScript
import React, { Fragment, useEffect } from 'react';
import { st, classes } from './FunnelChart.st.css.js';
import { FunnelLabel } from './FunnelLabel';
import { FunnelBar } from './FunnelBar';
import { FunnelStep, EmptyFunnelStep } from './FunnelStep';
import { countPercentageFromBase } from '../utils/numberFormatters';
import { dataHooks } from './constants';
import deprecationLog from '../utils/deprecationLog';
// 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 = props => {
const { dataHook, className, data, hideDifferenceBadge, fullHeight, differenceBadgeSkin = 'standard', differenceBadgeProps = () => ({}), differenceBadgeTooltipContent = () => '', differenceBadgeTooltipProps = () => ({}), onDifferenceBadgeTooltipShow = () => { }, differenceStepSkin = () => 'standard', } = props;
useEffect(() => {
if ('differenceBadgeSkin' in props) {
deprecationLog('<FunnelChart/> - prop "differenceBadgeSkin" is deprecated and will be removed in next major release.');
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (data.length < 2) {
return null;
}
const barsHeights = calculateBarsHeights({
funnelChartData: data,
startValue: data[0].value,
});
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, className) },
React.createElement("section", { className: st(classes.funnel, { fullHeight }) }, 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, differenceBadgeSkin: differenceBadgeSkin, getDifferenceBadgeProps: differenceBadgeProps, getDifferenceStepSkin: differenceStepSkin, getTooltipContent: differenceBadgeTooltipContent, getTooltipProps: differenceBadgeTooltipProps, 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';
export default FunnelChart;
//# sourceMappingURL=FunnelChart.js.map