You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by co...@apache.org on 2016/08/27 07:26:06 UTC
zeppelin git commit: [ZEPPELIN-1178] Tooltip: Show chart type when
hovering over chart icon
Repository: zeppelin
Updated Branches:
refs/heads/master 32f35e2a7 -> b7f918a7b
[ZEPPELIN-1178] Tooltip: Show chart type when hovering over chart icon
### What is this PR for?
A usability improvement: Added tooltips for the chart icons in Zeppelin paragraphs, showing the chart types when hovering over the chart icons.
### What type of PR is it?
Improvement
### Todos
NA
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-1178
### How should this be tested?
1. Deploy Zeppelin and navigate to zeppelin tutorial
2. Run a paragraph and hover over the chart icon buttons to see the tooltip getting displayed.
### Screenshots (if appropriate)
### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Author: vensant <ve...@imaginea.com>
Closes #1362 from vensant/ZEPPELIN-1178 and squashes the following commits:
38fcda8 [vensant] changed the tooltip names as per the review comment from the community
8a85449 [vensant] Added tooltips for the chart icons in Zeppelin paragraphs, showing the chart types when hovering over the chart icons
Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/b7f918a7
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/b7f918a7
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/b7f918a7
Branch: refs/heads/master
Commit: b7f918a7b81602f192c7cdd4b558f9167013b691
Parents: 32f35e2
Author: vensant <ve...@imaginea.com>
Authored: Fri Aug 26 15:09:20 2016 +0530
Committer: Damien CORNEAU <co...@gmail.com>
Committed: Sat Aug 27 16:25:53 2016 +0900
----------------------------------------------------------------------
.../paragraph/paragraph-chart-selector.html | 21 +++++++++++++-------
1 file changed, 14 insertions(+), 7 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/b7f918a7/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index e2e4e35..eab741b 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -20,37 +20,44 @@ limitations under the License.
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
ng-class="{'active': isGraphMode('table')}"
- ng-click="setGraphMode('table', true)" ><i class="fa fa-table"></i>
+ ng-click="setGraphMode('table', true)"
+ tooltip="Table" tooltip-placement="bottom"><i class="fa fa-table"></i>
</button>
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
ng-class="{'active': isGraphMode('multiBarChart')}"
- ng-click="setGraphMode('multiBarChart', true)"><i class="fa fa-bar-chart"></i>
+ ng-click="setGraphMode('multiBarChart', true)"
+ tooltip="Bar Chart" tooltip-placement="bottom"><i class="fa fa-bar-chart"></i>
</button>
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
ng-class="{'active': isGraphMode('pieChart')}"
- ng-click="setGraphMode('pieChart', true)"><i class="fa fa-pie-chart"></i>
+ ng-click="setGraphMode('pieChart', true)"
+ tooltip="Pie Chart" tooltip-placement="bottom"><i class="fa fa-pie-chart"></i>
</button>
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
ng-class="{'active': isGraphMode('stackedAreaChart')}"
- ng-click="setGraphMode('stackedAreaChart', true)"><i class="fa fa-area-chart"></i>
+ ng-click="setGraphMode('stackedAreaChart', true)"
+ tooltip="Area Chart" tooltip-placement="bottom"><i class="fa fa-area-chart"></i>
</button>
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
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>
+ ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)"
+ tooltip="Line Chart" tooltip-placement="bottom"><i class="fa fa-line-chart"></i>
</button>
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
ng-class="{'active': isGraphMode('scatterChart')}"
- ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
+ ng-click="setGraphMode('scatterChart', true)"
+ tooltip="Scatter Chart" tooltip-placement="bottom"><i class="cf cf-scatter-chart"></i>
</button>
<button type="button" class="btn btn-default btn-sm"
ng-if="paragraph.result.type == 'TABLE'"
ng-class="{'active': isGraphMode('map')}"
- ng-click="setGraphMode('map', true)"><i class="fa fa-map-marker"></i>
+ ng-click="setGraphMode('map', true)"
+ tooltip="Map" tooltip-placement="bottom"><i class="fa fa-map-marker"></i>
</button>
<button type="button"