Handling events in GoogleCharts

lib/daru/view/adapters/googlecharts/base_chart.rb

@@ -27,13 +27,10 @@ def draw_js_chart_wrapper(data, element_id)
       js << "\n  function #{chart_function_name(element_id)}() {"
       js << "\n  \t#{@data_table.to_js}"
       js << "\n  \tvar wrapper = new google.visualization.ChartWrapper({"
-      js << "\n  \t\tchartType: '#{chart_name}',"
-      js << append_data(data)
-      js << "\n  \t\toptions: #{js_parameters(@options)},"
-      js << "\n  \t\tcontainerId: '#{element_id}',"
-      js << "\n  \t\tview: #{extract_option_view}"
+      js << extract_chart_wrapper_options(data, element_id)
       js << "\n  \t});"
       js << draw_wrapper
+      js << add_listeners_js('wrapper')
       js << "\n  };"
       js
     end
@@ -54,9 +51,23 @@ def draw_js_spreadsheet(data, element_id=SecureRandom.uuid)
       js << "\n 	var data_table = response.getDataTable();"
       js << "\n 	var chart = new google.#{chart_class}.#{chart_name}"\
             "(document.getElementById('#{element_id}'));"
+      js << add_listeners_js('chart')
       js << "\n 	chart.draw(data_table, #{js_parameters(@options)});"
       js << "\n };"
       js
     end
+
+    def draw_chart_js(element_id)
+      js = ''
+      js << "\n  var chart = null;"
+      js << "\n  function #{chart_function_name(element_id)}() {"
+      js << "\n    #{@data_table.to_js}"
+      js << "\n    chart = new google.#{chart_class}.#{chart_name}"
+      js << "(document.getElementById('#{element_id}'));"
+      js << add_listeners_js('chart')
+      js << "\n    chart.draw(data_table, #{js_parameters(@options)});"
+      js << "\n  };"
+      js
+    end
   end
 end

lib/daru/view/adapters/googlecharts/data_table_iruby.rb

@@ -10,7 +10,7 @@ class DataTable
     attr_accessor :data
     # options will enable us to give some styling for table.
     # E.g. pagination, row numbers, etc
-    attr_accessor :options
+    attr_accessor :options, :listeners
     # @return [Hash] Various options created to facilitate more features.
     #   These will be provided by the user
     attr_accessor :user_options
@@ -26,6 +26,7 @@ class DataTable
     def initialize(options={})
       @cols = []
       @rows = []
+      @listeners = []
       @options = options
       return if options.empty?
 
@@ -38,6 +39,15 @@ def initialize(options={})
       end
     end
 
+    # Adds a listener to the array of listeners
+    #
+    # @param event [String] name of the event tha will be fired
+    # @param callback [String] callback function name for the event
+    # @return [Array] array of listeners
+    def add_listener(event, callback)
+      @listeners << {event: event.to_s, callback: callback}
+    end
+
     # Generates JavaScript and renders the Google Chart DataTable in the
     #   final HTML output
     #
@@ -96,7 +106,8 @@ def draw_js(element_id)
       js << "\n  function #{chart_function_name(element_id)}() {"
       js << "\n    #{to_js}"
       js << "\n    var table = new google.visualization.Table("
-      js << "\n    document.getElementById('#{element_id}'));"
+      js << "document.getElementById('#{element_id}'));"
+      js << add_listeners_js('table')
       js << "\n    table.draw(data_table, #{js_parameters(@options)}); "
       js << "\n  };"
       js
@@ -111,13 +122,10 @@ def draw_js_chart_wrapper(data, element_id)
       js << "\n  function #{chart_function_name(element_id)}() {"
       js << "\n  \t#{to_js}"
       js << "\n  \tvar wrapper = new google.visualization.ChartWrapper({"
-      js << "\n  \t\tchartType: 'Table',"
-      js << append_data(data)
-      js << "\n  \t\toptions: #{js_parameters(@options)},"
-      js << "\n  \t\tcontainerId: '#{element_id}',"
-      js << "\n  \t\tview: #{extract_option_view}"
+      js << extract_chart_wrapper_options(data, element_id)
       js << "\n  \t});"
       js << draw_wrapper
+      js << add_listeners_js('wrapper')
       js << "\n  };"
       js
     end
@@ -138,7 +146,8 @@ def draw_js_spreadsheet(data, element_id)
       js << "\n   var data_table = response.getDataTable();"
       js << "\n   var table = new google.visualization.Table"\
             "(document.getElementById('#{element_id}'));"
-      js << "\n   table.draw(data_table, #{js_parameters(@options)});"
+      js << add_listeners_js('table')
+      js << "\n 	table.draw(data_table, #{js_parameters(@options)});"
       js << "\n };"
       js
     end

lib/daru/view/adapters/googlecharts/display.rb

