Improve image graph axis display in email reports (#20953)

* Use unifont for French if available, remove NNBSP if unifont not available, tweak graph margins

* Updated UI test screenshots

* Replace with NBSP instead of normal space, add FR to list of unifont languages

* Do not use unicode font for French

* use higher values for image graphs

* updates expected UI test files

---------

Co-authored-by: sgiehl <stefan@matomo.org>

plugins/ImageGraph/StaticGraph.php

@@ -248,7 +248,12 @@ protected function initpData()
             }
         }
 
-        $this->pData->setAxisDisplay(0, AXIS_FORMAT_CUSTOM, '\\Piwik\\Plugins\\ImageGraph\\formatYAxis');
+        // Use a different formating method if not using unifont
+        $formatMethodName = 'formatYAxis';
+        if (strpos($this->font, 'unifont') === false) {
+            $formatMethodName = 'formatYAxisNonUnifont';
+        }
+        $this->pData->setAxisDisplay(0, AXIS_FORMAT_CUSTOM, '\\Piwik\\Plugins\\ImageGraph\\' . $formatMethodName);
 
         $this->pData->addPoints($this->abscissaSeries, self::ABSCISSA_SERIE_NAME);
         $this->pData->setAbscissa(self::ABSCISSA_SERIE_NAME);
@@ -376,7 +381,7 @@ private static function hex2rgb($hexColor)
 }
 
 /**
- * Global format method
+ * Global format method - unifont
  *
  * required to format y axis values using CpChart internal format callbacks
  * @param $value
@@ -386,3 +391,16 @@ function formatYAxis($value)
 {
     return NumberFormatter::getInstance()->format($value);
 }
+
+/**
+ * Global format method - non-unifont
+ *
+ * required to format y axis values using CpChart internal format callbacks
+ * @param $value
+ * @return mixed
+ */
+function formatYAxisNonUnifont($value)
+{
+    // Replace any narrow non-breaking spaces with non-breaking spaces as some fonts may not support it
+    return str_replace("\xE2\x80\xAF", "\xC2\xA0", NumberFormatter::getInstance()->format($value));
+}

plugins/ImageGraph/StaticGraph/GridGraph.php

@@ -22,18 +22,18 @@ abstract class GridGraph extends StaticGraph
 
     const DEFAULT_TICK_ALPHA = 20;
     const DEFAULT_SERIE_WEIGHT = 0.5;
-    const LEFT_GRID_MARGIN = 4;
+    const LEFT_GRID_MARGIN = 20;
     const BOTTOM_GRID_MARGIN = 10;
-    const TOP_GRID_MARGIN_HORIZONTAL_GRAPH = 1;
-    const RIGHT_GRID_MARGIN_HORIZONTAL_GRAPH = 4;
+    const TOP_GRID_MARGIN_HORIZONTAL_GRAPH = 10;
+    const RIGHT_GRID_MARGIN_HORIZONTAL_GRAPH = 20;
     const OUTER_TICK_WIDTH = 5;
     const INNER_TICK_WIDTH = 0;
     const LABEL_SPACE_VERTICAL_GRAPH = 7;
 
     const HORIZONTAL_LEGEND_TOP_MARGIN = 5;
     const HORIZONTAL_LEGEND_LEFT_MARGIN = 10;
     const HORIZONTAL_LEGEND_BOTTOM_MARGIN = 10;
-    const VERTICAL_LEGEND_TOP_MARGIN = 8;
+    const VERTICAL_LEGEND_TOP_MARGIN = 10;
     const VERTICAL_LEGEND_LEFT_MARGIN = 6;
     const VERTICAL_LEGEND_MAX_WIDTH_PCT = 0.70;
     const LEGEND_LINE_BULLET_WIDTH = 14;
@@ -358,7 +358,7 @@ protected function getGridTopMargin($horizontalGraph, $verticalLegend)
         if ($horizontalGraph) {
             $topMargin = $ordinateMaxHeight + self::TOP_GRID_MARGIN_HORIZONTAL_GRAPH + self::OUTER_TICK_WIDTH;
         } else {
-            $topMargin = $ordinateMaxHeight / 2;
+            $topMargin = $ordinateMaxHeight / 2 + self::TOP_GRID_MARGIN_HORIZONTAL_GRAPH;
         }
 
         if ($this->showLegend && !$verticalLegend) {
@@ -398,7 +398,7 @@ protected function getGridRightMargin($horizontalGraph)
             list($ordinateMaxWidth, $ordinateMaxHeight) = $this->getMaximumTextWidthHeight($this->ordinateSeries);
             return self::RIGHT_GRID_MARGIN_HORIZONTAL_GRAPH + $ordinateMaxWidth;
         } else {
-            return 0;
+            return self::RIGHT_GRID_MARGIN_HORIZONTAL_GRAPH;
         }
     }
 

plugins/ImageGraph/tests/UI/ImageGraph_spec.js

@@ -10,6 +10,11 @@
 describe("ImageGraph", function () {
     this.timeout(0);
 
+    before(function () {
+        testEnvironment.multiplicateTableResults = 169856;
+        testEnvironment.save();
+    });
+
     function getImageGraphUrl(apiModule, apiAction, graphType, period, date) {
         return "index.php?module=API&method=ImageGraph.get&idSite=1&width=500&height=250&apiModule=" + apiModule + "&apiAction=" + apiAction
              + "&graphType=" + graphType + "&period=" + period + "&date=" + date;
@@ -38,4 +43,4 @@ describe("ImageGraph", function () {
 
         expect(await page.screenshot({ fullPage: true })).to.matchImage('pie');
     });
-});
+});

tests/PHPUnit/Framework/TestingEnvironmentManipulator.php

@@ -13,6 +13,8 @@
 use Piwik\Application\Kernel\GlobalSettingsProvider;
 use Piwik\Application\Kernel\PluginList;
 use Piwik\Config;
+use Piwik\DataTable;
+use Piwik\DataTable\DataTableInterface;
 use Piwik\DbHelper;
 use Piwik\Option;
 use Piwik\Plugin;
@@ -203,6 +205,28 @@ public function getExtraDefinitions()
             }),
         );
 
+        if (!empty($this->vars->multiplicateTableResults)) {
+            $diConfigs[] = [
+                'observers.global' => \Piwik\DI::add([
+                    ['API.Request.dispatch.end', \Piwik\DI::value(function($returnedValue) {
+                        if ($returnedValue instanceof DataTableInterface) {
+                            $returnedValue->filter(function(DataTable $dataTable) {
+                                foreach ($dataTable->getRows() as $row) {
+                                    $columns = $row->getColumns();
+                                    foreach($columns as $name => &$value) {
+                                        if ($name !== 'label' && is_numeric($value)) {
+                                            $value *= $this->vars->multiplicateTableResults;
+                                        }
+                                    }
+                                    $row->setColumns($columns);
+                                }
+                            });
+                        }
+                    })
+                ]])
+            ];
+        }
+
         return $diConfigs;
     }