@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%',
}));
const GraphScoreIndicatorContainer = styled('span', {
    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, adjustForOnePercent, isJet, }) => {
    let leftPos = `${parseStringValToNumber(value)}%`;
    if (adjustForOnePercent && +value <= 1) {
        leftPos = '12px';
    }
    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
            left: leftPos,
            transform: isJet ? 'translateX(-50%) translateY(8px)' : '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, adjustForOnePercent, }) => {
    const getLeft = (value, adjustForOnePercent) => {
        if (adjustForOnePercent) {
            return '12px';
        }
        return `${clampBarLabelPosition(value)}%`;
    };
    return (_jsx(GraphAxisLabelContainer, { sx: {
            left: getLeft(leftPos, adjustForOnePercent),
            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, square, hasAdjustedOnePercentSegment, combinedWidth, isNextSegment, isOnePercentSegment) => {
    const baseStyle = {
        backgroundColor: color,
        height: '8px',
        borderRadius: square ? '0px' : '12px',
    };
    if (isOnePercentSegment) {
        return {
            ...baseStyle,
            width: '12px',
            minWidth: '12px',
            maxWidth: '12px',
        };
    }
    else {
        return {
            ...baseStyle,
            width: hasAdjustedOnePercentSegment && isNextSegment
                ? `calc(${combinedWidth}% - 12px)`
                : `${width}%`,
        };
    }
};
export const GraphSegment = styled('span', {
    shouldForwardProp: (prop) => ![
        'color',
        'width',
        'square',
        'hasAdjustedOnePercentSegment',
        'combinedWidth',
        'isNextSegment',
        'isOnePercentSegment',
    ].includes(prop.toString()),
})(({ color, width, square, hasAdjustedOnePercentSegment, combinedWidth, isNextSegment, isOnePercentSegment, }) => {
    // cover undefined and empty string
    const barColor = color && color.length ? color : 'red';
    return {
        ...segmentStyle(barColor, width, square ?? false, hasAdjustedOnePercentSegment ?? false, combinedWidth ?? 0, isNextSegment ?? false, isOnePercentSegment ?? false), // fallback color
    };
});