@@ -6,7 +6,7 @@
 
 module GoogleVisualr
   def self.init_script(
-    dependent_js=GOOGLECHARTS_DEPENDENCIES
+    dependent_js=GOOGLECHARTS_DEPENDENCIES_WEB
   )
     js =  ''
     js << "\n<script type='text/javascript'>"
@@ -59,7 +59,11 @@ def show_script_with_script_tag(dom=SecureRandom.uuid)
     def get_html(dom)
       html = ''
       html << load_js(dom)
-      html << draw_js(dom)
+      html << if is_a?(GoogleVisualr::DataTable)
+                draw_js(dom)
+              else
+                draw_chart_js(dom)
+              end
       html
     end
 
@@ -93,6 +97,7 @@ def to_html(id=nil, options={})
       template = File.read(path)
       id ||= SecureRandom.uuid
       @html_id = id
+      add_listener_to_chart
       chart_script = show_script(id, script_tag: false)
       ERB.new(template).result(binding)
     end
@@ -101,6 +106,34 @@ def show_in_iruby(dom=SecureRandom.uuid)
       IRuby.html to_html(dom)
     end
 
+    # @return [String] js function to add the listener to the chart
+    def add_listeners_js(type)
+      js = ''
+      @listeners.each do |listener|
+        js << "\n    google.visualization.events.addListener("
+        js << "#{type}, '#{listener[:event]}', function (e) {"
+        js << "\n      #{listener[:callback]}"
+        js << "\n    });"
+      end
+      js
+    end
+
+    # @param (see #draw_js_chart_editor)
+    # @return [String] options of the ChartWrapper
+    def extract_chart_wrapper_options(data, element_id)
+      js = ''
+      js << if is_a?(GoogleVisualr::DataTable)
+              "\n  \t\tchartType: 'Table',"
+            else
+              "\n  \t\tchartType: '#{chart_name}',"
+            end
+      js << append_data(data)
+      js << "\n  \t\toptions: #{js_parameters(@options)},"
+      js << "\n  \t\tcontainerId: '#{element_id}',"
+      js << "\n  \t\tview: #{extract_option_view}"
+      js
+    end
+
     # @param element_id [String] The ID of the DIV element that the Google
     #   Chart/DataTable should be rendered in
     # @return [String] unique function name to handle query response
@@ -163,6 +196,15 @@ def to_js_spreadsheet(data, element_id=SecureRandom.uuid)
       js << "\n</script>"
       js
     end
+
+    # @return [void] Adds listener to the chart from the
+    #   user_options[:listeners]
+    def add_listener_to_chart
+      return unless user_options && user_options[:listeners]
+      user_options[:listeners].each do |event, callback|
+        add_listener(event.to_s.downcase, callback)
+      end
+    end
   end
 
   class DataTable

lib/daru/view/adapters/googlecharts/iruby_notebook.rb

@@ -10,7 +10,7 @@ def self.generate_init_code(dependent_js)
   end
 
   # Enable to show plots on IRuby notebook
-  def self.init_iruby(dependent_js=GOOGLECHARTS_DEPENDENCIES)
+  def self.init_iruby(dependent_js=GOOGLECHARTS_DEPENDENCIES_IRUBY)
     js = generate_init_code(dependent_js)
     IRuby.display(IRuby.javascript(js))
   end

lib/daru/view/constants.rb

@@ -19,8 +19,11 @@
 # HighCharts CSS dependencies
 HIGHCHARTS_DEPENDENCIES_CSS = ['highcharts.css'].freeze
 
-# Dependent GoogleCharts JS constants for web frameworks and IRuby notebook
-GOOGLECHARTS_DEPENDENCIES = ['google_visualr.js', 'loader.js'].freeze
+# Dependent GoogleCharts JS constants for IRuby notebook
+GOOGLECHARTS_DEPENDENCIES_IRUBY = ['google_visualr.js', 'loader.js'].freeze
+
+# Dependent GoogleCharts JS constants for web frameworks
+GOOGLECHARTS_DEPENDENCIES_WEB = ['google_visualr.js', 'loader.js', 'jspdf.min.js'].freeze
 
 # Regex pattern to match a valid URL
 PATTERN_URL = Regexp.new(

lib/tasks/google_charts.rake

@@ -9,18 +9,24 @@ end
 
 namespace :googlecharts do
   desc "Update google charts javascript dependent files, from latest Builds on google developers website"
-  task :update => [:jsapi, :loader]
+  task :update => [:loader, :jspdf]
   sh "mkdir -p lib/daru/view/adapters/js/googlecharts_js/"
-  task :jsapi do
-    say "Grabbing Core from google jsapi codebase..." do
-      sh "curl -# http://www.google.com/jsapi -L --compressed -o lib/daru/view/adapters/js/googlecharts_js/google_visualr.js"
-    end
-  end
+  # FIXME: Updating jsapi is causing error in IRuby notebook and Googlecharts do not work.
+  # task :jsapi do
+  #   say "Grabbing Core from google jsapi codebase..." do
+  #     sh "curl -# http://www.google.com/jsapi -L --compressed -o lib/daru/view/adapters/js/googlecharts_js/google_visualr.js"
+  #   end
+  # end
 
   task :loader do
     say "Grabbing loader.js from the google website..." do
       sh "curl -# http://www.gstatic.com/charts/loader.js -L --compressed -o lib/daru/view/adapters/js/googlecharts_js/loader.js"
     end
   end
 
+  task :jspdf do
+     say "Grabbing jspdf.min.js from the cloudfare..." do
+       sh "curl -# https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js -L --compressed -o lib/daru/view/adapters/js/googlecharts_js/jspdf.min.js"
+     end
+   end
 end

spec/adapters/googlecharts/base_chart_spec.rb

@@ -12,6 +12,16 @@
       {type: :column, width: 800}
     )
   }
