vizceral-component： Netflix 创新的流量可视化组件

vizceral-component： Netflix 创新的流量可视化组件

vizceral-componentweb component wrapper for vizceral项目地址:https://gitcode.com/gh_mirrors/vi/vizceral-component

vizceral-component 是一个基于 Web Component 技术的封装库，它用于展示在 WebGL Canvas 上的网络流量数据。当提供了一组带有流量信息的节点和边图后，它将动态渲染出连接之间的流量图形。

该组件可以接受多张流量图，并生成一张“全局”图，显示每个“区域”的所有流入流量，同时还支持跨区域流量的展示。

快速上手

1. 在你的 bower.json 文件中添加 vizceral-component 以及 webcomponentsjs 靠谱版本依赖：

   "dependencies": {
     "vizceral-component": "git+ssh://git@github.com:Netflix/vizceral-component.git#master",
     "webcomponentsjs": "^0.7.21"
   }
   

2. 安装 bower 依赖：

   $ bower install
   

3. 确保 webcomponentsjs 和 vizceral-component 被复制到你的公共文件夹。

4. 添加导入语句到 HTML 文件中：

   <script type="text/javascript" src="js/webcomponents-lite.js"></script>
   <link rel="import" href="components/vizceral-component/vizceral-component.html"></link>
   

5. 在页面任何位置添加 vizceral-component 组件：

   <vizceral-component view="['us-west-2']" show-labels="true" />
   

   注意，必须调用 updateData 方法向组件传递相关流量数据，否则组件不会显示任何内容。

样式自定义

vizceral-component 使用 CSS 变量来设置所有样式。例如，如果给组件添加类名 vizceral-component：

.vizceral-component {
  /* ... */
}

因为 vizceral-component 的底层渲染使用了 three.js，所以为了方便 CSS 和 JS 共享相同的变量值，采用了 CSS 变量，这样可以在 JS 中轻易解析它们。

事件监听

详细事件列表，请参考 ELEMENT.md。

本地开发

要查看对 vizceral-component 的本地修改，你需要通过 bower 进行本地链接：

$ git clone ssh://git@stash.corp.netflix.com:7999/traffic/vizceral-component.git
$ cd vizceral-component
$ bower link
$ cd /path/to/project-using-vizceral-component
$ bower link vizceral-component

贡献代码

1. 分支创建：git checkout -b your-feature
2. 编辑代码
3. 测试你的改动（运行本地版本）
4. 推送分支并发起 Pull Request

许可证

本代码库遵循 Apache 2.0 许可证。

数据结构

vizceral-component 所期望的数据格式示例见文档中的描述。

vizceral-component 结合了强大的 Web Component 技术和高效的 WebGL 渲染，为网络流量监控提供了一种直观且富有表现力的解决方案。无论是运维人员分析系统健康状况，还是开发者调试应用性能，都是不可或缺的工具。它的高度定制性和简单易用的特点，使其成为任何需要实时流量可视化的项目理想选择。立即开始使用 vizceral-component，提升你的数据呈现体验吧！

vizceral-componentweb component wrapper for vizceral项目地址:https://gitcode.com/gh_mirrors/vi/vizceral-component