DealsSales renderGraphByMonth after change data; fix graphs width; remove old graphs

SE/se-lib/Route/DealsSales.php

@@ -499,7 +499,7 @@ class Route_DealsSales extends RouteBase {
 	.cell_marka_default	{ background-color: #f5f5f5; }
 </style>
 
-	<div class="container-fluid">
+<div class="container-fluid">
 
 	<p></p>
 
@@ -621,11 +621,11 @@ class Route_DealsSales extends RouteBase {
 			_uiNode$Table.appendTo(_uiNodeCont);
 
 			_uiNode$GraphByYear = $('<div style="width:100%; margin:10px 0; border:1px solid gray; overflow:auto"></div>');
-			$('<canvas id="wykres03" width="1760" height="300" style="">[No canvas support]</canvas>').appendTo(_uiNode$GraphByYear);
+			$('<canvas id="wykres03" width="1760" height="300">[No canvas support]</canvas>').appendTo(_uiNode$GraphByYear);
 			_uiNode$GraphByYear.appendTo(_uiNodeCont);
 
 			_uiNode$GraphByMonth = $('<div style="width:100%; margin:10px 0; border:1px solid gray; overflow:auto"></div>');
-			$('<canvas id="wykres04" width="1760" height="300" style="">[No canvas support]</canvas>').appendTo(_uiNode$GraphByMonth);
+			$('<canvas id="wykres04" width="1760" height="300">[No canvas support]</canvas>').appendTo(_uiNode$GraphByMonth);
 			_uiNode$GraphByMonth.appendTo(_uiNodeCont);
 
 			priv.renderHeaderMarki();
@@ -640,11 +640,22 @@ class Route_DealsSales extends RouteBase {
 					jsonLabels = [],
 					jsonTooltips = [],
 					jsonColors = ['Gradient(#fe783e:#EC561B:#F59F7D)', 'Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#CC76F7:#8832B3:#CE9FE5)', 'Gradient(#768CF7:#3247B3:#9FABE5)', 'Gradient(#F77681:#B3323C:#E59FA5)'],
+					jsonColorsAll = [],
 					wykresWidth = 940,
-					wykresMinItemWidth = 20
+					wykresMinItemWidth = 15,
+					graphGutterLeft = 60,
+					graphGutterRight = 25,
+					itemsInLabelCount = 0,
+					currentNode = _uiNode$GraphByYear.children('canvas'),
+					node = $('<canvas id="wykres03" width="1760" height="300">[No canvas support]</canvas>')
 			;
+			{// replace node
+				currentNode.replaceWith(node);
+			}
 			$.each(_state.obroty, function(kYear, vSalesByMonth) {
-				var jsonYearData = {};
+				var jsonYearData = {},
+						yearDataValues = []
+				;
 				jsonLabels.push(parseInt(kYear));
 				$.each(_state.months, function(monthIdx, vMonth) {
 					if (undefined === vSalesByMonth[vMonth]) {
@@ -657,26 +668,26 @@ class Route_DealsSales extends RouteBase {
 					jsonTooltips.push('Obrót ' + numeral(vValue).format('0,0[.]00') + ' w ' + kLabel);
 				});
 
-				var yearDataValues = Object.keys(jsonYearData).map(function (key) {
+				yearDataValues = Object.keys(jsonYearData).map(function (key) {
 					return jsonYearData[key];
 				});
 				jsonData.push(yearDataValues);
+				itemsInLabelCount = Math.max(itemsInLabelCount, yearDataValues.length);
 			});
-			var jsonColorsAll = [];
-			for (var i = 0, mi = 0, mc = jsonColors.length; i < 12; i++) {
-				jsonColorsAll.push(jsonColors[mi]);
-				if (++mi >= mc) {
-					mi = 0;
+			{// colors
+				for (var i = 0, mi = 0, mc = jsonColors.length; i < 12; i++) {
+					jsonColorsAll.push(jsonColors[mi]);
+					if (++mi >= mc) {
+						mi = 0;
+					}
 				}
+				jsonColors = jsonColorsAll;
 			}
 			{// wykres width
-				wykresTestWidth = jsonLabels.length * 12 * wykresMinItemWidth;
-				if (wykresTestWidth > wykresWidth - 60 - 20) {
-					wykresWidth = wykresTestWidth + 60 + 20;
-				}
+				wykresTestWidth = jsonLabels.length * (20 * 2 + itemsInLabelCount * wykresMinItemWidth) + graphGutterLeft + graphGutterRight;
+				wykresWidth = Math.max(wykresWidth, wykresTestWidth);
 				jQuery('#wykres03').css({width: wykresWidth});
 			}
-			jsonColors = jsonColorsAll;
 			var bar = new RGraph.Bar('wykres03', jsonData)
 				.Set('labels', jsonLabels)
 				.Set('colors', jsonColors)
@@ -688,7 +699,8 @@ class Route_DealsSales extends RouteBase {
 				.Set('shadow.offsety', 0)
 				.Set('shadow.blur', 10)
 				.Set('gutter.bottom', 30)
-				.Set('gutter.left', 60)
+				.Set('gutter.left', graphGutterLeft)
+				.Set('gutter.right', graphGutterRight)
 				.Set('tooltips', RGraph.ISOLD ? null : jsonTooltips)
 				.Set('tooltips.event', 'mousemove')
 				.Set('labels.above', true)
@@ -697,7 +709,75 @@ class Route_DealsSales extends RouteBase {
 		};
 
 		priv.renderGraphByMonth = function(record) {
-			return;// TODO: wykres04
+			var jsonData = [],
+					jsonLabels = ['styczeń','luty','marzec','kwiecień','maj','czerwiec','lipiec','sierpień','wrzesień','październik','listopad','grudzień'],
+					jsonTooltips = [],
+					jsonColors = ['Gradient(#fe783e:#EC561B:#F59F7D)', 'Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#CC76F7:#8832B3:#CE9FE5)', 'Gradient(#768CF7:#3247B3:#9FABE5)', 'Gradient(#F77681:#B3323C:#E59FA5)'],
+					jsonColorsAll = [],
+					wykresWidth = 940,
+					wykresMinItemWidth = 15,
+					graphGutterLeft = 60,
+					graphGutterRight = 25,
+					itemsInLabelCount = 0,
+					currentNode = _uiNode$GraphByMonth.children('canvas'),
+					node = $('<canvas id="wykres04" width="1760" height="300">[No canvas support]</canvas>')
+			;
+			{// replace node
+				currentNode.replaceWith(node);
+			}
+			$.each(_state.months, function(monthIdx, vMonth) {
+				var jsonByMonthData = {},
+						byMonthDataValues = []
+				;
+				$.each(_state.obroty, function(kYear, vSalesByMonth) {
+					if (undefined === vSalesByMonth[vMonth]) {
+						jsonByMonthData['' + kYear + '-' + vMonth] = 0;
+					} else {
+						jsonByMonthData['' + kYear + '-' + vMonth] = vSalesByMonth[vMonth];
+					}
+				});
+				$.each(jsonByMonthData, function(kLabel, vValue) {
+					jsonTooltips.push('Obrót ' + numeral(vValue).format('0,0[.]00') + ' w ' + kLabel);
+				});
+
+				byMonthDataValues = Object.keys(jsonByMonthData).map(function (key) {
+					return jsonByMonthData[key];
+				});
+				jsonData.push(byMonthDataValues);
+				itemsInLabelCount = Math.max(itemsInLabelCount, byMonthDataValues.length);
+			});
+			{// colors
+				for (var i = 0, mi = 0, mc = jsonColors.length; i < 12; i++) {
+					jsonColorsAll.push(jsonColors[mi]);
+					if (++mi >= mc) {
+						mi = 0;
+					}
+				}
+				jsonColors = jsonColorsAll;
+			}
+			{// wykres width
+				wykresTestWidth = jsonLabels.length * (20 * 2 + itemsInLabelCount * wykresMinItemWidth) + graphGutterLeft + graphGutterRight;
+				wykresWidth = Math.max(wykresWidth, wykresTestWidth);
+				jQuery('#wykres04').css({width: wykresWidth});
+			}
+			var bar = new RGraph.Bar('wykres04', jsonData)
+				.Set('labels', jsonLabels)
+				.Set('colors', jsonColors)
+				.Set('strokestyle', 'white')
+				.Set('linewidth', 1)
+				.Set('shadow', true)
+				.Set('shadow.color', '#ccc')
+				.Set('shadow.offsetx', 0)
+				.Set('shadow.offsety', 0)
+				.Set('shadow.blur', 10)
+				.Set('gutter.bottom', 30)
+				.Set('gutter.left', graphGutterLeft)
+				.Set('gutter.right', graphGutterRight)
+				.Set('tooltips', RGraph.ISOLD ? null : jsonTooltips)
+				.Set('tooltips.event', 'mousemove')
+				.Set('labels.above', true)
+				.Set('hmargin', 20)
+				.Draw();
 		};
 
 		priv.renderHeaderMarki = function(record) {
@@ -1007,290 +1087,18 @@ class Route_DealsSales extends RouteBase {
 	});
 </script>
 
-		<script src="stuff/RGraph/libraries/RGraph.common.core.js?_v=20140626"></script>
-		<script src="stuff/RGraph/libraries/RGraph.common.dynamic.js?_v=20140626"></script>
-		<script src="stuff/RGraph/libraries/RGraph.common.key.js?_v=20140626"></script>
-		<script src="stuff/RGraph/libraries/RGraph.drawing.rect.js?_v=20140626"></script>
-		<script src="stuff/RGraph/libraries/RGraph.common.tooltips.js?_v=20140626"></script>
-		<script src="stuff/RGraph/libraries/RGraph.bar.js?_v=20140626"></script>
-		<script src="stuff/RGraph/libraries/RGraph.line.js?_v=20140626"></script>
-
-<!--
-
-<?php
-	$wykresWidth = 940;
-	$jsonLabels = array();
-	$jsonColors = array();
-	$jsonData = array();
-	$jsonTooltips = array();
-
-	$jsonColors = array('Gradient(#fe783e:#EC561B:#F59F7D)', 'Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#CC76F7:#8832B3:#CE9FE5)', 'Gradient(#768CF7:#3247B3:#9FABE5)', 'Gradient(#F77681:#B3323C:#E59FA5)');
-	$vSalesByYear = reset($obroty);// only first company
-	krsort($vSalesByYear);
-	foreach ($vSalesByYear as $kYearId => $vSalesByMonth) {
-		$jsonYearData = array();
-		foreach ($monthsOut as $vMonth) {
-			if (isset($vSalesByMonth[$vMonth])) {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = (float)str_replace('.', ',', $vSalesByMonth[$vMonth]);
-			} else {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = 0;
-			}
-		}
-		$jsonYearData = array_reverse($jsonYearData);
-		//$jsonData[] = array_values($jsonYearData);
-		foreach ($jsonYearData as $kLabel => $vValue) {
-			$jsonLabels[] = $kLabel;
-			$jsonData[]   = $vValue;
-			$jsonTooltips[] = "Obrót " . number_format($vValue, 2, ',', ' ') . " w {$kLabel}";
-		}
-	}
-
-	$wykresMinItemWidth = 30;
-	$wykresTestWidth = count(array_keys($vSalesByYear)) * 12 * $wykresMinItemWidth;
-	if ($wykresTestWidth > $wykresWidth - 60 - 20) {
-		$wykresWidth = $wykresTestWidth + 60 + 20;
-	}
-?>
-	<div style="width:100%; margin:10px 0; border:1px solid gray; overflow:auto">
-		<canvas id="wykres1" width="<?php echo $wykresWidth; ?>" height="300">[No canvas support]</canvas>
-	</div>
-		<script>
-jQuery(document).ready(function(){
-//			.Set('hmargin', 0)
-		var bar = new RGraph.Bar('wykres1', <?php echo json_encode($jsonData); ?>)
-			.Set('labels', <?php echo json_encode($jsonLabels); ?>)
-			.Set('colors', <?php echo json_encode($jsonColors); ?>)
-			.Set('strokestyle', 'white')
-			.Set('linewidth', 1)
-			.Set('shadow', true)
-			.Set('shadow.color', '#ccc')
-			.Set('shadow.offsetx', 0)
-			.Set('shadow.offsety', 0)
-			.Set('shadow.blur', 10)
-//			.Set('gutter.right', 20)
-			.Set('gutter.bottom', 60)
-			.Set('gutter.left', 60)
-			.Set('text.angle', 90)
-			.Set('tooltips', RGraph.ISOLD ? null : <?php echo json_encode($jsonTooltips); ?>)
-			.Set('tooltips.event', 'mousemove')
-			.Set('labels.above', true)
-			.Draw();
-});
-		</script>
-
-
-<?php
-	$wykresWidth = 940;
-	$jsonLabels = array();
-	$jsonColors = array();
-	$jsonData = array();
-	$jsonTooltips = array();
-
-	$jsonColors = array('Gradient(#fe783e:#EC561B:#F59F7D)', 'Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#CC76F7:#8832B3:#CE9FE5)', 'Gradient(#768CF7:#3247B3:#9FABE5)', 'Gradient(#F77681:#B3323C:#E59FA5)');
-	$vSalesByYear = reset($obroty);// only first company
-	krsort($vSalesByYear);
-	foreach ($monthsOut as $vMonth) {
-		$jsonYearData = array();
-		foreach ($vSalesByYear as $kYearId => $vSalesByMonth) {
-			if (isset($vSalesByMonth[$vMonth])) {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = (float)str_replace('.', ',', $vSalesByMonth[$vMonth]);
-			} else {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = 0;
-			}
-		}
-
-		//$jsonYearData = array_reverse($jsonYearData);
-		//$jsonData[] = array_values($jsonYearData);
-		foreach ($jsonYearData as $kLabel => $vValue) {
-			$jsonLabels[] = $kLabel;
-			$jsonData[]   = $vValue;
-			$jsonTooltips[] = "Obrót " . number_format($vValue, 2, ',', ' ') . " w {$kLabel}";
-		}
-	}
+<script src="stuff/RGraph/libraries/RGraph.common.core.js?_v=20140626"></script>
+<script src="stuff/RGraph/libraries/RGraph.common.dynamic.js?_v=20140626"></script>
+<script src="stuff/RGraph/libraries/RGraph.common.key.js?_v=20140626"></script>
+<script src="stuff/RGraph/libraries/RGraph.drawing.rect.js?_v=20140626"></script>
+<script src="stuff/RGraph/libraries/RGraph.common.tooltips.js?_v=20140626"></script>
+<script src="stuff/RGraph/libraries/RGraph.bar.js?_v=20140626"></script>
+<script src="stuff/RGraph/libraries/RGraph.line.js?_v=20140626"></script>
 
-	$wykresMinItemWidth = 30;
-	$wykresTestWidth = count(array_keys($vSalesByYear)) * 12 * $wykresMinItemWidth;
-	if ($wykresTestWidth > $wykresWidth - 60 - 20) {
-		$wykresWidth = $wykresTestWidth + 60 + 20;
-	}
-?>
-	<div style="width:100%; margin:10px 0; border:1px solid gray; overflow:auto">
-		<canvas id="wykres2" width="<?php echo $wykresWidth; ?>" height="300">[No canvas support]</canvas>
-	</div>
-		<script>
-jQuery(document).ready(function(){
-//			.Set('hmargin', 15)
-		var bar = new RGraph.Bar('wykres2', <?php echo json_encode($jsonData); ?>)
-			.Set('labels', <?php echo json_encode($jsonLabels); ?>)
-			.Set('colors', <?php echo json_encode($jsonColors); ?>)
-			.Set('strokestyle', 'white')
-			.Set('linewidth', 1)
-			.Set('shadow', true)
-			.Set('shadow.color', '#ccc')
-			.Set('shadow.offsetx', 0)
-			.Set('shadow.offsety', 0)
-			.Set('shadow.blur', 10)
-//			.Set('gutter.right', 20)
-			.Set('gutter.bottom', 60)
-			.Set('gutter.left', 60)
-			.Set('text.angle', 90)
-			.Set('tooltips', RGraph.ISOLD ? null : <?php echo json_encode($jsonTooltips); ?>)
-			.Set('tooltips.event', 'mousemove')
-			.Set('labels.above', true)
-			.Draw();
-});
-		</script>
--->
+<?php endif; ?>
 
+</div>
 <?php
-	$wykresWidth = 940;
-	$jsonLabels = array();
-	$jsonColors = array();
-	$jsonData = array();
-	$jsonTooltips = array();
-
-	$jsonColors = array('Gradient(#fe783e:#EC561B:#F59F7D)', 'Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#CC76F7:#8832B3:#CE9FE5)', 'Gradient(#768CF7:#3247B3:#9FABE5)', 'Gradient(#F77681:#B3323C:#E59FA5)');
-	$vSalesByYear = reset($obroty);// only first company
-	ksort($vSalesByYear);
-	foreach ($vSalesByYear as $kYearId => $vSalesByMonth) {
-		$jsonYearData = array();
-		foreach ($monthsOut as $vMonth) {
-			if (isset($vSalesByMonth[$vMonth])) {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = (float)str_replace('.', ',', $vSalesByMonth[$vMonth]);
-			} else {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = 0;
-			}
-		}
-		//$jsonYearData = array_reverse($jsonYearData);
-		//$jsonData[] = array_values($jsonYearData);
-		foreach ($jsonYearData as $kLabel => $vValue) {
-			$jsonLabels[] = $kLabel;
-		//	$jsonData[]   = $vValue;
-			$jsonTooltips[] = "Obrót " . number_format($vValue, 2, ',', ' ') . " w {$kLabel}";
-		}
-		$jsonData[] = array_values($jsonYearData);
-	}
-
-	$wykresMinItemWidth = 20;
-	$wykresTestWidth = count(array_keys($vSalesByYear)) * 12 * $wykresMinItemWidth;
-	if ($wykresTestWidth > $wykresWidth - 60 - 20) {
-		$wykresWidth = $wykresTestWidth + 60 + 20;
-	}
-	$jsonLabels = array_keys($vSalesByYear);
-	$jsonColorsAll = array();
-	for ($i = 0, $mi = 0, $mc = count($jsonColors); $i < 12; $i++) {
-		$jsonColorsAll[] = $jsonColors[$mi];
-		if (++$mi >= $mc) {
-			$mi = 0;
-		}
-	}
-	$jsonColors = $jsonColorsAll;
-?>
-	<div style="width:100%; margin:10px 0; border:1px solid gray; overflow:auto">
-		<canvas id="wykres3" width="<?php echo $wykresWidth; ?>" height="300">[No canvas support]</canvas>
-	</div>
-		<script>
-jQuery(document).ready(function(){
-//			.Set('hmargin', 0)
-		var bar = new RGraph.Bar('wykres3', <?php echo json_encode($jsonData); ?>)
-			.Set('labels', <?php echo json_encode($jsonLabels); ?>)
-			.Set('colors', <?php echo json_encode($jsonColors); ?>)
-			.Set('strokestyle', 'white')
-			.Set('linewidth', 1)
-			.Set('shadow', true)
-			.Set('shadow.color', '#ccc')
-			.Set('shadow.offsetx', 0)
-			.Set('shadow.offsety', 0)
-			.Set('shadow.blur', 10)
-//			.Set('gutter.right', 20)
-			.Set('gutter.bottom', 30)
-			.Set('gutter.left', 60)
-//			.Set('text.angle', 90)
-			.Set('tooltips', RGraph.ISOLD ? null : <?php echo json_encode($jsonTooltips); ?>)
-			.Set('tooltips.event', 'mousemove')
-			.Set('labels.above', true)
-			.Set('hmargin', 20)
-			.Draw();
-});
-		</script>
-
-
-<?php
-	$wykresWidth = 940;
-	$jsonLabels = array();
-	$jsonColors = array();
-	$jsonData = array();
-	$jsonTooltips = array();
-
-	$jsonColors = array('Gradient(#fe783e:#EC561B:#F59F7D)', 'Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#CC76F7:#8832B3:#CE9FE5)', 'Gradient(#768CF7:#3247B3:#9FABE5)', 'Gradient(#F77681:#B3323C:#E59FA5)');
-	$vSalesByYear = reset($obroty);// only first company
-	ksort($vSalesByYear);
-	foreach ($monthsOut as $vMonth) {
-		$jsonYearData = array();
-		foreach ($vSalesByYear as $kYearId => $vSalesByMonth) {
-			if (isset($vSalesByMonth[$vMonth])) {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = (float)str_replace('.', ',', $vSalesByMonth[$vMonth]);
-			} else {
-				$jsonYearData["{$kYearId}-{$vMonth}"] = 0;
-			}
-		}
-
-		//$jsonYearData = array_reverse($jsonYearData);
-		//$jsonData[] = array_values($jsonYearData);
-		foreach ($jsonYearData as $kLabel => $vValue) {
-			$jsonLabels[] = $kLabel;
-			$jsonTooltips[] = "Obrót " . number_format($vValue, 2, ',', ' ') . " w {$kLabel}";
-		}
-		$jsonData[] = array_values($jsonYearData);
-	}
-
-	$wykresMinItemWidth = 20;
-	$wykresTestWidth = count(array_keys($vSalesByYear)) * 12 * $wykresMinItemWidth;
-	if ($wykresTestWidth > $wykresWidth - 60 - 20) {
-		$wykresWidth = $wykresTestWidth + 60 + 20;
-	}
-	$jsonLabels = array('styczeń','luty','marzec','kwiecień','maj','czerwiec','lipiec','sierpień','wrzesień','październik','listopad','grudzień');
-	$jsonColorsAll = array();
-	for ($i = 0, $mi = 0, $mc = count($jsonColors); $i < count($jsonData); $i++) {
-		$jsonColorsAll[] = $jsonColors[$mi];
-		if (++$mi >= $mc) {
-			$mi = 0;
-		}
-	}
-	$jsonColors = $jsonColorsAll;
-?>
-	<div style="width:100%; margin:10px 0; border:1px solid gray; overflow:auto">
-		<canvas id="wykres4" width="<?php echo $wykresWidth; ?>" height="300">[No canvas support]</canvas>
-	</div>
-		<script>
-jQuery(document).ready(function(){
-//			.Set('hmargin', 15)
-		var bar = new RGraph.Bar('wykres4', <?php echo json_encode($jsonData); ?>)
-			.Set('labels', <?php echo json_encode($jsonLabels); ?>)
-			.Set('colors', <?php echo json_encode($jsonColors); ?>)
-			.Set('strokestyle', 'white')
-			.Set('linewidth', 1)
-			.Set('shadow', true)
-			.Set('shadow.color', '#ccc')
-			.Set('shadow.offsetx', 0)
-			.Set('shadow.offsety', 0)
-			.Set('shadow.blur', 10)
-//			.Set('gutter.right', 20)
-			.Set('gutter.bottom', 30)
-			.Set('gutter.left', 60)
-//			.Set('text.angle', 90)
-			.Set('tooltips', RGraph.ISOLD ? null : <?php echo json_encode($jsonTooltips); ?>)
-			.Set('tooltips.event', 'mousemove')
-			.Set('labels.above', true)
-			.Set('hmargin', 20)
-			.Draw();
-});
-		</script>
-
-	<?php endif; ?>
-
-	</div>
-	<?php
 	}
 
 }