编写新的可视化

什么是Apache Zeppelin可视化

Apache Zeppelin 可视化是一个可插拔的包，可以通过 Zeppelin 中的 Helium 框架在运行时加载/卸载。可视化是一个 JavaScript npm 包，用户可以像使用笔记本中的其他内置可视化一样使用它们。

它是如何工作的

1. 从注册表加载Helium包文件

Zeppelin 需要知道有哪些可视化包可用。Zeppelin 将从在线和本地注册表中读取包的信息。注册表可以通过 ZEPPELIN_HELIUM_LOCALREGISTRY_DEFAULT 环境变量或 zeppelin.helium.localregistry.default 属性进行配置。

2. 启用包

一旦Zeppelin从注册表加载Helium包文件，可用的包将显示在Helium菜单中。

点击“启用”按钮。

3. 动态创建并加载可视化包

一旦启用了可视化包，HeliumBundleFactory 会创建一个 js 包。该 js 包由 helium/bundle/load rest api 端点提供服务。

4. 运行可视化

Zeppelin 为加载的可视化显示额外的按钮。用户可以像使用其他内置的可视化一样使用它。

编写新的可视化

1. 创建一个 npm 包

在你的新可视化目录中创建一个package.json。你可以在package.json中添加任何依赖项，但你必须包含两个依赖项：zeppelin-vis和zeppelin-tabledata。

这是一个示例

{
  "name": "zeppelin_horizontalbar",
  "description" : "Horizontal Bar chart",
  "version": "1.0.0",
  "main": "horizontalbar",
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    "zeppelin-tabledata": "*",
    "zeppelin-vis": "*"
  }
}

2. 创建你自己的可视化

要创建自己的可视化，你需要创建一个js文件并从Visualization类导入zeppelin-vis包并扩展该类。zeppelin-tabledata包提供了一些有用的转换，比如透视表，你可以在你的可视化中使用。（你也可以创建自己的转换）。

Visualization 类，有几个方法需要你重写和实现。这里有一个简单的可视化示例，它只是打印 Hello world。

import Visualization from 'zeppelin-vis'
import PassthroughTransformation from 'zeppelin-tabledata/passthrough'

export default class helloworld extends Visualization {
  constructor(targetEl, config) {
    super(targetEl, config)
    this.passthrough = new PassthroughTransformation(config);
  }

  render(tableData) {
    this.targetEl.html('Hello world!')
  }

  getTransformation() {
    return this.passthrough
  }
}

要了解更多关于Visualization类的信息，请查看visualization.js。

您可以查看完整的可视化包示例这里。

Zeppelin 的内置可视化使用了相同的 API，因此您可以查看内置可视化作为额外的示例。

3. 创建Helium包文件并本地部署

Helium 包文件 是一个提供应用程序信息的 json 文件。 Json 文件包含以下信息

{
  "type" : "VISUALIZATION",
  "name" : "zeppelin_horizontalbar",
  "description" : "Horizontal Bar chart (example)",
  "license" : "Apache-2.0",
  "artifact" : "./zeppelin-examples/zeppelin-example-horizontalbar",
  "icon" : "<i class='fa fa-bar-chart rotate90flipX'></i>"
}

将此文件放在您的本地注册表目录中（默认 ./helium）。

类型

当你创建可视化时，'type' 应为 'VISUALIZATION'。同时检查这些类型。

名称

可视化的名称。应该是唯一的。允许使用[A-Za-z90-9_]。

描述

关于可视化的简短描述。

工件

可视化 npm 包的位置。支持带有版本的 npm 包或本地文件系统路径。

例如。

当工件存在于 npm 仓库中时

"artifact": "my-visualiztion@1.0.0"

当工件存在于本地文件系统中时

"artifact": "/path/to/my/visualization"

许可证

许可证信息。

例如。

"license": "Apache-2.0"

图标

用于可视化选择按钮的图标。此字段中的字符串将呈现为HTML标签。

例如。

"icon": "<i class='fa fa-coffee'></i>"

4. 在开发模式下运行

将您的Helium包文件放入本地注册表（ZEPPELIN_HOME/helium）。运行Zeppelin。然后在可视化开发模式下运行zeppelin-web。

cd zeppelin-web
yarn run dev:helium

你可以浏览localhost:9000。每次刷新浏览器时，Zeppelin都会重新构建你的可视化并重新加载更改。

5. 发布你的可视化

完成后，使用npm publish发布你的可视化包。就这样。在一小时内，你的可视化将在Zeppelin的helium菜单中可用。

查看更多

查看氦可视化：转换以获取更复杂的示例。