Adding an option to make separators in dashboard (#699)

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);
         },

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;
+}

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',

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;
 }

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

caravel/viz.py

@@ -508,6 +508,25 @@ class MarkupViz(BaseViz):
         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 @@ viz_types_list = [
     CalHeatmapViz,
     HorizonViz,
     MapboxViz,
+    SeparatorViz,
 ]
 
 viz_types = OrderedDict([(v.viz_type, v) for v in viz_types_list

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 %