@syncfusion/react-grid-chart 35.1.37

package/src/grid-chart/types/grid-chart.interfaces.js

@@ -0,0 +1 @@
+export {};

package/src/grid-chart/types/index.d.ts

@@ -0,0 +1 @@
+export * from './grid-chart.interfaces';

package/src/grid-chart/types/index.js

@@ -0,0 +1 @@
+export * from './grid-chart.interfaces';

package/src/grid-chart/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './utils';

package/src/grid-chart/utils/index.js

@@ -0,0 +1 @@
+export * from './utils';

package/src/grid-chart/utils/utils.d.ts

@@ -0,0 +1,52 @@
+import { ElementType, ReactElement, ReactNode } from 'react';
+import { ChartInfo, ChartType } from '../types/grid-chart.interfaces';
+/**
+ * Retrieves chart metadata and classification information.
+ * Determines whether the chart is a regular chart or pie chart.
+ *
+ * @param {ChartType} chart - The chart type to analyze
+ * @returns {ChartInfo} Chart metadata including type, isChart flag, and isPieChart flag
+ *
+ * @example
+ * ```tsx
+ * const chartInfo = getChartInfo('Column');
+ * // Returns: { chart: 'Column', isChart: true, isPieChart: false }
+ *
+ * const pieInfo = getChartInfo('Pie');
+ * // Returns: { chart: 'Pie', isChart: false, isPieChart: true }
+ * ```
+ */
+export declare function getChartInfo(chart: ChartType): ChartInfo;
+/**
+ * Recursively searches React children for an element of a specific type.
+ * Useful for finding nested components in the React element tree.
+ *
+ * @param {ReactNode} children - The React children to search through
+ * @param {ElementType} targetType - The element type to find (e.g., a component class or function)
+ * @returns {ReactElement | null} The first matching element found, or null if not found
+ *
+ * @example
+ * ```tsx
+ * // Find a Dialog component in children
+ * const dialogElement = findElement(children, Dialog);
+ * if (dialogElement) {
+ *   // Process dialog element
+ * }
+ * ```
+ */
+export declare function findElement(children: ReactNode, targetType: ElementType): ReactElement | null;
+/**
+ * Resolves a font family name to a usable CSS value.
+ * Converts the 'Default' placeholder to an empty string, allowing CSS to use system defaults.
+ *
+ * @param {string} fontFamily - The font family name ('Default', 'Arial', 'Georgia', etc.)
+ * @returns {string} The resolved font family CSS value, or empty string if 'Default'
+ *
+ * @example
+ * ```tsx
+ * resolveFontFamily('Arial');       // Returns: 'Arial'
+ * resolveFontFamily('Default');     // Returns: ''
+ * resolveFontFamily('Times New Roman'); // Returns: 'Times New Roman'
+ * ```
+ */
+export declare function resolveFontFamily(fontFamily: string): string;

package/src/grid-chart/utils/utils.js

@@ -0,0 +1,73 @@
+import { Children, isValidElement } from 'react';
+/**
+ * Retrieves chart metadata and classification information.
+ * Determines whether the chart is a regular chart or pie chart.
+ *
+ * @param {ChartType} chart - The chart type to analyze
+ * @returns {ChartInfo} Chart metadata including type, isChart flag, and isPieChart flag
+ *
+ * @example
+ * ```tsx
+ * const chartInfo = getChartInfo('Column');
+ * // Returns: { chart: 'Column', isChart: true, isPieChart: false }
+ *
+ * const pieInfo = getChartInfo('Pie');
+ * // Returns: { chart: 'Pie', isChart: false, isPieChart: true }
+ * ```
+ */
+export function getChartInfo(chart) {
+    return {
+        chart,
+        isChart: chart !== 'Pie',
+        isPieChart: chart === 'Pie'
+    };
+}
+/**
+ * Recursively searches React children for an element of a specific type.
+ * Useful for finding nested components in the React element tree.
+ *
+ * @param {ReactNode} children - The React children to search through
+ * @param {ElementType} targetType - The element type to find (e.g., a component class or function)
+ * @returns {ReactElement | null} The first matching element found, or null if not found
+ *
+ * @example
+ * ```tsx
+ * // Find a Dialog component in children
+ * const dialogElement = findElement(children, Dialog);
+ * if (dialogElement) {
+ *   // Process dialog element
+ * }
+ * ```
+ */
+export function findElement(children, targetType) {
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child)) {
+            continue;
+        }
+        if (child.type === targetType) {
+            return child;
+        }
+        const found = findElement(child.props.children, targetType);
+        if (found) {
+            return found;
+        }
+    }
+    return null;
+}
+/**
+ * Resolves a font family name to a usable CSS value.
+ * Converts the 'Default' placeholder to an empty string, allowing CSS to use system defaults.
+ *
+ * @param {string} fontFamily - The font family name ('Default', 'Arial', 'Georgia', etc.)
+ * @returns {string} The resolved font family CSS value, or empty string if 'Default'
+ *
+ * @example
+ * ```tsx
+ * resolveFontFamily('Arial');       // Returns: 'Arial'
+ * resolveFontFamily('Default');     // Returns: ''
+ * resolveFontFamily('Times New Roman'); // Returns: 'Times New Roman'
+ * ```
+ */
+export function resolveFontFamily(fontFamily) {
+    return fontFamily !== 'Default' ? fontFamily : '';
+}

