Styled the charts page

cykod · Sep 10, 2010 · 8b824ea · 8b824ea
1 parent 555bc3e
commit 8b824ea
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/app/views/emarketing/charts.html.erb b/app/views/emarketing/charts.html.erb
@@ -18,8 +18,10 @@ end
 chart_top = @stats.size > 3 ? ((@stats.size - 3) * 3) : 0
 %>
 <div class='admin_content'>
+<div class="visitor_container" style="width:100%;">
+
   <div style="padding-bottom:10px;">
-    <%= @when_options.collect { |opt| link_to opt[0], {:when => opt[1], :type_id => @type_id, :target_id => @target_id}, :class => @when == opt[1] ? 'selected' : nil }.join(' | ') %>
+    <%= @when_options.collect { |opt| link_to opt[0], {:when => opt[1], :type_id => @type_id, :target_id => @target_id}, :class => @when == opt[1] ? 'selected button_link' : 'button_link' }.join(' ') %>
   </div>
 
 <% if @type_options -%>
@@ -31,9 +33,11 @@ chart_top = @stats.size > 3 ? ((@stats.size - 3) * 3) : 0
   </div>
 <% end -%>
 
+<div class="visitor_container_body">
 <div id="chart_div">
 <div id="chart_canvas"></div>
 </div>
+</div>
 
 <script type="text/javascript">
 
@@ -56,3 +60,4 @@ $j(document).ready(function() {
 </script>
 
 </div>
+</div>
diff --git a/public/javascripts/charts.js b/public/javascripts/charts.js
@@ -84,7 +84,9 @@ WebivaBarChart = function(opts) {
         legendWidth = marginRight - 5,
         legendX = (w + 5),
         legendSize = 5,
-        legendY = 0;
+        legendY = 0,
+        fontColor = '#603813',
+        colors = pv.colors('#C7CB2D', '#754C28');
 
     /* No need to redraw unless we are changing the size of the graph */
     if(force == undefined && currentWidth == w) {
@@ -113,7 +115,8 @@ WebivaBarChart = function(opts) {
        .height(y.range().band / barsPerRow)
        .left(0)
        .width(x)
-       .fillStyle(pv.Colors.category20().by(pv.index))
+       .fillStyle(colors.by(pv.index))
+       .textStyle(fontColor)
        .text(function(d) d + (columns ? ' ' + columns[this.index] : ''))
        .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));
 
@@ -125,11 +128,12 @@ WebivaBarChart = function(opts) {
          .height(12)
          .left(legendX)
          .width(12)
-         .fillStyle(pv.Colors.category20().by(pv.index))
+         .fillStyle(colors.by(pv.index))
          .event("click", function() {sort(this.index); draw(true);})
          .anchor("right").add(pv.Label)
          .textMargin(5)
          .textAlign("left")
+         .textStyle(fontColor)
          .text(function() columns[this.index])
          .events("all")
          .event("click", function() {sort(this.index); draw(true);});
@@ -150,6 +154,7 @@ WebivaBarChart = function(opts) {
       bar.parent.anchor("left").add(pv.Label)
          .textMargin(5)
          .textAlign("right")
+         .textStyle(fontColor)
          .text(function() truncate(dataTable[this.parent.index].label, 40))
          .title(function() dataTable[this.parent.index].label)
          .events("all");
@@ -168,8 +173,9 @@ WebivaBarChart = function(opts) {
         .add(pv.Rule)
         .bottom(0)
         .height(5)
-        .strokeStyle("#000")
+        .strokeStyle(fontColor)
         .anchor("bottom").add(pv.Label)
+        .textStyle(fontColor)
         .text(x.tickFormat);
 
     vis.render();

diff --git a/public/themes/standard/stylesheets/admin_framework.css b/public/themes/standard/stylesheets/admin_framework.css
@@ -1019,3 +1019,13 @@ table.display_table td.field {
   -webkit-border-radius-topright: 10px;
   overflow:hidden;
 }
+
+.visitor_container .button_link {
+  background-color:#cce5e9;
+  color: #754C28;
+  font-size: 15px;
+}
+
+.visitor_container .selected {
+   background-color:#f3f0e0;
+}