@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 { adjustBarLabelPosition, 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,
}));
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) {
        leftPos = adjustBarLabelPosition(leftPos);
    }
    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 `${adjustBarLabelPosition(value)}%`;
        }
        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) => {
    return {
        backgroundColor: color,
        width: `${width}%`,
        height: '8px',
        borderRadius: square ? '0px' : '12px',
    };
};
export const GraphSegment = styled('span', {
    shouldForwardProp: (prop) => !['color', 'width', 'square'].includes(prop.toString()),
})(({ color, width, square }) => {
    return {
        ...segmentStyle(color ?? 'red', width, square ?? false), // fallback color
    };
});