Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Adding an option to make separators in dashboard (#699)
  • Loading branch information
mistercrunch committed Jul 14, 2016
1 parent 3522bf9 commit 8312f1c
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 19 deletions.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions caravel/assets/javascripts/dashboard/Dashboard.jsx
Expand Up @@ -14,8 +14,9 @@ var ace = require('brace');
require('bootstrap');
require('brace/mode/css');
require('brace/theme/crimson_editor');
require('./main.css');
require('../caravel-select2.js');
require('../../stylesheets/dashboard.css');


var Dashboard = function (dashboardData) {
var dashboard = $.extend(dashboardData, {
Expand Down Expand Up @@ -251,7 +252,7 @@ var Dashboard = function (dashboardData) {
dashboard = this;

// Displaying widget controls on hover
$('.chart-header').hover(
$('.react-grid-item').hover(
function () {
$(this).find('.chart-controls').fadeIn(300);
},
Expand Down
Expand Up @@ -11,12 +11,24 @@
border-color: #AAA;
opacity: 0.3;
}

.slice-grid div.widget{
div.widget .chart-controls {
background-clip: content-box;
position: absolute;
z-index: 100;
right: 0;
left: 0;
top: 5px;
padding: 5px 5px;
opacity: 0.75;
display: none;
}
.slice-grid div.widget {
border-radius: 0;
border: 1px solid #ccc;
box-shadow: 2px 1px 5px -2px #aaa;
background-color: #fff;
overflow: visible;
z-index: 5;
}
.dashboard .slice-grid .dragging,
.dashboard .slice-grid .resizing {
Expand Down Expand Up @@ -59,3 +71,34 @@
.hidden, #pageDropDown {
display: none;
}

.slice-grid div.separator.widget {
border: 1px solid transparent;
box-shadow: none;
z-index: 1;
}
.slice-grid div.separator.widget:hover {
border: 1px solid #EEE;
}
.slice-grid div.separator.widget .chart-header {
background-color: transparent;
color: transparent;
}
.slice-grid div.separator.widget h1,h2,h3,h4 {
margin-top: 0px;
}
.dashboard .separator.widget .slice_container {
padding: 0px;
overflow: visible;
}
.dashboard .separator.widget .slice_container hr {
margin-top: 5px;
margin-bottom: 5px;
}
.separator .chart-container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
1 change: 1 addition & 0 deletions caravel/assets/javascripts/modules/caravel.js
Expand Up @@ -18,6 +18,7 @@ var sourceMap = {
iframe: 'iframe.js',
line: 'nvd3_vis.js',
markup: 'markup.js',
separator: 'markup.js',
para: 'parallel_coordinates.js',
pie: 'nvd3_vis.js',
box_plot: 'nvd3_vis.js',
Expand Down
12 changes: 0 additions & 12 deletions caravel/assets/stylesheets/caravel.css
Expand Up @@ -183,18 +183,6 @@ div.widget .chart-header a {
display: none;
}

div.widget .chart-controls {
background-clip: content-box;
background-color: #f1f1f1;
position: absolute;
right: 0;
left: 0;
top: 5px;
padding: 5px 5px;
opacity: 0.75;
display: none;
}

div.widget .slice_container {
overflow: auto;
}
3 changes: 0 additions & 3 deletions caravel/assets/visualizations/markup.js
Expand Up @@ -3,10 +3,8 @@ var $ = window.$ || require('jquery');
require('./markup.css');

function markupWidget(slice) {

function refresh() {
$('#code').attr('rows', '15');

$.getJSON(slice.jsonEndpoint(), function (payload) {
slice.container.html(payload.data.html);
slice.done(payload);
Expand All @@ -15,7 +13,6 @@ function markupWidget(slice) {
slice.error(xhr.responseText, xhr);
});
}

return {
render: refresh,
resize: refresh
Expand Down
20 changes: 20 additions & 0 deletions caravel/viz.py
Expand Up @@ -508,6 +508,25 @@ def get_data(self):
return dict(html=self.rendered())


class SeparatorViz(MarkupViz):

"""Use to create section headers in a dashboard, similar to `Markup`"""

viz_type = "separator"
verbose_name = _("Separator")
form_overrides = {
'code': {
'default': (
"####Section Title\n"
"A paragraph describing the section"
"of the dashboard, right before the separator line "
"\n\n"
"---------------"
),
}
}


class WordCloudViz(BaseViz):

"""Build a colorful word cloud
Expand Down Expand Up @@ -1887,6 +1906,7 @@ def get_data(self):
CalHeatmapViz,
HorizonViz,
MapboxViz,
SeparatorViz,
]

viz_types = OrderedDict([(v.viz_type, v) for v in viz_types_list
Expand Down
3 changes: 3 additions & 0 deletions docs/gallery.rst
Expand Up @@ -78,3 +78,6 @@ Gallery

.. image:: _static/img/viz_thumbnails/mapbox.png
:scale: 25 %

.. image:: _static/img/viz_thumbnails/separator.png
:scale: 25 %

0 comments on commit 8312f1c

Please sign in to comment.