From b5c47f16e6d4a390d32ac1e1ab5124dfe29fe6b0 Mon Sep 17 00:00:00 2001
From: atm-john <john.botella@atm-consulting.fr>
Date: Wed, 24 Oct 2018 23:25:40 +0200
Subject: [PATCH 1/2] Fix hover stability and modernize style

---
 htdocs/core/class/dolgraph.class.php | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/htdocs/core/class/dolgraph.class.php b/htdocs/core/class/dolgraph.class.php
index ad7b900b033..a331202f424 100644
--- a/htdocs/core/class/dolgraph.class.php
+++ b/htdocs/core/class/dolgraph.class.php
@@ -1032,11 +1032,13 @@ class DolGraph
 				$(\'<div id="tooltip_'.$tag.'">\' + contents + \'</div>\').css({
 					position: \'absolute\',
 					display: \'none\',
-					top: y + 5,
-					left: x + 5,
-					border: \'1px solid #ddd\',
-					padding: \'2px\',
-					\'background-color\': \'#ffe\',
+					top: y + 10,
+					left: x + 15,
+					border: \'1px solid #000\',
+					padding: \'5px\',
+					\'background-color\': \'#000\',
+					\'color\': \'#fff\',
+					\'font-weight\': \'bold\',
 					width: 200,
 					opacity: 0.80
 				}).appendTo("body").fadeIn(20);
@@ -1080,7 +1082,7 @@ class DolGraph
 				if ($i > $firstlot) $this->stringtoshow.=', '."\n";
 				$color=sprintf("%02x%02x%02x",$this->datacolor[$i][0],$this->datacolor[$i][1],$this->datacolor[$i][2]);
 				$this->stringtoshow.='{ ';
-				if (! isset($this->type[$i]) || $this->type[$i] == 'bars') $this->stringtoshow.='bars: { show: true, align: "'.($i==$firstlot?'center':'left').'", barWidth: 0.5 }, ';
+				if (! isset($this->type[$i]) || $this->type[$i] == 'bars') $this->stringtoshow.='bars: { lineWidth: 1, show: true, align: "'.($i==$firstlot?'center':'left').'", barWidth: 0.5 }, ';
 				if (isset($this->type[$i]) && $this->type[$i] == 'lines')  $this->stringtoshow.='lines: { show: true, fill: false }, ';
 				$this->stringtoshow.='color: "#'.$color.'", label: "'.(isset($this->Legend[$i]) ? dol_escape_js($this->Legend[$i]) : '').'", data: d'.$i.' }';
 				$i++;
@@ -1104,7 +1106,7 @@ class DolGraph
 			// Background color
 			$color1=sprintf("%02x%02x%02x",$this->bgcolorgrid[0],$this->bgcolorgrid[0],$this->bgcolorgrid[2]);
 			$color2=sprintf("%02x%02x%02x",$this->bgcolorgrid[0],$this->bgcolorgrid[1],$this->bgcolorgrid[2]);
-			$this->stringtoshow.=', grid: { hoverable: true, backgroundColor: { colors: ["#'.$color1.'", "#'.$color2.'"] } }'."\n";
+			$this->stringtoshow.=', grid: { hoverable: true, backgroundColor: { colors: ["#'.$color1.'", "#'.$color2.'"] }, borderWidth: 1, borderColor: \'#d0d0d0\', tickColor  : \'#f3f3f3\' }'."\n";
 			//$this->stringtoshow.=', shadowSize: 20'."\n";    TODO Uncommet this
 			$this->stringtoshow.='});'."\n";
 			$this->stringtoshow.='}'."\n";

From d0dc8b2a9c5eec0cafee6c778acbbe28a64a6261 Mon Sep 17 00:00:00 2001
From: atm-john <john.botella@atm-consulting.fr>
Date: Thu, 25 Oct 2018 00:24:25 +0200
Subject: [PATCH 2/2] Add points to lines charts and remove shadow to improve
 performances