package/src/grid-chart/views/ChartPanel.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+/**
+ * Chart visualization panel rendering either a regular chart or pie chart.
+ * Applies formatting settings including title, subtitle, legend, series colors, tooltips, and axis customization.
+ * Syncs chart state with GridChart context and updates on format changes.
+ * Internal component used by GridChartPanel.
+ *
+ * @private
+ * @returns {JSX.Element} Chart container with Syncfusion Chart or PieChart component
+ *
+ * @internal
+ */
+export declare const ChartPanel: () => JSX.Element;

package/src/grid-chart/views/ChartPanel.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Chart, ChartSeries, ChartSeriesCollection, ChartTitle, ChartSubtitle, PieChart, PieChartDataLabel, PieChartSeries, PieChartSeriesCollection, PieChartTitle, PieChartSubtitle, ChartLegend, PieChartLegend, ChartTooltip, PieChartTooltip, ChartDataLabel, ChartMarker, ChartPrimaryXAxis, ChartPrimaryYAxis, ChartAxisTitle, ChartAxisLabel } from '@syncfusion/react-charts';
+import { useGridChartSettings } from '../contexts/GridChartContext';
+import { findElement, resolveFontFamily } from '../utils/utils';
+/**
+ * Chart visualization panel rendering either a regular chart or pie chart.
+ * Applies formatting settings including title, subtitle, legend, series colors, tooltips, and axis customization.
+ * Syncs chart state with GridChart context and updates on format changes.
+ * Internal component used by GridChartPanel.
+ *
+ * @private
+ * @returns {JSX.Element} Chart container with Syncfusion Chart or PieChart component
+ *
+ * @internal
+ */
+export const ChartPanel = () => {
+    const { settings, chartInfo, categoryAxis, series, valueAxis, chartRef, pieChartRef, showSidePanel, format } = useGridChartSettings();
+    const { dataSource, chartSettings, chartNode, pieChartSettings, pieChartNode } = settings.current;
+    const chartRenderer = useMemo(() => {
+        if (!chartInfo.isChart) {
+            return null;
+        }
+        const chartSeriesCollection = series.map((seriesItem, i) => {
+            const currentSeriesFormat = format.chartSeriesStyle
+                .find((data) => data.series === seriesItem);
+            return (_jsx(ChartSeries, { dataSource: dataSource, xField: categoryAxis, yField: seriesItem, name: seriesItem, type: chartInfo.chart, fill: currentSeriesFormat.fill, children: _jsx(ChartMarker, { children: _jsx(ChartDataLabel, { visible: currentSeriesFormat.enableDataLabel }) }) }, i));
+        });
+        const chartPrimaryXAxis = findElement(chartNode, ChartPrimaryXAxis);
+        const chartPrimaryYAxis = findElement(chartNode, ChartPrimaryYAxis);
+        return (_jsxs(Chart, { ref: chartRef, width: '100%', height: '100%', ...chartSettings, margin: {
+                left: format.marginLeft,
+                right: format.marginRight,
+                top: format.marginTop,
+                bottom: format.marginBottom
+            }, background: format.background, children: [chartNode, _jsx(ChartTitle, { text: format.titleText, fontFamily: resolveFontFamily(format.titleFontFamily), fontSize: format.titleFontSize + 'px', color: format.titleColor }), _jsx(ChartSubtitle, { text: format.subtitleText, fontFamily: resolveFontFamily(format.subtitleFontFamily), fontSize: format.subtitleFontSize + 'px', color: format.subtitleColor }), _jsx(ChartLegend, { visible: format.enableLegend, position: format.legendPosition, textStyle: {
+                        fontFamily: resolveFontFamily(format.legendFontFamily),
+                        fontSize: format.legendFontSize + 'px',
+                        color: format.legendColor
+                    } }), _jsx(ChartTooltip, { enable: format.enableTooltip }), _jsxs(ChartPrimaryXAxis, { valueType: 'Category', ...chartPrimaryXAxis?.props, inverted: format.categoryInverted, children: [_jsx(ChartAxisTitle, { text: format.categoryTitleText, fontFamily: resolveFontFamily(format.categoryTitleFontFamily), fontSize: format.categoryTitleFontSize + 'px', color: format.categoryTitleColor }), _jsx(ChartAxisLabel, { fontFamily: resolveFontFamily(format.categoryLabelFontFamily), fontSize: format.categoryLabelFontSize + 'px', color: format.categoryLabelColor, rotationAngle: format.categoryLabelRotation })] }), _jsxs(ChartPrimaryYAxis, { ...chartPrimaryYAxis?.props, inverted: format.valueInverted, children: [_jsx(ChartAxisTitle, { text: format.valueTitleText, fontFamily: resolveFontFamily(format.valueTitleFontFamily), fontSize: format.valueTitleFontSize + 'px', color: format.valueTitleColor }), _jsx(ChartAxisLabel, { fontFamily: resolveFontFamily(format.valueLabelFontFamily), fontSize: format.valueLabelFontSize + 'px', color: format.valueLabelColor, rotationAngle: format.valueLabelRotation })] }), _jsx(ChartSeriesCollection, { children: chartSeriesCollection })] }));
+    }, [chartInfo, categoryAxis, series, showSidePanel, format]);
+    const pieRenderer = useMemo(() => {
+        if (!chartInfo.isPieChart) {
+            return null;
+        }
+        const pieChartSeriesCollection = (_jsx(PieChartSeries, { dataSource: dataSource, xField: categoryAxis, yField: valueAxis, children: _jsx(PieChartDataLabel, { visible: format.enablePieChartDataLabel, position: "Outside" }) }));
+        return (_jsxs(PieChart, { ref: pieChartRef, width: '100%', height: '100%', ...pieChartSettings, margin: {
+                left: format.marginLeft,
+                right: format.marginRight,
+                top: format.marginTop,
+                bottom: format.marginBottom
+            }, background: format.background, children: [pieChartNode, _jsx(PieChartTitle, { text: format.titleText, font: {
+                        fontFamily: resolveFontFamily(format.titleFontFamily),
+                        fontSize: format.titleFontSize + 'px',
+                        color: format.titleColor
+                    } }), _jsx(PieChartSubtitle, { text: format.subtitleText, font: {
+                        fontFamily: resolveFontFamily(format.subtitleFontFamily),
+                        fontSize: format.subtitleFontSize + 'px',
+                        color: format.subtitleColor
+                    } }), _jsx(PieChartLegend, { visible: format.enableLegend, position: format.legendPosition, textStyle: {
+                        fontFamily: resolveFontFamily(format.legendFontFamily),
+                        fontSize: format.legendFontSize + 'px',
+                        color: format.legendColor
+                    } }), _jsx(PieChartTooltip, { enable: format.enableTooltip }), _jsx(PieChartSeriesCollection, { children: pieChartSeriesCollection })] }));
+    }, [chartInfo, categoryAxis, valueAxis, showSidePanel, format]);
+    return (_jsxs(_Fragment, { children: [chartRenderer, pieRenderer] }));
+};

