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/04/19 02:23:42 UTC
zeppelin git commit: [ZEPPELIN-1357, 1892,
1370][Umbrella] Text overlap in the MultiBarChart
Repository: zeppelin
Updated Branches:
refs/heads/master c706d453e -> 4d6485737
[ZEPPELIN-1357,1892,1370][Umbrella] Text overlap in the MultiBarChart
### What is this PR for?
If using the `multiChartBar`, it often occurs overlap in text. So, this PR is for preventing to overlap in text.
>~~The below is the case what I updated.~~
~~1. The xLabel generally show all of the text without rotation (less than 30).~~
~~2. If the xLabel size is over than 30 and less than 80, the xLabel text are rotated as 90 degree and displayed.~~
~~3. If the xLabel size is over than 80, the xLabel text are disappeared, but the tooltip is displayed.~~
>~~I have made improvements based on my thinking, so I would appreciate to give me your feedback.~~
~~And if merged this PR, I'll update the feature so that user can use `min` and `max` variables by user on web.~~
**[Update]**
To prevent overlap in xLabel text, in one way which is talked the below mentions, user who is using zeppelin could select to visualization type of xLabel such as `rotate 45 degree` or `hide`.
### What type of PR is it?
[Bug Fix | Improvement ]
### What is the Jira issue?
* [ZEPPELIN-1357; UI - label wrapping not done properly in charts](https://issues.apache.org/jira/browse/ZEPPELIN-1357)
* [ZEPPELIN-1892; Display label vertically or horizontally smartly](https://issues.apache.org/jira/browse/ZEPPELIN-1892)
* [ZEPPELIN-1370; Label overlaps - in default visualization example barchart](https://issues.apache.org/jira/browse/ZEPPELIN-1370)
### How should this be tested?
1. Run the paragraph for bank data in the `Basic Features (Spark)` notebook.
2. Execute the following query.
```
%sql
select * from bank
```
3. Use the pivot in the `Setting` toggle in the `MultiBarChart` such as the screenshots.
### 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 #2133 from soralee/ZEPPELIN-1357_overlap_text and squashes the following commits:
32d7e37 [soralee] rebase master
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/4d648573
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/4d648573
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/4d648573
Branch: refs/heads/master
Commit: 4d6485737cf72bc156c65c419b8e6e6cc907f3ea
Parents: c706d45
Author: soralee <so...@zepl.com>
Authored: Tue Mar 14 14:07:44 2017 +0900
Committer: Lee moon soo <mo...@apache.org>
Committed: Tue Apr 18 19:23:36 2017 -0700
----------------------------------------------------------------------
.../builtins/visualization-barchart.js | 89 +++++++++++++++++++-
.../builtins/visualization-nvd3chart.js | 2 +-
2 files changed, 86 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4d648573/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 ffc0c22..15f0337 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
@@ -45,6 +45,7 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
true);
super.render(d3Data);
+ this.config.changeXLabel(this.config.xLabelStatus);
};
/**
@@ -57,19 +58,99 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
configureChart(chart) {
var self = this;
+ var configObj = self.config;
+
chart.yAxis.axisLabelDistance(50);
chart.yAxis.tickFormat(function(d) {return self.yAxisTickFormat(d);});
- this.chart.stacked(this.config.stacked);
+ self.chart.stacked(this.config.stacked);
+
+ 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(-45);
+ 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.config.isXLabelStatus = function(type) {
+ if (configObj.xLabelStatus === type) {
+ return true;
+ } else {
+ return false;
+ }
+ };
- var self = this;
this.chart.dispatch.on('stateChange', function(s) {
- self.config.stacked = s.stacked;
+ configObj.stacked = s.stacked;
// give some time to animation finish
setTimeout(function() {
- self.emitConfig(self.config);
+ self.emitConfig(configObj);
}, 500);
});
};
+
+
+
+ getSetting(chart) {
+ var self = this;
+ var configObj = self.config;
+
+ // default to visualize xLabel
+ if (typeof(configObj.xLabelStatus) === 'undefined') {
+ configObj.changeXLabel('default');
+ }
+
+ 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>`,
+ scope: {
+ config: configObj,
+ save: function(type) {
+ configObj.changeXLabel(type);
+ self.emitConfig(configObj);
+ }
+ }
+ };
+ };
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4d648573/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js b/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
index b0f569e..930e435 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
@@ -44,7 +44,7 @@ export default class Nvd3ChartVisualization extends Visualization {
var height = this.targetEl.height();
// turn off animation when dataset is too large. (for performance issue)
- // still, since dataset is large, the chart content sequentially appears like animated.
+ // still, since dataset is large, the chart content sequentially appears like animated
try {
if (d3g[0].values.length > numberOfDataThreshold) {
animationDuration = 0;