@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
45 lines (44 loc) • 4.88 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckBox } from '../../../../components/CheckBox';
import { SingleSelect } from '../../../../components/NewSelect';
import { validateChartName } from '../../../../Utilities/Helpers/ChartHelper';
import { Box, Flex } from '../../../../components/Flex';
import { Card } from '../../../../components/Card';
import Input from '../../../../components/Input';
import { PreviewChartSection } from './PreviewChartSection';
export const isSettingsValid = (chartDefinition, api) => {
return validateChartName(api, chartDefinition.Name, chartDefinition.Uuid);
};
const AGG_FUNCS = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
export const SettingsSection = (props) => {
const { chartDefinition, onChange } = props;
const aggFunc = chartDefinition.Model.aggFunc;
const showAggFunc = chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function';
const aggFuncsOptions = AGG_FUNCS.map((option) => ({
label: option,
value: option,
}));
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full twa:min-h-0", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the chart" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "chart-name", className: "twa:max-w-[300px] twa:w-full", onChange: (event) => onChange({
...chartDefinition,
Name: event.target.value,
Model: chartDefinition.Model,
}), value: chartDefinition.Name ?? '', placeholder: "Enter chart name" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Unlink Chart" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "When enabled, the chart is not linked to the grid data range" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "unlink-chart", checked: chartDefinition.Model.unlinkChart, onChange: (checked) => onChange({
...chartDefinition,
Model: {
...chartDefinition.Model,
unlinkChart: checked,
},
}), children: "Unlink from data" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Suppress Chart Ranges" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Hide chart range highlights on the grid while the chart is open" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "suppress-chart-ranges", checked: chartDefinition.Model.suppressChartRanges, onChange: (checked) => onChange({
...chartDefinition,
Model: {
...chartDefinition.Model,
suppressChartRanges: checked,
},
}), children: "Suppress chart ranges" }) })] }), showAggFunc ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Aggregation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Aggregation function used for range charts" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "chart-agg-func", placeholder: "Select", className: "twa:max-w-[300px]", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: (value) => onChange({
...chartDefinition,
Model: {
...chartDefinition.Model,
aggFunc: value,
},
}) }) })] })) : null, _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Live preview of the chart \u2014 changes here are reflected in the chart model" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-[280px]", children: _jsx(PreviewChartSection, { chartDefinition: chartDefinition, onChange: onChange }) })] })] }));
};