package/src/grid-chart/views/ChartTab.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+/**
+ * Chart type selection tab within the property panel.
+ * Displays categorized chart options organized by type (Line, Area, Column, Bar, Scatter, Pie).
+ * Allows users to select and switch between different chart visualizations.
+ * Each chart type includes related variants (e.g., Stacked, 100% Stacked).
+ *
+ * Internal component used by PropertyPanel in the Chart tab.
+ *
+ * @private
+ * @returns {JSX.Element} Accordion component with chart type categories and selection buttons
+ *
+ * @internal
+ */
+export declare const ChartTab: () => JSX.Element;

package/src/grid-chart/views/ChartTab.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionHeader, AccordionIndicator, AccordionPanel, AccordionTrigger } from '@syncfusion/react-navigations';
+import { Chart2dLineIcon } from '@syncfusion/react-icons/src/icons/chart-2d-line';
+import { Chart2dStackedLineIcon } from '@syncfusion/react-icons/src/icons/chart-2d-stacked-line';
+import { Chart2d100PercentStackedLineIcon } from '@syncfusion/react-icons/src/icons/chart-2d-100-percent-stacked-line';
+import { Chart2dAreaIcon } from '@syncfusion/react-icons/src/icons/chart-2d-area';
+import { Chart2dStackedAreaIcon } from '@syncfusion/react-icons/src/icons/chart-2d-stacked-area';
+import { Chart2d100PercentStackedAreaIcon } from '@syncfusion/react-icons/src/icons/chart-2d-100-percent-stacked-area';
+import { Chart2dClusteredColumnIcon } from '@syncfusion/react-icons/src/icons/chart-2d-clustered-column';
+import { Chart2dStackedColumnIcon } from '@syncfusion/react-icons/src/icons/chart-2d-stacked-column';
+import { Chart2d100PercentStackedColumnIcon } from '@syncfusion/react-icons/src/icons/chart-2d-100-percent-stacked-column';
+import { Chart2dClusteredBarIcon } from '@syncfusion/react-icons/src/icons/chart-2d-clustered-bar';
+import { Chart2dStackedBarIcon } from '@syncfusion/react-icons/src/icons/chart-2d-stacked-bar';
+import { Chart2d100PercentStackedBarIcon } from '@syncfusion/react-icons/src/icons/chart-2d-100-percent-stacked-bar';
+import { ChartScatter } from '@syncfusion/react-icons/src/icons/chart-scatter';
+import { Chart2dPie2Icon } from '@syncfusion/react-icons/src/icons/chart-2d-pie-2';
+import { useGridChartSettings } from '../contexts/GridChartContext';
+import { getChartInfo } from '../utils/utils';
+const chartData = [
+    {
+        value: 'line-chart',
+        title: 'Line Chart',
+        items: [
+            { icon: Chart2dLineIcon, label: 'Line', chart: 'Line' },
+            { icon: Chart2dStackedLineIcon, label: 'Stacked Line', chart: 'StackingLine' },
+            { icon: Chart2d100PercentStackedLineIcon, label: '100% Stacked Line', chart: 'StackingLine100' }
+        ]
+    },
+    {
+        value: 'area-chart',
+        title: 'Area Chart',
+        items: [
+            { icon: Chart2dAreaIcon, label: 'Area', chart: 'Area' },
+            { icon: Chart2dStackedAreaIcon, label: 'Stacked Area', chart: 'StackingArea' },
+            { icon: Chart2d100PercentStackedAreaIcon, label: '100% Stacked Area', chart: 'StackingArea100' }
+        ]
+    },
+    {
+        value: 'column-chart',
+        title: 'Column Chart',
+        items: [
+            { icon: Chart2dClusteredColumnIcon, label: 'Column', chart: 'Column' },
+            { icon: Chart2dStackedColumnIcon, label: 'Stacked Column', chart: 'StackingColumn' },
+            { icon: Chart2d100PercentStackedColumnIcon, label: '100% Stacked Column', chart: 'StackingColumn100' }
+        ]
+    },
+    {
+        value: 'bar-chart',
+        title: 'Bar Chart',
+        items: [
+            { icon: Chart2dClusteredBarIcon, label: 'Bar', chart: 'Bar' },
+            { icon: Chart2dStackedBarIcon, label: 'Stacked Bar', chart: 'StackingBar' },
+            { icon: Chart2d100PercentStackedBarIcon, label: '100% Stacked Bar', chart: 'StackingBar100' }
+        ]
+    },
+    {
+        value: 'scatter-chart',
+        title: 'Scatter Chart',
+        items: [
+            { icon: ChartScatter, label: 'Scatter', chart: 'Scatter' }
+        ]
+    },
+    {
+        value: 'pie-chart',
+        title: 'Pie Chart',
+        items: [
+            { icon: Chart2dPie2Icon, label: 'Pie', chart: 'Pie' }
+        ]
+    }
+];
+/**
+ * Chart type selection tab within the property panel.
+ * Displays categorized chart options organized by type (Line, Area, Column, Bar, Scatter, Pie).
+ * Allows users to select and switch between different chart visualizations.
+ * Each chart type includes related variants (e.g., Stacked, 100% Stacked).
+ *
+ * Internal component used by PropertyPanel in the Chart tab.
+ *
+ * @private
+ * @returns {JSX.Element} Accordion component with chart type categories and selection buttons
+ *
+ * @internal
+ */
+export const ChartTab = () => {
+    const { chartInfo, setChartInfo } = useGridChartSettings();
+    const defaultValues = chartData.map((chart) => chart.value);
+    return (_jsx(Accordion, { multiple: true, defaultValue: defaultValues, children: chartData.map((chart) => (_jsxs(AccordionPanel, { value: chart.value, children: [_jsx(AccordionHeader, { children: _jsxs(AccordionTrigger, { children: [chart.title, " ", _jsx(AccordionIndicator, {})] }) }), _jsx(AccordionContent, { children: chart.items.map((item, index) => {
+                        const IconComponent = item.icon;
+                        return (_jsxs("div", { className: `sf-${item.chart.toLowerCase()}-chart sf-chart-list sf-cursor-pointer ${chartInfo.chart === item.chart ? 'sf-chart-selected' : ''}`, onClick: () => setChartInfo(getChartInfo(item.chart)), children: [_jsx(IconComponent, {}), " ", _jsx("span", { className: 'sf-chart-text', children: item.label })] }, index));
+                    }) })] }, chart.value))) }));
+};

