mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
Convert horizontalbar to VISUALIZATION example
This commit is contained in:
parent
a5a935bb2a
commit
4e1b061a44
6 changed files with 93 additions and 157 deletions
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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>"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue