AG 融合框架网格模块

@equinor/fusion-framework-module-ag-grid 提供包围 AG 网格 拥有集中式许可证钥匙管理、单元和模块登记. 它确保每个Fusion门户网站和应用程序使用一致的AG Grid设置.

何时使用此软件包

• 门户主机 ——一旦配置 AG Grid 许可证密钥和默认主题, 所有的孩子应用程序都会继承它们 .
• 应用程序 ——注册每个应用程序所需的AG Grid特性模块(row models,工具板,导出等),以便通过树摇来保持小捆绑.

[TIP] 这是 基础 软件包。 两者 ag-grid-community 财务报告和审定财务报表 ag-grid-enterprise 需要同伴依赖关系. 特定反应钩和组件见 @equinor/fusion-framework-react-ag-grid。 。 。 .

安装

pnpm add @equinor/fusion-framework-module-ag-grid

[尖叫声] Fusion将尝试保持语义学主要版本和小版本与AG Grid同步,但可能存在无法实现的情况. 这么说吧 @equinor/fusion-framework-module-ag-grid 财务报告和审定财务报表 ag-grid 可能不一样 补丁 各个版本.

[大 v35 突破变化: AG 图表已移动到单独的软件包 @equinor/fusion-framework-react-ag-charts。如果需要集成图表,则同时安装软件包和使用 IntegratedChartsModule.with(AgChartsEnterpriseModule)。 。 。 .

在升级到 AG Grid 33 之前, 删除所有先前的引用 @equinor/fusion-react-ag-grid-styles, (中文(简体) ), @ag-grid-community/* 财务报告和审定财务报表 @ag-grid-enterprise/* 从您的项目依赖关系.

快开始

在门户或应用程序配置中注册模块 enableAgGrid数字 :

import { type FrameworkConfigurator } from '@equinor/fusion-framework';
import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';

export async function configure(config: FrameworkConfigurator) {
    enableAgGrid(config, (builder) => {
        builder.setLicenseKey('your-license-key');
    });
}

这个 enableAgGrid 帮助者接受可选的回调,接收 IAgGridConfigurator 建会者. 用它来设置许可证密钥,主题和特性模块.

他们

此模块使用 alpine 主题作为基础 aG 网格主题。 。 。 . 主题可以通过在应用程序中提供自定义主题来定制.

[TIP] AG网格有一个 主题构建器 用于预览和生成自定义主题.

enableAgGrid(configurator, (builder) => {
    builder.setTheme((theme) => {
        return theme.withParams({
            backgroundColor: "#1f2836",
            browserColorScheme: "dark",
            chromeBackgroundColor: {
                ref: "foregroundColor",
                mix: 0.07,
                onto: "backgroundColor"
            },
            foregroundColor: "#FFF",
            headerFontSize: 14
        });
    });
});

[大 主题默认继承自母范围(aka porters). 这意味着门户中设定的主题会被应用程序所继承.

注: 配置的主题是全局的,将影响应用程序中AG Grid的所有实例.

自定义网格实例

该模块提供了一个自定义网格实例的钩子.

import { useTheme } from '@equinor/fusion-framework-react-ag-grid';

const MyComponent = () => {
    const baseTheme = useTheme();
    const [hasError, setHasError] = useState(false);
    const theme = useMemo(() => baseTheme.withParams({
        // add red text color if error
        cellTextColor: hasError ? "#FF0000" : baseTheme.cellTextColor,
    }), [baseTheme, hasError]);

    return (
        <AgGridReact
            theme={theme}
            ...
        />
    );
};

注册 AG Grid 特性模块

由于AG Grid 33,功能模块必须明确注册,因此树摇可以去除未使用的代码. 使用 builder.addModule() 或者说 builder.setModules() 内部 enableAgGrid 回调 :

import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';
import { ClientSideRowModelModule } from 'ag-grid-community';
import {
    ClipboardModule,
    ColumnsToolPanelModule,
    ExcelExportModule,
    FiltersToolPanelModule,
    MenuModule,
} from 'ag-grid-enterprise';

export const configure: AppModuleInitiator = (configurator, { env }) => {
    enableAgGrid(configurator, (builder) => {
        builder.setModules([
            ClientSideRowModelModule,
            ClipboardModule,
            ColumnsToolPanelModule,
            ExcelExportModule,
            FiltersToolPanelModule,
            MenuModule,
        ]);
    });
};

[大 模块 必须 注册在配置中,以便进行适当的树摇动。 只导入你需要的东西.

主要出口

API 参考

enableAgGrid(configurator, callback?)

注册 AG 网格模块。 可选回调收到 IAgGridConfigurator数字 :

• setLicenseKey(key) 确定企业许可证钥匙
• setTheme(theme | callback | null) 设置、定制或清除全球主题
• setModules(modules) - 替换所有已注册的 AG 网格模块
• addModule(module) - 附加单个模块
• removeModule(module | name) ——通过引用或名称删除模块

主题继承

在父范围(portal)中配置的主题由子范围(应用程序)自动继承. 模块克隆通过 createThemeFromTheme 为避免 instanceof 跨模块组合边界不匹配 .

遗产 add() 相容遥测

IAgGridProvider 扩展 TelemetryConnectable。供应商获得其共享的手柄 结束 telemetry.scope('ag-grid')随着一个懒惰的工厂倒置 旧的定制供应商, 和断开 被撕成两半 shim及其一通知观察预算不变.

提供者补丁了遗产 Set- 风格 add() 输入 AG 网格共享 Map- 形状 agStyleInjectionState.grids 当它不见了, 所以为旧的 AG Grid 所建的捆绑 工作时 当主机有遥测模块时,第一个呼叫补丁 add() 内 每个主机的寿命周期都发出一个 fusion.ag-grid.legacy-add 活动 Warning 职等,与 标准业务 diagnostic 信封上写着 仅安装补丁没有记录 .

该事件没有网格密钥、 DOM 引用或主题数据, 且补丁 add() 保留 它的行为: 它设置关键 true 并返回地图,即使遥测失败。 无 遥测,或者在模块被处理后,没有任何记录. 使用事件查找主机 仍然依赖遗产的形状 在清除shim之前。 补丁的一页 无法观察到由更古老的 Fusion AG Grid 版本所安装.

测试

没有许可证密钥, AG Grid Entertainment 登录一个"License Key Not found" 横幅通过 console.error 每个网格挂载,在测试中预计会出现这种情况,但在记者产出中却掩盖了真正的断言失败. 打电话 suppressAgGridLicenseBanner 一次从测试设置文件中过滤到这个横幅:

// src/test/setupTests.ts
import { suppressAgGridLicenseBanner } from '@equinor/fusion-framework-module-ag-grid/testing';

suppressAgGridLicenseBanner();

[TIP] 这只把旗帜藏在测试中. 要从运行中的应用程序中删除它, 请通过 enableAgGrid编号 :setLicenseKey 换句话说.

从AG Grid 32 迁移到33

AG Grid 33 将所有特性模块合并为单一 ag-grid-community 财务报告和审定财务报表 ag-grid-enterprise 软件包。 关键更改 :

• 删除全部 @ag-grid-community/* 财务报告和审定财务报表 @ag-grid-enterprise/* 依赖关系
• 删除 @equinor/fusion-react-ag-grid-styles ——样式被捆绑于v33+
• 明确通过 builder.setModules() 为正确的树摇摆

[大 读取 AG 网格 v33 更改日志 升级前. 此外,开发人员还应参考AG Grid 官方升级指南 升级到AG Grid 33 详细情况和最佳做法.

进口

删除以下导入:

• @ag-grid-community/*
• @ag-grid-enterprise/*

替换为:

• @equinor/fusion-framework-module-ag-grid

模块

自AG Grid 33起,所有模块都被集成到一个单一的软件包中,这意味着模块需要在应用程序配置中被定义.

全部移动 ModuleRegistry.registerModules 改为 builder.setModules 在应用程序配置中.

// my-app/src/app.ts
- import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
- import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
- import { FiltersToolPanelModule } from '@ag-grid-enterprise/filter-tool-panel';
- import { MenuModule } from '@ag-grid-enterprise/menu';
- import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';
- import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
- import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';

- ModuleRegistry.registerModules([
-     ClientSideRowModelModule,
-     ColumnsToolPanelModule,
-     FiltersToolPanelModule,
-     MenuModule,
-     ExcelExportModule,
-     RangeSelectionModule,
-     ClipboardModule,
- ]);
// config.ts
+ import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';
+ import { ClientSideRowModelModule } from '@equinor/fusion-framework-module-ag-grid/community';
+ import {
+     ClipboardModule,
+     ColumnsToolPanelModule,
+     ExcelExportModule,
+     FiltersToolPanelModule,
+     MenuModule,
+ } from '@equinor/fusion-framework-module-ag-grid/enterprise';
  
  export const configure: AppModuleInitiator = (configurator, { env }) => {
+    enableAgGrid(configurator, (builder) => {
+        builder.addModules([
+            ClientSideRowModelModule,
+            ClipboardModule,
+            ColumnsToolPanelModule,
+            ExcelExportModule,
+            FiltersToolPanelModule,
+            MenuModule,
+        ]);
+    });
  };