数据洞察 WebApp 扩展流程

范例目录介绍

数据洞察 WebApp 产品包默认提供了扩展开发示例。在路径【iPortal 产品包】/ webapps/iportal/WEB-INF/lib/ 下找到并解压 webjar-datainsights-*.jar，在解压目录的 /META-INF/resources/apps/insights/libs/plugins 可看到范例目录结构如下所示：

• analysis，存放扩展开发分析功能的 js 文件
• charts，存放扩展开发图表的 js 文件
• images，README.md 文件中引用的图片
• menuTabs，存放扩展开发菜单项的 js 文件
• plugins-config.js，用于配置加载开发的图表、分析功能、菜单项、Logo 链接、文本字体
• README.md，扩展开发介绍文档
• user-defined.css，自定义图表、分析功能、或菜单项中需要用到的组件样式

扩展步骤

扩展数据洞察的一般流程是：

第一步：创建并编写新图表、分析功能、或菜单项的 js 文件，并分别存放至 charts、analysis、或 menuTabs 目录下（参见上述范例目录结构）；

第二步：修改 plugins-config.js 文件，增加需要导入的扩展图表、分析功能、或菜单项的 js 文件。配置方式如下：

window.iDataInsights.Plugins.config = {

    // 是否隐藏数据洞察加载完成后显示的弹窗

    hideFirstModal: false,

    // 图表扩展

    charts: [

         'Sample.js'

    ],

    // 分析扩展

    analysis: [

         'Sample.js',

         'myAnalysis.js',

    ],

    // 菜单项扩展

    menuTabs:[

        // 'Sample.js'

    ]

    // 默认点击左上角logo，打开iPortal首页

    logoHref: "",

    // 默认点击左上角logo，打开新的浏览器标签

    logoHrefTargetSelf: false，

    // 自定义字体，格式为： [{ label: '微软雅黑', value: '微软雅黑'}]

    fontFamily: [],

}

上述配置中，粗体标识的字段详细说明如下：

第三步：按需修改 user-defined.css 样式表，自定义图表、分析功能、或菜单项中需要用到的组件样式；

第四步：将扩展开发的 js 文件、配置文件、样式表拷贝到 【iPortal 产品包 】/webapps/iportal/apps/insights/libs/plugins/ 下（若没有需要新建），或重新压缩到 iPortal 产品包 /webapps/iportal/WEB-INF/lib/webjar-datainsights-*.jar 中（位置：/META-INF/resources/apps/insights/libs/plugin/）。若两个位置均放置了扩展文件，系统将以前者为准。然后在浏览器中访问 iPortal，进入数据洞察 WebApp，查看扩展效果（无需重启 iPortal）。