New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow adding featurepoints #2

Closed
Findus23 opened this Issue Sep 20, 2017 · 5 comments

Comments

Projects
None yet
3 participants
@Findus23
Contributor

Findus23 commented Sep 20, 2017

Hi, many thanks for your great library.

I am currently trying to replace the old, original sparkline library with your version in Piwik (matomo-org/matomo#12066)
Unfortunately there is one feature we used in the old library that is missing in your library and would be nice to have:
The ability to set featurepoints.
https://github.com/piwik/piwik/blob/9243b9a7b6fae8237596f76cda1fe8b6816463af/core/Visualization/Sparkline.php#L138-L140

Those are simply single colored dots that can be added e.g. to indicate the minimum or maximum.

Maybe you could imprement a simple interface that allows adding points by x and y value, color and diameter?

Thanks again for providing a modern library.

@onenaka

This comment has been minimized.

Show comment
Hide comment
@onenaka

onenaka Sep 21, 2017

onenaka commented Sep 21, 2017

@Findus23

This comment has been minimized.

Show comment
Hide comment
@Findus23

Findus23 Sep 22, 2017

Contributor

Another idea:
As it is hard to know the right coodinates, I'd propose a setting to add Minimum and Maximum dots.

diff --git a/src/Sparkline.php b/src/Sparkline.php
index c189783..0aaba20 100644
--- a/src/Sparkline.php
+++ b/src/Sparkline.php
@@ -44,6 +44,16 @@ class Sparkline
      */
     protected $fillColor = array(230, 242, 250);
 
+    /**
+     * @var array (rgb)
+     */
+    protected $minimumColor;
+
+    /**
+     * @var array (rgb)
+     */
+    protected $maximumColor;
+
     /**
      * @var float (px)
      * Default: 1.75px
@@ -254,6 +264,41 @@ class Sparkline
         $this->fillColor = array($red, $green, $blue);
     }
 
+    /**
+     * @param string $color (hexadecimal)
+     */
+    public function setMinimumColorHex($color) {
+        list($red, $green, $blue) = $this->colorHexToRGB($color);
+        $this->setMinimumColorRGB($red, $green, $blue);
+    }
+
+    /**
+     * @param int $red
+     * @param int $green
+     * @param int $blue
+     */
+    public function setMinimumColorRGB($red, $green, $blue) {
+        $this->minimumColor = array($red, $green, $blue);
+    }
+
+    /**
+     * @param string $color (hexadecimal)
+     */
+    public function setMaximumColorHex($color) {
+        list($red, $green, $blue) = $this->colorHexToRGB($color);
+        $this->setMaximumColorRGB($red, $green, $blue);
+    }
+
+    /**
+     * @param int $red
+     * @param int $green
+     * @param int $blue
+     */
+    public function setMaximumColorRGB($red, $green, $blue) {
+        $this->maximumColor = array($red, $green, $blue);
+    }
+
+
     /**
      * @param array $data
      */
@@ -291,6 +336,11 @@ class Sparkline
         $count = count($this->data);
         $step = $width / ($count - 1);
         $max = max($this->data);
+        $maxs = array_keys($this->data, $max);
+        $maxIndex = end($maxs);
+        $min = min($this->data);
+        $mins = array_keys($this->data, $min);
+        $minIndex = end($mins);
         if ($this->base) {
             $max = $this->base;
         }
@@ -357,6 +407,14 @@ class Sparkline
             list($pictureX1, $pictureY1, $pictureX2, $pictureY2) = $coordinates;
             imageline($picture, $pictureX1, $pictureY1, $pictureX2, $pictureY2, $lineColor);
         }
+        if (isset($this->minimumColor)) {
+            $minimumColor = imagecolorallocate($picture, $this->minimumColor[0], $this->minimumColor[1], $this->minimumColor[2]);
+            imagefilledellipse($picture, $minIndex * $step, $height - $this->data[$minIndex], 5 * $this->ratioComputing, 5 * $this->ratioComputing, $minimumColor);
+        }
+        if (isset($this->maximumColor)) {
+            $maximumColor = imagecolorallocate($picture, $this->maximumColor[0], $this->maximumColor[1], $this->maximumColor[2]);
+            imagefilledellipse($picture, $maxIndex * $step, $height - $this->data[$maxIndex], 5 * $this->ratioComputing, 5 * $this->ratioComputing, $maximumColor);
+        }
         $sparkline = imagecreatetruecolor($this->width, $this->height);
         imagealphablending($sparkline, false);
         imagecopyresampled($sparkline, $picture, 0, 0, 0, 0, $this->width, $this->height, $width, $height);
