You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2017/05/16 14:43:03 UTC
zeppelin git commit: [ZEPPELIN-2430] The xAxis text in the line and
area chart overlaps
Repository: zeppelin
Updated Branches:
refs/heads/master 07a5b15d1 -> fcd3aa75c
[ZEPPELIN-2430] The xAxis text in the line and area chart overlaps
### What is this PR for?
Like in the #2133 case, the xAxis text of area chart and line chart is overlapping.
For reusing form, I created a html template file for how to show xLabel and, in `rotate` button checked, show up `input` box for set value of rotate degree (default value is -45).
### What type of PR is it?
[Bug Fix | Improvement]
### What is the Jira issue?
* [ZEPPELIN-2430 - The xlabel text in the line and area graph overlaps](https://issues.apache.org/jira/browse/ZEPPELIN-2430)
### How should this be tested?
1. Click `settings` button in the barChart
2. Check to whether there are `default`, `rotate`, `hide` button or not.
3. Test to click each button and whether it works well or not for each situation.
4. In rotate button checked, check to set value and showing xAixs rotate degree properly.
5. In the areaChart and lineChart, test with above steps.
### Screenshots (if appropriate)
[Before]
[After]
### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Author: soralee <so...@zepl.com>
Closes #2339 from soralee/ZEPPELIN-2430_overlap_line_area and squashes the following commits:
fe0b30b [soralee] remove annotation
e8e2e39 [soralee] removed ng-include about single template url
5383c93 [soralee] create template and apply area and line chart
14cfbdf [soralee] fix area chart
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/fcd3aa75
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/fcd3aa75
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/fcd3aa75
Branch: refs/heads/master
Commit: fcd3aa75cd411aceb235bea23f8d2968976db6a7
Parents: 07a5b15
Author: soralee <so...@zepl.com>
Authored: Mon May 15 19:03:34 2017 +0900
Committer: Lee moon soo <mo...@apache.org>
Committed: Tue May 16 07:42:59 2017 -0700
----------------------------------------------------------------------
.../paragraph/result/result.controller.js | 1 +
.../app/notebook/paragraph/result/result.css | 19 ++++-
.../builtins/visualization-areachart.js | 78 ++++++++++++++++++++
.../builtins/visualization-barchart.js | 53 ++++++-------
.../builtins/visualization-displayXAxis.html | 52 +++++++++++++
.../builtins/visualization-linechart.js | 61 ++++++++++++++-
6 files changed, 227 insertions(+), 37 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/fcd3aa75/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
index 0ed5753..4c9ad84 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -528,6 +528,7 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
builtInViz.instance._emitter = emitter
builtInViz.instance._compile = $compile
builtInViz.instance._createNewScope = createNewScope
+ builtInViz.instance._templateRequest = $templateRequest
const transformation = builtInViz.instance.getTransformation()
transformation._emitter = emitter
transformation._templateRequest = $templateRequest
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/fcd3aa75/zeppelin-web/src/app/notebook/paragraph/result/result.css
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.css b/zeppelin-web/src/app/notebook/paragraph/result/result.css
index 97eab53..3e864ef 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.css
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.css
@@ -13,10 +13,10 @@
*/
.result-chart-selector {
- margin-bottom: 10px;
- position: relative;
- display: inline-block;
- vertical-align: middle;
+ margin-bottom: 10px;
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
}
.result-chart-selector button {
@@ -46,3 +46,14 @@
border: 1px solid transparent;
border-radius: 4px;
}
+
+
+.input-rotate {
+ width: 30px;
+ height: 20px;
+ line-height: 10px;
+ font-family: 'Roboto', sans-serif;
+ font-size: 12px !important;
+ font-weight: 400;
+ text-align: center;
+}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/fcd3aa75/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js b/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
index 900f0f4..494f8ae 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
@@ -23,6 +23,12 @@ export default class AreachartVisualization extends Nvd3ChartVisualization {
super(targetEl, config)
this.pivot = new PivotTransformation(config)
+
+ try {
+ this.config.rotate = {degree: config.rotate.degree}
+ } catch (e) {
+ this.config.rotate = {degree: '-45'}
+ }
}
type () {
@@ -46,6 +52,7 @@ export default class AreachartVisualization extends Nvd3ChartVisualization {
this.xLabels = d3Data.xLabels
super.render(d3Data)
+ this.config.changeXLabel(this.config.xLabelStatus)
}
/**
@@ -58,11 +65,61 @@ export default class AreachartVisualization extends Nvd3ChartVisualization {
configureChart (chart) {
let self = this
+ let configObj = self.config
+
chart.xAxis.tickFormat(function (d) { return self.xAxisTickFormat(d, self.xLabels) })
chart.yAxis.tickFormat(function (d) { return self.yAxisTickFormat(d) })
chart.yAxis.axisLabelDistance(50)
chart.useInteractiveGuideline(true) // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691)
+ self.config.changeXLabel = function(type) {
+ switch (type) {
+ case 'default':
+ self.chart._options['showXAxis'] = true
+ self.chart._options['margin'] = {bottom: 50}
+ self.chart.xAxis.rotateLabels(0)
+ configObj.xLabelStatus = 'default'
+ break
+ case 'rotate':
+ self.chart._options['showXAxis'] = true
+ self.chart._options['margin'] = {bottom: 140}
+ self.chart.xAxis.rotateLabels(configObj.rotate.degree)
+ configObj.xLabelStatus = 'rotate'
+ break
+ case 'hide':
+ self.chart._options['showXAxis'] = false
+ self.chart._options['margin'] = {bottom: 50}
+ d3.select('#' + self.targetEl[0].id + '> svg').select('g.nv-axis.nv-x').selectAll('*').remove()
+ configObj.xLabelStatus = 'hide'
+ break
+ }
+ self.emitConfig(configObj)
+ }
+
+ self.config.isXLabelStatus = function(type) {
+ if (configObj.xLabelStatus === type) {
+ return true
+ } else {
+ return false
+ }
+ }
+
+ self.config.setDegree = function(type) {
+ configObj.rotate.degree = type
+ self.chart.xAxis.rotateLabels(type)
+ self.emitConfig(configObj)
+ }
+
+ self.config.isDegreeEmpty = function() {
+ if (configObj.rotate.degree.length > 0) {
+ return true
+ } else {
+ configObj.rotate.degree = '-45'
+ self.emitConfig(configObj)
+ return false
+ }
+ }
+
this.chart.style(this.config.style || 'stack')
this.chart.dispatch.on('stateChange', function (s) {
@@ -74,4 +131,25 @@ export default class AreachartVisualization extends Nvd3ChartVisualization {
}, 500)
})
}
+ getSetting(chart) {
+ let self = this
+ let configObj = self.config
+
+ // default to visualize xLabel
+ if (typeof (configObj.xLabelStatus) === 'undefined') {
+ configObj.changeXLabel('default')
+ }
+
+ if (typeof (configObj.rotate.degree) === 'undefined' || configObj.rotate.degree === '') {
+ configObj.rotate.degree = '-45'
+ self.emitConfig(configObj)
+ }
+
+ return {
+ template: 'app/visualization/builtins/visualization-displayXAxis.html',
+ scope: {
+ config: configObj
+ }
+ }
+ }
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/fcd3aa75/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js b/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
index 258fcce..2653af2 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
@@ -23,6 +23,12 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
super(targetEl, config)
this.pivot = new PivotTransformation(config)
+
+ try {
+ this.config.rotate = {degree: config.rotate.degree}
+ } catch (e) {
+ this.config.rotate = {degree: '-45'}
+ }
}
type () {
@@ -76,7 +82,7 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
case 'rotate':
self.chart._options['showXAxis'] = true
self.chart._options['margin'] = {bottom: 140}
- self.chart.xAxis.rotateLabels(-45)
+ self.chart.xAxis.rotateLabels(configObj.rotate.degree)
configObj.xLabelStatus = 'rotate'
break
case 'hide':
@@ -86,6 +92,7 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
configObj.xLabelStatus = 'hide'
break
}
+ self.emitConfig(configObj)
}
self.config.isXLabelStatus = function(type) {
@@ -96,6 +103,12 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
}
}
+ self.config.setDegree = function(type) {
+ configObj.rotate.degree = type
+ self.chart.xAxis.rotateLabels(type)
+ self.emitConfig(configObj)
+ }
+
this.chart.dispatch.on('stateChange', function(s) {
configObj.stacked = s.stacked
@@ -115,39 +128,15 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
configObj.changeXLabel('default')
}
+ if (typeof (configObj.rotate.degree) === 'undefined' || configObj.rotate.degree === '') {
+ configObj.rotate.degree = '-45'
+ self.emitConfig(configObj)
+ }
+
return {
- template: `<div>
- xAxis :
- </div>
-
- <div class='btn-group'>
- <button type="button"
- class="xLabel btn btn-default btn-sm"
- ng-class="{'active' : this.config.isXLabelStatus('default')}"
- ng-click="save('default')" >
- Default
- </button>
-
- <button type="button"
- class="btn btn-default btn-sm"
- ng-class="{'active' : this.config.isXLabelStatus('rotate')}"
- ng-click="save('rotate')" >
- Rotate
- </button>
-
- <button type="button"
- class="btn btn-default btn-sm"
- ng-class="{'active' : this.config.isXLabelStatus('hide')}"
- ng-click="save('hide')" >
- Hide
- </button>
- </div>`,
+ template: 'app/visualization/builtins/visualization-displayXAxis.html',
scope: {
- config: configObj,
- save: function(type) {
- configObj.changeXLabel(type)
- self.emitConfig(configObj)
- }
+ config: configObj
}
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/fcd3aa75/zeppelin-web/src/app/visualization/builtins/visualization-displayXAxis.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-displayXAxis.html b/zeppelin-web/src/app/visualization/builtins/visualization-displayXAxis.html
new file mode 100644
index 0000000..5a022a0
--- /dev/null
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-displayXAxis.html
@@ -0,0 +1,52 @@
+<!--
+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.
+-->
+
+<div>
+ xAxis :
+</div>
+
+<div class='btn-group'>
+ <button type="button"
+ class="btn btn-default btn-sm"
+ ng-class="{'active' : config.isXLabelStatus('default')}"
+ ng-click="config.changeXLabel('default')" >
+ Default
+ </button>
+
+ <button type="button"
+ class="btn btn-default btn-sm"
+ ng-class="{'active' : config.isXLabelStatus('rotate')}"
+ ng-click="config.changeXLabel('rotate')" >
+ Rotate
+ </button>
+
+ <button type="button"
+ class="btn btn-default btn-sm"
+ ng-class="{'active' : config.isXLabelStatus('hide')}"
+ ng-click="config.changeXLabel('hide')" >
+ Hide
+ </button>
+
+
+ <span style="line-height: 2.5;"
+ ng-show="config.isXLabelStatus('rotate')">
+ degree :
+ <input type="text" class="input-rotate"
+ placeholder="-45"
+ ng-model="config.rotate.degree"
+ ng-enter="config.setDegree(config.rotate.degree)"
+ ng-blur="config.setDegree(config.rotate.degree)"
+ ng-pattern="/^-?[0-9]{1,3}$/" />
+ </span>
+</div>
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/fcd3aa75/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
index 31da47b..959efc8 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
@@ -23,6 +23,12 @@ export default class LinechartVisualization extends Nvd3ChartVisualization {
super(targetEl, config)
this.pivot = new PivotTransformation(config)
+
+ try {
+ this.config.rotate = {degree: config.rotate.degree}
+ } catch (e) {
+ this.config.rotate = {degree: '-45'}
+ }
}
type () {
@@ -50,6 +56,7 @@ export default class LinechartVisualization extends Nvd3ChartVisualization {
this.xLabels = d3Data.xLabels
super.render(d3Data)
+ this.config.changeXLabel(this.config.xLabelStatus)
}
/**
@@ -68,6 +75,8 @@ export default class LinechartVisualization extends Nvd3ChartVisualization {
configureChart (chart) {
let self = this
+ let configObj = self.config
+
chart.xAxis.tickFormat(function (d) { return self.xAxisTickFormat(d, self.xLabels) })
chart.yAxis.tickFormat(function (d) {
if (d === undefined) {
@@ -84,12 +93,60 @@ export default class LinechartVisualization extends Nvd3ChartVisualization {
} else {
chart.forceY([])
}
+
+ self.config.changeXLabel = function(type) {
+ switch (type) {
+ case 'default':
+ self.chart._options['showXAxis'] = true
+ self.chart._options['margin'] = {bottom: 50}
+ self.chart.xAxis.rotateLabels(0)
+ configObj.xLabelStatus = 'default'
+ break
+ case 'rotate':
+ self.chart._options['showXAxis'] = true
+ self.chart._options['margin'] = {bottom: 140}
+ self.chart.xAxis.rotateLabels(configObj.rotate.degree)
+ configObj.xLabelStatus = 'rotate'
+ break
+ case 'hide':
+ self.chart._options['showXAxis'] = false
+ self.chart._options['margin'] = {bottom: 50}
+ d3.select('#' + self.targetEl[0].id + '> svg').select('g.nv-axis.nv-x').selectAll('*').remove()
+ configObj.xLabelStatus = 'hide'
+ break
+ }
+ self.emitConfig(configObj)
+ }
+
+ self.config.isXLabelStatus = function(type) {
+ if (configObj.xLabelStatus === type) {
+ return true
+ } else {
+ return false
+ }
+ }
+
+ self.config.setDegree = function(type) {
+ configObj.rotate.degree = type
+ self.chart.xAxis.rotateLabels(type)
+ self.emitConfig(configObj)
+ }
}
getSetting (chart) {
let self = this
let configObj = self.config
+ // default to visualize xLabel
+ if (typeof (configObj.xLabelStatus) === 'undefined') {
+ configObj.changeXLabel('default')
+ }
+
+ if (typeof (configObj.rotate.degree) === 'undefined' || configObj.rotate.degree === '') {
+ configObj.rotate.degree = '-45'
+ self.emitConfig(configObj)
+ }
+
return {
template: `<div>
<label>
@@ -106,7 +163,9 @@ export default class LinechartVisualization extends Nvd3ChartVisualization {
ng-click="save()" />
zoom
</label>
- </div>`,
+ </div>
+ <ng-include src="'app/visualization/builtins/visualization-displayXAxis.html'">
+ </ng-include>`,
scope: {
config: configObj,
save: function () {