Skip to content

Commit

Permalink
refactor dashboard chart html, make several css improvements.
Browse files Browse the repository at this point in the history
  • Loading branch information
@williaster
williaster committed Mar 11, 2016
1 parent fb6a997 commit 49590e2
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 62 deletions.
27 changes: 14 additions & 13 deletions panoramix/assets/javascripts/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,13 @@ var Dashboard = function (dashboardData) {
},
refreshExcept: function (slice_id) {
var immune = this.metadata.filter_immune_slices;
this.slices.forEach(function (slice) {
if (slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) {
slice.render();
}
});
if (immune) {
this.slices.forEach(function (slice) {
if (slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) {
slice.render();
}
});
}
},
clearFilters: function (slice_id) {
delete this.filters[slice_id];
Expand Down Expand Up @@ -86,6 +88,7 @@ var Dashboard = function (dashboardData) {
initDashboardView: function () {
dashboard = this;
var gridster = $(".gridster ul").gridster({
autogrow_cols: true,
widget_margins: [10, 10],
widget_base_dimensions: [100, 100],
draggable: {
Expand All @@ -95,7 +98,9 @@ var Dashboard = function (dashboardData) {
enabled: true,
stop: function (e, ui, element) {
var slice_data = $(element).data('slice');
dashboard.getSlice(slice_data.slice_id).resize();
if (slice_data) {
dashboard.getSlice(slice_data.slice_id).resize();
}
}
},
serialize_params: function (_w, wgd) {
Expand Down Expand Up @@ -160,23 +165,19 @@ var Dashboard = function (dashboardData) {
$('#filters').click(function () {
alert(dashboard.readFilters());
});
$("a.closeslice").click(function () {
$("a.remove-chart").click(function () {
var li = $(this).parents("li");
gridster.remove_widget(li);
});

$(".slice_info").click(function () {
var widget = $(this).parents('.widget');
var slice_description = widget.find('.slice_description');
slice_description.slideToggle(500, function () {
widget.find('.refresh').click();
});
});
$("table.slice_header").mouseover(function () {
$(this).find("td.icons nobr").show();
});
$("table.slice_header").mouseout(function () {
$(this).find("td.icons nobr").hide();
});

editor.on("change", function () {
var css = editor.getValue();
$('#dash_css').val(css);
Expand Down
2 changes: 1 addition & 1 deletion panoramix/assets/javascripts/modules/panoramix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ var px = (function () {
if (slice_description.is(":visible")) {
others += widget.find('.slice_description').height() + 25;
}
others += widget.find('.slice_header').height();
others += widget.find('.chart-header').height();
return widget.height() - others;
},
bindResizeToWindowResize: function () {
Expand Down
31 changes: 24 additions & 7 deletions panoramix/assets/stylesheets/panoramix.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,11 +196,10 @@ img.loading {
.gridster li.widget{
list-style-type: none;
border-radius: 0;
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
box-shadow: 2px 1px 5px -2px #aaa;
overflow: hidden;
overflow: auto;
background-color: #fff;
}
.dashboard .gridster .dragging,
Expand All @@ -224,17 +223,14 @@ img.loading {
width: 100%;
height: 100%;
}
.dashboard table.slice_header {
width: 100%;
height: 20px;
}

.dashboard div.nvtooltip {
z-index: 888; /* this lets tool tips go on top of other slices */
}
.dashboard td.icons {
width: 50px;
}
.dashboard td.icons nobr {
.dashboard td.icons {
display: none;
}
div.header {
Expand All @@ -243,3 +239,24 @@ div.header {
li.widget:hover {
z-index: 1000;
}

li.widget .chart-header {
padding: 5px;
background-color: #f1f1f1;
}
li.widget .chart-controls {
opacity: 0;
height: 0;
background-color: #f1f1f1;
}
li.widget .chart-header:hover .chart-controls {
opacity: 1;
height: auto;
transition: all 0.5s ease;
}
li.widget .chart-controls a {
margin-right: 5px;
}
li.widget .slice_container {
overflow: auto;
}
5 changes: 5 additions & 0 deletions panoramix/assets/visualizations/nvd3_vis.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
g.dashed path {
stroke-dasharray: 5, 5;
}

.nvtooltip tr.highlight td {
font-weight: bold;
font-size: 15px !important;
}
4 changes: 2 additions & 2 deletions panoramix/data/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ def load_birth_names():
.navbar:hover {
opacity: 1;
}
.slice_header .header{
.chart-header .header{
font-weight: normal;
font-size: 12px;
}
Expand Down Expand Up @@ -375,7 +375,7 @@ def load_birth_names():
.navbar:hover {
opacity: 1;
}
.slice_header .header{
.chart-header .header{
font-weight: normal;
font-size: 12px;
}
Expand Down
87 changes: 48 additions & 39 deletions panoramix/templates/panoramix/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,52 +70,61 @@ <h2>
{% for slice in dashboard.slices %}
{% set pos = pos_dict.get(slice.id, {}) %}
{% set viz = slice.viz %}

<li
id="slice_{{ slice.id }}"
slice_id="{{ slice.id }}"
class="widget {{ slice.viz.viz_type }}"
data-row="{{ pos.row or 1 }}"
data-col="{{ pos.col or loop.index }}"
data-sizex="{{ pos.size_x or 4 }}"
data-sizey="{{ pos.size_y or 4 }}">
<table class="slice_header">
<tbody>
<tr>
<td class="icons">
<nobr class="icons">
<a><i class="fa fa-arrows drag"></i></a>
<a class="refresh"><i class="fa fa-refresh"></i></a>
</nobr>
</td>
<td>
<div class="text-center header">
<nobr>
{{ slice.slice_name }}
{% if slice.description %}
<i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}"></i>
{% endif %}
</nobr>
</div>
</td>
<td class="icons text-right">
<nobr>
<a href="{{ slice.slice_url }}"><i class="fa fa-play"></i></a>
<a href="{{ slice.edit_url }}"><i class="fa fa-edit"></i></a>
<a class="closeslice"><i class="fa fa-close"></i></a>
</br>
</td>
</tr>
</tbody>
</table>
<div class="slice_description bs-callout bs-callout-default" style="{{ 'display: none;' if "{}".format(slice.id) not in dashboard.metadata_dejson.expanded_slices }}">
{{ slice.description_markeddown | safe }}
id="slice_{{ slice.id }}"
slice_id="{{ slice.id }}"
class="widget {{ slice.viz.viz_type }}"
data-row="{{ pos.row or 1 }}"
data-col="{{ pos.col or loop.index }}"
data-sizex="{{ pos.size_x or 4 }}"
data-sizey="{{ pos.size_y or 4 }}">

<div class="row chart-header">
<div class="col-md-12 text-center header">
{{ slice.slice_name }}
{% if slice.description %}
<i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}"></i>
{% endif %}
</div>
<div class="row text-center">
<div class="chart-controls col-md-12">
<a title="Move chart">
<i class="fa fa-arrows drag"></i>
</a>
<a class="refresh" title="Refresh data">
<i class="fa fa-repeat"></i>
</a>
<a href="{{ slice.edit_url }}" title="Edit chart">
<i class="fa fa-pencil"></i>
</a>
<a href="{{ slice.slice_url }}" title="Explore chart">
<i class="fa fa-share"></i>
</a>
<a class="remove-chart" title="Remove chart from dashboard">
<i class="fa fa-close"></i>
</a>
</div>
</div>
</div>

<div class="row">
<div
class="slice_description bs-callout bs-callout-default col-md-12"
style="{{ 'display: none;' if "{}".format(slice.id) not in dashboard.metadata_dejson.expanded_slices }}">
{{ slice.description_markeddown | safe }}
</div>
</div>

<div class="row chart-container">
<input type="hidden" slice_id="{{ slice.id }}" value="false">
<div id="{{ viz.token }}" class="token">
<div id="{{ viz.token }}" class="token col-md-12">
<img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
<div class="slice_container" id="{{ viz.token }}_con"></div>
</div>
</div>
</li>

{% endfor %}
</ul>
</div>
Expand Down

0 comments on commit 49590e2

Please sign in to comment.