From 14ecc6371cd8342b4644ade90040597c45ac413e Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Thu, 26 Jul 2018 17:15:44 +0530 Subject: [PATCH] Move draw_js_chart_wrapper to display --- .../view/adapters/googlecharts/base_chart.rb | 26 +- .../adapters/googlecharts/data_table_iruby.rb | 17 - .../view/adapters/googlecharts/display.rb | 35 +- spec/adapters/googlecharts/base_chart_spec.rb | 13 - .../googlecharts/data_table_iruby_spec.rb | 12 - spec/adapters/googlecharts/display_spec.rb | 22 + .../Google Charts | Event Handling.ipynb | 504 ++++++++++-------- 7 files changed, 329 insertions(+), 300 deletions(-) diff --git a/lib/daru/view/adapters/googlecharts/base_chart.rb b/lib/daru/view/adapters/googlecharts/base_chart.rb index cd3fbd4..bbdb8f2 100644 --- a/lib/daru/view/adapters/googlecharts/base_chart.rb +++ b/lib/daru/view/adapters/googlecharts/base_chart.rb @@ -18,23 +18,6 @@ def extract_option_view '\'\'' end - # Generates JavaScript function for rendering the chartwrapper - # - # @param (see #to_js_chart_wrapper) - # @return [String] JS function to render the chartwrapper - def draw_js_chart_wrapper(data, element_id) - js = '' - js << "\n function #{chart_function_name(element_id)}() {" - js << "\n \t#{@data_table.to_js}" - js << "\n \tvar wrapper = new google.visualization.ChartWrapper({" - js << extract_chart_wrapper_options(data, element_id) - js << "\n \t});" - js << draw_wrapper - js << add_listeners_js('wrapper') - js << "\n };" - js - end - # Generates JavaScript function for rendering the chart when data is URL of # the google spreadsheet # @@ -57,12 +40,17 @@ def draw_js_spreadsheet(data, element_id=SecureRandom.uuid) js end + # Taken from `draw_js` in googlevisualr. While adding the listener, + # the callback code (provided by the user) should be within the function. + # + # @param element_id [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] JavaScript function for rendering the chart 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 << "\n var 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)});" diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index 0375e40..91a5367 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -113,23 +113,6 @@ def draw_js(element_id) js end - # Generates JavaScript function for rendering the chartwrapper - # - # @param (see #to_js_chart_wrapper) - # @return [String] JS function to render the chartwrapper - def draw_js_chart_wrapper(data, element_id) - js = '' - js << "\n function #{chart_function_name(element_id)}() {" - js << "\n \t#{to_js}" - js << "\n \tvar wrapper = new google.visualization.ChartWrapper({" - js << extract_chart_wrapper_options(data, element_id) - js << "\n \t});" - js << draw_wrapper - js << add_listeners_js('wrapper') - js << "\n };" - js - end - # Generates JavaScript function for rendering the google chart table when # data is URL of the google spreadsheet # diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index 8ebf95a..7a0340b 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -106,6 +106,15 @@ def show_in_iruby(dom=SecureRandom.uuid) IRuby.html to_html(dom) 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 + # @return [String] js function to add the listener to the chart def add_listeners_js(type) js = '' @@ -197,13 +206,25 @@ def to_js_spreadsheet(data, element_id=SecureRandom.uuid) 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 + # Generates JavaScript function for rendering the chartwrapper + # + # @param (see #to_js_chart_wrapper) + # @return [String] JS function to render the chartwrapper + def draw_js_chart_wrapper(data, element_id) + js = '' + js << "\n function #{chart_function_name(element_id)}() {" + js << if is_a?(GoogleVisualr::DataTable) + "\n \t#{to_js}" + else + "\n \t#{@data_table.to_js}" + end + js << "\n \tvar wrapper = new google.visualization.ChartWrapper({" + js << extract_chart_wrapper_options(data, element_id) + js << "\n \t});" + js << draw_wrapper + js << add_listeners_js('wrapper') + js << "\n };" + js end end diff --git a/spec/adapters/googlecharts/base_chart_spec.rb b/spec/adapters/googlecharts/base_chart_spec.rb index 35e9a3c..6c14811 100644 --- a/spec/adapters/googlecharts/base_chart_spec.rb +++ b/spec/adapters/googlecharts/base_chart_spec.rb @@ -57,19 +57,6 @@ 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') - expect(js).to match(/new google.visualization.DataTable/) - expect(js).to match(/new google.visualization.ChartWrapper/) - expect(js).to match(/chartType: 'AreaChart'/) - expect(js).to match(/dataTable: data_table/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: {columns: \[0,1\]}/) - end - end - describe "#draw_js_spreadsheet" do it "draws valid JS of the chart when "\ "data is imported from google spreadsheets" do diff --git a/spec/adapters/googlecharts/data_table_iruby_spec.rb b/spec/adapters/googlecharts/data_table_iruby_spec.rb index 7b87a73..e0ff614 100644 --- a/spec/adapters/googlecharts/data_table_iruby_spec.rb +++ b/spec/adapters/googlecharts/data_table_iruby_spec.rb @@ -93,16 +93,4 @@ expect(js).to match(/table.draw\(data_table, \{width: 800\}/i) end end - - describe "#draw_js_chart_wrapper" do - it "draws valid JS of the ChartWrapper" do - js = table_chartwrapper.table.draw_js_chart_wrapper(data, 'id') - expect(js).to match(/new google.visualization.DataTable/) - expect(js).to match(/new google.visualization.ChartWrapper/) - expect(js).to match(/chartType: 'Table'/) - expect(js).to match(/dataTable: data_table/) - expect(js).to match(/options: \{\}/) - expect(js).to match(/containerId: 'id'/) - end - end end diff --git a/spec/adapters/googlecharts/display_spec.rb b/spec/adapters/googlecharts/display_spec.rb index 7281a4b..28d13c8 100644 --- a/spec/adapters/googlecharts/display_spec.rb +++ b/spec/adapters/googlecharts/display_spec.rb @@ -464,4 +464,26 @@ end end end + + describe "#draw_js_chart_wrapper" do + it "draws valid JS of the ChartWrapper table" do + js = table_chart_wrapper.table.draw_js_chart_wrapper(data, 'id') + expect(js).to match(/new google.visualization.DataTable/) + expect(js).to match(/new google.visualization.ChartWrapper/) + expect(js).to match(/chartType: 'Table'/) + expect(js).to match(/dataTable: data_table/) + expect(js).to match(/options: \{\}/) + expect(js).to match(/containerId: 'id'/) + end + it "draws valid JS of the ChartWrapper" do + js = area_chart_wrapper.chart.draw_js_chart_wrapper(data, 'id') + expect(js).to match(/new google.visualization.DataTable/) + expect(js).to match(/new google.visualization.ChartWrapper/) + expect(js).to match(/chartType: 'AreaChart'/) + expect(js).to match(/dataTable: data_table/) + expect(js).to match(/options: {}/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/view: ''/) + end + end end diff --git a/spec/dummy_iruby/Google Charts | Event Handling.ipynb b/spec/dummy_iruby/Google Charts | Event Handling.ipynb index 840080e..87f699c 100644 --- a/spec/dummy_iruby/Google Charts | Event Handling.ipynb +++ b/spec/dummy_iruby/Google Charts | Event Handling.ipynb @@ -91,231 +91,231 @@ " /* BEGIN loader.js */\n", "\n", "(function(){var a=\"\\n//# sourceURL=\",k=\"' of type \",n='\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 3, @@ -410,14 +410,13 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 4, @@ -452,6 +451,47 @@ "column_chart.show_in_iruby" ] }, + { + "cell_type": "code", + "execution_count": 5, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 5, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "user_options = {\n", + " listeners: {\n", + " select: \"alert('A table row was selected');\"\n", + " }\n", + "}\n", + "column_chart = Daru::View::Plot.new(column_chart_table.table, {type: :area}, user_options)\n", + "column_chart.show_in_iruby" + ] + }, { "cell_type": "code", "execution_count": null,