svg-graph 2.1.1 → 2.2.1

data/lib/SVG/Graph/DataPoint.rb

@@ -1,6 +1,8 @@
 # Allows to customize datapoint shapes
 class DataPoint
-  OVERLAY = "OVERLAY" unless defined?(OVERLAY)
+  # magic string that defines if a shape is intented to be overlayed to a default.
+  # this allowes to have strike through of a circle etc.
+  OVERLAY = "OVERLAY"
   DEFAULT_SHAPE = lambda{|x,y,line| ["circle", {
           "cx" => x,
           "cy" => y,
@@ -9,27 +11,33 @@ class DataPoint
         }]
       } unless defined? DEFAULT_SHAPE
   CRITERIA = [] unless defined? CRITERIA
-  
+
   # matchers are class scope. Once configured, each DataPoint instance will have
   # access to the same matchers
-  # @param matchers [Array] multiple arrays of the following form:
-  #     [ regex , 
+  # @param matchers [Array] multiple arrays of the following form 2 or 3 elements:
+  #     [ regex ,
   #       lambda taking three arguments (x,y, line_number for css)
-  #         -> return value of the lambda must be an array: [svg tag name,  Hash with attributes for the svg tag, e.g. "points" and "class"]
+  #         -> return value of the lambda must be an array: [svg tag name,
+  #            Hash with attributes for the svg tag, e.g. "points" and "class",
+  #              make sure to check source code of you graph type for valid css class.],
+  #       "OVERLAY" (magic string, if specified, puts the shape on top of existing datapoint)
   #     ]
   # @example
   #   DataPoint.configure_shape_criteria(
-  #     [/.*/, lambda{|x,y,line| ['polygon', {
-  #       "points" => "#{x-1.5},#{y+2.5} #{x+1.5},#{y+2.5} #{x+1.5},#{y-2.5} #{x-1.5},#{y-2.5}",
-  #       "class" => "dataPoint#{line}"
-  #       }]
+  #     [/.*/, lambda{|x,y,line|
+  #       [ 'polygon',
+  #         {
+  #         "points" => "#{x-1.5},#{y+2.5} #{x+1.5},#{y+2.5} #{x+1.5},#{y-2.5} #{x-1.5},#{y-2.5}",
+  #         "class" => "dataPoint#{line}"
+  #         }
+  #       ]
   #     }]
   #   )
   def DataPoint.configure_shape_criteria(*matchers)
     CRITERIA.push(*matchers)
   end
-  
-  # 
+
+  #
   def DataPoint.reset_shape_criteria
     CRITERIA.clear
   end
@@ -43,7 +51,11 @@ class DataPoint
     @y = y
     @line = line
   end
-  
+
+  # Returns different shapes depending on datapoint descriptions, if shape criteria have been configured.
+  # The definded criteria are evaluated in two stages, first the ones, which are note defined as overlay.
+  # then the "OVERLAY"
+  # @param datapoint_description [String] description or label of the current datapoint
   # @return [Array<Array>] see example
   # @example Return value
   #   # two dimensional array, the splatted (*) inner array can be used as argument to REXML::add_element
@@ -53,12 +65,12 @@ class DataPoint
   #   # for each svg we insert it to the graph
   #   dp.each {|s| @graph.add_element( *s )}
   #
-  def shape(description=nil)
-    # select all criteria with size 2, and collect rendered lambdas in an array 
+  def shape(datapoint_description=nil)
+    # select all criteria with size 2, and collect rendered lambdas in an array
     shapes = CRITERIA.select {|criteria|
       criteria.size == 2
     }.collect {|regexp, proc|
-      proc.call(@x, @y, @line) if description =~ regexp
+      proc.call(@x, @y, @line) if datapoint_description =~ regexp
     }.compact
     # if above did not render anything use the defalt shape
     shapes = [DEFAULT_SHAPE.call(@x, @y, @line)] if shapes.empty?
@@ -66,7 +78,7 @@ class DataPoint
     overlays = CRITERIA.select { |criteria|
       criteria.last == OVERLAY
     }.collect { |regexp, proc|
-      proc.call(@x, @y, @line) if description =~ regexp
+      proc.call(@x, @y, @line) if datapoint_description =~ regexp
     }.compact
 
     return shapes + overlays

