基于AntV G6的Kettle工具前端設(shè)計(jì)與實(shí)現(xiàn)

胡天一，張浩洋，顧丹鵬

（1. 中國(guó)電建集團(tuán)華東勘測(cè)設(shè)計(jì)研究院有限公司，杭州 311122；2. 浙江華東工程數(shù)字技術(shù)有限公司，杭州 311122）

0 引言

在當(dāng)今數(shù)據(jù)驅(qū)動(dòng)的世界中，企業(yè)對(duì)大量數(shù)據(jù)進(jìn)行處理、轉(zhuǎn)換并加載到各種系統(tǒng)中的過(guò)程被稱(chēng)為ETL（提取、轉(zhuǎn)換、加載），其是數(shù)據(jù)倉(cāng)庫(kù)獲取高質(zhì)量數(shù)據(jù)的關(guān)鍵環(huán)節(jié)［1］。Kettle 是一種廣泛使用的ETL 工具，可幫助企業(yè)從各種來(lái)源提取數(shù)據(jù)，根據(jù)業(yè)務(wù)需求對(duì)其進(jìn)行轉(zhuǎn)換，并將其加載到目標(biāo)系統(tǒng)中。然而，Kettle 的C/S 架構(gòu)限制了它的靈活性，使得構(gòu)建B 端應(yīng)用程序的數(shù)據(jù)交換變得十分困難。

為了克服Kettle架構(gòu)的局限性，本文提出了一種使用Antv G6 圖形可視化引擎作為可視化開(kāi)發(fā)工具，設(shè)計(jì)并實(shí)現(xiàn)了Kettle工具前端功能的解決方案。該方案利用了G6 的自定義機(jī)制，提高了Kettle的靈活性與可擴(kuò)展性。

1 介紹

1.1 Kettle工具

Kettle（Pentaho Data Integration）是一個(gè)開(kāi)源的ETL 工具，由Pentaho 開(kāi)發(fā)和維護(hù)。它可用于提取、轉(zhuǎn)換和加載數(shù)據(jù)，支持各種數(shù)據(jù)源和目標(biāo)，如文件、數(shù)據(jù)庫(kù)、Web 服務(wù)等。Kettle 提供了一個(gè)圖形化的界面，使用戶(hù)可以通過(guò)簡(jiǎn)單地拖放和鏈接組件來(lái)構(gòu)建ETL 流程，而無(wú)需編寫(xiě)代碼。Kettle 還提供了豐富的轉(zhuǎn)換和處理功能，如數(shù)據(jù)清洗、聚合、關(guān)聯(lián)和過(guò)濾等，以及強(qiáng)大的調(diào)度和監(jiān)控功能，以確保數(shù)據(jù)的可靠性和準(zhǔn)確性。Kettle 還支持多種數(shù)據(jù)格式和協(xié)議，并提供了大量的插件和擴(kuò)展，使用戶(hù)可以輕松地將其與其他工具和平臺(tái)集成。由于其易用性、可靠性和靈活性，Kettle 在商業(yè)領(lǐng)域中廣泛應(yīng)用于數(shù)據(jù)集成、數(shù)據(jù)倉(cāng)庫(kù)、商業(yè)智能和數(shù)據(jù)分析等方面。

1.2 Kettle的局限性

Kettle 使用的是C/S 架構(gòu)，可以滿(mǎn)足很多ETL應(yīng)用場(chǎng)景的需求。但是，當(dāng)需要構(gòu)建B端應(yīng)用時(shí)，Kettle的C/S架構(gòu)存在一些局限性。首先，C/S 架構(gòu)的服務(wù)器端需要部署在本地或者專(zhuān)門(mén)的服務(wù)器上，這增加了部署和維護(hù)的成本。其次，客戶(hù)端的用戶(hù)界面只能在桌面應(yīng)用程序中使用，無(wú)法在Web應(yīng)用程序中使用。最后，C/S 架構(gòu)的限制使得Kettle很難與其他Web應(yīng)用程序和數(shù)據(jù)源集成，這限制了它的靈活性和可擴(kuò)展性。