+  let(:user_options) {{
+    listeners: {
+      select: "alert('A table row was selected');"
+    }
+  }}
+  let(:column_chart) { Daru::View::Plot.new(
+    data_spreadsheet,
+    { type: :column },
+    user_options)
+  }
   let(:data) {
     [
       ['Year', 'Sales', 'Expenses'],
@@ -47,22 +57,6 @@
     end
   end
 
-  describe "#to_js_chart_wrapper" do
-    it "draws valid JS of the ChartWrapper when data is URL of the spreadsheet" do
-      js = area_chart_spreadsheet.chart.to_js_chart_wrapper(
-        data_spreadsheet,
-        'id'
-      )
-      expect(js).to match(/google.load\('visualization'/)
-      expect(js).to match(/callback: draw_id/)
-      expect(js).to match(/new google.visualization.ChartWrapper/)
-      expect(js).to match(/chartType: 'AreaChart'/)
-      expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/)
-      expect(js).to match(/options: {}/)
-      expect(js).to match(/containerId: 'id'/)
-    end
-  end
-
   describe "#draw_js_chart_wrapper" do
     it "draws valid JS of the ChartWrapper" do
       js = area_chart.chart.draw_js_chart_wrapper(data, 'id')

spec/adapters/googlecharts/data_table_iruby_spec.rb

@@ -30,19 +30,19 @@
   }
 
   describe "#to_js_full_script" do
-  	it "generates valid JS of the table" do
-  	  js = data_table.table.to_js_full_script('id')
+    it "generates valid JS of the table" do
+      js = data_table.table.to_js_full_script('id')
       expect(js).to match(/<script type='text\/javascript'>/i)
       expect(js).to match(/google.load\(/i)
       expect(js).to match(/google.visualization.DataTable\(\)/i)
-  	  expect(js).to match(
+      expect(js).to match(
         /data_table.addColumn\(\{\"type\":\"string\",\"label\":\"Year\"\}\);/
       )
       expect(js).to match(
         /data_table.addRow\(\[\{v: \"2013\"\}\]\);/i)
       expect(js).to match(/google.visualization.Table/i)
       expect(js).to match(/table.draw\(data_table, \{\}/i)
-  	end
+    end
   end
 
   describe "#extract_option_view" do
@@ -57,26 +57,26 @@
   end
 
   describe "#load_js" do
-  	it "loads valid packages" do
-    js = data_table.table.load_js('id')
-  	expect(js).to match(/google.load\('visualization', 1.0,/i)
-  	expect(js).to match(/\{packages: \['table'\], callback:/i)
-    expect(js).to match(/draw_id\}\)/i)
-  	end
+    it "loads valid packages" do
+      js = data_table.table.load_js('id')
+      expect(js).to match(/google.load\('visualization', 1.0,/i)
+      expect(js).to match(/\{packages: \['table'\], callback:/i)
+      expect(js).to match(/draw_id\}\)/i)
+    end
   end
 
   describe "#draw_js" do
-  	it "draws valid JS of the table" do
-  	  js = data_table.table.draw_js('id')
-  	  expect(js).to match(/google.visualization.DataTable\(\)/i)
-  	  expect(js).to match(
+    it "draws valid JS of the table" do
+      js = data_table.table.draw_js('id')
+      expect(js).to match(/google.visualization.DataTable\(\)/i)
+      expect(js).to match(
         /data_table.addColumn\(\{\"type\":\"string\",\"label\":\"Year\"\}\);/
       )
       expect(js).to match(
         /data_table.addRow\(\[\{v: \"2013\"\}\]\);/i)
       expect(js).to match(/google.visualization.Table/i)
       expect(js).to match(/table.draw\(data_table, \{\}/i)
-  	end
+    end
   end
 
   describe "#draw_js_spreadsheet" do