data/lib/SVG/Graph/Graph.rb

@@ -103,6 +103,7 @@ module SVG
       # [number_format] '%.2f'
       def initialize( config )
         @config = config
+        # array of Hash
         @data = []
         #self.top_align = self.top_font = 0
         #self.right_align = self.right_font = 0
@@ -144,22 +145,29 @@ module SVG
           :show_graph_subtitle  => false,
           :graph_subtitle        => 'Graph Sub Title',
           :key                  => true,
+          :key_width             => nil,
           :key_position          => :right, # bottom or right
 
-          :font_size            =>12,
-          :title_font_size      =>16,
-          :subtitle_font_size   =>14,
-          :x_label_font_size    =>12,
-          :y_label_font_size    =>12,
-          :x_title_font_size    =>14,
-          :y_title_font_size    =>14,
-          :key_font_size        =>10,
-
-          :no_css               =>false,
-          :add_popups           =>false,
-          :number_format        => '%.2f'
+          :font_size            => 12,
+          :title_font_size      => 16,
+          :subtitle_font_size   => 14,
+          :x_label_font_size    => 12,
+          :y_label_font_size    => 12,
+          :x_title_font_size    => 14,
+          :y_title_font_size    => 14,
+          :key_font_size        => 10,
+          :key_box_size         => 12,
+          :key_spacing          => 5,
+
+          :no_css               => false,
+          :add_popups           => false,
+          :popup_radius         => 10,
+          :number_format        => '%.2f',
+          :style_sheet          => '',
+          :inline_style_sheet   => ''
         })
         set_defaults if self.respond_to? :set_defaults
+        # override default values with user supplied values
         init_with config
       end
 
@@ -173,16 +181,38 @@ module SVG
       #     :data => data_sales_02,
       #     :title => 'Sales 2002'
       #   })
-      def add_data conf
-        @data = [] unless (defined? @data and !@data.nil?)
+      # @param conf [Hash] with the following keys:
+      #          :data [Array] mandatory
+      #          :title [String] mandatory name of data series for legend of graph
+      #          :description [Array<String>] (optional) if given, description for each datapoint (shown in popups)
+      #          :shape [Array<String>] (optional) if given, DataPoint shape is chosen based on this string instead of description
+      #          :url [Array<String>] (optional)  if given, link will be added to each datapoint
+      def add_data(conf)
+        @data ||= []
+        raise "No data provided by #{conf.inspect}" unless conf[:data].is_a?(Array)
+
+        add_data_init_or_check_optional_keys(conf, conf[:data].size)
+        @data << conf
+      end
 
-        if conf[:data] and conf[:data].kind_of? Array
-          @data << conf
-        else
-          raise "No data provided by #{conf.inspect}"
+      # Checks all optional keys of the add_data method
+      def add_data_init_or_check_optional_keys(conf, datasize)
+        conf[:description] ||= Array.new(datasize)
+        conf[:shape] ||= Array.new(datasize)
+        conf[:url] ||= Array.new(datasize)
+
+        if conf[:description].size != datasize
+          raise "Description for popups does not have same size as provided data: #{conf[:description].size} vs #{conf[:data].size/2}"
         end
-      end
 
+        if conf[:shape].size != datasize
+          raise "Shapes for points do not have same size as provided data: #{conf[:shape].size} vs #{conf[:data].size/2}"
+        end
+
+        if conf[:url].size != datasize
+          raise "URLs for points do not have same size as provided data: #{conf[:url].size} vs #{conf[:data].size/2}"
+        end
+      end
 
       # This method removes all data from the object so that you can
       # reuse it to create a new graph but with the same config options.
@@ -247,6 +277,14 @@ module SVG
         return out
       end
 
+      # Burns the graph to an SVG string and returns it with a text/html mime type to be
+      # displayed in IRuby.
+      #
+      # @return [Array] A 2-dimension array containing the SVg string and a mime-type. This is the format expected by IRuby.
+      def to_iruby
+        ["text/html", burn_svg_only]
+      end
+
 
       #   Set the height of the graph box, this is the total height
       #   of the SVG box created - not the graph it self which auto
