replace sparkline library with modern equivalent (matomo-org#12066)

* replace sparkline library with modern equivalent * test setting $enableSparklineImages to true for UI tests * update LEGALNOTICE * add minimum and maximum dots * further improve sparklines - no minimum/maximum if they are the same - add offset to the top so that maximum isn't stuck at the border - doubled resolution of image as it was a bit blurry and it's still <1.5KB * fix display size of sparklines * make Sparklines red * fix sparkline size in rowEvoluton * change line colors to black * lastPoint and padding * update Sparkline to new version * remove possibility to disable sparklines ($enableSparklineImages) * handle formatted numbers * Updates UI files
InfinityVoid · Oct 11, 2018 · 543a39b · 543a39b
1 parent 1d0df6c
commit 543a39b
Show file tree

Hide file tree

Showing 46 changed files with 222 additions and 1,767 deletions.
diff --git a/LEGALNOTICE b/LEGALNOTICE
@@ -126,9 +126,9 @@ THIRD-PARTY COMPONENTS AND LIBRARIES
 	Link: https://github.com/tedivm/jshrink
 	License: BSD-3-Clause
 
-	Name:  sparkline
-	Link:  https//sourceforge.net/projects/sparkline/
-	License:  Dual-licensed: New BSD or GPL v2
+	Name:  Sparkline
+	Link:  https://github.com/jamiebicknell/Sparkline
+	License:  MIT
 
 	Name:  sprintf
 	Link:  http://www.diveintojavascript.com/projects/javascript-sprintf

diff --git a/composer.json b/composer.json
@@ -47,7 +47,8 @@
         "piwik/piwik-php-tracker": "^1.0",
         "composer/semver": "~1.3.0",
         "szymach/c-pchart": "^2.0",
-        "geoip2/geoip2": "^2.8"
+        "geoip2/geoip2": "^2.8",
+        "davaxi/sparkline": "^1.1"
     },
     "require-dev": {
         "aws/aws-sdk-php": "2.7.1",

diff --git a/composer.lock b/composer.lock
diff --git a/core/Visualization/Sparkline.php b/core/Visualization/Sparkline.php
@@ -12,168 +12,156 @@
 use Piwik\Common;
 use Piwik\Piwik;
 use Piwik\View\ViewInterface;
-use Sparkline_Line;
-
-/**
- * @see libs/sparkline/lib/Sparkline_Line.php
- * @link http://sparkline.org
- */
-require_once PIWIK_INCLUDE_PATH . '/libs/sparkline/lib/Sparkline_Line.php';
 
 /**
  * Renders a sparkline image given a PHP data array.
  * Using the Sparkline PHP Graphing Library sparkline.org
  */
 class Sparkline implements ViewInterface
 {
-    const DEFAULT_WIDTH = 100;
-    const DEFAULT_HEIGHT = 25;
+    const DEFAULT_WIDTH = 200;
+    const DEFAULT_HEIGHT = 50;
 
-    public static $enableSparklineImages = true;
-
-    private static $colorNames = array('backgroundColor', 'lineColor', 'minPointColor', 'lastPointColor', 'maxPointColor');
-    private $values = array();
 
     /**
      * Width of the sparkline
      * @var int
      */
     protected $_width = self::DEFAULT_WIDTH;
-
     /**
      * Height of sparkline
      * @var int
      */
     protected $_height = self::DEFAULT_HEIGHT;
+    private $values = array();
+    /**
+     * @var \Davaxi\Sparkline
+     */
+    private $sparkline;
 
     /**
      * Array with format: array( x, y, z, ... )
      * @param array $data
      */
-    public function setValues($data)
-    {
+    public function setValues($data) {
         $this->values = $data;
     }
 
-    /**
-     * Sets the height of the sparkline
-     * @param int $height
-     */
-    public function setHeight($height)
-    {
-        if (!is_numeric($height) || $height <= 0) {
-            return;
+    public function main() {
+
+        $sparkline = new \Davaxi\Sparkline();
+
+        $seconds = Piwik::translate('Intl_NSecondsShort');
+        $percent = Piwik::translate('Intl_NumberSymbolPercent');
+        $thousandSeparator = Piwik::translate('Intl_NumberSymbolGroup');
+        $decimalSeparator = Piwik::translate('Intl_NumberSymbolGroup');
+        $toRemove = array('%', $percent, str_replace('%s', '', $seconds));
+        $values = [];
+        foreach ($this->values as $value) {
+            // 50% and 50s should be plotted as 50
+            $value = str_replace($toRemove, '', $value);
+            // replace localized decimal separator
+            $value = str_replace($thousandSeparator, '', $value);
+            $value = str_replace($decimalSeparator, '.', $value);
+            if ($value == '') {
+                $value = 0;
+            }
+            $values[] = $value;
         }
+        $sparkline->setData($values);
 
-        $this->_height = (int)$height;
+        $sparkline->setWidth($this->getWidth());
+        $sparkline->setHeight($this->getHeight());
+        $this->setSparklineColors($sparkline);
+        $sparkline->setLineThickness(3);
+        $sparkline->setPadding('5');
+
+        $this->sparkline = $sparkline;
+    }
+
+    /**
+     * Returns the width of the sparkline
+     * @return int
+     */
+    public function getWidth() {
+        return $this->_width;
     }
 
     /**
      * Sets the width of the sparkline
      * @param int $width
      */
-    public function setWidth($width)
-    {
+    public function setWidth($width) {
         if (!is_numeric($width) || $width <= 0) {
             return;
         }
 
         $this->_width = (int)$width;
     }
 
-    /**
-     * Returns the width of the sparkline
-     * @return int
-     */
-    public function getWidth()
-    {
-        return $this->_width;
-    }
-
     /**
      * Returns the height of the sparkline
      * @return int
      */
-    public function getHeight()
-    {
+    public function getHeight() {
         return $this->_height;
     }
 
-    public function main()
-    {
-        $width = $this->getWidth();
-        $height = $this->getHeight();
-
-        $sparkline = new Sparkline_Line();
-        $this->setSparklineColors($sparkline);
-
-        $min = $max = $last = null;
-        $i = 0;
-        $seconds  = Piwik::translate('Intl_NSecondsShort');
-        $toRemove = array('%', str_replace('%s', '', $seconds));
-
-        foreach ($this->values as $value) {
-            // 50% and 50s should be plotted as 50
-            $value = str_replace($toRemove, '', $value);
-            // replace localized decimal separator
-            $value = str_replace(',', '.', $value);
-            if ($value == '') {
-                $value = 0;
-            }
-
-            $sparkline->SetData($i, $value);
-
-            if (null == $min || $value <= $min[1]) {
-                $min = array($i, $value);
-            }
-            if (null == $max || $value >= $max[1]) {
-                $max = array($i, $value);
-            }
-            $last = array($i, $value);
-            $i++;
+    /**
+     * Sets the height of the sparkline
+     * @param int $height
+     */
+    public function setHeight($height) {
+        if (!is_numeric($height) || $height <= 0) {
+            return;
         }
-        $sparkline->SetYMin(0);
-        $sparkline->SetYMax($max[1]);
-        $sparkline->SetPadding(3, 0, 2, 0); // top, right, bottom, left
-        $sparkline->SetFeaturePoint($min[0], $min[1], 'minPointColor', 5);
-        $sparkline->SetFeaturePoint($max[0], $max[1], 'maxPointColor', 5);
-        $sparkline->SetFeaturePoint($last[0], $last[1], 'lastPointColor', 5);
-        $sparkline->SetLineSize(3); // for renderresampled, linesize is on virtual image
-        $ratio = 1;
-        $sparkline->RenderResampled($width * $ratio, $height * $ratio);
-        $this->sparkline = $sparkline;
-    }
 
-    public function render()
-    {
-        if (self::$enableSparklineImages) {
-            $this->sparkline->Output();
-        }
+        $this->_height = (int)$height;
     }
 
     /**
      * Sets the sparkline colors
      *
-     * @param Sparkline_Line $sparkline
+     * @param \Davaxi\Sparkline $sparkline
      */
-    private function setSparklineColors($sparkline)
-    {
+    private function setSparklineColors($sparkline) {
         $colors = Common::getRequestVar('colors', false, 'json');
 
         if (empty($colors)) { // quick fix so row evolution sparklines will have color in widgetize's iframes
             $colors = array(
                 'backgroundColor' => '#ffffff',
-                'lineColor'       => '#162C4A',
-                'minPointColor'   => '#ff7f7f',
-                'lastPointColor'  => '#55AAFF',
-                'maxPointColor'   => '#75BF7C'
+                'lineColor' => '#162C4A',
+                'minPointColor' => '#ff7f7f',
+                'maxPointColor' => '#75BF7C',
+                'lastPointColor' => '#55AAFF',
+                'fillColor' => '#fce8e7'
             );
         }
 
-        foreach (self::$colorNames as $name) {
-            if (!empty($colors[$name])) {
-                $sparkline->SetColorHtml($name, $colors[$name]);
-            }
+        if (strtolower($colors['backgroundColor']) !== '#ffffff') {
+            $sparkline->setBackgroundColorHex($colors['backgroundColor']);
+        } else {
+            $sparkline->deactivateBackgroundColor();
+        }
+        $sparkline->setLineColorHex($colors['lineColor']);
+        if (strtolower($colors['fillColor'] !== "#ffffff")) {
+            $sparkline->setFillColorHex($colors['fillColor']);
+        } else {
+            $sparkline->deactivateFillColor();
+        }
+        if (strtolower($colors['minPointColor'] !== "#ffffff")) {
+            $sparkline->addPoint("minimum", 5, $colors['minPointColor']);
         }
+        if (strtolower($colors['maxPointColor'] !== "#ffffff")) {
+            $sparkline->addPoint("maximum", 5, $colors['maxPointColor']);
+        }
+        if (strtolower($colors['lastPointColor'] !== "#ffffff")) {
+            $sparkline->addPoint("last", 5, $colors['lastPointColor']);
+        }
+    }
+
+    public function render() {
+        $this->sparkline->display();
+        $this->sparkline->destroy();
     }
 }
diff --git a/libs/sparkline/CHANGES b/libs/sparkline/CHANGES