2 方案

解決Kettle 本身C/S 架構(gòu)的局限性，最直接的方法就是摒棄C/S架構(gòu)，通過(guò)構(gòu)建Web應(yīng)用來(lái)實(shí)現(xiàn)Kettle 功能。而要在Web 應(yīng)用中實(shí)現(xiàn)Kettle功能，前端的可視化技術(shù)必不可缺。隨著瀏覽器性能的提升，可視化技術(shù)已經(jīng)相當(dāng)成熟，許多企業(yè)都已經(jīng)使用該技術(shù)來(lái)呈現(xiàn)復(fù)雜的數(shù)據(jù)和信息。并且前端的可視化框架也非常豐富，例如D3.js、ECharts、Highcharts 等，都能提供豐富的圖表和可視化組件，具備強(qiáng)大的數(shù)據(jù)處理和渲染能力。

本文選擇了Antv G6 圖可視化引擎來(lái)進(jìn)行應(yīng)用開(kāi)發(fā)。G6 是螞蟻集團(tuán)數(shù)據(jù)可視化團(tuán)隊(duì)設(shè)計(jì)實(shí)現(xiàn)的圖形可視化庫(kù)。G6 結(jié)合了基于模板的配置以獲得高可用性和靈活的定制，以獲得高表達(dá)性。為了提高開(kāi)發(fā)效率，G6 提出了一套機(jī)制，包括狀態(tài)管理和交互模式。布局、算法和插件的豐富集成使G6具有更高級(jí)別的分析能力［2］。

本文通過(guò)G6 提供的自定義節(jié)點(diǎn)、自定義邊功能以及大量的內(nèi)置圖布局，在Web 應(yīng)用中設(shè)計(jì)實(shí)現(xiàn)Kettle 的交互功能，從而解決了Kettle 架構(gòu)局限性帶來(lái)的問(wèn)題。

3 設(shè)計(jì)實(shí)現(xiàn)

3.1 功能概述

Kettle 包含轉(zhuǎn)換和作業(yè)，二者交互模式基本相同，主要功能和交互如下：

（1）創(chuàng)建節(jié)點(diǎn)：左側(cè)核心對(duì)象樹(shù)節(jié)點(diǎn)拖拽進(jìn)入畫(huà)布，并打開(kāi)彈窗進(jìn)行節(jié)點(diǎn)編輯。

（2）節(jié)點(diǎn)編輯：雙擊或者右擊節(jié)點(diǎn)打開(kāi)彈框進(jìn)行內(nèi)容編輯。

（3）節(jié)點(diǎn)拖拽：按住節(jié)點(diǎn)四周進(jìn)行拖拽。

（4）節(jié)點(diǎn)連接：按住節(jié)點(diǎn)中心區(qū)域后移動(dòng)光標(biāo)，節(jié)點(diǎn)將延伸出連接線。將光標(biāo)落在另一節(jié)點(diǎn)，連線即被創(chuàng)建。

（5）畫(huà)布交互：按住畫(huà)布移動(dòng)進(jìn)行拖拽等。

（6）狀態(tài)變化：光標(biāo)經(jīng)過(guò)節(jié)點(diǎn)時(shí)，節(jié)點(diǎn)和連線樣式變化。

根據(jù)上述功能，本文利用G6 進(jìn)行節(jié)點(diǎn)、連線和畫(huà)布設(shè)計(jì)。

3.2 節(jié)點(diǎn)設(shè)計(jì)與實(shí)現(xiàn)

首先在設(shè)計(jì)功能邏輯之前，需完成節(jié)點(diǎn)本身的設(shè)計(jì)。Kettle 中的節(jié)點(diǎn)形狀基本為帶邊框的正方形，并且在與鼠標(biāo)指針重疊時(shí)會(huì)發(fā)生狀態(tài)變化，這里可使用自定義節(jié)點(diǎn)實(shí)現(xiàn)該效果。在設(shè)計(jì)自定義節(jié)點(diǎn)時(shí)，G6定義了三個(gè)方法：

（1）draw（cfg,group）：繪制，提供了繪制的配置項(xiàng)（數(shù)據(jù)定義時(shí)透?jìng)鬟^(guò)來(lái)）和圖形容器，必須返回合理的圖形作為keyShape。

（2）update（cfg,n）：更新，更新時(shí)的配置項(xiàng)（更新的字段和原始字段的合并）和元素對(duì)象。

（3）setState（name,value,item）：響應(yīng)節(jié)點(diǎn)和線狀態(tài)的變化。

根據(jù)上述方法可知，需要在自定義節(jié)點(diǎn)時(shí)利用draw 方法進(jìn)行節(jié)點(diǎn)Shape 及keyShape 的設(shè)計(jì)。根據(jù)Kettle 中的節(jié)點(diǎn)形狀，在draw 方法中添加總邊框、外邊框、內(nèi)邊框，在afterDraw 方法中對(duì)內(nèi)邊框進(jìn)行狀態(tài)控制，同時(shí)在setState 方法中實(shí)時(shí)監(jiān)聽(tīng)節(jié)點(diǎn)的狀態(tài)，根據(jù)節(jié)點(diǎn)狀態(tài)是否被選中，改變節(jié)點(diǎn)內(nèi)邊框的顏色，實(shí)現(xiàn)節(jié)點(diǎn)對(duì)鼠標(biāo)指針移動(dòng)事件的響應(yīng)。

G6 的圖提供了事件監(jiān)聽(tīng)的方法，通過(guò)在全局graph 實(shí)例上綁定事件監(jiān)聽(tīng)，即可實(shí)現(xiàn)節(jié)點(diǎn)與畫(huà)布對(duì)鼠標(biāo)事件的響應(yīng)。事件監(jiān)聽(tīng)方法graph.on（EventName, Handler）接收兩個(gè)參數(shù)，第一個(gè)是事件名，第二個(gè)是監(jiān)聽(tīng)函數(shù)。EventName約定了以下事件類(lèi)型：通用交互事件、Node交互事件、Edge 交互事件、Canvas 交互事件和時(shí)機(jī)事件。不同類(lèi)型的交互事件分別對(duì)應(yīng)不同的交互邏輯，根據(jù)G6 提供的這些事件響應(yīng)，即可執(zhí)行用戶(hù)自定義的回調(diào)方法。

利用上述方法，3.1 中提到的功能可通過(guò)如下設(shè)計(jì)實(shí)現(xiàn)：

（1）創(chuàng)建節(jié)點(diǎn)。

通過(guò)對(duì)元素dragend 事件進(jìn)行監(jiān)聽(tīng)，添加彈窗打開(kāi)的事件回調(diào)，以元素當(dāng)前在畫(huà)布中的位置為中心，即可創(chuàng)建對(duì)應(yīng)的節(jié)點(diǎn)并打開(kāi)彈窗進(jìn)行內(nèi)容編輯。

（2）節(jié)點(diǎn)編輯。

在node實(shí)例上綁定node:dbClick 事件，并添加彈窗打開(kāi)的事件回調(diào)，實(shí)現(xiàn)用戶(hù)對(duì)節(jié)點(diǎn)進(jìn)行雙擊時(shí)就會(huì)打開(kāi)彈窗進(jìn)行內(nèi)容編輯的操作。

在node 實(shí)例上綁定node:contextmenu 事件與右鍵菜單彈窗打開(kāi)的事件回調(diào)，實(shí)現(xiàn)用戶(hù)對(duì)節(jié)點(diǎn)進(jìn)行鼠標(biāo)右擊時(shí)打開(kāi)下拉選項(xiàng)的操作。（3）節(jié)點(diǎn)拖拽。

在node 實(shí)例上綁定node:dragstart、node:dragend 事件，實(shí)現(xiàn)用戶(hù)對(duì)節(jié)點(diǎn)的拖拽操作。

對(duì)節(jié)點(diǎn)進(jìn)行的設(shè)計(jì)完成后，圖中的節(jié)點(diǎn)展示如圖1和圖2所示。

圖1 轉(zhuǎn)換的節(jié)點(diǎn)展示

圖2 作業(yè)的節(jié)點(diǎn)展示

3.3 連線設(shè)計(jì)與實(shí)現(xiàn)

首先，在draw 方法中設(shè)置連線的Shape，并設(shè)計(jì)連線的默認(rèn)樣式以及相應(yīng)區(qū)域。狀態(tài)控制原理與節(jié)點(diǎn)設(shè)計(jì)類(lèi)似，在setState 方法中監(jiān)聽(tīng)連線是否被選中，由狀態(tài)控制樣式?jīng)Q定。由于G6內(nèi)置提供了創(chuàng)建邊的配置項(xiàng)，因此在完成基本Shape設(shè)計(jì)后，在全局graph實(shí)例配置create-edge為drag 方式即可。此處需要注意，當(dāng)節(jié)點(diǎn)源頭與目標(biāo)為同一個(gè)節(jié)點(diǎn)時(shí)，連線會(huì)默認(rèn)從節(jié)點(diǎn)出發(fā)連接到節(jié)點(diǎn)自身。為了避免這種情況發(fā)生，需要在連線創(chuàng)建事件回調(diào)中進(jìn)行判斷，若source與target節(jié)點(diǎn)相同，則取消創(chuàng)建連線的操作。

由此，3.1 節(jié)中提到的節(jié)點(diǎn)連接功能可通過(guò)如下設(shè)計(jì)實(shí)現(xiàn)：

在配置完create-edge 選項(xiàng)后，在graph 實(shí)例上綁定aftercreateedge 事件，判斷連線的source和target節(jié)點(diǎn)，若不同，則完成連線創(chuàng)建。

對(duì)連線進(jìn)行的設(shè)計(jì)完成后，圖中的節(jié)點(diǎn)與連線展示如圖3和圖4所示。

圖3 轉(zhuǎn)換的節(jié)點(diǎn)與連線展示

圖4 作業(yè)的節(jié)點(diǎn)與連線展示

3.4 畫(huà)布設(shè)計(jì)與實(shí)現(xiàn)

畫(huà)布功能主要為畫(huà)布放縮、平移、居中、自適應(yīng)等。對(duì)于放縮與平移操作，G6在初始化graph時(shí)提供了模式設(shè)置，只需在默認(rèn)模式中啟用zoom-canvas和drag-canvas即可。而針對(duì)畫(huà)布的居中與自適應(yīng)，G6在graph提供了視口操作api，使用fitCenter和fitView方法即可實(shí)現(xiàn)對(duì)應(yīng)操作。

3.5 小結(jié)

利用G6 的優(yōu)勢(shì)，本節(jié)對(duì)節(jié)點(diǎn)、連線和畫(huà)布進(jìn)行了設(shè)計(jì)與實(shí)現(xiàn)，完成了Web 應(yīng)用中的Kettle工具的開(kāi)發(fā)，克服了傳統(tǒng)Kettle 工具C/S 架構(gòu)的局限性。通過(guò)前端可視化技術(shù)，提升了工具的靈活性和可定制性，并為用戶(hù)提供了出色的跨平臺(tái)和跨終端體驗(yàn)，為B 端數(shù)據(jù)交換應(yīng)用提供了一種解決方案。

4 結(jié)語(yǔ)

本文介紹了Kettle 的概念，討論了Kettle 工具C/S 架構(gòu)在構(gòu)建B 端應(yīng)用中的局限性。針對(duì)這些局限性，本文提出了一種利用AntV G6 實(shí)現(xiàn)Kettle 工具前端功能的解決方案，提高了Kettle的靈活性與可擴(kuò)展性。未來(lái)，將繼續(xù)探索可視化技術(shù)在數(shù)據(jù)領(lǐng)域的應(yīng)用，并結(jié)合最新的技術(shù)，推動(dòng)企業(yè)級(jí)數(shù)據(jù)處理和管理的發(fā)展。