New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added custom CSS in highcharts #93

Merged
merged 11 commits into from Jul 6, 2018

Conversation

Projects
None yet
2 participants
@Prakriti-nith
Contributor

Prakriti-nith commented May 22, 2018

There are two modes of Highcharts: Classic and Styled.
Classic mode provides some custom CSS styling and does not require any additional dependencies while styled mode uses js dependency (like https://code.highcharts.com/stock/js/highstock.js) replacing the older one + the CSS dependency and provides full custom CSS styling.
I have implemented the Styled mode for web frameworks but as there is no method to load CSS files in IRuby notebook, so I have kept classic mode for IRuby notebook where some styling can be provided.
User needs to provide the required CSS styling in CSS option.
I will add the examples of IRuby notebook and rails application.

@Prakriti-nith Prakriti-nith force-pushed the Prakriti-nith:highcharts_css branch from 477b698 to 0fea75f May 23, 2018

@Prakriti-nith

This comment has been minimized.

Contributor

Prakriti-nith commented May 23, 2018

Examples Link : HighCharts - Custom Styling

@Shekharrajak

This comment has been minimized.

Collaborator

Shekharrajak commented May 26, 2018

If you are adding more examples then use daru dataframe , vector as data source. Use some daru features to manipulate the data and various charts for quick overview of the data.

@Shekharrajak

Run all the highcharts related examples in iruby and commit, to be sure nothing is breaking.

@@ -14,6 +16,9 @@ def self.init_script(
# Note: Don't reorder the dependent_js elements. It must be loaded in
# the same sequence. Otherwise some of the JS overlap and doesn't work.
js = ''
js << "\n<style type='text/css'>"

This comment has been minimized.

@Shekharrajak

Shekharrajak May 26, 2018

Collaborator

It is not js. Define separate method for css.

This comment has been minimized.

@Prakriti-nith

Prakriti-nith May 26, 2018

Contributor

I have created another method generate_init_code_css for loading css code. I have changed the variable name accordingly.

'highcharts-3d.js', 'modules/data.js']
dependent_js=['highstock.js', 'map.js', 'highcharts-more.js',
'modules/exporting.js', 'highcharts-3d.js', 'modules/data.js',
'maps/custom/europe.js']

This comment has been minimized.

@Shekharrajak

Shekharrajak May 26, 2018

Collaborator

This PR must be isolated from the highmap.

@@ -397,8 +397,8 @@
html = File.read(path)
expect(html).to match(/html/)
expect(html).to match(/Chart/)
expect(html).to match(/BEGIN highstock.js/i)
expect(html).to match(/END highstock.js/i)
expect(html).to match(/BEGIN js\/highstock.js/i)

This comment has been minimized.

@Shekharrajak

Shekharrajak May 26, 2018

Collaborator

Let us know why it is under js folder now.

This comment has been minimized.

@Prakriti-nith

Prakriti-nith May 26, 2018

Contributor

There are two dependencies:

  1. http://code.highcharts.com/stock/highstock.js
  2. http://code.highcharts.com/stock/js/highstock.js

Former is used in classic mode while the latter one+CSS dependency is used in styled mode which I have implemented in web frameworks (so, I have put this dependency separately in js folder).

@Prakriti-nith Prakriti-nith force-pushed the Prakriti-nith:highcharts_css branch from 01dc224 to 4b7b151 May 26, 2018

@Prakriti-nith Prakriti-nith force-pushed the Prakriti-nith:highcharts_css branch from 190fd2f to 3048dfa Jun 16, 2018

Prakriti-nith added some commits Jun 16, 2018

@Prakriti-nith

This comment has been minimized.

Contributor

Prakriti-nith commented Jun 26, 2018

@Shekharrajak can you please review this PR and let me know if there are any changes that I have to make?

@Shekharrajak

What is the coverage report after these changes ? It looks good to me, just consider the comments.

@@ -112,7 +112,10 @@ def dependent_script(lib=:nyaplot)
when :nyaplot
Nyaplot.init_script
when :highcharts
LazyHighCharts.init_script
init_code = ''

This comment has been minimized.

@Shekharrajak

Shekharrajak Jun 27, 2018

Collaborator

We must have one class method, which will return init_css and init_script.
So we can use the same class method here as well.
DRY and Loose Coupling concepts should be applied.

if css_data != ''
script << '<style>'
# Applying the css to chart div
css_data.each do |css|

This comment has been minimized.

@Shekharrajak

Shekharrajak Jun 27, 2018

Collaborator

Please check alignment and script must be css_script or specific name for css.

end
end

task :css do
say "Grabbing CSS of HighCharts from Upstream..." do

This comment has been minimized.

@Shekharrajak

Shekharrajak Jun 27, 2018

Collaborator

Please test it manually once again properly and confirm.

This comment has been minimized.

@Prakriti-nith

Prakriti-nith Jun 27, 2018

Contributor

I have tested the rake task and the examples again. Everything is working fine.

@Prakriti-nith

This comment has been minimized.

Contributor

Prakriti-nith commented Jun 27, 2018

Right now, after this commit the coverage of daru-view is 96.15%

@@ -112,7 +112,7 @@ def dependent_script(lib=:nyaplot)
when :nyaplot
Nyaplot.init_script
when :highcharts
LazyHighCharts.init_script
LazyHighCharts.init_code

This comment has been minimized.

@Shekharrajak

Shekharrajak Jul 1, 2018

Collaborator

I think it must be init_script only (to have the same method name in all the places).

# Loads the dependent javascript required
#
# @param [Array] dependent js files required
# @return [String] js code of the dependent files
def self.init_script(

This comment has been minimized.

@Shekharrajak

Shekharrajak Jul 1, 2018

Collaborator

You can change this name to init_javascript.

@Prakriti-nith

This comment has been minimized.

Contributor

Prakriti-nith commented Jul 1, 2018

access_row_tuples_by_indexs has been recently removed from the daru, so it is creating problems in the visualization of googlecharts and highcharts.

@Shekharrajak Shekharrajak referenced this pull request Jul 2, 2018

Closed

Travis is failing #103

@Shekharrajak

Shekharrajak approved these changes Jul 6, 2018 edited

I believe you have tested the IRuby notebook examples with these changes.

@Shekharrajak Shekharrajak merged commit c1f6a44 into SciRuby:master Jul 6, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment