css_graphs 0.1.0

data/History.txt

@@ -0,0 +1,14 @@
+== 0.1.0
+
+* Converted to Hoe
+* Available as a RubyGem
+
+== April 13, 2007
+
+* Added sizing and multi-graph bar enhancements by Maximiliano Guzman
+* Added test suite that generates HTML files in test/output
+
+== Feb 5, 2007
+
+* Enhanced all methods to take an array instead of requiring you to use *array
+* bar_graph() normalizes the data when rendering to make it usable for many values.

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2005 Geoffrey Grosenbach
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Manifest.txt

@@ -0,0 +1,17 @@
+History.txt
+MIT-LICENSE
+Manifest.txt
+README.txt
+Rakefile
+about.yml
+generators/css_graphs/css_graphs_generator.rb
+generators/css_graphs/templates/.DS_Store
+generators/css_graphs/templates/colorbar.jpg
+generators/css_graphs/templates/g_colorbar.jpg
+generators/css_graphs/templates/g_colorbar2.jpg
+generators/css_graphs/templates/g_marker.gif
+images/.DS_Store
+images/colorbar.jpg
+init.rb
+lib/css_graphs.rb
+test/test_css_graphs.rb

data/README.txt

@@ -0,0 +1,23 @@
+= css_graphs
+
+Makes graphs using pure CSS.
+
+Includes itself in the ActionView::Helpers::TextHelper module, so no extra include is required.
+
+A generator is also available for copying relevant images to the public directory.
+
+  ./script/generate css_graphs
+
+== Resources
+
+Subversion
+
+* http://topfunky.net/svn/plugins/css_graphs
+
+Blog
+
+* http://nubyonrails.com/pages/css_graphs
+
+Author
+
+* Geoffrey Grosenbach boss [at] topfunky [dot] com

data/Rakefile

@@ -0,0 +1,14 @@
+require 'rake'
+require 'hoe'
+require 'lib/css_graphs'
+
+Hoe.new('css_graphs', CssGraphs::VERSION) do |p|
+  p.rubyforge_name = 'seattlerb'
+  p.author = 'Geoffrey Grosenbach'
+  p.email = 'boss AT topfunky.com'
+  p.summary = 'Generates a configurable, CSS-tagged HTML calendar.'
+  p.description = "A simple method to create an HTML calendar for a single month. Can be styled with CSS. Usable with Ruby on Rails."
+  p.url = "http://rubyforge.org/projects/seattlerb"
+  p.changes = p.paragraphs_of('History.txt', 0..1).join("\n\n")
+  p.clean_globs = ['test/output', 'email.txt']
+end

data/about.yml

@@ -0,0 +1,7 @@
+author: topfunky
+summary: A helper to make graphs with CSS and XHTML. Includes a generator for copying relevant images to the public directory.
+homepage: http://nubyonrails.com/pages/css_graphs
+plugin: http://topfunky.net/svn/plugins/css_graphs
+license: MIT
+version: 0.2
+rails_version: 1.0+

data/generators/css_graphs/css_graphs_generator.rb

@@ -0,0 +1,15 @@
+class CssGraphsGenerator < Rails::Generator::Base  
+
+  def manifest
+    record do |m|
+      css_graphs_dir = File.join("public", "images", "css_graphs")
+      m.directory css_graphs_dir
+
+      Dir.open(File.join(File.dirname(__FILE__), "templates")).entries.each do |file|
+        next if File.directory?(file)
+        m.file file, File.join(css_graphs_dir, file)
+      end
+
+    end
+  end
+end

data/init.rb

@@ -0,0 +1,2 @@
+
+ActionView::Base.send :include, CssGraphs

data/lib/css_graphs.rb

