svg-graph 2.1.3 → 2.2.0.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: e90898ce4dcd05963231c3079d62310773f6d5fd
-  data.tar.gz: 8a3008024055118d688581ff05b09e572d78e35b
+SHA256:
+  metadata.gz: ffe9d9ef41e6f8e53cc9acc30eea176b5c08df460fecd4809e5a974930b07316
+  data.tar.gz: c7a4de59354a36eb79da7c3b337859425b348a17ba11254a155a8cc4f761d41f
 SHA512:
-  metadata.gz: c8b0aa6aafcbf93f64b3410d28d9a8f22b38ecaac4953cdb0d0e577d090f3f6a5772f7340cec6a3e259f43b4318e4ce35cc4bed35f5ca9776501b95a1efe7a5b
-  data.tar.gz: 1f556e4a745c961400275e1cb5dbafaa5ac22ef9a23caed138bc12c338c473897c46bb9e2af20396928196b63a87d061d7f953ccff161b8f50725d37340bf6e8
+  metadata.gz: 742d05482c8cdecf6359ca8aac09e0c1e307c9e063934b3b029908b4ceac87477ea5f3089b44ddebec41c58c5d56b22734246d741a78fb697eee8bc54ffba46d
+  data.tar.gz: '078f9a897f0fca0e88b3483e84aba191fb8bfa3eb46bd6505565f0de037d08a12ecb86770270e53ba7e607c0018291b22f4b668af9ec0549d562775e430d6b96'

data/History.txt

@@ -1,10 +1,19 @@
 TODO / Backlog
-* add unit tests for all types of graphs
 * refactor various hardcoded constant pixel offsets in Graph class to use named constants or variables
-* add support for c3js / d3js based graphs, see http://c3js.org/
+* Fix bug in Plot where min/max_x/y_value are not respected, TODO
 
-=== 2.2.0 / todo
 
