diff --git a/docs/assets/color-mode.js b/docs/assets/color-mode.js new file mode 100644 index 0000000..05b7659 --- /dev/null +++ b/docs/assets/color-mode.js @@ -0,0 +1,79 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2024 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + 'use strict'; + + const getStoredTheme = () => localStorage.getItem('theme'); + const setStoredTheme = (theme) => localStorage.setItem('theme', theme); + + const getPreferredTheme = () => { + const storedTheme = getStoredTheme(); + if (storedTheme) { + return storedTheme; + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + }; + + const setTheme = (theme) => { + if (theme === 'auto') { + document.documentElement.setAttribute('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); + } else { + document.documentElement.setAttribute('data-bs-theme', theme); + } + }; + + setTheme(getPreferredTheme()); + + const showActiveTheme = (theme, focus = false) => { + const themeSwitcher = document.querySelector('#bd-theme'); + + if (!themeSwitcher) { + return; + } + + const themeSwitcherText = document.querySelector('#bd-theme-text'); + const activeThemeIcon = document.querySelector('.theme-icon-active use'); + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`); + const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href'); + + document.querySelectorAll('[data-bs-theme-value]').forEach((element) => { + element.classList.remove('active'); + element.setAttribute('aria-pressed', 'false'); + }); + + btnToActive.classList.add('active'); + btnToActive.setAttribute('aria-pressed', 'true'); + activeThemeIcon.setAttribute('href', svgOfActiveBtn); + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`; + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel); + + if (focus) { + themeSwitcher.focus(); + } + }; + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + const storedTheme = getStoredTheme(); + if (storedTheme !== 'light' && storedTheme !== 'dark') { + setTheme(getPreferredTheme()); + } + }); + + window.addEventListener('DOMContentLoaded', () => { + showActiveTheme(getPreferredTheme()); + + document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => { + toggle.addEventListener('click', () => { + const theme = toggle.getAttribute('data-bs-theme-value'); + setStoredTheme(theme); + setTheme(theme); + showActiveTheme(theme, true); + }); + }); + }); +})(); diff --git a/docs/assets/style.css b/docs/assets/style.css new file mode 100644 index 0000000..027d918 --- /dev/null +++ b/docs/assets/style.css @@ -0,0 +1,13 @@ +html, +body { + min-height: 100vh; +} + +.footer { + position: sticky; + top: 100vh; +} + +.border-subtle { + --bs-border-color: var(--bs-border-color-subtle); +} diff --git a/docs/examples/bar-chart.html b/docs/examples/bar-chart.html index ccae3d0..93c583c 100644 --- a/docs/examples/bar-chart.html +++ b/docs/examples/bar-chart.html @@ -8,6 +8,7 @@ + @@ -21,17 +22,51 @@ --> + -
+
@@ -112,6 +147,18 @@
Grouped bar chart with dataset
+ + + diff --git a/docs/examples/bar-line-chart.html b/docs/examples/bar-line-chart.html index e1dfd07..59a42e8 100644 --- a/docs/examples/bar-line-chart.html +++ b/docs/examples/bar-line-chart.html @@ -8,6 +8,7 @@ + @@ -21,17 +22,51 @@ --> + -
+
@@ -70,6 +105,18 @@
Grouped bar and line chart
+ +
+ +
+ +
+
+ diff --git a/docs/examples/donut-chart.html b/docs/examples/donut-chart.html index 47c6710..8eebdde 100644 --- a/docs/examples/donut-chart.html +++ b/docs/examples/donut-chart.html @@ -8,6 +8,7 @@ + @@ -21,17 +22,51 @@ --> + -
+
@@ -56,6 +91,18 @@
Donut chart
+ +
+ +
+ +
+
+ diff --git a/docs/examples/index.html b/docs/examples/index.html index cf3a7c1..a559e7b 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -8,6 +8,7 @@ + @@ -22,17 +23,51 @@ document.location.href = document.location.href + '/'; } + -
+
@@ -151,6 +186,19 @@
Donut chart
+ +
+ +
+ +
+
+ + diff --git a/docs/examples/index.js b/docs/examples/index.js index 77ef62b..c80d251 100644 --- a/docs/examples/index.js +++ b/docs/examples/index.js @@ -37,7 +37,7 @@ async function wait(timer = 0) { function generateChartDiv(id, direction) { return ` -
+

Title

Sub-Title
@@ -215,13 +215,13 @@ function generateConfigurator(id) { View code ${accordionThemes.header.end('accordion_' + id, 'content_2_' + id)} ${accordionThemes.content.begin('accordion_' + id, 'content_2_' + id)} -
+
HTML

           
         

-        

+        

           
JavaScript / ODS Charts

           
             

diff --git a/docs/examples/multiple-line-chart.html b/docs/examples/multiple-line-chart.html
index 3e688e3..6e37d51 100644
--- a/docs/examples/multiple-line-chart.html
+++ b/docs/examples/multiple-line-chart.html
@@ -8,6 +8,7 @@
     
     
     
+    
     
     
     
@@ -21,17 +22,51 @@
     -->
     
     
+    
   
   
-    

+    

       
     

@@ -70,6 +105,18 @@ 
Time series line chart example

         

       

     
+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/examples/pie-chart.html b/docs/examples/pie-chart.html
index 14b8325..1719864 100644
--- a/docs/examples/pie-chart.html
+++ b/docs/examples/pie-chart.html
@@ -8,6 +8,7 @@
     
     
     
+    
     
     
     
@@ -21,17 +22,51 @@
     -->
     
     
+    
   
   
-    

+    

       
     

@@ -56,6 +91,18 @@ 
Pie chart

         

       

     
+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/examples/single-line-chart.html b/docs/examples/single-line-chart.html
index 71e0d47..1a39782 100644
--- a/docs/examples/single-line-chart.html
+++ b/docs/examples/single-line-chart.html
@@ -8,6 +8,7 @@
     
     
     
+    
     
     
     
@@ -21,17 +22,51 @@
     -->
     
     
+    
   
   
-    

+    

       
     

@@ -56,6 +91,18 @@ 
Single line chart example

         

       

     
+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/examples/stacked-bar-chart.html b/docs/examples/stacked-bar-chart.html
index d52a29e..7c11e5c 100644
--- a/docs/examples/stacked-bar-chart.html
+++ b/docs/examples/stacked-bar-chart.html
@@ -8,6 +8,7 @@
     
     
     
+    
     
     
     
@@ -21,17 +22,51 @@
     -->
     
     
+    
   
   
-    

+    

       
     

@@ -70,6 +105,18 @@ 
Horizontal stacked bar chart

         
       
     
+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/images/ods-charts-icons.svg b/docs/images/ods-charts-icons.svg
new file mode 100644
index 0000000..e46afb1
--- /dev/null
+++ b/docs/images/ods-charts-icons.svg
@@ -0,0 +1,14 @@
+
+  
+    
+  
+  
+    
+  
+  
+    
+  
+  
+    
+  
+
diff --git a/docs/index.html b/docs/index.html
index 464c376..6f76715 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -23,17 +24,51 @@
         document.location.href = document.location.href + '/';
       }
     
+    
   
   
-    

+    

       
     

@@ -85,6 +120,19 @@ 
Example

         
       
     
+
+    

+      
+      

+        
+      

+    

+
+    
     
     
   
diff --git a/docs/use_cases/add-unit.html b/docs/use_cases/add-unit.html
index b06dbea..322bd94 100644
--- a/docs/use_cases/add-unit.html
+++ b/docs/use_cases/add-unit.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -20,17 +21,51 @@
     
     
     
+    
   
   
-    

+    

       
     

@@ -64,7 +99,7 @@ 
Add unit in both Y axis and tooltip display

             
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -165,6 +200,18 @@ 
Sub-Title

         myChart.setOption(themeManager.getChartOptions());
       
     

+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/use_cases/index.html b/docs/use_cases/index.html
index b17f4af..7e8cd29 100644
--- a/docs/use_cases/index.html
+++ b/docs/use_cases/index.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -22,17 +23,51 @@
         document.location.href = document.location.href + '/';
       }
     
+    
   
   
-    

+    

       
     

@@ -129,6 +164,19 @@ 
Time slider

         

       

     

+
+    

+      
+      

+        
+      

+    

+
+    
     
     
   
diff --git a/docs/use_cases/index.js b/docs/use_cases/index.js
index 40f046a..b6df4fc 100644
--- a/docs/use_cases/index.js
+++ b/docs/use_cases/index.js
@@ -1,5 +1,7 @@
 var addViewCode = (prefixId = '', htmlId = 'htmlId', codeId = 'codeId') => {
-  var innitHtmlDoc = document.getElementById(prefixId + htmlId).innerHTML;
+  var htmlElt = document.getElementById(prefixId + htmlId);
+  htmlElt.setAttribute('data-bs-theme', 'light');
+  var innitHtmlDoc = htmlElt.innerHTML;
   document.write(`
     
     

@@ -23,13 +25,13 @@ var addViewCode = (prefixId = '', htmlId = 'htmlId', codeId = 'codeId') => {
         data-bs-parent="#${prefixId}viewCodeAcc"
       >
         

-          

+          

             
HTML

             
               

             
           

-          

+          

             
JavaScript / ODS Charts

             
               

diff --git a/docs/use_cases/legends-holders.html b/docs/use_cases/legends-holders.html
index 6ec792c..6134612 100644
--- a/docs/use_cases/legends-holders.html
+++ b/docs/use_cases/legends-holders.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -20,17 +21,51 @@
     
     
     
+    
   
   
-    

+    

       
     

@@ -55,7 +90,7 @@ 
Vertical legend holder example

               
             
           

-          

+          

             

               
                 NB: This orientation could also be provided through
@@ -71,7 +106,7 @@ 
Vertical legend holder example

           

           
In the example below, we prefer the Apache ECharts legend.orient method.

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -183,7 +218,7 @@ 
Legends holders for stacked bars example

             
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -315,6 +350,18 @@ 
Sub-Title

         myChart.setOption(themeManager.getChartOptions());
       
     

+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/use_cases/size-management.html b/docs/use_cases/size-management.html
index 2617c5f..8dc914f 100644
--- a/docs/use_cases/size-management.html
+++ b/docs/use_cases/size-management.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -20,17 +21,51 @@
     
     
     
+    
   
   
-    

+    

       
     

@@ -60,7 +95,7 @@ 
Collapsed graph example

             

               

                 

-                  

+                  

                     

                       
Title

                       
Sub-Title

@@ -135,6 +170,18 @@ 
Sub-Title

         myChart.setOption(themeManager.getChartOptions());
       
     

+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/use_cases/specify-color.html b/docs/use_cases/specify-color.html
index dfeeb5d..97c7f82 100644
--- a/docs/use_cases/specify-color.html
+++ b/docs/use_cases/specify-color.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -20,17 +21,51 @@
     
     
     
+    
   
   
-    

+    

       
     

@@ -61,7 +96,7 @@ 
Specify the color of a series

             
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -163,6 +198,18 @@ 
Sub-Title

         myChart.setOption(themeManager.getChartOptions());
       
     

+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/use_cases/time-slider.html b/docs/use_cases/time-slider.html
index 23dbc8b..e2021fc 100644
--- a/docs/use_cases/time-slider.html
+++ b/docs/use_cases/time-slider.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -20,17 +21,51 @@
     
     
     
+    
   
   
-    

+    

       
     

@@ -80,7 +115,7 @@ 
Time slider axis example

           

 
           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -168,6 +203,18 @@ 
Sub-Title

         myChart.setOption(themeManager.getChartOptions());
       
     

+
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/use_cases/tooltip.html b/docs/use_cases/tooltip.html
index e09514f..e6992ab 100644
--- a/docs/use_cases/tooltip.html
+++ b/docs/use_cases/tooltip.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -20,17 +21,51 @@
     
     
     
+    
   
   
-    

+    

       
     

@@ -55,7 +90,7 @@ 
Confine tooltip example

             
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -152,7 +187,7 @@ 
Specific value tooltip content

           

 
           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -266,7 +301,7 @@ 
Other specific content

             
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -349,7 +384,7 @@ 
Using Boosted 5 tooltip

             
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -438,7 +473,7 @@ 
Tooltip with HTML link(s)

             
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -520,7 +555,7 @@ 
Sub-Title

           
Using links in a Boosted 5 tooltip

           
The same code using the Boosted 5 tooltips:

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -610,6 +645,17 @@ 
Sub-Title

       

     

 
+    

+      
+      

+        
+      

+    

+
     
     
     
diff --git a/docs/use_cases/two-colors-serie.html b/docs/use_cases/two-colors-serie.html
index 6684ffc..469f636 100644
--- a/docs/use_cases/two-colors-serie.html
+++ b/docs/use_cases/two-colors-serie.html
@@ -8,6 +8,7 @@
     
     
     
+    
 
     
     
@@ -20,17 +21,51 @@
     
     
     
+    
   
   
-    

+    

       
     

@@ -66,7 +101,7 @@ 
Two colors for one series example

               
             
           

-          

+          

             

               
                 NB: This formatter could also be provided through
@@ -89,7 +124,7 @@ 
Two colors for one series example

             tooltip.formatter method.
           

           

-            

+            

               

                 
Title

                 
Sub-Title

@@ -187,6 +222,18 @@ 
Sub-Title

         myChart.setOption(themeManager.getChartOptions());
       
     

+
+    

+      
+      

+        
+      

+    

+