diff --git a/caravel/assets/images/noimg.png b/caravel/assets/images/noimg.png new file mode 100644 index 0000000000..b311e6ee07 Binary files /dev/null and b/caravel/assets/images/noimg.png differ diff --git a/caravel/assets/images/viz_thumbnails/stacked.png b/caravel/assets/images/viz_thumbnails/area.png similarity index 100% rename from caravel/assets/images/viz_thumbnails/stacked.png rename to caravel/assets/images/viz_thumbnails/area.png diff --git a/caravel/assets/images/viz_thumbnails/bar.png b/caravel/assets/images/viz_thumbnails/bar.png index b41014788a..ab0e8d9915 100644 Binary files a/caravel/assets/images/viz_thumbnails/bar.png and b/caravel/assets/images/viz_thumbnails/bar.png differ diff --git a/caravel/assets/images/viz_thumbnails/big_number_total.png b/caravel/assets/images/viz_thumbnails/big_number_total.png new file mode 100644 index 0000000000..eb4b345731 Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/big_number_total.png differ diff --git a/caravel/assets/images/viz_thumbnails/percent_change.png b/caravel/assets/images/viz_thumbnails/compare.png similarity index 100% rename from caravel/assets/images/viz_thumbnails/percent_change.png rename to caravel/assets/images/viz_thumbnails/compare.png diff --git a/caravel/assets/images/viz_thumbnails/dist_bar.png b/caravel/assets/images/viz_thumbnails/dist_bar.png new file mode 100644 index 0000000000..b41014788a Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/dist_bar.png differ diff --git a/caravel/assets/images/viz_thumbnails/filter.png b/caravel/assets/images/viz_thumbnails/filter_box.png similarity index 100% rename from caravel/assets/images/viz_thumbnails/filter.png rename to caravel/assets/images/viz_thumbnails/filter_box.png diff --git a/caravel/assets/images/viz_thumbnails/heatmap.png b/caravel/assets/images/viz_thumbnails/heatmap.png new file mode 100644 index 0000000000..ac81a45881 Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/heatmap.png differ diff --git a/caravel/assets/images/viz_thumbnails/markup.png b/caravel/assets/images/viz_thumbnails/markup.png new file mode 100644 index 0000000000..675e42a89f Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/markup.png differ diff --git a/caravel/assets/images/viz_thumbnails/para.png b/caravel/assets/images/viz_thumbnails/para.png new file mode 100644 index 0000000000..fc1a157345 Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/para.png differ diff --git a/caravel/assets/images/viz_thumbnails/world_map.png b/caravel/assets/images/viz_thumbnails/world_map.png new file mode 100644 index 0000000000..82e8ad2d10 Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/world_map.png differ diff --git a/caravel/assets/javascripts/explore.js b/caravel/assets/javascripts/explore.js index 5bf628d105..1f655b5ab9 100644 --- a/caravel/assets/javascripts/explore.js +++ b/caravel/assets/javascripts/explore.js @@ -206,6 +206,14 @@ function initExploreView() { for (var i = 0; i < collapsed_fieldsets.length; i++) { 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 $( + '' + + '' + viz.text + '' + ); + } $(".select2").select2({ dropdownAutoWidth: true @@ -213,6 +221,11 @@ function initExploreView() { $(".select2Sortable").select2({ dropdownAutoWidth: true }); + $(".select2-with-images").select2({ + dropdownAutoWidth: true, + dropdownCssClass: "bigdrop", + formatResult: formatViz + }); $(".select2Sortable").select2Sortable({ bindOrder: 'sortableStop' }); diff --git a/caravel/assets/stylesheets/caravel.css b/caravel/assets/stylesheets/caravel.css index ae0cfa344e..0dfbf15449 100644 --- a/caravel/assets/stylesheets/caravel.css +++ b/caravel/assets/stylesheets/caravel.css @@ -173,6 +173,16 @@ img.loading { width: 20px; 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 { text-align: center; } diff --git a/caravel/templates/caravel/explore.html b/caravel/templates/caravel/explore.html index d9d7d2c679..029cc14add 100644 --- a/caravel/templates/caravel/explore.html +++ b/caravel/templates/caravel/explore.html @@ -40,7 +40,7 @@   - {{ form.get_field("viz_type")(class_="select2") }} + {{ form.get_field("viz_type")(class_="select2-with-images") }} {% if slice %} diff --git a/docs/gallery.rst b/docs/gallery.rst index 16d9af24e4..ca0376a575 100644 --- a/docs/gallery.rst +++ b/docs/gallery.rst @@ -22,7 +22,7 @@ Gallery .. image:: _static/img/viz_thumbnails/word_cloud.png :scale: 25 % -.. image:: _static/img/viz_thumbnails/filter.png +.. image:: _static/img/viz_thumbnails/filter_box.png :scale: 25 % .. image:: _static/img/viz_thumbnails/pivot_table.png @@ -31,15 +31,36 @@ Gallery .. image:: _static/img/viz_thumbnails/force_directed.png :scale: 25 % -.. image:: _static/img/viz_thumbnails/percent_change.png +.. image:: _static/img/viz_thumbnails/compare.png :scale: 25 % .. image:: _static/img/viz_thumbnails/sunburst.png :scale: 25 % -.. image:: _static/img/viz_thumbnails/stacked.png +.. image:: _static/img/viz_thumbnails/area.png :scale: 25 % .. image:: _static/img/viz_thumbnails/big_number.png :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 % +