Contributor

Findus23 commented Sep 22, 2017

Another idea:
As it is hard to know the right coodinates, I'd propose a setting to add Minimum and Maximum dots.

diff --git a/src/Sparkline.php b/src/Sparkline.php
index c189783..0aaba20 100644
--- a/src/Sparkline.php
+++ b/src/Sparkline.php
@@ -44,6 +44,16 @@ class Sparkline
      */
     protected $fillColor = array(230, 242, 250);
 
+    /**
+     * @var array (rgb)
+     */
+    protected $minimumColor;
+
+    /**
+     * @var array (rgb)
+     */
+    protected $maximumColor;
+
     /**
      * @var float (px)
      * Default: 1.75px
@@ -254,6 +264,41 @@ class Sparkline
         $this->fillColor = array($red, $green, $blue);
     }
 
+    /**
+     * @param string $color (hexadecimal)
+     */
+    public function setMinimumColorHex($color) {
+        list($red, $green, $blue) = $this->colorHexToRGB($color);
+        $this->setMinimumColorRGB($red, $green, $blue);
+    }
+
+    /**
+     * @param int $red
+     * @param int $green
+     * @param int $blue
+     */
+    public function setMinimumColorRGB($red, $green, $blue) {
+        $this->minimumColor = array($red, $green, $blue);
+    }
+
+    /**
+     * @param string $color (hexadecimal)
+     */
+    public function setMaximumColorHex($color) {
+        list($red, $green, $blue) = $this->colorHexToRGB($color);
+        $this->setMaximumColorRGB($red, $green, $blue);
+    }
+
+    /**
+     * @param int $red
+     * @param int $green
+     * @param int $blue
+     */
+    public function setMaximumColorRGB($red, $green, $blue) {
+        $this->maximumColor = array($red, $green, $blue);
+    }
+
+
     /**
      * @param array $data
      */
@@ -291,6 +336,11 @@ class Sparkline
         $count = count($this->data);
         $step = $width / ($count - 1);
         $max = max($this->data);
+        $maxs = array_keys($this->data, $max);
+        $maxIndex = end($maxs);
+        $min = min($this->data);
+        $mins = array_keys($this->data, $min);
+        $minIndex = end($mins);
         if ($this->base) {
             $max = $this->base;
         }
@@ -357,6 +407,14 @@ class Sparkline
             list($pictureX1, $pictureY1, $pictureX2, $pictureY2) = $coordinates;
             imageline($picture, $pictureX1, $pictureY1, $pictureX2, $pictureY2, $lineColor);
         }
+        if (isset($this->minimumColor)) {
+            $minimumColor = imagecolorallocate($picture, $this->minimumColor[0], $this->minimumColor[1], $this->minimumColor[2]);
+            imagefilledellipse($picture, $minIndex * $step, $height - $this->data[$minIndex], 5 * $this->ratioComputing, 5 * $this->ratioComputing, $minimumColor);
+        }
+        if (isset($this->maximumColor)) {
+            $maximumColor = imagecolorallocate($picture, $this->maximumColor[0], $this->maximumColor[1], $this->maximumColor[2]);
+            imagefilledellipse($picture, $maxIndex * $step, $height - $this->data[$maxIndex], 5 * $this->ratioComputing, 5 * $this->ratioComputing, $maximumColor);
+        }
         $sparkline = imagecreatetruecolor($this->width, $this->height);
         imagealphablending($sparkline, false);
         imagecopyresampled($sparkline, $picture, 0, 0, 0, 0, $this->width, $this->height, $width, $height);
@davaxi

This comment has been minimized.

Show comment
Hide comment
@davaxi

davaxi Nov 16, 2017

Owner

Pull request merged. Thans @Findus23 👍

Owner

davaxi commented Nov 16, 2017

Pull request merged. Thans @Findus23 👍

@davaxi davaxi reopened this Dec 5, 2017

@davaxi

This comment has been minimized.

Show comment
Hide comment
@davaxi

davaxi Dec 5, 2017

Owner

With refactoring i work this week to add method to add dots on chart by index

Owner

davaxi commented Dec 5, 2017

With refactoring i work this week to add method to add dots on chart by index

@davaxi davaxi self-assigned this Dec 7, 2017

davaxi added a commit that referenced this issue Dec 7, 2017

@davaxi

This comment has been minimized.

Show comment
Hide comment
@davaxi

davaxi Dec 7, 2017

Owner

Method 'addPoint' add on release 1.1.0

Owner

davaxi commented Dec 7, 2017

Method 'addPoint' add on release 1.1.0

@davaxi davaxi closed this Dec 7, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment