diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js index 20483408ceb268dda8da2e663f3f5a7e61708a10..3c0fae50ecb20e955e82bd54dd909bcc73ee33eb 100644 --- a/src/main/resources/static/js/charts.js +++ b/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 chartPreviews = document.querySelectorAll('.chart-preview-column[data-display-type="' + displayTypeName + '"][data-group-type="' + groupTypeName + '"]'); - for(let i = 0; i < chartPreviews.length; i++) + 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 { - chartPreviews[i].classList.toggle('hidden', false); + 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'); } diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl index d340ffccd28f2d0e8231b65de448fbe846985be0..e28600489f0fa4b9a1ad3cd03a789abccef08830 100644 --- a/src/main/resources/templates/charts/charts.ftl +++ b/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>