Refs matomo-org#4077, determine node area dynamically.

sabl0r · Sep 16, 2013 · 72e0816 · 72e0816
1 parent 83261e0
commit 72e0816
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 9 deletions.
diff --git a/plugins/TreemapVisualization/Treemap.php b/plugins/TreemapVisualization/Treemap.php
@@ -29,6 +29,9 @@ class Treemap extends Graph
     const FOOTER_ICON = 'plugins/TreemapVisualization/images/treemap-icon.png';
     const FOOTER_ICON_TITLE = 'Treemap';
 
+    const DEFAULT_MAX_ELEMENTS = 10;
+    const MIN_NODE_AREA = 400; // 20px * 20px
+
     /**
      * Controls whether the treemap nodes should be colored based on the evolution percent of
      * individual metrics, or not. If false, the jqPlot pie graph's series colors are used to
@@ -56,6 +59,9 @@ class Treemap extends Graph
      */
     public function __construct($view)
     {
+        // we determine the elements count dynamically based on available width/height
+        $view->visualization_properties->max_graph_elements = false;
+
         parent::__construct($view);
 
         $view->datatable_js_type = 'TreemapDataTable';
@@ -97,7 +103,6 @@ public function render($dataTable, $properties)
     public static function getDefaultPropertyValues()
     {
         $result = parent::getDefaultPropertyValues();
-        $result['visualization_properties']['graph']['max_graph_elements'] = 10;
         $result['visualization_properties']['graph']['allow_multi_select_series_picker'] = false;
         $result['visualization_properties']['infoviz-treemap']['show_evolution_values'] = true;
         $result['visualization_properties']['infoviz-treemap']['depth'] = 0;
@@ -114,12 +119,7 @@ public static function getDefaultPropertyValues()
      */
     public function isThereDataToDisplay($dataTable, $view)
     {
-        if ($dataTable instanceof Map) { // will be true if calculating evolution values
-            $childTables = $dataTable->getArray();
-            $dataTable = end($childTables);
-        }
-
-        return $dataTable->getRowsCount() != 0;
+        return $this->getCurrentData($dataTable)->getRowsCount() != 0;
     }
 
     private function getGraphData($dataTable, $properties)
@@ -133,7 +133,7 @@ private function getGraphData($dataTable, $properties)
             $generator->showEvolutionValues();
         }
 
-        $truncateAfter = Common::getRequestVar('truncateAfter', false, 'int');
+        $truncateAfter = $this->getDynamicMaxElementCount($this->getCurrentData($dataTable), $metric);
         if ($truncateAfter > 0) {
             $generator->setTruncateAfter($truncateAfter);
         }
@@ -165,4 +165,46 @@ private function handleShowEvolutionValues($view)
             $view->request_parameters_to_modify['date'] = $previousDate . ',' . $date;
         }
     }
+
+    private function getDynamicMaxElementCount($dataTable, $metricName)
+    {
+        $availableWidth = Common::getRequestVar('availableWidth', false);
+        $availableHeight = Common::getRequestVar('availableHeight', false);
+
+        if (!is_numeric($availableWidth)
+            || !is_numeric($availableHeight)
+        ) {
+            return self::DEFAULT_MAX_ELEMENTS - 1;
+        } else {
+            $totalArea = $availableWidth * $availableHeight;
+
+            $metricValues = $dataTable->getColumn($metricName);
+            $metricSum = array_sum($metricValues);
+
+            // find the row index in $dataTable for which all rows after it will have treemap
+            // nodes that are too small. this is the row from which we truncate.
+            // Note: $dataTable is sorted at this point, so $metricValues is too
+            $result = 0;
+            foreach ($metricValues as $value) {
+                $nodeArea = ($totalArea * $value) / $metricSum;
+
+                if ($nodeArea < self::MIN_NODE_AREA) {
+                    break;
+                } else {
+                    ++$result;
+                }
+            }
+            return $result;
+        }
+    }
+
+    private function getCurrentData($dataTable)
+    {
+        if ($dataTable instanceof Map) { // will be true if calculating evolution values
+            $childTables = $dataTable->getArray();
+            return end($childTables);
+        } else {
+            return $dataTable;
+        }
+    }
 }
diff --git a/plugins/TreemapVisualization/javascripts/treemapViz.js b/plugins/TreemapVisualization/javascripts/treemapViz.js
@@ -541,6 +541,30 @@
         }
     });
 
-    DataTable.registerFooterIconHandler('infoviz-treemap', DataTable.switchToGraph);
+    DataTable.registerFooterIconHandler('infoviz-treemap', function (dataTable, viewDataTableId) {
+        var filters = dataTable.resetAllFilters();
+
+        // make sure only one column is used
+        var columns = filters.columns || 'nb_visits';
+        if (columns.indexOf(',') != -1) {
+            columns = columns.split(',')[0];
+        }
+        dataTable.param.columns = columns;
+
+        // determine what the width of a treemap will be, by inserting a dummy infoviz-treemap element
+        // into the DOM
+        var $wrapper = dataTable.$element.find('.dataTableWrapper'),
+            $dummyTreemap = $('<div/>').addClass('infoviz-treemap').css({'visibility': 'hidden', 'position': 'absolute'});
+
+        $wrapper.prepend($dummyTreemap);
+        var width = $dummyTreemap.width(), height = $dummyTreemap.height();
+
+        // send available width & height so we can pick the best number of elements to display
+        dataTable.param.availableWidth = width;
+        dataTable.param.availableHeight = height;
+
+        dataTable.param.viewDataTable = viewDataTableId;
+        dataTable.reloadAjaxDataTable();
+    });
 
 }(jQuery, $jit, require));