Skip to content

Commit 3522425

Browse files
AndrejNikolicEqAndrejNikolicEq
authored
feat(ag-grid-react): AgChartsEnterpriseModule (#3556)
* feat(ag-grid-react): AgChartsEnterpriseModule * fix(react-ag-grid): changeset and readme * fix(react-ag-chart): chart example react 19 * fix(react-ag-chart): major for cookbook * fix(react-ag-chart): sales data * fix(react-ag-chart): remove usestate * fix(react-ag-chart): changeset
1 parent 4f2e610 commit 3522425

File tree

16 files changed

+1799
-149
lines changed

16 files changed

+1799
-149
lines changed

‎.changeset/clever-meals-invite.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
"@equinor/fusion-framework-react-ag-grid": patch
3+
"@equinor/fusion-framework-cookbook-app-react-ag-grid": major
4+
---
5+
6+
Add React 19 support and AgChartsEnterpriseModule demonstration
7+
8+
## React 19 Compatibility
9+
10+
- **Updated peerDependencies**: AG Grid React package now supports React 17, 18, and 19
11+
- **Version Range**: Extended React support from `^17.0.0 || ^18.0.0` to `^17.0.0 || ^18.0.0 || ^19.0.0`
12+
- **Forward Compatibility**: Ensures compatibility with latest React features and improvements
13+
14+
## Enhanced AG Grid Cookbook
15+
16+
Enhanced the AG Grid cookbook with comprehensive charts functionality demonstration:
17+
18+
### New Features
19+
20+
- **Charts Enterprise Tab**: Added dedicated tab showcasing AgChartsEnterpriseModule integration
21+
- **Interactive Demo**: Real-world sales data with chart creation instructions
22+
- **Business Scenarios**: Multiple chart examples including:
23+
- Total Sales by Region (bar chart)
24+
- Market Share by Region (pie chart)
25+
- Quarterly Sales Chart (multi-series column chart)
26+
27+
### Components Added
28+
29+
- **ChartsExample**: New component demonstrating enterprise charting capabilities
30+
- **Regional Sales Data**: 7 unique regions with comprehensive sales metrics
31+
- **Interactive Buttons**: One-click chart generation for different business scenarios
32+
33+
### Configuration Updates
34+
35+
- **AgChartsEnterpriseModule**: Added to module configuration alongside existing enterprise modules
36+
- **Chart-Optimized Data**: Structured data for effective chart demonstrations
37+
- **Enhanced Grid Props**: Simplified configuration focusing on charting capabilities
38+
39+
## Usage
40+
41+
The cookbook now provides a complete reference for integrating AG Charts Enterprise features:
42+
- Interactive chart creation via context menu and buttons
43+
- Multiple chart types (bar, column, pie) demonstration
44+
- Data filtering and aggregation examples
45+
- Enterprise chart features showcase
46+
47+
This serves as both a functional demo and implementation reference for developers using AG Grid with enterprise charting in React 19 applications.

‎.changeset/every-streets-spend.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
"@equinor/fusion-framework-react-ag-grid": patch
3+
---
4+
5+
Add AgChartsEnterpriseModule support for charting
6+
7+
- **Added AgChartsEnterpriseModule export**: Now available from `@equinor/fusion-framework-react-ag-grid/enterprise`
8+
- **New dependency**: Added `ag-charts-enterprise` as direct dependency (12.2.0)
9+
- Updated enterprise.ts to include AG Charts Enterprise module alongside existing AG Grid enterprise modules
10+
11+
## Usage
12+
13+
Users can now import and use the AgChartsEnterpriseModule for advanced charting features:
14+
15+
```ts
16+
import { IntegratedChartsModule, AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';
17+
18+
// Use in AG Grid configuration
19+
enableAgGrid(configurator, (builder) => {
20+
builder.addModule(IntegratedChartsModule.with(AgChartsEnterpriseModule));
21+
});
22+
```

‎cookbooks/app-react-ag-grid/README.md‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,95 @@
11

2-
# AG Grid cookbook
2+
# AG Grid Cookbook
33

4-
See fusion-framework documentation: [cookbook for AG Grid](https://equinor.github.io/fusion-framework/guide/app/ag-grid.html)
4+
This cookbook demonstrates the Fusion Framework's AG Grid integration, including both basic grid functionality and enterprise chart.
5+
6+
## Features Demonstrated
7+
8+
### Basic Grid (Tab 1)
9+
- Standard AG Grid configuration with Fusion Framework
10+
- Row selection and data manipulation
11+
- Column definitions and custom formatting
12+
- Side panel with filters and columns tools
13+
14+
### Charts Enterprise Demo (Tab 2)
15+
- **AgChartsEnterpriseModule Integration**: Shows how to configure enterprise charting
16+
- **Interactive Chart Buttons**: Pre-configured chart examples with one-click generation
17+
- **Multiple Chart Types**: Bar charts, column charts, and pie charts
18+
- **Regional Sales Data**: 7 unique regions with comprehensive business metrics
19+
- **Chart Examples**:
20+
- **Total Sales by Region**: Bar chart comparing regional sales performance
21+
- **Market Share by Region**: Pie chart showing market share distribution
22+
- **Quarterly Sales Chart**: Multi-series column chart with Q1-Q4 breakdown
23+
24+
## Chart Examples
25+
26+
### Programmatic Chart Creation
27+
The cookbook demonstrates how to create charts programmatically:
28+
29+
```typescript
30+
const createSalesChart = useCallback(() => {
31+
gridRef.current?.api.createRangeChart({
32+
cellRange: {
33+
columns: ['region', 'totalSales'],
34+
},
35+
chartType: 'groupedBar',
36+
chartThemeOverrides: {
37+
common: {
38+
title: {
39+
enabled: true,
40+
text: 'Total Sales by Region',
41+
},
42+
},
43+
}
44+
});
45+
}, []);
46+
```
47+
48+
### Interactive Chart Creation
49+
- Right-click on column headers and select "Chart Data"
50+
- Choose from various chart types including enterprise-specific options
51+
- Customize charts using the chart toolbar
52+
53+
## AgChartsEnterpriseModule Setup
54+
55+
The cookbook shows how to integrate the AgChartsEnterpriseModule:
56+
57+
```typescript
58+
import { IntegratedChartsModule, AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';
59+
60+
enableAgGrid(configurator, (builder) => {
61+
builder.setModules([
62+
// ... other modules
63+
IntegratedChartsModule.with(AgChartsEnterpriseModule),
64+
]);
65+
});
66+
```
67+
68+
## Usage Instructions
69+
70+
### Charts Tab Features
71+
1. **Pre-built Chart Examples**: Use the provided buttons for instant chart generation:
72+
- **Total Sales by Region**: Compares total sales across all regions
73+
- **Market Share by Region**: Displays market share distribution as a pie chart
74+
- **Quarterly Sales Chart**: Shows Q1-Q4 sales breakdown by region
75+
76+
2. **Manual Chart Creation**:
77+
- Select one or more data columns (Q1-Q4 Sales, Total Sales, Profit, Market Share)
78+
- Right-click on selected columns
79+
- Choose "Chart Data" from context menu
80+
- Select chart type (enterprise types require valid license)
81+
- Customize using chart toolbar
82+
83+
### Data Structure
84+
The cookbook uses realistic business data with:
85+
- **7 Regions**: North America, Europe, Asia Pacific, South America, Middle East, Africa, Oceania
86+
- **Sales Metrics**: Quarterly sales (Q1-Q4), total sales, profit, market share
87+
- **Formatted Values**: Currency formatting for sales data, percentage for market share
88+
89+
## Requirements
90+
91+
- AG Grid Enterprise license for production use of charting features
92+
- All community features work without license
93+
- React 19 support
94+
95+
See fusion-framework documentation: [AG Grid guide](https://equinor.github.io/fusion-framework/guide/app/ag-grid.html)

‎cookbooks/app-react-ag-grid/package.json‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@
1313
"author": "",
1414
"license": "ISC",
1515
"dependencies": {
16+
"@equinor/eds-core-react": "^1.0.2",
1617
"@equinor/fusion-framework-cli": "workspace:^",
1718
"@equinor/fusion-framework-react-ag-grid": "workspace:*",
1819
"@equinor/fusion-framework-react-app": "workspace:^",
19-
"@types/react": "^18.2.50",
20-
"@types/react-dom": "^18.2.7",
21-
"react": "^18.2.0",
22-
"react-dom": "^18.2.0",
23-
"typescript": "^5.8.2"
20+
"@types/react": "^19.2.2",
21+
"@types/react-dom": "^19.2.2",
22+
"react": "^19.2.0",
23+
"react-dom": "^19.2.0",
24+
"styled-components": "^6.1.19",
25+
"typescript": "^5.9.3"
2426
}
2527
}

‎cookbooks/app-react-ag-grid/src/App.tsx‎

Lines changed: 40 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,48 @@
1-
// Import necessary hooks and components from React and Ag-Grid
2-
import { useCallback, useMemo, useState } from 'react';
3-
import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';
4-
import { createTheme, type ColDef } from '@equinor/fusion-framework-react-ag-grid/community';
5-
6-
// Import custom table configuration
7-
import { defaultColDef, sideBar } from './table';
8-
9-
// Define the type for the row data
10-
export type RowDataType = {
11-
make: string;
12-
model: string;
13-
price: number;
1+
import { type ReactElement, useState } from 'react';
2+
import { BasicExample, ChartsExample } from './tabs';
3+
import { Tabs, Typography } from '@equinor/eds-core-react';
4+
import styled from 'styled-components';
5+
6+
const Styled = {
7+
Container: styled.div`
8+
padding: 3rem 2rem;
9+
`,
10+
Tabs: styled(Tabs.List)`
11+
margin: 2rem 0 1rem;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
`,
1416
};
1517

16-
export const App = (): JSX.Element => {
17-
// Use custom styles for the grid
18-
// Define the grid style
19-
const gridStyle = useMemo(() => ({ height: '400px', width: '100%' }), []);
20-
21-
// Initialize state for the row data
22-
const [rowData, setRowData] = useState<RowDataType[]>([]);
23-
24-
// Define column definitions with useMemo
25-
const columnDefs = useMemo<ColDef[]>(() => {
26-
return [
27-
{
28-
field: 'make',
29-
headerCheckboxSelection: true,
30-
checkboxSelection: true,
31-
showDisabledCheckboxes: true,
32-
},
33-
{ field: 'model' },
34-
{ field: 'price' },
35-
];
36-
}, []);
18+
export const App = (): ReactElement => {
19+
// Tab state for switching between examples
20+
const [activeTab, setActiveTab] = useState<number | string>(0);
3721

38-
// Define a function to add a new row
39-
const addRow = useCallback(() => {
40-
setRowData([
41-
...rowData,
42-
{
43-
make: 'Lada',
44-
model: `Turbo x ${rowData.length}`,
45-
price: 53200 + rowData.length,
46-
},
47-
]);
48-
}, [rowData]);
49-
50-
// Define a function to set initial grid data when the grid is ready
51-
const onGridReady = useCallback(() => {
52-
setRowData([
53-
{ make: 'Toyota', model: 'Celica', price: 35000 },
54-
{ make: 'Ford', model: 'Mondeo', price: 32000 },
55-
{ make: 'Porsche', model: 'Boxster', price: 72000 },
56-
]);
57-
}, []);
58-
59-
const _customTheme = useMemo(
60-
() =>
61-
createTheme().withParams({
62-
textColor: '#39a',
63-
}),
64-
[],
65-
);
22+
const handleChange = (index: number | string) => {
23+
setActiveTab(index);
24+
};
6625

6726
return (
68-
<>
69-
<div>
70-
<h4>Hello Fusion-framework Ag-Grid</h4>
71-
<button type="button" onClick={addRow}>
72-
Add Row
73-
</button>
74-
</div>
75-
<div style={gridStyle}>
76-
<AgGridReact
77-
rowData={rowData}
78-
// theme={_customTheme}
79-
columnDefs={columnDefs}
80-
defaultColDef={defaultColDef}
81-
sideBar={sideBar}
82-
rowSelection={'multiple'}
83-
copyHeadersToClipboard={true}
84-
allowContextMenuWithControlKey={true}
85-
onGridReady={onGridReady}
86-
/>
87-
</div>
88-
</>
27+
<Styled.Container>
28+
<Typography group="heading" variant="h2">
29+
Fusion Framework AG Grid Cookbook
30+
</Typography>
31+
<Tabs activeTab={activeTab} onChange={handleChange}>
32+
<Styled.Tabs>
33+
<Tabs.Tab>Basic Example</Tabs.Tab>
34+
<Tabs.Tab>Charts Example</Tabs.Tab>
35+
</Styled.Tabs>
36+
<Tabs.Panels conditionalRender>
37+
<Tabs.Panel>
38+
<BasicExample />
39+
</Tabs.Panel>
40+
<Tabs.Panel>
41+
<ChartsExample />
42+
</Tabs.Panel>
43+
</Tabs.Panels>
44+
</Tabs>
45+
</Styled.Container>
8946
);
9047
};
9148

‎cookbooks/app-react-ag-grid/src/config.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import type { AppModuleInitiator } from '@equinor/fusion-framework-react-app';
22
import { enableAgGrid } from '@equinor/fusion-framework-react-ag-grid';
3-
import { ClientSideRowModelModule } from '@equinor/fusion-framework-react-ag-grid/community';
3+
import {
4+
AllCommunityModule,
5+
ClientSideRowModelModule,
6+
} from '@equinor/fusion-framework-react-ag-grid/community';
47
import {
58
ClipboardModule,
69
ColumnsToolPanelModule,
710
ExcelExportModule,
811
FiltersToolPanelModule,
912
MenuModule,
13+
IntegratedChartsModule,
14+
AgChartsEnterpriseModule,
1015
} from '@equinor/fusion-framework-react-ag-grid/enterprise';
1116

1217
export const configure: AppModuleInitiator = (configurator, { env }) => {
@@ -21,12 +26,9 @@ export const configure: AppModuleInitiator = (configurator, { env }) => {
2126
MenuModule,
2227
ExcelExportModule,
2328
ClipboardModule,
29+
IntegratedChartsModule.with(AgChartsEnterpriseModule),
30+
AllCommunityModule,
2431
]);
25-
// builder.setTheme((theme) => {
26-
// return theme.withParams({
27-
// backgroundColor: 'blue',
28-
// });
29-
// });
3032
});
3133

3234
/** callback when configurations is created */

0 commit comments

Comments
 (0)