diff --git a/CHANGES b/CHANGES index 798aed9..3e9d725 100644 --- a/CHANGES +++ b/CHANGES @@ -1,5 +1,8 @@ - master - ... + +- 0.0.9 + - https://github.com/railsjazz/rails_charts/pull/30 + - https://github.com/railsjazz/rails_charts/pull/37 - 0.0.8 - JS event when chart was rendered https://github.com/railsjazz/rails_charts/pull/31 diff --git a/Gemfile.lock b/Gemfile.lock index 62135be..f0af9e5 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - rails_charts (0.0.9) + rails_charts (1.0.0) rails GEM diff --git a/README.md b/README.md index 45466f3..7379ad8 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ One more gem to build nice charts for your Ruby on Rails application. -With it you can build various types of charts [Apache eCharts](https://echarts.apache.org/) library (v. 5.4.0). This gem simplifies interface and adding few helpers to start adding charts in your app with just a few lines of code. +With it you can build various types of charts [Apache eCharts](https://echarts.apache.org/) library (v. 6.0). This gem simplifies interface and adding few helpers to start adding charts in your app with just a few lines of code. What you can build with it: @@ -129,6 +129,27 @@ import "echarts/theme/dark" 4) customize charts if needed. See available options or [official documentation](https://echarts.apache.org/examples/en/index.html). +### Loading Themes + +Themes can be loaded as shown in examples above. However, in some cases where +themes are included in environment where `this` does not point to `window`, you +might get errors. In that case, you can use loadTheme helper to load themes by +name. For example, instead of + +```javascript +import 'echarts/theme/dark' +``` +you can do + +```javascript +// application.js +import "echarts" +import "echarts.themeloader" + +// Load the desired theme dynamically +RailsCharts.loadTheme('dark'); +``` + ## Options ```ruby diff --git a/app/assets/javascripts/echarts.themeloader.js b/app/assets/javascripts/echarts.themeloader.js new file mode 100644 index 0000000..546bbe7 --- /dev/null +++ b/app/assets/javascripts/echarts.themeloader.js @@ -0,0 +1,29 @@ +(function() { + window.RailsCharts = window.RailsCharts || {}; + window.RailsCharts.loadedThemes = window.RailsCharts.loadedThemes || []; + + window.RailsCharts.loadTheme = function(themeName) { + document.addEventListener('DOMContentLoaded', () => { + if (typeof echarts === 'undefined') { + console.error('ECharts is not loaded. Please ensure echarts.js is included.'); + return; + } + + if (window.RailsCharts.loadedThemes.includes(themeName)) { + console.warn(`Theme '${themeName}' is already loaded.`); + return; + } + + const script = document.createElement('script'); + script.type = 'text/javascript'; + script.src = `/assets/echarts/theme/${themeName}.js`; + script.onload = () => { + console.log(`Theme '${themeName}' loaded successfully.`); + }; + script.onerror = () => { + console.error(`Failed to load theme: /assets/echarts/theme/${themeName}.js`); + }; + document.head.appendChild(script); + }); + }; +})(); diff --git a/lib/rails_charts/base_chart.rb b/lib/rails_charts/base_chart.rb index 08e630a..a30cb96 100644 --- a/lib/rails_charts/base_chart.rb +++ b/lib/rails_charts/base_chart.rb @@ -80,6 +80,11 @@ def js_code window.addEventListener('turbo:load', init_#{chart_id}); window.addEventListener('turbolinks:load', init_#{chart_id}); + window.addEventListener('turbo:frame-render', init_#{chart_id}); + window.addEventListener('turbo:frame-load', ()=> { + window.removeEventListener('turbo:frame-render', init_#{chart_id}); + }); + document.addEventListener("turbolinks:before-render", destroy_#{chart_id}); document.addEventListener("turbo:before-render", destroy_#{chart_id}); diff --git a/lib/rails_charts/version.rb b/lib/rails_charts/version.rb index 18ec0e5..f6a2b6d 100644 --- a/lib/rails_charts/version.rb +++ b/lib/rails_charts/version.rb @@ -1,3 +1,3 @@ module RailsCharts - VERSION = "0.0.9" + VERSION = "1.0.0" end