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 <sora0...@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 <sora0...@zepl.com> Authored: Tue Mar 14 14:07:44 2017 +0900 Committer: Lee moon soo <m...@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;
