Repository: incubator-zeppelin Updated Branches: refs/heads/master 82ea80dc6 -> 81e823eb1
Line chart with focus This pull request included https://github.com/apache/incubator-zeppelin/pull/310 Author: Kirill A. Korinsky <[email protected]> Closes #312 from catap/lineChartWithFocus and squashes the following commits: 8a0d6b6 [Kirill A. Korinsky] Show the options only for lineChart 83e204a [Kirill A. Korinsky] Implemented support of lineWithFocusChart af6ac9f [Kirill A. Korinsky] Make forceY([0]) optional for line chart and stacked area chart Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/81e823eb Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/81e823eb Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/81e823eb Branch: refs/heads/master Commit: 81e823eb141cb0766c604f18c3bbfdb0bb8746d3 Parents: 82ea80d Author: Kirill A. Korinsky <[email protected]> Authored: Wed Sep 23 13:15:55 2015 +0400 Committer: Damien Corneau <[email protected]> Committed: Mon Oct 5 14:03:23 2015 +0900 ---------------------------------------------------------------------- .../notebook/paragraph/paragraph.controller.js | 29 ++++++++++++++++++-- .../src/app/notebook/paragraph/paragraph.html | 26 ++++++++++++++++-- 2 files changed, 50 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/81e823eb/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 08eb657..aa53beb 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -397,6 +397,23 @@ angular.module('zeppelinWebApp') commitParagraph($scope.paragraph.title, $scope.paragraph.text, newConfig, newParams); }; + $scope.toggleLineWithFocus = function () { + var mode = $scope.getGraphMode(); + + if (mode === 'lineWithFocusChart') { + $scope.setGraphMode('lineChart', true); + return true; + } + + if (mode === 'lineChart') { + $scope.setGraphMode('lineWithFocusChart', true); + return true; + } + + return false; + }; + + $scope.loadForm = function(formulaire, params) { var value = formulaire.defaultValue; @@ -914,7 +931,7 @@ angular.module('zeppelinWebApp') } else if (type === 'multiBarChart') { d3g = pivotDataToD3ChartFormat(p, true, false, type).d3g; $scope.chart[type].yAxis.axisLabelDistance(50); - } else if (type === 'lineChart' || type === 'stackedAreaChart') { + } else if (type === 'lineChart' || type === 'stackedAreaChart' || type === 'lineWithFocusChart') { var pivotdata = pivotDataToD3ChartFormat(p, false, true); xLabels = pivotdata.xLabels; d3g = pivotdata.d3g; @@ -926,8 +943,14 @@ angular.module('zeppelinWebApp') } }); $scope.chart[type].yAxis.axisLabelDistance(50); - $scope.chart[type].useInteractiveGuideline(true); // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691) - $scope.chart[type].forceY([0]); // force y-axis minimum to 0 for line chart. + if ($scope.chart[type].useInteractiveGuideline) { // lineWithFocusChart hasn't got useInteractiveGuideline + $scope.chart[type].useInteractiveGuideline(true); // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691) + } + if($scope.paragraph.config.graph.forceY) { + $scope.chart[type].forceY([0]); // force y-axis minimum to 0 for line chart. + } else { + $scope.chart[type].forceY([]); + } } } http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/81e823eb/zeppelin-web/src/app/notebook/paragraph/paragraph.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html index 0ad03a6..2bf1066 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html @@ -122,8 +122,8 @@ limitations under the License. ng-click="setGraphMode('stackedAreaChart', true)"><i class="fa fa-area-chart"></i> </button> <button type="button" class="btn btn-default btn-sm" - ng-class="{'active': isGraphMode('lineChart')}" - ng-click="setGraphMode('lineChart', true)"><i class="fa fa-line-chart"></i> + ng-class="{'active': isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')}" + ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)"><i class="fa fa-line-chart"></i> </button> <button type="button" class="btn btn-default btn-sm" ng-class="{'active': isGraphMode('scatterChart')}" @@ -145,6 +145,23 @@ limitations under the License. <div class="option lightBold" style="overflow: visible;" ng-if="getResultType()=='TABLE' && getGraphMode()!='table' && paragraph.config.graph.optionOpen && !asIframe && !viewOnly"> + <div ng-if="isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')"> + <label> + <input type="checkbox" + ng-model="paragraph.config.graph.forceY" + ng-click="onGraphOptionChange()"> + force Y to 0 + </label> + <br/> + + <label> + <input type="checkbox" + ng-model="paragraph.config.graph.lineWithFocus" + ng-click="toggleLineWithFocus()"> + show line chart with focus + </label> + </div> + All fields: <div class="allFields row"> <ul class="noDot"> @@ -329,6 +346,11 @@ limitations under the License. <svg></svg> </div> + <div ng-if="getGraphMode()=='lineWithFocusChart'" + id="p{{paragraph.id}}_lineWithFocusChart"> + <svg></svg> + </div> + <div ng-if="getGraphMode()=='scatterChart'" id="p{{paragraph.id}}_scatterChart"> <svg></svg>
