@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
49 lines (48 loc) • 4.53 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '../../../../../components/Flex';
const PREVIEW_WIDTH = 168;
const PREVIEW_HEIGHT = 26;
const VB_W = 100;
const VB_H = 22;
const bandSegmentsForPreview = (ranges) => {
if (!ranges?.length) {
return [];
}
const numeric = ranges.filter((r) => typeof r.Min === 'number' && typeof r.Max === 'number');
if (numeric.length === ranges.length) {
const globalMin = Math.min(...numeric.map((r) => r.Min));
const globalMax = Math.max(...numeric.map((r) => r.Max));
const span = globalMax - globalMin || 1;
return numeric.map((r) => ({
x0: (r.Min - globalMin) / span,
x1: (r.Max - globalMin) / span,
color: r.Color,
}));
}
const slice = 1 / ranges.length;
return ranges.map((r, i) => ({
x0: i * slice,
x1: (i + 1) * slice,
color: r.Color,
}));
};
const DEFAULT_TRACK = 'color-mix(in srgb, var(--ab-color-foreground) 35%, transparent)';
const DEFAULT_BAR = 'var(--ab-color-accent, #07c)';
const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
export const StyledColumnRangeBarListPreview = (props) => {
const { range } = props;
const segments = bandSegmentsForPreview(range.CellRanges);
const trackFill = range.Track?.Color ?? DEFAULT_TRACK;
const valueColor = range.Marker?.Color || DEFAULT_BAR;
const refColor = range.Reference?.Marker?.Color || DEFAULT_MARKER;
const hasRef = range.Reference?.Value != undefined;
const isVertical = range.Orientation === 'Vertical';
return (_jsx(Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? (_jsx("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: range.BackColor ?? 'transparent' })) : (segments.map((s, i) => (_jsx("rect", { x: s.x0 * VB_W, y: "0", width: (s.x1 - s.x0) * VB_W, height: VB_H, fill: s.color, opacity: 0.55 }, i)))), isVertical ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: VB_W * 0.42, y: "2", width: "5", height: VB_H - 4, rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.46, y1: "3", x2: VB_W * 0.46, y2: VB_H - 3, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.52},${VB_H * 0.35} ${VB_W * 0.62},${VB_H * 0.5} ${VB_W * 0.52},${VB_H * 0.65}`, fill: valueColor })] })) : (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: VB_H * 0.38, width: VB_W - 4, height: "5", rx: "1", fill: trackFill }), hasRef && (_jsx("line", { x1: VB_W * 0.38, y1: VB_H * 0.2, x2: VB_W * 0.38, y2: VB_H * 0.8, stroke: refColor, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })), _jsx("polygon", { points: `${VB_W * 0.72},${VB_H * 0.2} ${VB_W * 0.82},${VB_H * 0.5} ${VB_W * 0.72},${VB_H * 0.8}`, fill: valueColor })] }))] }) }));
};
export const StyledColumnBulletChartListPreview = (props) => {
const { bullet } = props;
const segments = bandSegmentsForPreview(bullet.CellRanges);
const barColor = bullet.Bar?.Color ?? DEFAULT_BAR;
const markerColor = bullet.TargetProperties?.Marker?.Color || DEFAULT_MARKER;
return (_jsx(Box, { className: "twa:rounded twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_12%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_40%,transparent)] twa:px-1 twa:py-0.5", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", "aria-hidden": true, children: [segments.length === 0 ? (_jsx("rect", { x: "0", y: "0", width: VB_W, height: VB_H, fill: bullet.BackColor ?? 'transparent' })) : (segments.map((s, i) => (_jsx("rect", { x: s.x0 * VB_W, y: "2", width: (s.x1 - s.x0) * VB_W, height: VB_H - 4, fill: s.color, opacity: 0.5 }, i)))), _jsx("rect", { x: VB_W * 0.04, y: VB_H * 0.35, width: VB_W * 0.58, height: VB_H * 0.3, rx: "1", fill: barColor }), _jsx("line", { x1: VB_W * 0.78, y1: VB_H * 0.12, x2: VB_W * 0.78, y2: VB_H * 0.88, stroke: markerColor, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
};