package/src/grid-chart/views/DataTab.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react';
+/**
+ * Data field selection tab within the property panel.
+ * Allows users to configure chart data binding:
+ * - Select the category (X-axis) field from available columns
+ * - Add and remove data series (Y-axis fields) with drag-and-drop reordering
+ * - For pie charts, configure the value axis field
+ *
+ * Updates GridChart context when selections change, triggering chart re-render.
+ * Internal component used by PropertyPanel in the Data tab.
+ *
+ * @private
+ * @returns {JSX.Element} Tab containing category dropdown and series management grid
+ *
+ * @internal
+ */
+export declare const DataTab: () => JSX.Element;

package/src/grid-chart/views/DataTab.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DropDownList } from '@syncfusion/react-dropdowns';
+import { Column, Columns, CommandColumnModule, CommandItem, Grid, ReorderModule } from '@syncfusion/react-grid';
+import { useMemo, useRef } from 'react';
+import { TrashIcon } from '@syncfusion/react-icons/src/icons/trash';
+import { PlusIcon } from '@syncfusion/react-icons/src/icons/plus';
+import { useGridChartSettings } from '../contexts/GridChartContext';
+/**
+ * Data field selection tab within the property panel.
+ * Allows users to configure chart data binding:
+ * - Select the category (X-axis) field from available columns
+ * - Add and remove data series (Y-axis fields) with drag-and-drop reordering
+ * - For pie charts, configure the value axis field
+ *
+ * Updates GridChart context when selections change, triggering chart re-render.
+ * Internal component used by PropertyPanel in the Data tab.
+ *
+ * @private
+ * @returns {JSX.Element} Tab containing category dropdown and series management grid
+ *
+ * @internal
+ */
+export const DataTab = () => {
+    const { settings, chartInfo, categoryAxis, setCategoryAxis, series, setSeries, valueAxis, setValueAxis } = useGridChartSettings();
+    const seriesHolder = useRef([]);
+    const categoryAxisRenderer = useMemo(() => {
+        return (_jsxs("div", { className: 'sf-chart-data-container', children: [_jsx("div", { className: 'sf-chart-header-text sf-chart-header-text-margin-bottom-10', children: "Category Axis" }), _jsx(DropDownList, { className: 'sf-category-dropdownlist sf-chart-data-format-component', dataSource: settings.current.category, value: categoryAxis, onChange: (args) => {
+                        setCategoryAxis(args.value);
+                    } })] }));
+    }, [categoryAxis]);
+    const seriesRenderer = useMemo(() => {
+        if (!chartInfo.isChart) {
+            return null;
+        }
+        const data = series.map((data) => {
+            return { series: data };
+        });
+        const handleRowDrop = (args) => {
+            setSeries(() => {
+                const newSeries = [...series];
+                const [removed] = newSeries.splice(args.fromIndex, 1);
+                newSeries.splice(args.dropIndex, 0, removed);
+                return newSeries;
+            });
+        };
+        const handleDelete = (args) => {
+            setSeries(() => {
+                const newSeries = [...series];
+                const [removed] = newSeries.splice(args.target.closest('tr').rowIndex, 1);
+                seriesHolder.current.push(removed);
+                return newSeries;
+            });
+        };
+        const handleToolbarItemClick = () => {
+            setSeries(() => {
+                const newSeries = [...series];
+                const [removed] = seriesHolder.current.splice(0, 1);
+                newSeries.push(removed);
+                return newSeries;
+            });
+        };
+        return (_jsxs("div", { className: 'sf-chart-data-container', children: [_jsx("div", { className: 'sf-chart-header-text', children: "Series" }), _jsx(Grid, { dataSource: data, className: 'sf-series-grid', dragAndDropSettings: { enabled: series.length > 1 }, onRowDrop: handleRowDrop, toolbar: [{ id: 'add', text: 'Add', icon: _jsx(PlusIcon, {}), disabled: seriesHolder.current.length === 0 }], onToolbarItemClick: handleToolbarItemClick, modules: { CommandColumnModule, ReorderModule }, children: _jsxs(Columns, { children: [_jsx(Column, { field: 'series', headerText: 'Series', isPrimaryKey: true }), series.length > 1 && _jsx(Column, { getCommandItems: () => {
+                                    return [
+                                        _jsx(CommandItem, { children: _jsx(TrashIcon, { className: 'sf-series-delete-icon sf-cursor-pointer', onClick: handleDelete }) })
+                                    ];
+                                } })] }) })] }));
+    }, [chartInfo, series]);
+    const valueAxisRenderer = useMemo(() => {
+        if (!chartInfo.isPieChart) {
+            return null;
+        }
+        return (_jsxs("div", { className: 'sf-chart-data-container', children: [_jsx("div", { className: 'sf-chart-header-text sf-chart-header-text-margin-bottom-10', children: "Value Axis" }), _jsx(DropDownList, { className: 'sf-value-dropdownlist sf-chart-data-format-component', dataSource: settings.current.series, value: valueAxis, onChange: (args) => {
+                        setValueAxis(args.value);
+                    } })] }));
+    }, [chartInfo, valueAxis]);
+    return (_jsxs(_Fragment, { children: [categoryAxisRenderer, seriesRenderer, valueAxisRenderer] }));
+};

