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

svg-graph-test 0.0.1

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