diff --git a/caravel/assets/images/viz_thumbnails/separator.png b/caravel/assets/images/viz_thumbnails/separator.png new file mode 100644 index 0000000000000..eddb59d590431 Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/separator.png differ diff --git a/caravel/assets/javascripts/dashboard/Dashboard.jsx b/caravel/assets/javascripts/dashboard/Dashboard.jsx index c04f58bc682ed..1450fa1d7bbfa 100644 --- a/caravel/assets/javascripts/dashboard/Dashboard.jsx +++ b/caravel/assets/javascripts/dashboard/Dashboard.jsx @@ -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, { @@ -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); }, diff --git a/caravel/assets/stylesheets/dashboard.css b/caravel/assets/javascripts/dashboard/main.css similarity index 53% rename from caravel/assets/stylesheets/dashboard.css rename to caravel/assets/javascripts/dashboard/main.css index b2beb779f3b43..a9030074ee4b7 100644 --- a/caravel/assets/stylesheets/dashboard.css +++ b/caravel/assets/javascripts/dashboard/main.css @@ -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 { @@ -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; +} diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js index e96a1e2bcc603..5a49e0ff1d68c 100644 --- a/caravel/assets/javascripts/modules/caravel.js +++ b/caravel/assets/javascripts/modules/caravel.js @@ -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', diff --git a/caravel/assets/stylesheets/caravel.css b/caravel/assets/stylesheets/caravel.css index b30d868f1a757..35eb6dabab598 100644 --- a/caravel/assets/stylesheets/caravel.css +++ b/caravel/assets/stylesheets/caravel.css @@ -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; } diff --git a/caravel/assets/visualizations/markup.js b/caravel/assets/visualizations/markup.js index 61b8ccd5f69c6..4b841af1bb515 100644 --- a/caravel/assets/visualizations/markup.js +++ b/caravel/assets/visualizations/markup.js @@ -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); @@ -15,7 +13,6 @@ function markupWidget(slice) { slice.error(xhr.responseText, xhr); }); } - return { render: refresh, resize: refresh diff --git a/caravel/viz.py b/caravel/viz.py index 4a0e6d358262a..cb4c2036d74e4 100755 --- a/caravel/viz.py +++ b/caravel/viz.py @@ -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 @@ -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 diff --git a/docs/gallery.rst b/docs/gallery.rst index 30639fbca5b9e..9c7ee0b4e1b4f 100644 --- a/docs/gallery.rst +++ b/docs/gallery.rst @@ -78,3 +78,6 @@ Gallery .. image:: _static/img/viz_thumbnails/mapbox.png :scale: 25 % + +.. image:: _static/img/viz_thumbnails/separator.png + :scale: 25 %