@@ -256,13 +294,23 @@ module SVG
       #   of the SVG box created - not the graph it self which auto
       #   scales to fix the space.
       attr_accessor :width
-      #   Set the path to an external stylesheet, set to '' if
+      #   Set the path/url to an external stylesheet, set to '' if
       #   you want to revert back to using the defaut internal version.
       #
       #   To create an external stylesheet create a graph using the
       #   default internal version and copy the stylesheet section to
       #   an external file and edit from there.
       attr_accessor :style_sheet
+      #   Define as String the stylesheet contents to be inlined, set to '' to disable.
+      #   This can be used, when referring to a url via :style_sheet is not suitable.
+      #   E.g. in situations where there will be no internet access or the graph must
+      #   consist of only one file.
+      #
+      #   If not empty, the :style_sheet parameter (url) above will be ignored and is
+      #   not written to the file
+      #   see also https://github.com/erullmann/svg-graph2/commit/55eb6e983f6fcc69cc5a110d0ee6e05f906f639a
+      #   Default: ''
+      attr_accessor :inline_style_sheet
       #   (Bool) Show the value of each element of data on the graph
       attr_accessor :show_data_values
       #   By default (nil/undefined) the x-axis is at the bottom of the graph.
@@ -292,11 +340,13 @@ module SVG
       #   are long field names they will not overlap so easily.
       #   Default is false, to turn on set to true.
       attr_accessor :stagger_y_labels
-      #   This turns the X axis labels by 90 degrees.
+      #   This turns the X axis labels by 90 degrees when true or by a custom
+      #   amount when a numeric value is given.
       #   Default is false, to turn on set to true.
       attr_accessor :rotate_x_labels
-      #   This turns the Y axis labels by 90 degrees.
-      #   Default is true, to turn on set to false.
+      #   This turns the Y axis labels by 90 degrees when true or by a custom
+      #   amount when a numeric value is given.
+      #   Default is false, to turn on set to true or numeric value.
       attr_accessor :rotate_y_labels
       #   How many "steps" to use between displayed X axis labels,
       #   a step of one means display every label, a step of two results
@@ -358,6 +408,13 @@ module SVG
       #   Where the key should be positioned, defaults to
       #   :right, set to :bottom if you want to move it.
       attr_accessor :key_position
+
+      attr_accessor :key_box_size
+
+      attr_accessor :key_spacing
+
+      attr_accessor :key_width
+
       # Set the font size (in points) of the data point labels.
       # Defaults to 12.
       attr_accessor :font_size
@@ -402,24 +459,20 @@ module SVG
 
       protected
 
-      # implementation of quicksort
-      # used for Schedule and Plot
+      # implementation of a multiple array sort used for Schedule and Plot
       def sort( *arrys )
-        sort_multiple( arrys )
+        new_arrys = arrys.transpose.sort_by(&:first).transpose
+        new_arrys.each_index { |k| arrys[k].replace(new_arrys[k]) }
       end
 
       # Overwrite configuration options with supplied options.  Used
       # by subclasses.
       def init_with config
         config.each { |key, value|
-            self.send( key.to_s+"=", value ) if self.respond_to?  key
+          self.send( key.to_s+"=", value ) if self.respond_to?  key
         }
-        @popup_radius ||= 10
       end
 
-      # size of the square box in the legend which indicates the colors
-      KEY_BOX_SIZE = 12
-
       # Override this (and call super) to change the margin to the left
       # of the plot area.  Results in @border_left being set.
       #
@@ -438,12 +491,20 @@ module SVG
       # are not shown
       def max_y_label_width_px
         return 0 if !show_y_labels
