From 703840c7e4eb12ac7647af319158843551a3509d Mon Sep 17 00:00:00 2001 From: Prakriti-nith Date: Sun, 29 Jul 2018 00:08:52 +0530 Subject: [PATCH] Resolve conflicts --- .../assets/javascripts/handling_events.coffee | 3 + .../assets/stylesheets/handling_events.scss | 3 + .../controllers/handling_events_controller.rb | 35 +++++ .../app/helpers/handling_events_helper.rb | 2 + .../views/handling_events/handling_events.erb | 27 ++++ demo_rails/config/routes.rb | 1 + .../handling_events_controller_test.rb | 7 + demo_sinatra/app.rb | 136 ++++++++++++++---- demo_sinatra/views/highcharts_css.erb | 27 ++++ 9 files changed, 217 insertions(+), 24 deletions(-) create mode 100644 demo_rails/app/assets/javascripts/handling_events.coffee create mode 100644 demo_rails/app/assets/stylesheets/handling_events.scss create mode 100644 demo_rails/app/controllers/handling_events_controller.rb create mode 100644 demo_rails/app/helpers/handling_events_helper.rb create mode 100644 demo_rails/app/views/handling_events/handling_events.erb create mode 100644 demo_rails/test/controllers/handling_events_controller_test.rb create mode 100644 demo_sinatra/views/highcharts_css.erb diff --git a/demo_rails/app/assets/javascripts/handling_events.coffee b/demo_rails/app/assets/javascripts/handling_events.coffee new file mode 100644 index 0000000..24f83d1 --- /dev/null +++ b/demo_rails/app/assets/javascripts/handling_events.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/demo_rails/app/assets/stylesheets/handling_events.scss b/demo_rails/app/assets/stylesheets/handling_events.scss new file mode 100644 index 0000000..1a4dec3 --- /dev/null +++ b/demo_rails/app/assets/stylesheets/handling_events.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the HandlingEvents controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/demo_rails/app/controllers/handling_events_controller.rb b/demo_rails/app/controllers/handling_events_controller.rb new file mode 100644 index 0000000..a402b3b --- /dev/null +++ b/demo_rails/app/controllers/handling_events_controller.rb @@ -0,0 +1,35 @@ +class HandlingEventsController < ApplicationController + def handling_events + Daru::View.plotting_library = :googlecharts + + data = [ + ['Year', 'Sales', 'Expenses'], + ['2013', 1000, 400], + ['2014', 1170, 460], + ['2015', 660, 1120], + ['2016', 1030, 540] + ] + user_options = { + listeners: { + page: "alert('The user is navigating to page ' + (e['page'] + 1));", + select: "alert('A table row was selected');" + } + } + @table = Daru::View::Table.new(data, {page: 'enable', pageSize: 2}, user_options) + + user_options_chart = { + listeners: { + select: " var selection = chart.getSelection(); + var selectedValue = data_table.getFormattedValue(selection[0].row, 0); + alert('You selected ' + selectedValue + ' year');", + # exports the chart to PDF format + ready: "var doc = new jsPDF(); + doc.addImage(chart.getImageURI(), 0, 0); + doc.save('chart.pdf');" + } + } + @column_chart = Daru::View::Plot.new(@table.table, { type: :column, width: 800 }, user_options_chart) + + render "handling_events" , layout: "googlecharts_layout" + end +end diff --git a/demo_rails/app/helpers/handling_events_helper.rb b/demo_rails/app/helpers/handling_events_helper.rb new file mode 100644 index 0000000..b7db6ef --- /dev/null +++ b/demo_rails/app/helpers/handling_events_helper.rb @@ -0,0 +1,2 @@ +module HandlingEventsHelper +end diff --git a/demo_rails/app/views/handling_events/handling_events.erb b/demo_rails/app/views/handling_events/handling_events.erb new file mode 100644 index 0000000..3c2425b --- /dev/null +++ b/demo_rails/app/views/handling_events/handling_events.erb @@ -0,0 +1,27 @@ +

Handling Events in Google Table

+

+ Data : + <%=raw @table.data %> +
+ Options + <%=raw @table.options %> +
+ Table : +
+ <%=raw @table.div %> +

+
+ +

Handling events in Google charts

+

+ Data : + <%=raw @column_chart.data %> +
+ Options + <%=raw @column_chart.options %> +
+ Chart : +
+ <%=raw @column_chart.div %> +

+
\ No newline at end of file diff --git a/demo_rails/config/routes.rb b/demo_rails/config/routes.rb index 5fdb16f..449a667 100644 --- a/demo_rails/config/routes.rb +++ b/demo_rails/config/routes.rb @@ -8,4 +8,5 @@ get '/highchartscss', to: 'highcharts_css#highcharts_css' get '/highchartstockmap', to: 'highchart_stock_map#highchart_stock_map' get '/multiplecharts', to: 'multiple_charts#multiple_charts' + get '/handlingevents', to: 'handling_events#handling_events' end diff --git a/demo_rails/test/controllers/handling_events_controller_test.rb b/demo_rails/test/controllers/handling_events_controller_test.rb new file mode 100644 index 0000000..c58b494 --- /dev/null +++ b/demo_rails/test/controllers/handling_events_controller_test.rb @@ -0,0 +1,7 @@ +require 'test_helper' + +class HandlingEventsControllerTest < ActionDispatch::IntegrationTest + # test "the truth" do + # assert true + # end +end diff --git a/demo_sinatra/app.rb b/demo_sinatra/app.rb index 1a0eb87..51e15bd 100644 --- a/demo_sinatra/app.rb +++ b/demo_sinatra/app.rb @@ -26,6 +26,11 @@ erb :highchart_stock_map, :layout => :highcharts_layout end +get '/highchartscss' do + highcharts_css + erb :highcharts_css, :layout => :highcharts_layout +end + def highchart_example # bar chart opts = { @@ -316,32 +321,32 @@ def highchart_stock_map opts5 = { - chart: { - type: 'pie', - options3d: { - enabled: true, - alpha: 45, - beta: 0 - } - }, - title: { - text: 'Browser market shares at a specific website, 2014' - }, - tooltip: { - pointFormat: '{series.name}: {point.percentage:.1f}%' - }, - plotOptions: { - pie: { - allowPointSelect: true, - cursor: 'pointer', - depth: 35, - dataLabels: { - enabled: true, - format: '{point.name}' - } - } + chart: { + type: 'pie', + options3d: { + enabled: true, + alpha: 45, + beta: 0 + } + }, + title: { + text: 'Browser market shares at a specific website, 2014' + }, + tooltip: { + pointFormat: '{series.name}: {point.percentage:.1f}%' + }, + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + depth: 35, + dataLabels: { + enabled: true, + format: '{point.name}' + } } } + } # data for the charts series_dt5 = ([{ @@ -529,3 +534,86 @@ def highchart_stock_map @map_idea = Daru::View::Plot.new(series_dt8, opts8) end + +def highcharts_css + # set the library, to plot charts + Daru::View.plotting_library = :highcharts + + # options for the charts + opts = { + chart: {defaultSeriesType: 'line'}, + css: ['.highcharts-background {fill: #efefef;stroke: #a4edba;stroke-width: 2px;}'], + title: { + text: 'Solar Employment Growth by Sector, 2010-2016' + }, + + subtitle: { + text: 'Source: thesolarfoundation.com' + }, + + yAxis: { + title: { + text: 'Number of Employees' + } + }, + legend: { + layout: 'vertical', + align: 'right', + verticalAlign: 'middle' + } + } + + # data for the charts + data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]) + + # initialize + @line_graph = Daru::View::Plot.new(data, opts) + + opts2 = { + chart: { + type: 'column' + }, + + css: ['.highcharts-color-0 {fill: #7cb5ec;stroke: #7cb5ec;}', + '.highcharts-axis.highcharts-color-0 .highcharts-axis-line {stroke: #7cb5ec;}', + '.highcharts-axis.highcharts-color-0 text {fill: #7cb5ec;}', + '.highcharts-color-1 {fill: #90ed7d;stroke: #90ed7d;}', + '.highcharts-axis.highcharts-color-1 .highcharts-axis-line {stroke: #90ed7d;}', + '.highcharts-axis.highcharts-color-1 text {fill: #90ed7d;}', + '.highcharts-yaxis .highcharts-axis-line {stroke-width: 2px;}' + ], + + title: { + text: 'Styling axes' + }, + + yAxis: [{ + className: 'highcharts-color-0', + title: { + text: 'Primary axis' + } + }, { + className: 'highcharts-color-1', + opposite: true, + title: { + text: 'Secondary axis' + } + }], + + plotOptions: { + column: { + borderRadius: 5 + } + } + } + + series_dt2 = [{ + data: [1, 3, 2, 4] + }, { + data: [324, 124, 547, 221], + yAxis: 1 + }] + + # initialize + @column_graph = Daru::View::Plot.new(series_dt2, opts2) +end diff --git a/demo_sinatra/views/highcharts_css.erb b/demo_sinatra/views/highcharts_css.erb new file mode 100644 index 0000000..de814e3 --- /dev/null +++ b/demo_sinatra/views/highcharts_css.erb @@ -0,0 +1,27 @@ +

Line Graph - Grey Background using CSS

+

+ Data : + <%= @line_graph.chart.series_data %> +
+ Options + <%= @line_graph.chart.options %> +
+ Chart : +
+ <%= @line_graph.div %> +

+
+ +

Column Graph - Different styling using CSS

+

+ Data : + <%= @column_graph.chart.series_data %> +
+ Options + <%= @column_graph.chart.options %> +
+ Chart : +
+ <%= @column_graph.div %> +

+
\ No newline at end of file