@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
210 lines (209 loc) • 8.57 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Tag } from '../../../components/Tag';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import { useAdaptable } from '../../AdaptableContext';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Flex, Box } from '../../../components/Flex';
import { StyledColumnTypeThumbnail } from './StyledColumnTypeThumbnail';
import { getWizardTypeSelectionGridColumns, WizardNameFieldSection, WizardTypeSelectionCard, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
const TYPE_LABELS = {
Gradient: 'Gradient Column',
PercentBar: 'Percent Bar',
Sparkline: 'Spark Line',
Badge: 'Badge',
BulletChart: 'Bullet Chart',
Rating: 'Rating',
RangeBar: 'Range Bar',
Icon: 'Icon',
};
const STYLED_COLUMN_TYPE_GROUPS = [
{
title: 'Labels & icons',
types: ['badge', 'icon', 'rating'],
},
{
title: 'Bars & ranges',
types: ['percent', 'bullet', 'rangeBar'],
},
{
title: 'Colour',
types: ['gradient'],
},
{
title: 'Charts',
types: ['sparkline'],
},
];
const STYLED_COLUMN_TYPE_OPTIONS = [
{
type: 'badge',
label: 'Badge',
columnTypes: ['Any Column'],
description: 'Render cell values as badges',
isSelected: (data) => Boolean(data.BadgeStyle),
},
{
type: 'icon',
label: 'Icon',
columnTypes: ['Any Column'],
description: 'Map values to icons',
isSelected: (data) => Boolean(data.IconStyle),
},
{
type: 'rating',
label: 'Rating',
columnTypes: ['Numeric Column'],
description: 'Provide visual rating indicators',
isSelected: (data) => Boolean(data.RatingStyle),
},
{
type: 'gradient',
label: 'Gradient',
columnTypes: ['Numeric Column'],
description: 'Colour cells by value ranges',
isSelected: (data) => Boolean(data.GradientStyle),
},
{
type: 'percent',
label: 'Percent Bar',
columnTypes: ['Numeric Column'],
description: 'Draw a bar sized to the value',
isSelected: (data) => Boolean(data.PercentBarStyle),
},
{
type: 'bullet',
label: 'Bullet Chart',
columnTypes: ['Numeric Column'],
description: 'Bar with target and bands',
isSelected: (data) => Boolean(data.BulletChartStyle),
},
{
type: 'rangeBar',
label: 'Range Bar',
columnTypes: ['Numeric Column'],
description: 'Show value on a min–max track',
isSelected: (data) => Boolean(data.RangeBarStyle),
},
{
type: 'sparkline',
label: 'Sparkline',
columnTypes: ['Numeric Array Column'],
description: 'Display a mini chart in the cell',
isSelected: (data) => Boolean(data.SparklineStyle),
},
];
const STYLED_COLUMN_TYPE_COUNT = STYLED_COLUMN_TYPE_OPTIONS.length;
const STYLED_COLUMN_TYPE_OPTION_BY_KEY = STYLED_COLUMN_TYPE_OPTIONS.reduce((map, option) => {
map.set(option.type, option);
return map;
}, new Map());
const STYLED_COLUMN_TYPE_KEYS = STYLED_COLUMN_TYPE_GROUPS.flatMap((group) => group.types);
const TYPE_WIZARD_TITLES = {
Gradient: 'Gradient Column',
PercentBar: 'Percent Bar Column',
Sparkline: 'Sparkline Column',
Badge: 'Badge Column',
BulletChart: 'Bullet Chart Column',
Rating: 'Rating Column',
RangeBar: 'Range Bar Column',
Icon: 'Icon Column',
};
const getTypeLabel = (data) => {
if (data.GradientStyle)
return 'Gradient';
if (data.PercentBarStyle)
return 'PercentBar';
if (data.SparklineStyle)
return 'Sparkline';
if (data.BadgeStyle)
return 'Badge';
if (data.BulletChartStyle)
return 'BulletChart';
if (data.RatingStyle)
return 'Rating';
if (data.RangeBarStyle)
return 'RangeBar';
if (data.IconStyle)
return 'Icon';
return null;
};
export const getStyledColumnWizardTitle = (data) => {
const typeKey = getTypeLabel(data);
return typeKey ? TYPE_WIZARD_TITLES[typeKey] : 'Styled Column';
};
export const renderStyledColumnSettingsSummary = (data) => {
const typeKey = getTypeLabel(data);
return (_jsxs(Box, { className: "twa:pr-2 twa:py-2", children: [_jsxs(Box, { className: "twa:mt-1", children: ["Name ", _jsx(Tag, { children: data.Name || '(none)' })] }), _jsxs(Box, { className: "twa:mt-2", children: ["Type ", _jsx(Tag, { children: typeKey ? TYPE_LABELS[typeKey] : '(none)' })] })] }));
};
export const renderStyledColumnTypeSummary = renderStyledColumnSettingsSummary;
export const StyledColumnWizardTypeSection = (props) => {
const { data } = useOnePageAdaptableWizardContext();
const adaptable = useAdaptable();
const sparklinesAvailable = adaptable.api.styledColumnApi.canDisplaySparklines();
const onNameChange = (event) => {
props.onChange({
...data,
Name: event.target.value,
});
};
const handleTypeChange = (type) => {
const newStyledColumn = {
...data,
};
delete newStyledColumn.GradientStyle;
delete newStyledColumn.PercentBarStyle;
delete newStyledColumn.SparklineStyle;
delete newStyledColumn.BadgeStyle;
delete newStyledColumn.BulletChartStyle;
delete newStyledColumn.RatingStyle;
delete newStyledColumn.RangeBarStyle;
delete newStyledColumn.IconStyle;
switch (type) {
case 'gradient':
newStyledColumn.GradientStyle = {};
break;
case 'percent':
newStyledColumn.PercentBarStyle = {};
break;
case 'sparkline':
newStyledColumn.SparklineStyle = {
options: {
type: 'line',
},
};
break;
case 'badge':
newStyledColumn.BadgeStyle = {
Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
};
break;
case 'bullet':
newStyledColumn.BulletChartStyle = {};
break;
case 'rating':
newStyledColumn.RatingStyle = {};
break;
case 'rangeBar':
newStyledColumn.RangeBarStyle = {
Min: 'Col-Min',
Max: 'Col-Max',
};
break;
case 'icon':
newStyledColumn.IconStyle = {
Mappings: [],
};
break;
}
newStyledColumn.ColumnId = null;
props.onChange(newStyledColumn);
};
return (_jsxs(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [_jsx(WizardNameFieldSection, { value: data?.Name ?? '', onChange: onNameChange, inputDataName: "styled-column-name" }), _jsx(WizardTypeSelectionSection, { headingId: "styled-column-type-heading", title: "Style Type", dataName: "styled-column-type-grid", columns: getWizardTypeSelectionGridColumns(STYLED_COLUMN_TYPE_COUNT), intro: _jsxs(_Fragment, { children: ["Click a card to choose one of ", STYLED_COLUMN_TYPE_COUNT, " style types for how values in the Column should be rendered"] }), children: STYLED_COLUMN_TYPE_KEYS.map((typeKey) => {
const option = STYLED_COLUMN_TYPE_OPTION_BY_KEY.get(typeKey);
const isSparkline = typeKey === 'sparkline';
const disabled = isSparkline && !sparklinesAvailable;
return (_jsx(WizardTypeSelectionCard, { label: option.label, description: option.description, selected: option.isSelected(data), disabled: disabled, disabledTooltip: disabled
? 'Requires the AG Grid Sparklines module to be registered.'
: undefined, dataName: `styled-column-type-${option.type}`, minHeightClassName: "twa:min-h-[168px]", onSelect: () => handleTypeChange(option.type), footer: _jsx(StyledColumnTypeThumbnail, { type: option.type }), children: _jsx(Flex, { flexDirection: "row", className: "twa:flex-wrap twa:gap-1", children: option.columnTypes.map((columnType) => (_jsx(Tag, { children: columnType }, columnType))) }) }, option.type));
}) })] }));
};