@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
64 lines (63 loc) • 3.27 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import SimpleButton from '../../components/SimpleButton';
import { useAdaptable } from '../AdaptableContext';
import { NewDropdownButton } from '../../components/DropdownButton';
import { AG_GRID_CHART_WINDOW } from '../../Utilities/Constants/GeneralConstants';
import { isAgChartDefinition, isExternalChartDefinition, } from '../../AdaptableState/ChartingState';
import { useAgChartState } from './useAgChartState';
import { useExternalChartState } from './useExternalChartState';
const BaseShowChartButton = (props) => {
const adaptable = useAdaptable();
const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
const chartContainers = chartingOptions?.chartContainers;
if (props.chartOpened) {
return (_jsx(SimpleButton, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
}
if (!chartContainers?.length) {
return (_jsx(SimpleButton, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
}
return (_jsx(NewDropdownButton, { "data-name": "show-chart-dropdown", items: props.containerOptions, children: "Open In..." }));
};
const ShowAgChartButton = (props) => {
const adaptableApi = useAdaptable().api;
const chartingOptions = adaptableApi.optionsApi.getChartingOptions();
const chartContainers = chartingOptions?.chartContainers;
const { isOpen, showChart, closeChart } = useAgChartState(props.chartDefinition);
const containerOptions = [
{
label: chartingOptions.agGridContainerName ?? AG_GRID_CHART_WINDOW,
onClick: () => {
showChart(null);
},
},
...(chartContainers
? chartContainers.map((contianerDef) => ({
label: contianerDef.name,
onClick: () => showChart(contianerDef),
}))
: []),
];
return (_jsx(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
};
const ShowExternalChartButton = (props) => {
const adaptable = useAdaptable();
const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
const chartContainers = chartingOptions?.chartContainers;
const { isOpen, showChart: onShow, hideChart: onHide, } = useExternalChartState(props.chartDefinition);
const containerOptions = chartContainers
? chartContainers?.map((contianerDef) => ({
label: contianerDef.name,
onClick: () => onShow(contianerDef),
}))
: [];
return (_jsx(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
};
export const ShowChartButton = (props) => {
if (isAgChartDefinition(props.data)) {
return _jsx(ShowAgChartButton, { chartDefinition: props.data });
}
if (isExternalChartDefinition(props.data)) {
return _jsx(ShowExternalChartButton, { chartDefinition: props.data });
}
return _jsx(_Fragment, {});
};