@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
437 lines (436 loc) • 27.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { CheckBox } from '../../../components/CheckBox';
import ErrorBox from '../../../components/ErrorBox';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { Tag } from '../../../components/Tag';
import { InputGroup } from '../../../components/InputGroup';
import { ColorPicker, OptionalColorPicker } from '../../../components/ColorPicker';
import { RangesComponent } from '../../Components/RangesComponent';
import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
import { getGraySwatchColor } from '../../UIHelper';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import AdaptableInput from '../../Components/AdaptableInput';
import { Box, Flex } from '../../../components/Flex';
import { SingleSelect } from '../../../components/NewSelect';
import { RangeBarRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview';
import { Card } from '../../../components/Card';
import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
import { BarStyleCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor';
const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
const BOUND_MODE_LABELS = {
Number: 'Fixed Number',
Column: 'Column',
'Col-Min': 'Column Min',
'Col-Max': 'Column Max',
'Col-Avg': 'Column Average',
'Col-Median': 'Column Median',
};
const getBoundMode = (bound) => {
if (bound == undefined)
return 'None';
if (typeof bound === 'number')
return 'Number';
if (bound === 'Col-Min' || bound === 'Col-Max' || bound === 'Col-Avg' || bound === 'Col-Median') {
return bound;
}
return 'Column';
};
const summarizeBound = (bound) => {
if (bound == undefined)
return '—';
if (typeof bound === 'number')
return String(bound);
if (bound === 'Col-Min' || bound === 'Col-Max' || bound === 'Col-Avg' || bound === 'Col-Median') {
return BOUND_MODE_LABELS[bound];
}
return bound;
};
const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColumnId, resolved, disabled, onChange }) => {
const mode = getBoundMode(value);
const handleModeChange = (next) => {
if (next === mode)
return;
if (next === 'None')
return onChange(undefined);
if (next === 'Number')
return onChange(fallbackNumber);
if (next === 'Column') {
const candidate = api.columnApi
.getNumericColumns()
.find((c) => c.columnId !== excludeColumnId);
return onChange(candidate?.columnId ?? '');
}
return onChange(next);
};
const items = [
...(optional ? [{ value: 'None', label: 'None' }] : []),
{ value: 'Number', label: BOUND_MODE_LABELS.Number },
{ value: 'Column', label: BOUND_MODE_LABELS.Column },
{ value: 'Col-Min', label: BOUND_MODE_LABELS['Col-Min'] },
{ value: 'Col-Max', label: BOUND_MODE_LABELS['Col-Max'] },
{ value: 'Col-Avg', label: BOUND_MODE_LABELS['Col-Avg'] },
{ value: 'Col-Median', label: BOUND_MODE_LABELS['Col-Median'] },
];
const hasEditor = mode !== 'None';
let editor = null;
if (mode === 'Number') {
editor = (_jsx(AdaptableInput, { className: "twa:w-full", type: "number", disabled: disabled, value: typeof value === 'number' ? value : '', onChange: (e) => onChange(e.target.value === '' ? 0 : Number(e.target.value)) }));
}
else if (mode === 'Column') {
editor = (_jsx(ColumnSelector, { type: "number", disabled: disabled, value: typeof value === 'string' ? value : '', onChange: (columnId) => onChange(columnId), filterColumn: (c) => c.columnId !== excludeColumnId, placeholder: "Select column" }));
}
else if (hasEditor) {
const resolvedValue = resolved[mode];
editor = (_jsx(AdaptableInput, { className: "twa:w-full", type: "number", disabled: true, readOnly: true, value: resolvedValue ?? '', title: "Computed across the column's visible rows" }));
}
const editorWrapperClassName = [
'twa:flex-1 twa:basis-0 twa:min-w-0 twa:-ml-px',
'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
].join(' ');
return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [_jsx(SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? 'twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
};
const formatRangeBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
const formatRangeBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
export const getStyledColumnRangeBarRangeViewValues = (data) => {
const range = data.RangeBarStyle;
if (!range) {
return [];
}
const items = [
`Min: ${summarizeBound(range.Min)}`,
`Max: ${summarizeBound(range.Max)}`,
];
if (range.Reference?.Value != undefined) {
items.push(`Reference: ${summarizeBound(range.Reference.Value)}`);
}
const bandCount = range.CellRanges?.length ?? 0;
if (bandCount > 0) {
items.push(`Bands: ${bandCount}`);
}
if (range.RangeValueType != null) {
items.push(`Range Value Type: ${range.RangeValueType}`);
}
return items;
};
const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
const items = [];
const valueMarker = range.Marker;
const referenceProperties = range.Reference;
const referenceMarker = referenceProperties?.Marker;
items.push(`Value Marker Shape: ${valueMarker?.Shape ?? 'Diamond'}`);
if (valueMarker?.Color) {
items.push(`Value Marker Colour: ${valueMarker.Color}`);
}
if (valueMarker?.Size != null) {
items.push(`Value Marker Size: ${valueMarker.Size}px`);
}
if (referenceProperties?.Value != undefined) {
items.push(`Reference Marker Shape: ${referenceMarker?.Shape ?? 'Line'}`);
if (referenceMarker?.Color) {
items.push(`Reference Marker Colour: ${referenceMarker.Color}`);
}
if (referenceMarker?.Size != null) {
items.push(`Reference Marker Size: ${referenceMarker.Size}px`);
}
}
if (range.Orientation === 'Vertical') {
items.push('Orientation: Vertical');
}
const outOfRangeProperties = range.OutOfRange;
const outOfRangeMode = outOfRangeProperties?.Mode ?? 'Clamp';
if (outOfRangeMode !== 'Clamp') {
items.push(`Out of Range: ${outOfRangeMode}`);
}
if (outOfRangeProperties?.Color) {
items.push(`Out of Range Colour: ${outOfRangeProperties.Color}`);
}
const trackProperties = range.Track;
if (trackProperties?.Color) {
items.push(`Track Colour: ${trackProperties.Color}`);
}
if (trackProperties?.Height != null) {
items.push(`Track Height: ${trackProperties.Height}px`);
}
if (range.BackColor) {
items.push(`Back Colour: ${range.BackColor}`);
}
if (hasBarStyleCellTextConfigured(range.CellTextProperties)) {
const tokens = getActiveBarStyleCellTextTokens(range.CellTextProperties);
items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(range.CellTextProperties));
if (layoutSummary) {
items.push(`Placement: ${layoutSummary}`);
}
}
else if (options.includeEmptyCellText) {
items.push('Cell Text: None');
}
if (range.ToolTipText?.length) {
items.push(`Tooltip: ${formatRangeBarToolTipSummary(range.ToolTipText)}`);
}
else if (options.includeEmptyTooltip) {
items.push('Tooltip: No Tooltip');
}
return items;
};
export const getStyledColumnRangeBarDisplayViewValues = (data) => {
const range = data.RangeBarStyle;
if (!range) {
return [];
}
return buildStyledColumnRangeBarDisplaySummaryStrings(range, {
includeEmptyCellText: false,
includeEmptyTooltip: false,
});
};
export const renderStyledColumnRangeBarRangeStepSummary = (data) => {
const range = data.RangeBarStyle;
if (!range) {
return _jsx(Tag, { children: "No Styling Defined" });
}
const tagItems = getStyledColumnRangeBarRangeViewValues(data);
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
};
export const StyledColumnRangeBarRangeView = ({ data }) => renderStyledColumnRangeBarRangeStepSummary(data);
export const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
const range = data.RangeBarStyle;
if (!range) {
return _jsx(Tag, { children: "No Styling Defined" });
}
const items = buildStyledColumnRangeBarDisplaySummaryStrings(range, {
includeEmptyCellText: true,
includeEmptyTooltip: true,
});
if (!items.length) {
return _jsx(Tag, { children: "No Display Defined" });
}
return renderSummaryStringTags(items);
};
export const renderStyledColumnRangeBarSummary = (data) => {
const range = data.RangeBarStyle;
if (!range) {
return _jsx(Tag, { children: "No Styling Defined" });
}
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnRangeBarRangeStepSummary(data), renderStyledColumnRangeBarDisplayStepSummary(data)] }));
};
export const isValidRangeBarBounds = (data) => {
const range = data.RangeBarStyle;
if (!range)
return 'Define Min and Max bounds';
if (range.Min == undefined)
return 'Define a Min bound for the Range Bar';
if (range.Max == undefined)
return 'Define a Max bound for the Range Bar';
if (typeof range.Min === 'number' && typeof range.Max === 'number') {
if (range.Max <= range.Min) {
return 'Max must be greater than Min';
}
}
return true;
};
const MARKER_SHAPES = [
{ value: 'Diamond', label: 'Diamond' },
{ value: 'Line', label: 'Line' },
{ value: 'Triangle', label: 'Triangle' },
{ value: 'Dot', label: 'Dot' },
];
export const StyledColumnWizardRangeBarSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const column = React.useMemo(() => {
const columnId = data.ColumnId;
if (!columnId) {
return undefined;
}
return api.columnApi.getColumnWithColumnId(columnId);
}, [data.ColumnId, api]);
const minMaxRangeValues = React.useMemo(() => {
if (!column) {
return null;
}
return {
min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
};
}, [column, api]);
const scope = { ColumnIds: [data.ColumnId] };
const range = data.RangeBarStyle ?? {};
const disabled = !data.ColumnId || !column;
const update = (patch) => {
props.onChange({
...data,
RangeBarStyle: {
...range,
...patch,
},
});
};
const onUpdateRanges = (ranges) => {
update({ CellRanges: ranges });
};
const onUpdateColumnComparison = (columnComparison) => {
update({ ColumnComparison: columnComparison });
};
const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
const ranges = rangeValueType === 'Number'
? api.columnScopeApi.createCellColorRangesForScope(scope)
: [{ Min: 0, Max: 100, Color: getGraySwatchColor() }];
props.onChange({
...data,
RangeBarStyle: {
...range,
CellRanges: ranges,
RangeValueType: rangeValueType,
},
});
}, [data, range]);
const updateBackColor = (color) => {
if (color) {
update({ BackColor: color });
return;
}
const next = { ...range };
delete next.BackColor;
props.onChange({ ...data, RangeBarStyle: next });
};
const updateTrackProperties = (patch) => {
const merged = {
...range.Track,
...patch,
};
const isEmpty = merged.Color == undefined && merged.Height == undefined;
update({ Track: isEmpty ? undefined : merged });
};
const updateOutOfRangeProperties = (patch) => {
const merged = {
...range.OutOfRange,
...patch,
};
const isEmpty = (merged.Mode == undefined || merged.Mode === 'Clamp') && merged.Color == undefined;
update({ OutOfRange: isEmpty ? undefined : merged });
};
const updateReferenceProperties = (patch) => {
const merged = {
Value: range.Reference?.Value,
...range.Reference,
...patch,
};
update({ Reference: merged });
};
const resolvedBoundValues = {
'Col-Min': minMaxRangeValues?.min,
'Col-Max': minMaxRangeValues?.max,
'Col-Avg': column
? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column)
: undefined,
'Col-Median': column
? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
: undefined,
};
const renderBoundEditor = (opts) => {
const setBound = (next) => {
if (opts.field === 'Reference') {
if (next === undefined) {
const cleaned = { ...range };
delete cleaned.Reference;
props.onChange({ ...data, RangeBarStyle: cleaned });
return;
}
updateReferenceProperties({ Value: next });
return;
}
if (next === undefined) {
const cleaned = { ...range };
delete cleaned[opts.field];
props.onChange({ ...data, RangeBarStyle: cleaned });
return;
}
update({ [opts.field]: next });
};
const value = opts.field === 'Reference' ? range.Reference?.Value : range[opts.field];
return (_jsx(FormRow, { label: `${opts.label}:`, children: _jsx(RangeBarBoundInput, { api: api, value: value, optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
};
const updateValueMarker = (patch) => {
update({
Marker: {
Shape: 'Diamond',
...range.Marker,
...patch,
},
});
};
const updateReferenceMarker = (patch) => {
updateReferenceProperties({
Marker: {
Shape: 'Line',
...range.Reference?.Marker,
...patch,
},
});
};
const valueMarker = {
Shape: range.Marker?.Shape ?? 'Diamond',
Color: range.Marker?.Color ?? '',
Size: range.Marker?.Size ?? (range.Marker?.Shape === 'Line' ? 2 : 10),
};
const referenceMarkerCfg = range.Reference?.Marker;
const referenceMarker = {
Shape: referenceMarkerCfg?.Shape ?? 'Line',
Color: referenceMarkerCfg?.Color ?? '',
Size: referenceMarkerCfg?.Size ?? (referenceMarkerCfg?.Shape === 'Line' ? 2 : 8),
};
const toggleCellText = (token, show) => {
update(toggleBarStyleCellTextToken(range.CellTextProperties, token, show));
};
const onCellTextPlacementChange = (token, patch) => {
update({
CellTextProperties: patchBarStyleCellTextPlacement(range.CellTextProperties, token, patch),
});
};
const toggleToolTipText = (token, checked) => {
const current = range.ToolTipText ?? [];
const next = checked
? Array.from(new Set([...current, token]))
: current.filter((t) => t !== token);
update({ ToolTipText: next });
};
if (!data.ColumnId || !column) {
return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
? 'You need to select a column before styling.'
: `Column "${data.ColumnId}" was not found in the grid.` }) }));
}
const hasReference = range.Reference?.Value != undefined;
const outOfRangeMode = range.OutOfRange?.Mode ?? 'Clamp';
const isRangeVariant = props.variant === 'range';
return (_jsxs(Box, { children: [isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bounds" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set each row's track scale. A bound can be a fixed number, another column's value (read per row), or a column-wide aggregate (min, max, average, median). Reference is an optional second marker." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
label: 'Min',
field: 'Min',
optional: false,
fallbackNumber: minMaxRangeValues?.min ?? 0,
}), renderBoundEditor({
label: 'Max',
field: 'Max',
optional: false,
fallbackNumber: minMaxRangeValues?.max ?? 100,
}), renderBoundEditor({
label: 'Reference',
field: 'Reference',
optional: true,
fallbackNumber: minMaxRangeValues?.max ?? 0,
})] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", _jsx("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges ?? [], rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Reference Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
? 'Drawn at the Reference value (e.g. previous close, target, midpoint).'
: 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
{ value: 'Horizontal', label: 'Horizontal' },
{ value: 'Vertical', label: 'Vertical' },
] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getGraySwatchColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
Height: e.target.value === '' ? undefined : Number(e.target.value),
}), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
Mode: v,
}), items: [
{ value: 'Clamp', label: 'Clamp to edge' },
{ value: 'Overflow', label: 'Show outside' },
{ value: 'Hide', label: 'Hide marker' },
] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
};