Nvd3

bamboo-client/.meteor/packages

@@ -3,7 +3,6 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-autopublish
 coffeescript
 underscore
 jquery

bamboo-client/client/bamboo.css

@@ -69,3 +69,36 @@ input{
     box-shadow: 0 0 5px 5px #888888;
 }
 
+.pointer:hover {
+    cursor:pointer;
+}
+
+.deletionBtn {
+    width:20px;
+    height:20px;
+}
+
+.downloadBtn {
+    width:20px;
+    height:20px;
+}
+.brand {
+    font-size: 15px;
+}
+
+.logoImg {
+    width: 20px;
+    height:20px;
+    padding-top: 8px;
+}
+
+.boxPlotSVG {
+    width: 200px;
+    height: 300px;
+}
+
+.barChartSVG {
+    width: 400px;
+    height: 250px;
+}
+

bamboo-client/client/bamboo.html

@@ -13,23 +13,23 @@
         <div id="d3select"></div>
     </div>
 </body>
+
+<template name="error_message">
+{{message}}
+</template>
 
 <template name="body_render">
 {{#if show}}
     {{> introduction}}
-    {{> graphing_block}}
-    {{> add_new_graph}}
+    <div class="graph_area">
+    </div>
+    {{> control_panel}}
 {{/if}}
 </template>
 
 <template name="graphing_block">
     <div class="well span8 offset1">
-        <div class="control">
-            {{> control_panel}}
-        </div>
-        <div class="graphing">
-            {{> graph}}
-        </div>
+        Graphs:
     </div>
 </template>
 
@@ -38,6 +38,9 @@
     <div class='navbar navbar-fixed-top url'>
         <div class="navbar-inner">
             <div class="container">
+                <div class="pull-left"> <a class="brand" href="http://bamboo.io/"><b> Bamboo.io</b> </a>
+                    <img class="logoImg" src="logo.svg"/>  
+                </div>
                 <div class="pull-right">
                     <input id="dataSourceURL" type="text"
                             value="{{current_dataset_url}}"></input>
@@ -64,6 +67,9 @@
 
 <template name="processing">
 {{#if ready}}
+    <div class="error_message">
+        {{> error_message}}
+    </div>
     <div class="well span8 offset1">
         <h1>Preparing your dataset, just a split second..</h1>
     <img src="drop.gif">
@@ -72,38 +78,47 @@ <h1>Preparing your dataset, just a split second..</h1>
 </template>
 
 <template name="introduction">
-{{#if ready}}
 <div class="well span8 offset1">
-    <p>You are accessing the dataset from {{url}}</p> 
-    <p>There are {{num_cols}} fields you can choose to chart</p>
+    <div class="page-header"> 
+        <h3> Introducion about Your File </h3> 
+    </div>
+    <p><b>You</b> are accessing the dataset from <a href="{{url}}"> {{url}}</a>.</p> 
+    <p><b>{{num_cols}} view fields</b> in the dataset you can choose to chart : </p>
     {{#if show_all}}
+        <p>
         {{#each schema}}
-        <p><a href="http://www.google.com?id={{label}}"> {{label}} {{simpletype}} </a></p>
+        <a href="http://www.google.com?id={{label}}">{{label}}</a>
+        ,&nbsp&nbsp&nbsp&nbsp
         {{/each}}
+        </p>
         {{#if long}}
             <div class="btn pull-right" id="hideBtn">
                 hide
             </div>
         {{/if}}
     {{else}}
         <p> show 5 entries, or click the button to show all </p>
+        <p>
         {{#each schema_less}}
-        <p><a href="http://www.google.com?id={{label}}"> {{label}} {{simpletype}} </a></p>
+        <a href="http://www.google.com?id={{label}}"> {{label}} {{simpletype}} </a>
+        ,&nbsp&nbsp&nbsp&nbsp
         {{/each}}
+        </p>
         <div class="btn pull-right" id="moreBtn">
             more      
         </div>
     {{/if}}
+    <p> ---- : Field with * is groupable field.</p>
 </div>
-{{/if}}
 </template>
 
 <template name="control_panel">
-    {{#if show}}
+<div class="well span8 offset1">
+    {{#if active}}
             <div class="page-header">
                 <h3>Graphing Control Panel</h3>
             </div>
-            <div class="row">
+            <div class="row offset1">
                 <b>View</b>
                 {{chosen}}
                 <select class="chosen" id="view" >
@@ -125,35 +140,35 @@ <h3>Graphing Control Panel</h3>
                     Chart        
                 </div>
             </div>
+            {{#if waiting}}
+                {{>waiting_graph}}
+                {{charting}}
+            {{/if}}
+    {{else}}
+        <div class="btn btn-large pull-right" id="addNewGraphBtn">
+            <h3>Add a New Graph</h3>
+        </div>
     {{/if}}
+</div>
 </template>
 
 <template name="waiting_graph">
-{{#if exist}}
-    <h3> {{titles}} </h3>
-{{else}}
     Proccessing the graphs, waiting a split second...
     <img src="drop.gif">
-{{/if}}
 </template>
 
 <template name="graph">
-{{#if show}}
-        {{>waiting_graph}}
-        {{charting}}
-        <div class="d3_graph" id="{{field}}_graph"></div>
-{{/if}}
-</template>
-
-
-
-
-<template name="add_new_graph">
-{{#if show}}
-    <div class="well span8 offset1">
-        <div class="btn pull-right" id="addGraphBtn">
-            Add A Graph
+<div class="well span8 offset1" id="{{field}}_{{group}}_block">
+    <div class="page-header"> 
+        <div class="pull-right" id="{{field}}_{{group}}_btn">
+                <img class="pointer downloadBtn" src="download.svg"></img>
+            &nbsp
+            <img class="pointer deletionBtn" src="deletion.svg"></img>
         </div>
+        <h3> {{title}} </h3>
     </div>
-{{/if}}
+        <div class="d3_graph" id="{{field}}_{{group}}_graph"></div>
+</div>
 </template>
+
+