Issue #1710 New storage bar tooltips

For each kind of files give the number and for each file extension give number of files and total files size

admin/intro.php

@@ -384,9 +384,8 @@ $template->assign('DAY_LABELS', $day_labels);
 // |                           get storage data                            |
 // +-----------------------------------------------------------------------+
 
-$video_format = array('webm','webmv','ogg','ogv','mp4','m4v');
+$video_format = array('webm','webmv','ogg','ogv','mp4','m4v', 'mov');
 $data_storage = array();
-$file_extensions_of = array();
 
 //Select files in Image_Table
 $query = '
@@ -416,34 +415,37 @@ foreach ($file_extensions as $ext => $ext_details)
     $type = 'Other';
   }
 
-  @$file_extensions_of[$type][strtoupper($ext)] = $ext_details['ext_counter'];
-  @$data_storage[$type] += $ext_details['filesize'];
-}
+  @$data_storage[$type]['total']['filesize'] += $ext_details['filesize'];
+  @$data_storage[$type]['total']['nb_files'] += $ext_details['ext_counter'];
 
-$data_storage_details = array();
-
-foreach ($file_extensions_of as $type => $extensions)
-{
-  $details = array();
-
-  foreach ($extensions as $ext => $counter)
-  {
-    $details[] = $counter.'x'.$ext;
-  }
-  $data_storage_details[$type] = implode(', ', $details);
+  @$data_storage[$type]['details'][strtoupper($ext)] = array(
+    'filesize' => $ext_details['filesize'],
+    'nb_files' => $ext_details['ext_counter'],
+  );
 }
 
 //Select files from format table
 $query = '
-SELECT SUM(filesize)
+SELECT
+    COUNT(*) AS ext_counter,
+    ext,
+    SUM(filesize) AS filesize
   FROM `'.IMAGE_FORMAT_TABLE.'`
+  GROUP BY ext
 ;';
 
-$result = query2array($query);
-
-if (isset($result[0]['SUM(filesize)']))
+$file_extensions = query2array($query, 'ext');
+foreach ($file_extensions as $ext => $ext_details)
 {
-  $data_storage['Formats'] = $result[0]['SUM(filesize)'];
+  $type = 'Formats';
+
+  @$data_storage[$type]['total']['filesize'] += $ext_details['filesize'];
+  @$data_storage[$type]['total']['nb_files'] += $ext_details['ext_counter'];
+
+  @$data_storage[$type]['details'][strtoupper($ext)] = array(
+    'filesize' => $ext_details['filesize'],
+    'nb_files' => $ext_details['ext_counter'],
+  );
 }
 
 // Add cache size if requested and known.
@@ -454,7 +456,7 @@ if ($conf['add_cache_to_storage_chart'] && isset($conf['cache_sizes']))
   {
     if (isset($cache_sizes[0]) && isset($cache_sizes[0]['value']))
     {
-      $data_storage['Cache'] = $cache_sizes[0]['value']/1024;
+      @$data_storage['Cache']['total']['filesize'] = $cache_sizes[0]['value']/1024;
     }
   }
 }
@@ -463,13 +465,13 @@ if ($conf['add_cache_to_storage_chart'] && isset($conf['cache_sizes']))
 $total_storage = 0;
 foreach ($data_storage as $value) 
 {
-  $total_storage += $value;
+  $total_storage += $value['total']['filesize'];
 }
 
 //Pass data to HTML
 $template->assign('STORAGE_TOTAL',$total_storage);
 $template->assign('STORAGE_CHART_DATA',$data_storage);
-$template->assign('STORAGE_DETAILS', json_encode($data_storage_details));
+
 // +-----------------------------------------------------------------------+
 // |                           sending html code                           |
 // +-----------------------------------------------------------------------+

admin/themes/default/template/intro.tpl

@@ -10,8 +10,9 @@ const str_mb_used = "{'%s MB used'|translate}";
 const str_gb = "{'%sGB'|translate}".replace(' ', ' ');
 const str_mb = "{'%sMB'|translate}".replace(' ', ' ');
 const storage_total = {$STORAGE_TOTAL};
