Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor dashboard chart html, make several css improvements. #175

Merged
merged 2 commits into from
Mar 14, 2016
Merged

refactor dashboard chart html, make several css improvements. #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49590e2
refactor dashboard chart html, make several css improvements.
williaster Mar 11, 2016
b0fa4bc
remove unused css
williaster Mar 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions panoramix/assets/javascripts/dashboard.js
View file
Open in desktop
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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was throwing errors

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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was throwing errors also

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
Open in desktop
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
36 changes: 24 additions & 12 deletions panoramix/assets/stylesheets/panoramix.css
View file
Open in desktop
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,22 +223,35 @@ 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 {
display: none;
}

div.header {
font-weight: bold;
}
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
Open in desktop
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
Open in desktop
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
Open in desktop
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