Restrict dashEnableCharts to Enterprise AG Charts loading, auto-enable enableCharts, and support AG Charts license key

CHANGELOG.md

@@ -8,6 +8,7 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
 
 ### Added
 - [#453](https://github.com/plotly/dash-ag-grid/pull/453) Test for changelog entry
+- [#448](https://github.com/plotly/dash-ag-grid/pull/448) Added support for AG-Charts (split out in v33 of AG Grid).  Integrated Charts require enableEnterpriseModules=True, dashChartMode="community" or "enterprise", and dashGridOptions={"enableCharts": True}.
 - [#455](https://github.com/plotly/dash-ag-grid/pull/455) Added support for dynamic `detailCellRendererParams` in Master/Detail, including dynamic detail-grid column definitions.
 
 ### Changed

src/lib/components/AgGrid.react.js

@@ -10,8 +10,8 @@ ModuleRegistry.registerModules([AllCommunityModule]);
 const RealAgGrid = lazy(LazyLoader.agGrid);
 const RealAgGridEnterprise = lazy(LazyLoader.agGridEnterprise);
 
-function getGrid(enable) {
-    return enable ? RealAgGridEnterprise : RealAgGrid;
+function getGrid(enableEnterpriseModules) {
+    return enableEnterpriseModules ? RealAgGridEnterprise : RealAgGrid;
 }
 
 export const defaultProps = {
@@ -64,12 +64,50 @@ function DashAgGrid(props) {
         }
     }, [props.rowTransaction, state.mounted, buildArray]);
 
-    const {enableEnterpriseModules} = props;
+    const {
+        enableEnterpriseModules,
+        dashChartMode,
+        dashGridOptions = {},
+    } = props;
+    const normalizedDashChartMode =
+        typeof dashChartMode === 'undefined' || dashChartMode === null
+            ? false
+            : dashChartMode;
+    const hasConflictingEnableChartsSetting =
+        normalizedDashChartMode && dashGridOptions.enableCharts === false;
+    const gridDashOptions = normalizedDashChartMode
+        ? {...dashGridOptions, enableCharts: true}
+        : dashGridOptions;
+    const hasEnableCharts = gridDashOptions?.enableCharts;
+
+    if (normalizedDashChartMode && !enableEnterpriseModules) {
+        throw new Error(
+            'dashChartMode is only supported when enableEnterpriseModules is true.'
+        );
+    }
+
+    if (hasConflictingEnableChartsSetting) {
+        throw new Error(
+            'dashChartMode cannot be combined with dashGridOptions.enableCharts=false.'
+        );
+    }
+
+    if (hasEnableCharts && !normalizedDashChartMode) {
+        throw new Error(
+            "enableCharts=true requires enableEnterpriseModules=true and dashChartMode='community' or 'enterprise'."
+        );
+    }
+
     const RealComponent = getGrid(enableEnterpriseModules);
 
     return (
         <Suspense fallback={null}>
-            <RealComponent parentState={state} {...defaultProps} {...props} />
+            <RealComponent
+                parentState={state}
+                {...defaultProps}
+                {...props}
+                dashGridOptions={gridDashOptions}
+            />
         </Suspense>
     );
 }
@@ -494,11 +532,23 @@ DashAgGrid.propTypes = {
      */
     licenseKey: PropTypes.string,
 
+    /**
+     * License key for AG Charts Enterprise when dashChartMode is "enterprise".
+     * If not provided, licenseKey is used.
+     */
+    chartsLicenseKey: PropTypes.string,
+
     /**
      * If True, enable ag-grid Enterprise modules. Recommended to use with licenseKey.
      */
     enableEnterpriseModules: PropTypes.bool,
 
+    /**
+     * Load enterprise AG Charts modules for integrated charts.
+     * Set to "enterprise" to load enterprise chart modules or use "community" for community chart modules and set dashGridOptions.enableCharts=true.
+     */
+    dashChartMode: PropTypes.oneOf(['enterprise', 'community']),
+
     /**
      * The rowData in the grid after inline filters are applied.
      */

src/lib/fragments/AgGridEnterprise.react.js

@@ -2,10 +2,15 @@ import React from 'react';
 import {ModuleRegistry} from 'ag-grid-community';
 import {
     AllEnterpriseModule,
+    IntegratedChartsModule,
     LicenseManager,
     SparklinesModule,
 } from 'ag-grid-enterprise';
-import {AgChartsEnterpriseModule} from 'ag-charts-enterprise';
+import {AgChartsCommunityModule} from 'ag-charts-community';
+import {
+    AgChartsEnterpriseModule,
+    LicenseManager as AgChartsLicenseManager,
+} from 'ag-charts-enterprise';
 import MemoizedAgGrid, {propTypes} from './AgGrid.react';
 
 // Register all enterprise features
@@ -15,10 +20,25 @@ ModuleRegistry.registerModules([
 ]);
 
 export default function DashAgGridEnterprise(props) {
-    const {licenseKey} = props;
+    const {licenseKey, chartsLicenseKey, dashChartMode} = props;
     if (licenseKey) {
         LicenseManager.setLicenseKey(licenseKey);
     }
+    if (dashChartMode) {
+        if (dashChartMode === 'enterprise') {
+            const effectiveChartsLicenseKey = chartsLicenseKey || licenseKey;
+            if (effectiveChartsLicenseKey) {
+                AgChartsLicenseManager.setLicenseKey(effectiveChartsLicenseKey);
+            }
+            ModuleRegistry.registerModules([
+                IntegratedChartsModule.with(AgChartsEnterpriseModule),
+            ]);
+        } else {
+            ModuleRegistry.registerModules([
+                IntegratedChartsModule.with(AgChartsCommunityModule),
+            ]);
+        }
+    }
     return <MemoizedAgGrid {...props} />;
 }
 

src/lib/utils/propCategories.js

@@ -343,6 +343,7 @@ export const PROPS_NOT_FOR_AG_GRID = [
     'setProps',
     'loading_state',
     'enableEnterpriseModules',
+    'dashChartMode',
     'parentState',
     'persistence',
     'persisted_props',

tests/test_charts.py

@@ -0,0 +1,150 @@
+import dash_ag_grid as dag
+from dash import Dash, html
+from . import utils
+from dash.testing.wait import until
+
+
+def _make_chart_grid(**extra_props):
+    return [
+        html.Div(id='loaded', children='true'),
+        dag.AgGrid(
+            id="grid",
+            columnDefs=[{"field": "make"}, {"field": "model"}, {"field": "price"}],
+            rowData=[
+                {"make": "Toyota", "model": "Celica", "price": 35000},
+                {"make": "Ford", "model": "Mondeo", "price": 32000},
+                {"make": "Porsche", "model": "Boxster", "price": 72000},
+            ],
+            **extra_props,
+        )
+    ]
+
+
+def _make_basic_grid(**extra_props):
+    return [
+        html.Div(id='loaded', children='true'),
+        dag.AgGrid(
+            id="grid",
+            columnDefs=[{"field": "make"}, {"field": "model"}, {"field": "price"}],
+            rowData=[
+                {"make": "Toyota", "model": "Celica", "price": 35000},
+                {"make": "Ford", "model": "Mondeo", "price": 32000},
+                {"make": "Porsche", "model": "Boxster", "price": 72000},
+            ],
+            **extra_props,
+        )
+    ]
+
+
+def test_charts001_enables_enterprise_charts_modules_with_true(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        _make_chart_grid(enableEnterpriseModules=True, dashChartMode="enterprise")
+    )
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+    grid.wait_for_cell_text(0, 0, "Toyota")
+
+    assert not any(
+        "AG Grid: error #200" in entry.get("message", "")
+        for entry in dash_duo.get_logs()
+    )
+
+
+def test_charts002_enables_enterprise_charts_modules(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        _make_chart_grid(
+            enableEnterpriseModules=True,
+            dashChartMode="enterprise",
+        )
+    )
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+    grid.wait_for_cell_text(0, 0, "Toyota")
+
+    assert not any(
+        "AG Grid: error #200" in entry.get("message", "")
+        for entry in dash_duo.get_logs()
+    )
+
+
+def test_charts003_keeps_enterprise_grid_without_charts(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(_make_basic_grid(enableEnterpriseModules=True))
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+    grid.wait_for_cell_text(0, 0, "Toyota")
+
+
+def test_charts004_rejects_charts_on_community_grid(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(_make_chart_grid(dashChartMode="enterprise"))
+
+    dash_duo.start_server(app)
+    until(lambda: dash_duo.find_element('#loaded').text == 'true', 10)
+
+    assert any(
+        "dashChartMode is only supported when enableEnterpriseModules is true."
+        in entry.get("message", "")
+        for entry in dash_duo.get_logs()
+    )
+
+
+def test_charts005_rejects_enablecharts_without_dashenablecharts(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        _make_chart_grid(dashGridOptions={"enableCharts": True})
+    )
+
+    dash_duo.start_server(app)
+    until(lambda: dash_duo.find_element('#loaded').text == 'true', 10)
+
+    assert any(
+        "enableCharts=true requires enableEnterpriseModules=true and dashChartMode='community' or 'enterprise'."
+        in entry.get("message", "")
+        for entry in dash_duo.get_logs()
+    )
+
+
+def test_charts006_rejects_conflicting_enablecharts_false(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        _make_chart_grid(
+            enableEnterpriseModules=True,
+            dashChartMode="enterprise",
+            dashGridOptions={"enableCharts": False},
+        )
+    )
+
+    dash_duo.start_server(app)
+    until(lambda: dash_duo.find_element('#loaded').text == 'true', 10)
+
+    assert any(
+        "dashChartMode cannot be combined with dashGridOptions.enableCharts=false."
+        in entry.get("message", "")
+        for entry in dash_duo.get_logs()
+    )
+
+
+def test_charts007_accepts_charts_license_key_prop(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        _make_chart_grid(
+            enableEnterpriseModules=True,
+            dashChartMode="enterprise",
+            licenseKey="grid-key",
+            chartsLicenseKey="charts-key",
+        )
+    )
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+    grid.wait_for_cell_text(0, 0, "Toyota")