Adding first version of visualization cheat sheet to component editor

classes/modules/adminModule.php

@@ -27,6 +27,32 @@ class AdminModule extends abstractModule{
         background-position: right;
       }
       .strong{font-weight: 900; font-size:120%}
+      .cheat-sheet{
+      -moz-border-radius: 15px;
+      -webkit-border-radius: 15px;
+      border-radius: 15px;
+        background:lightgray;
+        width:400px;
+        padding:5px;
+        position:absolute;
+        border:1px solid black;
+        right:-370px;
+        top:121px;
+        opacity:0.9
+      }
+      .cheat-title{
+	writing-mode:tb-rl;
+	-webkit-transform:rotate(90deg);
+	-moz-transform:rotate(90deg);
+	-o-transform: rotate(90deg);
+	white-space:nowrap;
+	display:block;
+	width:20px;
+	height:40px;
+	font-size:24px;
+	font-weight:normal;
+	text-shadow: 0px 0px 1px #333;      
+	}
       /* Base class */
 .bs-docs-template {
   position: relative;
@@ -39,6 +65,10 @@ class AdminModule extends abstractModule{
      -moz-border-radius: 4px;
           border-radius: 4px;
 }
+ .cheat-list{
+   margin-left:60px;
+   margin-top:-40px;
+ }
 
 /* Echo out a label for the example */
 .bs-docs-template:after {

doc/examples/originalComponents/static/admin/js/editor.js

@@ -19,7 +19,33 @@ $(document).ready(function(){
   };
   return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || 'text/html'), mustacheOverlay);
 });
-
+    
+    var cheatSheet = $("body").append("<div id='cheat' class='cheat-sheet'></div>");
+    $("#cheat").on('mouseenter', function(){$(this).animate({right: '+=200'}, 180)})
+               .on('mouseleave', function(){$(this).animate({right: '-=200'}, 180)}).html("<span class='cheat-title'>Visualization Filters</span>");
+    
+    $("#cheat").append("<ul id='cheat-list' class='cheat-list'></ul>");
+    
+    var visualizationsEnabled = [ 'D3CirclePacking', 
+                                  'D3Dendrogram', 
+                                  'D3ForceGraph', 
+                                  'D3ParallelCoordinates', 
+                                  'GoogleMaps', 
+                                  'GoogleVizBarChart',
+                                  'GoogleVizColumnChart',
+                                  'GoogleVizLineChart',
+                                  'GoogleVizPieChart',
+                                  'GoogleVizScatterChart',
+                                  'GoogleVizTable',
+                                  'Timeknots'];
+    $.each(visualizationsEnabled, function(index, value){
+      $("#cheat-list").append("<li><a href='#' class='cheat-link'>"+value+"</a></li>");
+    });
+    
+    $(".cheat-link").on('click', function(){
+      var visualFilter = '{{models.main|'+$(this).html()+':""}}';
+      templateEditor.replaceSelection(visualFilter);
+    });
     //Create Template and Query Editor
     var templateEditor = CodeMirror.fromTextArea(document.getElementById('template-editor'), {mode: 'mustache',
     onChange:function(e){