From b0537f718ac91803de5d273772d4c7cfd2ddde61 Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Fri, 31 Oct 2014 12:11:48 +0900
Subject: [PATCH] More svg drawing

---
 client/html/index.html        | 22 +---------------------
 client/scripts/application.js |  8 ++++----
 client/scripts/grapher.js     | 14 ++++++++------
 3 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/client/html/index.html b/client/html/index.html
index 38aeff3..d902388 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -112,26 +112,6 @@
                 </div>
             </div>
 
-            <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
-                <!-- <defs> -->
-                <!--     <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> -->
-                <!--         <stop offset="0%" stop-color="#ffffff"/> -->
-                <!--         <stop offset="100%" stop-color="#000000"/> -->
-                <!--     </linearGradient> -->
-                <!-- </defs> -->
-
-                <!-- <symbol id="graph"> -->
-                <!--     <rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/> -->
-                <!--     <rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/> -->
-                <!--     <rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/> -->
-                <!--     <rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/> -->
-                <!--     <line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/> -->
-                <!--     <text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text> -->
-                <!-- </symbol> -->
-
-                <!-- <use xlink:href="#graph" x="0" y="0"/> -->
-            </svg>
-
             <!-- query output -->
             <div id="output" style="display: none;">
                 <!-- semantic tweaker -->
@@ -145,7 +125,7 @@
                         </div>
                     </div>
                     <div style="padding: 10px;">
-                        <canvas id="grapher" width="800" height="550"></canvas>
+                        <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="550"></svg>
                         <div class="text-center" style="display: none;">
                             <input id="history" style="width: 90%;" type="text" data-slider-reversed="true" data-slider-max="0">
                         </div>
diff --git a/client/scripts/application.js b/client/scripts/application.js
index 19cb3a6..282de7b 100644
--- a/client/scripts/application.js
+++ b/client/scripts/application.js
@@ -71,7 +71,7 @@
             ctx.maxResults   = query.maxResults;
 
             ctx.grapher = new grapher.Grapher({
-                canvas:           Snap('#svg'),
+                canvas:           new Snap('#svg'),
                 columnRange:      ctx.searchRange,
                 columnWidth:      150,
                 useLocalScale:    true,
@@ -92,9 +92,9 @@
                 var useRelativeScale = $('#useRelativeScale').is(':checked');
                 ctx.grapher.setUseRelativeScale(useRelativeScale);
             });
-            // $('#input').fadeOut(function() {
-            //     $('#output').fadeIn();
-            // });
+            $('#input').fadeOut(function() {
+                $('#output').fadeIn();
+            });
         });
     }
 
diff --git a/client/scripts/grapher.js b/client/scripts/grapher.js
index e087d75..639b75a 100644
--- a/client/scripts/grapher.js
+++ b/client/scripts/grapher.js
@@ -111,12 +111,14 @@
 
     function Column(params) {
         this.updateShapes = function() {
-            var bigCircle = this.canvas.circle(150, 150, 100);
-            bigCircle.attr({
-                fill:        "#bada55",
-                stroke:      "#000",
-                strokeWidth: 5
-            });
+            var gradient = this.canvas.gradient('l(0, 0, 0, 1)#000-#fff');
+
+            this.canvas.rect(5, 0, 90, 490).attr({'stroke': '#d3d7cf', 'fill': '#eeeeec'});
+            this.canvas.rect(5, 0, 90, 245).attr({'fill': '#cc0000'});
+            this.canvas.rect(90, 0, 10, 490).attr({'stroke': '#d3d7cf', 'fill': gradient});
+            this.canvas.rect(0, 490, 100, 20).attr({'fill': '#d3d7cf'});
+            this.canvas.line(0, 245, 5, 245).attr({'stroke': '#888a85'});
+            this.canvas.text(55, 500, this.name).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'});
         };
 
         this.decimateHints = function(hints, steps, scale) {