@syncfusion/react-grid-chart 35.1.37

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionHeader, AccordionIndicator, AccordionPanel, AccordionTrigger } from '@syncfusion/react-navigations';
+import { useState } from 'react';
+import { NumericTextBox, TextBox } from '@syncfusion/react-inputs';
+import { DropDownList } from '@syncfusion/react-dropdowns';
+import { Button, Variant, Checkbox } from '@syncfusion/react-buttons';
+import { useGridChartSettings } from '../contexts/GridChartContext';
+import { ColorPicker } from '../components/ColorPicker';
+/**
+ * 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 const FormatTab = () => {
+    const { format, setFormat, chartInfo, settings } = useGridChartSettings();
+    const [titleSection, setTitleSection] = useState('title');
+    const [seriesSection, setSeriesSection] = useState('All');
+    const [axesSection, setAxesSection] = useState('category');
+    const fontOptions = ['Default', 'Lucida Console', 'Trebuchet MS', 'Times New Roman', 'Courier New', 'Georgia'];
+    const fontSizeOptions = ['11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
+    const legendPositionOptions = ['Auto', 'Top', 'Left', 'Bottom', 'Right'];
+    const seriesOptions = ['All', ...settings.current.series];
+    const rotationOptions = [0, 45, 90, 135, 180, 225, 270, 315];
+    const currentSeriesFormat = format.chartSeriesStyle.find((data) => data.series === seriesSection);
+    const getTitleKey = (titleKey, subtitleKey) => titleSection === 'title' ? titleKey : subtitleKey;
+    const getAxesKey = (categoryKey, valueKey) => axesSection === 'category' ? categoryKey : valueKey;
+    return (_jsxs(Accordion, { multiple: true, defaultValue: ['chart-style', 'title-style', 'legend-style', 'series-style', 'axes-style'], children: [_jsxs(AccordionPanel, { value: 'chart-style', children: [_jsx(AccordionHeader, { children: _jsxs(AccordionTrigger, { children: ["Chart Style ", _jsx(AccordionIndicator, {})] }) }), _jsxs(AccordionContent, { children: [_jsx("div", { className: 'sf-chart-header-text', children: "Margin" }), _jsxs("div", { className: 'sf-chart-format-components', children: [_jsxs("div", { children: [_jsx("div", { className: 'sf-chart-normal-text', children: "Top" }), _jsx(NumericTextBox, { className: 'sf-margin-top-numeric sf-chart-data-format-component', value: format.marginTop, onChange: (args) => {
+                                                    setFormat((prev) => { return { ...prev, marginTop: args.value }; });
+                                                } })] }), _jsxs("div", { children: [_jsx("div", { className: 'sf-chart-normal-text', children: "Bottom" }), _jsx(NumericTextBox, { className: 'sf-margin-bottom-numeric sf-chart-data-format-component', value: format.marginBottom, onChange: (args) => {
+                                                    setFormat((prev) => { return { ...prev, marginBottom: args.value }; });
+                                                } })] })] }), _jsxs("div", { className: 'sf-chart-format-components', children: [_jsxs("div", { children: [_jsx("div", { className: 'sf-chart-normal-text', children: "Right" }), _jsx(NumericTextBox, { className: 'sf-margin-right-numeric sf-chart-data-format-component', value: format.marginRight, onChange: (args) => {
+                                                    setFormat((prev) => { return { ...prev, marginRight: args.value }; });
+                                                } })] }), _jsxs("div", { children: [_jsx("div", { className: 'sf-chart-normal-text', children: "Left" }), _jsx(NumericTextBox, { className: 'sf-margin-left-numeric sf-chart-data-format-component', value: format.marginLeft, onChange: (args) => {
+                                                    setFormat((prev) => { return { ...prev, marginLeft: args.value }; });
+                                                } })] })] }), _jsx("div", { className: 'sf-chart-normal-text', children: "Color" }), _jsx(ColorPicker, { className: 'sf-background-color-picker sf-chart-data-format-component', value: format.background, onChange: (color) => {
+                                    setFormat((prev) => { return { ...prev, background: color }; });
+                                } })] })] }), _jsxs(AccordionPanel, { value: 'title-style', children: [_jsx(AccordionHeader, { children: _jsxs(AccordionTrigger, { children: ["Title Style ", _jsx(AccordionIndicator, {})] }) }), _jsxs(AccordionContent, { children: [_jsx("div", { className: 'sf-chart-normal-text', children: "Apply To" }), _jsxs("div", { className: 'sf-display-flex', children: [_jsx(Button, { className: 'sf-title-button sf-chart-data-format-component sf-flex-one sf-chart-border-end-radius', variant: titleSection === 'title' ? Variant.Filled : Variant.Outlined, onClick: () => setTitleSection('title'), children: "Title" }), _jsx(Button, { className: 'sf-subtitle-button sf-chart-data-format-component sf-flex-one sf-chart-border-start-radius', variant: titleSection === 'subtitle' ? Variant.Filled : Variant.Outlined, onClick: () => setTitleSection('subtitle'), children: "Subtitle" })] }), _jsx("div", { className: 'sf-chart-normal-text', children: "Title" }), _jsx(TextBox, { className: 'sf-title-textbox sf-chart-data-format-component', value: titleSection === 'title' ? format.titleText : format.subtitleText, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getTitleKey('titleText', 'subtitleText')]: args.value
+                                })), placeholder: "Enter title text" }), _jsx("div", { className: 'sf-chart-normal-text', children: "Font" }), _jsx(DropDownList, { className: 'sf-title-font-dropdown sf-chart-data-format-component', dataSource: fontOptions, value: titleSection === 'title' ? format.titleFontFamily : format.subtitleFontFamily, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getTitleKey('titleFontFamily', 'subtitleFontFamily')]: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Size" }), _jsx(DropDownList, { className: 'sf-title-size-dropdown sf-chart-data-format-component', dataSource: fontSizeOptions, value: titleSection === 'title' ? format.titleFontSize : format.subtitleFontSize, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getTitleKey('titleFontSize', 'subtitleFontSize')]: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Color" }), _jsx(ColorPicker, { className: 'sf-title-color-picker sf-chart-data-format-component', value: titleSection === 'title' ? format.titleColor : format.subtitleColor, onChange: (color) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getTitleKey('titleColor', 'subtitleColor')]: color
+                                })) })] })] }), _jsxs(AccordionPanel, { value: 'legend-style', children: [_jsx(AccordionHeader, { children: _jsxs(AccordionTrigger, { children: ["Legend Style ", _jsx(AccordionIndicator, {})] }) }), _jsxs(AccordionContent, { children: [_jsx(Checkbox, { className: 'sf-legend-checkbox sf-chart-data-format-component', label: 'Show Legend', checked: format.enableLegend, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    enableLegend: args.value
+                                })) }), _jsx("div", { className: 'sf-chart-normal-text', children: "Font" }), _jsx(DropDownList, { className: 'sf-legend-font-dropdown sf-chart-data-format-component', dataSource: fontOptions, value: format.legendFontFamily, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    legendFontFamily: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Size" }), _jsx(DropDownList, { className: 'sf-legend-size-dropdown sf-chart-data-format-component', dataSource: fontSizeOptions, value: format.legendFontSize, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    legendFontSize: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Color" }), _jsx(ColorPicker, { className: 'sf-legend-color-picker sf-chart-data-format-component', value: format.legendColor, onChange: (color) => setFormat((prev) => ({
+                                    ...prev,
+                                    legendColor: color
+                                })) }), _jsx("div", { className: 'sf-chart-normal-text', children: "Position" }), _jsx(DropDownList, { className: 'sf-legend-position-dropdown sf-chart-data-format-component', dataSource: legendPositionOptions, value: format.legendPosition, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    legendPosition: args.value
+                                })), fields: { text: 'text', value: 'text' } })] })] }), _jsxs(AccordionPanel, { value: 'series-style', children: [_jsx(AccordionHeader, { children: _jsxs(AccordionTrigger, { children: ["Series Style ", _jsx(AccordionIndicator, {})] }) }), _jsxs(AccordionContent, { children: [_jsx(Checkbox, { className: 'sf-series-tooltip-checkbox sf-chart-data-format-component', label: 'Show Tooltip', checked: format.enableTooltip, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    enableTooltip: args.value
+                                })) }), chartInfo.isPieChart && (_jsx(Checkbox, { className: 'sf-series-pie-data-label-checkbox sf-chart-data-format-component', label: 'Show Data Label', checked: format.enablePieChartDataLabel, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    enablePieChartDataLabel: args.value
+                                })) })), chartInfo.isChart && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'sf-chart-normal-text', children: "Apply To" }), _jsx(DropDownList, { className: 'sf-series-apply-dropdown sf-chart-data-format-component', dataSource: seriesOptions, value: seriesSection, onChange: (args) => setSeriesSection(args.value) }), _jsx("div", { className: 'sf-chart-normal-text', children: "Color" }), _jsx(ColorPicker, { className: 'sf-series-color-picker sf-chart-data-format-component', value: currentSeriesFormat.fill, onChange: (color) => setFormat((prev) => {
+                                            const chartSeriesStyle = [...prev.chartSeriesStyle]
+                                                .map((data) => {
+                                                if (seriesSection === 'All' || seriesSection === data.series) {
+                                                    data.fill = color;
+                                                }
+                                                return data;
+                                            });
+                                            return {
+                                                ...prev,
+                                                chartSeriesStyle
+                                            };
+                                        }) }), _jsx(Checkbox, { className: 'sf-series-chart-data-label-checkbox sf-chart-data-format-component', label: 'Show Data Label', checked: currentSeriesFormat.enableDataLabel, onChange: (args) => setFormat((prev) => {
+                                            const chartSeriesStyle = [...prev.chartSeriesStyle]
+                                                .map((data) => {
+                                                if (seriesSection === 'All' || seriesSection === data.series) {
+                                                    data.enableDataLabel = args.value;
+                                                }
+                                                return data;
+                                            });
+                                            return {
+                                                ...prev,
+                                                chartSeriesStyle
+                                            };
+                                        }) })] }))] })] }), chartInfo.isChart && _jsxs(AccordionPanel, { value: 'axes-style', children: [_jsx(AccordionHeader, { children: _jsxs(AccordionTrigger, { children: ["Axes Style ", _jsx(AccordionIndicator, {})] }) }), _jsxs(AccordionContent, { children: [_jsx("div", { className: 'sf-chart-normal-text', children: "Apply To Axis" }), _jsxs("div", { className: 'sf-display-flex', children: [_jsx(Button, { className: 'sf-axes-category-button sf-chart-data-format-component sf-flex-one sf-chart-border-end-radius', variant: axesSection === 'category' ? Variant.Filled : Variant.Outlined, onClick: () => setAxesSection('category'), children: "Category" }), _jsx(Button, { className: 'sf-axes-value-button sf-chart-data-format-component sf-flex-one sf-chart-border-start-radius', variant: axesSection === 'value' ? Variant.Filled : Variant.Outlined, onClick: () => setAxesSection('value'), children: "Value" })] }), _jsx(Checkbox, { className: 'sf-axes-reverse-checkbox sf-chart-data-format-component', label: 'Reverse Order', checked: axesSection === 'category' ? format.categoryInverted : format.valueInverted, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryInverted', 'valueInverted')]: args.value
+                                })) }), _jsx("div", { className: 'sf-chart-header-text', children: "Title" }), _jsx("div", { className: 'sf-chart-normal-text', children: "Text" }), _jsx(TextBox, { className: 'sf-axes-title-textbox sf-chart-data-format-component', value: axesSection === 'category' ? format.categoryTitleText : format.valueTitleText, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryTitleText', 'valueTitleText')]: args.value
+                                })), placeholder: "Enter title text" }), _jsx("div", { className: 'sf-chart-normal-text', children: "Font" }), _jsx(DropDownList, { className: 'sf-axes-title-font-dropdown sf-chart-data-format-component', dataSource: fontOptions, value: axesSection === 'category' ? format.categoryTitleFontFamily : format.valueTitleFontFamily, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryTitleFontFamily', 'valueTitleFontFamily')]: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Size" }), _jsx(DropDownList, { className: 'sf-axes-title-size-dropdown sf-chart-data-format-component', dataSource: fontSizeOptions, value: axesSection === 'category' ? format.categoryTitleFontSize : format.valueTitleFontSize, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryTitleFontSize', 'valueTitleFontSize')]: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Color" }), _jsx(ColorPicker, { className: 'sf-axes-title-color-picker sf-chart-data-format-component', value: axesSection === 'category' ? format.categoryTitleColor : format.valueTitleColor, onChange: (color) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryTitleColor', 'valueTitleColor')]: color
+                                })) }), _jsx("div", { className: 'sf-chart-header-text', children: "Label" }), _jsx("div", { className: 'sf-chart-normal-text', children: "Font" }), _jsx(DropDownList, { className: 'sf-axes-label-font-dropdown sf-chart-data-format-component', dataSource: fontOptions, value: axesSection === 'category' ? format.categoryLabelFontFamily : format.valueLabelFontFamily, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryLabelFontFamily', 'valueLabelFontFamily')]: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Size" }), _jsx(DropDownList, { className: 'sf-axes-label-size-dropdown sf-chart-data-format-component', dataSource: fontSizeOptions, value: axesSection === 'category' ? format.categoryLabelFontSize : format.valueLabelFontSize, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryLabelFontSize', 'valueLabelFontSize')]: args.value
+                                })), fields: { text: 'text', value: 'text' } }), _jsx("div", { className: 'sf-chart-normal-text', children: "Color" }), _jsx(ColorPicker, { className: 'sf-axes-label-color-picker sf-chart-data-format-component', value: axesSection === 'category' ? format.categoryLabelColor : format.valueLabelColor, onChange: (color) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryLabelColor', 'valueLabelColor')]: color
+                                })) }), _jsx("div", { className: 'sf-chart-normal-text', children: "Rotation" }), _jsx(DropDownList, { className: 'sf-axes-label-rotation-dropdown sf-chart-data-format-component', dataSource: rotationOptions, value: axesSection === 'category' ? format.categoryLabelRotation : format.valueLabelRotation, onChange: (args) => setFormat((prev) => ({
+                                    ...prev,
+                                    [getAxesKey('categoryLabelRotation', 'valueLabelRotation')]: parseInt(args.value.toString(), 10)
+                                })), fields: { text: 'text', value: 'text' } })] })] })] }));
+};

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

@@ -0,0 +1,42 @@
+import { RefAttributes, JSX } from 'react';
+import { GridChartProps, GridChartRef } from '../types/grid-chart.interfaces';
+/**
+ * Main GridChart component for displaying interactive charts with a data grid.
+ * Renders a modal dialog containing the chart visualization, data tab, formatting options, and export functionality.
+ * Use the ref to programmatically show the chart dialog and configure settings.
+ *
+ * @component
+ * @param {GridChartProps} props - Component props
+ * @param {Ref<GridChartRef>} ref - Reference to imperative handle for controlling the component
+ * @returns {JSX.Element} Dialog component containing the grid chart interface
+ *
+ * @example
+ * ```tsx
+ * import { GridChart } from '@syncfusion/react-grid-chart';
+ * import { useRef } from 'react';
+ *
+ * export function MyApp() {
+ *   const gridChartRef = useRef<GridChartRef>(null);
+ *
+ *   const handleShowChart = () => {
+ *     gridChartRef.current?.show({
+ *       chart: 'Column',
+ *       dataSource: salesData,
+ *       category: ['OrderDate'],
+ *       series: ['Sales', 'Quantity'],
+ *       enablePropertyPanel: true,
+ *       enableExport: true,
+ *       chartExportItems: ['PNG', 'PDF', 'XLSX']
+ *     });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <GridChart ref={gridChartRef} />
+ *       <button onClick={handleShowChart}>Open Chart</button>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare const GridChart: (props: GridChartProps & RefAttributes<GridChartRef>) => JSX.Element;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { Dialog } from '@syncfusion/react-popups';
+import { GridChartPanel } from './GridChartPanel';
+import { GridChartProvider } from '../contexts/GridChartContext';
+/**
+ * Main GridChart component for displaying interactive charts with a data grid.
+ * Renders a modal dialog containing the chart visualization, data tab, formatting options, and export functionality.
+ * Use the ref to programmatically show the chart dialog and configure settings.
+ *
+ * @component
+ * @param {GridChartProps} props - Component props
+ * @param {Ref<GridChartRef>} ref - Reference to imperative handle for controlling the component
+ * @returns {JSX.Element} Dialog component containing the grid chart interface
+ *
+ * @example
+ * ```tsx
+ * import { GridChart } from '@syncfusion/react-grid-chart';
+ * import { useRef } from 'react';
+ *
+ * export function MyApp() {
+ *   const gridChartRef = useRef<GridChartRef>(null);
+ *
+ *   const handleShowChart = () => {
+ *     gridChartRef.current?.show({
+ *       chart: 'Column',
+ *       dataSource: salesData,
+ *       category: ['OrderDate'],
+ *       series: ['Sales', 'Quantity'],
+ *       enablePropertyPanel: true,
+ *       enableExport: true,
+ *       chartExportItems: ['PNG', 'PDF', 'XLSX']
+ *     });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <GridChart ref={gridChartRef} />
+ *       <button onClick={handleShowChart}>Open Chart</button>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const GridChart = forwardRef((_props, ref) => {
+    const gridChartSettings = useRef(null);
+    const [open, setOpen] = useState(false);
+    let dialogclass = 'sf-grid-chart-dialog';
+    if (gridChartSettings.current?.dialogSettings?.className) {
+        dialogclass += ` ${gridChartSettings.current.dialogSettings.className}`;
+    }
+    const show = useCallback((settings) => {
+        gridChartSettings.current = {
+            enablePropertyPanel: false,
+            enableExport: false,
+            chartExportItems: ['Print', 'PNG', 'JPEG', 'SVG', 'PDF', 'XLSX', 'CSV'],
+            ...settings
+        };
+        setOpen(true);
+    }, []);
+    useImperativeHandle(ref, () => ({
+        show
+    }), [show]);
+    return (_jsx(Dialog, { draggable: true, style: { width: '90%', height: '90%' }, modal: true, ...gridChartSettings.current?.dialogSettings, open: open, onClose: () => setOpen(false), className: dialogclass, children: _jsx(GridChartProvider, { settings: gridChartSettings, children: _jsx(GridChartPanel, {}) }) }));
+});
+GridChart.displayName = 'GridChart';

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

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+/**
+ * Main layout panel orchestrating the GridChart interface.
+ * Manages the layout of chart visualization, export options, and property panel.
+ * Conditionally displays the property panel based on settings and user preferences.
+ * Internal component used by GridChart.
+ *
+ * @private
+ * @returns {JSX.Element} Layout container with ChartPanel, ExportPanel, and PropertyPanel
+ *
+ * @internal
+ */
+export declare const GridChartPanel: () => JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChartPanel } from './ChartPanel';
+import { PropertyPanel } from './PropertyPanel';
+import { ExportPanel } from './ExportPanel';
+import { Button } from '@syncfusion/react-buttons';
+import { ShowSidePanelIcon } from '@syncfusion/react-icons/src/icons/show-side-panel';
+import { ViewSideIcon } from '@syncfusion/react-icons/src/icons/view-side';
+import { useGridChartSettings } from '../contexts/GridChartContext';
+/**
+ * Main layout panel orchestrating the GridChart interface.
+ * Manages the layout of chart visualization, export options, and property panel.
+ * Conditionally displays the property panel based on settings and user preferences.
+ * Internal component used by GridChart.
+ *
+ * @private
+ * @returns {JSX.Element} Layout container with ChartPanel, ExportPanel, and PropertyPanel
+ *
+ * @internal
+ */
+export const GridChartPanel = () => {
+    const { settings, showSidePanel, setShowSidePanel } = useGridChartSettings();
+    const enableExport = settings.current.enableExport;
+    const enablePropertyPanel = settings.current.enablePropertyPanel;
+    const [renderChart, setRenderChart] = useState(false);
+    requestAnimationFrame(() => {
+        setRenderChart(true);
+    });
+    return (_jsxs("div", { className: 'sf-grid-chart-panel', children: [_jsxs("div", { className: `sf-export-chart-panel${enablePropertyPanel && showSidePanel ? ' sf-chart-property-panel' : ''}`, children: [(enableExport || enablePropertyPanel) && (_jsxs("div", { className: 'sf-export-panel', children: [enableExport && _jsx(ExportPanel, {}), _jsx("div", { className: 'sf-flex-one' }), enablePropertyPanel &&
+                                _jsx(Button, { className: 'sf-show-hide-property-panel', icon: showSidePanel ? _jsx(ViewSideIcon, {}) : _jsx(ShowSidePanelIcon, {}), onClick: () => {
+                                        setShowSidePanel(!showSidePanel);
+                                        setRenderChart(false);
+                                    } })] })), _jsx("div", { className: 'sf-chart-panel sf-flex-one', children: renderChart && _jsx(ChartPanel, {}) })] }), enablePropertyPanel && showSidePanel &&
+                _jsx("div", { className: 'sf-property-panel', children: _jsx(PropertyPanel, {}) })] }));
+};

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

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+/**
+ * Tabbed property panel for chart configuration and formatting.
+ * Provides three main tabs:
+ * - **Chart Tab**: Select chart type and configure basic options
+ * - **Data Tab**: Choose category and series fields from data source
+ * - **Format Tab**: Customize visual appearance (colors, fonts, margins, axes)
+ *
+ * Internal component used by GridChartPanel on the right side panel.
+ *
+ * @private
+ * @returns {JSX.Element} Tabbed panel containing Chart, Data, and Format configuration tabs
+ *
+ * @internal
+ */
+export declare const PropertyPanel: () => JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@syncfusion/react-navigations';
+import { ChartTab } from './ChartTab';
+import { DataTab } from './DataTab';
+import { FormatTab } from './FormatTab';
+/**
+ * Tabbed property panel for chart configuration and formatting.
+ * Provides three main tabs:
+ * - **Chart Tab**: Select chart type and configure basic options
+ * - **Data Tab**: Choose category and series fields from data source
+ * - **Format Tab**: Customize visual appearance (colors, fonts, margins, axes)
+ *
+ * Internal component used by GridChartPanel on the right side panel.
+ *
+ * @private
+ * @returns {JSX.Element} Tabbed panel containing Chart, Data, and Format configuration tabs
+ *
+ * @internal
+ */
+export const PropertyPanel = () => {
+    return (_jsxs(Tabs, { style: { width: '100%', height: '100%' }, children: [_jsxs(TabList, { children: [_jsx(Tab, { value: 'chart', children: "Chart" }), _jsx(Tab, { value: 'data', children: "Data" }), _jsx(Tab, { value: 'format', children: "Format" })] }), _jsxs(TabPanels, { children: [_jsx(TabPanel, { value: 'chart', children: _jsx(ChartTab, {}) }), _jsx(TabPanel, { value: 'data', children: _jsx(DataTab, {}) }), _jsx(TabPanel, { value: 'format', children: _jsx(FormatTab, {}) })] })] }));
+};

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

@@ -0,0 +1,8 @@
+export * from './ChartPanel';
+export * from './ChartTab';
+export * from './DataTab';
+export * from './ExportPanel';
+export * from './FormatTab';
+export * from './GridChart';
+export * from './GridChartPanel';
+export * from './PropertyPanel';

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

@@ -0,0 +1,8 @@
+export * from './ChartPanel';
+export * from './ChartTab';
+export * from './DataTab';
+export * from './ExportPanel';
+export * from './FormatTab';
+export * from './GridChart';
+export * from './GridChartPanel';
+export * from './PropertyPanel';

package/src/index.d.ts

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

package/src/index.js

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