From 39db2366120ea27a36c2af941e9b4143b0b4c799 Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Wed, 8 Aug 2018 03:13:51 +0530 Subject: [PATCH] Add example for various countries data --- Gemfile | 8 +- Gemfile.lock | 41 ++--- app/assets/javascripts/countries.coffee | 3 + app/assets/stylesheets/countries.scss | 3 + app/controllers/countries_controller.rb | 12 ++ app/controllers/front_page_controller.rb | 7 +- app/helpers/countries_helper.rb | 2 + app/views/countries/data_countries.erb | 159 ++++++++++++++++++ app/views/front_page/home.erb | 4 +- app/views/layouts/application.html.erb | 1 + config/routes.rb | 1 + test/controllers/countries_controller_test.rb | 7 + 12 files changed, 220 insertions(+), 28 deletions(-) create mode 100644 app/assets/javascripts/countries.coffee create mode 100644 app/assets/stylesheets/countries.scss create mode 100644 app/controllers/countries_controller.rb create mode 100644 app/helpers/countries_helper.rb create mode 100644 app/views/countries/data_countries.erb create mode 100644 test/controllers/countries_controller_test.rb diff --git a/Gemfile b/Gemfile index c99dc9f..217a46a 100644 --- a/Gemfile +++ b/Gemfile @@ -10,7 +10,7 @@ end # gem 'daru-io', path: '/Users/athityakumar/Documents/GitHub/Sciruby/daru-io' # gem 'nyaplot', git: 'https://github.com/SciRuby/nyaplot.git' -gem 'daru-io', :git => 'https://github.com/athityakumar/daru-io.git' +gem 'daru-io', :git => 'https://github.com/Sciruby/daru-io.git' gem 'daru', :git => 'https://github.com/SciRuby/daru.git' # gem 'rsruby' # gem 'rsruby', :git => 'https://github.com/athityakumar/rsruby', :branch => 'fix-stack-error-with-rails' @@ -20,10 +20,10 @@ gem 'nokogiri' gem 'spreadsheet' # gem 'daru-view', path: '/Users/shekharrajak/Documents/gsoc17/daru-view' # gem 'daru-io', path: '/Users/shekharrajak/Documents/gsoc17/daru-io' -gem 'daru-view', git: 'https://github.com/Shekharrajak/daru-view.git' +gem 'daru-view', git: 'https://github.com/SciRuby/daru-view.git' # issue : https://github.com/Shekharrajak/daru_examples_io_view_rails/issues/3 -gem 'daru-data_tables', git: 'https://github.com/Shekharrajak/daru-data_tables.git' +gem 'daru-data_tables', git: 'https://github.com/shekharrajak/daru-data_tables.git' # remove this after https://github.com/Shekharrajak/daru_examples_io_view_rails/issues/8#issuecomment-323335270 gem 'google_visualr', git: 'https://github.com/winston/google_visualr.git' @@ -34,7 +34,7 @@ gem 'google_visualr', git: 'https://github.com/winston/google_visualr.git' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.1.2' # Use sqlite3 as the database for Active Record -gem 'pg' +gem 'pg', '~> 0.21' # Use Puma as the app server gem 'puma', '~> 3.7' # Use SCSS for stylesheets diff --git a/Gemfile.lock b/Gemfile.lock index 8b334cd..17ee37d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,3 +1,16 @@ +GIT + remote: https://github.com/SciRuby/daru-view.git + revision: 1d178bca7c21b6fa4260ed0d6bc017fb1b83f934 + specs: + daru-view (0.1.0) + actionview + daru + daru-data_tables + google_visualr + lazy_high_charts + nyaplot + thor + GIT remote: https://github.com/SciRuby/daru.git revision: 32dd946556c55ebdd10bf215d618c625edbdd9be @@ -7,29 +20,17 @@ GIT packable (~> 1.3.9) GIT - remote: https://github.com/Shekharrajak/daru-data_tables.git - revision: de79857df9f94c4c9878835250c069c27dbf47d6 + remote: https://github.com/Sciruby/daru-io.git + revision: dce4be1089a6c9902d91a857e0cd43cf1f9832bc specs: - daru-data_tables (0.1.0) + daru-io (0.1.0) GIT - remote: https://github.com/Shekharrajak/daru-view.git - revision: dacdfe5e577f210dbc8f9c9356f522976aac58da + remote: https://github.com/shekharrajak/daru-data_tables.git + revision: 660c309fc188d29bb14bb76b90560995d75650e5 specs: - daru-view (0.1.0) - actionview + daru-data_tables (0.1.0) daru - daru-data_tables - google_visualr - lazy_high_charts - nyaplot - -GIT - remote: https://github.com/athityakumar/daru-io.git - revision: 92f815c8133cc5bdd01192dbc4852f76c8058bf2 - specs: - daru-io (0.1.0) - daru (~> 0.1.5) GIT remote: https://github.com/winston/google_visualr.git @@ -241,7 +242,7 @@ DEPENDENCIES jsonpath listen (>= 3.0.5, < 3.2) nokogiri - pg + pg (~> 0.21) puma (~> 3.7) rails (~> 5.1.2) rouge @@ -256,4 +257,4 @@ DEPENDENCIES web-console (>= 3.3.0) BUNDLED WITH - 1.15.4 + 1.16.2 diff --git a/app/assets/javascripts/countries.coffee b/app/assets/javascripts/countries.coffee new file mode 100644 index 0000000..24f83d1 --- /dev/null +++ b/app/assets/javascripts/countries.coffee @@ -0,0 +1,3 @@ +# Place all the behaviors and hooks related to the matching controller here. +# All this logic will automatically be available in application.js. +# You can use CoffeeScript in this file: http://coffeescript.org/ diff --git a/app/assets/stylesheets/countries.scss b/app/assets/stylesheets/countries.scss new file mode 100644 index 0000000..40b680b --- /dev/null +++ b/app/assets/stylesheets/countries.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the Countries controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/controllers/countries_controller.rb b/app/controllers/countries_controller.rb new file mode 100644 index 0000000..d28a703 --- /dev/null +++ b/app/controllers/countries_controller.rb @@ -0,0 +1,12 @@ +class CountriesController < ApplicationController + def data_countries + # getting data from url : http://countryapi.gear.host/v1/Country/getCountries + url = 'http://countryapi.gear.host/v1/Country/getCountries' + complex_read_instance = Daru::IO::Importers::JSON.read(url) + @countries_df = complex_read_instance.call( + Country: "$..Response..Name", + NumericCode: "$..Response..NumericCode", + Area: "$..Response..Area" + ) + end +end diff --git a/app/controllers/front_page_controller.rb b/app/controllers/front_page_controller.rb index 580cb48..c5a72e1 100644 --- a/app/controllers/front_page_controller.rb +++ b/app/controllers/front_page_controller.rb @@ -4,17 +4,20 @@ def home Routes: [ 'SciRuby repos', 'SciRuby repo watchers', - 'Indian election data' + 'Indian election data', + 'Countries data' ], Desc: [ 'Shows import from JSON API, charts, tables, and export', 'Shows import from JSON API, charts, tables, and export', - 'Shows import from HTML pages, charts and tables' + 'Shows import from HTML pages, charts and tables', + 'Shows import from JSON API, multiple charts using PlotList, tables with formatters and CSS styling in HighCharts' ], Link: [ view_context.link_to('sciruby/repos', {action: 'repos', controller: 'sciruby_github'}, target: '_blank'), view_context.link_to('sciruby/watchers', {action: 'watchers', controller: 'sciruby_github'}, target: '_blank'), view_context.link_to('election/data', {action: 'data', controller: 'election'}, target: '_blank'), + view_context.link_to('countries', {action: 'data_countries', controller: 'countries'}, target: '_blank'), ] }, order: %i[Routes Desc Link]) end diff --git a/app/helpers/countries_helper.rb b/app/helpers/countries_helper.rb new file mode 100644 index 0000000..b8a3171 --- /dev/null +++ b/app/helpers/countries_helper.rb @@ -0,0 +1,2 @@ +module CountriesHelper +end diff --git a/app/views/countries/data_countries.erb b/app/views/countries/data_countries.erb new file mode 100644 index 0000000..2b70821 --- /dev/null +++ b/app/views/countries/data_countries.erb @@ -0,0 +1,159 @@ +