-        if !rotate_y_labels
-          max_width = get_longest_label(get_y_labels).to_s.length * y_label_font_size * 0.6
-        else
-          max_width = y_label_font_size + 3
+        base_width = y_label_font_size + 3
+        if rotate_y_labels == true
+          self.rotate_y_labels = 90
+        end
+        if rotate_y_labels == false
+          self.rotate_y_labels = 0
+        end
+        # don't change rotate_y_label, if neither true nor false
+        label_width = get_longest_label(get_y_labels).to_s.length * y_label_font_size * 0.5
+        rotated_width = label_width * Math.cos( rotate_y_labels * Math::PI / 180).abs()
+        max_width = base_width + rotated_width
+        if stagger_y_labels
+          max_width += 5 + y_label_font_size
         end
-        max_width += 5 + y_label_font_size if stagger_y_labels
         return max_width
       end
 
@@ -458,8 +519,14 @@ module SVG
         if key and key_position == :right
           val = keys.max { |a,b| a.length <=> b.length }
           @border_right += val.length * key_font_size * 0.6
-          @border_right += KEY_BOX_SIZE
+          @border_right += key_box_size
           @border_right += 10    # Some padding around the box
+
+          if key_width.nil?
+            @border_right
+          else
+            @border_right = [key_width, @border_right].min
+          end
         end
         if (x_title_location == :end)
           @border_right = [@border_right, x_title.length * x_title_font_size * 0.6].max
@@ -484,37 +551,74 @@ module SVG
       end
 
       # Adds pop-up point information to a graph only if the config option is set.
-      def add_popup( x, y, label, style="" )
+      def add_popup( x, y, label, style="", url="" )
         if add_popups
           if( numeric?(label) )
             label = @number_format % label
           end
           txt_width = label.length * font_size * 0.6 + 10
           tx = (x+txt_width > @graph_width ? x-5 : x+5)
