DealsSales renderGraphByYear after change data

SE/se-lib/Route/DealsSales.php

@@ -490,7 +490,7 @@ class Route_DealsSales extends RouteBase {
 	$initData->years = array_keys($obrotyByYear);
 	//DBG::_(true, true, "initData", $initData, __CLASS__, __FUNCTION__, __LINE__);
 
-	?>
+?>
 <style type="text/css">
 	.cell_marka_primary	{ background-color: #d9edf7; }
 	.cell_marka_success { background-color: #dff0d8; }
@@ -619,10 +619,85 @@ class Route_DealsSales extends RouteBase {
 			}
 			$('<tbody></tbody>').appendTo(_uiNode$Table);
 			_uiNode$Table.appendTo(_uiNodeCont);
-			priv.renderInitInlineEditBox();// .dealsSales__inlineEditBox
+
+			_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);
+			_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);
+			_uiNode$GraphByMonth.appendTo(_uiNodeCont);
 
 			priv.renderHeaderMarki();
 			priv.renderTableBody();
+			priv.renderGraphByYear();
+			priv.renderGraphByMonth();
+			priv.renderInitInlineEditBox();// .dealsSales__inlineEditBox
+		};
+
+		priv.renderGraphByYear = function(record) {
+			var jsonData = [],
+					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)'],
+					wykresWidth = 940,
+					wykresMinItemWidth = 20
+			;
+			$.each(_state.obroty, function(kYear, vSalesByMonth) {
+				var jsonYearData = {};
+				jsonLabels.push(parseInt(kYear));
+				$.each(_state.months, function(monthIdx, vMonth) {
+					if (undefined === vSalesByMonth[vMonth]) {
+						jsonYearData['' + kYear + '-' + vMonth] = 0;
+					} else {
+						jsonYearData['' + kYear + '-' + vMonth] = vSalesByMonth[vMonth];
+					}
+				});
+				$.each(jsonYearData, function(kLabel, vValue) {
+					jsonTooltips.push('Obrót ' + numeral(vValue).format('0,0[.]00') + ' w ' + kLabel);
+				});
+
+				var yearDataValues = Object.keys(jsonYearData).map(function (key) {
+					return jsonYearData[key];
+				});
+				jsonData.push(yearDataValues);
+			});
+			var jsonColorsAll = [];
+			for (var i = 0, mi = 0, mc = jsonColors.length; i < 12; i++) {
+				jsonColorsAll.push(jsonColors[mi]);
+				if (++mi >= mc) {
+					mi = 0;
+				}
+			}
+			{// wykres width
+				wykresTestWidth = jsonLabels.length * 12 * wykresMinItemWidth;
+				if (wykresTestWidth > wykresWidth - 60 - 20) {
+					wykresWidth = wykresTestWidth + 60 + 20;
+				}
+				jQuery('#wykres03').css({width: wykresWidth});
+			}
+			jsonColors = jsonColorsAll;
+			var bar = new RGraph.Bar('wykres03', 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', 60)
+				.Set('tooltips', RGraph.ISOLD ? null : jsonTooltips)
+				.Set('tooltips.event', 'mousemove')
+				.Set('labels.above', true)
+				.Set('hmargin', 20)
+				.Draw();
+		};
+
+		priv.renderGraphByMonth = function(record) {
+			return;// TODO: wykres04
 		};
 
 		priv.renderHeaderMarki = function(record) {
@@ -852,6 +927,7 @@ class Route_DealsSales extends RouteBase {
 					switch (arguments[i]) {
 						case 'body': priv.renderTableBody(); break;
 						case 'marki': priv.renderHeaderMarki(); break;
+						case 'graphs': priv.renderGraphByYear(); priv.renderGraphByMonth(); break;
 					}
 				}
 			}
@@ -871,6 +947,7 @@ class Route_DealsSales extends RouteBase {
 					});
 				});
 				renderParts['body'] = true;
+				renderParts['graphs'] = true;
 			}
 			/*
 						state.obrotyToMarki[year][month] = marka;
@@ -930,13 +1007,13 @@ class Route_DealsSales extends RouteBase {
 	});
 </script>
 
-		<script src="stuff/RGraph/libraries/RGraph.common.core.js"></script>
-		<script src="stuff/RGraph/libraries/RGraph.common.dynamic.js"></script>
-		<script src="stuff/RGraph/libraries/RGraph.common.key.js"></script>
-		<script src="stuff/RGraph/libraries/RGraph.drawing.rect.js"></script>
-		<script src="stuff/RGraph/libraries/RGraph.common.tooltips.js"></script>
-		<script src="stuff/RGraph/libraries/RGraph.bar.js"></script>
-		<script src="stuff/RGraph/libraries/RGraph.line.js"></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>
 
 <!--