@@ -0,0 +1,371 @@
+module CssGraphs
+
+  VERSION='0.1.0'
+    
+  # Makes a vertical bar graph.
+  #
+  #  bar_graph [["Stout", 10], ["IPA", 80], ["Pale Ale", 50], ["Milkshake", 30]]
+  #
+  # NOTE: Updated to take an array instead of forcing you to use *array.
+  # NOTE: Normalizes data to fit in the viewable area instead of being fixed to 100.
+  
+  def bar_graph(data=[])
+    width = 378
+    height = 150
+    colors = %w(#ce494a #efba29 #efe708 #5a7dd6 #73a25a)
+    floor_cutoff = 24 # Pixels beneath which values will not be drawn in graph
+    data_max = data.inject(0) { |memo, array| array.last > memo ? array.last : memo }
+
+    
+    html = <<-"HTML"
+    <style>
+      #vertgraph {    				
+          width: #{width}px; 
+          height: #{height}px; 
+          position: relative; 
+          background-color: #eeeeee;
+          border: 4px solid #999999;
+          font-family: "Lucida Grande", Verdana, Arial;
+      }
+    
+      #vertgraph dl dd {
+        position: absolute;
+        width: 28px;
+        height: 103px;
+        bottom: 34px;
+        padding: 0 !important;
+        margin: 0 !important;
+        background-image: url('/images/css_graphs/colorbar.jpg') no-repeat !important;
+        text-align: center;
+        font-weight: bold;
+        color: white;
+        line-height: 1.5em;
+      }
+
+      #vertgraph dl dt {
+        position: absolute;
+        width: 48px;
+        height: 25px;
+        bottom: 0px;
+        padding: 0 !important;
+        margin: 0 !important;
+        text-align: center;
+        color: #444444;
+        font-size: 0.8em;
+      }
+    HTML
+
+    bar_offset = 24
+    bar_increment = 75
+    bar_image_offset = 28
+    
+    data.each_with_index do |d, index|
+      bar_left = bar_offset + (bar_increment * index)
+      label_left = bar_left - 10
+      background_offset = bar_image_offset * index
+      
+      html += <<-HTML
+        #vertgraph dl dd.#{d[0].to_s.downcase} { left: #{bar_left}px; background-color: #{colors[index]}; background-position: -#{background_offset}px bottom !important; }
+        #vertgraph dl dt.#{d[0].to_s.downcase} { left: #{label_left}px; background-position: -#{background_offset}px bottom !important; }
+      HTML
+    end
+    
+    html += <<-"HTML"
+      </style>
+      <div id="vertgraph">
+        <dl>
+    HTML
+    
+    data.each_with_index do |d, index|
+      scaled_value = scale_graph_value(d.last, data_max, 100)
+      html += <<-"HTML"
+        <dt class="#{d.first.to_s.downcase}">#{d[0].to_s.humanize}</dt>
+        <dd class="#{d.first.to_s.downcase}" style="height: #{scaled_value}px;" title="#{d.last}">#{scaled_value < floor_cutoff ? '' : d.last}</dt>
+      HTML
+    end
+        
+    html += <<-"HTML"
+        </dl>
+      </div>
+    HTML
+    
+    html
+  end
+  
+  
+  # Makes a vertical bar graph with several sets of bars.
+  #
+  # NOTE: Normalizes data to fit in the viewable area instead of being fixed to 100.
+  #
+  # Example:
+  ## <% @data_for_graph = [[['January',10],['February',25],['March',45]],[['January',34],['February',29],['March',80]]] %>
+  ## <%= bar_graph (@data_for_graph,{:width => 640,:height => 480}) do |index,variable|
+  ##                 url_for( :action => 'report', :month => index) 
+  ##               end
+  ## %>
+  #
+  # alldata should be an array of variables, each one an array itself, of the form:
+  ##    [['label1',value1],['label2',value2]]
+  #
+  # options hash:
+  #*   :display_value_on_bar   if set to true, will display the value on top each bar, default behavior is not to show the value
+  #*   :colors  is an array of colors in hex format: '#EEC2D2' if you don't set them, default colors will be used
+  #*    :color_by can be set to 'dimension' or 'index' 
+  #*   :width and :height set the dimensions, wich default to 378x150
+  #
+  # url_creator_block:
+  # 
+  ##  the url_creator_block receives two parameters, index and variable, that are used to build the bars links. 
+  ##  index is the position for this bar's that in its variable array, while variable is the variable this bar represents
+
+  def multi_bar_graph(alldata=[], options={}, &url_creator)
+    graph_id = (rand*10000000000000000000).to_i.to_s #we need a unique id for each graph on the page so we can have distinct styles for each of them
+    if !options.nil? && options[:width] && options[:height]
+      width,height=options[:width].to_i,options[:height].to_i
+    else
+      width,height = 378,150
+    end
+    colors = (%w(#ce494a #efba29 #efe708 #5a7dd6 #73a25a))*10 unless colors=options[:colors]
+    floor_cutoff = 24 # Pixels beneath which values will not be drawn in graph
+    data_max = (alldata.map { |data| data.max{ |a,b| a.last <=> b.last }.last } ).max
+    dimensions=alldata.size
+    size =  alldata.map{ |data| data.size }.max
+    bar_offset = 24 #originally set to 24
+    bar_group_width=(width-bar_offset)/size #originally set to 48px
+    bar_increment = bar_group_width #originally set to 75
+    bar_width=(bar_group_width-bar_offset)/dimensions #originally set to 28px
+    bar_image_offset = bar_offset+4 #originally set to 28
+    bar_padding = 2
+
+    #p "dimensions = #{dimensions}"
+    #p "bar_group_width =#{bar_group_width}"
+    #p "bar_width = #{bar_width}"
+    #p "bar_increment = #{bar_increment}"
+
+    html = <<-"HTML"
+    <style>
+      #vertgraph-#{graph_id} {    				
+          width: #{width}px; 
+          height: #{height}px; 
+          position: relative; 
+          background-color: #eeeeee;
+          border: 4px solid #999999;
+          font-family: "Lucida Grande", Verdana, Arial;
+      }
+    
+      #vertgraph-#{graph_id} dl dd {
+        position: absolute;
+        width: #{bar_width}px;
+        height: #{height-50}px;
+        bottom: 34px;
+        padding: 0 !important;
+        margin: 0 !important;
+        background-image: url('/images/css_graphs/colorbar.jpg') no-repeat !important;
+        text-align: center;
+        font-weight: bold;
+        color: white;
+        line-height: 1.5em;
+      }
+
+      #vertgraph-#{graph_id} dl dt {
+        position: absolute;
+        width: #{bar_group_width}px;
+        height: 25px;
+        bottom: 0px;
+        padding: 0 !important;
+        margin: 0 !important;
+        text-align: center;
+        color: #444444;
+        font-size: 0.8em;
+      }
+    HTML
+
+    alldata.each_with_index do |data,dimension|
+#    p "\n drawing dimension #{dimension}"
+      data.each_with_index do |d, index|
+#        bar_left = bar_offset + (bar_increment * index) 
+        bar_group_left = bar_offset + (bar_increment * index) 
+        bar_left = bar_group_left + ((bar_width+bar_padding)*dimension)
+        #        bar_left = bar_group_left + ( 2*bar_width* (dimension-1))     
+#        p "\n bar_left #{bar_left}"
+        label_left = bar_group_left - 10
+        background_offset = ( bar_image_offset * index ) 
+        if options[:color_by]=='index'
+          color=colors[index]
+        else
+          color=colors[dimension]
+        end
+        html += <<-HTML
+          #vertgraph-#{graph_id} dl dd.a#{index.to_s}#{dimension.to_s} { left: #{bar_left}px; background-color: #{color}; background-position: -#{background_offset}px bottom !important; }
+          #vertgraph-#{graph_id} dl dt.a#{index.to_s}#{dimension.to_s} { left: #{label_left}px; background-position: -#{background_offset}px bottom !important; }
+        HTML
+      end
+    end  
+
+      html += <<-"HTML"
+        </style>
+        <div id="vertgraph-#{graph_id}">
+          <dl>
+      HTML
+    alldata.each_with_index do |data,dimension|    
+#      data_max = data.inject(0) { |memo, array| array.last > memo ? array.last : memo }
+      data.each_with_index do |d, index|
+        scaled_value = scale_graph_value(d.last, data_max, height-50)
+       if (options[:display_value_on_bar])
+         bar_text=(scaled_value < floor_cutoff ? '' : d.last).to_s  #text on top of the bar
+       else
+          bar_text=''
+       end  
+
+     if dimension==0
+        html += <<-"HTML"
+          <!-- algo -->
+          <dt class="a#{index.to_s}#{dimension.to_s}" >#{d[0].to_s}</dt>
+        HTML
+     end
+      @url = url_creator.call(index,dimension) if !url_creator.nil?
+      html += <<-"HTML"
+      <a href="#{@url}">
+        <!-- Tooltip for bar group -->
+        <dd class="a#{index.to_s}#{dimension.to_s}" style="height: #{height-50}px;background: none;" title="#{d.last}"></dd>
+        <!-- Color bar -->
+        <dd class="a#{index.to_s}#{dimension.to_s}" style="height: #{scaled_value}px;" title="#{d.last}">#{bar_text}</dd>
+      </a>
+     HTML
+      end
+    end        
+    html += <<-"HTML"
+        </dl>
+      </div>
+    HTML
+    
+    html
+  end
+  
+  # Make a horizontal graph that only shows percentages.
+  #
+  # The label will be set as the title of the bar element.
+  #
+  #  horizontal_bar_graph [["Stout", 10], ["IPA", 80], ["Pale Ale", 50], ["Milkshake", 30]]
+  # 
+  # NOTE: Updated to take an array instead of forcing you to use *array.
+  # NOTE: Does not normalize data yet...TODO
+
+  def horizontal_bar_graph(data)
+    html = <<-"HTML"
+      <style>
+      /* Basic Bar Graph */
+      .graph { 
+        position: relative; /* IE is dumb */
+        width: 200px; 
+        border: 1px solid #B1D632; 
+        padding: 2px; 
+        margin-bottom: .5em;					
+      }
+      .graph .bar { 
+        display: block;	
+        position: relative;
+        background: #B1D632; 
+        text-align: center; 
+        color: #333; 
+        height: 2em; 
+        line-height: 2em;									
+      }
+      .graph .bar span { position: absolute; left: 1em; } /* This extra markup is necessary because IE does not want to follow the rules for overflow: visible */	 
+      </style>
+    HTML
+    
+    data.each do |d|
+      html += <<-"HTML"
+        <div class="graph">
+          <strong class="bar" style="width: #{d[1]}%;" title="#{d[0].to_s.humanize}"><span>#{d[1]}%</span> </strong>
+        </div>
+      HTML
+    end
+    return html
+  end
+  
+  # Makes a multi-colored bar graph with a bar down the middle, representing the value.
+  #
+  #  complex_bar_graph [["Stout", 10], ["IPA", 80], ["Pale Ale", 50], ["Milkshake", 30]]
+  #  
+  # NOTE: Updated to take an array instead of forcing you to use *array.
+  # NOTE: Does not normalize data yet...TODO
+
+  def complex_bar_graph(data)
+    html = <<-"HTML"
+      <style>
+      /* Complex Bar Graph */
+      div#complex_bar_graph dl { 
+      	margin: 0; 
+      	padding: 0;   
+      	font-family: "Lucida Grande", Verdana, Arial;	
+      }
+      div#complex_bar_graph dt { 
+      	position: relative; /* IE is dumb */
+      	clear: both;
+      	display: block; 
+      	float: left; 
+      	width: 104px; 
+      	height: 20px; 
+      	line-height: 20px;
+      	margin-right: 17px;              
+      	font-size: .75em; 
+      	text-align: right; 
+      }
+      div#complex_bar_graph dd { 
+      	position: relative; /* IE is dumb */
+      	display: block;   
+      	float: left;	 
+      	width: 197px; 
+      	height: 20px; 
+      	margin: 0 0 15px; 
+      	background: url("/images/css_graphs/g_colorbar.jpg"); 
+      }
+      * html div#complex_bar_graph dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */
+  
+      div#complex_bar_graph dd div { 
+      	position: relative; 
+      	background: url("/images/css_graphs/g_colorbar2.jpg"); 
+      	height: 20px; 
+      	width: 75%; 
+      	text-align:right; 
+      }
+      div#complex_bar_graph dd div strong { 
+      	position: absolute; 
+      	right: -5px; 
+      	top: -2px; 
+      	display: block; 
+      	background: url("/images/css_graphs/g_marker.gif"); 
+      	height: 24px; 
+      	width: 9px; 
+      	text-align: left;
+      	text-indent: -9999px; 
+      	overflow: hidden;
+      }
+      </style>
+      <div id="complex_bar_graph">  
+      <dl>
+    HTML
+
+    data.each do |d|
+      html += <<-"HTML"
+        <dt class="#{d[0].to_s.downcase}">#{d[0].to_s.humanize}</dt>
+        <dd class="#{d[0].to_s.downcase}" title="#{d[1]}">
+        <div style="width: #{d[1]}%;"><strong>#{d[1]}%</strong></div>
+      </dd>
+    HTML
+    end
+    
+    html += "</dl>\n</div>"
+    return html    
+  end
+  
+  ##
+  # Scale values within a +max+. The +max+ will usually be the height of the graph.
+  
+  def scale_graph_value(data_value, data_max, max)
+    ((data_value.to_f / data_max.to_f) * max).round
+  end
+  
+end