-          t = @foreground.add_element( "text", {
+          g = Element.new( "g" )
+          g.attributes["id"] = g.object_id.to_s
+          g.attributes["visibility"] = "hidden"
+
+          # First add the mask
+          t = g.add_element( "text", {
             "x" => tx.to_s,
             "y" => (y - font_size).to_s,
-            "class" => "dataPointLabel",
-            "visibility" => "hidden",
+            "class" => "dataPointPopupMask"
           })
-          t.attributes["style"] = "stroke-width: 2; fill: #000; #{style}"+
+          t.attributes["style"] = style +
             (x+txt_width > @graph_width ? "text-anchor: end;" : "text-anchor: start;")
           t.text = label.to_s
-          t.attributes["id"] = t.object_id.to_s
+
+          # Then add the text
+          t = g.add_element( "text", {
+            "x" => tx.to_s,
+            "y" => (y - font_size).to_s,
+            "class" => "dataPointPopup"
+          })
+          t.attributes["style"] = style +
+            (x+txt_width > @graph_width ? "text-anchor: end;" : "text-anchor: start;")
+          t.text = label.to_s
+
+          @foreground.add_element( g )
 
           # add a circle to catch the mouseover
-          @foreground.add_element( "circle", {
+          mouseover = Element.new( "circle" )
+          mouseover.add_attributes({
             "cx" => x.to_s,
             "cy" => y.to_s,
             "r" => "#{popup_radius}",
             "style" => "opacity: 0",
             "onmouseover" =>
-              "document.getElementById(#{t.object_id}).setAttribute('visibility', 'visible' )",
+              "document.getElementById(#{g.object_id.to_s}).style.visibility ='visible'",
             "onmouseout" =>
-              "document.getElementById(#{t.object_id}).setAttribute('visibility', 'hidden' )",
+              "document.getElementById(#{g.object_id.to_s}).style.visibility = 'hidden'",
           })
+          if !url.nil?
+            href = Element.new("a")
+            href.add_attribute("xlink:href", url)
+            href.add_element(mouseover)
+            @foreground.add_element(href)
+          else
+            @foreground.add_element(mouseover)
+          end
+        elsif !url.nil?
+          # add a circle to catch the mouseover
+          mouseover = Element.new( "circle" )
+          mouseover.add_attributes({
+            "cx" => x.to_s,
+            "cy" => y.to_s,
+            "r" => "#{popup_radius}",
+            "style" => "opacity: 0",
+          })
+          href = Element.new("a")
+          href.add_attribute("xlink:href", url)
+          href.add_element(mouseover)
+          @foreground.add_element(href)
         end # if add_popups
-      end # add_popup
+      end # def add_popup
 
       # returns the longest label from an array of labels as string
       # each object in the array must support .to_s
@@ -676,13 +780,14 @@ module SVG
           elsif x > @graph_width - textStr.length/2 * font_size
             style << "text-anchor: end;"
           end
-          # white background for better readability
-          @foreground.add_element( "text", {
+          # background for better readability
+          text = @foreground.add_element( "text", {
             "x" => x.to_s,
             "y" => y.to_s,
-            "class" => "dataPointLabel",
-            "style" => "#{style} stroke: #fff; stroke-width: 2;"
-          }).text = textStr
+            "class" => "dataPointLabelBackground",
+          })
+          text.text = textStr
+          text.attributes["style"] = style if style.length > 0
           # actual label
           text = @foreground.add_element( "text", {
             "x" => x.to_s,
@@ -734,8 +839,12 @@ module SVG
             text.attributes["x"] = x.to_s
             text.attributes["y"] = y.to_s
             if rotate_x_labels
+              degrees = 90
+              if numeric? rotate_x_labels
+                degrees = rotate_x_labels
+              end
               text.attributes["transform"] =
-                "rotate( 90 #{x} #{y-x_label_font_size} )"+
+                "rotate( #{degrees} #{x} #{y-x_label_font_size} )"+
                 " translate( 0 -#{x_label_font_size/4} )"
               text.attributes["style"] = "text-anchor: start"
             else
@@ -791,18 +900,20 @@ module SVG
       def draw_y_labels
         stagger = y_label_font_size + 5
         label_height = field_height
+        label_width = max_y_label_width_px
         count = 0
         y_offset = @graph_height + y_label_offset( label_height )
-        y_offset += font_size/1.2 unless rotate_y_labels
+        y_offset += font_size/3.0
         for label in get_y_labels
           if show_y_labels
+            # x = 0, y = 0 is top left right next to graph area
             y = y_offset - (label_height * count)
-            x = rotate_y_labels ? 0 : -3
+            x = -label_width/2.0 + y_label_font_size/2.0
 
             if stagger_y_labels and count % 2 == 1
               x -= stagger
               @graph.add_element( "path", {
-                "d" => "M#{x} #{y} h#{stagger}",
+                "d" => "M0 #{y} h#{-stagger}",
                 "class" => "staggerGuideLine"
               })
             end
@@ -817,14 +928,13 @@ module SVG
               textStr = @number_format % label
             end
             text.text = textStr
-            if rotate_y_labels
-              text.attributes["transform"] = "translate( -#{font_size} 0 ) "+
-                "rotate( 90 #{x} #{y} ) "
-              text.attributes["style"] = "text-anchor: middle"
-            else
-              text.attributes["y"] = (y - (y_label_font_size/2)).to_s
-              text.attributes["style"] = "text-anchor: end"
-            end
+            # note text-anchor is at bottom of textfield
+            text.attributes["style"] = "text-anchor: middle"
+            degrees = rotate_y_labels
+            text.attributes["transform"] = "translate( -#{font_size} 0 ) " +
+                "rotate( #{degrees} #{x} #{y} ) "
+            # text.attributes["y"] = (y - (y_label_font_size/2)).to_s
+
           end # if show_y_labels
           draw_y_guidelines( label_height, count ) if show_y_guidelines
           count += 1
@@ -929,17 +1039,17 @@ module SVG
 
           key_count = 0
           for key_name in keys
-            y_offset = (KEY_BOX_SIZE * key_count) + (key_count * 5)
+            y_offset = (key_box_size * key_count) + (key_count * key_spacing)
             group.add_element( "rect", {
               "x" => 0.to_s,
               "y" => y_offset.to_s,
-              "width" => KEY_BOX_SIZE.to_s,
-              "height" => KEY_BOX_SIZE.to_s,
+              "width" => key_box_size.to_s,
+              "height" => key_box_size.to_s,
               "class" => "key#{key_count+1}"
             })
             group.add_element( "text", {
-              "x" => (KEY_BOX_SIZE + 5).to_s,
-              "y" => (y_offset + KEY_BOX_SIZE).to_s,
+              "x" => (key_box_size + key_spacing).to_s,
+              "y" => (y_offset + key_box_size).to_s,
               "class" => "keyText"
             }).text = key_name.to_s
             key_count += 1
@@ -947,15 +1057,15 @@ module SVG
 
           case key_position
           when :right
-            x_offset = @graph_width + @border_left + 10
-            y_offset = @border_top + 20
+            x_offset = @graph_width + @border_left + (key_spacing * 2)
+            y_offset = @border_top + (key_spacing * 2)
           when :bottom
-            x_offset = @border_left + 20
-            y_offset = @border_top + @graph_height + 5
+            x_offset = @border_left + (key_spacing * 2)
+            y_offset = @border_top + @graph_height + key_spacing
             if show_x_labels
               y_offset += max_x_label_height_px
             end
-            y_offset += x_title_font_size + 5 if show_x_title
+            y_offset += x_title_font_size + key_spacing if show_x_title
           end
           group.attributes["transform"] = "translate(#{x_offset} #{y_offset})"
         end
@@ -964,30 +1074,6 @@ module SVG
 
       private
 
-      def sort_multiple( arrys, lo=0, hi=arrys[0].length-1 )
-        if lo < hi
-          p = partition(arrys,lo,hi)
-          sort_multiple(arrys, lo, p-1)
-          sort_multiple(arrys, p+1, hi)
-        end
-        arrys
-      end
-
-      def partition( arrys, lo, hi )
-        p = arrys[0][lo]
-        l = lo
-        z = lo+1
-        while z <= hi
-          if arrys[0][z] < p
-            l += 1
-            arrys.each { |arry| arry[z], arry[l] = arry[l], arry[z] }
-          end
-          z += 1
-        end
-        arrys.each { |arry| arry[lo], arry[l] = arry[l], arry[lo] }
-        l
-      end
-
       def style
         if no_css
           styles = parse_css
@@ -1045,7 +1131,8 @@ module SVG
         @doc << XMLDecl.new
         @doc << DocType.new( %q{svg PUBLIC "-//W3C//DTD SVG 1.0//EN" } +
           %q{"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"} )
-        if style_sheet && style_sheet != ''
+        if style_sheet && style_sheet != '' && inline_style_sheet.to_s.empty?
+          # if inline_style_sheet is defined, url style sheet is ignored
           @doc << Instruction.new( "xml-stylesheet",
             %Q{href="#{style_sheet}" type="text/css"} )
         end
@@ -1067,10 +1154,15 @@ module SVG
 
         defs = @root.add_element( "defs" )
         add_defs defs
-        if not(style_sheet && style_sheet != '') and !no_css
-          @root << Comment.new(" include default stylesheet if none specified ")
-          style = defs.add_element( "style", {"type"=>"text/css"} )
-          style << CData.new( get_style )
+        if !no_css
+          if inline_style_sheet && inline_style_sheet != ''
+            style = defs.add_element( "style", {"type"=>"text/css"} )
+            style << CData.new( inline_style_sheet )
+          else
+            @root << Comment.new(" include default stylesheet if none specified ")
+            style = defs.add_element( "style", {"type"=>"text/css"} )
+            style << CData.new( get_style )
+          end
         end
 
         @root << Comment.new( "SVG Background" )
@@ -1162,7 +1254,7 @@ module SVG
   font-weight: normal;
 }
 
-.dataPointLabel{
+.dataPointLabel, .dataPointLabelBackground, .dataPointPopup, .dataPointPopupMask{
   fill: #000000;
   text-anchor:middle;
   font-size: 10px;
@@ -1170,6 +1262,21 @@ module SVG
   font-weight: normal;
 }
 
+.dataPointLabelBackground{
+  stroke: #ffffff;
+  stroke-width: 2;
+}
+
+.dataPointPopupMask{
+  stroke: white;
+  stroke-width: 7;
+}
+
+.dataPointPopup{
+  fill: black;
+  stroke-width: 2;
+}
+
 .staggerGuideLine{
   fill: none;
   stroke: #000000;