@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
60 lines (59 loc) • 4.63 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
import { getPercentBarPreviewGeometry, getPercentBarPreviewResolvedBarColor, getPercentBarPreviewSampleValues, getPercentBarPreviewScale, getPercentBarPreviewTrackColor, hasPercentBarRangesConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/PercentBarStyleHelper';
import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
import { Box, Flex } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
import { BarStyleCellTextPreview, shouldShowBarStyleCellTextOutsideBar, } from './BarStyleCellTextPreview';
const PREVIEW_CELL_CLASS = 'ab-PercentBarPreviewCell twa:w-[72px] twa:min-h-[32px] twa:px-1 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
const PercentBarPreviewCell = ({ styledColumn, value, min, max }) => {
const pb = styledColumn.PercentBarStyle;
const { barLeftPercent, barWidthPercent, percentageValue, barColor } = getPercentBarPreviewGeometry(value, pb, min, max);
const trackColor = getPercentBarPreviewTrackColor(pb);
const fillColor = getPercentBarPreviewResolvedBarColor(barColor);
const cellTextProperties = pb.CellTextProperties;
const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(value) ? String(value) : value.toFixed(1), `${percentageValue.toFixed(0)}%`);
const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
Boolean(labels.cellValue || labels.percentage);
const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
const fontStyle = pb.Font ? convertAdaptableStyleToCSS(pb.Font) : undefined;
const cellTextClassName = 'ab-PercentBar__text twa:text-2 twa:leading-tight twa:truncate';
const barEl = (_jsxs(Box, { className: "ab-PercentBar__bar twa:relative twa:flex-1 twa:min-h-[6px]", style: trackColor ? { background: getPercentBarPreviewResolvedBarColor(trackColor) } : undefined, children: [fillColor && (_jsx(Box, { className: "ab-PercentBar__barInside twa:absolute twa:top-0 twa:h-full", style: {
background: fillColor,
left: `${barLeftPercent.toFixed(2)}%`,
width: `${barWidthPercent.toFixed(2)}%`,
} })), hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-PercentBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate", style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }));
return (_jsxs(Flex, { className: `ab-PercentBar__wrapper ${PREVIEW_CELL_CLASS}`, flexDirection: "column", style: {
justifyContent: 'center',
height: shouldShowBarStyleCellTextOutsideBar(cellTextProperties, hasCellText)
? '100%'
: undefined,
}, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), barEl, hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, style: fontStyle, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
};
export const StyledColumnPercentBarPreview = ({ data }) => {
const pb = data.PercentBarStyle;
if (!pb) {
return _jsx(Tag, { children: "No Percent Bar Style" });
}
if (!hasPercentBarRangesConfigured(pb)) {
return _jsx(Tag, { children: "Define ranges before previewing" });
}
let min;
let max;
if (pb.ColumnComparison) {
const cmpMin = Number(pb.ColumnComparison.MinValue);
const cmpMax = Number(pb.ColumnComparison.MaxValue);
if (!Number.isNaN(cmpMin) && !Number.isNaN(cmpMax)) {
min = cmpMin;
max = cmpMax;
}
else {
({ min, max } = getPercentBarPreviewScale(pb));
}
}
else {
({ min, max } = getPercentBarPreviewScale(pb));
}
const sampleValues = getPercentBarPreviewSampleValues(pb);
return (_jsx(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: sampleValues.map((value) => (_jsx(PercentBarPreviewCell, { styledColumn: data, value: value, min: min, max: max }, value))) }));
};