@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
148 lines (147 loc) • 7.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import ErrorBox from '../../../../components/ErrorBox';
import { Tag } from '../../../../components/Tag';
import { RangesComponent } from '../../../Components/RangesComponent';
import { getGraySwatchColor } from '../../../UIHelper';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { Box } from '../../../../components/Flex';
import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';
import { PercentBarPreview } from './Components/PercentBarRangesPreview';
import { GradientColumnComparisonSummaryPreview, GradientRangesSummaryPreview, } from './Components/GradientSummaryPreview';
export const renderStyledColumnRangesSummary = (data, api) => {
if (!api) {
const { api: adaptableApi } = useOnePageAdaptableWizardContext();
api = adaptableApi;
}
if (data.GradientStyle) {
if (data.GradientStyle.ZeroCentred) {
return (_jsx(GradientRangesSummaryPreview, { zeroCentred: data.GradientStyle.ZeroCentred, rangeValueType: data.GradientStyle.RangeValueType, gradientStyle: data.GradientStyle }));
}
if (data.GradientStyle.CellRanges) {
return (_jsx(GradientRangesSummaryPreview, { ranges: data.GradientStyle.CellRanges, rangeValueType: data.GradientStyle.RangeValueType, gradientStyle: data.GradientStyle }));
}
if (data.GradientStyle.ColumnComparison) {
return (_jsx(GradientColumnComparisonSummaryPreview, { columnComparison: data.GradientStyle.ColumnComparison, gradientStyle: data.GradientStyle, api: api }));
}
}
if (data.PercentBarStyle) {
if (data.PercentBarStyle.ColumnComparison) {
return _jsx(PercentBarColumnComparisonPreview, { percentBarStyle: data.PercentBarStyle });
}
if (data.PercentBarStyle.CellRanges) {
return _jsx(PercentBarPreview, { percentBarStyle: data.PercentBarStyle });
}
}
return _jsx(Tag, { children: "No Ranges Defined" });
};
export const StyledColumnWizardRangesSection = (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 disabled = !data.ColumnId || !column;
const onUpdateGradientStyleRanges = (ranges) => {
const gradientStyle = {
...data.GradientStyle,
CellRanges: ranges,
};
delete gradientStyle.ZeroCentred;
delete gradientStyle.ColumnComparison;
props.onChange({ ...data, GradientStyle: gradientStyle });
};
const onUpdateGradientStyleColumnComparison = (columnComparison) => {
const nextGradient = {
...data.GradientStyle,
ColumnComparison: columnComparison,
};
delete nextGradient.CellRanges;
delete nextGradient.RangeValueType;
delete nextGradient.ZeroCentred;
props.onChange({ ...data, GradientStyle: nextGradient });
};
const onApplyGradientZeroCentred = (zc) => {
const gradientStyle = {
...data.GradientStyle,
ZeroCentred: zc,
RangeValueType: 'Number',
};
delete gradientStyle.CellRanges;
delete gradientStyle.ColumnComparison;
props.onChange({ ...data, GradientStyle: gradientStyle });
};
const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
const nextPercentBar = {
...data.PercentBarStyle,
ColumnComparison: columnComparison,
};
delete nextPercentBar.CellRanges;
delete nextPercentBar.RangeValueType;
props.onChange({ ...data, PercentBarStyle: nextPercentBar });
};
const onUpdatePercentBarStyleRanges = (ranges) => {
const nextPercentBar = {
...data.PercentBarStyle,
CellRanges: ranges,
};
delete nextPercentBar.ColumnComparison;
props.onChange({ ...data, PercentBarStyle: nextPercentBar });
};
const handleRangeValueTypeChange = React.useCallback((rangeValueType) => {
const ranges = rangeValueType === 'Number'
? api.columnScopeApi.createCellColorRangesForScope(scope)
: [
{
Min: 0,
Max: 100,
Color: getGraySwatchColor(),
},
];
let newStyledColumn = data;
const commonStyle = {
CellRanges: ranges,
RangeValueType: rangeValueType,
};
if ('GradientStyle' in newStyledColumn) {
const gs = {
...newStyledColumn.GradientStyle,
...commonStyle,
};
delete gs.ZeroCentred;
delete gs.ColumnComparison;
newStyledColumn = {
...newStyledColumn,
GradientStyle: gs,
};
}
else {
const pb = {
...newStyledColumn.PercentBarStyle,
...commonStyle,
};
delete pb.ColumnComparison;
newStyledColumn = {
...newStyledColumn,
PercentBarStyle: pb,
};
}
props.onChange(newStyledColumn);
}, [data]);
return (_jsxs(Box, { children: [data?.GradientStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showZeroCentredTab: true, showRangeDirection: true, zeroCentred: data.GradientStyle.ZeroCentred, onApplyZeroCentred: onApplyGradientZeroCentred, ranges: data.GradientStyle.CellRanges ?? [], rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: onUpdateGradientStyleRanges, updateColumnComparison: onUpdateGradientStyleColumnComparison })), data?.PercentBarStyle && (_jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: onUpdatePercentBarStyleRanges, updateColumnComparison: onUpdatePercentBarStyleColumnComparison })), (!data.ColumnId || !column) && (_jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
? 'You need to select a column before defining Ranges.'
: `Column "${data.ColumnId}" was not found in the grid.` }))] }));
};