-const storage_details = {$STORAGE_DETAILS};
-const storage_files = "{'%d files'|translate|escape:javascript}";
+const storage_details = {$STORAGE_CHART_DATA|json_encode};
+const translate_files = "{'%d files'|translate|escape:javascript}";
+let translate_type = {};
 {literal}
 jQuery().ready(function(){
 	jQuery('.cluetip').cluetip({
@@ -59,18 +60,91 @@ jQuery().ready(function(){
   let size_nb = storage_total > 1000000 ? (storage_total / 1000000).toFixed(2) : (storage_total / 1000).toFixed(0);
   $(".chart-title-infos").html(size_info.replace("%s", size_nb));
 });
+{/literal}
+{foreach from=$STORAGE_CHART_DATA key=type_to_translate item=details}
+translate_type['{$type_to_translate}'] = "{$type_to_translate|translate}";
+{/foreach}
+{literal}
+Object.entries(storage_details).forEach(([type, infos]) => {
+  // Determine if we use MB or GB and show it correctly 
+  let size = infos.total.filesize;
+  let str_size_type_string = size > 1000000 ? str_gb : str_mb;
+  let size_nb = size > 1000000 ? (size / 1000000).toFixed(2) : (size / 1000).toFixed(0);
+  let str_size = str_size_type_string.replace("%s", size_nb);
+
+  // Display head of Tooltip
+  $('#storage-title-' + type).html('<b>'+translate_type[type]+'</b>');
+  $('#storage-size-' + type).html('<b>'+ str_size +'</b>');
+  $('#storage-files-' + type).html('<p>'+ (infos.total.nb_files ? translate_files.replace('%d', infos.total.nb_files) : "~") +'</p>');
+
+  // Display body of Tooltip
+  if (infos.details) {
+    $.each(infos.details, function(ext, data) {
+      // Determinate if we use MB or GB and show it correctly (duplicate code from total size for scaling code)
+      let detail_size = data.filesize;
+      let detail_str_size_type_string;
+      let detail_size_nb = 0;
+      if (detail_size > 1000000) {
+        detail_str_size_type_string = str_gb;
+        detail_size_nb = (detail_size / 1000000).toFixed(2);
+      } else {
+        detail_str_size_type_string = str_mb;
+        detail_size_nb =  (detail_size / 1000).toFixed(0) < 1 ? (detail_size / 1000).toFixed(2) : (detail_size / 1000).toFixed(0);
+      }
+      let detail_str_size = detail_str_size_type_string.replace("%s", detail_size_nb);
+      $('#storage-detail-' + type).append(''+
+        '<span class="tooltip-details-cont">'+
+          '<span class="tooltip-details-ext"><b>'+ ext +'</b></span>'+
+          '<span class="tooltip-details-size"><b>'+ detail_str_size +'</b></span>'+
+          '<span class="tooltip-details-files">'+ translate_files.replace('%d', data.nb_files) +'</span>'+
+        '</span>'+
+      '');
+      let ext_bg_color = $('.storage-chart span[data-type="storage-'+type+'"]').css('background-color');
+      $('#storage-'+type+' .tooltip-details-ext b').css('color', ext_bg_color);
+    });
+  } else {
+    $('#storage-'+ type +' .separated').attr('style', 'display: none !important');
+    $('#storage-' + type +' .tooltip-header').css('margin', '0');
+  }
+  
+  // Fixing storage chart tooltip bug in little screen
+  // Keep showing tooltip and his % when hovered
+  $('#storage-' + type).hover(function() {
+    $(this).css('display', 'block');
+    $('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0.4');
+  }, function() {
+    $(this).css('display', 'none');
+    $('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0');
+  });
+  $('.storage-chart span[data-type="storage-'+ type +'"]').hover(function() {
+    $(this).find('p').css('opacity', '0.4');
+  }, function() {
+    $(this).find('p').css('opacity', '0');
+  });
+});
 
 //Tooltip for the storage chart
 $('.storage-chart span').each(function () {
   let tooltip = $('.storage-tooltips #'+$(this).data('type'));
+  let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow');
   let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2;
+  // Move tooltip if he create horizontal scrollbar
   let storage_width = $('#chart-title-storage').innerWidth();
   if(left + tooltip.innerWidth() > storage_width){
       let diff = (left + tooltip.innerWidth()) - storage_width;
       left = left - diff;
-      $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow').css('left', 'calc(50% + '+ diff +'px)');
+      arrow.css('left', 'calc(50% + '+ diff +'px)');
+  }
+  tooltip.css('left', left+"px");
+  // Move tooltip if he create vertical scrollbar
+  let str_chart_pos = $('.storage-chart').offset().top;
+  let str_chart_height = $('.storage-chart').innerHeight();
+  let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height;
+  let windows_height = $(window).height();
+  if (str_chart_pos + tooltip_height > windows_height) {
+    tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)');
+    arrow.addClass('bottom');
   }
-  tooltip.css('left', left+"px")
   $(this).hover(function() {
     tooltip.toggle();
   });
@@ -79,81 +153,31 @@ $('.storage-chart span').each(function () {
 $(window).on('resize', function(){
   $('.storage-chart span').each(function () {
     let tooltip = $('.storage-tooltips #'+$(this).data('type'));
+    let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow');
     let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2;
-    let storage_width = $('#chart-title-storage').innerWidth() + (4 * $('.intro-page-container').innerWidth() / 100);
+    // Move tooltip if he create horizontal scrollbar
+    let storage_width = $('#chart-title-storage').innerWidth();
     if(left + tooltip.innerWidth() > storage_width){
-      let diff = (left + tooltip.innerWidth()) - storage_width + 5;
+      let diff = (left + tooltip.innerWidth()) - storage_width;
       left = left - diff;
-      $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow').css('left', 'calc(50% + '+ diff +'px)');
+      arrow.css('left', 'calc(50% + '+ diff +'px)');
     }
-    tooltip.css('left', left+"px")
+    tooltip.css('left', left+"px");
+    // Move tooltip if he create vertical scrollbar
+      let str_chart_pos = $('.storage-chart').offset().top;
+      let str_chart_height = $('.storage-chart').innerHeight();
+      let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height;
+      let windows_height = $(window).height();
+      if (str_chart_pos + tooltip_height > windows_height) {
+        tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)');
+        arrow.addClass('bottom');
+      } else {
+        tooltip.css('bottom', '');
+        arrow.removeClass('bottom');
+      }
   });
 });
-let size = 0;
-let str_size_type = "MB";
-let size_nb = 0;
-let str_size = "";
-let str_detail;
-let str_items;
-let total_files = 0;
-let str_per_file = 0;
-let str_dtl_color_bg;
 {/literal}
-{foreach from=$STORAGE_CHART_DATA key=type item=value}
-  size = {$value};
-  str_size_type_string = size > 1000000 ? str_gb : str_mb;
-  size_nb = size > 1000000 ? (size / 1000000).toFixed(2) : (size / 1000).toFixed(0);
-  str_size = str_size_type_string.replace("%s", size_nb);
-
-  if (typeof storage_details.{$type} !== 'undefined') {
-    // str_size += " (" + storage_details.{$type} + ")";
-  }
-
-  str_detail = storage_details["{$type}"];
-  if(str_detail) {
-    str_items = str_detail.split(",");
-    str_items.forEach(function(i) {
-      // Count total files
-      total_files = parseInt(i.split("x")[0], 10) + total_files;
-      // Count MB/GB per files 
-      str_per_file = i.split('x')[0] * size_nb / str_items.map(i => parseInt(i)).reduce((acc, nb) => acc + nb, 0);
-      $("#storage-detail-{$type}").append(''+
-        '<span class="tooltip-details-cont">'+
-          '<span class="tooltip-details-ext"><b>'+ i.split('x')[1] +'</b></span>'+
-          '<span class="tooltip-details-size"><b>'+ str_size_type_string.replace("%s", str_per_file.toFixed(0)) +'</b></span>'+
-          '<span class="tooltip-details-files">'+ storage_files.replace('%d', i.split('x')[0]) +'</span>'+
-        '</span>'+
-      '');
-    });
-  } else {
-    $('#storage-{$type} .separated').attr('style', 'display: none !important');
-    $('#storage-{$type} .tooltip-header').css('margin' , '0');
-  }
- 
-  $("#storage-title-{$type}").html("<b></b>");
-  $("#storage-title-{$type} b").html("{$type|translate}");
-  $("#storage-size-{$type}").html("<b>" + str_size + "</b>");
-  $("#storage-files-{$type}").html("<p>"+ (total_files === 0 ? '~' : storage_files.replace('%d', total_files)) +"</p>");
-  str_dtl_color_bg = $(".storage-chart span[data-type='storage-{$type}']").css('background-color');
-  $("#storage-{$type} .tooltip-details-ext b").css('color', str_dtl_color_bg);
-  total_files = 0;
-
-  // Fixing storage chart tooltip bug in little screen
-  // Keep showing tooltip and his % when hovered
-  $("#storage-{$type}").hover(function() {
-    $(this).css('display', 'block');
-    $(".storage-chart span[data-type='storage-{$type}'] p").css('opacity', '0.4');
-  }, function () {
-    $(this).css('display', 'none');
-    $(".storage-chart span[data-type='storage-{$type}'] p").css('opacity', '0');
-  });
-  $(".storage-chart span[data-type='storage-{$type}']").hover(function() {
-    $(this).find('p').css('opacity', '0.4');
-  }, function() {
-    $(this).find('p').css('opacity', '0');
-  });
-
-{/foreach}
 {/footer_script}
 
 {html_style}
@@ -297,9 +321,9 @@ let str_dtl_color_bg;
   <div id="chart-title-storage" class="chart-title"> {'Storage'|translate} <span class="chart-title-infos"> {'%s MB used'|translate:(round($STORAGE_TOTAL/1000, 0))} </span></div>
 
   <div class="storage-chart">
-    {foreach from=$STORAGE_CHART_DATA key=type item=value}
-      <span data-type="storage-{$type}" style="width:{$value/$STORAGE_TOTAL*100}%"> 
-        <p>{round($value/$STORAGE_TOTAL*100)}%</p>
+    {foreach from=$STORAGE_CHART_DATA key=type item=details}
+      <span data-type="storage-{$type}" style="width:{$details.total.filesize/$STORAGE_TOTAL*100}%"> 
+        <p>{round($details.total.filesize/$STORAGE_TOTAL*100)}%</p>
       </span>  
     {/foreach}
   </div>

admin/themes/default/theme.css

@@ -1599,6 +1599,11 @@ a.stat-box:hover {
   border-color: transparent transparent white transparent;
 }
 
+.storage-tooltips .tooltip-arrow.bottom {
+  top: 100%;
+  border-color: white transparent transparent transparent;
+}
+
 .storage-tooltips .separated {
   display: block !important;
   width: 100%;
@@ -1638,14 +1643,16 @@ a.stat-box:hover {
 }
 
 .storage-tooltips .tooltip-details {
-  display: grid !important;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .storage-tooltips .tooltip-details-cont{
+  width: 33%;
   align-items: center !important;
+  margin: 0 !important;
   margin-top: 10px !important;
+  margin-bottom: 5px !important;
 }
 
 .storage-tooltips .tooltip-details-ext,

admin/themes/roma/theme.css

@@ -274,6 +274,10 @@ a.stat-box:hover {
   border-color: transparent transparent #333333 transparent;
 }
 
+.storage-tooltips .tooltip-arrow.bottom{
+  border-color: #333333 transparent transparent transparent;
+}
+
 .intro-charts .tooltip .tooltip-details-title, .intro-charts .tooltip-title {
   color:#aeaeae !important;
   border: none !important;