+=== 2.2.0.beta / 2019-05-07
+* Fix typo in Plot's `scale_y_integers` [thanks ashleydavies, PR #9]
+* Fix bug in Plot which enabled too-short axis [thanks ashleydavies, PR #10]
+* Fix issue where horizontal bar graphs were not lined up properly [thanks erullmann]
+* removed some outdated documentation and uneeded files
+* add support for c3js / d3js based graphs `SVG::Graph::C3js`, see http://c3js.org/
+* add *very* basic unit tests for all types of graphs
+* add :show_percent for Bar graphs [thanks  Cameron2920]
+* add :inline_style_sheet  parameter for all graphs to allow inline css instead of specifying external stylesheets via url [thanks erullmann]
+* add parameters to control the key  :key_box_size, :key_spacing, :key_width  [thanks erullmann]
+* add support for X and Y label rotation to be different than 90 degree [thanks frenkel, PR #12]
 
 === 2.1.3 / 2017-12-27
 * fixes float comparison and color for pie chart [thanks tiwi, pull request #7]

data/{README.markdown → README.md}

@@ -3,7 +3,7 @@ SVG::Graph
 
 Description
 -----------
-This is an effort to revive the [SVG::Graph library](http://www.germane-software.com/software/SVG/SVG::Graph/) by Sean Russell. I'd also like to thank Claudio Bustos for giving me permissions to continue publishing the gem under it's original name: [svg-graph](https://rubygems.org/gems/svg-graph)
+This repo is the continuation of the original [SVG::Graph library](http://www.germane-software.com/software/SVG/SVG::Graph/) by Sean Russell. I'd like to thank Claudio Bustos for giving me permissions to continue publishing the gem under it's original name: [svg-graph](https://rubygems.org/gems/svg-graph)
 
 [Changelog](../master/History.txt)
 
@@ -37,7 +37,7 @@ require 'SVG/Graph/Bar'
 
 x_axis = ['1-10', '10-30', '30-50', '50-70', 'older']
 
-options = {  
+options = {
   :width             => 640,
   :height            => 300,
   :stack             => :side,  # the stack option is valid for Bar graphs only
@@ -66,7 +66,7 @@ g.add_data( {
     :title => "Male"
   })
 
-# graph.burn            # this returns a full valid xml document containing the graph  
+# graph.burn            # this returns a full valid xml document containing the graph
 # graph.burn_svg_only   # this only returns the <svg>...</svg> node
 File.open('bar.svg', 'w') {|f| f.write(g.burn_svg_only)}
 ```
@@ -100,6 +100,14 @@ File.open('bar.svg', 'w') {|f| f.write(g.burn_svg_only)}
 
 ![example timeseries graph](https://cdn.rawgit.com/lumean/svg-graph2/master/examples/timeseries.svg)
 
+### C3js
+
+Source: [C3js.rb](../master/examples/c3js.rb)
+
+[Link to Preview](https://cdn.rawgit.com/lumean/svg-graph2/master/examples/c3js.html)
+
+<iframe src="https://cdn.rawgit.com/lumean/svg-graph2/master/examples/c3js.html" width="600px"> </iframe>
+
 Also have a look at the original [SVG::Graph web page](http://www.germane-software.com/software/SVG/SVG::Graph/), but note that this repository has already added some additional functionality, not available with the original.
 
 Build

data/lib/SVG/Graph/Bar.rb

@@ -110,6 +110,10 @@ module SVG
         @config[:fields].each_index { |i|
           dataset_count = 0
           for dataset in @data
+            total = 0
+            dataset[:data].each {|x|
+              total += x
+            }
 
             # cases (assume 0 = +ve):
             #   value  min  length
@@ -133,10 +137,13 @@ module SVG
               "height" => length.to_s,
               "class" => "fill#{dataset_count+1}"
             })
-
-            make_datapoint_text(left + bar_width/2.0, top - font_size/2, dataset[:data][i])
+            value_string = ""
+            value_string += (@number_format % dataset[:data][i]) if show_actual_values
+            percent = 100.0 * dataset[:data][i] / total
+            value_string += " (" + percent.round.to_s + "%)" if show_percent
+            make_datapoint_text(left + bar_width/2.0, top - font_size/2, value_string)
             # number format shall not apply to popup (use .to_s conversion)
-            add_popup(left + bar_width/2.0, top , dataset[:data][i].to_s)
+            add_popup(left + bar_width/2.0, top , value_string)
             dataset_count += 1
           end
           field_count += 1

data/lib/SVG/Graph/BarBase.rb

@@ -28,7 +28,7 @@ module SVG
       # [bar_gap] true
       # [stack] :overlap
       def set_defaults
-        init_with( :bar_gap => true, :stack => :overlap )
+        init_with( :bar_gap => true, :stack => :overlap, :show_percent => false, :show_actual_values => true)
       end
 
       #   Whether to have a gap between the bars or not, default
@@ -38,22 +38,26 @@ module SVG
       #   transparent colors, :top stacks bars on top of one another,
       #   :side stacks the bars side-by-side. Defaults to :overlap.
       attr_accessor :stack
+      # If true, display the percentage value of each bar. Default: false
+      attr_accessor :show_percent
+      # If true, display the actual field values in the data labels. Default: true
+      attr_accessor :show_actual_values
       protected
-      
+
       # space in px between x-labels, we override the Graph version because
       # we need the extra space (i.e. don't subtract 1 from get_x_labels.length)
       def field_width
-        # don't use -1 otherwise bar is out of bounds        
+        # don't use -1 otherwise bar is out of bounds
         @graph_width.to_f / ( get_x_labels.length )
       end
-      
+
       def max_value
         @data.collect{|x| x[:data].max}.max
       end
 
       def min_value
         min = 0
-        if min_scale_value.nil? 
+        if min_scale_value.nil?
           min = @data.collect{|x| x[:data].min}.min
           # by default bar should always start from zero unless there are negative values
           min = min > 0 ? 0 : min
@@ -70,73 +74,73 @@ module SVG
 	fill: #ff0000;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 0.5px;	
+	stroke-width: 0.5px;
 }
 .key2,.fill2{
 	fill: #0000ff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key3,.fill3{
 	fill: #00ff00;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key4,.fill4{
 	fill: #ffcc00;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key5,.fill5{
 	fill: #00ccff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key6,.fill6{
 	fill: #ff00ff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key7,.fill7{
 	fill: #00ffff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key8,.fill8{
 	fill: #ffff00;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key9,.fill9{
 	fill: #cc6666;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key10,.fill10{
 	fill: #663399;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key11,.fill11{
 	fill: #339900;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key12,.fill12{
 	fill: #9966FF;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 EOL
       end

data/lib/SVG/Graph/BarHorizontal.rb

@@ -110,14 +110,18 @@ module SVG
         bar_height = fieldheight - bargap
         bar_height /= @data.length if stack == :side
         y_mod = (bar_height / 2) + (font_size / 2)
-
         field_count = 1
+
         @config[:fields].each_index { |i|
           dataset_count = 0
           for dataset in @data
+            total = 0
+            dataset[:data].each {|x|
+              total += x
+            }
             value = dataset[:data][i]
 
-            top = @graph_height - (fieldheight * field_count) + bargap
+            top = @graph_height - (fieldheight * field_count) + (bargap/2)
             top += (bar_height * dataset_count) if stack == :side
             # cases (assume 0 = +ve):
             #   value  min  length          left
@@ -134,10 +138,13 @@ module SVG
               "height" => bar_height.to_s,
               "class" => "fill#{dataset_count+1}"
             })
-
-            make_datapoint_text(left+length+5, top+y_mod, dataset[:data][i], "text-anchor: start; ")
+            value_string = ""
+            value_string += (@number_format % dataset[:data][i]) if show_actual_values
+            percent = 100.0 * dataset[:data][i] / total
+            value_string += " (" + percent.round.to_s + "%)" if show_percent
+            make_datapoint_text(left+length+5, top+y_mod, value_string, "text-anchor: start; ")
             # number format shall not apply to popup (use .to_s conversion)
-            add_popup(left+length, top+y_mod , dataset[:data][i].to_s)
+            add_popup(left+length, top+y_mod , value_string)
             dataset_count += 1
           end
           field_count += 1

data/lib/SVG/Graph/C3js.rb

@@ -0,0 +1,274 @@
+require 'rexml/document'
+require 'json'
+
+module SVG
+  module Graph
+
+    # This class provides a lightweight generator for html code indluding c3js based
+    # graphs specified as javascript.
+    class C3js
+
+      # By default, the generated html code links the javascript and css dependencies
+      # to the d3 and c3 libraries in the <head> element. The latest versions of d3 and c3 available
+      # at the time of gem release are used through cdnjs.
+      # Custom versions of d3 and c3 can easily be used by specifying the corresponding keys
+      # in the optional Hash argument.
+      #
+      # If the dependencies are http(s) urls a simple href / src link is inserted in the
+      # html header.
+      # If you want to create a fully offline capable html file, you can do this by
+      # downloading the (minified) versions of d3.js, c3.css, c3.js to disk and then
+      # point to the files instead of http links. This will then inline the complete
+      # script and css payload directly into the generated html page.
+      #
+      #
+      # @option opts [String] "inline_dependencies" if true will inline the script and css
+      #                       parts of d3 and c3 directly into html, otherwise they are referred
+      #                       as external dependencies. default: false
+      # @option opts [String] "d3_js"  url or path to local files. default: d3.js url via cdnjs
+      # @option opts [String] "c3_css" url or path to local files. default: c3.css url via cdnjs
+      # @option opts [String] "c3_js"  url or path to local files. default: c3.js url via cdnjs
+      # @example create a simple graph
+      #   my_graph = SVG::Graph::C3js.new("my_funny_chart_var")
+      # @example create a graph with custom version of C3 and D3
+      #   # use external dependencies
+      #   opts = {
+      #     "d3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js",
+      #     "c3_css" => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css",
+      #     "c3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"
+      #   }
+      #   # or inline dependencies into generated html
+      #   opts = {
+      #     "inline_dependencies" => true,
+      #     "d3_js"  => "/path/to/local/copy/of/d3.min.js",
+      #     "c3_css" => "/path/to/local/copy/of/c3.min.css",
+      #     "c3_js"  => "/path/to/local/copy/of/c3.min.js"
+      #   }
+      #   my_graph = SVG::Graph::C3js.new("my_funny_chart_var", opts)
+      def initialize(opts = {})
+        default_opts = {
+          "inline_dependencies" => false,
+          "d3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js",
+          "c3_css" => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.css",
+          "c3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.js"
+        }
+        @opts = default_opts.merge(opts)
+        if @opts["inline_dependencies"]
+          # we replace the values in the opts Hash by the referred file contents
+          ["d3_js", "c3_css", "c3_js"].each do |key|
+            if !File.file?(@opts[key])
+              raise "opts[\"#{key}\"]: No such file - #{File.expand_path(@opts[key])}"
+            end
+            @opts[key] = File.read(@opts[key])
+          end # ["d3_js", "c3_css", "c3_js"].each
+        end # if @opts["inline_dependencies"]
+        start_document()
+      end # def initialize
+
+      # Adds a javascript/json C3js chart definition into the div tag
+      # @param javascript [String, Hash] see example
+      # @param js_chart_variable_name [String] only needed if the `javascript` parameter is a Hash.
+      #    unique variable name representing the chart in javascript scope.
+      #    Note this is a global javascript "var" so make sure to avoid name clashes
+      #    with other javascript us might use on the same page.
+      #
+      # @raise
+      # @example
+      #   # see http://c3js.org/examples.html
+      #   # since ruby 2.3 you can use string symbol keys:
+      #   chart_spec = {
+      #     # bindto is mandatory
+      #     "bindto": "#this_is_my_awesom_graph",
+      #     "data": {
+      #       "columns": [
+      #           ['data1', 30, 200, 100, 400, 150, 250],
+      #           ['data2', 50, 20, 10, 40, 15, 25]
+      #       ]
+      #   }
+      #   # otherwise simply write plain javascript into a heredoc string:
+      #   # make sure to include the  var <chartname> = c3.generate() if using heredoc
+      #   chart_spec_string =<<-HEREDOC
+      #   var mychart1 = c3.generate({
+      #     // bindto is mandatory
+      #     "bindto": "#this_is_my_awesom_graph",
+      #     "data": {
+      #       "columns": [
+      #           ['data1', 30, 200, 100, 400, 150, 250],
+      #           ['data2', 50, 20, 10, 40, 15, 25]
+      #       ]
+      #   });
+      #   HEREDOC
+      #   graph.add_chart_spec(chart_spec, "my_chart1")
+      #   # or
+      #   graph.add_chart_spec(chart_spec_string)
+      def add_chart_spec(javascript, js_chart_variable_name = "")
+        if javascript.kind_of?(Hash)
+          if js_chart_variable_name.to_s.empty? || js_chart_variable_name.to_s.match(/\s/)
+            raise "js_chart_variable_name ('#{js_chart_variable_name.to_s}') cannot be empty or contain spaces, " +
+                  "a valid javascript variable name is needed."
+          end
+          chart_spec = JSON(javascript)
+          inline_script = "var #{js_chart_variable_name} = c3.generate(#{chart_spec});"
+        elsif javascript.kind_of?(String)
+          inline_script = javascript
+          if !inline_script.match(/c3\.generate/)
+            raise "var <chartname> = c3.generate({...}) statement is missing in javascript string"
+          end
+        else
+          raise "Unsupported argument type: #{javascript.class}"
+        end
+        # (.+?)" means non-greedy match up to next double quote
+        if m = inline_script.match(/"bindto":\s*"#(.+?)"/)
+          @bindto = m[1]
+        else
+          raise "Missing chart specification is missing the mandatory \"bindto\" key/value pair."
+        end
+        add_div_element_for_graph()
+        add_javascript() {inline_script}
+      end # def add_chart_spec
+
+      # Appends a <script> element to the <div> element, this can be used to add additional animations
+      # but any script can also directly be part of the js_chart_specification in the #add_chart_spec
+      # method when you use a HEREDOC string as input.
+      # @param attrs [Hash] attributes for the <script> element. The following attribute
+      #   is added by default:  type="text/javascript"
+      # @yieldreturn [String] the actual javascript code to be added to the <script> element
+      # @return [REXML::Element] the Element which was just added
+      def add_javascript(attrs={}, &block)
+        default_attrs = {"type" => "text/javascript"}
+        attrs = default_attrs.merge(attrs)
+        temp = REXML::Element.new("script")
+        temp.add_attributes(attrs)
+        @svg.add_element(temp)
+        raise "Block argument is mandatory" unless block_given?
+        script_content = block.call()
+        cdata(script_content, temp)
+      end # def add_javascript
+
+
+      # @return [String] the complete html file
+      def burn
+        f = REXML::Formatters::Pretty.new(0)
+        out = ''
+        f.write(@doc, out)
+        out
+      end # def burn
+
+      # Burns the graph but returns only the <div> node as String without the
+      # Doctype and XML / HTML Declaration. This allows easy integration into
+      # existing xml/html documents. The Javascript to create the C3js graph
+      # is inlined into the div tag.
+      #
+      # You have to take care to refer the proper C3 and D3 dependencies in your
+      # html page.
+      #
+      # @return [String] the div element into which the graph will be rendered
+      #    by C3.js
+      def burn_svg_only
+        # initialize all instance variables by burning the graph
+        burn
+        f = REXML::Formatters::Pretty.new(0)
+        f.compact = true
+        out = ''
+        f.write(@svg, out)
+        return out
+      end # def burn_svg_only
+
+      private
+
+      # Appends a <style> element to the <div> element, this can be used to add additional animations
+      # but any script can also directly be part of the js_chart_specification in the #add_chart_spec
+      # method when you use a HEREDOC string as input.
+      # @yieldreturn [String] the actual javascript code to be added to the <script> element
+      # @return [REXML::Element] the Element which was just added
+      def add_css_to_head(&block)
+        raise "Block argument is mandatory" unless block_given?
+        css_content_or_url = block.call()
+        if @opts["inline_dependencies"]
+          # for inline css use "style"
+          temp = REXML::Element.new("style")
+          attrs = {
+            "type" => "text/css"
+          }
+          cdata(css_content_or_url, temp)
+        else
+          # for external css use "link"
+          temp = REXML::Element.new("link")
+          attrs = {
+            "href" => @opts["c3_css"],
+            "rel" => "stylesheet"
+          }
+        end
+        temp.add_attributes(attrs)
+        @head.add_element(temp)
+      end # def add_css_to_head
+
+      # Appends a <script> element to the <head> element, this can be used to add
+      # the dependencies/libraries.
+      # @yieldreturn [String] the actual javascript code to be added to the <script> element
+      # @return [REXML::Element] the Element which was just added
+      def add_js_to_head(&block)
+        raise "Block argument is mandatory" unless block_given?
+        script_content_or_url = block.call()
+        attrs = {"type" => "text/javascript"}
+        temp = REXML::Element.new("script")
+        if @opts["inline_dependencies"]
+          cdata(script_content_or_url, temp)
+        else
+          attrs["src"] = script_content_or_url
+          # note: self-closing xml script tags are not allowed in html. Only for xhtml this is ok.
+          # Thus add a space textnode to enforce closing tags.
+          temp.add_text(" ")
+        end
+        temp.add_attributes(attrs)
+        @head.add_element(temp)
+      end # def add_js_to_head
+
+      def start_document
+        # Base document
+        @doc = REXML::Document.new
+        @doc << REXML::XMLDecl.new("1.0", "UTF-8")
+        @doc << REXML::DocType.new("html")
+        # attribute xmlns is needed, otherwise the browser will only display raw xml
+        # instead of rendering the page
+        @html = @doc.add_element("html", {"xmlns" => 'http://www.w3.org/1999/xhtml'})
+        @html << REXML::Comment.new( " "+"\\"*66 )
+        @html << REXML::Comment.new( " Created with SVG::Graph - https://github.com/lumean/svg-graph2" )
+        @head = @html.add_element("head")
+        @body = @html.add_element("body")
+        @head.add_element("meta", {"charset" => "utf-8"})
+        add_js_to_head() {@opts["d3_js"]}
+        add_css_to_head() {@opts["c3_css"]}
+        add_js_to_head() {@opts["c3_js"]}
+      end # def start_svg
+
+      # @param attrs [Hash] html attributes for the <div> tag to which svg graph
+      #                     is bound to by C3js. The "id" attribute
+      #                     is filled automatically by this method. default: an empty hash {}
+      def add_div_element_for_graph(attrs={})
+        if @bindto.to_s.empty?
+          raise "#add_chart_spec needs to be called before the svg can be added"
+        end
+        attrs["id"] = @bindto
+        @svg = @body.add_element("div", attrs)
+      end
+
+      # Surrounds CData tag with c-style comments to remain compatible with normal html.
+      # This can be used to inline arbitrary javascript code and is compatible with many browsers.
+      # Example /*<![CDATA[*/\n ...content ... \n/*]]>*/
+      # @param str [String] the string to be enclosed in cdata
+      # @param parent_element [REXML::Element] the element to which cdata should be added
+      # @return [REXML::Element] parent_element
+      def cdata(str, parent_element)
+        # somehow there is a problem with CDATA, any text added after will automatically go into the CDATA
+        # so we have do add a dummy node after the CDATA and then add the text.
+        parent_element.add_text("/*")
+        parent_element.add(REXML::CData.new("*/\n"+str+"\n/*"))
+        parent_element.add(REXML::Comment.new("dummy comment to make c-style comments for cdata work"))
+        parent_element.add_text("*/")
+      end # def cdata
+
+    end # class C3js
+
+  end # module Graph
+end # module SVG

data/lib/SVG/Graph/Graph.rb

@@ -144,22 +144,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
 
@@ -256,13 +263,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,10 +309,12 @@ 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.
+      #   This turns the Y axis labels by 90 degrees when true or by a custom
+      #   amount when a numeric value is given.
       #   Default is true, to turn on set to false.
       attr_accessor :rotate_y_labels
       #   How many "steps" to use between displayed X axis labels,
@@ -358,6 +377,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
@@ -414,12 +440,8 @@ module SVG
         config.each { |key, value|
             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.
       #
@@ -458,8 +480,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
@@ -734,8 +762,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
@@ -818,8 +850,12 @@ module SVG
             end
             text.text = textStr
             if rotate_y_labels
+              degrees = 90
+              if numeric? rotate_y_labels
+                degrees = rotate_y_labels
+              end
               text.attributes["transform"] = "translate( -#{font_size} 0 ) "+
-                "rotate( 90 #{x} #{y} ) "
+                "rotate( #{degrees} #{x} #{y} ) "
               text.attributes["style"] = "text-anchor: middle"
             else
               text.attributes["y"] = (y - (y_label_font_size/2)).to_s
@@ -929,17 +965,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 +983,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
@@ -1045,7 +1081,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 +1104,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" )

data/lib/SVG/Graph/Plot.rb

@@ -4,48 +4,48 @@ require_relative 'DataPoint'
 module SVG
   module Graph
     # === For creating SVG plots of scalar data
-    # 
+    #
     # = Synopsis
-    # 
+    #
     #   require 'SVG/Graph/Plot'
-    # 
+    #
     #   # Data sets are x,y pairs
     #   # Note that multiple data sets can differ in length, and that the
     #   # data in the datasets needn't be in order; they will be ordered
     #   # by the plot along the X-axis.
     #   projection = [
     #     6, 11,    0, 5,   18, 7,   1, 11,   13, 9,   1, 2,   19, 0,   3, 13,
-    #     7, 9 
+    #     7, 9
     #   ]
     #   actual = [
-    #     0, 18,    8, 15,    9, 4,   18, 14,   10, 2,   11, 6,  14, 12,   
+    #     0, 18,    8, 15,    9, 4,   18, 14,   10, 2,   11, 6,  14, 12,
     #     15, 6,   4, 17,   2, 12
     #   ]
-    #   
+    #
     #   graph = SVG::Graph::Plot.new({
     #   	:height => 500,
     #    	:width => 300,
     #     :key => true,
     #     :scale_x_integers => true,
-    #     :scale_y_integerrs => true,
+    #     :scale_y_integers => true,
     #   })
-    #   
+    #
     #   graph.add_data({
     #   	:data => projection
     # 	  :title => 'Projected',
     #   })
-    # 
+    #
     #   graph.add_data({
     #   	:data => actual,
     # 	  :title => 'Actual',
     #   })
-    #   
+    #
     #   print graph.burn()
-    # 
+    #
     # = Description
-    # 
+    #
     # Produces a graph of scalar data.
-    # 
+    #
     # This object aims to allow you to easily create high quality
     # SVG[http://www.w3c.org/tr/svg] scalar plots. You can either use the
     # default style sheet or supply your own. Either way there are many options
@@ -54,11 +54,11 @@ module SVG
     # subtitle etc.
     #
     # = Examples
-    # 
+    #
     # http://www.germane-software/repositories/public/SVG/test/plot.rb
-    # 
+    #
     # = Notes
-    # 
+    #
     # The default stylesheet handles upto 10 data sets, if you
     # use more you must create your own stylesheet and add the
     # additional settings for the extra data sets. You will know
@@ -72,9 +72,9 @@ module SVG
     # Additional possible notation
     #   [ [1,2], 5,6] # A data set with 2 points: (1,2) and (5,6), mixed notation
     #   [ [1,2], [5,6]] # A data set with 2 points: (1,2) and (5,6), nested array
-    # 
+    #
     # = See also
-    # 
+    #
     # * SVG::Graph::Graph
     # * SVG::Graph::BarHorizontal
     # * SVG::Graph::Bar
@@ -105,7 +105,7 @@ module SVG
           :show_lines        => true,
           :round_popups      => true,
           :scale_x_integers  => false,
-          :scale_y_integerrs => false,
+          :scale_y_integers  => false,
          )
       end
 
@@ -124,20 +124,20 @@ module SVG
       # would cause the graph to attempt to generate labels stepped by 0.5; EG:
       # 0, 0.5, 1, 1.5, 2, ...
       # default is automatic such that there are 10 labels
-      attr_accessor :scale_y_divisions 
+      attr_accessor :scale_y_divisions
       # Make the X axis labels integers, default: false
-      attr_accessor :scale_x_integers 
+      attr_accessor :scale_x_integers
       # Make the Y axis labels integers, default: false
-      attr_accessor :scale_y_integers 
+      attr_accessor :scale_y_integers
       # Fill the area under the line, default: false
-      attr_accessor :area_fill 
+      attr_accessor :area_fill
       # Show a small circle on the graph where the line
       # goes from one point to the next. default: true
       attr_accessor :show_data_points
       # Set the minimum value of the X axis, if nil the minimum from data is chosen, default: nil
-      attr_accessor :min_x_value 
+      attr_accessor :min_x_value
       # Set the maximum value of the X axis, if nil the maximum from data is chosen, default: nil
-      attr_accessor :max_x_value 
+      attr_accessor :max_x_value
       # Set the minimum value of the Y axis, if nil the minimum from data is chosen, default: nil
       attr_accessor :min_y_value
       # Set the maximum value of the Y axis, if nil the maximum from data is chosen, default: nil
@@ -155,15 +155,15 @@ module SVG
       #   data_set2 = [[1,2], 5,6]
       # or
       #   data_set2 = [[1,2], [5,6]]
-      #   
+      #
       #   graph.add_data({
       #     :data => data_set1,
       #     :title => 'single point'
-      #   })   
+      #   })
       #   graph.add_data({
       #     :data => data_set2,
       #     :title => 'two points'
-      #   })         
+      #   })
       def add_data(conf)
 	      @data ||= []
         raise "No data provided by #{conf.inspect}" unless conf[:data] and
@@ -174,10 +174,10 @@ module SVG
         raise "Data supplied must be x,y pairs!  "+
           "The data provided contained an odd set of "+
           "data points" unless conf[:data].length % 2 == 0
-          
+
         # remove nil values
         conf[:data] = conf[:data].compact
-          
+
         return if conf[:data].length == 0
 
         conf[:description] ||= Array.new(conf[:data].size/2)
@@ -248,7 +248,7 @@ module SVG
 
         scale_division = scale_x_divisions || (scale_range / 10.0)
         @x_offset = 0
-        
+
         if scale_x_integers
           scale_division = scale_division < 1 ? 1 : scale_division.round
           @x_offset = min_value.to_f - min_value.floor
@@ -261,7 +261,7 @@ module SVG
       def get_x_values
         min_value, max_value, @x_scale_division = x_label_range
         rv = []
-        min_value.step( max_value, @x_scale_division ) {|v| rv << v}
+        min_value.step( max_value + @x_scale_division , @x_scale_division ) {|v| rv << v}
         return rv
       end
       alias :get_x_labels :get_x_values
@@ -270,7 +270,7 @@ module SVG
         # exclude values which are outside max_x_range
         values = get_x_values
         @graph_width.to_f / (values.length - 1 ) # -1 is to use entire x-axis
-                                                 # otherwise there is always 1 division unused 
+                                                 # otherwise there is always 1 division unused
       end
 
 
@@ -300,7 +300,7 @@ module SVG
 
         scale_division = scale_y_divisions || (scale_range / 10.0)
         @y_offset = 0
-        
+
         if scale_y_integers
           scale_division = scale_division < 1 ? 1 : scale_division.round
           @y_offset = (min_value.to_f - min_value.floor).to_f
@@ -318,7 +318,7 @@ module SVG
           end
         end
         rv = []
-        min_value.step( max_value, @y_scale_division ) {|v| rv << v}
+        min_value.step( max_value + @y_scale_division, @y_scale_division ) {|v| rv << v}
         rv << rv[0] + 1 if rv.length == 1
         return rv
       end
@@ -335,19 +335,19 @@ module SVG
         end
         @graph_height.to_f / values.length
       end
-      
+
       def calc_coords(x, y)
         coords = {:x => 0, :y => 0}
         # scale the coordinates, use float division / multiplication
         # otherwise the point will be place inaccurate
-        coords[:x] = (x + @x_offset)/@x_scale_division.to_f * field_width 
+        coords[:x] = (x + @x_offset)/@x_scale_division.to_f * field_width
         coords[:y] = @graph_height - (y + @y_offset)/@y_scale_division.to_f * field_height
         return coords
       end
 
       def draw_data
         line = 1
-        
+
         x_min = min_x_range
         x_max = max_x_range
         y_min = min_y_range
@@ -395,7 +395,7 @@ module SVG
           line += 1
         end
       end
-      
+
       # returns the formatted string which is added as popup information
       def format x, y, desc
         info = []
@@ -404,69 +404,69 @@ module SVG
         info << desc
         "(#{info.compact.join(', ')})"
       end
-      
+
       def get_css
         return <<EOL
 /* default line styles */
 .line1{
 	fill: none;
 	stroke: #ff0000;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line2{
 	fill: none;
 	stroke: #0000ff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line3{
 	fill: none;
 	stroke: #00ff00;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line4{
 	fill: none;
 	stroke: #ffcc00;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line5{
 	fill: none;
 	stroke: #00ccff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line6{
 	fill: none;
 	stroke: #ff00ff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line7{
 	fill: none;
 	stroke: #00ffff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line8{
 	fill: none;
 	stroke: #ffff00;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line9{
 	fill: none;
-	stroke: #ccc6666;
-	stroke-width: 1px;	
+	stroke: #cc6666;
+	stroke-width: 1px;
 }
 .line10{
 	fill: none;
 	stroke: #663399;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line11{
 	fill: none;
 	stroke: #339900;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line12{
 	fill: none;
 	stroke: #9966FF;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 /* default fill styles */
 .fill1{
@@ -533,62 +533,62 @@ module SVG
 .key1,.dataPoint1{
 	fill: #ff0000;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key2,.dataPoint2{
 	fill: #0000ff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key3,.dataPoint3{
 	fill: #00ff00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key4,.dataPoint4{
 	fill: #ffcc00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key5,.dataPoint5{
 	fill: #00ccff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key6,.dataPoint6{
 	fill: #ff00ff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key7,.dataPoint7{
 	fill: #00ffff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key8,.dataPoint8{
 	fill: #ffff00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key9,.dataPoint9{
 	fill: #cc6666;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key10,.dataPoint10{
 	fill: #663399;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key11,.dataPoint11{
 	fill: #339900;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key12,.dataPoint12{
 	fill: #9966FF;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 EOL
       end

data/lib/svggraph.rb

@@ -1,11 +1,13 @@
 module SVG
   module Graph
-    VERSION = '2.1.3'
+    VERSION = '2.2.0.beta'
+
   end
 end
+require_relative 'SVG/Graph/C3js'
+require_relative 'SVG/Graph/Graph'
 require_relative 'SVG/Graph/DataPoint'
 require_relative 'SVG/Graph/BarBase'
-require_relative 'SVG/Graph/Graph'
 require_relative 'SVG/Graph/Bar'
 require_relative 'SVG/Graph/BarHorizontal'
 require_relative 'SVG/Graph/ErrBar'

data/test/test_svg_graph.rb

@@ -12,7 +12,7 @@ class TestSvgGraph < Minitest::Test
   def test_bar_line_and_pie
     fields = %w(Jan Feb Mar);
     data_sales_02 = [12, 45, 21]
-    [SVG::Graph::Bar, SVG::Graph::BarHorizontal, SVG::Graph::Line, SVG::Graph::Pie].each do 
+    [SVG::Graph::Bar, SVG::Graph::BarHorizontal, SVG::Graph::Line, SVG::Graph::Pie].each do
       |klass|
       graph = klass.new(
         :height => 500,
@@ -27,14 +27,14 @@ class TestSvgGraph < Minitest::Test
       assert(out=~/Created with SVG::Graph/)
     end
   end # test_bar_line_and_pie
-  
+
   def test_pie_100_percent
     fields = %w(Internet TV Newspaper Magazine Radio)
     #data1 = [2, 3, 1, 3, 1]
     #data2 = [0, 2, 1, 5, 4]
     data1 = [0, 3, 0, 0, 0]
     data2 = [0, 6, 0, 0, 0]
-    
+
     graph = SVG::Graph::Pie.new(
         :height => 500,
         :width => 300,
@@ -50,19 +50,19 @@ class TestSvgGraph < Minitest::Test
         :data => data1,
         :title => 'data1'
       )
-    
+
     graph.add_data(
         :data => data2,
         :title => 'data2'
       )
     out = graph.burn
-    File.open("pie_100.svg", "w") {|fout| 
+    File.open(File.expand_path("pie_100.svg",__dir__), "w") {|fout|
       fout.print( out )
     }
-    assert_match(/TV 100%/, out, "100% text not found in graph") 
+    assert_match(/TV 100%/, out, "100% text not found in graph")
     assert_match(/circle/, out, "no circle was found in graph")
 
   end # test_pie_100_percent
-  
+
 end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: svg-graph
 version: !ruby/object:Gem::Version
-  version: 2.1.3
+  version: 2.2.0.beta
 platform: ruby
 authors:
 - Sean Russell
@@ -12,14 +12,14 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-27 00:00:00.000000000 Z
+date: 2019-05-07 00:00:00.000000000 Z
 dependencies: []
 description: "Gem version of SVG:::Graph. SVG:::Graph is a pure Ruby library for generating
-  charts, \nwhich are a type of graph where the values of one axis are not scalar.
-  SVG::Graph has a verry similar API to \nthe Perl library SVG::TT::Graph, and the
-  resulting charts also look the same. This isn't surprising, \nbecause SVG::Graph
+  charts,\nwhich are a type of graph where the values of one axis are not scalar.
+  SVG::Graph has a verry similar API to\nthe Perl library SVG::TT::Graph, and the
+  resulting charts also look the same. This isn't surprising,\nbecause SVG::Graph
   started as a loose port of SVG::TT::Graph, although the internal code no longer
-  resembles \nthe Perl original at all.\n  "
+  resembles\nthe Perl original at all.\n  "
 email:
 - ser_AT_germane-software.com
 - clbustos_AT_gmail.com
@@ -30,18 +30,19 @@ executables: []
 extensions: []
 extra_rdoc_files:
 - LICENSE.txt
-- README.markdown
+- README.md
 - README.txt
 files:
 - GPL.txt
 - History.txt
 - LICENSE.txt
-- README.markdown
+- README.md
 - README.txt
 - Rakefile
 - lib/SVG/Graph/Bar.rb
 - lib/SVG/Graph/BarBase.rb
 - lib/SVG/Graph/BarHorizontal.rb
+- lib/SVG/Graph/C3js.rb
 - lib/SVG/Graph/DataPoint.rb
 - lib/SVG/Graph/ErrBar.rb
 - lib/SVG/Graph/Graph.rb
@@ -52,7 +53,7 @@ files:
 - lib/SVG/Graph/TimeSeries.rb
 - lib/svggraph.rb
 - test/test_svg_graph.rb
-homepage: http://www.germane-software.com/software/SVG/SVG::Graph/
+homepage: https://github.com/lumean/svg-graph2
 licenses:
 - GPL-2.0
 metadata: {}
@@ -67,12 +68,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.14
+rubygems_version: 3.0.1
 signing_key: 
 specification_version: 4
 summary: SVG:::Graph is a pure Ruby library for generating charts, which are a type