#585 - isGroupTypeDisabled

src/main/resources/static/js/charts.js

@@ -81,6 +81,7 @@ $(document).ready(function()
     {
         toggleChartTypeButtons('button-display-type', this);
         document.getElementsByName('displayType')[0].value = this.dataset.value;
+        hideGroupTypeButtonsIfOnlyOneDistinctGroup();
         filterChartPreviews();
     });
 
@@ -262,6 +263,21 @@ function toggleChartTypeButtons(styleClassName, item)
     item.classList.toggle('active', true);
 }
 
+function hideGroupTypeButtonsIfOnlyOneDistinctGroup()
+{
+    let displayTypeName = document.querySelector('.button-display-type.active').dataset.value;
+    let chartsWithCurrentDisplayType = document.querySelectorAll('.chart-preview-column[data-display-type="' + displayTypeName +'"]');
+
+    let groupTypes = new Set();
+    for(let i = 0; i < chartsWithCurrentDisplayType.length; i++)
+    {
+        groupTypes.add(chartsWithCurrentDisplayType[i].dataset.groupType);
+    }
+
+    let hasOnlyOneDistinctGroupType = groupTypes.size <= 1;
+    document.getElementById('chart-group-type-buttons').classList.toggle('hidden', hasOnlyOneDistinctGroupType);
+}
+
 function filterChartPreviews()
 {
     let displayTypeName = document.querySelector('.button-display-type.active').dataset.value;
@@ -273,14 +289,26 @@ function filterChartPreviews()
         allChartPreviews[i].classList.toggle('hidden', true);
     }
 
+    let isGroupTypeDisabled = document.getElementById('chart-group-type-buttons').classList.contains('hidden');
+
+    if(isGroupTypeDisabled)
+    {
+        let chartPreviews = document.querySelectorAll('.chart-preview-column[data-display-type="' + displayTypeName + '"]');
+        for(let i = 0; i < chartPreviews.length; i++)
+        {
+            chartPreviews[i].classList.toggle('hidden', false);
+        }
+    }
+    else
+    {
         let chartPreviews = document.querySelectorAll('.chart-preview-column[data-display-type="' + displayTypeName + '"][data-group-type="' + groupTypeName + '"]');
         for(let i = 0; i < chartPreviews.length; i++)
         {
             chartPreviews[i].classList.toggle('hidden', false);
         }
+    }
 
     unsetActiveChartPreview();
-
     toggleCustomChartButton(displayTypeName === 'CUSTOM');
 }
 

src/main/resources/templates/charts/charts.ftl

@@ -25,8 +25,6 @@
                 </div>
 
                 <@header.content>
-                    <br>
-
                     <div class="row">
                         <div class="col s12 center-align">
                             <@header.buttonLink url='' icon='edit' localizationKey='chart.button.settings' noUrl=true id='buttonShowChartSettings' classes='hidden'/>
@@ -47,7 +45,7 @@
                         </div>
                         <input type="hidden" name="displayType" value="${chartSettings.getDisplayType().name()}">
 
-                        <div class="container">
+                        <div class="container" id="chart-group-type-buttons">
                             <div class="row">
                                 <div class="col s12 center-align">
                                     <#list groupTypes as groupType>