245-add-vertical-legends-management-in-documentation-tool

Orange-OpenSource · May 29, 2024 · fb4e034 · fb4e034
1 parent 57409d7
commit fb4e034
Showing 1 changed file with 50 additions and 10 deletions.
diff --git a/docs/examples/index.js b/docs/examples/index.js
@@ -35,17 +35,21 @@ async function wait(timer = 0) {
   });
 }
 
-function generateChartDiv(id) {
+function generateChartDiv(id, direction) {
   return `
   <div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
     <div class="chart_title">
       <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
       <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
     </div>
-    <div id="${id}_holder" style="flex-grow: 1; flex-shrink: 1;">
-      ${buildChartDiv(id)}
-    </div>
-    <div id="${id}_legend"></div>
+
+    <div id="${id}_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: ${direction}; ">
+      <div id="${id}_holder" style="flex-grow: 1; flex-shrink: 1;">
+        ${buildChartDiv(id)}
+      </div>
+      <div id="${id}_legend" style="min-width: 150px;"></div>
+
+    </div>    
   </div>`;
 }
 
@@ -170,6 +174,14 @@ function generateConfigurator(id) {
                 </select>
             </div>
 
+            <div class="col-md-4 popover-renderer">
+                <label for="legendsOrientation" class="form-label">Legends orientation</label>
+                <select class="form-select" id="legendsOrientation" onchange="changeTheme('${id}')">
+                    <option value="horizontal">Horizontal</option>
+                    <option value="vertical">Vertical</option>
+                </select>
+            </div>
+
             <div class="col-12">
               <h2>Global theme reference</h2>
             </div>
@@ -208,7 +220,7 @@ function generateConfigurator(id) {
 `;
 }
 
-function generateExampleDiv(id) {
+function generateExampleDiv(id, direction) {
   var div = document.getElementById(id);
 
   div.innerHTML = `<iframe style="width: 100%; min-height: 60vh;"></iframe>
@@ -227,7 +239,7 @@ function generateExampleDiv(id) {
 <script type="text/javascript" src="../../dist/ods-charts.js"></script>
 <script type="module" src="./index.js"></script>
 <script id="mainJS" src="${themeElements.BOOSTED5.script[0]}"></script>
-${generateChartDiv(id)}`);
+${generateChartDiv(id, direction)}`);
   iframeDocument.close();
 }
 
@@ -244,10 +256,11 @@ async function displayChart(
   popoverTemplateInput,
   usedLegends,
   cssThemeName,
+  legendsOrientation,
   refresh = false
 ) {
   if (!refresh) {
-    generateExampleDiv(id);
+    generateExampleDiv(id, (!usedLegends || usedLegends === 'odscharts') && 'vertical' === legendsOrientation ? 'row' : 'column');
     let iframe = document.querySelector(`#${id} iframe`);
     while (!(iframe.contentWindow.boosted && iframe.contentWindow.ODSCharts && iframe.contentWindow.echarts)) {
       await wait(50);
@@ -291,6 +304,9 @@ async function displayChart(
   if (!usedLegends) {
     usedLegends = 'odscharts';
   }
+  if (!legendsOrientation) {
+    legendsOrientation = 'horizontal';
+  }
 
   const actualTheme = iframe.contentDocument.getElementById('mainCSS').getAttribute('cssThemeName');
 
@@ -335,6 +351,9 @@ async function displayChart(
       options.legend = {
         data: options.series.length > 1 ? options.series.map((serie, i) => 'label ' + i) : undefined,
       };
+      if ('vertical' === legendsOrientation) {
+        options.legend.orient = legendsOrientation;
+      }
     }
   } else {
     if (!options.legend) {
@@ -345,6 +364,22 @@ async function displayChart(
         if (!serie.name) serie.name = 'label ' + index;
       });
     }
+    if ('horizontal' === legendsOrientation) {
+      options.legend.orient = 'horizontal';
+      options.legend.bottom = 10;
+      options.legend.left = 'left';
+      options.legend.padding = [0, 0, 0, 40];
+    } else {
+      options.legend.orient = 'vertical';
+      options.legend.right = 10;
+      options.legend.top = 'top';
+    }
+  }
+
+  if (usedLegends === 'odscharts' && 'vertical' === legendsOrientation) {
+    iframe.contentDocument.getElementById(id + '_holder_with_legend').style.flexDirection = 'row';
+  } else {
+    iframe.contentDocument.getElementById(id + '_holder_with_legend').style.flexDirection = 'column';
   }
 
   legends =
@@ -366,7 +401,7 @@ async function displayChart(
     div = iframe.contentDocument.getElementById(chartId);
   }
 
-  document.getElementById(id + '_html').innerText = generateChartDiv(id);
+  document.getElementById(id + '_html').innerText = generateChartDiv(id, usedLegends === 'odscharts' && 'vertical' === legendsOrientation ? 'row' : 'column');
   document.getElementById(id + '_code').innerText = `///////////////////////////////////////////////////
 // Used data
 ///////////////////////////////////////////////////
@@ -449,6 +484,9 @@ themeManager.externalizePopover({
   }
 // Display the chart using the configured theme and data.
 myChart.setOption(themeManager.getChartOptions());
+
+// May need to adapt chart size according to last features displayed
+window.setTimeout(myChart.resize);
   `;
 
   document.getElementById(id).dataset.odsExample = JSON.stringify({
@@ -522,7 +560,6 @@ myChart.setOption(themeManager.getChartOptions());
   themeManager.setDataOptions(options);
   if (legends) {
     themeManager.externalizeLegends(myChart, `#${id}_legend`);
-    iframe.style.height = `calc(60vh + 2.375rem)`; // Fix to avoid having a vertical scrollbar within the iframe for the first rendering
   } else {
     iframe.contentDocument.getElementById(id + '_legend').innerHTML = '';
   }
@@ -543,6 +580,8 @@ myChart.setOption(themeManager.getChartOptions());
 
   // Display the chart using the configuration items and data just specified.
   myChart.setOption(themeManager.getChartOptions());
+
+  window.setTimeout(myChart.resize);
 }
 
 async function changeTheme(id) {
@@ -563,6 +602,7 @@ async function changeTheme(id) {
     document.querySelector(`#accordion_${id} #usedLegends`).value,
 
     document.querySelector(`#accordion_${id} #cssTheme`).value,
+    document.querySelector(`#accordion_${id} #legendsOrientation`).value,
     true
   );
   if (document.querySelector('#view_custom_color_' + id)) {