data/test/test_css_graphs.rb

@@ -0,0 +1,65 @@
+require 'rubygems'
+require 'test/unit'
+require 'fileutils'
+require 'active_support/core_ext/string/inflections'
+require File.dirname(__FILE__) + "/../lib/css_graphs"
+
+# Manually insert this so the helper runs apart from Rails.
+class String
+  include ActiveSupport::CoreExtensions::String::Inflections
+end
+
+class TestCSSGraphs < Test::Unit::TestCase
+
+  include CssGraphs
+
+  def test_bar_graph
+    output = ""
+    data_for_graph = [['January',10],['February',25],['March',45]]
+
+    output += bar_graph(data_for_graph)
+    output += bar_graph(data_for_graph)
+    output += bar_graph(data_for_graph)
+
+    write(output)
+  end
+
+  def test_multi_bar_graph
+    output = ""
+    data_for_graph = [['January',10],['February',25],['March',45]], [['January',34],['February',29],['March',80]]
+
+    output += multi_bar_graph_for_size(data_for_graph, 640, 480)
+    output += multi_bar_graph_for_size(data_for_graph, 300, 100)
+    output += multi_bar_graph_for_size(data_for_graph, 200, 600)
+
+    write(output)
+  end
+
+  def test_horizontal_bar_graph
+    output = horizontal_bar_graph [["Stout", 10], ["IPA", 80], ["Pale Ale", 50], ["Milkshake", 30]]
+    write(output)
+  end
+
+  def test_complex_bar_graph
+    output = complex_bar_graph [["Stout", 10], ["IPA", 80], ["Pale Ale", 50], ["Milkshake", 30]]
+    write(output)
+  end
+
+  private
+  
+  def write(data)
+    # Clean up calling method name and use as filename.
+    filename = caller.first.gsub(/\S+\s`/, '').gsub(/'/, '')
+    FileUtils.mkdir_p "test/output"
+    File.open(File.dirname(__FILE__) + "/output/#{filename}.html", "w") do |f|
+      f.write data
+    end
+  end
+  
+  def multi_bar_graph_for_size(data, width=640, height=480)
+    multi_bar_graph(data, { :width => width, :height => height }) do |index, variable|
+      "/report/#{index}"
+    end
+  end
+    
+end

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification 
+rubygems_version: 0.9.0
+specification_version: 1
+name: css_graphs
+version: !ruby/object:Gem::Version 
+  version: 0.1.0
+date: 2007-06-24 00:00:00 -07:00
+summary: Generates a configurable, CSS-tagged HTML calendar.
+require_paths: 
+- lib
+email: boss AT topfunky.com
+homepage: http://rubyforge.org/projects/seattlerb
+rubyforge_project: seattlerb
+description: A simple method to create an HTML calendar for a single month. Can be styled with CSS. Usable with Ruby on Rails.
+autorequire: 
+default_executable: 
+bindir: bin
+has_rdoc: true
+required_ruby_version: !ruby/object:Gem::Version::Requirement 
+  requirements: 
+  - - ">"
+    - !ruby/object:Gem::Version 
+      version: 0.0.0
+  version: 
+platform: ruby
+signing_key: 
+cert_chain: 
+post_install_message: 
+authors: 
+- Geoffrey Grosenbach
+files: 
+- History.txt
+- MIT-LICENSE
+- Manifest.txt
+- README.txt
+- Rakefile
+- about.yml
+- generators/css_graphs/css_graphs_generator.rb
+- generators/css_graphs/templates/.DS_Store
+- generators/css_graphs/templates/colorbar.jpg
+- generators/css_graphs/templates/g_colorbar.jpg
+- generators/css_graphs/templates/g_colorbar2.jpg
+- generators/css_graphs/templates/g_marker.gif
+- images/.DS_Store
+- images/colorbar.jpg
+- init.rb
+- lib/css_graphs.rb
+- test/test_css_graphs.rb
+test_files: 
+- test/test_css_graphs.rb
+rdoc_options: 
+- --main
+- README.txt
+extra_rdoc_files: 
+- History.txt
+- Manifest.txt
+- README.txt
+executables: []
+
+extensions: []
+
+requirements: []
+
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: hoe
+  version_requirement: 
+  version_requirements: !ruby/object:Gem::Version::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: 1.2.1
+    version: