RubyGems - svg-graph-test - Versions diffs - 0.0.1 - Mend

svg-graph-test 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

checksums.yaml +7 -0
data/GPL.txt +340 -0
data/History.txt +97 -0
data/LICENSE.txt +57 -0
data/README.md +132 -0
data/README.txt +89 -0
data/Rakefile +42 -0
data/lib/SVG/Graph/Bar.rb +154 -0
data/lib/SVG/Graph/BarBase.rb +149 -0
data/lib/SVG/Graph/BarHorizontal.rb +155 -0
data/lib/SVG/Graph/C3js.rb +274 -0
data/lib/SVG/Graph/DataPoint.rb +86 -0
data/lib/SVG/Graph/ErrBar.rb +198 -0
data/lib/SVG/Graph/Graph.rb +1338 -0
data/lib/SVG/Graph/Line.rb +467 -0
data/lib/SVG/Graph/Pie.rb +442 -0
data/lib/SVG/Graph/Plot.rb +636 -0
data/lib/SVG/Graph/Schedule.rb +386 -0
data/lib/SVG/Graph/TimeSeries.rb +263 -0
data/lib/svggraph.rb +18 -0
data/test/test_svg_graph.rb +68 -0
metadata +79 -0

data/lib/SVG/Graph/C3js.rb ADDED Viewed

@@ -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.12.0/d3.min.js",
+          "c3_css" => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.css",
+          "c3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/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/DataPoint.rb ADDED Viewed

@@ -0,0 +1,86 @@
+# Allows to customize datapoint shapes
+class DataPoint
+  # 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,
+          "r" => "2.5",
+          "class" => "dataPoint#{line}"
+        }]
+      } 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 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",
+  #              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}"
+  #         }
+  #       ]
+  #     }]
+  #   )
+  def DataPoint.configure_shape_criteria(*matchers)
+    CRITERIA.push(*matchers)
+  end
+  #
+  def DataPoint.reset_shape_criteria
+    CRITERIA.clear
+  end
+  # creates a new DataPoint
+  # @param x [Numeric] x coordinates of the point
+  # @param y [Numeric] y coordinates of the point
+  # @param line [Fixnum] line index of the current dataset (e.g. when multiple times Graph.add_data()), can be used to reference to the correct css class
+  def initialize(x, y, line)
+    @x = x
+    @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
+  #   [["svgtag",  {"points" => "", "class"=> "dataPoint#{line}" } ], ["svgtag", {"points"=>"", "class"=> ""}], ...]
+  # @exmple Usage
+  #   dp = DataPoint.new(x, y, line).shape(data[:description])
+  #   # for each svg we insert it to the graph
+  #   dp.each {|s| @graph.add_element( *s )}
+  #
+  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 datapoint_description =~ regexp
+    }.compact
+    # if above did not render anything use the defalt shape
+    shapes = [DEFAULT_SHAPE.call(@x, @y, @line)] if shapes.empty?
+    overlays = CRITERIA.select { |criteria|
+      criteria.last == OVERLAY
+    }.collect { |regexp, proc|
+      proc.call(@x, @y, @line) if datapoint_description =~ regexp
+    }.compact
+    return shapes + overlays
+  end
+end

data/lib/SVG/Graph/ErrBar.rb ADDED Viewed

