You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by ah...@apache.org on 2017/05/15 19:43:46 UTC
zeppelin git commit: [ZEPPELIN-2426] Improve graph setting DOMs
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 <1a...@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 <1a...@gmail.com>
Authored: Thu May 11 06:32:58 2017 +0900
Committer: ahyoungryu <ah...@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 -->