Repository: zeppelin Updated Branches: refs/heads/master 56cee76a7 -> 2afa9cbd5
[ZEPPELIN-2426] Improve graph setting DOMs ### What is this PR for? Improve graph setting DOMs. Refer the attached screenshots. ### What type of PR is it? [Improvement] ### Todos * [x] - columnselector setting * [x] - pivot setting ### What is the Jira issue? [ZEPPELIN-2426](https://issues.apache.org/jira/browse/ZEPPELIN-2426) ### How should this be tested? 1. Display a table. 2. Click charts including scatter chart. (written with columnselector transformation) ### Screenshots (if appropriate) #### Before: Pivot  #### After: Pivot  #### Before: Columnselector  #### After: Columnselector  ### Questions: * Does the licenses files need update? - NO * Is there breaking changes for older versions? - NO * Does this needs documentation? - NO Author: 1ambda <1am...@gmail.com> Closes #2340 from 1ambda/ZEPPELIN-2426/improve-graph-setting-dom and squashes the following commits: 70fbdd6 [1ambda] feat: Prettify pivot setting d0d23c2 [1ambda] feat: Prettify columnselector setting 2e4260f [1ambda] fix: Remove invalid ng-if Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/2afa9cbd Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/2afa9cbd Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/2afa9cbd Branch: refs/heads/master Commit: 2afa9cbd53382f1b841993b6c859ec62399b7a22 Parents: 56cee76 Author: 1ambda <1am...@gmail.com> Authored: Thu May 11 06:32:58 2017 +0900 Committer: ahyoungryu <ahyoung...@apache.org> Committed: Mon May 15 15:43:39 2017 -0400 ---------------------------------------------------------------------- .../app/tabledata/columnselector_settings.html | 92 ++++++---- .../src/app/tabledata/pivot_settings.html | 168 +++++++++++-------- 2 files changed, 153 insertions(+), 107 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/2afa9cbd/zeppelin-web/src/app/tabledata/columnselector_settings.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/tabledata/columnselector_settings.html b/zeppelin-web/src/app/tabledata/columnselector_settings.html index 538cc3a..9098f46 100644 --- a/zeppelin-web/src/app/tabledata/columnselector_settings.html +++ b/zeppelin-web/src/app/tabledata/columnselector_settings.html @@ -11,41 +11,61 @@ 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. --> -All fields: -<div class="allFields row"> - <ul class="noDot"> - <li class="liVertical" ng-repeat="col in tableDataColumns"> - <div class="btn btn-default btn-xs" - data-drag="true" - data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" - ng-model="tableDataColumns" - jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}"> - {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}} - </div> - </li> - </ul> -</div> -<div class="row"> - <div class="col-md-3" - ng-repeat="prop in props"> - <span class="columns lightBold"> - {{prop.name}} - <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top" - ng-if="prop.tooltip" - popover-trigger="focus" - popover-html-unsafe="{{prop.tooltip}}"></a> - <ul data-drop="true" - ng-model="config[prop.name]" - jqyoui-droppable="{onDrop:'save()'}" - class="list-unstyled" - style="height:36px"> - <li ng-if="config[prop.name]"> - <div class="btn btn-primary btn-xs"> - {{config[prop.name].name}} <span class="fa fa-close" ng-click="remove(prop.name)"></span> - </div> - </li> - </ul> - </span> +<div class="panel panel-default" style="margin-top: 10px; margin-bottom: 11px;"> + <div class="panel-heading" + style="padding: 6px 12px 6px 12px; font-size: 13px;"> + <span style="vertical-align: middle; display: inline-block; margin-top: 3px;">Available Fields</span> + <div style="clear: both;"></div> + <!-- to fix previous span which has float: right --> </div> -</div> + <!-- panel-body: columns --> + <div class="panel-body" + style="padding: 8px; margin-top: 3px;"> + <ul class="noDot"> + <li class="liVertical" ng-repeat="col in tableDataColumns"> + <div class="btn btn-default btn-xs" + style="background-color: #EFEFEF;" + data-drag="true" + data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" + ng-model="tableDataColumns" + jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}"> + {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}} + </div> + </li> + </ul> + </div> + + <!-- panel-body: axis --> + <hr style="margin: 1px;" /> + <div class="panel-body" + style="margin-top: 7px; padding-top: 9px; padding-bottom: 4px;"> + <div class="col-sm-3" + ng-repeat="prop in props"> + <span class="columns lightBold"> + <span class="label label-default" + style="font-weight: 300; font-size: 13px; margin-left: 1px;" + ng-style="prop.name === 'xAxis' ? { 'background-color': '#906ebd' } : prop.name === 'yAxis' ? { 'background-color': '#cd5c5c' } : prop.name === 'group' ? { 'background-color': '#5782bd' } : ''"> + {{prop.name}} + <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top" + ng-if="prop.tooltip" + style="color: white;" + popover-trigger="focus" + popover-html-unsafe="{{prop.tooltip}}"></a> + </span> + <ul data-drop="true" + ng-model="config[prop.name]" + jqyoui-droppable="{onDrop:'save()'}" + class="list-unstyled" + style="height:36px; border-radius: 6px; margin-top: 7px; overflow: visible !important;"> + <li ng-if="config[prop.name]"> + <div class="btn btn-default btn-xs" + style="background-color: #EFEFEF;"> + {{config[prop.name].name}} <span class="fa fa-close" ng-click="remove(prop.name)"></span> + </div> + </li> + </ul> + </span> + </div> + </div> <!-- panel-body --> +</div> <!-- panel --> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/2afa9cbd/zeppelin-web/src/app/tabledata/pivot_settings.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/tabledata/pivot_settings.html b/zeppelin-web/src/app/tabledata/pivot_settings.html index 5ca2224..44e1f44 100644 --- a/zeppelin-web/src/app/tabledata/pivot_settings.html +++ b/zeppelin-web/src/app/tabledata/pivot_settings.html @@ -11,78 +11,104 @@ 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. --> -All fields: -<div class="allFields row"> - <ul class="noDot"> - <li class="liVertical" ng-repeat="col in tableDataColumns"> - <div class="btn btn-default btn-xs" - data-drag="true" - data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" - ng-model="tableDataColumns" - jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}"> - {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}} - </div> - </li> - </ul> -</div> -<div class="row" ng-if="graphMode!='scatterChart'"> - <div class="col-md-4"> - <span class="columns lightBold"> - Keys - <ul data-drop="true" - ng-model="config.keys" - jqyoui-droppable="{multiple:true, onDrop:'save()'}" - class="list-unstyled"> - <li ng-repeat="item in config.keys"> - <div class="btn btn-primary btn-xs"> - {{item.name}} <span class="fa fa-close" ng-click="removeKey($index)"></span> - </div> - </li> - </ul> - </span> +<div class="panel panel-default" style="margin-top: 10px; margin-bottom: 11px;"> + <div class="panel-heading" + style="padding: 6px 12px 6px 12px; font-size: 13px;"> + <span style="vertical-align: middle; display: inline-block; margin-top: 3px;">Available Fields</span> + <div style="clear: both;"></div> <!-- to fix previous span which has float: right --> </div> - <div class="col-md-4"> - <span class="columns lightBold"> - Groups - <ul data-drop="true" - ng-model="config.groups" - jqyoui-droppable="{multiple:true, onDrop:'save()'}" - class="list-unstyled"> - <li ng-repeat="item in config.groups"> - <div class="btn btn-success btn-xs"> - {{item.name}} <span class="fa fa-close" ng-click="removeGroup($index)"></span> - </div> - </li> - </ul> - </span> + + <!-- panel-body: columns --> + <div class="panel-body" + style="padding: 8px; margin-top: 3px;"> + <ul class="noDot"> + <li class="liVertical" ng-repeat="col in tableDataColumns"> + <div class="btn btn-default btn-xs" + style="background-color: #EFEFEF;" + data-drag="true" + data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" + ng-model="tableDataColumns" + jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}"> + {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}} + </div> + </li> + </ul> </div> - <div class="col-md-4"> - <span class="columns lightBold"> - Values - <ul data-drop="true" - ng-model="config.values" - jqyoui-droppable="{multiple:true, onDrop:'save()'}" - class="list-unstyled"> - <li ng-repeat="item in config.values"> - <div class="btn-group"> - <div class="btn btn-info btn-xs dropdown-toggle" - type="button" - data-toggle="dropdown"> - {{item.name | limitTo: 30}}{{item.name.length > 30 ? '...' : ''}} - <font style="color:#EEEEEE;"><span class="lightBold" style="text-transform: uppercase;">{{item.aggr}}</span></font> - <span class="fa fa-close" ng-click="removeValue($index)"></span> + + <!-- panel-body: axis --> + <hr style="margin: 1px;" /> + <div class="panel-body" + style="margin-top: 7px; padding-top: 9px; padding-bottom: 4px;"> + <!-- axis: keys --> + <div class="col-sm-4"> + <div class="columns lightBold"> + <span class="label label-default" + style="background-color: #906ebd; font-weight: 300; font-size: 13px; margin-left: 1px;">keys</span> + <ul ng-model="config.keys" + data-drop="true" jqyoui-droppable="{multiple:true, onDrop:'save()'}" + class="list-unstyled" + style="border-radius: 6px; margin-top: 7px; overflow: visible !important;"> + <li ng-repeat="item in config.keys"> + <div class="btn btn-default btn-xs" + style="background-color: #EFEFEF; margin: 2px 0px 0px 2px;"> + {{item.name}} + <span class="fa fa-close" ng-click="removeKey($index)"></span> </div> - <ul class="dropdown-menu" role="menu"> - <li ng-click="setValueAggr($index, 'sum')"><a>sum</a></li> - <li ng-click="setValueAggr($index, 'count')"><a>count</a></li> - <li ng-click="setValueAggr($index, 'avg')"><a>avg</a></li> - <li ng-click="setValueAggr($index, 'min')"><a>min</a></li> - <li ng-click="setValueAggr($index, 'max')"><a>max</a></li> - </ul> - </div> - </li> - </ul> - </span> - </div> -</div> + </li> + </ul> + </div> + </div> + <!-- axis: groups --> + <div class="col-sm-4"> + <div class="columns lightBold"> + <span class="label label-default" + style="background-color: #cd5c5c; font-weight: 300; font-size: 13px; margin-left: 1px;">groups</span> + <ul data-drop="true" + ng-model="config.groups" + jqyoui-droppable="{multiple:true, onDrop:'save()'}" + class="list-unstyled" + style="border-radius: 6px; margin-top: 7px; overflow: visible !important;"> + <li ng-repeat="item in config.groups"> + <div class="btn btn-default btn-xs" + style="background-color: #EFEFEF; margin: 2px 0px 0px 2px;"> + {{item.name}} + <span class="fa fa-close" ng-click="removeGroup($index)"></span> + </div> + </li> + </ul> + </div> + </div> + <!-- axis: values --> + <div class="col-sm-4"> + <div class="columns lightBold"> + <span class="label label-default" + style="background-color: #5782bd; font-weight: 300; font-size: 13px; margin-left: 1px;">values</span> + <ul data-drop="true" + ng-model="config.values" + jqyoui-droppable="{multiple:true, onDrop:'save()'}" + class="list-unstyled" + style="border-radius: 6px; margin-top: 7px; overflow: visible !important;"> + <li ng-repeat="item in config.values"> + <div class="btn-group"> + <div class="btn btn-default btn-xs dropdown-toggle" + style="background-color: #EFEFEF;" + type="button" data-toggle="dropdown"> + {{item.name | limitTo: 30}}{{item.name.length > 30 ? '...' : ''}} + <span class="lightBold" style="text-transform: uppercase; color:#717171;">{{item.aggr}}</span> + <span class="fa fa-close" ng-click="removeValue($index)"></span> + </div> + <ul class="dropdown-menu" role="menu"> + <li ng-click="setValueAggr($index, 'sum')"><a>sum</a></li> + <li ng-click="setValueAggr($index, 'count')"><a>count</a></li> + <li ng-click="setValueAggr($index, 'avg')"><a>avg</a></li> + <li ng-click="setValueAggr($index, 'min')"><a>min</a></li> + <li ng-click="setValueAggr($index, 'max')"><a>max</a></li> + </ul> + </div> + </li> + </ul> + </div> + </div> + </div> <!-- panel-body --> +</div> <!-- panel -->
