mirror of https://github.com/apache/superset.git
Adding an option to make separators in dashboard (#699)
This commit is contained in:
parent
3522bf9b09
commit
8312f1c2aa
Binary file not shown.
After Width: | Height: | Size: 99 KiB |
|
@ -14,8 +14,9 @@ var ace = require('brace');
|
||||||
require('bootstrap');
|
require('bootstrap');
|
||||||
require('brace/mode/css');
|
require('brace/mode/css');
|
||||||
require('brace/theme/crimson_editor');
|
require('brace/theme/crimson_editor');
|
||||||
|
require('./main.css');
|
||||||
require('../caravel-select2.js');
|
require('../caravel-select2.js');
|
||||||
require('../../stylesheets/dashboard.css');
|
|
||||||
|
|
||||||
var Dashboard = function (dashboardData) {
|
var Dashboard = function (dashboardData) {
|
||||||
var dashboard = $.extend(dashboardData, {
|
var dashboard = $.extend(dashboardData, {
|
||||||
|
@ -251,7 +252,7 @@ var Dashboard = function (dashboardData) {
|
||||||
dashboard = this;
|
dashboard = this;
|
||||||
|
|
||||||
// Displaying widget controls on hover
|
// Displaying widget controls on hover
|
||||||
$('.chart-header').hover(
|
$('.react-grid-item').hover(
|
||||||
function () {
|
function () {
|
||||||
$(this).find('.chart-controls').fadeIn(300);
|
$(this).find('.chart-controls').fadeIn(300);
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,12 +11,24 @@
|
||||||
border-color: #AAA;
|
border-color: #AAA;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
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 {
|
.slice-grid div.widget {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
box-shadow: 2px 1px 5px -2px #aaa;
|
box-shadow: 2px 1px 5px -2px #aaa;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
overflow: visible;
|
||||||
|
z-index: 5;
|
||||||
}
|
}
|
||||||
.dashboard .slice-grid .dragging,
|
.dashboard .slice-grid .dragging,
|
||||||
.dashboard .slice-grid .resizing {
|
.dashboard .slice-grid .resizing {
|
||||||
|
@ -59,3 +71,34 @@
|
||||||
.hidden, #pageDropDown {
|
.hidden, #pageDropDown {
|
||||||
display: none;
|
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;
|
||||||
|
}
|
|
@ -18,6 +18,7 @@ var sourceMap = {
|
||||||
iframe: 'iframe.js',
|
iframe: 'iframe.js',
|
||||||
line: 'nvd3_vis.js',
|
line: 'nvd3_vis.js',
|
||||||
markup: 'markup.js',
|
markup: 'markup.js',
|
||||||
|
separator: 'markup.js',
|
||||||
para: 'parallel_coordinates.js',
|
para: 'parallel_coordinates.js',
|
||||||
pie: 'nvd3_vis.js',
|
pie: 'nvd3_vis.js',
|
||||||
box_plot: 'nvd3_vis.js',
|
box_plot: 'nvd3_vis.js',
|
||||||
|
|
|
@ -183,18 +183,6 @@ div.widget .chart-header a {
|
||||||
display: none;
|
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 {
|
div.widget .slice_container {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,10 +3,8 @@ var $ = window.$ || require('jquery');
|
||||||
require('./markup.css');
|
require('./markup.css');
|
||||||
|
|
||||||
function markupWidget(slice) {
|
function markupWidget(slice) {
|
||||||
|
|
||||||
function refresh() {
|
function refresh() {
|
||||||
$('#code').attr('rows', '15');
|
$('#code').attr('rows', '15');
|
||||||
|
|
||||||
$.getJSON(slice.jsonEndpoint(), function (payload) {
|
$.getJSON(slice.jsonEndpoint(), function (payload) {
|
||||||
slice.container.html(payload.data.html);
|
slice.container.html(payload.data.html);
|
||||||
slice.done(payload);
|
slice.done(payload);
|
||||||
|
@ -15,7 +13,6 @@ function markupWidget(slice) {
|
||||||
slice.error(xhr.responseText, xhr);
|
slice.error(xhr.responseText, xhr);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
render: refresh,
|
render: refresh,
|
||||||
resize: refresh
|
resize: refresh
|
||||||
|
|
|
@ -508,6 +508,25 @@ class MarkupViz(BaseViz):
|
||||||
return dict(html=self.rendered())
|
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):
|
class WordCloudViz(BaseViz):
|
||||||
|
|
||||||
"""Build a colorful word cloud
|
"""Build a colorful word cloud
|
||||||
|
@ -1887,6 +1906,7 @@ viz_types_list = [
|
||||||
CalHeatmapViz,
|
CalHeatmapViz,
|
||||||
HorizonViz,
|
HorizonViz,
|
||||||
MapboxViz,
|
MapboxViz,
|
||||||
|
SeparatorViz,
|
||||||
]
|
]
|
||||||
|
|
||||||
viz_types = OrderedDict([(v.viz_type, v) for v in viz_types_list
|
viz_types = OrderedDict([(v.viz_type, v) for v in viz_types_list
|
||||||
|
|
|
@ -78,3 +78,6 @@ Gallery
|
||||||
|
|
||||||
.. image:: _static/img/viz_thumbnails/mapbox.png
|
.. image:: _static/img/viz_thumbnails/mapbox.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/separator.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
Loading…
Reference in New Issue