@lunit/oui
Version:
Lunit Oncology UI components
21 lines (20 loc) • 1.47 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { VictoryAxis, VictoryBar, VictoryChart, VictoryLabel } from 'victory';
import theme from '../../theme';
import { makeHistoDataArray } from './Histogram.utils';
const HistogramChart = ({ dataset, xAxisLabels, yAxisLabels }) => {
const dataArray = dataset.data;
return (_jsxs(VictoryChart, { height: 400, width: 470, domain: { x: [0, 100], y: [0, 100] }, children: [_jsx(VictoryAxis, { crossAxis: true, tickValues: xAxisLabels, style: {
tickLabels: { fill: theme.palette.neutralGrey[0], fontSize: '20px' },
ticks: { stroke: theme.palette.neutralGrey[50], opacity: 0.5 },
} }), _jsx(VictoryAxis, { orientation: "right", dependentAxis: true, tickFormat: (t) => (t === 0 ? ' (%)' : `${t}`), tickValues: yAxisLabels, style: {
tickLabels: {
fill: theme.palette.neutralGrey[0],
fontSize: '20px',
},
grid: { stroke: theme.palette.neutralGrey[50], strokeDasharray: '10, 5', opacity: 0.5 },
}, tickLabelComponent: _jsx(VictoryLabel, { dx: 10 }) }), _jsx(VictoryBar, { data: makeHistoDataArray(dataArray), style: {
data: { fill: theme.palette.lunitTeal[40], width: 34 },
}, alignment: "start", cornerRadius: { topLeft: 6, topRight: 6 } })] }));
};
export default HistogramChart;