Merge pull request #37 from umairabid/main

Add load theme function to load themes with window context

Author: igorkasyanchuk

README.md

@@ -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

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);
+    });
+  };
+})();