@wix/design-system
Version:
@wix/design-system
91 lines • 5.14 kB
JavaScript
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
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';
// 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, fullHeight, differenceBadgeSkin = 'standard', differenceBadgeProps = () => ({}), differenceBadgeTooltipContent = () => '', differenceBadgeTooltipProps = () => ({}), onDifferenceBadgeTooltipShow = () => { }, differenceStepSkin = () => 'standard', }) => {
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';
FunnelChart.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
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,
/** When provided, allows bars to take full height */
fullHeight: PropTypes.bool,
/** A flag that controls the appearance of the calculated percentage badge */
hideDifferenceBadge: PropTypes.bool,
/** When provided, changes badge skin
* @deprecated
*/
differenceBadgeSkin: PropTypes.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.func,
/** Returns the badge props by current index, badge's percentage and raw values
* ##### Signature:
* `({currentIndex: number, difference: string, differenceValue: number}) => FunnelBadgeCommonProps`
*/
differenceBadgeProps: PropTypes.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.func,
/** Returns the tooltip props by current index, badge's percentage and raw values
* ##### Signature:
* `({currentIndex: number, difference: string, differenceValue: number}) => TooltipCommonProps`
*/
differenceBadgeTooltipProps: PropTypes.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.func,
};
export default FunnelChart;
//# sourceMappingURL=FunnelChart.js.map