@lunit/oui/dist/presentations/AnalysisBar/AnalysisBar.styled.js

Lunit Oncology UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, styled, Typography } from '@mui/material';
import { clampBarLabelPosition, parseStringValToNumber } from './AnalysisBar.utils';
export const AnalysisBarOuter = styled(Box, {
    shouldForwardProp: (prop) => prop !== 'isDimmed',
})(({ isDimmed }) => ({
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
    gap: '4px',
    opacity: isDimmed ? 0.4 : 1,
    marginTop: '10px',
}));
export const AnalysisBarSegmentContainer = styled(Box)(() => ({
    display: 'flex',
    alignItems: 'center',
    position: 'relative',
    width: '100%',
    gap: '1px',
}));
const GraphScoreIndicatorContainer = styled(Box, {
    shouldForwardProp: (prop) => prop !== 'isJet',
})(({ isJet }) => {
    return {
        width: '20px',
        position: 'absolute',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        top: isJet ? '-20px' : '-19px',
        zIndex: 999,
    };
});
const GraphScoreIndicatorPip = styled('span')(() => {
    return {
        height: '8px !important',
        width: '8px !important',
        borderRadius: '50%',
        border: '3px solid black',
        background: 'white',
        boxSizing: 'content-box',
    };
});
export const GraphScoreIndicator = ({ value, isCutoff, isJet, }) => {
    let leftPos = `${parseStringValToNumber(value)}%`;
    if (isCutoff) {
        if (+value > 0 && +value <= 1) {
            leftPos = '12px';
        }
        if (+value > 1 && +value <= 7) {
            leftPos = '20px';
        }
    }
    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: [{
                left: leftPos
            }, isJet ? {
                transform: 'translateX(-50%) translateY(8px)'
            } : {
                transform: 'translateX(-50%)'
            }], isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
};
const GraphAxisLabelContainer = styled('span')(() => {
    return {
        position: 'absolute',
        width: 'auto',
        height: '10px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    };
});
export const GraphAxisLabel = ({ label, leftPos, isCutoff, }) => {
    const getLeft = (value) => {
        if (isCutoff && +value > 0 && +value <= 1) {
            return '12px';
        }
        return `${clampBarLabelPosition(value)}%`;
    };
    return (_jsx(GraphAxisLabelContainer, { sx: {
            left: getLeft(leftPos),
            transform: 'translateX(-50%)',
        }, className: "analysis-bar-axis-label", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
};
export const AxisLabels = ({ children, }) => {
    return (_jsx(Box, { sx: {
            position: 'relative',
            display: 'flex',
            justifyContent: 'space-between',
            width: '100%',
            height: '10px',
        }, className: "analysis-bar-axis-label-box", children: children }));
};
export const AnalysisBarCaption = ({ label }) => {
    return (_jsx(GraphAxisLabelContainer, { sx: {
            left: '50%',
            transform: 'translateX(-50%)',
            width: 'auto',
        }, className: "analysis-bar-caption", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
};
const segmentStyle = (color, width, isFirstSegment, isLastSegment, isCutoff, combinedWidth, isNextSegment, isOnePercentSegment) => {
    const baseStyle = {
        backgroundColor: color,
        height: '8px',
        borderTopLeftRadius: isFirstSegment ? '2px' : '0px',
        borderTopRightRadius: isLastSegment ? '2px' : '0px',
        borderBottomLeftRadius: isFirstSegment ? '2px' : '0px',
        borderBottomRightRadius: isLastSegment ? '2px' : '0px',
        width: `${width}%`,
    };
    if (isOnePercentSegment && isCutoff) {
        return {
            ...baseStyle,
            width: '12px',
            minWidth: '12px',
            maxWidth: '12px',
        };
    }
    return {
        ...baseStyle,
        width: isCutoff && isNextSegment ? `calc(${combinedWidth}% - 12px)` : `${width}%`,
    };
};
export const GraphSegment = styled('span', {
    shouldForwardProp: (prop) => ![
        'color',
        'width',
        'isFirstSegment',
        'isLastSegment',
        'isCutoff',
        'combinedWidth',
        'isNextSegment',
        'isOnePercentSegment',
    ].includes(prop.toString()),
})(({ color, width, isFirstSegment, isLastSegment, isCutoff, combinedWidth, isNextSegment, isOnePercentSegment, }) => {
    // cover undefined and empty string
    const barColor = color && color.length ? color : 'red';
    return {
        ...segmentStyle(barColor, width, isFirstSegment, isLastSegment, isCutoff, combinedWidth, isNextSegment, isOnePercentSegment), // fallback color
    };
});