Countries Data

+ +
+
Code to import data from API into Daru::DataFrame (yes, that's all!):
+
+ <%= + rouge(%{ + url = 'http://countryapi.gear.host/v1/Country/getCountries' + complex_read_instance = Daru::IO::Importers::JSON.read(url) + @countries_df = complex_read_instance.call( + Country: "$..Response..Name", + NumericCode: "$..Response..NumericCode", + Area: "$..Response..Area" + ) + }) + %> +
+
+ +

Data table - 250 rows

+ +
+ +
+
+ <%= + Daru::View::Table.new( + @countries_df, + { adapter: :googlecharts, pageSize: 25, + height: 300, allowHtml: true }, + { formatters: { + f1: { + type: 'Color', + range: [[0, 30000, 'white', 'red'], + [30001, 100000, 'white', 'yellow'], + [100001, nil, 'white', 'green']], + columns: 2 + }, + f2: { + type: 'Bar', + options: { + base: 500 + }, + columns: 1 + } + } + } + ).div.html_safe + %> +
+
+ <%= rouge(%{ + Daru::View::Table.new( + @countries_df, + { adapter: :googlecharts, pageSize: 25, + height: 300, allowHtml: true }, + { formatters: { + f1: { + type: 'Color', + range: [[0, 30000, 'white', 'red'], + [30001, 100000, 'white', 'yellow'], + [100001, nil, 'white', 'green']], + columns: 2 + }, + f2: { + type: 'Bar', + options: { + base: 500 + }, + columns: 1 + } + } + } + ).div.html_safe + }) %> +
+
+
+ +

Multiple Charts using PlotList

+ +
+ +
+
+ <%= + Daru::View::PlotList.new( + [ Daru::View::Plot.new( + @countries_df.row[0..7][:Country, :Area], + adapter: :googlecharts, type: :pie, title: "Relative Area distribution for 8 countries - GoogleChart" + ), + Daru::View::Plot.new( + @countries_df.row[0..7][:Country, :Area], + adapter: :highcharts, chart: { type: 'pie' }, title: { text: 'Relative Area distribution for 8 countries - HighChart'} + ) + ] + ).div.html_safe + %> +
+
+ <%= rouge(%{ + Daru::View::PlotList.new( + [ Daru::View::Plot.new( + @countries_df.row[0..7][:Country, :Area], + adapter: :googlecharts, type: :pie, title: "Relative Area distribution for 8 countries - GoogleChart" + ), + Daru::View::Plot.new( + @countries_df.row[0..7][:Country, :Area], + adapter: :highcharts, chart: { type: 'pie' }, title: { text: 'Relative Area distribution for 8 countries - HighChart'} + ) + ] + ).div.html_safe + }) %> +
+
+
+ +

Scatter chart with styling grid and ticks

+ +
+ +
+
+ <%= + daru_chart( + @countries_df.row[0..50][:Country, :NumericCode], + adapter: :highcharts, + chart: { type: 'column' }, + css: ['.highcharts-xaxis-grid .highcharts-grid-line {stroke-width: 2px;stroke: #d8d8d8;}', + '.highcharts-xaxis .highcharts-tick {stroke-width: 2px;stroke: #d8d8d8;}'], + xAxis: { categories: @countries_df.row[0..50][:Country].to_a }, + title: { text: 'NumericCode of countries'} + ) + %> +
+
+ <%= rouge(%{ + daru_chart( + @countries_df.row[0..50][:Country, :NumericCode], + adapter: :highcharts, + chart: { type: 'column' }, + css: ['.highcharts-xaxis-grid .highcharts-grid-line {stroke-width: 2px;stroke: #d8d8d8;}', + '.highcharts-xaxis .highcharts-tick {stroke-width: 2px;stroke: #d8d8d8;}'], + xAxis: { categories: @countries_df.row[0..50][:Country].to_a }, + title: { text: 'NumericCode of countries'} + ) + }) %> +
+
+
diff --git a/app/views/front_page/home.erb b/app/views/front_page/home.erb index feaabf5..6a8017c 100644 --- a/app/views/front_page/home.erb +++ b/app/views/front_page/home.erb @@ -8,11 +8,11 @@

-

daru-io

+

daru-io

A set of independent importers/exporters from various data sources and formats.

-

daru-view

+

daru-view

A set of view helpers for web frameworks, for pretty representations of data.

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index e6d8598..3c87d09 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -15,6 +15,7 @@ <%=raw Daru::View.dependent_script(:datatables) %> <%=raw Daru::View.dependent_script(:googlecharts) %> + <%=raw Daru::View.dependent_script(:highcharts) %>