@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
59 lines (58 loc) • 4.68 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import tinycolor from 'tinycolor2';
import { Box, Flex } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, isDivergingZeroCellRanges, } from '../../../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
function clamp01(n) {
if (Number.isNaN(n)) {
return 0;
}
return Math.min(1, Math.max(0, n));
}
export function gradientRangeStripCss(color, reverseGradient, minAlpha, maxAlpha) {
const prepared = getVariableColor(color);
const lo = Math.min(clamp01(minAlpha), clamp01(maxAlpha));
const hi = Math.max(clamp01(minAlpha), clamp01(maxAlpha));
const leftA = reverseGradient ? hi : lo;
const rightA = reverseGradient ? lo : hi;
const c1 = tinycolor(prepared).setAlpha(leftA).toRgbString();
const c2 = tinycolor(prepared).setAlpha(rightA).toRgbString();
return `linear-gradient(to right, ${c1}, ${c2})`;
}
const stripClassName = 'twa:h-6 twa:w-[128px] twa:rounded twa:overflow-hidden twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, maxA) {
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: ["Col-Min", postfix, " \u2192 0", postfix] }), _jsxs(Tag, { children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
background: gradientRangeStripCss(negativeColor, true, minA, maxA),
} }), _jsx(Box, { className: "twa:flex-1", style: {
background: gradientRangeStripCss(positiveColor, false, minA, maxA),
} })] })] }));
}
export const GradientRangesSummaryPreview = (props) => {
const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
const postfix = (props.rangeValueType ?? 'Number') === 'Percentage' ? '%' : '';
if (props.zeroCentred) {
return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
}
const ranges = props.ranges ?? [];
if (isDivergingZeroCellRanges(ranges)) {
const [r0, r1] = ranges;
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), _jsxs(Tag, { children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
} }), _jsx(Box, { className: "twa:flex-1", style: {
background: gradientRangeStripCss(r1.Color, !!r1.ReverseGradient, minA, maxA),
} })] })] }));
}
return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [r.Min, postfix, " \u2192 ", r.Max, postfix] }), _jsx(Box, { className: stripClassName, style: {
background: gradientRangeStripCss(r.Color, !!r.ReverseGradient, minA, maxA),
} })] }, i))) }));
};
export const GradientColumnComparisonSummaryPreview = (props) => {
const minA = props.gradientStyle?.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
const maxA = props.gradientStyle?.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
const fmt = (v) => isNaN(Number(v)) ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]` : v;
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), _jsx(Box, { className: `${stripClassName} twa:w-[200px]`, style: {
background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
} })] }));
};