From abacb2d278883292704a123c3c8fa002e039c566 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Tue, 5 Jun 2018 22:15:46 +0530 Subject: [PATCH 01/15] Added Chartwrapper --- lib/daru/view/adapters/datatables.rb | 2 +- lib/daru/view/adapters/googlecharts.rb | 41 +- .../view/adapters/googlecharts/base_chart.rb | 119 ++ .../adapters/googlecharts/data_table_iruby.rb | 58 + .../view/adapters/googlecharts/display.rb | 38 +- lib/daru/view/adapters/highcharts.rb | 2 +- lib/daru/view/adapters/nyaplot.rb | 2 +- lib/daru/view/plot.rb | 11 +- lib/daru/view/table.rb | 11 +- spec/adapters/googlecharts/base_chart_spec.rb | 143 +++ .../googlecharts/data_table_iruby_spec.rb | 136 +++ spec/adapters/googlecharts/display_spec.rb | 83 ++ spec/adapters/googlecharts_spec.rb | 41 +- .../Google Charts | Chartwrapper.ipynb | 1043 +++++++++++++++++ 14 files changed, 1698 insertions(+), 32 deletions(-) create mode 100644 lib/daru/view/adapters/googlecharts/base_chart.rb create mode 100644 spec/adapters/googlecharts/base_chart_spec.rb create mode 100644 spec/adapters/googlecharts/data_table_iruby_spec.rb create mode 100644 spec/dummy_iruby/Google Charts | Chartwrapper.ipynb diff --git a/lib/daru/view/adapters/datatables.rb b/lib/daru/view/adapters/datatables.rb index 42bab15..63a0cff 100644 --- a/lib/daru/view/adapters/datatables.rb +++ b/lib/daru/view/adapters/datatables.rb @@ -12,7 +12,7 @@ module DatatablesAdapter # the datatables option concept. # # TODO : this docs must be improved - def init_table(data=[], options={}) + def init_table(data=[], options={}, _user_options={}) # TODO : create data array from the df and vector data. So that # we can directly use the array.(No need to create df or vector and # generate the html table using to_html) diff --git a/lib/daru/view/adapters/googlecharts.rb b/lib/daru/view/adapters/googlecharts.rb index c456788..559fd26 100644 --- a/lib/daru/view/adapters/googlecharts.rb +++ b/lib/daru/view/adapters/googlecharts.rb @@ -15,24 +15,19 @@ module GooglechartsAdapter # and google_visualr : http://googlevisualr.herokuapp.com/ # # TODO : this docs must be improved - def init(data=[], options={}) + def init(data=[], options={}, user_options={}) @table = GoogleVisualr::DataTable.new - @table = - if data.is_a?(Daru::View::Table) && data.table.is_a?(GoogleVisualr::DataTable) - data.table - elsif data.is_a?(GoogleVisualr::DataTable) - data - else - add_data_in_table(data) - end + @table = get_table(data) unless data.is_a?(String) @chart_type = extract_chart_type(options) @chart = GoogleVisualr::Interactive.const_get( @chart_type ).new(@table, options) + @chart.class_chart = get_class_chart(user_options) + @chart.data = data @chart end - def init_table(data=[], options={}) + def init_table(data=[], options={}, user_options={}) # if `options` is something like this : # { # cols: [{id: 'task', label: 'Employee Name', type: 'string'}, @@ -47,10 +42,34 @@ def init_table(data=[], options={}) # } # then directly DatTable is created using options. Use data=[] or nil @table = GoogleVisualr::DataTable.new(options) - add_data_in_table(data) + @table.data = data + @table.class_chart = get_class_chart(user_options) + add_data_in_table(data) unless data.is_a?(String) @table end + # @param user_options [Hash] Extra options provided by the user like class_chart + # @return [String] The class of the chart (Chart, Charteditor or Chartwrapper) + def get_class_chart(user_options={}) + return 'Chart' if user_options[:class_chart].nil? + user_options.delete(:class_chart).to_s.capitalize + end + + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table] + # The data provided by the user to generate the google datatable. + # Data in String format represents the URL of the google spreadsheet + # from which data has to invoked + # @return [GoogleVisualr::DataTable] the table object will the data filled + def get_table(data) + if data.is_a?(Daru::View::Table) && data.table.is_a?(GoogleVisualr::DataTable) + data.table + elsif data.is_a?(GoogleVisualr::DataTable) + data + else + add_data_in_table(data) + end + end + def init_script GoogleVisualr.init_script end diff --git a/lib/daru/view/adapters/googlecharts/base_chart.rb b/lib/daru/view/adapters/googlecharts/base_chart.rb new file mode 100644 index 0000000..965f0cd --- /dev/null +++ b/lib/daru/view/adapters/googlecharts/base_chart.rb @@ -0,0 +1,119 @@ +require 'securerandom' +require 'google_visualr' + +module GoogleVisualr + class BaseChart + # Holds a value only when generate_body or show_in_iruby method + # is invoked in googlecharts.rb + # @return [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart + attr_accessor :data + # Provided by user and can take three values ('Chart', 'Chartwrapper' + # or 'Charteditor'). + # @return [String] Used to specify the class of the chart + attr_accessor :class_chart + + # @see #GoogleVisualr::DataTable.query_response_function_name + def query_response_function_name(element_id) + "handleQueryResponse_#{element_id.tr('-', '_')}" + end + + def append_data(data) + return "\n dataSourceUrl: '#{data}'," if data.is_a? String + "\n dataTable: data_table," + end + + def extract_option_view + return js_parameters(@options.delete('view')) unless @options['view'].nil? + '\'\'' + end + + # So that it can be used in ChartEditor also + def draw_wrapper + return "\n wrapper.draw();" if class_chart == 'Chartwrapper' + '' + end + + # Generates JavaScript when data is imported from spreadsheet and renders + # the Google Chart in the final HTML output when data is URL of the + # google spreadsheet + # + # @param data [String] URL of the google spreadsheet in the specified + # format: https://developers.google.com/chart/interactive/docs/spreadsheets + # Query string can be appended to retrieve the data accordingly + # @param element_id [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] Javascript code to render the Google Chart when data is + # given as the URL of the google spreadsheet + def to_js_spreadsheet(data, element_id=SecureRandom.uuid) + js = '' + js << "\n" + js + end + + # Generates JavaScript and renders the Google Chartwrapper in the + # final HTML output. + # + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart + # @param element_id [String] The ID of the DIV element that the Google + # Chartwrapper should be rendered in + # @return [String] Javascript code to render the Google Chartwrapper + def to_js_chart_wrapper(data, element_id=SecureRandom.uuid) + js = '' + js << "\n" + js + end + + def load_js_chart_wrapper(element_id) + js = '' + js << "\n google.load('visualization', '#{version}', " + js << "\n {callback:" + js << "\n #{chart_function_name(element_id)}});" + js + end + + def draw_js_chart_wrapper(data, element_id) + js = '' + js << "\n function #{chart_function_name(element_id)}() {" + js << "\n #{@data_table.to_js}" + js << "\n var wrapper = new google.visualization.ChartWrapper({" + js << "\n chartType: '#{chart_name}'," + js << append_data(data) + js << "\n options: #{js_parameters(@options)}," + js << "\n containerId: '#{element_id}'," + js << "\n view: #{extract_option_view}" + js << "\n });" + js << draw_wrapper + js << "\n };" + js + end + + # Generates JavaScript function for rendering the chart when data is URL of + # the google spreadsheet + # + # @param (see #to_js_spreadsheet) + # @return [String] JS function to render the google chart when data is URL + # of the google spreadsheet + def draw_js_spreadsheet(data, element_id=SecureRandom.uuid) + js = '' + js << "\n function #{chart_function_name(element_id)}() {" + js << "\n var query = new google.visualization.Query('#{data}');" + js << "\n query.send(#{query_response_function_name(element_id)});" + js << "\n }" + js << "\n function #{query_response_function_name(element_id)}(response) {" + js << "\n var data_table = response.getDataTable();" + js << "\n var chart = new google.#{chart_class}.#{chart_name}"\ + "(document.getElementById('#{element_id}'));" + js << "\n chart.draw(data_table, #{js_parameters(@options)});" + js << "\n };" + js + end + end +end diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index 85a83ae..a51af2c 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -3,9 +3,18 @@ module GoogleVisualr class DataTable + # Holds a value only when generate_body or show_in_iruby method + # is invoked in googlecharts.rb + # @return [Array, Daru::DataFrame, Daru::Vector, String] Data of + # GoogleVisualr DataTable + attr_accessor :data # options will enable us to give some styling for table. # E.g. pagination, row numbers, etc attr_accessor :options + # Provided by user and can take three values ('Chart', 'Chartwrapper' + # or 'Charteditor'). + # @return [String] Used to specify the class of the chart + attr_accessor :class_chart # included to use `js_parameters` method include GoogleVisualr::ParamHelpers @@ -44,6 +53,15 @@ def to_js_full_script(element_id=SecureRandom.uuid) js end + def to_js_full_script_chart_wrapper(data, element_id=SecureRandom.uuid) + js = '' + js << "\n" + js + end + def chart_function_name(element_id) "draw_#{element_id.tr('-', '_')}" end @@ -56,6 +74,22 @@ def package_name 'table' end + def append_data(data) + return "\n dataSourceUrl: '#{data}'," if data.is_a? String + "\n dataTable: data_table," + end + + def extract_option_view + return js_parameters(@options.delete(:view)) unless @options[:view].nil? + '\'\'' + end + + # So that it can be used in ChartEditor also + def draw_wrapper + return "\n wrapper.draw();" if class_chart == 'Chartwrapper' + '' + end + # Generates JavaScript for loading the appropriate Google Visualization package, with callback to render chart. # # Parameters: @@ -68,6 +102,14 @@ def load_js(element_id) js end + def load_js_chart_wrapper(element_id) + js = '' + js << "\n google.load('visualization', #{google_table_version}, " + js << "\n {callback:" + js << "\n #{chart_function_name(element_id)}});" + js + end + # Generates JavaScript function for rendering the chart. # # Parameters: @@ -82,5 +124,21 @@ def draw_js(element_id) js << "\n };" js end + + def draw_js_chart_wrapper(data, element_id) + js = '' + js << "\n function #{chart_function_name(element_id)}() {" + js << "\n #{to_js}" + js << "\n var wrapper = new google.visualization.ChartWrapper({" + js << "\n chartType: 'Table'," + js << append_data(data) + js << "\n options: #{js_parameters(@options)}," + js << "\n containerId: '#{element_id}'," + js << "\n view: #{extract_option_view}" + js << "\n });" + js << draw_wrapper + js << "\n };" + js + end end end diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index 2b5283b..e47bf22 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -1,6 +1,7 @@ require 'securerandom' require 'erb' require_relative 'data_table_iruby' +require_relative 'base_chart' module GoogleVisualr def self.init_script( @@ -21,12 +22,9 @@ module Display def show_script(dom=SecureRandom.uuid, options={}) script_tag = options.fetch(:script_tag) { true } if script_tag - # if it is data table - if is_a?(GoogleVisualr::DataTable) - to_js_full_script(dom) - else - to_js(dom) - end + show_script_with_script_tag(dom) + elsif class_chart == 'Chartwrapper' + get_html_chart_wrapper(data, dom) else html = '' html << load_js(dom) @@ -35,6 +33,32 @@ def show_script(dom=SecureRandom.uuid, options={}) end end + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] js code to render the chart + def get_html_chart_wrapper(data, dom) + html = '' + html << load_js_chart_wrapper(dom) + html << draw_js_chart_wrapper(data, dom) + html + end + + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] js code to render the chart with script tag + def show_script_with_script_tag(dom=SecureRandom.uuid) + # if it is data table + if is_a?(GoogleVisualr::DataTable) && class_chart == 'Chartwrapper' + to_js_full_script_chart_wrapper(data, dom) + elsif is_a?(GoogleVisualr::DataTable) + to_js_full_script(dom) + elsif class_chart == 'Chartwrapper' + to_js_chart_wrapper(data, dom) + else + to_js(dom) + end + end + def to_html(id=nil, options={}) path = File.expand_path('../../templates/googlecharts/chart_div.erb', __dir__) template = File.read(path) @@ -45,7 +69,7 @@ def to_html(id=nil, options={}) end def show_in_iruby(dom=SecureRandom.uuid) - IRuby.html(to_html(dom)) + IRuby.html to_html(dom) end end diff --git a/lib/daru/view/adapters/highcharts.rb b/lib/daru/view/adapters/highcharts.rb index 64cfcf1..5b78452 100644 --- a/lib/daru/view/adapters/highcharts.rb +++ b/lib/daru/view/adapters/highcharts.rb @@ -28,7 +28,7 @@ module HighchartsAdapter # # @param [Array/Daru::DataFrame/Daru::Vector] data # - def init(data=[], options={}) + def init(data=[], options={}, _user_options={}) data_new = guess_data(data) # TODO : for multiple series need some modification # Alternate way is using `add_series` method. diff --git a/lib/daru/view/adapters/nyaplot.rb b/lib/daru/view/adapters/nyaplot.rb index 5f13b0d..1dc8c10 100644 --- a/lib/daru/view/adapters/nyaplot.rb +++ b/lib/daru/view/adapters/nyaplot.rb @@ -8,7 +8,7 @@ module View module Adapter module NyaplotAdapter extend self # rubocop:disable Style/ModuleFunction - def init(data, options) + def init(data, options, _user_options={}) data_new = guess_data(data) data_new.plot(options) end diff --git a/lib/daru/view/plot.rb b/lib/daru/view/plot.rb index 6745cb4..6e9f727 100644 --- a/lib/daru/view/plot.rb +++ b/lib/daru/view/plot.rb @@ -2,7 +2,7 @@ module Daru module View class Plot - attr_reader :chart, :data, :options + attr_reader :chart, :data, :options, :user_options attr_accessor :adapter class << self # class method @@ -34,12 +34,13 @@ def adapter=(adapter) # To use a particular adapter in certain plot object(s), then user # must pass the adapter in `options` hash. e.g. `adapter: :highcharts` # - def initialize(data=[], options={}, &block) + def initialize(data=[], options={}, user_options={}, &block) # TODO: &block is not used, right now. @data = data @options = options + @user_options = user_options self.adapter = options.delete(:adapter) unless options[:adapter].nil? - @chart = plot_data(data, options, &block) + @chart = plot_data(data, options, user_options, &block) end # instance method @@ -96,11 +97,11 @@ def add_series(opts={}) private - def plot_data(data, options) + def plot_data(data, options, user_options) # class variable @@aapter is used in instance variable @adapter. # so in each object `adapter` variable can be accessed. @adapter ||= @@adapter - @adapter.init(data, options) + @adapter.init(data, options, user_options) end end end diff --git a/lib/daru/view/table.rb b/lib/daru/view/table.rb index 41fdf2f..6afb2a3 100644 --- a/lib/daru/view/table.rb +++ b/lib/daru/view/table.rb @@ -2,7 +2,7 @@ module Daru module View class Table - attr_reader :table, :data, :options + attr_reader :table, :data, :options, :user_options attr_accessor :adapter class << self # class method @@ -37,11 +37,12 @@ def adapter=(adapter) # To use a particular apdater in certain plot object(s), then user # must pass the adapter in `options` hash. e.g. `adapter: :highcharts` # - def initialize(data=[], options={}) + def initialize(data=[], options={}, user_options={}) @data = data @options = options + @user_options = user_options self.adapter = options.delete(:adapter) unless options[:adapter].nil? - @table = table_data(data, options) + @table = table_data(data, options, user_options) end # instance method @@ -89,11 +90,11 @@ def init_iruby private - def table_data(data, options) + def table_data(data, options, user_options) # class variable @@aapter is used in instance variable @adapter. # so in each object `adapter` variable can be accessed. @adapter ||= @@adapter - @adapter.init_table(data, options) + @adapter.init_table(data, options, user_options) end end end diff --git a/spec/adapters/googlecharts/base_chart_spec.rb b/spec/adapters/googlecharts/base_chart_spec.rb new file mode 100644 index 0000000..70d3d40 --- /dev/null +++ b/spec/adapters/googlecharts/base_chart_spec.rb @@ -0,0 +1,143 @@ +require 'spec_helper.rb' + +describe GoogleVisualr::BaseChart do + before { Daru::View.plotting_library = :googlecharts } + before(:each) do + @query_string = 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8' + @data_spreadsheet = 'https://docs.google.com/spreadsheets/d/1XWJLkAwch'\ + '5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + @data_spreadsheet << @query_string + @plot_spreadsheet = Daru::View::Plot.new( + @data_spreadsheet, + {type: :column, width: 800} + ) + @data = [ + ['Year', 'Sales', 'Expenses'], + ['2013', 1000, 400], + ['2014', 1170, 460], + ['2015', 660, 1120], + ['2016', 1030, 540] + ] + @area_chart = Daru::View::Plot.new( + @data, + {type: :area, width: 800, view: {'columns': [0, 1]}}, + class_chart: 'ChartWrapper' + ) + @area_chart_spreadsheet = Daru::View::Plot.new( + @data_spreadsheet, + {type: :area}, + class_chart: 'ChartWrapper' + ) + end + + describe "#query_response_function_name" do + it "should generate unique function name to handle query response" do + func = @plot_spreadsheet.chart.query_response_function_name('i-d') + expect(func).to eq('handleQueryResponse_i_d') + end + end + + describe "#append_data" do + it "should return option dataSourceUrl if data is URL" do + js = @area_chart_spreadsheet.chart.append_data(@data_spreadsheet) + expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) + end + it "should return option dataTable otherwise" do + js = @area_chart.chart.append_data(@data) + expect(js).to match(/dataTable: data_table/) + end + end + + describe "#extract_option_view" do + it "should return value of view option if view option is provided" do + js = @area_chart.chart.extract_option_view + expect(js).to eq('{columns: [0,1]}') + end + it "should return '' if view option is not provided" do + js = @area_chart_spreadsheet.chart.extract_option_view + expect(js).to eq('\'\'') + end + end + + describe "#draw_wrapper" do + it "should draw the chartwrapper only when class_chart is"\ + " set to Chartwrapper" do + js = @area_chart.chart.draw_wrapper + expect(js).to match(/wrapper.draw\(\);/) + end + it "should draw the chartwrapper only when class_chart is"\ + " set to Chartwrapper" do + js = @plot_spreadsheet.chart.draw_wrapper + expect(js).to eql("") + end + end + + describe "#to_js_spreadsheet" do + it "generates valid JS of the chart when "\ + "data is imported from google spreadsheets" do + js = @plot_spreadsheet.chart.to_js_spreadsheet(@data_spreadsheet, 'id') + expect(js).to match(/\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 3, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "data = [\n", + " ['Year', 'Sales', 'Expenses'],\n", + " ['2013', 1000, 400],\n", + " ['2014', 1170, 460],\n", + " ['2015', 660, 1120],\n", + " ['2016', 1030, 540]\n", + " ]\n", + "area_chart_table = Daru::View::Table.new(data)\n", + "area_chart_table.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 4, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "area_chart_options = {\n", + " type: :area\n", + "}\n", + "area_chart_chart = Daru::View::Plot.new(area_chart_table.table, area_chart_options, class_chart: 'ChartWrapper')\n", + "area_chart_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": [ + "line_basic_options = {\n", + " title: 'Company Performance',\n", + " curveType: 'function',\n", + " legend: { position: 'bottom' }\n", + "}\n", + "\n", + "line_basic_chart = Daru::View::Plot.new(data, line_basic_options, class_chart: 'Chartwrapper')\n", + "line_basic_chart.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 6, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 6, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "area_chart_options = {\n", + " type: :area,\n", + " view: {columns: [0, 1]}\n", + "}\n", + "area_chart_chart = Daru::View::Plot.new(area_chart_table.table, area_chart_options, class_chart: 'ChartWrapper')\n", + "area_chart_chart.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 7, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 7, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "area_chart_options = {\n", + " type: :area,\n", + " view: {columns: [1, 2]}\n", + "}\n", + "area_chart_chart = Daru::View::Plot.new(area_chart_table.table, area_chart_options, class_chart: 'ChartWrapper')\n", + "area_chart_chart.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 8, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 8, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "data_str = 'https://docs.google.com/spreadsheets/d/1aXns2ch8y_rl9ZLxSYZIU5ewUB1ZNAg5O6iPLZLApZI/gviz/tq?header=1&tq='\n", + "table = Daru::View::Table.new(data_str, {width: 500}, class_chart: 'Chartwrapper')\n", + "table.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 9, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "data_str = 'https://docs.google.com/spreadsheets/d/1aXns2ch8y_rl9ZLxSYZIU5ewUB1ZNAg5O6iPLZLApZI/gviz/tq?header=1&tq='\n", + "table = Daru::View::Plot.new(data_str, {width: 500}, class_chart: 'Chartwrapper')\n", + "table.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 10, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 10, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "data_str = 'https://docs.google.com/spreadsheets/d/1aXns2ch8y_rl9ZLxSYZIU5ewUB1ZNAg5O6iPLZLApZI/gviz/tq?header=1&tq='\n", + "table = Daru::View::Plot.new(data_str, {width: 500, view: {columns: [0, 1]}}, class_chart: 'Chartwrapper')\n", + "table.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 11, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + " Daru::DataFrame(5x2) \n", + "\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + "\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + "\n", + " \n", + "\n", + "
City2010 Population
0New York City, NY8175000
1Los Angeles, CA3792000
2Chicago, IL2695000
3Houston, TX2099000
4Philadelphia, PA1526000
" + ], + "text/plain": [ + "#\n", + " City 2010 Popul\n", + " 0 New York C 8175000\n", + " 1 Los Angele 3792000\n", + " 2 Chicago, I 2695000\n", + " 3 Houston, T 2099000\n", + " 4 Philadelph 1526000" + ] + }, + "execution_count": 11, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "idx = Daru::Index.new ['City', '2010 Population',]\n", + "data_rows = [\n", + "['New York City, NY', 8175000],\n", + "['Los Angeles, CA', 3792000],\n", + "['Chicago, IL', 2695000],\n", + "['Houston, TX', 2099000],\n", + "['Philadelphia, PA', 1526000]\n", + "]\n", + "df_city_pop = Daru::DataFrame.rows(data_rows)\n", + "df_city_pop.vectors = idx\n", + "df_city_pop" + ] + }, + { + "cell_type": "code", + "execution_count": 12, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 12, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "bar_basic_table = Daru::View::Table.new(df_city_pop, {}, class_chart: 'Chartwrapper')\n", + "bar_basic_table.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 13, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 13, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "bar_basic_options = {\n", + " title: 'Population of Largest U.S. Cities',\n", + " type: :bar\n", + "}\n", + "bar_basic_chart = Daru::View::Plot.new(df_city_pop, bar_basic_options, class_chart: 'Chartwrapper')\n", + "bar_basic_chart.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 14, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 14, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "bar_basic_options = {\n", + " title: 'Population of Largest U.S. Cities',\n", + " type: :column\n", + "}\n", + "bar_basic_chart = Daru::View::Plot.new(bar_basic_table.table, bar_basic_options, class_chart: 'Chartwrapper')\n", + "bar_basic_chart.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 15, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "bar_basic_table = Daru::View::Table.new(df_city_pop, {view: {columns: [0]}}, class_chart: 'Chartwrapper')\n", + "bar_basic_table.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": 16, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "
\n", + "\n" + ], + "text/plain": [ + "\"
\\n\\n\"" + ] + }, + "execution_count": 16, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "query_string = 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8'\n", + "data_spreadsheet = 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq='\n", + "data_spreadsheet << query_string\n", + "table_spreadsheet = Daru::View::Table.new(data_spreadsheet, {width: 800}, class_chart: 'Chartwrapper')\n", + "table_spreadsheet.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Ruby 2.4.1", + "language": "ruby", + "name": "ruby" + }, + "language_info": { + "file_extension": ".rb", + "mimetype": "application/x-ruby", + "name": "ruby", + "version": "2.4.1" + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} From 3dd8ffff9f9f2f4ab158880881cb37284ff8bb00 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Thu, 7 Jun 2018 19:35:51 +0530 Subject: [PATCH 02/15] Added documentation --- .../view/adapters/googlecharts/base_chart.rb | 12 ++++++++- .../adapters/googlecharts/data_table_iruby.rb | 26 +++++++++++++++++++ lib/daru/view/adapters/nyaplot.rb | 1 - lib/daru/view/plot.rb | 1 - lib/daru/view/table.rb | 1 - spec/adapters/googlecharts/base_chart_spec.rb | 2 +- .../googlecharts/data_table_iruby_spec.rb | 2 +- 7 files changed, 39 insertions(+), 6 deletions(-) diff --git a/lib/daru/view/adapters/googlecharts/base_chart.rb b/lib/daru/view/adapters/googlecharts/base_chart.rb index 965f0cd..12c308d 100644 --- a/lib/daru/view/adapters/googlecharts/base_chart.rb +++ b/lib/daru/view/adapters/googlecharts/base_chart.rb @@ -18,17 +18,22 @@ def query_response_function_name(element_id) "handleQueryResponse_#{element_id.tr('-', '_')}" end + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr DataTable + # @return [String] Data option (dataSourceUrl or dataTable) required to + # draw the Chartwrapper based upon the data provided. def append_data(data) return "\n dataSourceUrl: '#{data}'," if data.is_a? String "\n dataTable: data_table," end + # @see #GooleVisualr::DataTable.extract_option_view def extract_option_view return js_parameters(@options.delete('view')) unless @options['view'].nil? '\'\'' end - # So that it can be used in ChartEditor also + # @see #GooleVisualr::DataTable.draw_wrapper def draw_wrapper return "\n wrapper.draw();" if class_chart == 'Chartwrapper' '' @@ -71,6 +76,7 @@ def to_js_chart_wrapper(data, element_id=SecureRandom.uuid) js end + # @see #GooleVisualr::DataTable.load_js_chart_wrapper def load_js_chart_wrapper(element_id) js = '' js << "\n google.load('visualization', '#{version}', " @@ -79,6 +85,10 @@ def load_js_chart_wrapper(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)}() {" diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index a51af2c..d349a2e 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -53,6 +53,14 @@ def to_js_full_script(element_id=SecureRandom.uuid) js end + # Generates JavaScript and renders the Google Chartwrapper in the + # final HTML output. + # + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart + # @param element_id [String] The ID of the DIV element that the Google + # Chartwrapper should be rendered in + # @return [String] Javascript code to render the Google Chartwrapper def to_js_full_script_chart_wrapper(data, element_id=SecureRandom.uuid) js = '' js << "\n" js end - # @see #GooleVisualr::DataTable.load_js_chart_wrapper - def load_js_chart_wrapper(element_id) - js = '' - js << "\n google.load('visualization', '#{version}', " - js << "\n {callback:" - js << "\n #{chart_function_name(element_id)}});" - js - end - # Generates JavaScript function for rendering the chartwrapper # # @param (see #to_js_chart_wrapper) diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index d349a2e..37e9a1b 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -64,7 +64,7 @@ def to_js_full_script(element_id=SecureRandom.uuid) def to_js_full_script_chart_wrapper(data, element_id=SecureRandom.uuid) js = '' js << "\n" js @@ -118,20 +118,6 @@ def load_js(element_id) js end - # Generates JavaScript of callback to render chart. Packages are not - # required to load explicitly in Chartwrapper - # - # @param element_id [String] The ID of the DIV element that the Google - # Chart should be rendered in - # @return [String] JS of callback to render chart. - def load_js_chart_wrapper(element_id) - js = '' - js << "\n google.load('visualization', #{google_table_version}, " - js << "\n {callback:" - js << "\n #{chart_function_name(element_id)}});" - js - end - # Generates JavaScript function for rendering the chart. # # Parameters: diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index e47bf22..5208245 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -38,7 +38,7 @@ def show_script(dom=SecureRandom.uuid, options={}) # @return [String] js code to render the chart def get_html_chart_wrapper(data, dom) html = '' - html << load_js_chart_wrapper(dom) + html << load_js(dom) html << draw_js_chart_wrapper(data, dom) html end diff --git a/spec/adapters/googlecharts/base_chart_spec.rb b/spec/adapters/googlecharts/base_chart_spec.rb index 296bd75..2a90239 100644 --- a/spec/adapters/googlecharts/base_chart_spec.rb +++ b/spec/adapters/googlecharts/base_chart_spec.rb @@ -96,7 +96,7 @@ 'id' ) expect(js).to match(/google.load\('visualization'/) - expect(js).to match(/callback:\n draw_id/) + 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/) @@ -105,14 +105,6 @@ end end - describe "#load_js_chart_wrapper" do - it "load valid JS of the ChartWrapper" do - js = @area_chart.chart.load_js_chart_wrapper('id') - expect(js).to match(/google.load\('visualization'/) - expect(js).to match(/callback:\n draw_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') diff --git a/spec/adapters/googlecharts/data_table_iruby_spec.rb b/spec/adapters/googlecharts/data_table_iruby_spec.rb index 7f18be6..ec54462 100644 --- a/spec/adapters/googlecharts/data_table_iruby_spec.rb +++ b/spec/adapters/googlecharts/data_table_iruby_spec.rb @@ -101,14 +101,6 @@ end end - describe "#load_js_chart_wrapper" do - it "load valid JS of the ChartWrapper" do - js = table_chartwrapper.table.load_js_chart_wrapper('id') - expect(js).to match(/google.load\('visualization'/) - expect(js).to match(/callback:\n draw_id/) - end - end - describe "#draw_js" do it "draws valid JS of the table" do js = data_table.table.draw_js('id') diff --git a/spec/adapters/googlecharts/display_spec.rb b/spec/adapters/googlecharts/display_spec.rb index 20bf059..4934f50 100644 --- a/spec/adapters/googlecharts/display_spec.rb +++ b/spec/adapters/googlecharts/display_spec.rb @@ -68,7 +68,7 @@ js = area_chart_wrapper.chart.to_html('id') expect(js).to match(/
/i) expect(js).to match(/google.load\('visualization'/) - expect(js).to match(/callback:\n draw_id/) + 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(/dataTable: data_table/) @@ -93,7 +93,7 @@ it "should generate the valid JS of chartwrapper" do js = area_chart_wrapper.chart.get_html_chart_wrapper(data_table.table, 'id') expect(js).to match(/google.load\('visualization'/) - expect(js).to match(/callback:\n draw_id/) + 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(/dataTable: data_table/) @@ -160,7 +160,7 @@ js = area_chart_wrapper.chart.show_script_with_script_tag('id') expect(js).to match(/script/) expect(js).to match(/google.load\('visualization'/) - expect(js).to match(/callback:\n draw_id/) + 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(/dataTable: data_table/) diff --git a/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb b/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb index 0a49d0d..799fa7c 100644 --- a/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb +++ b/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb @@ -356,22 +356,27 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 3, @@ -387,7 +392,7 @@ " ['2015', 660, 1120],\n", " ['2016', 1030, 540]\n", " ]\n", - "area_chart_table = Daru::View::Table.new(data)\n", + "area_chart_table = Daru::View::Table.new(data, {}, class_chart: 'Chartwrapper')\n", "area_chart_table.show_in_iruby" ] }, @@ -399,19 +404,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 4, @@ -443,19 +448,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 5, @@ -490,19 +495,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 6, @@ -535,19 +540,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 7, @@ -580,19 +585,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 8, @@ -622,19 +627,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 9, @@ -664,19 +669,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 10, @@ -809,19 +814,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 12, @@ -850,19 +855,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 13, @@ -895,19 +900,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 14, @@ -940,19 +945,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 15, @@ -981,19 +986,19 @@ { "data": { "text/html": [ - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"
\\n\\n\"" ] }, "execution_count": 16, From 6a70844ad74cdcb562ab540f298cb80cc118dde2 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Sun, 10 Jun 2018 20:08:11 +0530 Subject: [PATCH 04/15] Added Charteditor --- .../view/adapters/googlecharts/base_chart.rb | 63 ++++++++++++++++--- .../adapters/googlecharts/data_table_iruby.rb | 58 +++++++++++++---- .../view/adapters/googlecharts/display.rb | 23 ++++++- .../googlecharts/chart_editor_div.erb | 5 ++ spec/adapters/googlecharts/base_chart_spec.rb | 11 ++-- .../googlecharts/data_table_iruby_spec.rb | 11 ++-- 6 files changed, 141 insertions(+), 30 deletions(-) create mode 100644 lib/daru/view/templates/googlecharts/chart_editor_div.erb diff --git a/lib/daru/view/adapters/googlecharts/base_chart.rb b/lib/daru/view/adapters/googlecharts/base_chart.rb index 9aac18c..9cfe8fd 100644 --- a/lib/daru/view/adapters/googlecharts/base_chart.rb +++ b/lib/daru/view/adapters/googlecharts/base_chart.rb @@ -33,10 +33,32 @@ def extract_option_view '\'\'' end + def save_chart_function_name(element_id) + "saveChart_#{element_id.tr('-', '_')}" + end + # @see #GooleVisualr::DataTable.draw_wrapper - def draw_wrapper - return "\n wrapper.draw();" if class_chart == 'Chartwrapper' - '' + def draw_wrapper(element_id) + return "\n wrapper_#{element_id.tr('-', '_')}.draw();" if + class_chart == 'Chartwrapper' + js = '' + js << "\n wrapper_#{element_id.tr('-', '_')}.draw();" + js << "\n chartEditor_#{element_id.tr('-', '_')} = "\ + 'new google.visualization.ChartEditor();' + js << "\n google.visualization.events.addListener("\ + "chartEditor_#{element_id.tr('-', '_')},"\ + " 'ok', #{save_chart_function_name(element_id)});" + js + end + + def extract_chart_wrapper_options(data, element_id) + js = '' + js << "\n chartType: '#{chart_name}'," + js << append_data(data) + js << "\n options: #{js_parameters(@options)}," + js << "\n containerId: '#{element_id}'," + js << "\n view: #{extract_option_view}" + js end # Generates JavaScript when data is imported from spreadsheet and renders @@ -76,26 +98,47 @@ def to_js_chart_wrapper(data, element_id=SecureRandom.uuid) js end + def load_js_chart_editor(element_id) + js = '' + js << "\n google.load('visualization', '#{version}', " + js << "\n {packages: ['charteditor'], callback:" + js << "\n #{chart_function_name(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 var wrapper_#{element_id.tr('-', '_')} = null;" js << "\n function #{chart_function_name(element_id)}() {" js << "\n #{@data_table.to_js}" - js << "\n var wrapper = new google.visualization.ChartWrapper({" - js << "\n chartType: '#{chart_name}'," - js << append_data(data) - js << "\n options: #{js_parameters(@options)}," - js << "\n containerId: '#{element_id}'," - js << "\n view: #{extract_option_view}" + js << "\n wrapper_#{element_id.tr('-', '_')} = "\ + 'new google.visualization.ChartWrapper({' + js << extract_chart_wrapper_options(data, element_id) js << "\n });" - js << draw_wrapper + js << draw_wrapper(element_id) js << "\n };" js end + def draw_js_chart_editor(data, element_id) + js = '' + js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" + js << draw_js_chart_wrapper(data, element_id) + js << "\n function #{save_chart_function_name(element_id)}(){" + js << "\n chartEditor_#{element_id.tr('-', '_')}.getChartWrapper()."\ + "draw(document.getElementById('#{element_id}'));" + js << "\n }" + js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" + js << "\n chartEditor_#{element_id.tr('-', '_')}.openDialog("\ + "wrapper_#{element_id.tr('-', '_')}, {});" + js << "\n }" + js + end + # Generates JavaScript function for rendering the chart when data is URL of # the google spreadsheet # diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index 37e9a1b..b64ea6d 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -79,7 +79,8 @@ def google_table_version end def package_name - 'table' + return 'table' unless class_chart == 'Charteditor' + 'charteditor' end # @param data [Array, Daru::DataFrame, Daru::Vector, String] Data @@ -98,12 +99,34 @@ def extract_option_view '\'\'' end + def save_chart_function_name(element_id) + "saveChart_#{element_id.tr('-', '_')}" + end + # So that it can be used in ChartEditor also # # @return [String] Returns string to draw the Chartwrapper and '' otherwise - def draw_wrapper - return "\n wrapper.draw();" if class_chart == 'Chartwrapper' - '' + def draw_wrapper(element_id) + return "\n wrapper_#{element_id.tr('-', '_')}.draw();" if + class_chart == 'Chartwrapper' + js = '' + js << "\n wrapper_#{element_id.tr('-', '_')}.draw();" + js << "\n chartEditor_#{element_id.tr('-', '_')} = "\ + 'new google.visualization.ChartEditor();' + js << "\n google.visualization.events.addListener("\ + "chartEditor_#{element_id.tr('-', '_')},"\ + " 'ok', #{save_chart_function_name(element_id)});" + js + end + + def extract_chart_wrapper_options(data, element_id) + js = '' + js << "\n chartType: 'Table'," + js << append_data(data) + js << "\n options: #{js_parameters(@options)}," + js << "\n containerId: '#{element_id}'," + js << "\n view: #{extract_option_view}" + js end # Generates JavaScript for loading the appropriate Google Visualization package, with callback to render chart. @@ -139,18 +162,31 @@ def draw_js(element_id) # @return [String] JS function to render the chartwrapper def draw_js_chart_wrapper(data, element_id) js = '' + js << "\n var wrapper_#{element_id.tr('-', '_')} = null;" js << "\n function #{chart_function_name(element_id)}() {" js << "\n #{to_js}" - js << "\n var wrapper = new google.visualization.ChartWrapper({" - js << "\n chartType: 'Table'," - js << append_data(data) - js << "\n options: #{js_parameters(@options)}," - js << "\n containerId: '#{element_id}'," - js << "\n view: #{extract_option_view}" + js << "\n wrapper_#{element_id.tr('-', '_')} = "\ + 'new google.visualization.ChartWrapper({' + js << extract_chart_wrapper_options(data, element_id) js << "\n });" - js << draw_wrapper + js << draw_wrapper(element_id) js << "\n };" js end + + def draw_js_chart_editor(data, element_id) + js = '' + js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" + js << draw_js_chart_wrapper(data, element_id) + js << "\n function #{save_chart_function_name(element_id)}(){" + js << "\n chartEditor_#{element_id.tr('-', '_')}.getChartWrapper()." + js << "draw(document.getElementById('#{element_id}'));" + js << "\n }" + js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" + js << "\n chartEditor_#{element_id.tr('-', '_')}.openDialog(" + js << "wrapper_#{element_id.tr('-', '_')}, {});" + js << "\n }" + js + end end end diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index 5208245..5f9af7a 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -25,6 +25,8 @@ def show_script(dom=SecureRandom.uuid, options={}) show_script_with_script_tag(dom) elsif class_chart == 'Chartwrapper' get_html_chart_wrapper(data, dom) + elsif class_chart == 'Charteditor' + get_html_chart_editor(data, dom) else html = '' html << load_js(dom) @@ -43,6 +45,20 @@ def get_html_chart_wrapper(data, dom) html end + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] js code to render the chart + def get_html_chart_editor(data, dom) + html = '' + html << if is_a?(GoogleVisualr::DataTable) + load_js(dom) + else + load_js_chart_editor(dom) + end + html << draw_js_chart_editor(data, dom) + html + end + # @param dom [String] The ID of the DIV element that the Google # Chart should be rendered in # @return [String] js code to render the chart with script tag @@ -60,7 +76,12 @@ def show_script_with_script_tag(dom=SecureRandom.uuid) end def to_html(id=nil, options={}) - path = File.expand_path('../../templates/googlecharts/chart_div.erb', __dir__) + path = + if class_chart == 'Charteditor' + File.expand_path('../../templates/googlecharts/chart_editor_div.erb', __dir__) + else + File.expand_path('../../templates/googlecharts/chart_div.erb', __dir__) + end template = File.read(path) id ||= SecureRandom.uuid @html_id = id diff --git a/lib/daru/view/templates/googlecharts/chart_editor_div.erb b/lib/daru/view/templates/googlecharts/chart_editor_div.erb new file mode 100644 index 0000000..0e0d5b0 --- /dev/null +++ b/lib/daru/view/templates/googlecharts/chart_editor_div.erb @@ -0,0 +1,5 @@ + +
+ diff --git a/spec/adapters/googlecharts/base_chart_spec.rb b/spec/adapters/googlecharts/base_chart_spec.rb index 2a90239..08f8203 100644 --- a/spec/adapters/googlecharts/base_chart_spec.rb +++ b/spec/adapters/googlecharts/base_chart_spec.rb @@ -62,13 +62,16 @@ describe "#draw_wrapper" do it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do - js = @area_chart.chart.draw_wrapper - expect(js).to match(/wrapper.draw\(\);/) + js = @area_chart.chart.draw_wrapper('id') + expect(js).to match(/wrapper_id.draw\(\);/) end it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do - js = @plot_spreadsheet.chart.draw_wrapper - expect(js).to eql("") + js = @plot_spreadsheet.chart.draw_wrapper('id') + expect(js).to match(/wrapper_id.draw\(\);/) + expect(js).to match(/new google.visualization.ChartEditor()/) + expect(js).to match(/google.visualization.events.addListener/) + expect(js).to match(/chartEditor_id, 'ok', saveChart_id/) end end diff --git a/spec/adapters/googlecharts/data_table_iruby_spec.rb b/spec/adapters/googlecharts/data_table_iruby_spec.rb index ec54462..e29b288 100644 --- a/spec/adapters/googlecharts/data_table_iruby_spec.rb +++ b/spec/adapters/googlecharts/data_table_iruby_spec.rb @@ -82,13 +82,16 @@ describe "#draw_wrapper" do it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do - js = table_chartwrapper.table.draw_wrapper - expect(js).to match(/wrapper.draw\(\);/) + js = table_chartwrapper.table.draw_wrapper('id') + expect(js).to match(/wrapper_id.draw\(\);/) end it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do - js = table_spreadsheet.table.draw_wrapper - expect(js).to eql("") + js = table_spreadsheet.table.draw_wrapper('id') + expect(js).to match(/wrapper_id.draw\(\);/) + expect(js).to match(/new google.visualization.ChartEditor()/) + expect(js).to match(/google.visualization.events.addListener/) + expect(js).to match(/chartEditor_id, 'ok', saveChart_id/) end end From d531fe2a038f65a58e4fb7b10b33f44fbffff042 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Sun, 10 Jun 2018 20:37:17 +0530 Subject: [PATCH 05/15] Added example --- .../Google Charts | ChartEditor.ipynb | 533 ++++++++++++++++++ 1 file changed, 533 insertions(+) create mode 100644 spec/dummy_iruby/Google Charts | ChartEditor.ipynb diff --git a/spec/dummy_iruby/Google Charts | ChartEditor.ipynb b/spec/dummy_iruby/Google Charts | ChartEditor.ipynb new file mode 100644 index 0000000..30e77c4 --- /dev/null +++ b/spec/dummy_iruby/Google Charts | ChartEditor.ipynb @@ -0,0 +1,533 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "metadata": {}, + "outputs": [ + { + "name": "stderr", + "output_type": "stream", + "text": [ + "\n", + "Install the spreadsheet gem version ~>1.1.1 for using spreadsheet functions.\n", + "\n", + "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" + ] + }, + { + "data": { + "text/plain": [ + "true" + ] + }, + "execution_count": 1, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "require 'daru/view'" + ] + }, + { + "cell_type": "code", + "execution_count": 2, + "metadata": {}, + "outputs": [ + { + "data": { + "application/javascript": [ + "\n", + " /* BEGIN google_visualr.js */\n", + "\n", + "if(!window['googleLT_']){window['googleLT_']=(new Date()).getTime();}if (!window['google']) {\n", + "window['google'] = {};\n", + "}\n", + "if (!window['google']['loader']) {\n", + "window['google']['loader'] = {};\n", + "google.loader.ServiceBase = 'https://www.google.com/uds';\n", + "google.loader.GoogleApisBase = 'https://ajax.googleapis.com/ajax';\n", + "google.loader.ApiKey = 'notsupplied';\n", + "google.loader.KeyVerified = true;\n", + "google.loader.LoadFailure = false;\n", + "google.loader.Secure = true;\n", + "google.loader.GoogleLocale = 'www.google.com';\n", + "google.loader.ClientLocation = null;\n", + "google.loader.AdditionalParams = '';\n", + "(function() {function g(a){return a in l?l[a]:l[a]=-1!=navigator.userAgent.toLowerCase().indexOf(a)}var l={};function m(a,b){var c=function(){};c.prototype=b.prototype;a.ca=b.prototype;a.prototype=new c}function n(a,b,c){var d=Array.prototype.slice.call(arguments,2)||[];return function(){return a.apply(b,d.concat(Array.prototype.slice.call(arguments)))}}function p(a){a=Error(a);a.toString=function(){return this.message};return a}\n", + "function q(a,b){a=a.split(/\\./);for(var c=window,d=0;d\\x3c/script>\"):(g(\"safari\")||g(\"konqueror\"))&&window.setTimeout(B,10)),x.push(a)):y(window,\"load\",a)};t(\"google.setOnLoadCallback\",google.ba);\n", + "function y(a,b,c){if(a.addEventListener)a.addEventListener(b,c,!1);else if(a.attachEvent)a.attachEvent(\"on\"+b,c);else{var d=a[\"on\"+b];a[\"on\"+b]=null!=d?C([c,d]):c}}function C(a){return function(){for(var b=0;b\\x3c/script>'):\"css\"==a&&document.write('')};\n", + "t(\"google.loader.writeLoadTag\",google.loader.f);google.loader.Z=function(a){w=a};t(\"google.loader.rfm\",google.loader.Z);google.loader.aa=function(a){for(var b in a)\"string\"==typeof b&&b&&\":\"==b.charAt(0)&&!v[b]&&(v[b]=new E(b.substring(1),a[b]))};t(\"google.loader.rpl\",google.loader.aa);google.loader.$=function(a){if((a=a.specs)&&a.length)for(var b=0;b\\x3c/script>')},K.Mi=function(b){var c=K.global.document,d=c.createElement(\"script\");d.type=C;d.src=b;d.defer=!1;d.async=!1;c.head.appendChild(d)},\n", + "K.Wl=function(b,c){if(K.tg()){var d=K.global.document;if(!K.Ge&&d.readyState==t){if(/\\bdeps.js$/.test(b))return!1;throw Error('Cannot write \"'+b+'\" after document load');}void 0===c?K.fi?(K.eh=!0,c=\" onreadystatechange='goog.onScriptLoad_(this, \"+ ++K.Sg+\")' \",d.write(n+b+'\"'+c+\">\\x3c/script>\")):K.Ge?K.Mi(b):K.Vl(b):d.write('\n" + ], + "text/plain": [ + "\"\\n
\\n\\n\"" + ] + }, + "execution_count": 4, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "bar_basic_options = {\n", + " title: 'Population of Largest U.S. Cities',\n", + " type: :bar,\n", + "}\n", + "bar_basic_chart = Daru::View::Plot.new(df_city_pop, bar_basic_options, class_chart: 'Charteditor')\n", + "bar_basic_chart.show_in_iruby" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Ruby 2.4.1", + "language": "ruby", + "name": "ruby" + }, + "language_info": { + "file_extension": ".rb", + "mimetype": "application/x-ruby", + "name": "ruby", + "version": "2.4.1" + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} From a30450f775fea366160aac35d2a2dc01f476b420 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Tue, 12 Jun 2018 18:25:32 +0530 Subject: [PATCH 06/15] Update tests and documentation --- .../view/adapters/googlecharts/base_chart.rb | 16 +++- .../adapters/googlecharts/data_table_iruby.rb | 10 +++ .../view/adapters/googlecharts/display.rb | 6 +- spec/adapters/googlecharts/base_chart_spec.rb | 74 +++++++++++++++- .../googlecharts/data_table_iruby_spec.rb | 85 +++++++++++++++++-- spec/adapters/googlecharts/display_spec.rb | 55 ++++++++++++ spec/adapters/googlecharts_spec.rb | 31 +++++++ 7 files changed, 266 insertions(+), 11 deletions(-) diff --git a/lib/daru/view/adapters/googlecharts/base_chart.rb b/lib/daru/view/adapters/googlecharts/base_chart.rb index 9cfe8fd..7494118 100644 --- a/lib/daru/view/adapters/googlecharts/base_chart.rb +++ b/lib/daru/view/adapters/googlecharts/base_chart.rb @@ -19,7 +19,7 @@ def query_response_function_name(element_id) end # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] - # Data of GoogleVisualr DataTable + # Data of GoogleVisualr Chart # @return [String] Data option (dataSourceUrl or dataTable) required to # draw the Chartwrapper based upon the data provided. def append_data(data) @@ -33,6 +33,9 @@ def extract_option_view '\'\'' end + # @param element_id [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] unique function name to save the chart def save_chart_function_name(element_id) "saveChart_#{element_id.tr('-', '_')}" end @@ -51,6 +54,8 @@ def draw_wrapper(element_id) js end + # @param (see #draw_js_chart_editor) + # @return [String] options of the ChartWrapper def extract_chart_wrapper_options(data, element_id) js = '' js << "\n chartType: '#{chart_name}'," @@ -98,6 +103,10 @@ def to_js_chart_wrapper(data, element_id=SecureRandom.uuid) js end + # @param element_id [String] The ID of the DIV element that the Google + # ChartEditor should be rendered in + # @return [String] Generates JavaScript for loading the charteditor package, + # with callback to render ChartEditor def load_js_chart_editor(element_id) js = '' js << "\n google.load('visualization', '#{version}', " @@ -124,6 +133,11 @@ def draw_js_chart_wrapper(data, element_id) js end + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart + # @param element_id [String] The ID of the DIV element that the Google + # ChartEditor should be rendered in + # @return [String] JS function to render the ChartEditor def draw_js_chart_editor(data, element_id) js = '' js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index b64ea6d..3a8830e 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -99,6 +99,9 @@ def extract_option_view '\'\'' 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 save the chart def save_chart_function_name(element_id) "saveChart_#{element_id.tr('-', '_')}" end @@ -119,6 +122,8 @@ def draw_wrapper(element_id) js end + # @param (see #draw_js_chart_editor) + # @return [String] options of the ChartWrapper def extract_chart_wrapper_options(data, element_id) js = '' js << "\n chartType: 'Table'," @@ -174,6 +179,11 @@ def draw_js_chart_wrapper(data, element_id) js end + # @param data [Array, Daru::DataFrame, Daru::Vector, String] + # Data of GoogleVisualr DataTable + # @param element_id [String] The ID of the DIV element that the Google + # ChartEditor should be rendered in + # @return [String] JS function to render the ChartEditor def draw_js_chart_editor(data, element_id) js = '' js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index 5f9af7a..c462fd9 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -35,6 +35,8 @@ def show_script(dom=SecureRandom.uuid, options={}) end end + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart or GoogleVisualr DataTable # @param dom [String] The ID of the DIV element that the Google # Chart should be rendered in # @return [String] js code to render the chart @@ -45,9 +47,11 @@ def get_html_chart_wrapper(data, dom) html end + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart or GoogleVisualr DataTable # @param dom [String] The ID of the DIV element that the Google # Chart should be rendered in - # @return [String] js code to render the chart + # @return [String] js code to render the charteditor def get_html_chart_editor(data, dom) html = '' html << if is_a?(GoogleVisualr::DataTable) diff --git a/spec/adapters/googlecharts/base_chart_spec.rb b/spec/adapters/googlecharts/base_chart_spec.rb index 08f8203..93e1689 100644 --- a/spec/adapters/googlecharts/base_chart_spec.rb +++ b/spec/adapters/googlecharts/base_chart_spec.rb @@ -29,6 +29,12 @@ class_chart: 'ChartWrapper' ) end + let (:plot_spreadsheet_charteditor) { + Daru::View::Plot.new( + @data_spreadsheet, {width: 800, view: {columns: [0, 1]}}, class_chart: 'Charteditor' + ) + } + let(:plot_charteditor) {Daru::View::Plot.new(@data, {}, class_chart: 'Charteditor')} describe "#query_response_function_name" do it "should generate unique function name to handle query response" do @@ -67,7 +73,7 @@ end it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do - js = @plot_spreadsheet.chart.draw_wrapper('id') + js = plot_charteditor.chart.draw_wrapper('id') expect(js).to match(/wrapper_id.draw\(\);/) expect(js).to match(/new google.visualization.ChartEditor()/) expect(js).to match(/google.visualization.events.addListener/) @@ -75,6 +81,34 @@ end end + describe "#extract_chart_wrapper_options" do + it "should return correct options of chartwrapper" do + js = plot_charteditor.chart.extract_chart_wrapper_options(@data, 'id') + expect(js).to match(/chartType: 'LineChart'/) + expect(js).to match(/dataTable: data_table/) + expect(js).to match(/options: \{\}/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/view: ''/) + end + it "should return correct options of chartwrapper when data is URL" do + js = plot_spreadsheet_charteditor.chart.extract_chart_wrapper_options( + @data_spreadsheet, 'id' + ) + expect(js).to match(/chartType: 'LineChart'/) + expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) + expect(js).to match(/options: {width: 800/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/view: {columns: \[0,1\]}/) + end + end + + describe "#save_chart_function_name" do + it "should generate unique function name to save the chart" do + func = plot_spreadsheet_charteditor.chart.save_chart_function_name('i-d') + expect(func).to eq('saveChart_i_d') + end + end + describe "#to_js_spreadsheet" do it "generates valid JS of the chart when "\ "data is imported from google spreadsheets" do @@ -108,6 +142,15 @@ end end + describe "#load_js_chart_editor" do + it "loads valid packages" do + js = plot_charteditor.chart.load_js_chart_editor('id') + expect(js).to match(/google.load\('visualization', '1.0',/i) + expect(js).to match(/\{packages: \['charteditor'\], callback:/i) + expect(js).to match(/draw_id\}\)/i) + 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') @@ -121,6 +164,35 @@ end end + describe "#draw_js_chart_editor" do + it "draws valid JS of the ChartEditor" do + js = plot_charteditor.chart.draw_js_chart_editor(@data, 'id') + expect(js).to match(/var chartEditor_id = null/) + expect(js).to match(/new google.visualization.DataTable/) + expect(js).to match(/new google.visualization.ChartWrapper/) + expect(js).to match(/chartType: 'LineChart'/) + expect(js).to match(/dataTable: data_table/) + expect(js).to match(/options: \{\}/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) + expect(js).to match(/containerId: 'id'/) + end + it "draws valid JS of the ChartEditor when URL of spreadsheet is provided" do + js = plot_spreadsheet_charteditor.chart.draw_js_chart_editor(@data_spreadsheet, 'id') + expect(js).to match(/var chartEditor_id = null/) + expect(js).to match(/new google.visualization.DataTable/) + expect(js).to match(/new google.visualization.ChartWrapper/) + expect(js).to match(/chartType: 'LineChart'/) + expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) + expect(js).to match(/options: {width: 800/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) + expect(js).to match(/containerId: 'id'/) + 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 e29b288..957f41f 100644 --- a/spec/adapters/googlecharts/data_table_iruby_spec.rb +++ b/spec/adapters/googlecharts/data_table_iruby_spec.rb @@ -24,6 +24,12 @@ ) } let(:table_chartwrapper) {Daru::View::Table.new(data, {}, class_chart: 'ChartWrapper')} + let (:table_spreadsheet_charteditor) { + Daru::View::Table.new( + data_spreadsheet, {width: 800, view: {columns: [0, 1]}}, class_chart: 'Charteditor' + ) + } + let(:table_charteditor) {Daru::View::Table.new(data, {}, class_chart: 'Charteditor')} describe "#to_js_full_script" do it "generates valid JS of the table" do @@ -87,7 +93,7 @@ end it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do - js = table_spreadsheet.table.draw_wrapper('id') + js = table_charteditor.table.draw_wrapper('id') expect(js).to match(/wrapper_id.draw\(\);/) expect(js).to match(/new google.visualization.ChartEditor()/) expect(js).to match(/google.visualization.events.addListener/) @@ -95,13 +101,47 @@ end end + describe "#extract_chart_wrapper_options" do + it "should return correct options of chartwrapper" do + js = table_charteditor.table.extract_chart_wrapper_options(data, 'id') + expect(js).to match(/chartType: 'Table'/) + expect(js).to match(/dataTable: data_table/) + expect(js).to match(/options: \{\}/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/view: ''/) + end + it "should return correct options of chartwrapper when data is URL" do + js = table_spreadsheet_charteditor.table.extract_chart_wrapper_options( + data_spreadsheet, 'id' + ) + expect(js).to match(/chartType: 'Table'/) + expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) + expect(js).to match(/options: {width: 800/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/view: {columns: \[0,1\]}/) + end + end + + describe "#save_chart_function_name" do + it "should generate unique function name to save the chart" do + func = table_spreadsheet_charteditor.table.save_chart_function_name('i-d') + expect(func).to eq('saveChart_i_d') + end + 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 + it "loads valid packages" do + js = table_charteditor.table.load_js('id') + expect(js).to match(/google.load\('visualization', 1.0,/i) + expect(js).to match(/\{packages: \['charteditor'\], callback:/i) + expect(js).to match(/draw_id\}\)/i) + end end describe "#draw_js" do @@ -124,7 +164,36 @@ 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(/options: {}/) + expect(js).to match(/containerId: 'id'/) + end + end + + describe "#draw_js_chart_editor" do + it "draws valid JS of the ChartEditor" do + js = table_charteditor.table.draw_js_chart_editor(data, 'id') + expect(js).to match(/var chartEditor_id = null/) + 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'/) + expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) + expect(js).to match(/containerId: 'id'/) + end + it "draws valid JS of the ChartEditor when URL of spreadsheet is provided" do + js = table_spreadsheet_charteditor.table.draw_js_chart_editor(data_spreadsheet, 'id') + expect(js).to match(/var chartEditor_id = null/) + 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(/dataSourceUrl: 'https:\/\/docs.google/) + expect(js).to match(/options: {width: 800/) + expect(js).to match(/containerId: 'id'/) + expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) expect(js).to match(/containerId: 'id'/) end end diff --git a/spec/adapters/googlecharts/display_spec.rb b/spec/adapters/googlecharts/display_spec.rb index 4934f50..042a28e 100644 --- a/spec/adapters/googlecharts/display_spec.rb +++ b/spec/adapters/googlecharts/display_spec.rb @@ -28,6 +28,12 @@ let(:table_chart_wrapper) {Daru::View::Table.new( data, {}, user_options) } + let(:plot_charteditor) {Daru::View::Plot.new( + data, {}, class_chart: 'Charteditor') + } + let(:table_charteditor) {Daru::View::Table.new( + data, {}, class_chart: 'Charteditor') + } describe "#to_html" do it "generates valid JS of the Area Chart" do @@ -87,6 +93,30 @@ expect(js).to match(/containerId: 'id'/) expect(js).to match(/view: ''/) end + it "should generate the valid JS of charteditor" do + js = plot_charteditor.chart.to_html('id') + expect(js).to match(/ Date: Wed, 13 Jun 2018 20:12:41 +0530 Subject: [PATCH 07/15] Line length --- lib/daru/view/adapters/googlecharts/display.rb | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index c462fd9..6d87939 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -82,7 +82,9 @@ def show_script_with_script_tag(dom=SecureRandom.uuid) def to_html(id=nil, options={}) path = if class_chart == 'Charteditor' - File.expand_path('../../templates/googlecharts/chart_editor_div.erb', __dir__) + File.expand_path( + '../../templates/googlecharts/chart_editor_div.erb', __dir__ + ) else File.expand_path('../../templates/googlecharts/chart_div.erb', __dir__) end From 3d1e97a0ade89e6f94c3f3a8a563d928e7600e1e Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Fri, 22 Jun 2018 20:45:57 +0530 Subject: [PATCH 08/15] Use already present template --- lib/daru/view/adapters/googlecharts/display.rb | 11 +++-------- lib/daru/view/templates/googlecharts/chart_div.erb | 3 +++ .../view/templates/googlecharts/chart_editor_div.erb | 5 ----- 3 files changed, 6 insertions(+), 13 deletions(-) delete mode 100644 lib/daru/view/templates/googlecharts/chart_editor_div.erb diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index 6d87939..da60ec1 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -80,14 +80,9 @@ def show_script_with_script_tag(dom=SecureRandom.uuid) end def to_html(id=nil, options={}) - path = - if class_chart == 'Charteditor' - File.expand_path( - '../../templates/googlecharts/chart_editor_div.erb', __dir__ - ) - else - File.expand_path('../../templates/googlecharts/chart_div.erb', __dir__) - end + path = File.expand_path( + '../../templates/googlecharts/chart_div.erb', __dir__ + ) template = File.read(path) id ||= SecureRandom.uuid @html_id = id diff --git a/lib/daru/view/templates/googlecharts/chart_div.erb b/lib/daru/view/templates/googlecharts/chart_div.erb index fa856dd..c18da53 100644 --- a/lib/daru/view/templates/googlecharts/chart_div.erb +++ b/lib/daru/view/templates/googlecharts/chart_div.erb @@ -1,3 +1,6 @@ +<% if class_chart == 'Charteditor' %> + +<% end %>
From be2939dd3bdf2ce9a6a58d4ec944f5f3073d4f50 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Wed, 27 Jun 2018 03:38:50 +0530 Subject: [PATCH 09/15] Changed wrapper_id to wrapper --- lib/daru/view/adapters/googlecharts/base_chart.rb | 11 +++++------ .../view/adapters/googlecharts/data_table_iruby.rb | 11 +++++------ spec/adapters/googlecharts/base_chart_spec.rb | 8 ++++---- spec/adapters/googlecharts/data_table_iruby_spec.rb | 8 ++++---- 4 files changed, 18 insertions(+), 20 deletions(-) diff --git a/lib/daru/view/adapters/googlecharts/base_chart.rb b/lib/daru/view/adapters/googlecharts/base_chart.rb index 7494118..7f2a98c 100644 --- a/lib/daru/view/adapters/googlecharts/base_chart.rb +++ b/lib/daru/view/adapters/googlecharts/base_chart.rb @@ -42,10 +42,10 @@ def save_chart_function_name(element_id) # @see #GooleVisualr::DataTable.draw_wrapper def draw_wrapper(element_id) - return "\n wrapper_#{element_id.tr('-', '_')}.draw();" if + return "\n wrapper.draw();" if class_chart == 'Chartwrapper' js = '' - js << "\n wrapper_#{element_id.tr('-', '_')}.draw();" + js << "\n wrapper.draw();" js << "\n chartEditor_#{element_id.tr('-', '_')} = "\ 'new google.visualization.ChartEditor();' js << "\n google.visualization.events.addListener("\ @@ -121,11 +121,10 @@ def load_js_chart_editor(element_id) # @return [String] JS function to render the chartwrapper def draw_js_chart_wrapper(data, element_id) js = '' - js << "\n var wrapper_#{element_id.tr('-', '_')} = null;" + js << "\n var wrapper = null;" js << "\n function #{chart_function_name(element_id)}() {" js << "\n #{@data_table.to_js}" - js << "\n wrapper_#{element_id.tr('-', '_')} = "\ - 'new google.visualization.ChartWrapper({' + js << "\n wrapper = new google.visualization.ChartWrapper({" js << extract_chart_wrapper_options(data, element_id) js << "\n });" js << draw_wrapper(element_id) @@ -148,7 +147,7 @@ def draw_js_chart_editor(data, element_id) js << "\n }" js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" js << "\n chartEditor_#{element_id.tr('-', '_')}.openDialog("\ - "wrapper_#{element_id.tr('-', '_')}, {});" + 'wrapper, {});' js << "\n }" js end diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index 3a8830e..27b6355 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -110,10 +110,10 @@ def save_chart_function_name(element_id) # # @return [String] Returns string to draw the Chartwrapper and '' otherwise def draw_wrapper(element_id) - return "\n wrapper_#{element_id.tr('-', '_')}.draw();" if + return "\n wrapper.draw();" if class_chart == 'Chartwrapper' js = '' - js << "\n wrapper_#{element_id.tr('-', '_')}.draw();" + js << "\n wrapper.draw();" js << "\n chartEditor_#{element_id.tr('-', '_')} = "\ 'new google.visualization.ChartEditor();' js << "\n google.visualization.events.addListener("\ @@ -167,11 +167,10 @@ def draw_js(element_id) # @return [String] JS function to render the chartwrapper def draw_js_chart_wrapper(data, element_id) js = '' - js << "\n var wrapper_#{element_id.tr('-', '_')} = null;" + js << "\n var wrapper = null;" js << "\n function #{chart_function_name(element_id)}() {" js << "\n #{to_js}" - js << "\n wrapper_#{element_id.tr('-', '_')} = "\ - 'new google.visualization.ChartWrapper({' + js << "\n wrapper = new google.visualization.ChartWrapper({" js << extract_chart_wrapper_options(data, element_id) js << "\n });" js << draw_wrapper(element_id) @@ -194,7 +193,7 @@ def draw_js_chart_editor(data, element_id) js << "\n }" js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" js << "\n chartEditor_#{element_id.tr('-', '_')}.openDialog(" - js << "wrapper_#{element_id.tr('-', '_')}, {});" + js << 'wrapper, {});' js << "\n }" js end diff --git a/spec/adapters/googlecharts/base_chart_spec.rb b/spec/adapters/googlecharts/base_chart_spec.rb index 93e1689..07cb22a 100644 --- a/spec/adapters/googlecharts/base_chart_spec.rb +++ b/spec/adapters/googlecharts/base_chart_spec.rb @@ -69,12 +69,12 @@ it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do js = @area_chart.chart.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) + expect(js).to match(/wrapper.draw\(\);/) end it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do js = plot_charteditor.chart.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) + expect(js).to match(/wrapper.draw\(\);/) expect(js).to match(/new google.visualization.ChartEditor()/) expect(js).to match(/google.visualization.events.addListener/) expect(js).to match(/chartEditor_id, 'ok', saveChart_id/) @@ -175,7 +175,7 @@ expect(js).to match(/options: \{\}/) expect(js).to match(/containerId: 'id'/) expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper, {}\)/) expect(js).to match(/containerId: 'id'/) end it "draws valid JS of the ChartEditor when URL of spreadsheet is provided" do @@ -188,7 +188,7 @@ expect(js).to match(/options: {width: 800/) expect(js).to match(/containerId: 'id'/) expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper, {}\)/) expect(js).to match(/containerId: 'id'/) end end diff --git a/spec/adapters/googlecharts/data_table_iruby_spec.rb b/spec/adapters/googlecharts/data_table_iruby_spec.rb index 957f41f..9a43498 100644 --- a/spec/adapters/googlecharts/data_table_iruby_spec.rb +++ b/spec/adapters/googlecharts/data_table_iruby_spec.rb @@ -89,12 +89,12 @@ it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do js = table_chartwrapper.table.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) + expect(js).to match(/wrapper.draw\(\);/) end it "should draw the chartwrapper only when class_chart is"\ " set to Chartwrapper" do js = table_charteditor.table.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) + expect(js).to match(/wrapper.draw\(\);/) expect(js).to match(/new google.visualization.ChartEditor()/) expect(js).to match(/google.visualization.events.addListener/) expect(js).to match(/chartEditor_id, 'ok', saveChart_id/) @@ -180,7 +180,7 @@ expect(js).to match(/options: {}/) expect(js).to match(/containerId: 'id'/) expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper, {}\)/) expect(js).to match(/containerId: 'id'/) end it "draws valid JS of the ChartEditor when URL of spreadsheet is provided" do @@ -193,7 +193,7 @@ expect(js).to match(/options: {width: 800/) expect(js).to match(/containerId: 'id'/) expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) + expect(js).to match(/chartEditor_id.openDialog\(wrapper, {}\)/) expect(js).to match(/containerId: 'id'/) end end From 85cc0b902f08ff3142566f73ce3ec59fe54839c9 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Mon, 16 Jul 2018 01:48:26 +0530 Subject: [PATCH 10/15] Move common methods to display --- .../view/adapters/googlecharts/base_chart.rb | 42 +---- .../adapters/googlecharts/data_table_iruby.rb | 42 +---- .../view/adapters/googlecharts/display.rb | 36 ++++ spec/adapters/googlecharts/base_chart_spec.rb | 50 ----- .../googlecharts/data_table_iruby_spec.rb | 50 ----- spec/adapters/googlecharts/display_spec.rb | 174 +++++++++++++----- 6 files changed, 177 insertions(+), 217 deletions(-) diff --git a/lib/daru/view/adapters/googlecharts/base_chart.rb b/lib/daru/view/adapters/googlecharts/base_chart.rb index f5dfc79..daa6d37 100644 --- a/lib/daru/view/adapters/googlecharts/base_chart.rb +++ b/lib/daru/view/adapters/googlecharts/base_chart.rb @@ -18,18 +18,6 @@ def extract_option_view '\'\'' end - # @param (see #draw_js_chart_editor) - # @return [String] options of the ChartWrapper - def extract_chart_wrapper_options(data, element_id) - js = '' - js << "\n chartType: '#{chart_name}'," - js << append_data(data) - js << "\n options: #{js_parameters(@options)}," - js << "\n containerId: '#{element_id}'," - js << "\n view: #{extract_option_view}" - js - end - # @param element_id [String] The ID of the DIV element that the Google # ChartEditor should be rendered in # @return [String] Generates JavaScript for loading the charteditor package, @@ -37,8 +25,8 @@ def extract_chart_wrapper_options(data, element_id) def load_js_chart_editor(element_id) js = '' js << "\n google.load('visualization', '#{version}', " - js << "\n {packages: ['charteditor'], callback:" - js << "\n #{chart_function_name(element_id)}});" + js << " {packages: ['charteditor'], callback:" + js << " #{chart_function_name(element_id)}});" js end @@ -50,36 +38,16 @@ def draw_js_chart_wrapper(data, element_id) js = '' js << "\n var wrapper_#{element_id.tr('-', '_')} = null;" js << "\n function #{chart_function_name(element_id)}() {" - js << "\n #{@data_table.to_js}" - js << "\n wrapper_#{element_id.tr('-', '_')} = "\ + js << "\n \t#{@data_table.to_js}" + js << "\n \twrapper_#{element_id.tr('-', '_')} = "\ 'new google.visualization.ChartWrapper({' js << extract_chart_wrapper_options(data, element_id) - js << "\n });" + js << "\n \t});" js << draw_wrapper(element_id) js << "\n };" js end - # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] - # Data of GoogleVisualr Chart - # @param element_id [String] The ID of the DIV element that the Google - # ChartEditor should be rendered in - # @return [String] JS function to render the ChartEditor - def draw_js_chart_editor(data, element_id) - js = '' - js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" - js << draw_js_chart_wrapper(data, element_id) - js << "\n function #{save_chart_function_name(element_id)}(){" - js << "\n chartEditor_#{element_id.tr('-', '_')}.getChartWrapper()."\ - "draw(document.getElementById('#{element_id}'));" - js << "\n }" - js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" - js << "\n chartEditor_#{element_id.tr('-', '_')}.openDialog("\ - "wrapper_#{element_id.tr('-', '_')}, {});" - js << "\n }" - js - end - # Generates JavaScript function for rendering the chart when data is URL of # the google spreadsheet # diff --git a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb index 3a5e0ec..35a1844 100644 --- a/lib/daru/view/adapters/googlecharts/data_table_iruby.rb +++ b/lib/daru/view/adapters/googlecharts/data_table_iruby.rb @@ -74,18 +74,6 @@ def extract_option_view '\'\'' end - # @param (see #draw_js_chart_editor) - # @return [String] options of the ChartWrapper - def extract_chart_wrapper_options(data, element_id) - js = '' - js << "\n chartType: 'Table'," - js << append_data(data) - js << "\n options: #{js_parameters(@options)}," - js << "\n containerId: '#{element_id}'," - js << "\n view: #{extract_option_view}" - js - end - # Generates JavaScript for loading the appropriate Google Visualization # package, with callback to render chart. # @@ -95,8 +83,8 @@ def extract_chart_wrapper_options(data, element_id) def load_js(element_id) js = '' js << "\n google.load('visualization', #{google_table_version}, " - js << "\n {packages: ['#{package_name}'], callback:" - js << "\n #{chart_function_name(element_id)}});" + js << " {packages: ['#{package_name}'], callback:" + js << " #{chart_function_name(element_id)}});" js end @@ -124,36 +112,16 @@ def draw_js_chart_wrapper(data, element_id) js = '' js << "\n var wrapper_#{element_id.tr('-', '_')} = null;" js << "\n function #{chart_function_name(element_id)}() {" - js << "\n #{to_js}" - js << "\n wrapper_#{element_id.tr('-', '_')} = "\ + js << "\n \t#{to_js}" + js << "\n \twrapper_#{element_id.tr('-', '_')} = "\ 'new google.visualization.ChartWrapper({' js << extract_chart_wrapper_options(data, element_id) - js << "\n });" + js << "\n \t});" js << draw_wrapper(element_id) js << "\n };" js end - # @param data [Array, Daru::DataFrame, Daru::Vector, String] - # Data of GoogleVisualr DataTable - # @param element_id [String] The ID of the DIV element that the Google - # ChartEditor should be rendered in - # @return [String] JS function to render the ChartEditor - def draw_js_chart_editor(data, element_id) - js = '' - js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" - js << draw_js_chart_wrapper(data, element_id) - js << "\n function #{save_chart_function_name(element_id)}(){" - js << "\n chartEditor_#{element_id.tr('-', '_')}.getChartWrapper()." - js << "draw(document.getElementById('#{element_id}'));" - js << "\n }" - js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" - js << "\n chartEditor_#{element_id.tr('-', '_')}.openDialog(" - js << "wrapper_#{element_id.tr('-', '_')}, {});" - 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 3f79382..11341fd 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -149,6 +149,22 @@ def save_chart_function_name(element_id) "saveChart_#{element_id.tr('-', '_')}" 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 + # So that it can be used in ChartEditor also # # @return [String] Returns string to draw the Chartwrapper and '' otherwise @@ -202,6 +218,26 @@ def to_js_spreadsheet(data, element_id=SecureRandom.uuid) js << "\n" js end + + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart + # @param element_id [String] The ID of the DIV element that the Google + # ChartEditor should be rendered in + # @return [String] JS function to render the ChartEditor + def draw_js_chart_editor(data, element_id) + js = '' + js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" + js << draw_js_chart_wrapper(data, element_id) + js << "\n function #{save_chart_function_name(element_id)}(){" + js << "\n \tchartEditor_#{element_id.tr('-', '_')}.getChartWrapper()."\ + "draw(document.getElementById('#{element_id}'));" + js << "\n }" + js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" + js << "\n \tchartEditor_#{element_id.tr('-', '_')}.openDialog("\ + "wrapper_#{element_id.tr('-', '_')}, {});" + js << "\n }" + js + end end class DataTable diff --git a/spec/adapters/googlecharts/base_chart_spec.rb b/spec/adapters/googlecharts/base_chart_spec.rb index 6252338..90c0f77 100644 --- a/spec/adapters/googlecharts/base_chart_spec.rb +++ b/spec/adapters/googlecharts/base_chart_spec.rb @@ -53,27 +53,6 @@ end end - describe "#extract_chart_wrapper_options" do - it "should return correct options of chartwrapper" do - js = plot_charteditor.chart.extract_chart_wrapper_options(data, 'id') - expect(js).to match(/chartType: 'LineChart'/) - expect(js).to match(/dataTable: data_table/) - expect(js).to match(/options: \{\}/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: ''/) - end - it "should return correct options of chartwrapper when data is URL" do - js = plot_spreadsheet_charteditor.chart.extract_chart_wrapper_options( - data_spreadsheet, 'id' - ) - expect(js).to match(/chartType: 'LineChart'/) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: {columns: \[0,1\]}/) - end - end - describe "#load_js_chart_editor" do it "loads valid packages" do js = plot_charteditor.chart.load_js_chart_editor('id') @@ -96,35 +75,6 @@ end end - describe "#draw_js_chart_editor" do - it "draws valid JS of the ChartEditor" do - js = plot_charteditor.chart.draw_js_chart_editor(data, 'id') - expect(js).to match(/var chartEditor_id = null/) - expect(js).to match(/new google.visualization.DataTable/) - expect(js).to match(/new google.visualization.ChartWrapper/) - expect(js).to match(/chartType: 'LineChart'/) - expect(js).to match(/dataTable: data_table/) - expect(js).to match(/options: \{\}/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) - expect(js).to match(/containerId: 'id'/) - end - it "draws valid JS of the ChartEditor when URL of spreadsheet is provided" do - js = plot_spreadsheet_charteditor.chart.draw_js_chart_editor(data_spreadsheet, 'id') - expect(js).to match(/var chartEditor_id = null/) - expect(js).to match(/new google.visualization.DataTable/) - expect(js).to match(/new google.visualization.ChartWrapper/) - expect(js).to match(/chartType: 'LineChart'/) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) - expect(js).to match(/containerId: 'id'/) - 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 a158eea..135b7e2 100644 --- a/spec/adapters/googlecharts/data_table_iruby_spec.rb +++ b/spec/adapters/googlecharts/data_table_iruby_spec.rb @@ -65,27 +65,6 @@ end end - describe "#extract_chart_wrapper_options" do - it "should return correct options of chartwrapper" do - js = table_charteditor.table.extract_chart_wrapper_options(data, 'id') - expect(js).to match(/chartType: 'Table'/) - expect(js).to match(/dataTable: data_table/) - expect(js).to match(/options: \{\}/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: ''/) - end - it "should return correct options of chartwrapper when data is URL" do - js = table_spreadsheet_charteditor.table.extract_chart_wrapper_options( - data_spreadsheet, 'id' - ) - expect(js).to match(/chartType: 'Table'/) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: {columns: \[0,1\]}/) - end - end - describe "#load_js" do it "loads valid packages" do js = data_table.table.load_js('id') @@ -127,35 +106,6 @@ end end - describe "#draw_js_chart_editor" do - it "draws valid JS of the ChartEditor" do - js = table_charteditor.table.draw_js_chart_editor(data, 'id') - expect(js).to match(/var chartEditor_id = null/) - 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'/) - expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) - expect(js).to match(/containerId: 'id'/) - end - it "draws valid JS of the ChartEditor when URL of spreadsheet is provided" do - js = table_spreadsheet_charteditor.table.draw_js_chart_editor(data_spreadsheet, 'id') - expect(js).to match(/var chartEditor_id = null/) - 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(/dataSourceUrl: 'https:\/\/docs.google/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/chartEditor_id.getChartWrapper\(\).draw\(/) - expect(js).to match(/chartEditor_id.openDialog\(wrapper_id, {}\)/) - expect(js).to match(/containerId: 'id'/) - end - end - describe "#draw_js_spreadsheet" do it "draws valid JS of the table when "\ "data is imported from google spreadsheets" do diff --git a/spec/adapters/googlecharts/display_spec.rb b/spec/adapters/googlecharts/display_spec.rb index cc69836..b0da244 100644 --- a/spec/adapters/googlecharts/display_spec.rb +++ b/spec/adapters/googlecharts/display_spec.rb @@ -46,6 +46,18 @@ let(:plot_charteditor) {Daru::View::Plot.new( data, {}, chart_class: 'Charteditor') } + let (:plot_spreadsheet_charteditor) { + Daru::View::Plot.new( + data_spreadsheet, + {width: 800}, chart_class: 'Charteditor' + ) + } + let (:table_spreadsheet_charteditor) { + Daru::View::Table.new( + data_spreadsheet, + {width: 800}, chart_class: 'Charteditor' + ) + } let(:table_charteditor) {Daru::View::Table.new( data, {}, chart_class: 'Charteditor') } @@ -129,7 +141,7 @@ it "should generate the valid JS of datatable chartwrapper" do js = table_chart_wrapper.table.to_html('id') expect(js).to match(/google.load\('visualization'/) - expect(js).to match(/callback:\n draw_id/) + expect(js).to match(/callback: draw_id/) expect(js).to match(/new google.visualization.ChartWrapper/) expect(js).to match(/chartType: 'Table'/) expect(js).to match(/dataTable: data_table/) @@ -141,7 +153,7 @@ js = plot_charteditor.chart.to_html('id') expect(js).to match(//i) - expect(js).to match(/google.load\(/i) - expect(js).to match(/https:\/\/docs.google.com\/spreadsheets/i) - expect(js).to match(/gid=0&headers=1&tq=/i) - expect(js).to match(/SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8/i) - expect(js).to match(/var data_table = response.getDataTable/i) - expect(js).to match( - /google.visualization.Table\(document.getElementById\(\'id\'\)/ - ) - expect(js).to match(/table.draw\(data_table, \{width: 800/i) + 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'/) + expect(js).to match(/view: ''/) end end end @@ -457,7 +510,9 @@ context 'when table is drawn' do it "draws valid JS of the table when "\ "data is imported from google spreadsheets" do - js = table_spreadsheet.table.draw_js_spreadsheet(data_spreadsheet, 'id') + js = table_spreadsheet.table.to_js_spreadsheet(data_spreadsheet, 'id') + expect(js).to match(/\n", + "\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + "
abc
" + ], "text/plain": [ - "\"\\n\\n\"" + "\"\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
abc
\"" ] }, "execution_count": 5, @@ -243,7 +234,7 @@ } ], "source": [ - "dt_df.table.to_html" + "dt_df.show_in_iruby" ] }, { @@ -254,7 +245,7 @@ { "data": { "text/plain": [ - "\"\\n\\n\\n \\n \\n \\n \\n \\n \\n
Num1 Num2 Num3
\"" + "\"\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
abc
\"" ] }, "execution_count": 6, @@ -295,23 +286,29 @@ " \n", "$(document).ready(function() {\n", "\n", - " $('#table_id4').DataTable(\n", - " {pageLength: 3}\n", - " );\n", + "\t$('#table_id4').DataTable(\n", + "\t\t{pageLength: 3, data: [[0,1,11,11],[1,2,12,22],[2,3,13,33],[3,4,14,44],[4,5,15,55]]}\n", + "\t);\n", "\n", "});\n", "\n", - "\n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - "
Num1 Num2 Num3
" + "\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + "
abc
" ], "text/plain": [ - "\"\\n\\n\\n \\n \\n \\n \\n \\n \\n
Num1 Num2 Num3
\"" + "\"\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
abc
\"" ] }, "execution_count": 7, @@ -323,13 +320,6 @@ "IRuby.html html_code_dt_df" ] }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [] - }, { "cell_type": "code", "execution_count": null, diff --git a/spec/dummy_iruby/Google Chart | Line Chart.ipynb b/spec/dummy_iruby/Google Chart | Line Chart.ipynb index 881505d..ce21448 100644 --- a/spec/dummy_iruby/Google Chart | Line Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Line Chart.ipynb @@ -448,19 +448,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -482,19 +483,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -635,19 +637,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -681,22 +684,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -772,19 +773,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 12, @@ -811,19 +813,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -879,22 +882,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 14, @@ -933,19 +934,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 15, @@ -970,19 +972,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 16, @@ -1015,22 +1018,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 17, @@ -1067,19 +1068,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 18, @@ -1104,19 +1106,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 19, @@ -1152,19 +1155,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 20, @@ -1201,19 +1205,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 21, @@ -1256,19 +1261,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 22, diff --git a/spec/dummy_iruby/Google Chart | Area Chart.ipynb b/spec/dummy_iruby/Google Chart | Area Chart.ipynb index 2a3f4b1..ba506f1 100644 --- a/spec/dummy_iruby/Google Chart | Area Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Area Chart.ipynb @@ -356,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -399,19 +397,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -436,19 +435,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -482,19 +482,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -529,19 +530,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, diff --git a/spec/dummy_iruby/Google Chart | Bar Chart.ipynb b/spec/dummy_iruby/Google Chart | Bar Chart.ipynb index 82632c2..c904a25 100644 --- a/spec/dummy_iruby/Google Chart | Bar Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Bar Chart.ipynb @@ -466,22 +466,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -502,19 +500,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -539,19 +538,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -592,22 +592,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -648,19 +646,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -690,22 +689,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -746,19 +743,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, @@ -788,22 +786,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 11, @@ -841,19 +837,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 12, @@ -890,22 +887,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -942,19 +937,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 14, @@ -983,22 +979,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 15, @@ -1027,19 +1021,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 16, @@ -1066,19 +1061,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 17, @@ -1106,19 +1102,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 18, @@ -1157,22 +1154,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 19, @@ -1201,19 +1196,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 20, @@ -1243,22 +1239,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 21, @@ -1288,19 +1282,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 22, diff --git a/spec/dummy_iruby/Google Chart | Bubble Chart.ipynb b/spec/dummy_iruby/Google Chart | Bubble Chart.ipynb index e37f381..9a5b60d 100644 --- a/spec/dummy_iruby/Google Chart | Bubble Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Bubble Chart.ipynb @@ -356,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -405,19 +403,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -442,19 +441,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -649,19 +649,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -686,19 +687,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -729,19 +731,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -779,19 +782,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, diff --git a/spec/dummy_iruby/Google Chart | Candlestick Chart.ipynb b/spec/dummy_iruby/Google Chart | Candlestick Chart.ipynb index 66d3ea1..920bfe5 100644 --- a/spec/dummy_iruby/Google Chart | Candlestick Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Candlestick Chart.ipynb @@ -495,19 +495,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -535,19 +536,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, diff --git a/spec/dummy_iruby/Google Chart | Combo Chart.ipynb b/spec/dummy_iruby/Google Chart | Combo Chart.ipynb index aecaaa3..202ce44 100644 --- a/spec/dummy_iruby/Google Chart | Combo Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Combo Chart.ipynb @@ -356,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -401,19 +399,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, diff --git a/spec/dummy_iruby/Google Chart | Data from google spreadsheet.ipynb b/spec/dummy_iruby/Google Chart | Data from google spreadsheet.ipynb index 8380055..7765ea4 100644 --- a/spec/dummy_iruby/Google Chart | Data from google spreadsheet.ipynb +++ b/spec/dummy_iruby/Google Chart | Data from google spreadsheet.ipynb @@ -356,25 +356,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -398,23 +397,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -435,25 +435,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -475,25 +474,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -516,23 +514,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -553,25 +552,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -594,23 +592,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -631,23 +630,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, @@ -668,23 +668,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 11, diff --git a/spec/dummy_iruby/Google Chart | Histogram.ipynb b/spec/dummy_iruby/Google Chart | Histogram.ipynb index e9217a7..a0099f0 100644 --- a/spec/dummy_iruby/Google Chart | Histogram.ipynb +++ b/spec/dummy_iruby/Google Chart | Histogram.ipynb @@ -700,22 +700,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -743,19 +741,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -782,19 +781,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -823,19 +823,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -883,19 +884,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -1099,19 +1101,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 11, diff --git a/spec/dummy_iruby/Google Chart | Org Chart.ipynb b/spec/dummy_iruby/Google Chart | Org Chart.ipynb index 5f63ff6..824bcba 100644 --- a/spec/dummy_iruby/Google Chart | Org Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Org Chart.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -398,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -451,19 +407,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, diff --git a/spec/dummy_iruby/Google Chart | Pie Chart.ipynb b/spec/dummy_iruby/Google Chart | Pie Chart.ipynb index c62124a..6a9b250 100644 --- a/spec/dummy_iruby/Google Chart | Pie Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Pie Chart.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -398,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -442,19 +398,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -479,19 +436,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -523,19 +481,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -560,19 +519,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -608,22 +568,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -651,19 +609,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -687,19 +646,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, @@ -734,22 +694,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 11, @@ -780,19 +738,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 12, @@ -817,19 +776,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -938,19 +898,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 15, @@ -971,19 +932,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 16, @@ -1125,19 +1087,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 18, diff --git a/spec/dummy_iruby/Google Chart | Stepped Area Chart.ipynb b/spec/dummy_iruby/Google Chart | Stepped Area Chart.ipynb index 9a41c03..e6596c8 100644 --- a/spec/dummy_iruby/Google Chart | Stepped Area Chart.ipynb +++ b/spec/dummy_iruby/Google Chart | Stepped Area Chart.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -398,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -442,19 +398,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -479,19 +436,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -519,19 +477,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -561,22 +520,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -605,19 +562,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -652,19 +610,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, diff --git a/spec/dummy_iruby/Google Chart | Timeline.ipynb b/spec/dummy_iruby/Google Chart | Timeline.ipynb index a556317..7055afd 100644 --- a/spec/dummy_iruby/Google Chart | Timeline.ipynb +++ b/spec/dummy_iruby/Google Chart | Timeline.ipynb @@ -445,19 +445,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -725,19 +726,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, @@ -765,22 +767,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 11, @@ -821,19 +821,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 12, @@ -861,19 +862,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -894,19 +896,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 14, @@ -927,22 +930,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 15, @@ -973,19 +974,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 16, @@ -1006,19 +1008,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 17, @@ -1046,22 +1049,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 18, @@ -1093,19 +1094,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 19, @@ -1126,19 +1128,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 20, @@ -1159,19 +1162,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 21, @@ -1197,19 +1201,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 22, @@ -1241,19 +1246,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 23, @@ -1287,19 +1293,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 24, @@ -1320,19 +1327,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 25, @@ -1366,22 +1374,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 26, @@ -1413,19 +1419,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 27, diff --git a/spec/dummy_iruby/Google Chart | Treemap.ipynb b/spec/dummy_iruby/Google Chart | Treemap.ipynb index 8b86f69..c719bf8 100644 --- a/spec/dummy_iruby/Google Chart | Treemap.ipynb +++ b/spec/dummy_iruby/Google Chart | Treemap.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -398,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -466,19 +422,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -503,19 +460,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -553,19 +511,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -610,19 +569,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, diff --git a/spec/dummy_iruby/Google Chart | gauge.ipynb b/spec/dummy_iruby/Google Chart | gauge.ipynb index a2aaa57..cd62196 100644 --- a/spec/dummy_iruby/Google Chart | gauge.ipynb +++ b/spec/dummy_iruby/Google Chart | gauge.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -398,22 +356,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -442,19 +398,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, diff --git a/spec/dummy_iruby/Google Charts | Basics.ipynb b/spec/dummy_iruby/Google Charts | Basics.ipynb index 5d9379c..91eee45 100644 --- a/spec/dummy_iruby/Google Charts | Basics.ipynb +++ b/spec/dummy_iruby/Google Charts | Basics.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -398,7 +356,7 @@ { "data": { "text/plain": [ - "#, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}>>" + "#, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @user_options={}, @data=[]>>" ] }, "execution_count": 3, @@ -438,19 +396,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -834,7 +793,24 @@ { "data": { "text/plain": [ - "#\n", + "#\n", + " 0 1\n", + " 0 0 0\n", + " 1 1 10\n", + " 2 2 23\n", + " 3 3 17\n", + " 4 4 18\n", + " 5 5 9\n", + " 6 6 11\n", + " 7 7 27\n", + " 8 8 33\n", + " 9 9 40\n", + " 10 10 32\n", + " 11 11 35\n", + " 12 12 30\n", + " 13 13 40\n", + " 14 14 42\n", + " ... ... ..., @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @chart=#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @user_options={}, @data=#\n", " 0 1\n", " 0 0 0\n", " 1 1 10\n", @@ -851,7 +827,7 @@ " 12 12 30\n", " 13 13 40\n", " 14 14 42\n", - " ... ... ..., @options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @chart=#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}>>" + " ... ... ...>>" ] }, "execution_count": 7, @@ -871,19 +847,37 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @html_id=\"8bc27337-9c6d-47e0-8df7-97741dcb8883\">" + "#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @user_options={}, @data=#\n", + " 0 1\n", + " 0 0 0\n", + " 1 1 10\n", + " 2 2 23\n", + " 3 3 17\n", + " 4 4 18\n", + " 5 5 9\n", + " 6 6 11\n", + " 7 7 27\n", + " 8 8 33\n", + " 9 9 40\n", + " 10 10 32\n", + " 11 11 35\n", + " 12 12 30\n", + " 13 13 40\n", + " 14 14 42\n", + " ... ... ..., @html_id=\"83083c90-f37c-4f83-a662-77248191f5cd\">" ] }, "execution_count": 8, @@ -904,22 +898,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @options={}, @html_id=\"8a42cd0f-3083-4c4f-b350-a82749343e61\">" + "#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={}, @html_id=\"26599243-bc79-489d-aa5c-4cabc00675b4\">" ] }, "execution_count": 9, @@ -959,22 +951,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @options={:pageSize=>10}, @html_id=\"6fd6a1c0-4914-4e39-ac70-333d5b71bddc\">" + "#\"number\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={:pageSize=>10}, @html_id=\"05cae6d7-98c9-40f6-99f2-047aa8730a3f\">" ] }, "execution_count": 11, @@ -1029,19 +1019,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -1061,19 +1052,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 14, @@ -1191,13 +1183,19 @@ { "data": { "text/plain": [ - "#\n", + "#\n", + " city population\n", + " 0 New York C 8175000\n", + " 1 Los Angele 3792000\n", + " 2 Chicago, I 2695000\n", + " 3 Houston, T 2099000\n", + " 4 Philadelph 1526000, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @chart=#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @user_options={}, @data=#\n", " city population\n", " 0 New York C 8175000\n", " 1 Los Angele 3792000\n", " 2 Chicago, I 2695000\n", " 3 Houston, T 2099000\n", - " 4 Philadelph 1526000, @options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @chart=#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}>>" + " 4 Philadelph 1526000>>" ] }, "execution_count": 16, @@ -1217,19 +1215,26 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @html_id=\"3e7b265f-220f-4d50-bf47-596d6f9aad80\">" + "#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @user_options={}, @data=#\n", + " city population\n", + " 0 New York C 8175000\n", + " 1 Los Angele 3792000\n", + " 2 Chicago, I 2695000\n", + " 3 Houston, T 2099000\n", + " 4 Philadelph 1526000, @html_id=\"99a64459-528c-4822-b6e7-a031765cb13b\">" ] }, "execution_count": 17, @@ -1249,13 +1254,19 @@ { "data": { "text/plain": [ - "#\n", + "#\n", + " city population\n", + " 0 New York C 8175000\n", + " 1 Los Angele 3792000\n", + " 2 Chicago, I 2695000\n", + " 3 Houston, T 2099000\n", + " 4 Philadelph 1526000, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @chart=#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}, @user_options={}, @data=#\n", " city population\n", " 0 New York C 8175000\n", " 1 Los Angele 3792000\n", " 2 Chicago, I 2695000\n", " 3 Houston, T 2099000\n", - " 4 Philadelph 1526000, @options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @chart=#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={}>>" + " 4 Philadelph 1526000>>" ] }, "execution_count": 18, @@ -1275,19 +1286,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 19, @@ -1357,19 +1369,26 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={\"title\"=>\"Population of Largest U.S. Cities\", \"chartArea\"=>{:width=>\"50%\"}, \"hAxis\"=>{:title=>\"Total Population\", :minValue=>0}, \"vAxis\"=>{:title=>\"City\"}}, @html_id=\"86e7090e-c555-46c3-9112-d1ceb8b90b2e\">" + "#\"string\", :label=>:city}, {:type=>\"number\", :label=>:population}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={}>, @listeners=[], @version=\"1.0\", @language=nil, @material=false, @options={\"title\"=>\"Population of Largest U.S. Cities\", \"chartArea\"=>{:width=>\"50%\"}, \"hAxis\"=>{:title=>\"Total Population\", :minValue=>0}, \"vAxis\"=>{:title=>\"City\"}}, @user_options={}, @data=#\n", + " city population\n", + " 0 New York C 8175000\n", + " 1 Los Angele 3792000\n", + " 2 Chicago, I 2695000\n", + " 3 Houston, T 2099000\n", + " 4 Philadelph 1526000, @html_id=\"70a381ee-1a43-4734-85f1-b21df8c7148e\">" ] }, "execution_count": 22, @@ -1409,19 +1428,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 24, @@ -1720,22 +1740,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 27, @@ -1756,19 +1774,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 28, @@ -1812,19 +1831,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 30, diff --git a/spec/dummy_iruby/Google Charts | ChartEditor.ipynb b/spec/dummy_iruby/Google Charts | ChartEditor.ipynb index bd272f2..3e24dc8 100644 --- a/spec/dummy_iruby/Google Charts | ChartEditor.ipynb +++ b/spec/dummy_iruby/Google Charts | ChartEditor.ipynb @@ -460,39 +460,37 @@ "data": { "text/html": [ "\n", - "\n", + "\n", "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n\\n\\n
\\n\\n\"" + "\"\\n\\n\\n
\\n\\n\"" ] }, "execution_count": 4, diff --git a/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb b/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb index 73bb6fa..c6d1203 100644 --- a/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb +++ b/spec/dummy_iruby/Google Charts | Chartwrapper.ipynb @@ -357,28 +357,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -407,26 +405,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -451,26 +449,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -498,26 +496,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -543,26 +541,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -588,28 +586,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -632,26 +628,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -674,26 +670,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, @@ -819,28 +815,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 12, @@ -862,26 +856,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -907,26 +901,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 14, @@ -952,28 +946,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 15, @@ -995,28 +987,26 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "\n" ], "text/plain": [ - "\"\\n
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 16, diff --git a/spec/dummy_iruby/Google Charts | Column Charts.ipynb b/spec/dummy_iruby/Google Charts | Column Charts.ipynb index d437943..2159be4 100644 --- a/spec/dummy_iruby/Google Charts | Column Charts.ipynb +++ b/spec/dummy_iruby/Google Charts | Column Charts.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -501,22 +459,25 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>\"Element\"}, {:type=>\"number\", :label=>\"Density\"}], @rows=[[#, #], [#, #], [#, #], [#, #]], @options={:height=>300, :width=>200}, @html_id=\"5afe257d-dcd1-48eb-82a3-9972a701e6df\">" + "#\"string\", :label=>\"Element\"}, {:type=>\"number\", :label=>\"Density\"}], @rows=[[#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={:height=>300, :width=>200}, @data=#\n", + " Element Density\n", + " 0 Copper 8.94\n", + " 1 Silver 10.49\n", + " 2 Gold 19.3\n", + " 3 Platinum 21.45, @user_options={}, @html_id=\"601e0bb6-7e61-4371-bd1a-7ccba4431b25\">" ] }, "execution_count": 4, @@ -537,19 +498,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -707,22 +669,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>\"Genre\"}, {:type=>\"number\", :label=>\"Fantasy & Sci Fi\"}, {:type=>\"number\", :label=>\"Romance\"}, {:type=>\"number\", :label=>\"Mystery/Crime\"}, {:type=>\"number\", :label=>\"General\"}, {:type=>\"number\", :label=>\"Western\"}, {:type=>\"number\", :label=>\"Literature\"}], @rows=[[#, #, #, #, #, #, #], [#, #, #, #, #, #, #], [#, #, #, #, #, #, #]], @options={:height=>300, :width=>700}, @html_id=\"3401febf-0364-4fe3-9a96-120f79617dfe\">" + "#\"string\", :label=>\"Genre\"}, {:type=>\"number\", :label=>\"Fantasy & Sci Fi\"}, {:type=>\"number\", :label=>\"Romance\"}, {:type=>\"number\", :label=>\"Mystery/Crime\"}, {:type=>\"number\", :label=>\"General\"}, {:type=>\"number\", :label=>\"Western\"}, {:type=>\"number\", :label=>\"Literature\"}], @rows=[[#, #, #, #, #, #, #], [#, #, #, #, #, #, #], [#, #, #, #, #, #, #]], @listeners=[], @options={:height=>300, :width=>700}, @data=#\n", + " Genre Fantasy & Romance Mystery/Cr General Western Literature\n", + " 0 2010 10 24 20 32 18 5\n", + " 1 2020 16 22 23 30 16 9\n", + " 2 2030 28 19 29 30 12 13, @user_options={}, @html_id=\"53bd1f56-1eca-4350-808a-6bb2623212c5\">" ] }, "execution_count": 7, @@ -743,19 +707,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -784,19 +749,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -824,19 +790,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, @@ -996,22 +963,26 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>\"Galaxy\"}, {:type=>\"number\", :label=>\"Distance\"}, {:type=>\"number\", :label=>\"Brightness\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #]], @options={:height=>300, :width=>700}, @html_id=\"ba115b47-8bc9-4f05-a34a-723334219b09\">" + "#\"string\", :label=>\"Galaxy\"}, {:type=>\"number\", :label=>\"Distance\"}, {:type=>\"number\", :label=>\"Brightness\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #]], @listeners=[], @options={:height=>300, :width=>700}, @data=#\n", + " Galaxy Distance Brightness\n", + " 0 Canis Majo 8000 23.3\n", + " 1 Sagittariu 24000 4.5\n", + " 2 Ursa Major 30000 14.3\n", + " 3 Lg. Magell 50000 0.9\n", + " 4 Bootes I 60000 13.1, @user_options={}, @html_id=\"6bd1fd22-d17f-4915-a8ec-2b116ee16983\">" ] }, "execution_count": 12, @@ -1032,19 +1003,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -1083,19 +1055,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 14, diff --git a/spec/dummy_iruby/Google Charts | Event Handling.ipynb b/spec/dummy_iruby/Google Charts | Event Handling.ipynb index 87f699c..e3c7792 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\\n\"" ] }, "execution_count": 3, @@ -410,13 +409,14 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -459,13 +459,14 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, diff --git a/spec/dummy_iruby/Google Charts | Geo Charts examples.ipynb b/spec/dummy_iruby/Google Charts | Geo Charts examples.ipynb index aee2ab7..fdfb8f0 100644 --- a/spec/dummy_iruby/Google Charts | Geo Charts examples.ipynb +++ b/spec/dummy_iruby/Google Charts | Geo Charts examples.ipynb @@ -363,19 +363,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 3, @@ -608,19 +609,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -651,22 +653,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>\"Country\"}, {:type=>\"number\", :label=>\"Latitude\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @options={:pageSize=>5, :height=>350, :width=>350}, @data=#\n", + "#\"string\", :label=>\"Country\"}, {:type=>\"number\", :label=>\"Latitude\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={:pageSize=>5, :height=>350, :width=>350}, @data=#\n", " Country Latitude\n", " 0 Algeria 36\n", " 1 Angola -8\n", @@ -683,7 +683,7 @@ " 12 Comoros -12\n", " 13 Cote d'Ivo 6\n", " 14 Democratic -3\n", - " ... ... ..., @user_options={}, @html_id=\"3f871fcd-a085-42c0-bfd5-c51eebc10dbb\">" + " ... ... ..., @user_options={}, @html_id=\"c706e23c-18ec-416d-93ec-b43f236b3292\">" ] }, "execution_count": 6, @@ -731,19 +731,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, diff --git a/spec/dummy_iruby/Google Charts | Scatter Chart.ipynb b/spec/dummy_iruby/Google Charts | Scatter Chart.ipynb index dfbcd4b..b86fb0a 100644 --- a/spec/dummy_iruby/Google Charts | Scatter Chart.ipynb +++ b/spec/dummy_iruby/Google Charts | Scatter Chart.ipynb @@ -15,48 +15,6 @@ "Install the mechanize gem version ~>2.7.5 for using mechanize functions.\n" ] }, - { - "data": { - "application/javascript": [ - "if(window['d3'] === undefined ||\n", - " window['Nyaplot'] === undefined){\n", - " var path = {\"d3\":\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\",\"downloadable\":\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\"};\n", - "\n", - "\n", - "\n", - " var shim = {\"d3\":{\"exports\":\"d3\"},\"downloadable\":{\"exports\":\"downloadable\"}};\n", - "\n", - " require.config({paths: path, shim:shim});\n", - "\n", - "\n", - "require(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\n", - "\n", - "\tvar script = d3.select(\"head\")\n", - "\t .append(\"script\")\n", - "\t .attr(\"src\", \"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\")\n", - "\t .attr(\"async\", true);\n", - "\n", - "\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\n", - "\n", - "\n", - "\t var event = document.createEvent(\"HTMLEvents\");\n", - "\t event.initEvent(\"load_nyaplot\",false,false);\n", - "\t window.dispatchEvent(event);\n", - "\t console.log('Finished loading Nyaplotjs');\n", - "\n", - "\t};\n", - "\n", - "\n", - "});});\n", - "}\n" - ], - "text/plain": [ - "\"if(window['d3'] === undefined ||\\n window['Nyaplot'] === undefined){\\n var path = {\\\"d3\\\":\\\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min\\\",\\\"downloadable\\\":\\\"http://cdn.rawgit.com/domitry/d3-downloadable/master/d3-downloadable\\\"};\\n\\n\\n\\n var shim = {\\\"d3\\\":{\\\"exports\\\":\\\"d3\\\"},\\\"downloadable\\\":{\\\"exports\\\":\\\"downloadable\\\"}};\\n\\n require.config({paths: path, shim:shim});\\n\\n\\nrequire(['d3'], function(d3){window['d3']=d3;console.log('finished loading d3');require(['downloadable'], function(downloadable){window['downloadable']=downloadable;console.log('finished loading downloadable');\\n\\n\\tvar script = d3.select(\\\"head\\\")\\n\\t .append(\\\"script\\\")\\n\\t .attr(\\\"src\\\", \\\"http://cdn.rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js\\\")\\n\\t .attr(\\\"async\\\", true);\\n\\n\\tscript[0][0].onload = script[0][0].onreadystatechange = function(){\\n\\n\\n\\t var event = document.createEvent(\\\"HTMLEvents\\\");\\n\\t event.initEvent(\\\"load_nyaplot\\\",false,false);\\n\\t window.dispatchEvent(event);\\n\\t console.log('Finished loading Nyaplotjs');\\n\\n\\t};\\n\\n\\n});});\\n}\\n\"" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, { "data": { "text/plain": [ @@ -519,22 +477,27 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"Age\"}, {:type=>\"number\", :label=>\"Weight\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @options={:pageSize=>5, :height=>200, :width=>100}, @html_id=\"579a2867-a52a-403c-b560-f912e5926a85\">" + "#\"number\", :label=>\"Age\"}, {:type=>\"number\", :label=>\"Weight\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={:pageSize=>5, :height=>200, :width=>100}, @data=#\n", + " Age Weight\n", + " 0 8 12\n", + " 1 4 5.5\n", + " 2 11 14\n", + " 3 4 5\n", + " 4 3 3.5\n", + " 5 6.5 7, @user_options={}, @html_id=\"14b8c044-8c76-47b7-9318-d4139dff6014\">" ] }, "execution_count": 4, @@ -555,19 +518,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -976,22 +940,37 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"Hours Studied\"}, {:type=>\"number\", :label=>\"Final\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @options={:pageSize=>10, :height=>300, :width=>200}, @html_id=\"f17999fd-4a20-47c5-8bfe-b460311d425c\">" + "#\"number\", :label=>\"Hours Studied\"}, {:type=>\"number\", :label=>\"Final\"}], @rows=[[#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #], [#, #]], @listeners=[], @options={:pageSize=>10, :height=>300, :width=>200}, @data=#\n", + " Hours Stud Final\n", + " 0 0 67\n", + " 1 1 88\n", + " 2 2 77\n", + " 3 3 93\n", + " 4 4 85\n", + " 5 5 91\n", + " 6 6 71\n", + " 7 7 78\n", + " 8 8 93\n", + " 9 9 80\n", + " 10 10 82\n", + " 11 0 75\n", + " 12 5 80\n", + " 13 3 90\n", + " 14 1 72\n", + " ... ... ..., @user_options={}, @html_id=\"1c139862-90a0-4208-9b14-407ce47c5146\">" ] }, "execution_count": 7, @@ -1012,19 +991,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -1471,22 +1451,37 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"Student ID\"}, {:type=>\"number\", :label=>\"Hours Studied\"}, {:type=>\"number\", :label=>\"Final\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #]], @options={:pageSize=>10, :height=>300, :width=>300}, @html_id=\"e68527c5-a05b-4c92-bf58-e581546f91e8\">" + "#\"number\", :label=>\"Student ID\"}, {:type=>\"number\", :label=>\"Hours Studied\"}, {:type=>\"number\", :label=>\"Final\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #]], @listeners=[], @options={:pageSize=>10, :height=>300, :width=>300}, @data=#\n", + " Student ID Hours Stud Final\n", + " 0 0 0 67\n", + " 1 1 1 88\n", + " 2 2 2 77\n", + " 3 3 3 93\n", + " 4 4 4 85\n", + " 5 5 5 91\n", + " 6 6 6 71\n", + " 7 7 7 78\n", + " 8 8 8 93\n", + " 9 9 9 80\n", + " 10 10 10 82\n", + " 11 11 0 75\n", + " 12 12 5 80\n", + " 13 13 3 90\n", + " 14 14 1 72\n", + " ... ... ... ..., @user_options={}, @html_id=\"066d0591-6132-4a5d-814b-1905adf50e09\">" ] }, "execution_count": 10, @@ -1507,19 +1502,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 11, diff --git a/spec/dummy_iruby/GoogleChart | DataTables-Formatters.ipynb b/spec/dummy_iruby/GoogleChart | DataTables-Formatters.ipynb index d3b5890..525e148 100644 --- a/spec/dummy_iruby/GoogleChart | DataTables-Formatters.ipynb +++ b/spec/dummy_iruby/GoogleChart | DataTables-Formatters.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\\n\"" ] }, "execution_count": 3, @@ -441,13 +439,12 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 4, @@ -516,13 +512,12 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 5, @@ -582,26 +576,24 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 6, @@ -637,24 +629,22 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 7, @@ -686,24 +676,22 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -736,24 +724,22 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, diff --git a/spec/dummy_iruby/GoolgeChart | Datatables.ipynb b/spec/dummy_iruby/GoolgeChart | Datatables.ipynb index 206de29..19af175 100644 --- a/spec/dummy_iruby/GoolgeChart | Datatables.ipynb +++ b/spec/dummy_iruby/GoolgeChart | Datatables.ipynb @@ -472,13 +472,13 @@ { "data": { "text/plain": [ - "#\n", + "#\n", " a b c\n", " one 1 11 11\n", " two 2 12 22\n", " three 3 13 33\n", " four 4 14 44\n", - " five 5 15 55, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"number\", :label=>:a}, {:type=>\"number\", :label=>:b}, {:type=>\"number\", :label=>:c}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #]], @options={}, @data=#\n", + " five 5 15 55, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"number\", :label=>:a}, {:type=>\"number\", :label=>:b}, {:type=>\"number\", :label=>:c}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #], [#, #, #]], @listeners=[], @options={}, @data=#\n", " a b c\n", " one 1 11 11\n", " two 2 12 22\n", @@ -564,22 +564,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 8, @@ -599,7 +597,7 @@ { "data": { "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 9, @@ -619,22 +617,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 10, @@ -754,12 +750,12 @@ { "data": { "text/plain": [ - "#\n", + "#\n", " 0 1 2\n", " 0 Mike {:v=>10000 true\n", " 1 Jim {:v=>8000, false\n", " 2 Alice {:v=>12500 true\n", - " 3 Bob {:v=>7000, true, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"string\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}, {:type=>\"boolean\", :label=>\"2\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #]], @options={}, @data=#\n", + " 3 Bob {:v=>7000, true, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"string\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}, {:type=>\"boolean\", :label=>\"2\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #]], @listeners=[], @options={}, @data=#\n", " 0 1 2\n", " 0 Mike {:v=>10000 true\n", " 1 Jim {:v=>8000, false\n", @@ -784,22 +780,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 13, @@ -848,12 +842,12 @@ { "data": { "text/plain": [ - "#\n", + "#\n", " 0 1 2\n", " 0 Mike {:v=>10000 true\n", " 1 Jim {:v=>8000, false\n", " 2 Alice {:v=>12500 true\n", - " 3 Bob {:v=>7000, true, @options={:showRowNumber=>true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"string\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}, {:type=>\"boolean\", :label=>\"2\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #]], @options={:showRowNumber=>true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @data=#\n", + " 3 Bob {:v=>7000, true, @options={:showRowNumber=>true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"string\", :label=>\"0\"}, {:type=>\"number\", :label=>\"1\"}, {:type=>\"boolean\", :label=>\"2\"}], @rows=[[#, #, #], [#, #, #], [#, #, #], [#, #, #]], @listeners=[], @options={:showRowNumber=>true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @data=#\n", " 0 1 2\n", " 0 Mike {:v=>10000 true\n", " 1 Jim {:v=>8000, false\n", @@ -878,22 +872,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 16, @@ -933,7 +925,7 @@ { "data": { "text/plain": [ - "#true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @data=[], @user_options={}>>" + "#true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @data=[], @user_options={}>>" ] }, "execution_count": 18, @@ -986,22 +978,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 20, @@ -1064,7 +1054,7 @@ { "data": { "text/plain": [ - "#[{:id=>\"A\", :label=>\"NEW A\", :type=>\"string\"}, {:id=>\"B\", :label=>\"B-label\", :type=>\"number\"}, {:id=>\"C\", :label=>\"C-label\", :type=>\"date\"}], :rows=>[{:c=>[{:v=>\"a\"}, {:v=>1.0, :f=>\"One\"}, {:v=>#, :f=>\"2/28/08 12:31 AM\"}]}, {:c=>[{:v=>\"b\"}, {:v=>2.0, :f=>\"Two\"}, {:v=>#, :f=>\"3/30/08 12:31 AM\"}]}, {:c=>[{:v=>\"c\"}, {:v=>3.0, :f=>\"Three\"}, {:v=>#, :f=>\"4/30/08 12:31 AM\"}]}]}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"string\", :label=>\"NEW A\", :id=>\"A\"}, {:type=>\"number\", :label=>\"B-label\", :id=>\"B\"}, {:type=>\"date\", :label=>\"C-label\", :id=>\"C\"}], @rows=[[#, #, #, @type=\"date\", @f=\"2/28/08 12:31 AM\", @p=nil>], [#, #, #, @type=\"date\", @f=\"3/30/08 12:31 AM\", @p=nil>], [#, #, #, @type=\"date\", @f=\"4/30/08 12:31 AM\", @p=nil>]], @options={:cols=>[{:id=>\"A\", :label=>\"NEW A\", :type=>\"string\"}, {:id=>\"B\", :label=>\"B-label\", :type=>\"number\"}, {:id=>\"C\", :label=>\"C-label\", :type=>\"date\"}], :rows=>[{:c=>[{:v=>\"a\"}, {:v=>1.0, :f=>\"One\"}, {:v=>#, :f=>\"2/28/08 12:31 AM\"}]}, {:c=>[{:v=>\"b\"}, {:v=>2.0, :f=>\"Two\"}, {:v=>#, :f=>\"3/30/08 12:31 AM\"}]}, {:c=>[{:v=>\"c\"}, {:v=>3.0, :f=>\"Three\"}, {:v=>#, :f=>\"4/30/08 12:31 AM\"}]}]}, @data=[], @user_options={}>>" + "#[{:id=>\"A\", :label=>\"NEW A\", :type=>\"string\"}, {:id=>\"B\", :label=>\"B-label\", :type=>\"number\"}, {:id=>\"C\", :label=>\"C-label\", :type=>\"date\"}], :rows=>[{:c=>[{:v=>\"a\"}, {:v=>1.0, :f=>\"One\"}, {:v=>#, :f=>\"2/28/08 12:31 AM\"}]}, {:c=>[{:v=>\"b\"}, {:v=>2.0, :f=>\"Two\"}, {:v=>#, :f=>\"3/30/08 12:31 AM\"}]}, {:c=>[{:v=>\"c\"}, {:v=>3.0, :f=>\"Three\"}, {:v=>#, :f=>\"4/30/08 12:31 AM\"}]}]}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"string\", :label=>\"NEW A\", :id=>\"A\"}, {:type=>\"number\", :label=>\"B-label\", :id=>\"B\"}, {:type=>\"date\", :label=>\"C-label\", :id=>\"C\"}], @rows=[[#, #, #, @type=\"date\", @f=\"2/28/08 12:31 AM\", @p=nil>], [#, #, #, @type=\"date\", @f=\"3/30/08 12:31 AM\", @p=nil>], [#, #, #, @type=\"date\", @f=\"4/30/08 12:31 AM\", @p=nil>]], @listeners=[], @options={:cols=>[{:id=>\"A\", :label=>\"NEW A\", :type=>\"string\"}, {:id=>\"B\", :label=>\"B-label\", :type=>\"number\"}, {:id=>\"C\", :label=>\"C-label\", :type=>\"date\"}], :rows=>[{:c=>[{:v=>\"a\"}, {:v=>1.0, :f=>\"One\"}, {:v=>#, :f=>\"2/28/08 12:31 AM\"}]}, {:c=>[{:v=>\"b\"}, {:v=>2.0, :f=>\"Two\"}, {:v=>#, :f=>\"3/30/08 12:31 AM\"}]}, {:c=>[{:v=>\"c\"}, {:v=>3.0, :f=>\"Three\"}, {:v=>#, :f=>\"4/30/08 12:31 AM\"}]}]}, @data=[], @user_options={}>>" ] }, "execution_count": 22, @@ -1084,22 +1074,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 23, @@ -1119,7 +1107,7 @@ { "data": { "text/plain": [ - "#>" + "#>" ] }, "execution_count": 24, @@ -1160,22 +1148,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>\"Employee Name\"}, {:type=>\"date\", :label=>\"Start Date\"}], @rows=[], @options={}, @data=[], @user_options={}, @html_id=\"c08073bf-4276-45ca-9dc3-55c5bcbb7631\">" + "#\"string\", :label=>\"Employee Name\"}, {:type=>\"date\", :label=>\"Start Date\"}], @rows=[], @listeners=[], @options={}, @data=[], @user_options={}, @html_id=\"3a7a38a7-650e-4989-aa8f-e768f7b8c4a1\">" ] }, "execution_count": 26, @@ -1215,7 +1201,7 @@ { "data": { "text/plain": [ - "#" + "#" ] }, "execution_count": 28, @@ -1235,7 +1221,7 @@ { "data": { "text/plain": [ - "#, @type=\"date\">" + "#, @type=\"date\">" ] }, "execution_count": 29, @@ -1265,22 +1251,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"string\", :label=>\"Employee Name\"}, {:type=>\"date\", :label=>\"Start Date\"}], @rows=[[#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">]], @options={}, @data=[], @user_options={}, @html_id=\"a94ffc48-2440-476f-9a47-d78abac50eda\">" + "#\"string\", :label=>\"Employee Name\"}, {:type=>\"date\", :label=>\"Start Date\"}], @rows=[[#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">], [#, #, @type=\"date\">]], @listeners=[], @options={}, @data=[], @user_options={}, @html_id=\"84eba261-2998-434c-a14f-c99a635fccbf\">" ] }, "execution_count": 30, @@ -1367,7 +1351,7 @@ { "data": { "text/plain": [ - "#\n", + "#\n", " 0 43934\n", " 1 52503\n", " 2 57177\n", @@ -1375,7 +1359,7 @@ " 4 97031\n", " 5 119931\n", " 6 137133\n", - " 7 154175, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @options={}, @data=#\n", + " 7 154175, @options={}, @user_options={}, @adapter=Daru::View::Adapter::GooglechartsAdapter, @table=#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @listeners=[], @options={}, @data=#\n", " 0 43934\n", " 1 52503\n", " 2 57177\n", @@ -1404,22 +1388,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @options={}, @data=#\n", + "#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @listeners=[], @options={}, @data=#\n", " 0 43934\n", " 1 52503\n", " 2 57177\n", @@ -1427,7 +1409,7 @@ " 4 97031\n", " 5 119931\n", " 6 137133\n", - " 7 154175, @user_options={}, @html_id=\"0787e3a6-855a-4de3-b746-5955fbeb7a7a\">" + " 7 154175, @user_options={}, @html_id=\"33ef7ce5-bc6e-41b4-ac0a-e65c54f8ca1f\">" ] }, "execution_count": 35, @@ -1488,22 +1470,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @options={:showRowNumber=>true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @data=#\n", + "#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @listeners=[], @options={:showRowNumber=>true, :width=>\"100%\", :height=>\"100%\", :page=>\"enable\", :pageSize=>2, :pagingSymbols=>{:prev=>\"prev\", :next=>\"next\"}, :pagingButtonsConfiguration=>\"auto\"}, @data=#\n", " 0 43934\n", " 1 52503\n", " 2 57177\n", @@ -1511,7 +1491,7 @@ " 4 97031\n", " 5 119931\n", " 6 137133\n", - " 7 154175, @user_options={}, @html_id=\"203a1b04-7bcb-4c81-a971-52c1c23f26b2\">" + " 7 154175, @user_options={}, @html_id=\"6eabc359-4d22-4eae-b5a0-cd7eb0167d53\">" ] }, "execution_count": 38, @@ -1582,22 +1562,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @options={:showRowNumber=>true, :pageSize=>5, :allowHtml=>true, :cssClassNames=>{:headerRow=>\"italic-darkblue-font large-font bold-font\", :tableRow=>\"\", :oddTableRow=>\"beige-background\", :selectedTableRow=>\"orange-background large-font\", :hoverTableRow=>\"\", :headerCell=>\"gold-border\", :tableCell=>\"\", :rowNumberCell=>\"underline-blue-font\"}}, @data=#\n", + "#\"number\", :label=>\"Series\"}], @rows=[[#], [#], [#], [#], [#], [#], [#], [#]], @listeners=[], @options={:showRowNumber=>true, :pageSize=>5, :allowHtml=>true, :cssClassNames=>{:headerRow=>\"italic-darkblue-font large-font bold-font\", :tableRow=>\"\", :oddTableRow=>\"beige-background\", :selectedTableRow=>\"orange-background large-font\", :hoverTableRow=>\"\", :headerCell=>\"gold-border\", :tableCell=>\"\", :rowNumberCell=>\"underline-blue-font\"}}, @data=#\n", " 0 43934\n", " 1 52503\n", " 2 57177\n", @@ -1605,7 +1583,7 @@ " 4 97031\n", " 5 119931\n", " 6 137133\n", - " 7 154175, @user_options={}, @html_id=\"f9ed1f65-b530-4c04-9b2f-06bf629e1f4a\">" + " 7 154175, @user_options={}, @html_id=\"9945ef5a-e582-4be2-8c04-d4c0025c942d\">" ] }, "execution_count": 41, @@ -1635,22 +1613,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 42, @@ -1690,22 +1666,20 @@ { "data": { "text/html": [ - "
\n", + "\n", + "
\n", "\n" ], "text/plain": [ - "\"
\\n\\n\"" + "\"\\n
\\n\\n\"" ] }, "execution_count": 43, From 6f94d7b7c933e63b5183bfe409a5c0bd9b761b7a Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Wed, 1 Aug 2018 19:47:51 +0530 Subject: [PATCH 14/15] Refactored display.rb into separate files --- lib/daru/view/adapters/googlecharts.rb | 2 +- .../view/adapters/googlecharts/display.rb | 623 +++++++----------- .../googlecharts/generate_javascript.rb | 148 +++++ .../adapters/googlecharts/google_visualr.rb | 27 + spec/adapters/googlecharts/display_spec.rb | 280 +------- .../googlecharts/generate_javascript_spec.rb | 365 ++++++++++ 6 files changed, 768 insertions(+), 677 deletions(-) create mode 100644 lib/daru/view/adapters/googlecharts/generate_javascript.rb create mode 100644 lib/daru/view/adapters/googlecharts/google_visualr.rb create mode 100644 spec/adapters/googlecharts/generate_javascript_spec.rb diff --git a/lib/daru/view/adapters/googlecharts.rb b/lib/daru/view/adapters/googlecharts.rb index 5b0bf39..a9d8282 100644 --- a/lib/daru/view/adapters/googlecharts.rb +++ b/lib/daru/view/adapters/googlecharts.rb @@ -1,6 +1,6 @@ require 'google_visualr' require_relative 'googlecharts/iruby_notebook' -require_relative 'googlecharts/display' +require_relative 'googlecharts/google_visualr' require 'daru' require 'bigdecimal' require 'daru/view/constants' diff --git a/lib/daru/view/adapters/googlecharts/display.rb b/lib/daru/view/adapters/googlecharts/display.rb index 6169348..39209af 100644 --- a/lib/daru/view/adapters/googlecharts/display.rb +++ b/lib/daru/view/adapters/googlecharts/display.rb @@ -2,430 +2,259 @@ require 'erb' require_relative 'data_table_iruby' require_relative 'base_chart' -require 'daru/view/constants' +require_relative 'generate_javascript' require_relative 'formatters' -module GoogleVisualr - def self.init_script( - dependent_js=GOOGLECHARTS_DEPENDENCIES_WEB - ) - js = '' - js << "\n" - js - end - - module Display - # Holds a value only when to_html method is invoked - # @return [String] The ID of the DIV element that the Google Chart or - # Google DataTable should be rendered in - attr_accessor :html_id - attr_accessor :formatters - - def show_script(dom=SecureRandom.uuid, options={}) - script_tag = options.fetch(:script_tag) { true } - # To understand different formatters see: - # https://developers.google.com/chart/interactive/docs/reference#formatters - apply_formatters if is_a?(GoogleVisualr::DataTable) - if script_tag - show_script_with_script_tag(dom) - # Without checking for user_options, data as hash was not working! - elsif user_options && user_options[:chart_class] - extract_chart_wrapper_editor_js(dom) - elsif data.is_a?(String) - get_html_spreadsheet(data, dom) - else - get_html(dom) - end - end - - # @param dom [String] The ID of the DIV element that the Google - # Chart should be rendered in - # @return [String] js code to render the chart with script tag - def show_script_with_script_tag(dom=SecureRandom.uuid) - # if it is data table - if user_options && - user_options[:chart_class].to_s.capitalize == 'Chartwrapper' - to_js_chart_wrapper(data, dom) - elsif data.is_a?(String) - to_js_spreadsheet(data, dom) - elsif is_a?(GoogleVisualr::DataTable) - to_js_full_script(dom) - else - to_js(dom) - end - end - - # ChartEditor and ChartWrapper works for both Google Charts and DataTables - # @see dummy_rails examples for ChartEditor in shekharrajak/demo_daru-view - # - # @param dom [String] The ID of the DIV element that the Google - # Chart should be rendered in - # @return [String] JS to draw ChartWrapper or ChartEditor - def extract_chart_wrapper_editor_js(dom) - case user_options[:chart_class].to_s.capitalize - when 'Chartwrapper' - get_html_chart_wrapper(data, dom) - when 'Charteditor' - get_html_chart_editor(data, dom) - end - end - - # @param dom [String] The ID of the DIV element that the Google - # Chart should be rendered in - # @return [String] js code to render the chart - def get_html(dom) - html = '' - html << load_js(dom) - html << if is_a?(GoogleVisualr::DataTable) - draw_js(dom) - else - draw_chart_js(dom) - end - html - end - - # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] - # Data of GoogleVisualr Chart or GoogleVisualr DataTable - # @param dom [String] The ID of the DIV element that the Google - # Chart should be rendered in - # @return [String] js code to render the chart - def get_html_chart_wrapper(data, dom) - html = '' - html << load_js(dom) - html << draw_js_chart_wrapper(data, dom) - html - end - - # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] - # Data of GoogleVisualr Chart or GoogleVisualr DataTable - # @param dom [String] The ID of the DIV element that the Google - # Chart should be rendered in - # @return [String] js code to render the charteditor - def get_html_chart_editor(data, dom) - html = '' - html << if is_a?(GoogleVisualr::DataTable) - load_js(dom) - else - load_js_chart_editor(dom) - end - html << draw_js_chart_editor(data, dom) - html - end - - # @param data [String] URL of the google spreadsheet in the specified - # format: https://developers.google.com/chart/interactive/docs - # /spreadsheets - # Query string can be appended to retrieve the data accordingly - # @param dom [String] The ID of the DIV element that the Google - # Chart should be rendered in when data is the the URL of the google - # spreadsheet - # @return [String] js code to render the chart when data is the URL of - # the google spreadsheet - def get_html_spreadsheet(data, dom) - html = '' - html << load_js(dom) - html << draw_js_spreadsheet(data, dom) - html - end - - def to_html(id=nil, options={}) - path = File.expand_path( - '../../templates/googlecharts/chart_div.erb', __dir__ - ) - 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 - - def show_in_iruby(dom=SecureRandom.uuid) - IRuby.html to_html(dom) - end +module Display + # Holds a value only when to_html method is invoked + # @return [String] The ID of the DIV element that the Google Chart or + # Google DataTable should be rendered in + attr_accessor :html_id + attr_accessor :formatters - # @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 - - private - - # @return [void] applies formatters provided by the user in the - # third parameter - def apply_formatters - return unless user_options && user_options[:formatters] - @formatters = [] - user_options[:formatters].each_value do |formatter| - frmttr = case formatter[:type].to_s.capitalize - when 'Color' - apply_color_formatter(formatter) - when 'Pattern' - apply_pattern_formatter(formatter) - else - apply_date_arrow_bar_number_formatter(formatter) - end - @formatters << frmttr - end + def show_script(dom=SecureRandom.uuid, options={}) + script_tag = options.fetch(:script_tag) { true } + # To understand different formatters see: + # https://developers.google.com/chart/interactive/docs/reference#formatters + apply_formatters if is_a?(GoogleVisualr::DataTable) + if script_tag + show_script_with_script_tag(dom) + # Without checking for user_options, data as hash was not working! + elsif user_options && user_options[:chart_class] + extract_chart_wrapper_editor_js(dom) + elsif data.is_a?(String) + get_html_spreadsheet(data, dom) + else + get_html(dom) end + end - # @param formatter [Hash] formatter hash provided by the user - # @return [GoogleVisualr::ColorFormat] adds the ColorFormat to - # defined columns - # @example Color Formatter - # df = Daru::DataFrame.new({b: [11,12,13,14,15], a: [1,2,3,4,5], - # c: [11,22,33,44,55]}, - # order: [:a, :b, :c], - # index: [:one, :two, :three, :four, :five]) - # - # user_options = { - # formatters: { - # formatter: { - # type: 'Color', - # range: [[1, 3, 'yellow', 'red'], - # [20, 50, 'green', 'pink']], - # columns: [0,2] - # }, - # formatter2: { - # type: 'Color', - # range: [[14, 15, 'blue', 'orange']], - # columns: 1 - # } - # } - # } - # - # # option `allowHtml: true` is necessary to make this work - # table = Daru::View::Table.new(df, {allowHtml: true}, user_options) - def apply_color_formatter(formatter) - initialize_default_values(formatter) - frmttr = GoogleVisualr::ColorFormat.new - formatter[:range].each do |range| - # add_range parameters: (from, to, color, bgcolor) - frmttr.add_range(range[0], range[1], range[2], range[3]) - end - formatter[:gradient_range].each do |gr| - # add_range parameters: (from, to, color, fromBgColor, toBgColor) - frmttr.add_gradient_range(gr[0], gr[1], gr[2], gr[3], gr[4]) - end - frmttr.columns(formatter[:columns]) - frmttr + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] js code to render the chart with script tag + def show_script_with_script_tag(dom=SecureRandom.uuid) + # if it is data table + if user_options && + user_options[:chart_class].to_s.capitalize == 'Chartwrapper' + to_js_chart_wrapper(data, dom) + elsif data.is_a?(String) + to_js_spreadsheet(data, dom) + elsif is_a?(GoogleVisualr::DataTable) + to_js_full_script(dom) + else + to_js(dom) end + end - # @param formatter [Hash] formatter hash provided by the user - # @return [void] initializes default values for the color format - def initialize_default_values(formatter) - formatter[:range] ||= [] - formatter[:gradient_range] ||= [] - formatter[:columns] ||= 0 + # ChartEditor and ChartWrapper works for both Google Charts and DataTables + # @see dummy_rails examples for ChartEditor in shekharrajak/demo_daru-view + # + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] JS to draw ChartWrapper or ChartEditor + def extract_chart_wrapper_editor_js(dom) + case user_options[:chart_class].to_s.capitalize + when 'Chartwrapper' + get_html_chart_wrapper(data, dom) + when 'Charteditor' + get_html_chart_editor(data, dom) end + end - # @param formatter [Hash] formatter hash provided by the user - # @return [GoogleVisualr::PatternFormat] adds the PatternFormat to - # destined columns - def apply_pattern_formatter(formatter) - formatter[:format_string] ||= '' - formatter[:src_cols] ||= 0 - formatter[:des_col] ||= 0 - frmttr = GoogleVisualr::PatternFormat.new(formatter[:format_string].to_s) - frmttr.src_cols = formatter[:src_cols] - frmttr.des_col = formatter[:des_col] - frmttr - end + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] js code to render the chart + def get_html(dom) + html = '' + html << load_js(dom) + html << if is_a?(GoogleVisualr::DataTable) + draw_js(dom) + else + draw_chart_js(dom) + end + html + end - # @param formatter [Hash] formatter hash provided by the user - # @return [GoogleVisualr::DateFormat, GoogleVisualr::NumberFormat, - # GoogleVisualr::BarFormat, GoogleVisualr::ArrowFormat] adds the required - # format to the destined columns - # @example - # df = Daru::DataFrame.new({b: [11,-12,13,14,-15], a: [-1,2,3,4,5], - # c: [11,22,-33,-44,55]}, - # order: [:a, :b, :c], - # index: [:one, :two, :three, :four, :five]) - # - # user_options = { - # formatters: { - # formatter: { - # type: 'Number', - # options: {negativeParens: true}, - # columns: [0,1,2] - # } - # } - # } - # - # table = Daru::View::Table.new(df, {}, user_options) - def apply_date_arrow_bar_number_formatter(formatter) - formatter[:options] ||= {} - formatter[:columns] ||= 0 - frmttr = GoogleVisualr.const_get( - formatter[:type].to_s.capitalize + 'Format' - ).new(formatter[:options]) - frmttr.columns(formatter[:columns]) - frmttr - end + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart or GoogleVisualr DataTable + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] js code to render the chart + def get_html_chart_wrapper(data, dom) + html = '' + html << load_js(dom) + html << draw_js_chart_wrapper(data, dom) + html end - module DisplayJavascript - # @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 data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart or GoogleVisualr DataTable + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] js code to render the charteditor + def get_html_chart_editor(data, dom) + html = '' + html << if is_a?(GoogleVisualr::DataTable) + load_js(dom) + else + load_js_chart_editor(dom) + end + html << draw_js_chart_editor(data, dom) + html + 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 - def query_response_function_name(element_id) - "handleQueryResponse_#{element_id.tr('-', '_')}" - end + # @param data [String] URL of the google spreadsheet in the specified + # format: https://developers.google.com/chart/interactive/docs + # /spreadsheets + # Query string can be appended to retrieve the data accordingly + # @param dom [String] The ID of the DIV element that the Google + # Chart should be rendered in when data is the the URL of the google + # spreadsheet + # @return [String] js code to render the chart when data is the URL of + # the google spreadsheet + def get_html_spreadsheet(data, dom) + html = '' + html << load_js(dom) + html << draw_js_spreadsheet(data, dom) + html + end - # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] - # Data of GoogleVisualr DataTable/Chart - # @return [String] Data option (dataSourceUrl or dataTable) required to - # draw the Chartwrapper based upon the data provided. - def append_data(data) - return "\n \t\tdataSourceUrl: '#{data}'," if data.is_a? String - "\n \t\tdataTable: data_table," - end + def to_html(id=nil, options={}) + path = File.expand_path( + '../../templates/googlecharts/chart_div.erb', __dir__ + ) + 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 - # @param element_id [String] The ID of the DIV element that the Google - # Chart should be rendered in - # @return [String] unique function name to save the chart - def save_chart_function_name(element_id) - "saveChart_#{element_id.tr('-', '_')}" - end + def show_in_iruby(dom=SecureRandom.uuid) + IRuby.html to_html(dom) + 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 + # @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 - # So that it can be used in ChartEditor also - # - # @return [String] Returns string to draw the Chartwrapper and '' otherwise - def draw_wrapper(element_id) - js = '' - js << "\n \twrapper_#{element_id.tr('-', '_')}.draw();" - unless user_options[:chart_class].to_s.capitalize == 'Chartwrapper' - js << "\n \tchartEditor_#{element_id.tr('-', '_')} = "\ - 'new google.visualization.ChartEditor();' - js << "\n \tgoogle.visualization.events.addListener("\ - "chartEditor_#{element_id.tr('-', '_')},"\ - " 'ok', #{save_chart_function_name(element_id)});" - end - js - end + private - # Generates JavaScript and renders the Google Chartwrapper in the - # final HTML output. - # - # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] - # Data of GoogleVisualr Chart/DataTable - # @param element_id [String] The ID of the DIV element that the Google - # Chartwrapper should be rendered in - # @return [String] Javascript code to render the Google Chartwrapper - def to_js_chart_wrapper(data, element_id=SecureRandom.uuid) - js = '' - js << "\n" - js + # @return [void] applies formatters provided by the user in the + # third parameter + def apply_formatters + return unless user_options && user_options[:formatters] + @formatters = [] + user_options[:formatters].each_value do |formatter| + frmttr = case formatter[:type].to_s.capitalize + when 'Color' + apply_color_formatter(formatter) + when 'Pattern' + apply_pattern_formatter(formatter) + else + apply_date_arrow_bar_number_formatter(formatter) + end + @formatters << frmttr end + end - # Generates JavaScript when data is imported from spreadsheet and renders - # the Google Chart/Table in the final HTML output when data is URL of the - # google spreadsheet - # - # @param data [String] URL of the google spreadsheet in the specified - # format: https://developers.google.com/chart/interactive/docs - # /spreadsheets - # Query string can be appended to retrieve the data accordingly - # @param element_id [String] The ID of the DIV element that the Google - # Chart/Table should be rendered in - # @return [String] Javascript code to render the Google Chart/Table when - # data is given as the URL of the google spreadsheet - def to_js_spreadsheet(data, element_id=SecureRandom.uuid) - js = '' - js << "\n" - js + # @param formatter [Hash] formatter hash provided by the user + # @return [GoogleVisualr::ColorFormat] adds the ColorFormat to + # defined columns + # @example Color Formatter + # df = Daru::DataFrame.new({b: [11,12,13,14,15], a: [1,2,3,4,5], + # c: [11,22,33,44,55]}, + # order: [:a, :b, :c], + # index: [:one, :two, :three, :four, :five]) + # + # user_options = { + # formatters: { + # formatter: { + # type: 'Color', + # range: [[1, 3, 'yellow', 'red'], + # [20, 50, 'green', 'pink']], + # columns: [0,2] + # }, + # formatter2: { + # type: 'Color', + # range: [[14, 15, 'blue', 'orange']], + # columns: 1 + # } + # } + # } + # + # # option `allowHtml: true` is necessary to make this work + # table = Daru::View::Table.new(df, {allowHtml: true}, user_options) + def apply_color_formatter(formatter) + initialize_default_values(formatter) + frmttr = GoogleVisualr::ColorFormat.new + formatter[:range].each do |range| + # add_range parameters: (from, to, color, bgcolor) + frmttr.add_range(range[0], range[1], range[2], range[3]) 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 = "\n var wrapper_#{element_id.tr('-', '_')} = null;" - 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 \twrapper_#{element_id.tr('-', '_')} = "\ - 'new google.visualization.ChartWrapper({' - js << extract_chart_wrapper_options(data, element_id) - js << "\n \t});" - js << draw_wrapper(element_id) - js << add_listeners_js("wrapper_#{element_id.tr('-', '_')}") - js << "\n };" - js + formatter[:gradient_range].each do |gr| + # add_range parameters: (from, to, color, fromBgColor, toBgColor) + frmttr.add_gradient_range(gr[0], gr[1], gr[2], gr[3], gr[4]) end + frmttr.columns(formatter[:columns]) + frmttr + end - # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] - # Data of GoogleVisualr Chart - # @param element_id [String] The ID of the DIV element that the Google - # ChartEditor should be rendered in - # @return [String] JS function to render the ChartEditor - def draw_js_chart_editor(data, element_id) - js = '' - js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" - js << draw_js_chart_wrapper(data, element_id) - js << "\n function #{save_chart_function_name(element_id)}(){" - js << "\n \tchartEditor_#{element_id.tr('-', '_')}.getChartWrapper()."\ - "draw(document.getElementById('#{element_id}'));" - js << "\n }" - js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" - js << "\n \tchartEditor_#{element_id.tr('-', '_')}.openDialog("\ - "wrapper_#{element_id.tr('-', '_')}, {});" - js << "\n }" - js - end + # @param formatter [Hash] formatter hash provided by the user + # @return [void] initializes default values for the color format + def initialize_default_values(formatter) + formatter[:range] ||= [] + formatter[:gradient_range] ||= [] + formatter[:columns] ||= 0 end - class DataTable - include Display - include DisplayJavascript + # @param formatter [Hash] formatter hash provided by the user + # @return [GoogleVisualr::PatternFormat] adds the PatternFormat to + # destined columns + def apply_pattern_formatter(formatter) + formatter[:format_string] ||= '' + formatter[:src_cols] ||= 0 + formatter[:des_col] ||= 0 + frmttr = GoogleVisualr::PatternFormat.new(formatter[:format_string].to_s) + frmttr.src_cols = formatter[:src_cols] + frmttr.des_col = formatter[:des_col] + frmttr end - class BaseChart - include Display - include DisplayJavascript + # @param formatter [Hash] formatter hash provided by the user + # @return [GoogleVisualr::DateFormat, GoogleVisualr::NumberFormat, + # GoogleVisualr::BarFormat, GoogleVisualr::ArrowFormat] adds the required + # format to the destined columns + # @example + # df = Daru::DataFrame.new({b: [11,-12,13,14,-15], a: [-1,2,3,4,5], + # c: [11,22,-33,-44,55]}, + # order: [:a, :b, :c], + # index: [:one, :two, :three, :four, :five]) + # + # user_options = { + # formatters: { + # formatter: { + # type: 'Number', + # options: {negativeParens: true}, + # columns: [0,1,2] + # } + # } + # } + # + # table = Daru::View::Table.new(df, {}, user_options) + def apply_date_arrow_bar_number_formatter(formatter) + formatter[:options] ||= {} + formatter[:columns] ||= 0 + frmttr = GoogleVisualr.const_get( + formatter[:type].to_s.capitalize + 'Format' + ).new(formatter[:options]) + frmttr.columns(formatter[:columns]) + frmttr end end diff --git a/lib/daru/view/adapters/googlecharts/generate_javascript.rb b/lib/daru/view/adapters/googlecharts/generate_javascript.rb new file mode 100644 index 0000000..07dbcd9 --- /dev/null +++ b/lib/daru/view/adapters/googlecharts/generate_javascript.rb @@ -0,0 +1,148 @@ +module GenerateJavascript + # @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 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 + def query_response_function_name(element_id) + "handleQueryResponse_#{element_id.tr('-', '_')}" + end + + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr DataTable/Chart + # @return [String] Data option (dataSourceUrl or dataTable) required to + # draw the Chartwrapper based upon the data provided. + def append_data(data) + return "\n \t\tdataSourceUrl: '#{data}'," if data.is_a? String + "\n \t\tdataTable: data_table," + end + + # @param element_id [String] The ID of the DIV element that the Google + # Chart should be rendered in + # @return [String] unique function name to save the chart + def save_chart_function_name(element_id) + "saveChart_#{element_id.tr('-', '_')}" + 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 + + # So that it can be used in ChartEditor also + # + # @return [String] Returns string to draw the Chartwrapper and '' otherwise + def draw_wrapper(element_id) + js = '' + js << "\n \twrapper_#{element_id.tr('-', '_')}.draw();" + unless user_options[:chart_class].to_s.capitalize == 'Chartwrapper' + js << "\n \tchartEditor_#{element_id.tr('-', '_')} = "\ + 'new google.visualization.ChartEditor();' + js << "\n \tgoogle.visualization.events.addListener("\ + "chartEditor_#{element_id.tr('-', '_')},"\ + " 'ok', #{save_chart_function_name(element_id)});" + end + js + end + + # Generates JavaScript and renders the Google Chartwrapper in the + # final HTML output. + # + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart/DataTable + # @param element_id [String] The ID of the DIV element that the Google + # Chartwrapper should be rendered in + # @return [String] Javascript code to render the Google Chartwrapper + def to_js_chart_wrapper(data, element_id=SecureRandom.uuid) + js = '' + js << "\n" + js + end + + # Generates JavaScript when data is imported from spreadsheet and renders + # the Google Chart/Table in the final HTML output when data is URL of the + # google spreadsheet + # + # @param data [String] URL of the google spreadsheet in the specified + # format: https://developers.google.com/chart/interactive/docs + # /spreadsheets + # Query string can be appended to retrieve the data accordingly + # @param element_id [String] The ID of the DIV element that the Google + # Chart/Table should be rendered in + # @return [String] Javascript code to render the Google Chart/Table when + # data is given as the URL of the google spreadsheet + def to_js_spreadsheet(data, element_id=SecureRandom.uuid) + js = '' + js << "\n" + 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 = "\n var wrapper_#{element_id.tr('-', '_')} = null;" + 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 \twrapper_#{element_id.tr('-', '_')} = "\ + 'new google.visualization.ChartWrapper({' + js << extract_chart_wrapper_options(data, element_id) + js << "\n \t});" + js << draw_wrapper(element_id) + js << add_listeners_js("wrapper_#{element_id.tr('-', '_')}") + js << "\n };" + js + end + + # @param data [Array, Daru::DataFrame, Daru::Vector, Daru::View::Table, String] + # Data of GoogleVisualr Chart + # @param element_id [String] The ID of the DIV element that the Google + # ChartEditor should be rendered in + # @return [String] JS function to render the ChartEditor + def draw_js_chart_editor(data, element_id) + js = '' + js << "\n var chartEditor_#{element_id.tr('-', '_')} = null;" + js << draw_js_chart_wrapper(data, element_id) + js << "\n function #{save_chart_function_name(element_id)}(){" + js << "\n \tchartEditor_#{element_id.tr('-', '_')}.getChartWrapper()."\ + "draw(document.getElementById('#{element_id}'));" + js << "\n }" + js << "\n function loadEditor_#{element_id.tr('-', '_')}(){" + js << "\n \tchartEditor_#{element_id.tr('-', '_')}.openDialog("\ + "wrapper_#{element_id.tr('-', '_')}, {});" + js << "\n }" + js + end +end diff --git a/lib/daru/view/adapters/googlecharts/google_visualr.rb b/lib/daru/view/adapters/googlecharts/google_visualr.rb new file mode 100644 index 0000000..6d5b0f4 --- /dev/null +++ b/lib/daru/view/adapters/googlecharts/google_visualr.rb @@ -0,0 +1,27 @@ +require 'securerandom' +require 'erb' +require_relative 'display' +require_relative 'generate_javascript' +require 'daru/view/constants' + +module GoogleVisualr + def self.init_script( + dependent_js=GOOGLECHARTS_DEPENDENCIES_WEB + ) + js = '' + js << "\n" + js + end + + class DataTable + include Display + include GenerateJavascript + end + + class BaseChart + include Display + include GenerateJavascript + end +end diff --git a/spec/adapters/googlecharts/display_spec.rb b/spec/adapters/googlecharts/display_spec.rb index d089ebd..17ea0fa 100644 --- a/spec/adapters/googlecharts/display_spec.rb +++ b/spec/adapters/googlecharts/display_spec.rb @@ -1,6 +1,6 @@ require 'spec_helper.rb' -describe GoogleVisualr::Display do +describe Display do before { Daru::View.plotting_library = :googlecharts } let(:data) do [ @@ -559,282 +559,4 @@ ) end end - - describe "#add_listeners_js" do - it "appends the js to add the listener in google charts" do - plot_spreadsheet.chart.add_listener('select', "alert('A table row was selected');") - js = plot_spreadsheet.chart.add_listeners_js('chart') - expect(js).to match(/google.visualization.events.addListener\(/) - expect(js).to match(/chart, 'select', function \(e\) {/) - expect(js).to match(/alert\('A table row was selected'\);/) - end - it "appends the js to add the listener in google datatables" do - data_table.table.add_listener('select', "alert('A table row was selected');") - js = data_table.table.add_listeners_js('table') - expect(js).to match(/google.visualization.events.addListener\(/) - expect(js).to match(/table, 'select', function \(e\) {/) - expect(js).to match(/alert\('A table row was selected'\);/) - end - end - - describe "#query_response_function_name" do - it "should generate unique function name to handle query response" do - func = data_table.table.query_response_function_name('i-d') - expect(func).to eq('handleQueryResponse_i_d') - end - end - - describe "#save_chart_function_name" do - it "should generate unique function name to save the chart" do - func = plot_charteditor.chart.save_chart_function_name('i-d') - expect(func).to eq('saveChart_i_d') - end - end - - describe "#append_data" do - context 'when table is drawn' do - it "should return option dataSourceUrl if data is URL" do - js = table_spreadsheet_chartwrapper.table.append_data(data_spreadsheet) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - end - it "should return option dataTable otherwise" do - js = table_chart_wrapper.table.append_data(data) - expect(js).to match(/dataTable: data_table/) - end - end - context 'when chart is drawn' do - it "should return option dataSourceUrl if data is URL" do - js = area_wrapper_spreadsheet.chart.append_data(data_spreadsheet) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - end - it "should return option dataTable otherwise" do - js = area_chart_wrapper.chart.append_data(data) - expect(js).to match(/dataTable: data_table/) - end - end - end - - describe "#extract_chart_wrapper_options" do - context 'when chart is drawn' do - it "should return correct options of chartwrapper" do - js = plot_charteditor.chart.extract_chart_wrapper_options(data, 'id') - expect(js).to match(/chartType: 'LineChart'/) - expect(js).to match(/dataTable: data_table/) - expect(js).to match(/options: \{\}/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: ''/) - end - it "should return correct options of chartwrapper when data is URL" do - js = plot_spreadsheet_charteditor.chart.extract_chart_wrapper_options( - data_spreadsheet, 'id' - ) - expect(js).to match(/chartType: 'LineChart'/) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: ''/) - end - end - context 'when table is drawn' do - it "should return correct options of chartwrapper" do - js = table_charteditor.table.extract_chart_wrapper_options(data, 'id') - expect(js).to match(/chartType: 'Table'/) - expect(js).to match(/dataTable: data_table/) - expect(js).to match(/options: \{\}/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: ''/) - end - it "should return correct options of chartwrapper when data is URL" do - js = table_spreadsheet_charteditor.table.extract_chart_wrapper_options( - data_spreadsheet, 'id' - ) - expect(js).to match(/chartType: 'Table'/) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: ''/) - end - end - end - - describe "#draw_wrapper" do - context 'when chart_class is ChartEditor' do - it "creates ChartEditor object and draws the chartwrapper" do - js = plot_charteditor.chart.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) - expect(js).to match(/new google.visualization.ChartEditor()/) - expect(js).to match(/google.visualization.events.addListener/) - expect(js).to match(/chartEditor_id, 'ok', saveChart_id/) - end - it "should draw the chartwrapper only when chart_class is"\ - " set to Chartwrapper" do - js = table_charteditor.table.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) - expect(js).to match(/new google.visualization.ChartEditor()/) - expect(js).to match(/google.visualization.events.addListener/) - expect(js).to match(/chartEditor_id, 'ok', saveChart_id/) - end - end - context 'when chart_class is Chartwrapper' do - it "draws the chartwrapper" do - js = area_chart_wrapper.chart.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) - end - it "draws the chartwrapper" do - js = table_chart_wrapper.table.draw_wrapper('id') - expect(js).to match(/wrapper_id.draw\(\);/) - end - end - end - - describe "#to_js_chart_wrapper" do - context 'when table is drawn' do - it "draws valid JS of the ChartWrapper when data is URL of the spreadsheet" do - js = table_spreadsheet_chartwrapper.table.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: 'Table'/) - expect(js).to match(/dataSourceUrl: 'https:\/\/docs.google/) - expect(js).to match(/options: {width: 800/) - expect(js).to match(/containerId: 'id'/) - expect(js).to match(/view: {columns: \[0,1\]}/) - end - end - context 'when chart is drawn' do - it "draws valid JS of the ChartWrapper when data is URL of the spreadsheet" do - js = area_wrapper_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'/) - expect(js).to match(/view: ''/) - end - end - end - - describe "#to_js_spreadsheet" do - context 'when table is drawn' do - it "draws valid JS of the table when "\ - "data is imported from google spreadsheets" do - js = table_spreadsheet.table.to_js_spreadsheet(data_spreadsheet, 'id') - expect(js).to match(/