---
 htdocs/core/class/dolgraph.class.php | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/htdocs/core/class/dolgraph.class.php b/htdocs/core/class/dolgraph.class.php
index a331202f424..e95cc08a0a5 100644
--- a/htdocs/core/class/dolgraph.class.php
+++ b/htdocs/core/class/dolgraph.class.php
@@ -1027,9 +1027,10 @@ class DolGraph
 		else
 		{
 			// Add code to support tooltips
+		    // TODO: remove js css and use graph-tooltip-inner class instead by adding css in each themes
 			$this->stringtoshow.='
 			function showTooltip_'.$tag.'(x, y, contents) {
-				$(\'<div id="tooltip_'.$tag.'">\' + contents + \'</div>\').css({
+				$(\'<div class="graph-tooltip-inner" id="tooltip_'.$tag.'">\' + contents + \'</div>\').css({
 					position: \'absolute\',
 					display: \'none\',
 					top: y + 10,
@@ -1041,7 +1042,7 @@ class DolGraph
 					\'font-weight\': \'bold\',
 					width: 200,
 					opacity: 0.80
-				}).appendTo("body").fadeIn(20);
+				}).appendTo("body").fadeIn(100);
 			}
 
 			var previousPoint = null;
@@ -1083,11 +1084,12 @@ class DolGraph
 				$color=sprintf("%02x%02x%02x",$this->datacolor[$i][0],$this->datacolor[$i][1],$this->datacolor[$i][2]);
 				$this->stringtoshow.='{ ';
 				if (! isset($this->type[$i]) || $this->type[$i] == 'bars') $this->stringtoshow.='bars: { lineWidth: 1, show: true, align: "'.($i==$firstlot?'center':'left').'", barWidth: 0.5 }, ';
-				if (isset($this->type[$i]) && $this->type[$i] == 'lines')  $this->stringtoshow.='lines: { show: true, fill: false }, ';
+				if (isset($this->type[$i]) && $this->type[$i] == 'lines') $this->stringtoshow.='lines: { show: true, fill: false }, points: { show: true }, ';
 				$this->stringtoshow.='color: "#'.$color.'", label: "'.(isset($this->Legend[$i]) ? dol_escape_js($this->Legend[$i]) : '').'", data: d'.$i.' }';
 				$i++;
 			}
-			$this->stringtoshow.="\n".' ], { series: { stack: stack, lines: { fill: false, steps: steps }, bars: { barWidth: 0.6 } }'."\n";
+			// shadowSize: 0 -> Drawing is faster without shadows
+			$this->stringtoshow.="\n".' ], { series: { shadowSize: 0, stack: stack, lines: { fill: false, steps: steps }, bars: { barWidth: 0.6 } }'."\n";
 
 			// Xaxis
 			$this->stringtoshow.=', xaxis: { ticks: ['."\n";
@@ -1106,7 +1108,7 @@ class DolGraph
 			// Background color
 			$color1=sprintf("%02x%02x%02x",$this->bgcolorgrid[0],$this->bgcolorgrid[0],$this->bgcolorgrid[2]);
 			$color2=sprintf("%02x%02x%02x",$this->bgcolorgrid[0],$this->bgcolorgrid[1],$this->bgcolorgrid[2]);
-			$this->stringtoshow.=', grid: { hoverable: true, backgroundColor: { colors: ["#'.$color1.'", "#'.$color2.'"] }, borderWidth: 1, borderColor: \'#d0d0d0\', tickColor  : \'#f3f3f3\' }'."\n";
+			$this->stringtoshow.=', grid: { hoverable: true, backgroundColor: { colors: ["#'.$color1.'", "#'.$color2.'"] }, borderWidth: 1, borderColor: \'#f3f3f3\', tickColor  : \'#f3f3f3\' }'."\n";
 			//$this->stringtoshow.=', shadowSize: 20'."\n";    TODO Uncommet this
 			$this->stringtoshow.='});'."\n";
 			$this->stringtoshow.='}'."\n";