package/src/grid-chart/views/ExportPanel.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+/**
+ * Export options panel displayed in the chart header.
+ * Provides a dropdown menu for exporting the chart in multiple formats.
+ * Supported formats include Print, PNG, JPEG, SVG, PDF, XLSX, and CSV.
+ * Export options are configurable via GridChartSettings.chartExportItems.
+ *
+ * Internal component used by GridChartPanel in the header area.
+ *
+ * @private
+ * @returns {JSX.Element} Dropdown button with export format options
+ *
+ * @internal
+ */
+export declare const ExportPanel: () => JSX.Element;

package/src/grid-chart/views/ExportPanel.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropDownButton } from '@syncfusion/react-splitbuttons';
+import { print, exportChart, excelExport } from '@syncfusion/react-charts';
+import { ExportIcon } from '@syncfusion/react-icons/src/icons/export';
+import { ExportPdfIcon } from '@syncfusion/react-icons/src/icons/export-pdf';
+import { ExportPngIcon } from '@syncfusion/react-icons/src/icons/export-png';
+import { ExportJpegIcon } from '@syncfusion/react-icons/src/icons/export-jpeg';
+import { ExportSvgIcon } from '@syncfusion/react-icons/src/icons/export-svg';
+import { ExportExcelIcon } from '@syncfusion/react-icons/src/icons/export-excel';
+import { ExportCsvIcon } from '@syncfusion/react-icons/src/icons/export-csv';
+import { PrintIcon } from '@syncfusion/react-icons/src/icons/print';
+import { useGridChartSettings } from '../contexts/GridChartContext';
+/**
+ * Export options panel displayed in the chart header.
+ * Provides a dropdown menu for exporting the chart in multiple formats.
+ * Supported formats include Print, PNG, JPEG, SVG, PDF, XLSX, and CSV.
+ * Export options are configurable via GridChartSettings.chartExportItems.
+ *
+ * Internal component used by GridChartPanel in the header area.
+ *
+ * @private
+ * @returns {JSX.Element} Dropdown button with export format options
+ *
+ * @internal
+ */
+export const ExportPanel = () => {
+    const { settings, chartRef, pieChartRef, chartInfo } = useGridChartSettings();
+    const items = settings.current.chartExportItems.map((data) => {
+        let item;
+        switch (data) {
+            case 'Print':
+                item = { text: 'Print', icon: _jsx(PrintIcon, {}) };
+                break;
+            case 'JPEG':
+                item = { text: 'JPEG', icon: _jsx(ExportJpegIcon, {}) };
+                break;
+            case 'PNG':
+                item = { text: 'PNG', icon: _jsx(ExportPngIcon, {}) };
+                break;
+            case 'SVG':
+                item = { text: 'SVG', icon: _jsx(ExportSvgIcon, {}) };
+                break;
+            case 'PDF':
+                item = { text: 'PDF', icon: _jsx(ExportPdfIcon, {}) };
+                break;
+            case 'XLSX':
+                item = { text: 'XLSX', icon: _jsx(ExportExcelIcon, {}) };
+                break;
+            case 'CSV':
+                item = { text: 'CSV', icon: _jsx(ExportCsvIcon, {}) };
+                break;
+        }
+        return item;
+    });
+    const handlButtonClick = (args) => {
+        const chart = chartInfo.isChart ? chartRef.current : pieChartRef.current;
+        const fileName = 'grid-chart';
+        switch (args.item.text) {
+            case 'Print':
+                print(chart);
+                break;
+            case 'PNG':
+            case 'SVG':
+            case 'JPEG':
+            case 'PDF':
+                exportChart(chart, args.item.text === 'JPEG' ? 'JPG' : args.item.text, fileName);
+                break;
+            case 'XLSX':
+            case 'CSV':
+                excelExport(chart, args.item.text, fileName);
+                break;
+        }
+    };
+    return (_jsx(DropDownButton, { items: items, icon: _jsx(ExportIcon, {}), onSelect: handlButtonClick, className: 'sf-caret-hide sf-export-btn', children: "Export" }));
+};

package/src/grid-chart/views/FormatTab.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'react';
+/**
+ * Format and styling tab within the property panel.
+ * Provides comprehensive chart appearance customization through 5 accordion sections:
+ *
+ * **Chart Style**: Chart margins and background color
+ * **Title Style**: Main title and subtitle text, fonts, sizes, and colors
+ * **Legend Style**: Legend visibility, position, font, size, and color
+ * **Series Style**: Series-specific colors and data label visibility
+ * **Axes Style**: Axis titles, labels, fonts, sizes, rotations, and inversion options
+ *
+ * Updates GridChart context's Format object when any setting changes.
+ * Internal component used by PropertyPanel in the Format tab.
+ *
+ * @private
+ * @returns {JSX.Element} Accordion with formatting controls for all visual aspects
+ *
+ * @internal
+ */
+export declare const FormatTab: () => JSX.Element;