@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
50 lines (49 loc) • 4.38 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
import { Box, Flex } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
import { StyledColumnBulletChartListPreview } from './StyledColumnChartListPreviews';
import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
const PREVIEW_CELL_CLASS = 'ab-BulletPreviewCell 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 getBulletPreviewSample = (bullet) => {
const ranges = bullet.CellRanges ?? [];
const numeric = ranges.filter((range) => typeof range.Min === 'number' && typeof range.Max === 'number');
let min = 0;
let max = 100;
if (numeric.length) {
min = Math.min(...numeric.map((range) => range.Min));
max = Math.max(...numeric.map((range) => range.Max));
}
const span = max - min || 1;
const sampleValue = min + span * 0.58;
const valueFraction = (sampleValue - min) / span;
return {
sampleValue,
valueFraction: Math.max(0, Math.min(1, valueFraction)),
};
};
const BulletChartPreviewContent = ({ bullet, }) => {
const { sampleValue, valueFraction } = getBulletPreviewSample(bullet);
const cellTextProperties = bullet.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 fontStyle = bullet.Font ? convertAdaptableStyleToCSS(bullet.Font) : undefined;
const isVertical = bullet.Orientation === 'Vertical';
const cellTextClassName = 'ab-BulletChart__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
const chartEl = _jsx(StyledColumnBulletChartListPreview, { bullet: bullet });
if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
return (_jsxs(Box, { className: "ab-BulletChart__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-BulletChart__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", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
}
return (_jsxs(Flex, { className: "ab-BulletChart__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, 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-BulletChart__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", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
};
export const StyledColumnBulletPreview = ({ data }) => {
const bullet = data.BulletChartStyle;
if (!bullet) {
return _jsx(Tag, { children: "No Bullet Chart Style" });
}
return (_jsx(Box, { className: PREVIEW_CELL_CLASS, children: _jsx(BulletChartPreviewContent, { bullet: bullet }) }));
};
export const hasBulletChartRangesConfigured = (bullet) => Boolean(bullet?.CellRanges?.length);