Showing thumbsnails when switching viz (#313)
* Showing thumbsnails when switching viz * Adding missing images * linting
After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 103 KiB |
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 253 KiB |
After Width: | Height: | Size: 51 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 425 KiB |
After Width: | Height: | Size: 222 KiB |
After Width: | Height: | Size: 460 KiB |
After Width: | Height: | Size: 133 KiB |
|
@ -206,6 +206,14 @@ function initExploreView() {
|
||||||
for (var i = 0; i < collapsed_fieldsets.length; i++) {
|
for (var i = 0; i < collapsed_fieldsets.length; i++) {
|
||||||
toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false);
|
toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false);
|
||||||
}
|
}
|
||||||
|
function formatViz(viz) {
|
||||||
|
var url = '/static/assets/images/viz_thumbnails/' + viz.id + '.png';
|
||||||
|
var no_img = '/static/assets/images/noimg.png';
|
||||||
|
return $(
|
||||||
|
'<img class="viz-thumb-option" src="' + url + '" onerror="this.src=\'' + no_img + '\';">' +
|
||||||
|
'<span>' + viz.text + '</span>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
$(".select2").select2({
|
$(".select2").select2({
|
||||||
dropdownAutoWidth: true
|
dropdownAutoWidth: true
|
||||||
|
@ -213,6 +221,11 @@ function initExploreView() {
|
||||||
$(".select2Sortable").select2({
|
$(".select2Sortable").select2({
|
||||||
dropdownAutoWidth: true
|
dropdownAutoWidth: true
|
||||||
});
|
});
|
||||||
|
$(".select2-with-images").select2({
|
||||||
|
dropdownAutoWidth: true,
|
||||||
|
dropdownCssClass: "bigdrop",
|
||||||
|
formatResult: formatViz
|
||||||
|
});
|
||||||
$(".select2Sortable").select2Sortable({
|
$(".select2Sortable").select2Sortable({
|
||||||
bindOrder: 'sortableStop'
|
bindOrder: 'sortableStop'
|
||||||
});
|
});
|
||||||
|
|
|
@ -173,6 +173,16 @@ img.loading {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
img.viz-thumb-option {
|
||||||
|
width: 100px;
|
||||||
|
border: 1px solid gray;
|
||||||
|
margin-right: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.select2-drop.bigdrop .select2-results {
|
||||||
|
max-height: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard .title {
|
.dashboard .title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
<i class="fa fa-edit"></i>
|
<i class="fa fa-edit"></i>
|
||||||
</a>
|
</a>
|
||||||
<span title="Visualization Type" data-toggle="tooltip">
|
<span title="Visualization Type" data-toggle="tooltip">
|
||||||
{{ form.get_field("viz_type")(class_="select2") }}
|
{{ form.get_field("viz_type")(class_="select2-with-images") }}
|
||||||
</span>
|
</span>
|
||||||
{% if slice %}
|
{% if slice %}
|
||||||
<span class="btn btn-default notbtn" title="Slice" data-toggle="tooltip" data-placement="bottom">
|
<span class="btn btn-default notbtn" title="Slice" data-toggle="tooltip" data-placement="bottom">
|
||||||
|
|
|
@ -22,7 +22,7 @@ Gallery
|
||||||
.. image:: _static/img/viz_thumbnails/word_cloud.png
|
.. image:: _static/img/viz_thumbnails/word_cloud.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
.. image:: _static/img/viz_thumbnails/filter.png
|
.. image:: _static/img/viz_thumbnails/filter_box.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
.. image:: _static/img/viz_thumbnails/pivot_table.png
|
.. image:: _static/img/viz_thumbnails/pivot_table.png
|
||||||
|
@ -31,15 +31,36 @@ Gallery
|
||||||
.. image:: _static/img/viz_thumbnails/force_directed.png
|
.. image:: _static/img/viz_thumbnails/force_directed.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
.. image:: _static/img/viz_thumbnails/percent_change.png
|
.. image:: _static/img/viz_thumbnails/compare.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
.. image:: _static/img/viz_thumbnails/sunburst.png
|
.. image:: _static/img/viz_thumbnails/sunburst.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
.. image:: _static/img/viz_thumbnails/stacked.png
|
.. image:: _static/img/viz_thumbnails/area.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
.. image:: _static/img/viz_thumbnails/big_number.png
|
.. image:: _static/img/viz_thumbnails/big_number.png
|
||||||
:scale: 25 %
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/area.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/big_number_total.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/dist_bar.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/heatmap.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/markup.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/para.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
||||||
|
.. image:: _static/img/viz_thumbnails/world_map.png
|
||||||
|
:scale: 25 %
|
||||||
|
|
||||||
|
|