55.5. Heatmap 组件

流程

1. 使用以下命令，创建一个新的 KIE 服务器数据集：

   1. 在 Business Central 中，前往 Admin Data Sets。

      这时将打开 Data Set Explorer 页面。

   2. 点 New Data Set 并选择 Execution Server provider type。

      这时将打开 Data Set Creation Wizard 页面。

   3. 输入 dataset 的名称。
   4. 选择服务器配置。如果部署了项目，则服务器配置可用。
   5. 从列表中选择 CUSTOM 查询目标。

   6. 在 Query 字段中输入以下自定义 SQL 查询。

      select
         pil.externalId,
         pil.processId,
         nil.nodeid,
         nil.nodetype,
         nil.nodename,
         count(nil.nodeid) as total_hits
      from
          NodeInstanceLog nil
      inner join
          ProcessInstanceLog pil on pil.processInstanceId = nil.processInstanceId
      where
          nil.type = 1
      group by
           pil.externalId,
           nil.nodeid,
           nil.nodename

      Copy to Clipboard Toggle word wrap
      注意

      如果需要，您可以根据您的数据库修改 SQL 查询。

   7. 完成 Data Set Creation Wizard 并点 Test。
   8. 点击 Save。
2. 在 Business Central 中，转至 Menu Design Pages。
3. 在 页面 面板中，单击新建。
4. 在 New Page 对话框中，在 Name 字段中输入值，再选择所需的风格。

5. 点击 确定。

   新页面在页面 Editor 中打开，您可以看到 Heatmaps 组件在 Components 面板中可用。

6. 在 组件 面板中，展开 Heatmaps 组件，并将 Process Heatmap 组件类型拖到 页面编辑器中。
7. 在 Displayer 编辑器 向导中，点 Data 选项卡并选择新创建的 KIE Server dataset。
8. 在 Data 选项卡中，从 Columns 字段中选择 NODEID 和 TOTAL_HITS。

9. 点 Component Editor 选项卡，在组件 属性 字段中输入强制字段的值，包括 Server Template、容器 ID 和流程定义 ID。

   注意

   要访问 Server Template 的值，请转至 Deploy Execution Servers Server configuration。对于容器 ID 的值，进入 Manage Process Instances，您可以点您要使用的进程实例，在 Deployment 中，Deployment 对应于 容器 ID，定义 ID 是进程 定义 ID。

10. 单击 Display 选项卡，再根据需要编辑 Chart、Margins、Filter、Refresh 和 Columns 的值。

11. 点击 确定。

    图 55.3. 进程 heatmap 组件示例

    

    View larger image

    

流程

1. 使用以下步骤创建新的 KIE 服务器数据集：

   1. 在 Business Central 中，前往 Admin Data Sets。

      这时将打开 Data Set Explorer 页面。

   2. 点 New Data Set 并选择 Execution Server provider type。

      这时将打开 Data Set Creation Wizard 页面。

   3. 输入 dataset 的名称。
   4. 选择服务器配置。如果部署了项目，则服务器配置可用。
   5. 从列表中选择 CUSTOM 查询目标。

   6. 在 Query 字段中输入以下自定义 SQL 查询。

      select
         pil.externalId,
         pil.processId,
         nil.nodeid,
         nil.nodetype,
         nil.nodename,
         count(nil.nodeid) as total_hits
      from
          NodeInstanceLog nil
      inner join
          ProcessInstanceLog pil on pil.processInstanceId = nil.processInstanceId
      where
          nil.type = 1
      group by
           pil.externalId,
           nil.nodeid,
           nil.nodename

      Copy to Clipboard Toggle word wrap
      注意

      如果需要，您可以根据您的数据库修改 SQL 查询。

   7. 完成 Data Set Creation Wizard 并点 Test。
   8. 点击 Save。
2. 在 Business Central 中，转至 Menu Design Pages。
3. 在 页面 面板中，单击新建。
4. 在 New Page 对话框中，在 Name 字段中输入值，再选择所需的风格。

5. 点击 确定。

   新页面在页面 Editor 中打开，您可以看到 Heatmaps 组件在 Components 面板中可用。

6. 在 组件 面板中，展开 Heatmaps 组件，并将 All Process Heatmaps 组件类型拖到 canvas 中。
7. 在 Displayer 编辑器 向导中，点 Data 选项卡并选择新创建的 KIE Server dataset。
8. 在 Data 选项卡中，从 Columns 字段中选择 EXTERNAL ID、PROCESSID、NODEID 和 TOTAL_HITS。
9. 在 Process Selector 框中，根据需要选择 Container 和 Process 值。

10. 点 Component Editor 选项卡，然后在 Server Template (mandatory)字段中输入值。

    注意

    要访问 Server Template 的值，请转至 Deploy Execution Servers Server configuration。

11. 单击 Display 选项卡，再根据需要编辑 Chart、Margins、Filter、Refresh 和 Columns 的值。

12. 单击 +OK。

    图 55.4. 多个进程 heatmap 组件示例

    

    View larger image

    

流程

1. 进入 appformer/dashbuilder/dashbuilder-shared/dashbuilder-js 目录。

2. 在 dashbuilder-js 目录中打开终端并输入以下命令：

   yarn run init && yarn run build:fast

   Copy to Clipboard Toggle word wrap

   您可以在 dashbuilder-js/packages 目录中看到以下组件：

   • processes-heatmaps-component
   • process-heatmap-component
   • 徽标-component
   • heatmap-component

3. 进入 dashbuilder-js/packages 目录，打开所需的 heatmap 组件，然后在终端中输入以下命令：

   yarn run start

   Copy to Clipboard Toggle word wrap

4. 要访问组件，在网页浏览器中输入 http://localhost:9001/。

   所选组件在 web 浏览器中显示。