7 commits

Author	SHA1	Message	Date
Jun Kim	be20201236	[DOC] Improve documents related to Helium ... ### What is this PR for? What I did for the documents: * Highlight codes * Follow JSON syntax * Remove white spaces And in my opinion, [here](https://zeppelin.apache.org/docs/0.8.0-SNAPSHOT/development/writingzeppelinvisualization.html#1-create-a-npm-package) is ambiguous: > "Normally, you can add any dependencies in package.json however Zeppelin Visualization package only allows two dependencies: zeppelin-vis and zeppelin-tabledata." Does it want to say "you can add any dependencies in package.json, but you must include two dependencies: zeppelin-vis and zeppelin-tabledata."? ### What type of PR is it? [Documentation] ### Questions: * Does the licenses files need update? NO * Is there breaking changes for older versions? NO * Does this needs documentation? NO Author: Jun Kim <i2r.jun@gmail.com> Closes #2236 from tae-jun/helium-doc and squashes the following commits: 63505e9 [Jun Kim] Fix ambiguous sentence 3e775cf [Jun Kim] Highlight codes, follow JSON syntax, and remove white spaces	2017-04-17 15:57:31 +09:00
1ambda	45cc8a9e8a	[ZEPPELIN-2217] AdvancedTransformation for Visualization ... ### What is this PR for? `AdvancedTransformation` has more detailed options while providing existing features of `PivotTransformation` and `ColumnselectorTransformation` which Zeppelin already has  Here are some features which advanced-transformation can provide. 1. **(screenshot)** multiple sub charts 2. **(screenshot)** parameter widgets: `input`, `checkbox`, `option`, `textarea` 3. **(screenshot)** expand/fold axis and parameter panels 4. **(screenshot)** clear axis and parameter panels 5. **(screenshot)** remove duplicated columns in an axis 6. **(screenshot)** limit column count in an axis 7. configurable char axes: `valueType`, `axisType`, `description`, ... 8. configurable chart parameters 9. lazy transformation 10. parsing parameters automatically based on their type: `int`, `float`, `string`, `JSON` 11. multiple transformation methods 12. re-initialize whole configuration based on spec hash. 13. **(screenshot)** shared axis #### API Details: Spec `AdvancedTransformation` requires `spec` which includes axis and parameter details for charts. - Let's create 2 sub-charts called `simple-line` and `step-line`. - Each sub chart can have different `axis` and `parameter` depending on their requirements. ```js constructor(targetEl, config) { super(targetEl, config) const spec = { charts: { 'simple-line': { sharedAxis: true, /** set if you want to share axes between sub charts, default is `false` */ axis: { 'xAxis': { dimension: 'multiple', axisType: 'key', }, 'yAxis': { dimension: 'multiple', axisType: 'aggregator'}, 'category': { dimension: 'multiple', axisType: 'group', }, }, parameter: { 'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', }, 'yAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of yAxis', }, 'dashLength': { valueType: 'int', defaultValue: 0, description: 'the length of dash', }, }, }, 'step-line': { axis: { 'xAxis': { dimension: 'single', axisType: 'unique', }, 'yAxis': { dimension: 'multiple', axisType: 'value', }, }, parameter: { 'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', }, 'yAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of yAxis', }, 'noStepRisers': { valueType: 'boolean', defaultValue: false, description: 'no risers in step line', widget: 'checkbox', }, }, }, } this.transformation = new AdvancedTransformation(config, spec) } ``` #### API Details: Axis Spec | Field Name | Available Values (type) | Description | | --- | --- | --- | |`dimension` | `single` | Axis can contains only 1 column | |`dimension` | `multiple` | Axis can contains multiple columns | |`axisType` | `key` | Column(s) in this axis will be used as `key` like in `PivotTransformation`. These columns will be served in `column.key` | |`axisType` | `aggregator` | Column(s) in this axis will be used as `value` like in `PivotTransformation`. These columns will be served in `column.aggregator` | |`axisType` | `group` | Column(s) in this axis will be used as `group` like in `PivotTransformation`. These columns will be served in `column.group` | |`axisType` | (string) | Any string value can be used here. These columns will be served in `column.custom` | |`maxAxisCount` | (int) | The maximum column count that this axis can contains. (unlimited if `undefined`) | |`valueType` | (string) | Describe the value type just for annotation | Here is an example. ```js axis: { 'xAxis': { dimension: 'multiple', axisType: 'key', }, 'yAxis': { dimension: 'multiple', axisType: 'aggregator'}, 'category': { dimension: 'multiple', axisType: 'group', maxAxisCount: 2, valueType: 'string', }, }, ``` #### API Details: Parameter Spec | Field Name | Available Values (type) | Description | | --- | --- | --- | |`valueType` | `string` | Parameter which has string value | |`valueType` | `int` | Parameter which has int value | |`valueType` | `float` | Parameter which has float value | |`valueType` | `boolean` | Parameter which has boolean value used with `checkbox` widget usually | |`valueType` | `JSON` | Parameter which has JSON value used with `textarea` widget usually. `defaultValue` should be `""` (empty string). This ||`defaultValue` | (any) | Default value of this parameter. `JSON` type should have `""` (empty string) | |`description` | (string) | Description of this parameter. This value will be parsed as HTML for pretty output | |`widget` | `input` | Use [input](https://developer.mozilla.org/en/docs/Web/HTML/Element/input) widget. This is the default widget (if `widget` is undefined)| |`widget` | `checkbox` | Use [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) widget. | |`widget` | `textarea` | Use [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) widget. | |`widget` | `option` | Use [select + option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) widget. This parameter should have `optionValues` field as well. | |`optionValues` | (Array<string>) | Available option values used with the `option` widget | Here is an example. ```js parameter: { // string type, input widget 'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', }, // boolean type, checkbox widget 'inverted': { widget: 'checkbox', valueType: 'boolean', defaultValue: false, description: 'invert x and y axes', }, // string type, option widget with `optionValues` 'graphType': { widget: 'option', valueType: 'string', defaultValue: 'line', description: 'graph type', optionValues: [ 'line', 'smoothedLine', 'step', ], }, // HTML in `description` 'dateFormat': { valueType: 'string', defaultValue: '', description: 'format of date (<a href="https://docs.amcharts.com/3/javascriptcharts/AmGraph#dateFormat">doc</a>) (e.g YYYY-MM-DD)', }, // JSON type, textarea widget 'yAxisGuides': { widget: 'textarea', valueType: 'JSON', defaultValue: '', description: 'guides of yAxis ', }, ``` #### API Details: Transformer Spec `AdvancedTransformation` supports 3 transformation methods. The return value will depend on the transformation method type. ```js const spec = { charts: { 'simple': { /** default value of `transform.method` is the flatten cube. */ axis: { ... }, parameter: { ... } }, 'cube-group': { transform: { method: 'cube', }, axis: { ... }, parameter: { ... }, } 'no-group': { transform: { method: 'raw', }, axis: { ... }, parameter: { ... }, } ``` | Field Name | Available Values (type) | Description | | --- | --- | --- | |`method` | `object` | designed for [amcharts: serial](https://www.amcharts.com/demos/date-based-data/) | |`method` | `array` | designed for [highcharts: column](http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-basic/) | |`method` | `drill-down` | designed for [highcharts: drill-down](http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-drilldown/) | |`method` | `raw` | will return the original `tableData.rows` | Whatever you specified as `transform.method`, the `transformer` value will be always function for lazy computation. ```js // advanced-transformation.util#getTransformer if (transformSpec.method === 'raw') { transformer = () => { return rows; } } else if (transformSpec.method === 'array') { transformer = () => { ... return { ... } } } ``` #### Feature Details: Automatic parameter parsing Advanced transformation will parse parameter values automatically based on their type: `int`, `float`, `string`, `JSON` - See also `advanced-transformation-util.js#parseParameter` #### Feature Details: re-initialize the whole configuration based on spec hash ```js // advanced-transformation-util#initializeConfig const currentVersion = JSON.stringify(spec) if (!config.spec || !config.spec.version || config.spec.version !== currentVersion) { spec.version = currentVersion // reset config... } ``` #### Feature Details: Shared Axes If you set `sharedAxis` to `true` in chart specification, then these charts will share their axes. (default is `false`) ```js const spec = { charts: { 'column': { transform: { method: 'array', }, sharedAxis: true, axis: { ... }, parameter: { ... }, }, 'stacked': { transform: { method: 'array', }, sharedAxis: true, axis: { ... } parameter: { ... }, }, ```  #### API Details: Usage in Visualization#render() Let's assume that we want to create 2 sub-charts called `basic` and `no-group`. - https://github.com/1ambda/zeppelin-ultimate-line-chart (an practical example) ```js drawBasicChart(parameter, column, transformer) { const { ... } = transformer() } drawNoGroupChart(parameter, column, transformer) { const { ... } = transformer() } render(data) { const { chart, parameter, column, transformer, } = data if (chart === 'basic') { this.drawBasicChart(parameter, column, transformer) } else if (chart === 'no-group') { this.drawNoGroupChart(parameter, column, transformer) } } ``` ### What type of PR is it? [Feature] ### Todos NONE ### What is the Jira issue? [ZEPPELIN-2217](https://issues.apache.org/jira/browse/ZEPPELIN-2217) ### How should this be tested? 1. Clone https://github.com/1ambda/zeppelin-ultimate-line-chart 2. Create a symbolic link `ultimate-line-chart.json` into `$ZEPPELIN_HOME/helium` 3. Modify the `artifact` value to proper absolute path considering your local machine. 4. Install the above visualization in `localhost:9000/#helium` 5. Test it ### Screenshots (if appropriate) #### 1. *(screenshot)* multiple sub charts  #### 2. *(screenshot)* parameter widgets: `input`, `checkbox`, `option`, `textarea`  #### 3. *(screenshot)* expand/fold axis and parameter panels  #### 4. *(screenshot)* clear axis and parameter panels  #### 5. *(screenshot)* remove duplicated columns in an axis  #### 6. *(screenshot)* limit column count in an axis  ### Questions: * Does the licenses files need update? - NO * Is there breaking changes for older versions? - NO * Does this needs documentation? - NO Author: 1ambda <1amb4a@gmail.com> Closes #2098 from 1ambda/ZEPPELIN-2217/advanced-transformation and squashes the following commits: 6cde7c9 [1ambda] fix reset params when spec change c75a3f2 [1ambda] fix: Reset persisted axis 6a2130a [1ambda] fix: clear config only when axis changed 5464e84 [1ambda] fix: Optimize array 2 key method 9beb1e7 [1ambda] fix: Type error 2408225 [1ambda] test: Add test for array 2key bf56761 [1ambda] feat: Add array:2-key transform method 7c6768f [1ambda] feat: Use axisSpec.desc as tooltip f98d4c9 [1ambda] fix: Remove invalid key prop 5cf2ece [1ambda] feat: Add minAxisCount 4887800 [1ambda] fix: Remove local module yarn caches 3e29572 [1ambda] refactor: copyModule func c91a033 [1ambda] fix: Set yarn cache dir in helium-bundles 04b5140 [1ambda] fix: Import a-tr 0a876cf [1ambda] docs: Update index.md 380b1af [1ambda] docs: Fix typo and add desc for existing trs 908214b [1ambda] docs: Move experimental tags a009627 [1ambda] feat: Allow dup aggr axis 3b44e92 [1ambda] fix: Remove unuse const ab6c22e [1ambda] test: Add test for drill-down method 756107a [1ambda] test: Add array transformation method d819c73 [1ambda] test: Add object method bf00fba [1ambda] test: Add MockTableData 39fe5ae [1ambda] test: Add test for getColumnsFromAxis 4c393b4 [1ambda] fix: Add polyfill for es6 funcs in test e92c787 [1ambda] test: Add test for rmDup, aplMaxAxisCount 843f45d [1ambda] test: Add test for getCurrent* funcs ae5277c [1ambda] test: Add test for initializeConfig c14a9dc7 [1ambda] test: Add tests for widget, params c510af1 [1ambda] docs: Add doc for Transformation 52db37b [1ambda] feat: Show panel menus only when opened 17ad4a4 [1ambda] feat: Support chartChanged, parameterChanged c0d33d3 [1ambda] fix: Sort selectors in drilldown method cfd6fef [1ambda] feat: sharedAxis 9af80ce [1ambda] style: Indent 79b5654 [1ambda] fix: return the same info in transform 7bee464 [1ambda] fix: Keynames ee8788e [1ambda] feat: Support drill-down 666025a [1ambda] fix: DON'T reset current chart ae1891f [1ambda] add array:key transform 4167a2e [1ambda] fix: Sort keyNames 912b5b7 [1ambda] fix: Persist initialized config f1f6b0c [1ambda] feat: Support ARRAY transform.method 812f9a2 [1ambda] fix: Set proper aggr value when 0 group 20f9437 [1ambda] fix: getCube func 25d51a9 [1ambda] DON'T display aggr.name when aggrColumns.length == 1 f37e13d [1ambda] fix: Add 'object' transform.method da2370c [1ambda] fix: Add resetAxis, Param funcs 2370682 [1ambda] fix: average is not caculated correctly dd08e38 [1ambda] fix: Set param panel height to 400 881695a [1ambda] feat: clear chart, param separately 4d0d62b [1ambda] fix: DON'T clean panel config 92676d1 [1ambda] fix: limit parameter panel height to 370 cc29060 [1ambda] feat: parse param description as HTML 9a2d227 [1ambda] fix: Stop event propagation in widgets fcc625c [1ambda] feat: Automatic param parsing b4d774c [1ambda] fix: Dont close param panel when enter 088705b [1ambda] refactor: Remove util and add Widget funcs bf88b4f [1ambda] feat: textare widget and update hook 4e73012 [1ambda] feat: widget checkbox 11b7eaa [1ambda] feat: option widget 5d3efc9 [1ambda] fix: Change panel header b1d9d31 [1ambda] feat: Save and close with enter key 53f508c [1ambda] feat: custom axisSpec 0dbc431 [1ambda] feat: Support transformer 94d837a [1ambda] feat: Automatic spec versioning 74b8b4e [1ambda] fix: Duplicated radio btn id, name 5b88f08 [1ambda] fix: Modify margin of subchart radio btns 019892c [1ambda] feat: Support transform: flatten 0484e1e [1ambda] feat: Support maxAxisCount in axisSpec 936901b [1ambda] feat: Support undefined valueType in axisSpec 7a454ff [1ambda] feat: Cube Transformation f0ed02f [1ambda] feat: Support same axis types 49985c6 [1ambda] refactor: Refine axis, param spec d89e223 [1ambda] feat: advanced-transformation-api 75569ce [1ambda] feat: Support multiple charts in UI e1fcc2e [1ambda] feat: Support multiple charts 97be629 [1ambda] fix: Add singleDimensionAggregatorChanged 676bd7e [1ambda] refactor: Refine transform API 9fb398e [1ambda] feat: Add clearConfig a8a4fb1 [1ambda] refactor: Add getAxisInSingleDimension func 9768ecf [1ambda] feat: Add groupBase axis option 91ae54d [1ambda] fix: Overflow issue in single aggr 10c80fc [1ambda] feat: AdvancedTransformation	2017-04-15 07:34:27 +09:00
1ambda	90e8b80b56	[ZEPPELIN-2070][DOCS] Create Docs for Spell ... ### What is this PR for? Docs for Spell which was added by #1940 ### What type of PR is it? [Documentation] ### Todos * [x] - Add docs for spell * [x] - Fix typo in vis docs ### What is the Jira issue? [ZEPPELIN-2070](https://issues.apache.org/jira/browse/ZEPPELIN-2070) ### How should this be tested? - `cd docs` - `/usr/local/bin/bundle exec jekyll serve --watch` - Open `http://localhost:4000/development/writingzeppelinspell.html` ### Screenshots (if appropriate)   ### Questions: * Does the licenses files need update? - NO * Is there breaking changes for older versions? - NO * Does this needs documentation? - YES Author: 1ambda <1amb4a@gmail.com> Closes #1998 from 1ambda/ZEPPELIN-2070/docs-for-spell and squashes the following commits: dbb8082 [1ambda] fix: Typo af63ff6 [1ambda] fix: Enhance spell doc 9fd2a3b [1ambda] fix: Typo 0851ad1 [1ambda] fix: Typo in spell doc 00d5158 [1ambda] fix: Indent c7dc9bd [1ambda] fix: Typo in writing in viz bcc9b3e [1ambda] docs: Add docs for spell 83ee050 [1ambda] docs: Add spell doc to nav 04deb81 [1ambda] fix: Invalid desc in vis docs	2017-02-16 10:25:55 +09:00
Lee moon soo	940a8b7d36	[ZEPPELIN-2004] List all helium packages in Zeppelin GUI ... ### What is this PR for? ZEPPELIN-1973 will provides catalogue for all available helium (visualization) packages in npm registry. And https://github.com/apache/zeppelin/pull/1935 shows available packages in Zeppelin website. This PR make Zeppelin reads package information and display in Zeppelin's helium gui menu. To do that, this PR changes configuration environment variable (java property) from ``` ZEPPELIN_HELIUM_LOCALREGISTRY_DEFAULT (zeppelin.helium.localregistry.default) ``` to ``` ZEPPELIN_HELIUM_REGISTRY (zeppelin.helium.registry) ``` and allow multiple comma separated items. Registry is either filesystem directory (e.g. `/helium`) or http location. default value is `helium,https://s3.amazonaws.com/helium-package/helium.json` ### What type of PR is it? Feature ### Todos * [x] - Task ### What is the Jira issue? https://issues.apache.org/jira/browse/ZEPPELIN-2004 ### How should this be tested? Go to helium menu and check if you can see packages available. ### Screenshots (if appropriate)  ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? yes `ZEPPELIN_HELIUM_LOCALREGISTRY_DEFAULT` changed to `ZEPPELIN_HELIUM_REGISTRY` * Does this needs documentation? no Author: Lee moon soo <moon@apache.org> Closes #1936 from Leemoonsoo/ZEPPELIN-2004 and squashes the following commits: 80bbebd [Lee moon soo] update doc 53f0caa [Lee moon soo] update test 65c6092 [Lee moon soo] Cache online registry under local-repo for offline support b2985e9 [Lee moon soo] Add user agent f562b12 [Lee moon soo] Use only local helium registry to run test 9fabeae [Lee moon soo] implement online registry	2017-01-29 07:45:28 +09:00
AhyoungRyu	425abe3023	[Hot Fix] Fix deadlink in writingzeppelinvisualization.md ... ### What is this PR for? It should point [HeliumVisualizationFactory.java](https://github.com/apache/zeppelin/blob/master/zeppelin-zengine/src/main/java/org/apache/zeppelin/helium/HeliumVisualizationFactory.java) not [HeliumVisualizationPackage.java](https://github.com/apache/zeppelin/blob/master/zeppelin-zengine/src/main/java/org/apache/zeppelin/helium/HeliumVisualizationPackage.java) ### What type of PR is it? Documentation | HotFix ### What is the Jira issue? N/A ### How should this be tested? click `HeliumVisualizationFactory` link in [this section](https://zeppelin.apache.org/docs/0.7.0-SNAPSHOT/development/writingzeppelinvisualization.html#3-create-and-load-visualization-bundle-on-the-fly) :) ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: AhyoungRyu <fbdkdud93@hanmail.net> Closes #1904 from AhyoungRyu/fix/deadlink and squashes the following commits: 60ac6c9 [AhyoungRyu] Fix deadlink in writingzeppelinvisualization.md	2017-01-17 14:50:46 +09:00
AhyoungRyu	f86bb858b8	[HOTFIX][ZEPPELIN-1970] Use relative path for broken screenshot imgs ... ### What is this PR for? Two screenshot imgs in [Writing a new visualization](https://zeppelin.apache.org/docs/0.7.0-SNAPSHOT/development/writingzeppelinvisualization.html) page are broken after deployed. It can be fixed by using relative path like other images. (e.g. [shiroauthentication.md](https://github.com/apache/zeppelin/blob/master/docs/security/shiroauthentication.md#4-login)) ### What type of PR is it? Hot Fix ### What is the Jira issue? [ZEPPELIN-1970](https://issues.apache.org/jira/browse/ZEPPELIN-1970) ### How should this be tested? It can't be reproduced using docs dev mode. Needs to be tested with below steps. ``` 1) build gh-pages (website) branch JEKYLL_ENV=production bundle exec jekyll build cp -r _site/ /tmp/zeppelin_website/ mkdir -p /tmp/zeppelin_website/docs/0.7.0-SNAPSHOT 2) build this patch (docs) and copy it under docs/0.7.0-SNAPSHOT of website cd docs bundle exec jekyll build --safe cp -r _site/ /tmp/zeppelin_website/0.7.0-SNAPSHOT/ 3) start httpserver and browse http://localhost:8000/docs/0.7.0-SNAPSHOT/ cd /tmp/zeppelin_website python -m SimpleHTTPServer ``` ### Screenshots (if appropriate) - before <img width="809" alt="screen shot 2017-01-15 at 3 10 53 pm" src="https://cloud.githubusercontent.com/assets/10060731/21960655/a73ee658-db35-11e6-8e4d-7702adb1ab19.png"> - after <img width="751" alt="screen shot 2017-01-15 at 3 10 13 pm" src="https://cloud.githubusercontent.com/assets/10060731/21960650/a23348a2-db35-11e6-80a4-a6bc9b9b188c.png"> ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: AhyoungRyu <fbdkdud93@hanmail.net> Closes #1901 from AhyoungRyu/ZEPPELIN-1970 and squashes the following commits: d64e13f [AhyoungRyu] Use relative path for screenshot imgs	2017-01-15 23:30:42 +09:00
Lee moon soo	300f753234	[ZEPPELIN-1619] Load js package as a plugin visualization ... ### What is this PR for? Current helium plugin application api (experimental) requires create library in java class, and need to create both backend / frontend code in the package. Which is good if your plugin requires both frontend and backend code running. However, when user just want to make new visualization which completely runs on front-end side in javascript, creating helium application in java project and taking care of backend code can be bit of overhead and barrier for javascript developers. This PR adds capability to load pure javascript package as a visualization. ### how it works 1. create (copy, download) 'helium package json' file into `ZEPPELIN_HOME/helium` directory. The json file point visualization js package in npm repository or local file system in `artifact` field. `type` field in the json file need to be `VISUALIZATION` Here's an example (zeppelin-examples/zeppelin-example-horizontalbar/zeppelin-example-horizontalbar.json) ``` { "type" : "VISUALIZATION", "name" : "zeppelin_horizontalbar", "description" : "Horizontal Bar chart (example)", "artifact" : "./zeppelin-examples/zeppelin-example-horizontalbar", "icon" : "<i class='fa fa-bar-chart rotate90flipX'></i>" } ``` 2. Go to helium GUI menu. (e.g. http://localhost:8080/#/helium). The menu will list all available packages. <img width="796" alt="writing_visualization_helium_menu" src="https://cloud.githubusercontent.com/assets/1540981/21749660/0f401c10-d558-11e6-9961-b6d0a9c023d8.png"> 3. click 'enable' in any package want to use. Once a visualization package is enabled, `HeliumVisualizationFactory` will collect all enabled visualizations and create js bundle on the fly. 4. js bundle will be loaded on notebook and additional visualization becomes available  ### Programming API to create new plugin visualization. Simply extends [visualization.js](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js) and overrides some methods, such as ``` /** * get transformation */ getTransformation() { // override this }; /** * Method will be invoked when data or configuration changed */ render(tableData) { // override this }; /** * Refresh visualization. */ refresh() { // override this }; /** * method will be invoked when visualization need to be destroyed. * Don't need to destroy this.targetEl. */ destroy() { // override this }; /** * return { * template : angular template string or url (url should end with .html), * scope : an object to bind to template scope * } */ getSetting() { // override this }; ``` This is exactly the same api that built-in visualization uses. an example implementation included `zeppelin-examples/zeppelin-example-horizontalbar/horizontalbar.js`. Actually [all built-in visualizations](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization/builtins) are example ### Packaging and publishing visualization Each visualization will need `package.json` file (e.g. `zeppelin-examples/zeppelin-example-horizontalbar/package.json`) to be packaged. Package can be published in npm repository or package can be deployed to the local filesystem. `zeppelin-examples/zeppelin-example-horizontalbar/` is an example package that is deployed in the local filesystem ### Development mode First, locally install and enable your development package by setting `artifact` field to the development directory. Then run zeppelin-web in visualization development mode with following command ``` cd zeppelin-web npm run visdev ``` When you have change in your local development package, just reload your notebook. Then Zeppelin will automatically rebuild / reload the package. Any feedback would be appreciated! ### What type of PR is it? Feature ### Todos * [x] - Load plugin visualization js package on runtime * [x] - Make the feature works in zeppelin Binary package * [x] - Show loading indicator while 'enable' / 'disable' package * [x] - Add document * [x] - Add license of new dependency * [x] - Development mode * [x] - Propagate error to front-end * [x] - Display multiple versions of a package. ### What is the Jira issue? https://issues.apache.org/jira/browse/ZEPPELIN-1619 ### How should this be tested? Build Zeppelin with `-Pexamples` flag. That'll install example visualization package `horizontalbar`. You'll able to select `horizontalbar` along with other built-in visualizations  To test npm online package install capability, Place [zeppelin-bubble.json](https://github.com/Leemoonsoo/zeppelin-bubble/blob/master/zeppelin-bubble.json) in hour local registry (`ZEPPELIN_HOME/helium`) and enable it in Helium gui menu. And then zeppelin will download package from npm repository and load.  ### Questions: * Does the licenses files need update? yes * Is there breaking changes for older versions? no * Does this needs documentation? yes Author: Lee moon soo <moon@apache.org> Closes #1842 from Leemoonsoo/ZEPPELIN-1619-rebased and squashes the following commits: 7c49bbb [Lee moon soo] Let Zeppelin continue to bootstrap on offline 816bdec [Lee moon soo] Display license of package when enabling 28fb37d [Lee moon soo] beautifulize helium menu 295768e [Lee moon soo] fix drag and drop visualization reorder bb304db [Lee moon soo] Sort version in decreasing order e7f18f1 [Lee moon soo] fix english in docs and labels c7b187f [Lee moon soo] Merge branch 'master' into ZEPPELIN-1619-rebased 4c87983 [Lee moon soo] Merge remote-tracking branch 'apache-github/master' into ZEPPELIN-1619-rebased ecd925b [Lee moon soo] Merge remote-tracking branch 'apache-github/master' into ZEPPELIN-1619-rebased a92cadd [Lee moon soo] Use minifiable syntax cec534c [Lee moon soo] Reduce log message f373f1d [Lee moon soo] Ignore removed package e18d9a4 [Lee moon soo] Ability to customize order of visualization package display cd74396 [Lee moon soo] Add rest api doc 9de5d6d [Lee moon soo] exclude .npmignore and package.json from zeppelin-web rat check 08abded [Lee moon soo] exclude package.json from rat check 661c26b [Lee moon soo] update screenshot and keep experimental tag only in docs 4515805 [Lee moon soo] Display multiple versions of a package 408c512 [Lee moon soo] Make unittest test bundling with proper vis package on npm registry fb7a147 [Lee moon soo] display svg icon 47de6d9 [Lee moon soo] Propagate bundle error to the front-end 0fe5e00 [Lee moon soo] visualization development mode 022e8f6 [Lee moon soo] exclude zeppelin-examples/zeppelin-example-horizontalbar/package.json file from rat check 2ef3b69 [Lee moon soo] Add new dependency license f943d33 [Lee moon soo] Add doc f494dbd [Lee moon soo] package npm dependency module in binary package b655fa6 [Lee moon soo] use any version of dependency in example. so zeppelin version bumpup doesn't need to take care of them 2aec52d [Lee moon soo] show loading indicator while enable/disable package 6c380f6 [Lee moon soo] refactor code to fix HeliumTest e142336 [Lee moon soo] update unittest 7d5e0ae [Lee moon soo] Resolve dependency conflict c50a524 [Lee moon soo] Add conf/helium.json in .gitignore 1c7b73a [Lee moon soo] add result.css d2823ad [Lee moon soo] load visualization and tabledata module from source instead npm if accessible 4e1b061 [Lee moon soo] Convert horizontalbar to VISUALIZATION example a5a935b [Lee moon soo] connect visualization factory with restapi 4b21252 [Lee moon soo] initial implementation of helium menu 0c4da2e [Lee moon soo] pass bundled visualization to result.controller.js f5ce99e [Lee moon soo] import helium service js 1663582 [Lee moon soo] initial implementation of helium menu 74d52d4 [Lee moon soo] bundle visualization package from npm repository on the fly	2017-01-14 10:27:17 -08:00