@lunit/oui/dist/presentations/Histogram/Histogram.js

Lunit Oncology UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { v4 as uuidV4 } from 'uuid';
import { Box } from '@mui/material';
import { HistogramContainer, HistogramChartContainer, HistogramTitle, HistogramNoData, HistogramDescription, } from './Histogram.styled';
import HistogramTabs from './HistogramTabs';
import HistogramChart from './HistogramCharts';
import { FreeText } from '../FreeText';
const Histogram = ({ componentType = 'histogram', title, xAxisLabels, yAxisLabels, tabs, description = [], }) => {
    if (!componentType)
        throw new Error("The 'componentType' prop is required.");
    if (!title)
        throw new Error("The 'title' prop is required.");
    if (!xAxisLabels.length)
        throw new Error("The 'xAxisLabels' prop must contain at least one item.");
    if (!yAxisLabels.length)
        throw new Error("The 'yAxisLabels' prop must contain at least one item.");
    if (!tabs.length)
        throw new Error("The 'tabs' prop must contain at least one item.");
    const [activeIndex, setActiveIndex] = useState(0);
    const noData = tabs[activeIndex].data.length === 0;
    return (_jsxs(HistogramContainer, { children: [noData && _jsx(HistogramNoData, { children: "No Data" }), title && _jsx(HistogramTitle, { children: title }), _jsx(HistogramTabs, { options: tabs.map((tab) => tab.label), active: activeIndex, onChange: setActiveIndex }), _jsx(HistogramChartContainer, { children: _jsx(Box, { sx: {
                        position: 'absolute',
                        left: '-25px',
                    }, children: _jsx(HistogramChart, { dataset: tabs[activeIndex], xAxisLabels: xAxisLabels, yAxisLabels: yAxisLabels }) }) }), _jsx(HistogramDescription, { children: description.length > 0 &&
                    description.map((item) => (_jsx(FreeText, { ...item }, uuidV4()))) })] }));
};
export default Histogram;