Convert horizontalbar to VISUALIZATION example

This commit is contained in:
Lee moon soo 2017-01-01 20:53:38 -08:00
parent a5a935bb2a
commit 4e1b061a44
6 changed files with 93 additions and 157 deletions

View file

@ -0,0 +1,77 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You 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.
*/
import Nvd3ChartVisualization from 'zeppelin-vis/builtins/visualization-nvd3chart';
import PivotTransformation from 'zeppelin-tabledata/pivot';
/**
* Base class for visualization
*/
export default class horizontalbar extends Nvd3ChartVisualization {
constructor(targetEl, config) {
super(targetEl, config)
this.pivot = new PivotTransformation(config);
}
type() {
return 'multiBarHorizontalChart';
};
render(pivot) {
var d3Data = this.d3DataFromPivot(
pivot.schema,
pivot.rows,
pivot.keys,
pivot.groups,
pivot.values,
true,
false,
true);
super.render(d3Data);
}
getTransformation() {
return this.pivot;
}
/**
* Set new config
*/
setConfig(config) {
super.setConfig(config);
this.pivot.setConfig(config);
};
configureChart(chart) {
var self = this;
chart.yAxis.axisLabelDistance(50);
chart.yAxis.tickFormat(function(d) {return self.yAxisTickFormat(d);});
this.chart.stacked(this.config.stacked);
var self = this;
this.chart.dispatch.on('stateChange', function(s) {
self.config.stacked = s.stacked;
// give some time to animation finish
setTimeout(function() {
self.emitConfig(self.config);
}, 500);
});
};
}

View file

@ -0,0 +1,12 @@
{
"name": "zeppelin_horizontalbar",
"description" : "Horizontal Bar chart (example)",
"version": "1.0.0",
"main": "horizontalbar",
"author": "",
"license": "Apache-2.0",
"dependencies": {
"zeppelin-tabledata": "0.7.0-SNAPSHOT",
"zeppelin-vis": "0.7.0-SNAPSHOT"
}
}

View file

@ -1,85 +0,0 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You 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.
*/
package org.apache.zeppelin.example.app.horizontalbar;
import org.apache.commons.io.IOUtils;
import org.apache.zeppelin.helium.Application;
import org.apache.zeppelin.helium.ApplicationContext;
import org.apache.zeppelin.helium.ApplicationException;
import org.apache.zeppelin.interpreter.InterpreterResult;
import org.apache.zeppelin.interpreter.dev.ZeppelinApplicationDevServer;
import org.apache.zeppelin.resource.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
/**
* Basic example application.
* TableData for input
*/
public class HorizontalBar extends Application {
private final Logger logger = LoggerFactory.getLogger(HorizontalBar.class);
InterpreterResult result;
public HorizontalBar(ApplicationContext context) {
super(context);
}
@Override
public void run(ResourceSet resources) throws ApplicationException, IOException {
// Get data from resource args
result = (InterpreterResult) resources.get(0).get();
// create element
println(String.format(
"<div id=\"horizontalbar_%s\" style=\"height:400px\"><svg></svg></div>",
context().getApplicationInstanceId()));
// write js
printResourceAsJavascript("example/app/horizontalbar/horizontalbar.js");
}
@Override
public void unload() throws ApplicationException {
}
/**
* Development mode
*/
public static void main(String[] args) throws Exception {
LocalResourcePool pool = new LocalResourcePool("dev");
InputStream ins = ClassLoader.getSystemResourceAsStream(
"example/app/horizontalbar/horizontalbar_mockdata.txt");
InterpreterResult result = new InterpreterResult(
InterpreterResult.Code.SUCCESS,
InterpreterResult.Type.TABLE,
IOUtils.toString(ins));
pool.put(WellKnownResourceName.ZeppelinTableResult.name(), result);
ZeppelinApplicationDevServer devServer = new ZeppelinApplicationDevServer(
HorizontalBar.class.getName(),
pool.getAll());
devServer.start();
devServer.join();
}
}

View file

@ -1,56 +0,0 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You 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.
*/
var data = [];
_.forEach($z.result.columnNames, function(col, series) {
if (series == 0) return;
var values = _.map($z.result.rows, function(row) {
return {
label: row[0],
value : parseFloat(row[series])
}
});
data.push({
key : col.name,
values : values
})
});
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 20, bottom: 50, left: 175})
.showValues(true) //Show bar value next to each bar.
.tooltips(true) //Show tooltips on hover.
.showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode.
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#horizontalbar_' + $z.id + ' svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});

View file

@ -1,10 +0,0 @@
Label Series1 Series2
GroupA -1.8746444827653 25.307646510375
GroupB -8.0961543492239 16.756779544553
GroupC -0.57072943117674 18.451534877007
GroupD -2.4174010336624 8.6142352811805
GroupE -0.72009071426284 7.8082472075876
GroupF -0.77154485523777 5.259101026956
GroupG -0.90152097798131 0.30947953487127
GroupH -0.91445417330854 0
GroupI -0.055746319141851 0

View file

@ -15,11 +15,9 @@
* limitations under the License.
*/
{
"type" : "APPLICATION",
"name" : "zeppelin.horizontalbar",
"type" : "VISUALIZATION",
"name" : "zeppelin_horizontalbar",
"description" : "Horizontal Bar chart (example)",
"artifact" : "zeppelin-examples/zeppelin-example-horizontalbar/target/zeppelin-example-horizontalbar-0.7.0-SNAPSHOT.jar",
"className" : "org.apache.zeppelin.example.app.horizontalbar.HorizontalBar",
"resources" : [[":org.apache.zeppelin.interpreter.InterpreterResult"]],
"icon" : '<i class="fa fa-bar-chart" style="-webkit-transform: rotate(90deg) scaleX(-1);-moz-transform: rotate(90deg) scaleX(-1);-ms-transform: rotate(90deg) scaleX(-1);"></i>'
"artifact" : "./zeppelin-examples/zeppelin-example-horizontalbar",
"icon" : "<i class='fa fa-bar-chart rotate90flipX'></i>"
}