@@ -0,0 +1,198 @@
+require 'rexml/document'
+require_relative 'Graph'
+require_relative 'BarBase'
+module SVG
+  module Graph
+    # === Create presentation quality SVG bar graphs easily
+    #
+    # = Synopsis
+    #
+    #   require 'SVG/Graph/ErrBar'
+    #
+    #   fields = %w(Jan Feb);
+    #   myarr1_mean = 10
+    #   myarr1_confidence = 1
+    #
+    #   myarr2_mean = 20
+    #   myarr2_confidence = 2
+    #
+    #   data= [myarr1_mean, myarr2_mean]
+    #
+    #   err_mesure = [myarr1_confidence, myarr2_confidence]
+    #
+    #   graph = SVG::Graph::ErrBar.new(
+    #     :height => 500,
+    #     :width => 600,
+    #     :fields => fields,
+    #     :errorBars => err_mesure,
+    #     :scale_integers => true,
+    #   )
+    #
+    #   graph.add_data(
+    #     :data => data,
+    #     :title => 'Sales 2002'
+    #   )
+    #
+    #   print "Content-type: image/svg+xml\r\n\r\n"
+    #   print graph.burn
+    #
+    # = Description
+    #
+    # This object aims to allow you to easily create high quality
+    # SVG[http://www.w3c.org/tr/svg bar graphs. You can either use the default
+    # style sheet or supply your own. Either way there are many options which
+    # can be configured to give you control over how the graph is generated -
+    # with or without a key, data elements at each point, title, subtitle etc.
+    #
+    # = Notes
+    #
+    # The default stylesheet handles upto 12 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
+    # if you go over 12 data sets as they will have no style and
+    # be in black.
+    #
+    # = Examples
+    #
+    # * http://germane-software.com/repositories/public/SVG/test/test.rb
+    #
+    # = See also
+    #
+    # * SVG::Graph::Graph
+    # * SVG::Graph::BarHorizontal
+    # * SVG::Graph::Line
+    # * SVG::Graph::Pie
+    # * SVG::Graph::Plot
+    # * SVG::Graph::TimeSeries
+    class ErrBar < BarBase
+      include REXML
+      def initialize config
+          raise "fields was not supplied or is empty" unless config[:errorBars] &&
+          config[:errorBars].kind_of?(Array) &&
+          config[:errorBars].length > 0
+          super
+      end
+      # Array of confidence values for each item in :fields. A range from
+      # value[i]-errorBars[i] to value[i]+errorBars[i] is drawn into the graph.
+      attr_accessor :errorBars
+      protected
+      def get_x_labels
+        @config[:fields]
+      end
+      def get_y_labels
+        maxvalue = max_value
+        minvalue = min_value
+        range = maxvalue - minvalue
+        # add some padding on top of the graph
+        if range == 0
+          maxvalue += 10
+        else
+          maxvalue += range / 20.0
+        end
+        scale_range = maxvalue - minvalue
+        @y_scale_division = scale_divisions || (scale_range / 10.0)
+        if scale_integers
+          @y_scale_division = @y_scale_division < 1 ? 1 : @y_scale_division.round
+        end
+        rv = []
+        maxvalue = maxvalue%@y_scale_division == 0 ?
+          maxvalue : maxvalue + @y_scale_division
+        minvalue.step( maxvalue, @y_scale_division ) {|v| rv << v}
+        return rv
+      end
+      def x_label_offset( width )
+        width / 2.0
+      end
+      def draw_data
+        minvalue = min_value
+        fieldwidth = field_width
+        unit_size = field_height
+        bargap = bar_gap ? (fieldwidth < 10 ? fieldwidth / 2 : 10) : 0
+        bar_width = fieldwidth - (bargap *2)
+        bar_width /= @data.length if stack == :side
+        bottom = @graph_height
+        field_count = 0
+        @config[:fields].each_index { |i|
+          dataset_count = 0
+          for dataset in @data
+            # cases (assume 0 = +ve):
+            #   value  min  length
+            #    +ve   +ve  value - min
+            #    +ve   -ve  value - 0
+            #    -ve   -ve  value.abs - 0
+            value = dataset[:data][i].to_f/@y_scale_division
+            left = (fieldwidth * field_count)
+            left += bargap
+            length = (value.abs - (minvalue > 0 ? minvalue : 0)) * unit_size
+            # top is 0 if value is negative
+            top = bottom - (((value < 0 ? 0 : value) - minvalue) * unit_size)
+            left += bar_width * dataset_count if stack == :side
+            @graph.add_element( "rect", {
+              "x" => left.to_s,
+              "y" => top.to_s,
+              "width" => bar_width.to_s,
+              "height" => length.to_s,
+              "class" => "fill#{dataset_count+1}"
+            })
+            threshold = @config[:errorBars][i].to_f/@y_scale_division * unit_size
+            middlePointErr = left+bar_width/2
+            upperErr = top+threshold
+            bottomErr = top-threshold
+            withthErr = bar_width/4
+            @graph.add_element( "line", {
+              "x1" => middlePointErr.to_s,
+              "y1" => upperErr.to_s,
+              "x2" => middlePointErr.to_s,
+              "y2" => bottomErr.to_s,
+              "style" => "stroke:rgb(0,0,0);stroke-width:1"
+            })
+            @graph.add_element( "line", {
+              "x1" => (middlePointErr-withthErr).to_s,
+              "y1" => upperErr.to_s,
+              "x2" => (middlePointErr+withthErr).to_s,
+              "y2" => upperErr.to_s,
+              "style" => "stroke:rgb(0,0,0);stroke-width:1"
+            })
+            @graph.add_element( "line", {
+              "x1" => (middlePointErr-withthErr).to_s,
+              "y1" => bottomErr.to_s,
+              "x2" => (middlePointErr+withthErr).to_s,
+              "y2" => bottomErr.to_s,
+              "style" => "stroke:rgb(0,0,0);stroke-width:1"
+            })
+            make_datapoint_text(left + bar_width/2.0, top - 6, dataset[:data][i])
+            # number format shall not apply to popup (use .to_s conversion)
+            add_popup(left + bar_width/2.0, top , dataset[:data][i].to_s)
+            dataset_count += 1
+          end
+          field_count += 1
+        } # config[:fields].each_index
+      end # draw_data
+    end # ErrBar
+  end
+end