You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by zj...@apache.org on 2020/12/24 14:36:06 UTC
svn commit: r1884775 [9/49] - in /zeppelin/site/docs: 0.9.0-SNAPSHOT/ 0.9.0/
0.9.0/assets/ 0.9.0/assets/themes/ 0.9.0/assets/themes/zeppelin/
0.9.0/assets/themes/zeppelin/bootstrap/
0.9.0/assets/themes/zeppelin/bootstrap/css/ 0.9.0/assets/themes/zeppel...
Added: zeppelin/site/docs/0.9.0/development/helium/writing_visualization_basic.html
URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.9.0/development/helium/writing_visualization_basic.html?rev=1884775&view=auto
==============================================================================
--- zeppelin/site/docs/0.9.0/development/helium/writing_visualization_basic.html (added)
+++ zeppelin/site/docs/0.9.0/development/helium/writing_visualization_basic.html Thu Dec 24 14:36:01 2020
@@ -0,0 +1,461 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Apache Zeppelin 0.9.0 Documentation: Writing a new Helium Visualization: basic</title>
+ <meta name="description" content="Apache Zeppelin Visualization is a pluggable package that can be loaded/unloaded on runtime through Helium framework in Zeppelin. A Visualization is a javascript npm package and user can use them just like any other built-in visualization in a note.">
+ <meta name="author" content="The Apache Software Foundation">
+
+ <!-- Enable responsive viewport -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+ <!-- Le styles -->
+ <link href="/docs/0.9.0/assets/themes/zeppelin/bootstrap/css/bootstrap.css" rel="stylesheet">
+ <link href="/docs/0.9.0/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" type="text/css">
+ <link href="/docs/0.9.0/assets/themes/zeppelin/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />
+ <!-- Le fav and touch icons -->
+ <!-- Update these with your own images
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+ -->
+
+ <!-- Js -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/docs.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/anchor.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/toc.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/lunr.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/search.js"></script>
+
+ <!-- atom & rss feed -->
+ <link href="/docs/0.9.0/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">
+ <link href="/docs/0.9.0/rss.xml" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container navbar-container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand">
+ <a class="navbar-brand-main" href="http://zeppelin.apache.org">
+ <img src="/docs/0.9.0/assets/themes/zeppelin/img/zeppelin_logo.png" width="50"
+ style="margin-top: -2px;" alt="I'm zeppelin">
+ <span style="margin-left: 5px; font-size: 27px;">Zeppelin</span>
+ <a class="navbar-brand-version" href="/docs/0.9.0"
+ style="font-size: 15px; color: white;"> 0.9.0
+ </a>
+ </a>
+ </div>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick Start <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="title"><span>Getting Started</span></li>
+ <li><a href="/docs/0.9.0/quickstart/install.html">Install</a></li>
+ <li><a href="/docs/0.9.0/quickstart/explore_ui.html">Explore UI</a></li>
+ <li><a href="/docs/0.9.0/quickstart/tutorial.html">Tutorial</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Run Mode</span></li>
+ <li><a href="/docs/0.9.0/quickstart/kubernetes.html">Kubernetes</a></li>
+ <li><a href="/docs/0.9.0/quickstart/docker.html">Docker</a></li>
+ <li><a href="/docs/0.9.0/quickstart/yarn.html">Yarn</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.9.0/quickstart/spark_with_zeppelin.html">Spark with Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/quickstart/sql_with_zeppelin.html">SQL with Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/quickstart/python_with_zeppelin.html">Python with Zeppelin</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Usage<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Dynamic Form</span></li>
+ <li><a href="/docs/0.9.0/usage/dynamic_form/intro.html">What is Dynamic Form?</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Display System</span></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#text">Text Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#html">HTML Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#table">Table Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#network">Network Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/angular_backend.html">Angular Display using Backend API</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/angular_frontend.html">Angular Display using Frontend API</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Interpreter</span></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/overview.html">Overview</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/interpreter_binding_mode.html">Interpreter Binding Mode</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/user_impersonation.html">User Impersonation</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/dependency_management.html">Dependency Management</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/installation.html">Installing Interpreters</a></li>
+ <!--<li><a href="/docs/0.9.0/usage/interpreter/dynamic_loading.html">Dynamic Interpreter Loading (Experimental)</a></li>-->
+ <li><a href="/docs/0.9.0/usage/interpreter/execution_hooks.html">Execution Hooks (Experimental)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Other Features</span></li>
+ <li><a href="/docs/0.9.0/usage/other_features/publishing_paragraphs.html">Publishing Paragraphs</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/personalized_mode.html">Personalized Mode</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/customizing_homepage.html">Customizing Zeppelin Homepage</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/notebook_actions.html">Notebook Actions</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/cron_scheduler.html">Cron Scheduler</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/zeppelin_context.html">Zeppelin Context</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>REST API</span></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/interpreter.html">Interpreter API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/zeppelin_server.html">Zeppelin Server API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/notebook.html">Notebook API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/notebook_repository.html">Notebook Repository API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/configuration.html">Configuration API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/credential.html">Credential API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/helium.html">Helium API</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Setup<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Basics</span></li>
+ <li><a href="/docs/0.9.0/setup/basics/how_to_build.html">How to Build Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/setup/basics/hadoop_integration.html">Hadoop Integration</a></li>
+ <li><a href="/docs/0.9.0/setup/basics/multi_user_support.html">Multi-user Support</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Deployment</span></li>
+ <!--<li><a href="/docs/0.9.0/setup/deployment/docker.html">Docker Image for Zeppelin</a></li>-->
+ <li><a href="/docs/0.9.0/setup/deployment/spark_cluster_mode.html#spark-standalone-mode">Spark Cluster Mode: Standalone</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/spark_cluster_mode.html#spark-on-yarn-mode">Spark Cluster Mode: YARN</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/spark_cluster_mode.html#spark-on-mesos-mode">Spark Cluster Mode: Mesos</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/flink_and_spark_cluster.html">Zeppelin with Flink, Spark Cluster</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/cdh.html">Zeppelin on CDH</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/virtual_machine.html">Zeppelin on VM: Vagrant</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Security</span></li>
+ <li><a href="/docs/0.9.0/setup/security/authentication_nginx.html">HTTP Basic Auth using NGINX</a></li>
+ <li><a href="/docs/0.9.0/setup/security/shiro_authentication.html">Shiro Authentication</a></li>
+ <li><a href="/docs/0.9.0/setup/security/notebook_authorization.html">Notebook Authorization</a></li>
+ <li><a href="/docs/0.9.0/setup/security/datasource_authorization.html">Data Source Authorization</a></li>
+ <li><a href="/docs/0.9.0/setup/security/http_security_headers.html">HTTP Security Headers</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Notebook Storage</span></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-local-git-repository">Git Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-s3">S3 Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-azure">Azure Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-oss">OSS Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-zeppelinhub">ZeppelinHub Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-mongodb">MongoDB Storage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Operation</span></li>
+ <li><a href="/docs/0.9.0/setup/operation/configuration.html">Configuration</a></li>
+ <li><a href="/docs/0.9.0/setup/operation/proxy_setting.html">Proxy Setting</a></li>
+ <li><a href="/docs/0.9.0/setup/operation/upgrading.html">Upgrading</a></li>
+ <li><a href="/docs/0.9.0/setup/operation/trouble_shooting.html">Trouble Shooting</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Interpreter <b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Interpreters</span></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/overview.html">Overview</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.9.0/interpreter/spark.html">Spark</a></li>
+ <li><a href="/docs/0.9.0/interpreter/jdbc.html">JDBC</a></li>
+ <li><a href="/docs/0.9.0/interpreter/python.html">Python</a></li>
+ <li><a href="/docs/0.9.0/interpreter/r.html">R</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.9.0/interpreter/alluxio.html">Alluxio</a></li>
+ <li><a href="/docs/0.9.0/interpreter/beam.html">Beam</a></li>
+ <li><a href="/docs/0.9.0/interpreter/bigquery.html">BigQuery</a></li>
+ <li><a href="/docs/0.9.0/interpreter/cassandra.html">Cassandra</a></li>
+ <li><a href="/docs/0.9.0/interpreter/elasticsearch.html">Elasticsearch</a></li>
+ <li><a href="/docs/0.9.0/interpreter/flink.html">Flink</a></li>
+ <li><a href="/docs/0.9.0/interpreter/geode.html">Geode</a></li>
+ <li><a href="/docs/0.9.0/interpreter/groovy.html">Groovy</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hazelcastjet.html">Hazelcast Jet</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hbase.html">HBase</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hdfs.html">HDFS</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hive.html">Hive</a></li>
+ <li><a href="/docs/0.9.0/interpreter/ignite.html">Ignite</a></li>
+ <li><a href="/docs/0.9.0/interpreter/java.html">Java</a></li>
+ <li><a href="/docs/0.9.0/interpreter/jupyter.html">Jupyter</a></li>
+ <li><a href="/docs/0.9.0/interpreter/kotlin.html">Kotlin</a></li>
+ <li><a href="/docs/0.9.0/interpreter/kylin.html">Kylin</a></li>
+ <li><a href="/docs/0.9.0/interpreter/lens.html">Lens</a></li>
+ <li><a href="/docs/0.9.0/interpreter/livy.html">Livy</a></li>
+ <li><a href="/docs/0.9.0/interpreter/markdown.html">Markdown</a></li>
+ <li><a href="/docs/0.9.0/interpreter/mongodb.html">MongoDB</a></li>
+ <li><a href="/docs/0.9.0/interpreter/neo4j.html">Neo4j</a></li>
+ <li><a href="/docs/0.9.0/interpreter/pig.html">Pig</a></li>
+ <li><a href="/docs/0.9.0/interpreter/postgresql.html">Postgresql, HAWQ</a></li>
+ <li><a href="/docs/0.9.0/interpreter/scalding.html">Scalding</a></li>
+ <li><a href="/docs/0.9.0/interpreter/scio.html">Scio</a></li>
+ <li><a href="/docs/0.9.0/interpreter/shell.html">Shell</a></li>
+ <li><a href="/docs/0.9.0/interpreter/sparql.html">Sparql</a></li>
+ <li><a href="/docs/0.9.0/interpreter/submarine.html">Submarine</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu" style="right: 0; left: auto;">
+ <li class="title"><span>Extending Zeppelin</span></li>
+ <li><a href="/docs/0.9.0/development/writing_zeppelin_interpreter.html">Writing Zeppelin Interpreter</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Helium (Experimental)</span></li>
+ <li><a href="/docs/0.9.0/development/helium/overview.html">Overview</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_application.html">Writing Helium Application</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_spell.html">Writing Helium Spell</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_visualization_basic.html">Writing Helium Visualization: Basics</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_visualization_transformation.html">Writing Helium Visualization: Transformation</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Contributing to Zeppelin</span></li>
+ <li><a href="/docs/0.9.0/setup/basics/how_to_build.html">How to Build Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/development/contribution/useful_developer_tools.html">Useful Developer Tools</a></li>
+ <li><a href="/docs/0.9.0/development/contribution/how_to_contribute_code.html">How to Contribute (code)</a></li>
+ <li><a href="/docs/0.9.0/development/contribution/how_to_contribute_website.html">How to Contribute (website)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>External Resources</span></li>
+ <li><a target="_blank" href="https://zeppelin.apache.org/community.html">Mailing List</a></li>
+ <li><a target="_blank" href="https://cwiki.apache.org/confluence/display/ZEPPELIN/Zeppelin+Home">Apache Zeppelin Wiki</a></li>
+ <li><a target="_blank" href="http://stackoverflow.com/questions/tagged/apache-zeppelin">Stackoverflow Questions about Zeppelin</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="/docs/0.9.0/search.html" class="nav-search-link">
+ <span class="fa fa-search nav-search-icon"></span>
+ </a>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+<!--<div class="hero-unit Writing a new Helium Visualization: basic">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<h1>Writing a new Visualization</h1>
+
+<div id="toc"></div>
+
+<h2>What is Apache Zeppelin Visualization</h2>
+
+<p>Apache Zeppelin Visualization is a pluggable package that can be loaded/unloaded on runtime through Helium framework in Zeppelin. A Visualization is a javascript npm package and user can use them just like any other built-in visualization in notebook.</p>
+
+<h2>How it works</h2>
+
+<h4>1. Load Helium package files from registry</h4>
+
+<p>Zeppelin needs to know what Visualization packages are available. Zeppelin will read information of packages from both online and local registry.
+Registries are configurable through <code>ZEPPELIN_HELIUM_LOCALREGISTRY_DEFAULT</code> env variable or <code>zeppelin.helium.localregistry.default</code> property.</p>
+
+<h4>2. Enable packages</h4>
+
+<p>Once Zeppelin loads <em>Helium package files</em> from registries, available packages are displayed in Helium menu.</p>
+
+<p>Click 'enable' button.</p>
+
+<p><img class="img-responsive" style="width:70%" src="/docs/0.9.0/assets/themes/zeppelin/img/docs-img/writing_visualization_helium_menu.png" /></p>
+
+<h4>3. Create and load visualization bundle on the fly</h4>
+
+<p>Once a Visualization package is enabled, <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-zengine/src/main/java/org/apache/zeppelin/helium/HeliumBundleFactory.java">HeliumBundleFactory</a> creates a js bundle. The js bundle is served by <code>helium/bundle/load</code> rest api endpoint.</p>
+
+<h4>4. Run visualization</h4>
+
+<p>Zeppelin shows additional button for loaded Visualizations.
+User can use just like any other built-in visualizations.</p>
+
+<p><img class="img-responsive" style="width:70%" src="/docs/0.9.0/assets/themes/zeppelin/img/docs-img/writing_visualization_example.png" /></p>
+
+<h2>Write new Visualization</h2>
+
+<h4>1. Create a npm package</h4>
+
+<p>Create a <a href="https://docs.npmjs.com/files/package.json">package.json</a> in your new Visualization directory. You can add any dependencies in package.json, but you <strong>must include two dependencies: <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization">zeppelin-vis</a> and <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata">zeppelin-tabledata</a>.</strong></p>
+
+<p>Here's an example</p>
+<div class="highlight"><pre><code class="json language-json" data-lang="json"><span class="p">{</span>
+ <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"zeppelin_horizontalbar"</span><span class="p">,</span>
+ <span class="nt">"description"</span> <span class="p">:</span> <span class="s2">"Horizontal Bar chart"</span><span class="p">,</span>
+ <span class="nt">"version"</span><span class="p">:</span> <span class="s2">"1.0.0"</span><span class="p">,</span>
+ <span class="nt">"main"</span><span class="p">:</span> <span class="s2">"horizontalbar"</span><span class="p">,</span>
+ <span class="nt">"author"</span><span class="p">:</span> <span class="s2">""</span><span class="p">,</span>
+ <span class="nt">"license"</span><span class="p">:</span> <span class="s2">"Apache-2.0"</span><span class="p">,</span>
+ <span class="nt">"dependencies"</span><span class="p">:</span> <span class="p">{</span>
+ <span class="nt">"zeppelin-tabledata"</span><span class="p">:</span> <span class="s2">"*"</span><span class="p">,</span>
+ <span class="nt">"zeppelin-vis"</span><span class="p">:</span> <span class="s2">"*"</span>
+ <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<h4>2. Create your own visualization</h4>
+
+<p>To create your own visualization, you need to create a js file and import <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js">Visualization</a> class from <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization">zeppelin-vis</a> package and extend the class. <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata">zeppelin-tabledata</a> package provides some useful transformations, like pivot, you can use in your visualization. (you can create your own transformation, too).</p>
+
+<p><a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js">Visualization</a> class, there're several methods that you need to override and implement. Here's simple visualization that just prints <code>Hello world</code>.</p>
+<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kr">import</span> <span class="nx">Visualization</span> <span class="nx">from</span> <span class="s1">'zeppelin-vis'</span>
+<span class="kr">import</span> <span class="nx">PassthroughTransformation</span> <span class="nx">from</span> <span class="s1">'zeppelin-tabledata/passthrough'</span>
+
+<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">helloworld</span> <span class="kr">extends</span> <span class="nx">Visualization</span> <span class="p">{</span>
+ <span class="nx">constructor</span><span class="p">(</span><span class="nx">targetEl</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">super</span><span class="p">(</span><span class="nx">targetEl</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">passthrough</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PassthroughTransformation</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
+ <span class="p">}</span>
+
+ <span class="nx">render</span><span class="p">(</span><span class="nx">tableData</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">targetEl</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="s1">'Hello world!'</span><span class="p">)</span>
+ <span class="p">}</span>
+
+ <span class="nx">getTransformation</span><span class="p">()</span> <span class="p">{</span>
+ <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">passthrough</span>
+ <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<p>To learn more about <code>Visualization</code> class, check <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js">visualization.js</a>.</p>
+
+<p>You can check complete visualization package example <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-examples/zeppelin-example-horizontalbar">here</a>.</p>
+
+<p>Zeppelin's built-in visualization uses the same API, so you can check <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization/builtins">built-in visualizations</a> as additional examples.</p>
+
+<h4>3. Create <strong>Helium package file</strong> and locally deploy</h4>
+
+<p><strong>Helium Package file</strong> is a json file that provides information about the application.
+Json file contains the following information</p>
+<div class="highlight"><pre><code class="json language-json" data-lang="json"><span class="p">{</span>
+ <span class="nt">"type"</span> <span class="p">:</span> <span class="s2">"VISUALIZATION"</span><span class="p">,</span>
+ <span class="nt">"name"</span> <span class="p">:</span> <span class="s2">"zeppelin_horizontalbar"</span><span class="p">,</span>
+ <span class="nt">"description"</span> <span class="p">:</span> <span class="s2">"Horizontal Bar chart (example)"</span><span class="p">,</span>
+ <span class="nt">"license"</span> <span class="p">:</span> <span class="s2">"Apache-2.0"</span><span class="p">,</span>
+ <span class="nt">"artifact"</span> <span class="p">:</span> <span class="s2">"./zeppelin-examples/zeppelin-example-horizontalbar"</span><span class="p">,</span>
+ <span class="nt">"icon"</span> <span class="p">:</span> <span class="s2">"<i class='fa fa-bar-chart rotate90flipX'></i>"</span>
+<span class="p">}</span>
+</code></pre></div>
+<p>Place this file in your local registry directory (default <code>./helium</code>).</p>
+
+<h5>type</h5>
+
+<p>When you're creating a visualization, 'type' should be 'VISUALIZATION'. Check these types as well.</p>
+
+<ul>
+<li><a href="./writing_application.html">Helium Application</a></li>
+<li><a href="./writing_spell.html">Helium Spell</a></li>
+</ul>
+
+<h5>name</h5>
+
+<p>Name of visualization. Should be unique. Allows <code>[A-Za-z90-9_]</code>.</p>
+
+<h5>description</h5>
+
+<p>A short description about visualization.</p>
+
+<h5>artifact</h5>
+
+<p>Location of the visualization npm package. Support npm package with version or local filesystem path.</p>
+
+<p>e.g.</p>
+
+<p>When artifact exists in npm repository</p>
+<div class="highlight"><pre><code class="json language-json" data-lang="json"><span class="s2">"artifact"</span><span class="err">:</span> <span class="s2">"my-visualiztion@1.0.0"</span>
+</code></pre></div>
+<p>When artifact exists in local file system</p>
+<div class="highlight"><pre><code class="json language-json" data-lang="json"><span class="s2">"artifact"</span><span class="err">:</span> <span class="s2">"/path/to/my/visualization"</span>
+</code></pre></div>
+<h5>license</h5>
+
+<p>License information.</p>
+
+<p>e.g.</p>
+<div class="highlight"><pre><code class="json language-json" data-lang="json"><span class="s2">"license"</span><span class="err">:</span> <span class="s2">"Apache-2.0"</span>
+</code></pre></div>
+<h5>icon</h5>
+
+<p>Icon to be used in visualization select button. String in this field will be rendered as a HTML tag.</p>
+
+<p>e.g.</p>
+<div class="highlight"><pre><code class="json language-json" data-lang="json"><span class="s2">"icon"</span><span class="err">:</span> <span class="s2">"<i class='fa fa-coffee'></i>"</span>
+</code></pre></div>
+<h4>4. Run in dev mode</h4>
+
+<p>Place your <strong>Helium package file</strong> in local registry (<code>ZEPPELIN_HOME/helium</code>).
+Run Zeppelin. And then run zeppelin-web in visualization dev mode.</p>
+<div class="highlight"><pre><code class="bash language-bash" data-lang="bash"><span class="nb">cd </span>zeppelin-web
+yarn run dev:helium
+</code></pre></div>
+<p>You can browse <code>localhost:9000</code>. Everytime refresh your browser, Zeppelin will rebuild your visualization and reload changes.</p>
+
+<h4>5. Publish your visualization</h4>
+
+<p>Once it's done, publish your visualization package using <code>npm publish</code>.
+That's it. With in an hour, your visualization will be available in Zeppelin's helium menu.</p>
+
+<h3>See More</h3>
+
+<p>Check <a href="./writing_visualization_transformation.html">Helium Visualization: Transformation</a> for more complex examples.</p>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2020 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+
+
+ <script type="text/javascript">
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+ ga('require', 'linkid', 'linkid.js');
+ ga('send', 'pageview');
+
+</script>
+
+
+
+ </body>
+</html>
+
Propchange: zeppelin/site/docs/0.9.0/development/helium/writing_visualization_basic.html
------------------------------------------------------------------------------
svn:executable = *
Added: zeppelin/site/docs/0.9.0/development/helium/writing_visualization_transformation.html
URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.9.0/development/helium/writing_visualization_transformation.html?rev=1884775&view=auto
==============================================================================
--- zeppelin/site/docs/0.9.0/development/helium/writing_visualization_transformation.html (added)
+++ zeppelin/site/docs/0.9.0/development/helium/writing_visualization_transformation.html Thu Dec 24 14:36:01 2020
@@ -0,0 +1,668 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Apache Zeppelin 0.9.0 Documentation: Transformations in Zeppelin Visualization</title>
+ <meta name="description" content="Description for Transformations">
+ <meta name="author" content="The Apache Software Foundation">
+
+ <!-- Enable responsive viewport -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+ <!-- Le styles -->
+ <link href="/docs/0.9.0/assets/themes/zeppelin/bootstrap/css/bootstrap.css" rel="stylesheet">
+ <link href="/docs/0.9.0/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" type="text/css">
+ <link href="/docs/0.9.0/assets/themes/zeppelin/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />
+ <!-- Le fav and touch icons -->
+ <!-- Update these with your own images
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+ -->
+
+ <!-- Js -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/docs.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/anchor.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/toc.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/lunr.min.js"></script>
+ <script src="/docs/0.9.0/assets/themes/zeppelin/js/search.js"></script>
+
+ <!-- atom & rss feed -->
+ <link href="/docs/0.9.0/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">
+ <link href="/docs/0.9.0/rss.xml" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container navbar-container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand">
+ <a class="navbar-brand-main" href="http://zeppelin.apache.org">
+ <img src="/docs/0.9.0/assets/themes/zeppelin/img/zeppelin_logo.png" width="50"
+ style="margin-top: -2px;" alt="I'm zeppelin">
+ <span style="margin-left: 5px; font-size: 27px;">Zeppelin</span>
+ <a class="navbar-brand-version" href="/docs/0.9.0"
+ style="font-size: 15px; color: white;"> 0.9.0
+ </a>
+ </a>
+ </div>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick Start <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="title"><span>Getting Started</span></li>
+ <li><a href="/docs/0.9.0/quickstart/install.html">Install</a></li>
+ <li><a href="/docs/0.9.0/quickstart/explore_ui.html">Explore UI</a></li>
+ <li><a href="/docs/0.9.0/quickstart/tutorial.html">Tutorial</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Run Mode</span></li>
+ <li><a href="/docs/0.9.0/quickstart/kubernetes.html">Kubernetes</a></li>
+ <li><a href="/docs/0.9.0/quickstart/docker.html">Docker</a></li>
+ <li><a href="/docs/0.9.0/quickstart/yarn.html">Yarn</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.9.0/quickstart/spark_with_zeppelin.html">Spark with Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/quickstart/sql_with_zeppelin.html">SQL with Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/quickstart/python_with_zeppelin.html">Python with Zeppelin</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Usage<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Dynamic Form</span></li>
+ <li><a href="/docs/0.9.0/usage/dynamic_form/intro.html">What is Dynamic Form?</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Display System</span></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#text">Text Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#html">HTML Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#table">Table Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/basic.html#network">Network Display</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/angular_backend.html">Angular Display using Backend API</a></li>
+ <li><a href="/docs/0.9.0/usage/display_system/angular_frontend.html">Angular Display using Frontend API</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Interpreter</span></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/overview.html">Overview</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/interpreter_binding_mode.html">Interpreter Binding Mode</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/user_impersonation.html">User Impersonation</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/dependency_management.html">Dependency Management</a></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/installation.html">Installing Interpreters</a></li>
+ <!--<li><a href="/docs/0.9.0/usage/interpreter/dynamic_loading.html">Dynamic Interpreter Loading (Experimental)</a></li>-->
+ <li><a href="/docs/0.9.0/usage/interpreter/execution_hooks.html">Execution Hooks (Experimental)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Other Features</span></li>
+ <li><a href="/docs/0.9.0/usage/other_features/publishing_paragraphs.html">Publishing Paragraphs</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/personalized_mode.html">Personalized Mode</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/customizing_homepage.html">Customizing Zeppelin Homepage</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/notebook_actions.html">Notebook Actions</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/cron_scheduler.html">Cron Scheduler</a></li>
+ <li><a href="/docs/0.9.0/usage/other_features/zeppelin_context.html">Zeppelin Context</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>REST API</span></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/interpreter.html">Interpreter API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/zeppelin_server.html">Zeppelin Server API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/notebook.html">Notebook API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/notebook_repository.html">Notebook Repository API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/configuration.html">Configuration API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/credential.html">Credential API</a></li>
+ <li><a href="/docs/0.9.0/usage/rest_api/helium.html">Helium API</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Setup<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Basics</span></li>
+ <li><a href="/docs/0.9.0/setup/basics/how_to_build.html">How to Build Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/setup/basics/hadoop_integration.html">Hadoop Integration</a></li>
+ <li><a href="/docs/0.9.0/setup/basics/multi_user_support.html">Multi-user Support</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Deployment</span></li>
+ <!--<li><a href="/docs/0.9.0/setup/deployment/docker.html">Docker Image for Zeppelin</a></li>-->
+ <li><a href="/docs/0.9.0/setup/deployment/spark_cluster_mode.html#spark-standalone-mode">Spark Cluster Mode: Standalone</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/spark_cluster_mode.html#spark-on-yarn-mode">Spark Cluster Mode: YARN</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/spark_cluster_mode.html#spark-on-mesos-mode">Spark Cluster Mode: Mesos</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/flink_and_spark_cluster.html">Zeppelin with Flink, Spark Cluster</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/cdh.html">Zeppelin on CDH</a></li>
+ <li><a href="/docs/0.9.0/setup/deployment/virtual_machine.html">Zeppelin on VM: Vagrant</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Security</span></li>
+ <li><a href="/docs/0.9.0/setup/security/authentication_nginx.html">HTTP Basic Auth using NGINX</a></li>
+ <li><a href="/docs/0.9.0/setup/security/shiro_authentication.html">Shiro Authentication</a></li>
+ <li><a href="/docs/0.9.0/setup/security/notebook_authorization.html">Notebook Authorization</a></li>
+ <li><a href="/docs/0.9.0/setup/security/datasource_authorization.html">Data Source Authorization</a></li>
+ <li><a href="/docs/0.9.0/setup/security/http_security_headers.html">HTTP Security Headers</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Notebook Storage</span></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-local-git-repository">Git Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-s3">S3 Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-azure">Azure Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-oss">OSS Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-zeppelinhub">ZeppelinHub Storage</a></li>
+ <li><a href="/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-mongodb">MongoDB Storage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Operation</span></li>
+ <li><a href="/docs/0.9.0/setup/operation/configuration.html">Configuration</a></li>
+ <li><a href="/docs/0.9.0/setup/operation/proxy_setting.html">Proxy Setting</a></li>
+ <li><a href="/docs/0.9.0/setup/operation/upgrading.html">Upgrading</a></li>
+ <li><a href="/docs/0.9.0/setup/operation/trouble_shooting.html">Trouble Shooting</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Interpreter <b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li class="title"><span>Interpreters</span></li>
+ <li><a href="/docs/0.9.0/usage/interpreter/overview.html">Overview</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.9.0/interpreter/spark.html">Spark</a></li>
+ <li><a href="/docs/0.9.0/interpreter/jdbc.html">JDBC</a></li>
+ <li><a href="/docs/0.9.0/interpreter/python.html">Python</a></li>
+ <li><a href="/docs/0.9.0/interpreter/r.html">R</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="/docs/0.9.0/interpreter/alluxio.html">Alluxio</a></li>
+ <li><a href="/docs/0.9.0/interpreter/beam.html">Beam</a></li>
+ <li><a href="/docs/0.9.0/interpreter/bigquery.html">BigQuery</a></li>
+ <li><a href="/docs/0.9.0/interpreter/cassandra.html">Cassandra</a></li>
+ <li><a href="/docs/0.9.0/interpreter/elasticsearch.html">Elasticsearch</a></li>
+ <li><a href="/docs/0.9.0/interpreter/flink.html">Flink</a></li>
+ <li><a href="/docs/0.9.0/interpreter/geode.html">Geode</a></li>
+ <li><a href="/docs/0.9.0/interpreter/groovy.html">Groovy</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hazelcastjet.html">Hazelcast Jet</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hbase.html">HBase</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hdfs.html">HDFS</a></li>
+ <li><a href="/docs/0.9.0/interpreter/hive.html">Hive</a></li>
+ <li><a href="/docs/0.9.0/interpreter/ignite.html">Ignite</a></li>
+ <li><a href="/docs/0.9.0/interpreter/java.html">Java</a></li>
+ <li><a href="/docs/0.9.0/interpreter/jupyter.html">Jupyter</a></li>
+ <li><a href="/docs/0.9.0/interpreter/kotlin.html">Kotlin</a></li>
+ <li><a href="/docs/0.9.0/interpreter/kylin.html">Kylin</a></li>
+ <li><a href="/docs/0.9.0/interpreter/lens.html">Lens</a></li>
+ <li><a href="/docs/0.9.0/interpreter/livy.html">Livy</a></li>
+ <li><a href="/docs/0.9.0/interpreter/markdown.html">Markdown</a></li>
+ <li><a href="/docs/0.9.0/interpreter/mongodb.html">MongoDB</a></li>
+ <li><a href="/docs/0.9.0/interpreter/neo4j.html">Neo4j</a></li>
+ <li><a href="/docs/0.9.0/interpreter/pig.html">Pig</a></li>
+ <li><a href="/docs/0.9.0/interpreter/postgresql.html">Postgresql, HAWQ</a></li>
+ <li><a href="/docs/0.9.0/interpreter/scalding.html">Scalding</a></li>
+ <li><a href="/docs/0.9.0/interpreter/scio.html">Scio</a></li>
+ <li><a href="/docs/0.9.0/interpreter/shell.html">Shell</a></li>
+ <li><a href="/docs/0.9.0/interpreter/sparql.html">Sparql</a></li>
+ <li><a href="/docs/0.9.0/interpreter/submarine.html">Submarine</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu" style="right: 0; left: auto;">
+ <li class="title"><span>Extending Zeppelin</span></li>
+ <li><a href="/docs/0.9.0/development/writing_zeppelin_interpreter.html">Writing Zeppelin Interpreter</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Helium (Experimental)</span></li>
+ <li><a href="/docs/0.9.0/development/helium/overview.html">Overview</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_application.html">Writing Helium Application</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_spell.html">Writing Helium Spell</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_visualization_basic.html">Writing Helium Visualization: Basics</a></li>
+ <li><a href="/docs/0.9.0/development/helium/writing_visualization_transformation.html">Writing Helium Visualization: Transformation</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>Contributing to Zeppelin</span></li>
+ <li><a href="/docs/0.9.0/setup/basics/how_to_build.html">How to Build Zeppelin</a></li>
+ <li><a href="/docs/0.9.0/development/contribution/useful_developer_tools.html">Useful Developer Tools</a></li>
+ <li><a href="/docs/0.9.0/development/contribution/how_to_contribute_code.html">How to Contribute (code)</a></li>
+ <li><a href="/docs/0.9.0/development/contribution/how_to_contribute_website.html">How to Contribute (website)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span>External Resources</span></li>
+ <li><a target="_blank" href="https://zeppelin.apache.org/community.html">Mailing List</a></li>
+ <li><a target="_blank" href="https://cwiki.apache.org/confluence/display/ZEPPELIN/Zeppelin+Home">Apache Zeppelin Wiki</a></li>
+ <li><a target="_blank" href="http://stackoverflow.com/questions/tagged/apache-zeppelin">Stackoverflow Questions about Zeppelin</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="/docs/0.9.0/search.html" class="nav-search-link">
+ <span class="fa fa-search nav-search-icon"></span>
+ </a>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+<!--<div class="hero-unit Transformations in Zeppelin Visualization">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<h1>Transformations for Zeppelin Visualization</h1>
+
+<div id="toc"></div>
+
+<h2>Overview</h2>
+
+<p>Transformations </p>
+
+<ul>
+<li><strong>renders</strong> setting which allows users to set columns and </li>
+<li><strong>transforms</strong> table rows according to the configured columns.</li>
+</ul>
+
+<p>Zeppelin provides 4 types of transformations.</p>
+
+<h2>1. PassthroughTransformation</h2>
+
+<p><code>PassthroughTransformation</code> is the simple transformation which does not convert original tabledata at all.</p>
+
+<p>See <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/tabledata/passthrough.js">passthrough.js</a></p>
+
+<h2>2. ColumnselectorTransformation</h2>
+
+<p><code>ColumnselectorTransformation</code> is uses when you need <code>N</code> axes but do not need aggregation. </p>
+
+<p>See <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/tabledata/columnselector.js">columnselector.js</a></p>
+
+<h2>3. PivotTransformation</h2>
+
+<p><code>PivotTransformation</code> provides group by and aggregation. Every chart using <code>PivotTransformation</code> has 3 axes. <code>Keys</code>, <code>Groups</code> and <code>Values</code>.</p>
+
+<p>See <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/tabledata/pivot.js">pivot.js</a></p>
+
+<h2>4. AdvancedTransformation</h2>
+
+<p><code>AdvancedTransformation</code> has more detailed options while providing existing features of <code>PivotTransformation</code> and <code>ColumnselectorTransformation</code></p>
+
+<ul>
+<li>multiple sub charts</li>
+<li>configurable chart axes</li>
+<li>parameter widgets: <code>input</code>, <code>checkbox</code>, <code>option</code>, <code>textarea</code></li>
+<li>parsing parameters automatically based on their types</li>
+<li>expand / fold axis and parameter panels</li>
+<li>multiple transformation methods while supporting lazy converting </li>
+<li>re-initialize the whole configuration based on spec hash.</li>
+</ul>
+
+<h3>Spec</h3>
+
+<p><code>AdvancedTransformation</code> requires <code>spec</code> which includes axis and parameter details for charts.</p>
+
+<p>Let's create 2 sub-charts called <code>line</code> and <code>no-group</code>. Each sub chart can have different axis and parameter depending on their requirements.</p>
+
+<p><br/></p>
+<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kr">class</span> <span class="nx">AwesomeVisualization</span> <span class="kr">extends</span> <span class="nx">Visualization</span> <span class="p">{</span>
+ <span class="nx">constructor</span><span class="p">(</span><span class="nx">targetEl</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">super</span><span class="p">(</span><span class="nx">targetEl</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span>
+
+ <span class="kr">const</span> <span class="nx">spec</span> <span class="o">=</span> <span class="p">{</span>
+ <span class="nx">charts</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s1">'line'</span><span class="o">:</span> <span class="p">{</span>
+ <span class="nx">transform</span><span class="o">:</span> <span class="p">{</span> <span class="nx">method</span><span class="o">:</span> <span class="s1">'object'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="nx">sharedAxis</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="cm">/** set if you want to share axes between sub charts, default is `false` */</span>
+ <span class="nx">axis</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s1">'xAxis'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'multiple'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'key'</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'serial'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="s1">'yAxis'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'multiple'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'aggregator'</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'serial'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="s1">'category'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'multiple'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'group'</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'categorical'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="p">},</span>
+ <span class="nx">parameter</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s1">'xAxisUnit'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'unit of xAxis'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="s1">'yAxisUnit'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'unit of yAxis'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="s1">'lineWidth'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'int'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'width of line'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="p">},</span>
+ <span class="p">},</span>
+
+ <span class="s1">'no-group'</span><span class="o">:</span> <span class="p">{</span>
+ <span class="nx">transform</span><span class="o">:</span> <span class="p">{</span> <span class="nx">method</span><span class="o">:</span> <span class="s1">'object'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="nx">sharedAxis</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+ <span class="nx">axis</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s1">'xAxis'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'single'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'key'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="s1">'yAxis'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'multiple'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'value'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="p">},</span>
+ <span class="nx">parameter</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s1">'xAxisUnit'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'unit of xAxis'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="s1">'yAxisUnit'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'unit of yAxis'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="p">},</span>
+ <span class="p">},</span>
+ <span class="p">}</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">transformation</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AdvancedTransformation</span><span class="p">(</span><span class="nx">config</span><span class="p">,</span> <span class="nx">spec</span><span class="p">)</span>
+ <span class="p">}</span>
+
+ <span class="p">...</span>
+
+ <span class="c1">// `render` will be called whenever `axis` or `parameter` is changed </span>
+ <span class="nx">render</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">const</span> <span class="p">{</span> <span class="nx">chart</span><span class="p">,</span> <span class="nx">parameter</span><span class="p">,</span> <span class="nx">column</span><span class="p">,</span> <span class="nx">transformer</span><span class="p">,</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">data</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="nx">chart</span> <span class="o">===</span> <span class="s1">'line'</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">const</span> <span class="nx">transformed</span> <span class="o">=</span> <span class="nx">transformer</span><span class="p">()</span>
+ <span class="c1">// draw line chart </span>
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">chart</span> <span class="o">===</span> <span class="s1">'no-group'</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">const</span> <span class="nx">transformed</span> <span class="o">=</span> <span class="nx">transformer</span><span class="p">()</span>
+ <span class="c1">// draw no-group chart </span>
+ <span class="p">}</span>
+ <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<p><br/></p>
+
+<h3>Spec: <code>axis</code></h3>
+
+<table><thead>
+<tr>
+<th>Field Name</th>
+<th>Available Values (type)</th>
+<th>Description</th>
+</tr>
+</thead><tbody>
+<tr>
+<td><code>dimension</code></td>
+<td><code>single</code></td>
+<td>Axis can contains only 1 column</td>
+</tr>
+<tr>
+<td><code>dimension</code></td>
+<td><code>multiple</code></td>
+<td>Axis can contains multiple columns</td>
+</tr>
+<tr>
+<td><code>axisType</code></td>
+<td><code>key</code></td>
+<td>Column(s) in this axis will be used as <code>key</code> like in <code>PivotTransformation</code>. These columns will be served in <code>column.key</code></td>
+</tr>
+<tr>
+<td><code>axisType</code></td>
+<td><code>aggregator</code></td>
+<td>Column(s) in this axis will be used as <code>value</code> like in <code>PivotTransformation</code>. These columns will be served in <code>column.aggregator</code></td>
+</tr>
+<tr>
+<td><code>axisType</code></td>
+<td><code>group</code></td>
+<td>Column(s) in this axis will be used as <code>group</code> like in <code>PivotTransformation</code>. These columns will be served in <code>column.group</code></td>
+</tr>
+<tr>
+<td><code>axisType</code></td>
+<td>(string)</td>
+<td>Any string value can be used here. These columns will be served in <code>column.custom</code></td>
+</tr>
+<tr>
+<td><code>maxAxisCount</code> (optional)</td>
+<td>(int)</td>
+<td>The max number of columns that this axis can contain. (unlimited if <code>undefined</code>)</td>
+</tr>
+<tr>
+<td><code>minAxisCount</code> (optional)</td>
+<td>(int)</td>
+<td>The min number of columns that this axis should contain to draw chart. (<code>1</code> in case of single dimension)</td>
+</tr>
+<tr>
+<td><code>description</code> (optional)</td>
+<td>(string)</td>
+<td>Description for the axis.</td>
+</tr>
+</tbody></table>
+
+<p><br/></p>
+
+<p>Here is an example.</p>
+<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">axis</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s1">'xAxis'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'multiple'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'key'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="s1">'yAxis'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'multiple'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'aggregator'</span><span class="p">},</span>
+ <span class="s1">'category'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">dimension</span><span class="o">:</span> <span class="s1">'multiple'</span><span class="p">,</span> <span class="nx">axisType</span><span class="o">:</span> <span class="s1">'group'</span><span class="p">,</span> <span class="nx">maxAxisCount</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="p">},</span>
+<span class="p">},</span>
+</code></pre></div>
+<p><br/></p>
+
+<h3>Spec: <code>sharedAxis</code></h3>
+
+<p>If you set <code>sharedAxis: false</code> for sub charts, then their axes are persisted in global space (shared). It's useful for when you creating multiple sub charts sharing their axes but have different parameters. For example, </p>
+
+<ul>
+<li><code>basic-column</code>, <code>stacked-column</code>, <code>percent-column</code></li>
+<li><code>pie</code> and <code>donut</code></li>
+</ul>
+
+<p><br/></p>
+
+<p>Here is an example.</p>
+<div class="highlight"><pre><code class="js language-js" data-lang="js"> <span class="kr">const</span> <span class="nx">spec</span> <span class="o">=</span> <span class="p">{</span>
+ <span class="nx">charts</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s1">'column'</span><span class="o">:</span> <span class="p">{</span>
+ <span class="nx">transform</span><span class="o">:</span> <span class="p">{</span> <span class="nx">method</span><span class="o">:</span> <span class="s1">'array'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="nx">sharedAxis</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+ <span class="nx">axis</span><span class="o">:</span> <span class="p">{</span> <span class="p">...</span> <span class="p">},</span>
+ <span class="nx">parameter</span><span class="o">:</span> <span class="p">{</span> <span class="p">...</span> <span class="p">},</span>
+ <span class="p">},</span>
+
+ <span class="s1">'stacked'</span><span class="o">:</span> <span class="p">{</span>
+ <span class="nx">transform</span><span class="o">:</span> <span class="p">{</span> <span class="nx">method</span><span class="o">:</span> <span class="s1">'array'</span><span class="p">,</span> <span class="p">},</span>
+ <span class="nx">sharedAxis</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+ <span class="nx">axis</span><span class="o">:</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
+ <span class="nx">parameter</span><span class="o">:</span> <span class="p">{</span> <span class="p">...</span> <span class="p">},</span>
+ <span class="p">},</span>
+</code></pre></div>
+<p><br/></p>
+
+<h3>Spec: <code>parameter</code></h3>
+
+<table><thead>
+<tr>
+<th>Field Name</th>
+<th>Available Values (type)</th>
+<th>Description</th>
+</tr>
+</thead><tbody>
+<tr>
+<td><code>valueType</code></td>
+<td><code>string</code></td>
+<td>Parameter which has string value</td>
+</tr>
+<tr>
+<td><code>valueType</code></td>
+<td><code>int</code></td>
+<td>Parameter which has int value</td>
+</tr>
+<tr>
+<td><code>valueType</code></td>
+<td><code>float</code></td>
+<td>Parameter which has float value</td>
+</tr>
+<tr>
+<td><code>valueType</code></td>
+<td><code>boolean</code></td>
+<td>Parameter which has boolean value used with <code>checkbox</code> widget usually</td>
+</tr>
+<tr>
+<td><code>valueType</code></td>
+<td><code>JSON</code></td>
+<td>Parameter which has JSON value used with <code>textarea</code> widget usually. <code>defaultValue</code> should be <code>""</code> (empty string). This</td>
+</tr>
+<tr>
+<td><code>description</code></td>
+<td>(string)</td>
+<td>Description of this parameter. This value will be parsed as HTML for pretty output</td>
+</tr>
+<tr>
+<td><code>widget</code></td>
+<td><code>input</code></td>
+<td>Use <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/input">input</a> widget. This is the default widget (if <code>widget</code> is undefined)</td>
+</tr>
+<tr>
+<td><code>widget</code></td>
+<td><code>checkbox</code></td>
+<td>Use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a> widget.</td>
+</tr>
+<tr>
+<td><code>widget</code></td>
+<td><code>textarea</code></td>
+<td>Use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">textarea</a> widget.</td>
+</tr>
+<tr>
+<td><code>widget</code></td>
+<td><code>option</code></td>
+<td>Use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select">select + option</a> widget. This parameter should have <code>optionValues</code> field as well.</td>
+</tr>
+<tr>
+<td><code>optionValues</code></td>
+<td>(Array<string>)</td>
+<td>Available option values used with the <code>option</code> widget</td>
+</tr>
+</tbody></table>
+
+<p><br/></p>
+
+<p>Here is an example.</p>
+<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">parameter</span><span class="o">:</span> <span class="p">{</span>
+ <span class="c1">// string type, input widget</span>
+ <span class="s1">'xAxisUnit'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'unit of xAxis'</span><span class="p">,</span> <span class="p">},</span>
+
+ <span class="c1">// boolean type, checkbox widget</span>
+ <span class="s1">'inverted'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">widget</span><span class="o">:</span> <span class="s1">'checkbox'</span><span class="p">,</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'boolean'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'invert x and y axes'</span><span class="p">,</span> <span class="p">},</span>
+
+ <span class="c1">// string type, option widget with `optionValues`</span>
+ <span class="s1">'graphType'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">widget</span><span class="o">:</span> <span class="s1">'option'</span><span class="p">,</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">'line'</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'graph type'</span><span class="p">,</span> <span class="nx">optionValues</span><span class="o">:</span> <span class="p">[</span> <span class="s1">'line'</span><span class="p">,</span> <span class="s1">'smoothedLine'</span><span class="p">,</span> <span class="s1">'step'</span><span class="p">,</span> <span class="p">],</span> <span class="p">},</span>
+
+ <span class="c1">// HTML in `description`</span>
+ <span class="s1">'dateFormat'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'format of date (<a href="https://docs.amcharts.com/3/javascriptcharts/AmGraph#dateFormat">doc</a>) (e.g YYYY-MM-DD)'</span><span class="p">,</span> <span class="p">},</span>
+
+ <span class="c1">// JSON type, textarea widget</span>
+ <span class="s1">'yAxisGuides'</span><span class="o">:</span> <span class="p">{</span> <span class="nx">widget</span><span class="o">:</span> <span class="s1">'textarea'</span><span class="p">,</span> <span class="nx">valueType</span><span class="o">:</span> <span class="s1">'JSON'</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span> <span class="nx">description</span><span class="o">:</span> <span class="s1">'guides of yAxis '</span><span class="p">,</span> <span class="p">},</span>
+</code></pre></div>
+<p><br/></p>
+
+<h3>Spec: <code>transform</code></h3>
+
+<table><thead>
+<tr>
+<th>Field Name</th>
+<th>Available Values (type)</th>
+<th>Description</th>
+</tr>
+</thead><tbody>
+<tr>
+<td><code>method</code></td>
+<td><code>object</code></td>
+<td>designed for rows requiring object manipulation</td>
+</tr>
+<tr>
+<td><code>method</code></td>
+<td><code>array</code></td>
+<td>designed for rows requiring array manipulation</td>
+</tr>
+<tr>
+<td><code>method</code></td>
+<td><code>array:2-key</code></td>
+<td>designed for xyz charts (e.g bubble chart)</td>
+</tr>
+<tr>
+<td><code>method</code></td>
+<td><code>drill-down</code></td>
+<td>designed for drill-down charts</td>
+</tr>
+<tr>
+<td><code>method</code></td>
+<td><code>raw</code></td>
+<td>will return the original <code>tableData.rows</code></td>
+</tr>
+</tbody></table>
+
+<p><br/></p>
+
+<p>Whatever you specified as <code>transform.method</code>, the <code>transformer</code> value will be always function for lazy computation. </p>
+<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// advanced-transformation.util#getTransformer</span>
+
+<span class="k">if</span> <span class="p">(</span><span class="nx">transformSpec</span><span class="p">.</span><span class="nx">method</span> <span class="o">===</span> <span class="s1">'raw'</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">transformer</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">rows</span><span class="p">;</span> <span class="p">}</span>
+<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">transformSpec</span><span class="p">.</span><span class="nx">method</span> <span class="o">===</span> <span class="s1">'array'</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">transformer</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
+ <span class="p">...</span>
+ <span class="k">return</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
+ <span class="p">}</span>
+<span class="p">}</span>
+</code></pre></div>
+<p>Here is actual usage.</p>
+<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kr">class</span> <span class="nx">AwesomeVisualization</span> <span class="kr">extends</span> <span class="nx">Visualization</span> <span class="p">{</span>
+ <span class="nx">constructor</span><span class="p">(...)</span> <span class="p">{</span> <span class="cm">/** setup your spec */</span> <span class="p">}</span>
+
+ <span class="p">...</span>
+
+ <span class="c1">// `render` will be called whenever `axis` or `parameter` are changed</span>
+ <span class="nx">render</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">const</span> <span class="p">{</span> <span class="nx">chart</span><span class="p">,</span> <span class="nx">parameter</span><span class="p">,</span> <span class="nx">column</span><span class="p">,</span> <span class="nx">transformer</span><span class="p">,</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">data</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="nx">chart</span> <span class="o">===</span> <span class="s1">'line'</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">const</span> <span class="nx">transformed</span> <span class="o">=</span> <span class="nx">transformer</span><span class="p">()</span>
+ <span class="c1">// draw line chart </span>
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">chart</span> <span class="o">===</span> <span class="s1">'no-group'</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kr">const</span> <span class="nx">transformed</span> <span class="o">=</span> <span class="nx">transformer</span><span class="p">()</span>
+ <span class="c1">// draw no-group chart </span>
+ <span class="p">}</span>
+ <span class="p">}</span>
+
+ <span class="p">...</span>
+<span class="p">}</span>
+</code></pre></div>
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2020 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+
+
+ <script type="text/javascript">
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+ ga('require', 'linkid', 'linkid.js');
+ ga('send', 'pageview');
+
+</script>
+
+
+
+ </body>
+</html>
+
Propchange: zeppelin/site/docs/0.9.0/development/helium/writing_visualization_transformation.html
------------------------------------------------------------------------------
svn:executable = *