@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
45 lines (44 loc) • 3.81 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
import { Box, Flex } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
import { StyledColumnRangeBarListPreview } from './StyledColumnChartListPreviews';
import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
const PREVIEW_CELL_CLASS = 'ab-RangeBarPreviewCell twa:inline-flex twa:items-center twa:min-w-[180px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
const getRangeBarPreviewSample = (range) => {
let min = 0;
let max = 100;
if (typeof range.Min === 'number' && typeof range.Max === 'number') {
min = range.Min;
max = range.Max;
}
const span = max - min || 1;
const sampleValue = min + span * 0.72;
const valueFraction = (sampleValue - min) / span;
return {
sampleValue,
valueFraction: Math.max(0, Math.min(1, valueFraction)),
};
};
const RangeBarPreviewContent = ({ range }) => {
const { sampleValue, valueFraction } = getRangeBarPreviewSample(range);
const cellTextProperties = range.CellTextProperties;
const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
Boolean(labels.cellValue || labels.percentage);
const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
const isVertical = range.Orientation === 'Vertical';
const cellTextClassName = 'ab-RangeBar__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
const chartEl = _jsx(StyledColumnRangeBarListPreview, { range: range });
if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
return (_jsxs(Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
}
return (_jsxs(Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
};
export const StyledColumnRangeBarPreview = ({ data }) => {
const range = data.RangeBarStyle;
if (!range) {
return _jsx(Tag, { children: "No Range Bar Style" });
}
return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(RangeBarPreviewContent, { range: range }) }));
};