ChartsDataMapper = {
	energySeriesDataMap:SE.isPublic ? 
	[{series:'production',type:'systemProduction'}] :
	[
		{series:'production',type:'systemProduction'},
		{series:'consumption',type:'consumption'},
		{series:'selfConsumption',type:'selfConsumption'},
		{series:'volthera',type:'volthera'},
		{series:'export',type:'export'},
		{series:'import',type:'import'},
		{series:'battery',type:'batterySelfConsumption'}
	],
	resolveRequestParams:function(params) {
		if (params.month!=null && params.year!=null) {
			params.endDate = Date.UTC(params.year,params.month+1)-1000;
		}
		return params;
	},
	mapEnergyChartData:function(data,timeUnit,fieldStartDate,fieldEndDate) {
		switch(timeUnit) {
			case 'DAY':
				return ChartsDataMapper.mapEnergyDayChartData(data,fieldStartDate,fieldEndDate);
			case 'WEEK':
				return ChartsDataMapper.mapEnergyWeekChartData(data,fieldStartDate,fieldEndDate);
			case 'MONTH':
				return ChartsDataMapper.mapEnergyMonthChartData(data,fieldStartDate,fieldEndDate);
			case 'YEAR':	
				return ChartsDataMapper.mapEnergyYearChartData(data,fieldStartDate,fieldEndDate);
			default:
				llog("no timeunit on chart mapper!");
				return ChartsDataMapper.mapEnergyMonthChartData(data,fieldStartDate,fieldEndDate);
		}
	},
	mapEnergyDayChartData:function(data,fieldStartDate,fieldEndDate) {
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;
		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        start_day:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-1) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-1),
	        start_day_gmt:fieldEndDate ? times.dataStart : times.fieldStart,
			GMTOffset:gmtOffset,
			end_day:ChartsDataMapper.toYearMonthDay(data.dataEndDate),
			end_day_next:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,1) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,1),
			field_end:fieldEndDate,
			org_data:data
		};
		processedData = this.mapPowerData('dayData',processedData,data);
		return processedData;
	},
	mapEnergyWeekChartData:function(data,fieldStartDate,fieldEndDate) {
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;
		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        year_range:ChartsDataMapper.getYearRange(new Date(times.fieldStart),new Date(times.fieldEnd)),
	        start_week:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-7) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-7),
			start_week_gmt:fieldEndDate ? times.dataStart : times.fieldStart,
			GMTOffset:gmtOffset,
			end_week:ChartsDataMapper.toYearMonthDay(times.dataEnd),
			end_week_next:ChartsDataMapper.addDaysToDate(times.dataEnd,1),
			org_data:data
		};
		processedData = this.mapPowerData('weekData',processedData,data);
		return processedData;
	},
	mapEnergyMonthChartData:function(data,fieldStartDate,fieldEndDate) {
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;

		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        year_range:ChartsDataMapper.getYearRange(new Date(times.fieldStart),new Date(times.fieldEnd)),
	        //start_week:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-7) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-7),
			GMTOffset:gmtOffset,
			energy_chart_month_by_day:{},
			energy_chart_month_by_day_max:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'systemProduction'))),
			energy_chart_month_by_day_max_c:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'consumption'))),
			energy_chart_month_by_day_max_sc:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'selfConsumption'))),
			
						energy_chart_month_by_day_max_vt:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'volthera'))),
			
			prev_month_date:Math.max(fieldStartDate||data.fieldStartDate,data.dataStartDate-1000),
			next_month_date:Math.min(fieldEndDate||data.fieldEndDate,data.dataEndDate+1000),
			month_uom:data.measurementUnit,
			end_month:ChartsDataMapper.toYearMonthDay(times.dataEnd),
			end_month_next:ChartsDataMapper.addDaysToDate(times.dataEnd,1),
			monthPR:ChartsDataMapper.mapDateSeries(data,'performanceRatio')
		};
		ChartsDataMapper.energySeriesDataMap.forEach(function(c){
			if(data[c.type]) {
				processedData.energy_chart_month_by_day[c.series] = {
					total:ChartsDataMapper.formatSeriesTotal(data,c.type),
					roundValueTotal:ChartsDataMapper.sumSeriesTotal(data,c.type),
					data:ChartsDataMapper.mapDateSeries(data,c.type)
				};
			};
		});
		return processedData;
	},
	mapEnergyBillingChartData:function(data,fieldStartDate,fieldEndDate) {
		var processedData = {
			energy_chart_billing_by_day:{},
			energy_chart_billing_by_day_max:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'systemProduction'))),
			energy_chart_billing_by_day_max_c:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'consumption'))),
			energy_chart_billing_by_day_max_sc:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'selfConsumption'))),

						energy_chart_billing_by_day_max_vt:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'volthera'))),
			
			billing_uom:data.measurementUnit,
			billingPR:ChartsDataMapper.mapDateSeries(data,'performanceRatio')
		};
		ChartsDataMapper.energySeriesDataMap.forEach(function(c){
			if(data[c.type]) {
				processedData.energy_chart_billing_by_day[c.series] = {
					total:ChartsDataMapper.formatSeriesTotal(data,c.type),
					roundValueTotal:ChartsDataMapper.sumSeriesTotal(data,c.type),
					data:ChartsDataMapper.mapDateSeries(data,c.type)
				};
			};
		});
		return processedData;
	},
	processBillingData:function() {
				if(SE.Params.billingData.systemProduction && SE.Params.billingData.systemProduction.dateSeries) {
			var productionData = SE.Params.billingData.systemProduction.dateSeries.map(function(data){return data.value});						
			SE.Params.billingData.production = {data:productionData};
		};
				if(SE.Params.billingData.selfConsumption && SE.Params.billingData.selfConsumption.dateSeries) {
			SE.Params.billingData.selfConsumption_ = SE.Params.billingData.selfConsumption;
			var selfConsumptionData = SE.Params.billingData.selfConsumption.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.selfConsumption = {data:selfConsumptionData};
		};
				if(SE.Params.billingData.volthera && SE.Params.billingData.volthera.dateSeries) {
			SE.Params.billingData.volthera_ = SE.Params.billingData.volthera;
			var voltheraData = SE.Params.billingData.volthera.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.volthera = {data:voltheraData};
		};
				if(SE.Params.billingData.consumption && SE.Params.billingData.consumption.dateSeries) {
			SE.Params.billingData.consumption_ = SE.Params.billingData.consumption;
			var consumptionData = SE.Params.billingData.consumption.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.consumption = {data:consumptionData};
		};
				if(SE.Params.billingData.batterySelfConsumption && SE.Params.billingData.batterySelfConsumption.dateSeries) {
			var batteryData = SE.Params.billingData.batterySelfConsumption.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.battery = {data:batteryData};
		};
				if(SE.Params.billingData.import && SE.Params.billingData.import.dateSeries) {
			SE.Params.billingData.import_ = SE.Params.billingData.import;
			var importData = SE.Params.billingData.import.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.import = {data:importData};
		};
				if(SE.Params.billingData.export && SE.Params.billingData.export.dateSeries) {
			SE.Params.billingData.export_ = SE.Params.billingData.export;
			var exportData = SE.Params.billingData.export.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.export = {data:exportData};
		};
				if(SE.Params.billingData.performanceRatio && SE.Params.billingData.performanceRatio.dateSeries) {
			SE.Params.billingData.performanceRatio_ = SE.Params.billingData.performanceRatio;
			var performanceRatioData = SE.Params.billingData.performanceRatio.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.performanceRatio = {data:performanceRatioData};
		};			
	},
	mapEnergyYearChartData:function(data,fieldStartDate,fieldEndDate) {
		var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;

		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),//TODO not in use. this is done on CH by adding -7 days to endDate
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),//TODO not in use. the endDate (server returns this)
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        year_range:ChartsDataMapper.getYearRange(new Date(times.fieldStart),new Date(times.fieldEnd)),//TODO all years between field_start_date and field_end_date
	        //start_week:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-8) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-8),
			GMTOffset:gmtOffset,
			energy_chart_year_by_month:{},
			energy_chart_year_by_month_max:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'systemProduction'))),
			energy_chart_year_by_month_max_c:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'consumption'))),
			energy_chart_year_by_month_max_sc:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'selfConsumption'))),

						energy_chart_year_by_month_max_vt:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'volthera'))),

			end_year:ChartsDataMapper.toYearMonthDay(times.dataEnd),
			end_year_next:ChartsDataMapper.addDaysToDate(times.dataEnd,1),
			prev_year_date:Math.max(fieldStartDate||data.fieldStartDate,ChartsDataMapper.getEndOfPrevYear(data.dataStartDate)),
			next_year_date:Math.min(fieldEndDate||data.fieldEndDate,ChartsDataMapper.getEndOfNextYear(data.dataEndDate)),
			year_uom:data.measurementUnit,
			yearPR:ChartsDataMapper.mapDateSeries(data,'performanceRatio')
		};

		ChartsDataMapper.energySeriesDataMap.forEach(function(c){
			if(data[c.type]) {
				processedData.energy_chart_year_by_month[c.series] = {
					total:ChartsDataMapper.formatSeriesTotal(data,c.type),
					roundValueTotal:ChartsDataMapper.sumSeriesTotal(data,c.type),
					data:ChartsDataMapper.mapDateSeries(data,c.type)
				};
			};
		});
		return processedData;
	},
	updateRangeData:function(processedData,times) {
		processedData.end_week = ChartsDataMapper.toYearMonthDay(times.dataEnd);
		processedData.end_week_next = ChartsDataMapper.addDaysToDate(times.dataEnd,1);
		return processedData;
	},
	mapPowerData:function(resolution,processedData,data) {
		processedData[resolution]={
			per_uom:data.measurementUnit,
			power_chart_periodic : data['systemProduction'] ? ChartsDataMapper.mapDateSeries(data,'systemProduction') : []
		};
		if(!SE.isPublic) {
			processedData[resolution].power_chart_periodic_c = data['consumption'] ? ChartsDataMapper.mapDateSeries(data,'consumption') : [];
			processedData[resolution].power_chart_periodic_sc = data['selfConsumption'] ? ChartsDataMapper.mapDateSeries(data,'selfConsumption') : [];

						processedData[resolution].power_chart_periodic_vt = data['volthera'] ? ChartsDataMapper.mapDateSeries(data,'volthera') : [];
			
			processedData[resolution].power_chart_periodic_pv = data['solarProduction'] ? ChartsDataMapper.mapDateSeries(data,'solarProduction') : [];
			processedData[resolution].power_chart_periodic_import = data['import'] ? ChartsDataMapper.mapDateSeries(data,'import') : [];
			processedData[resolution].power_chart_periodic_export = data['export'] ? ChartsDataMapper.mapDateSeries(data,'export') : [];
			processedData[resolution].power_chart_periodic_storage = data['storagePower'] ? ChartsDataMapper.mapDateSeries(data,'storagePower') : [];
			processedData[resolution].power_chart_periodic_energy_level = data['storageEnergyLevel'] ? ChartsDataMapper.mapDateSeries(data,'storageEnergyLevel') : [];
		}
		return processedData;
	},	
	
	mapDateSeries:function(data,type) {
		return data[type] ? data[type].dateSeries.map(function(item){return item.value;}) : null;
	},
	sumSeriesTotal:function(data,type) {
		return data[type] ? Math.roundPrecise(data[type].dateSeries.reduce(function(a,b){return a+b.value;},0),3) : 0;
	},
	formatSeriesTotal:function(data,type) {
		var unit = 'kWh';//TODO handle mWh vs kWh
		return SE.util.locale.format(ChartsDataMapper.sumSeriesTotal(data,type),3)+" "+unit;
	},
	toYearMonthDay:function(timeStamp) {
		var date = new Date(timeStamp);
		return {year:date.getFullYear(),month:date.getMonth(),day:date.getDate()};
	},
	getYearRange:function(timeStampStart,timeStampEnd) {
		var range = [];
		var startYear = timeStampStart.getFullYear();
		var endYear = timeStampEnd.getFullYear();
		for (var i=startYear; i<=endYear; i++) range.push([i]);
		return range;
	},
	addDaysToDate:function(timeStamp,daysToAdd) {
        let newTimeStamp = timeStamp + daysToAdd*24*60*60*1000;
        return newTimeStamp;
	},
	getEndOfPrevMonth:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setDate(1); // going to 1st of the month
		d.setHours(-1); // going to last hour before this date even started.
		d.setMinutes(59);
		return d.getTime();//-d.getTimezoneOffset()*60000;//return GMT time
	},
	getEndOfNextMonth:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setMonth(d.getMonth()+1); //1 months ahead;
		return ChartsDataMapper.getEndOfPrevMonth(d.getTime());
	},
	getEndOfMonth:function(month,year) {
		var d = new Date();
		d.setYear(year);
		d.setMonth(month+1);
		return ChartsDataMapper.getEndOfPrevMonth(d.getTime());
	},
	getEndOfPrevYear:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setMonth(0); //JAN
		d.setDate(1); // going to 1st of the month
		d.setHours(-1); // going to last hour before this date even started.
		d.setMinutes(59);
		return d.getTime();//-d.getTimezoneOffset()*60000;//return GMT time
	},
	getEndOfNextYear:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setYear(d.getFullYear()+1);
		return ChartsDataMapper.getEndOfPrevYear(d.getTime());
	},
	convertToGmt:function(timeStamp) {
		var date = new Date(timeStamp);
		var tos = date.getTimezoneOffset();
		var new_timeStamp = date.getTime() + tos*60000;
		var new_date = new Date(new_timeStamp);
		var new_tos = new_date.getTimezoneOffset();
				if(typeof Intl!='undefined') {	
			var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
			if(timeZone=='Australia/Sydney' && tos != new_tos) {
				new_timeStamp = new_timeStamp - Math.abs(tos - new_tos)*60000;
				new_date = new Date(new_timeStamp);
			};
		};
		return new_timeStamp;
	},
	getLocalizedTimes:function(data,fieldStartDate,fieldEndDate) {
		return {
			dataStart : fieldStartDate ? ChartsDataMapper.convertToGmt(data.dataStartDate) : ChartsDataMapper.convertToGmt(data.fieldStartDate),
			dataEnd : fieldEndDate ? ChartsDataMapper.convertToGmt(data.dataEndDate) : ChartsDataMapper.convertToGmt(data.fieldEndDate),
			fieldStart : fieldStartDate ? ChartsDataMapper.convertToGmt(fieldStartDate) : ChartsDataMapper.convertToGmt(data.fieldStartDate),
			fieldEnd : fieldEndDate ? ChartsDataMapper.convertToGmt(fieldEndDate) : ChartsDataMapper.convertToGmt(data.fieldEndDate)
		};
	}
}		
	
		
SE.CanvasPanel = Ext.extend(Ext.Panel,
{
	ctx:null,
    canvas:null,                        
    bodyStyle:{background:'#fff'},
    frame:false,
    listeners: 
    {
		afterrender: 
		{
        	fn:function()
        	{                        
            	this.canvas = this.items.items[0].el.dom;            
                this.ctx = this.canvas.getContext("2d");
                this.clear();                        
            }
		}        
	},            
    constructor: function(config) 
    {
		        this.items = 
        {
        	xtype: 'box',
            autoEl:
            {
				tag:'canvas',
                height:config.height,
                width:config.width
            }
		};
        SE.CanvasPanel.superclass.constructor.call(this, config);
	},
	clear: function() 
	{
				this.ctx.save();

				this.ctx.setTransform(1, 0, 0, 1, 0, 0);
		this.ctx.clearRect ( 0, 0, this.getWidth(), this.getHeight() );

				this.ctx.restore();																	
	}	
});
SE.Chart2Canvas = Ext.extend(Object,
{
	constructor:function(config)
	{
		Ext.apply(this,config);
	},
    convert:function()
    {
		var me = this;
		require([SE.contex_url+'/javascript/canvg-1.3/rgbcolor.js',
				 SE.contex_url+'/javascript/canvg-1.3/StackBlur.js',
				 SE.contex_url+'/javascript/canvg-1.3/canvg.js'
			    ],
							    function(){me.render();});
    },
    render:function()
    {

		var width = this.svgDom.width.baseVal.value;
		var height = this.svgDom.height.baseVal.value;
		var svgSrc = (new XMLSerializer()).serializeToString(this.svgDom);
		
		var canvasPanel = new SE.CanvasPanel({height:height,width:width});
		var imgWin = new Ext.Window({items:canvasPanel,renderTo:Ext.getBody(),modal:true,width:width+20,height:height+20});
		imgWin.show();

		canvg(canvasPanel.canvas,svgSrc,{ log:true,renderCallback:function(dom){}});
    }
});

	
SE.HighchartMarkerUtil = 
{
    addMarkerSymbol:function(highchartsObject)
	{
		Ext.apply(highchartsObject.Renderer.prototype.symbols, {
	        'triangle-right': function (a, b, c, d) {
	        	a=a-3;
	        	b=b-2;
	        	c=c+10;
	        	d=d+5;
	            return ["M", a+c/2, b + d, "L", a+c/2, b, a, b + d / 2, "Z"];
	        }
    	});
	},
	updateChartMarkers:function(chart,action)
	{
		if (chart && chart.series && chart.series[0] && chart.series[0].data && chart.series[0].data[0]) {
		      var barWidth = this._calculateTotalSeriesWidth(chart) / 2;
		      var scatter =  this._findScatter(chart.series);
		      if (scatter && scatter.data) {
			      for(var i = 0; i < scatter.data.length; i++){
			        var p =  scatter.data[i];
			        if (p.y < 0) {
			        	p.remove();
			        } else if(p.graphic){
			           p.graphic[action]({
			             x: p.plotX + barWidth + p.graphic.r
			           });
			        }
			      }
			  }
	      }
	},
	_findScatter:function(series)
	{
		for(var i = 0; i < series.length; i++){
			if (series[i].type === "scatter") return series[i];
		}
		return null;
	},
	_calculateTotalSeriesWidth:function(chart)
	{
		if (this._isStackedChart(chart)) {
			return chart.series[0].data[0].pointWidth;
		}
		var gap = -3; //gap between columns. Not counting one column case (hense starting with minus)
		var totalPointWidth = 0;
		for (var k = 0; k < chart.series.length; k++) {
			var barToMeasure = chart.series[k].data[0];
			//counting in all visable bar columns
			if (chart.series[k].data[0] && barToMeasure.pointWidth && chart.series[k].type != "scatter" && chart.series[k].visible) {		      		
			  totalPointWidth += barToMeasure.pointWidth;
			  gap+= 0.473 + 0.172 * barToMeasure.pointWidth;  //Based on a regression line of experimental values for the gap
			}
		}
		return totalPointWidth+gap;
	},
	_isStackedChart:function(chart)
	{
		return chart.series[0] && chart.series[0].stackedYData;
	}
};

SE.HighchartContainer = Ext.extend(Ext.Container,{
    afterRender:function() {
		SE.HighchartContainer.superclass.afterRender.apply(this,arguments); 
		SE.HighchartMarkerUtil.addMarkerSymbol(Highcharts);
		this.renderChart();
	},
	renderChart:function() {
						
		var currConfig = this.chartConfig;
		var chartHeight = this.chartGraphicsHeight || this.height;
				Ext.apply(currConfig.chart,{width:window.innerWidth - 40});
				Ext.apply(currConfig.chart,{renderTo:this.el.dom,height:chartHeight});
		if(!this.chart) this.chart = new Highcharts.Chart(currConfig);
		this.chart.parent = this.parent;
	},
	updateChart:function(data) {
		this.chart.series[0].setData(data);
	},
	export2Image:function() {
		var svgDom = this.el.select('svg').elements[0];
		var chart2Canvas = new SE.Chart2Canvas({svgDom:svgDom});
		chart2Canvas.convert();
	}
});	
Ext.reg('se_chart_container',SE.HighchartContainer);

	
SE.NoDataPanel = Ext.extend(Ext.Component,
{
	cls:'se-no-data se-panel-white-background',
	initComponent:function(config)
	{
		SE.NoDataPanel.superclass.initComponent.call(this);
	}	   	
});	

	
SE.LoadingPanel = Ext.extend(Ext.Component,
{
	cls:'se-loading-panel se-panel-white-background',
	initComponent:function(config)
	{
		SE.LoadingPanel.superclass.initComponent.call(this);
	}	   	
});	

	
	SE.ChartLabel = 
{
	getLabel:function(hasMeters,category,base,name)
	{
	    if (hasMeters && SE.labels.dboard[category]) {
	    	return name +' '+ base;
	    		    } else {
	    	return base;
	    }
	}
};	
	
SE.ChartConfig = Ext.extend(Object,
{
	constructor:function(config)
	{
		Ext.apply(this,config);
				var y = -7;
				this.y_titleConfig_w = {align:'high',x:20,text:this.labels.w,rotation:0,y:y,style:{color:'#616161',fontWeight:'normal'}};
		this.y_titleConfig_wh = {align:'high',offset:15,text:this.labels.wh,rotation:0,y:y,style:{color:'#616161',fontWeight:'normal'}};
		this.legendConfig = {verticalAlign:'top',x:0,y:0,itemStyle:{fontWeight:'normal'}};
		this.creditConfig = {enabled:false};
		this.titleConfig = {text:'',x:-500};
		this.tooltipBgConfig = {linearGradient: [0,0,0,50],stops: [[0,'#ffffff'],[1,'#dfdfdf']]};
	}
});

	
		
SE.SyncedChartsPanel=Ext.extend(Ext.Panel,
{
	initComponent:function()
    {
        if(this.syncEventName) {
    		Ext.Bus.on(this.syncEventName,this.syncChartZoom,this);
        };
		SE.SyncedChartsPanel.superclass.initComponent.apply(this,arguments);
    },
    syncChartZoom:function(event)
    {
    	var syncedSubCharts = this.items.items;
    	for (var i=0; i<syncedSubCharts.length; i++) {
    		if(syncedSubCharts[i].chart){
                if (event.xAxis) {
    	       		var xMin = event.xAxis[0].min;
    				var xMax = event.xAxis[0].max;
    				syncedSubCharts[i].chart.xAxis[0].setExtremes(xMin, xMax, true,false);
                    syncedSubCharts[0].chart.showResetZoom();
    	       	} else {
                    syncedSubCharts[i].chart.xAxis[0].setExtremes(null, null);
                    $('.highcharts-button').hide()
    	       	}
            }
    	}
    },
    afterRender:function()
    {
	    var me = this;
		if (this.slaveChart) {
			$('.sync-chart').bind('mousemove touchmove', function (e) {me.syncChartHover(e,me);});
            $('.sync-chart').bind('mouseleave', function (e) {me.onMouseLeave(e);});
            $('.sync-chart').bind('mouseenter', function (e) {me.onMouseEnter(e);});
		}		
	 	SE.SyncedChartsPanel.superclass.afterRender.apply(this,arguments);
    },
    onMouseLeave:function(e)
    {
                this.syncChartHover(e,this,true);
    },
    onMouseEnter:function()
    {
            },
    syncChartHover:function(e, me, isMouseOut)
    {
        var activeSlaveChart = me.subChartsPanel ? me.subChartsPanel.getActiveSlaveChart() : me.slaveChart;
        for (var s=0;s<activeSlaveChart.chart.series.length;s++){
            var slaveSeries = activeSlaveChart.chart.series[s]; 
            var slavePoint = me.searchForPoint(e,activeSlaveChart.chart,slaveSeries);

            var masterSeriesToSync = this.masterSeriesToSync || [this.masterSeriesIndex];
            masterSeriesToSync.forEach(function(serieIndex){
                var masterSeries = me.masterChart.chart.series[serieIndex];
                var masterPoint = me.searchForPoint(e,me.masterChart.chart,masterSeries);

                if (isMouseOut || me.allPointsAreZero(slavePoint,masterPoint) || (!me.isAreasplineSync && me.syncedSeries && me.isBetweenColumns(slavePoint,masterPoint))) {
                    me.hideAllHovering(masterSeries,slaveSeries, e);
                    return;
                }
                if (masterSeries && masterSeries.visible && masterPoint) {
                    me.highlightPoint(me.masterChart.chart,masterPoint,e);    
                }
            });
            if (slavePoint && slavePoint.series.visible==true) {
                this.highlightPoint(activeSlaveChart.chart,slavePoint,e);
            }   
        }
        if(me.masterChart.chart.tooltip.shared) {
            var allPoints = [];
            for (var i=0; i<masterSeriesToSync.length; i++) {
                var masterSeries = me.masterChart.chart.series[i];
                var point = me.searchForPoint(e,me.masterChart.chart,masterSeries);
                if(masterSeries && masterSeries.visible && point && point.y && this.isPointPartOfHoveredCategory(e,point)) {
                    allPoints.push(point);
                }
            }
            if (allPoints.length > 0) me.masterChart.chart.tooltip.refresh(allPoints);
        }  

        if(activeSlaveChart.chart.tooltip && activeSlaveChart.chart.tooltip.shared) {
            var allPoints = [];
            for (var i=0; i<activeSlaveChart.chart.series.length; i++) {
                var slaveSeries = activeSlaveChart.chart.series[i];
                var point = me.searchForPoint(e,activeSlaveChart.chart,slaveSeries);
                if(slaveSeries && slaveSeries.visible && point && point.y && this.isPointPartOfHoveredCategory(e,point)) {
                    allPoints.push(point);                   
                }
            }
            if (allPoints.length > 0) activeSlaveChart.chart.tooltip.refresh(allPoints);
        }      
    },
    highlightPoint:function(chart,point,e)
    {
        point.onMouseOver();
        chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair  
    },
    searchForPoint:function(e,chart,series)
    {
        e = chart.pointer.normalize(e); // Find coordinates within the chart
        return series ? series.searchPoint(e, true) : null;// Get the hovered point
    },
    isPointPartOfHoveredCategory:function(e,point) {
    	    	if(!e.target && !e.target.x && !e.target.x.baseVal) return false;
        if(point.series.chart.options.chart.defaultSeriesType=='areaspline' || SE.isPhone) return true;
        return (point && point.graphic && point.graphic.element && point.graphic.element.x && e.target.x) && (point.graphic.element.x.baseVal.value>=e.target.x.baseVal.value-10 && point.graphic.element.x.baseVal.value<=e.target.x.baseVal.value+10);
    },
    isBetweenColumns:function(masterPoint, slavePoint)
    {
        return masterPoint && slavePoint && masterPoint.index!==slavePoint.index;
    },
    allPointsAreZero:function(masterPoint, slavePoint)
    {
        return (!slavePoint || (slavePoint.series && slavePoint.series.visible && !slavePoint.y)) && 
                                    (!masterPoint || (masterPoint.series && masterPoint.series.visible && !masterPoint.y));
    },
    hideAllHovering:function(masterSeries, slaveSeries, e)
    {
        if(masterSeries) masterSeries.onMouseOut();
        slaveSeries.onMouseOut();
        this.masterChart.chart.tooltip.hide();
        this.slaveChart.chart.xAxis[0].drawCrosshair(e, null);
        this.masterChart.chart.xAxis[0].drawCrosshair(e, null);
    }
});

	
SE.PrChartsUtil = 
{
	getPrColors:function(prDataArr, ultimateValue)
	{
		var colorArr = [];
		for (i=0; i<prDataArr.length; i++) {
			if (prDataArr[i] >= 1) {
				colorArr.push(ultimateValue);
			} else {
				var greenishColor = parseInt(prDataArr[i] * 176);//parseInt(prDataArr[i] * 106 + 70);
				var blueishColor = parseInt(80 - (176 - greenishColor) / 2);//parseInt(prDataArr[i] * 106 + 70);
				var color = 'rgb(0,'+greenishColor+','+blueishColor+')';
				colorArr.push(color);
			}
		}
		return colorArr;
	},
	onSeriesMouseOver:function(e,me,params)
	{	
		if (me.syncedChartContainer) {
			me.syncedChartContainer.chartLastTouch = e.target.userOptions.category;
		}
	},
	/*preProccessSyncedMonthPR:function(dailyPerformanceRatio)
    {
        dailyPerformanceRatio = dailyPerformanceRatio || [];
        var data  = [];
        for (var i = 0; i < dailyPerformanceRatio.length; i++) 
        {
            data.push(dailyPerformanceRatio[i]);
        }
        return data;
            },*/
    preProccessSyncedYearPR:function(monthlyPerformanceRatio, yearlyPerformanceRatio)
    {
        var ypr = yearlyPerformanceRatio;
        if(!yearlyPerformanceRatio || yearlyPerformanceRatio.length==0)
            return [];

        var minYear = ypr[0].date.year;
        if(minYear<2000) minYear+=1900;

        var maxYear = ypr[ypr.length-1].date.year;
        if(maxYear<2000) maxYear+=1900;

        var numOfYears = maxYear - minYear + 1;
        var years = {};
        var yearIndex = {};
        for (var i = 0; i < numOfYears; i++) 
        {
            years[minYear+i] = this.monthArray();
            yearIndex[minYear+i] = i;
        }
        this.maxValue = 0;
        for (var i = 0; i < monthlyPerformanceRatio.length; i++) 
        {
            var pr = monthlyPerformanceRatio[i];
            var value = pr.value;
            if(this.maxValue<value) this.maxValue = value;
            var year = pr.date.year;
            if(year<2000) year+=1900;
            var month = pr.date.month;
            years[year][month] = value;
        }
        var months_in_year = [];
        for (var year in years) 
        {
           if (years.hasOwnProperty(year)) 
           {
                var isEmpty = years[year].equals(this.monthArray());
                if(!isEmpty)
                {                   
                    months_in_year.push({name:year,data:years[year]});
                }
           }
        }
        if (months_in_year.length > 0){
            var monthlyPrForCurrYear = months_in_year[months_in_year.length-1];
            return monthlyPrForCurrYear.data; 
        } else {
           return this.monthArray(); 
        }
            },
    preProccessSyncedTotalPR:function(yearlyPerformanceRatio,yearRange)
    {
		var ypr = yearlyPerformanceRatio || [];
    	return ypr.map(function(pr){return pr.value;});
    },

    /*preProccessSyncedTotalPR:function(yearlyPerformanceRatio,yearRange)
	{
		var ypr = yearlyPerformanceRatio;
		if(yearlyPerformanceRatio.length==0)
			return [];
			
		var minYear = ypr[0].date.year;
		if(minYear<2000) minYear+=1900;

		var maxYear = ypr[ypr.length-1].date.year;
		if(maxYear<2000) maxYear+=1900;

		var numOfYears = maxYear - minYear + 1;
		var years = {};
		var yearIndex = {};
		for (var i = 0; i < numOfYears; i++) 
		{
			years[minYear+i] = this.yearArray(numOfYears);
			yearIndex[minYear+i] = i;
		}
		this.maxValue = 0;
		for (var i = 0; i < yearlyPerformanceRatio.length; i++) 
		{
			var pr = yearlyPerformanceRatio[i];
			var value = pr.value;
			if(this.maxValue<value) this.maxValue = value;
			var year = pr.date.year;
			if(year<2000) year+=1900;
			years[year][yearIndex[year]] = value;
		}	
		var years_ = [];
		for (var i=0; i<yearRange.length; i++) 
		{
		   var year = yearRange[i][0];
		   if (years.hasOwnProperty(yearRange[i][0])) 
		   {
				years_.push(years[yearRange[i][0]][0]);
				// var isEmpty = years[year][0].equals(this.yearArray());
				// if(!isEmpty)
				// { 					
				// 	years_.push(years[year][0]);
				// 	//years_.push({name:year,data:years[year]});
				// }
		   } else {
		   		years_.push(0);
		   }
		}
		this.years = years;
		return years_;
			},	*/
	yearArray:function(numOfYears)
	{
		emptyValues = [];
		for (var i = 0; i < numOfYears; i++) 
		{
			emptyValues.push(0);
		}
		return emptyValues;
	},
    monthArray:function()
    {
        return [0,0,0,0,0,0,0,0,0,0,0,0];
    }
};	

	
Ext4.define('SE.ChartUtils',
{
	extend: 'Object',
	statics: 
	{
		getSolarEdgeLogoTitle: function(style){
			var styleArg = style || "";
			var txt = "<img src='" + SE.img_url + "/logos/SolarEdge_64x13_New.png' width='64px' height='13px' style='" + styleArg + "' alt='' />";
			return {
				align:"right",
				useHTML: true,
				text: txt			
			};
		}
	}
});


SE.BatteryPowerChart = Ext.extend(Object,
{
	constructor:function(config)
	{
		Ext.apply(this,config);
		this.energyLevelData = this.powerData.power_chart_periodic_energy_level || [];
		this.storageData = this.powerData.power_chart_periodic_storage || [];
	},
	createConfig:function(params)
	{
		var me = this;
		this.batteryChartConfig = {
			chart: {
		      zoomType:this.panel.zoomType,
		      marginTop:25,
		   	  marginRight:10,
		      marginLeft:60,
		      marginBottom:60,
		      animation: false,
		      defaultSeriesType:'areaspline',
		      resetZoomButton: {position: {align:'left',verticalAlign: 'top',x: 75,y: -100},relativeTo: 'chart'},//hide the zoom button
		      events:{
             	selection:function(event)
         	 	{
					Ext.Bus.fireEvent('sync-pae-periodic-chart',event);
					me.panel.datePeriodicRangeZoom(event);
				},
				load:function()
				{
					me.panel.showMarkersForIsolatedPoints(this);
				}
			  }
		    },
       	    xAxis:{type:'datetime',gridLineColor:'#cacaca',crosshair:{width: 1,color: 'gray'},gridLineWidth:1},
//		    title: SE.ChartUtils.getSolarEdgeLogoTitle(),
		    title: {
		      text: ''
		    },
		    yAxis: [{
		        title: {
		          text: ''
		        },
		        min: 0,
		        max: 100
		      }
		    ],
		    plotOptions: {
		      line: {
		        marker: {
		          enabled: false
		        }
		      },
	         	series:
	         	{
	            	pointInterval: 15*60*1000, /*quarter of hour*/
	            	pointStart:this.panel[this.pointStart],
	            	events:{legendItemClick:function(){return false;}}
			    }
			},
			tooltip:false,
		    credits: {
		      enabled: false
		    },
		    legend:{
	    		y:5,
	    		itemStyle:
	    		{
	    			fontSize:SE.isPhone ? 10 : 12,
	    		 	fontWeight:'normal'
	    		}
	    	},
		    series: [{
			        yAxis: 0,
			        type: 'line',
			        name: SE.labels.BatteryPowerChart.batteryEnergyLevel || 'Battery Energy Level',
			        color: '#0066ff',
			        data: this.energyLevelData
			      },{
			        visible: false,
			        showInLegend: false,
			        yAxis: 0,
			        type: 'line',
			        name: SE.labels.BatteryPowerChart.storagePower || 'Storage Power',
			        color: 'red',
			        data: this.storageData
			      }]
		};
		this.batteryChartConfig.yAxis[0].max = 102;
		this.batteryChartConfig.yAxis[0].tickInterval = 10;
		return this.batteryChartConfig;
	},
	createContainer:function(viewMode)
	{
		return new SE.HighchartContainer({id:'battery_power_chart', style:'position:relative;top:7px;',
										chartConfig:this.createConfig(),parent:this.panel,
										height:this.cHeight,chartGraphicsHeight:this.chartGraphicsHeight,
        								listeners:{activate:this.panel.setMonthSelect}});											
	} 
});	

	
Ext4.define('SE.ChartUtils',
{
	extend: 'Object',
	statics: 
	{
		getSolarEdgeLogoTitle: function(style){
			var styleArg = style || "";
			var txt = "<img src='" + SE.img_url + "/logos/SolarEdge_64x13_New.png' width='64px' height='13px' style='" + styleArg + "' alt='' />";
			return {
				align:"right",
				useHTML: true,
				text: txt			
			};
		}
	}
});


SE.AbsPowerPeriodicChart = Ext.extend(Object,
{
	autoHeight:true,
	constructor:function(config)
	{
		Ext.apply(this,config);
		this.periodicDateFormat = (new Ext.DatePicker()).format;
		this.fullPeriodicDateFormat = this.periodicDateFormat + ' H:i:s';
	},
	createConfig:function()
	{
		var chartConfig = new SE.ChartConfig({labels:this.labels});
		var me = this;
		var isPhone = true; 		var _marginBottom = this.isDoubleChartMode() ? 80 : 150;
		var _marginTop = isPhone || this.isDoubleChartMode() ? 40 : 70; 
		var legendY = this.isDoubleChartMode() ? -5 : -70;
		if(this.isDoubleChartMode() && isPhone){
			_marginBottom = 80;
			legendY = -10
		} 
		if(this.powerData.power_chart_periodic_c && this.powerData.power_chart_periodic_c.length>0) var fillOpacity = 0.7; else var fillOpacity = 0;
		this.periodicChartConfig =
		{
	      chart:{defaultSeriesType:'areaspline',backgroundColor:null,marginTop:_marginTop,marginBottom:_marginBottom,zoomType:this.panel.zoomType,
	             events:{
             	 selection:function(event)
             	 	{
						Ext.Bus.fireEvent('sync-pae-periodic-chart',event);
						me.panel.datePeriodicRangeZoom(event);
					},
	             	             load:function(event)
	             	{
						if(me.powerData.power_chart_periodic_c && me.powerData.power_chart_periodic_c.length>0)
	             			this.series[0].area.element.setAttribute('fill-opacity',1);
						me.panel.showMarkersForIsolatedPoints(this);			            
	             	}
	             },
	             resetZoomButton: {position: {align:'left',verticalAlign: 'top',x: 75,y: 10},relativeTo: 'chart'},
	             animation: false
			},
	      legend:{verticalAlign:'bottom',align:this.legendAlign,x:0,y:legendY,borderWidth:0,itemStyle:{fontSize:this.legendFontSize,fontWeight:'normal'}},
	      credits:{enabled:false},
	      title:{text:'',x:-500},
    	  subtitle: SE.ChartUtils.getSolarEdgeLogoTitle(),
       	  xAxis:{crosshair:{width: 1,color: 'gray'},type:'datetime',gridLineColor:'#cacaca',gridLineWidth:1},
		  yAxis:{title:chartConfig.y_titleConfig_w,style:{color:'#89A54E'},min:0,labels:{x: -3,formatter:function(){return this.value +' '+me.panel.resolveEnergyUnit(me.powerData.per_uom);}}},
      	  tooltip:{hideDelay:500,borderColor:'gray',useHTML:true,shared:true,positioner:function(x,y,point){
	        		return  {x:40,y:40};     				},formatter: function() {
				           var tooltipText = '<b class="tooltip-title">'+me.labels.powerOverview+' - '+me.getFormattedDateTime(this.x)+'</b></br>';
				           var formatValFn = function(val){
				           		var valNum = val.y != null ? val.y : val;
				           		val = valNum ? SE.util.locale.format(valNum,3) : 0;
				           		return (val+'').replace('.',SE.dSeparator)+' '+me.panel.resolveEnergyUnit(me.powerData.per_uom)+me.labels.w;
				           };
				           				           for (var i=0;i<this.points.length;i++){
				           		var series = this.points[i].series;
				           		var isSubSeries = series.userOptions.showInLegend===false;
				           		var titleCls = "tooltip-series-title";
				           		tooltipText+='<div class="'+titleCls+'"><span style="float:right;"><b>'+formatValFn(this.points[i])+'</b></span><span class="title-left" style="color:'+series.color+';">■</span>'+series.name+'</div>';			           		
				           }
				           				           var importExport = [];
				           var importSerie = _.find(me.energyChartContainer.chart.series,function(s){return s.options.category=='import';});
						   var exportSerie = _.find(me.energyChartContainer.chart.series,function(s){return s.options.category=='export';});
						   var importText = me.formatAdditionalSeriesDataForTooltip(this.x,importSerie,formatValFn,titleCls,'','&nbsp;&nbsp;');
				           importExport.push(importText);
						   var exportText = me.formatAdditionalSeriesDataForTooltip(this.x,exportSerie,formatValFn,titleCls,'','&nbsp;&nbsp;');
				           importExport.push(exportText);
				           importExport.forEach(function(s){if(s.length>0) tooltipText+=s;});
				           				           if (me.syncedChartContainer.slaveChart && me.powerData.power_chart_periodic_energy_level.length > 0) {
				      			var batteryText = '';
				      			batteryText+=me.formatAdditionalSeriesDataForTooltip(this.x,me.syncedChartContainer.slaveChart.chart.series[0],function(v){return SE.util.locale.format(v,1)+'%';},titleCls,'#335E85','&#9644;');
				      			batteryText+=me.formatStoragePowerForTooltip(this.x,me.syncedChartContainer.slaveChart.chart.series[1],formatValFn,titleCls,'#335E85','&#9644;');
								if(batteryText!='') tooltipText=tooltipText+'<hr>'+batteryText;				      			
				           }
						   if(importText.length>0 && exportText.length>0) {
								let adMsg1 = me.labels.importExportMsg1 || 'Why are both import and export shown?';
								let adMsg2 = me.labels.importExportMsg2 || 'Each data point in this chart represents<br>several minutes of activity.During this<br>time frame,both import and export may<br>have occurred due to momentary spikes<br>in consumption or production.';
								let addText = '<br/><div><p style="color: #2496d2;">' + adMsg1 + '</p><p style="color: #666;">' + adMsg2 + '</p></div>'
								tooltipText+=addText;
						   }
						   var fullTooltipText = '<div style="display:flex; flex-direction:column;">' + tooltipText + '</div>';
	           			   return fullTooltipText;			    		}
			    },
      	  plotOptions:
      	  {
         	areaspline:
         	{
			    marker:{enabled:false},

			    shadow:false,
                fillOpacity:fillOpacity,
         		lineWidth:1,states:{hover:{lineWidth:1}},
            	            	pointInterval: 15*60*1000, /*quarter of hour*/
            	pointStart:this.panel[this.pointStart]
         	},
         	series:{events:{legendItemClick:function(event){return SE.isMobile ? false : me.legendSelect(event.target.chart.series,event.target);}}}
      	  },
      	  series:this.createSeries(),
      	  navigation:{menuItemStyle:{fontSize:'10px'}}
        };
		return this.periodicChartConfig;
	},
	formatStoragePowerForTooltip:function(xValue,series,formatFn,titleCls,color,keyChar)
	{
		if (!series) return '';
		var chartPoint = null;
   		var points = series.data;
   		chartPoint = _.find(points,function(p){return p.x==xValue;},this);
   		if (chartPoint && chartPoint.y) {
   			var value = formatFn(Math.abs(chartPoint.y));
   			var storagePowerLabel = chartPoint.y>0 ? this.labels.batteryCharge : this.labels.batteryDischarge;			return '<div class='+titleCls+'><span style="float:right;"><b>'+(value+'').replace('.',SE.dSeparator)+'</b></span><span class="title-left" style="color:'+color+';">'+keyChar+'</span>'+storagePowerLabel+'</div>';	
   		} else {
   			return '';
   		}
	},
	formatAdditionalSeriesDataForTooltip:function(xValue,series,formatFn,titleCls,color,keyChar,rowLabel)
	{
		if (!series) return '';
		var chartPoint = null;
   		var points = series.data;
   		chartPoint = _.find(points,function(p){return p.x==xValue;},this);
   		if (chartPoint && chartPoint.y != null) {
   			var value = formatFn(chartPoint.y);
			var label = rowLabel || series.name;
			return '<div class='+titleCls+'><span style="float:right;"><b>'+(value+'').replace('.',SE.dSeparator)+'</b></span><span class="title-left" style="color:'+color+';">'+keyChar+'</span>'+label+'</div>';	
   		} else {
   			return '';
   		}
	},
	legendSelect:function(series,target)
	{
		if(series.length == 1)
		{
			return false;
		}
		else
		{
			var numHidden = 0;
			series.forEach(function(serie){if(serie.visible==false) numHidden++;});
			if(numHidden==(series.length-1) && target.visible==true)
			{
				return false;
			} 
		}
	},
	createSeries:function()
	{
		var series = [];
		var productionLabel = this.isPvProductionDisplayed() ? SE.labels.dboard.acProduction : SE.labels.dboard.production;
		if(SE.isPublic){
			productionLabel = SE.labels.dboard.acProduction;
		};
		
		if(this.powerData.power_chart_periodic_c && this.powerData.power_chart_periodic_c.length>0)
		{
			series.push({category:'consumption',name:this.labels.consumption,data:this.powerData.power_chart_periodic_c,color:this.panel.colors.consumption});
		}

				if(this.powerData.power_chart_periodic_vt && this.powerData.power_chart_periodic_vt.length>0)
		{
			var voltheraLabel = this.labels.volthera || 'Volthera';
			series.push({category:'volthera',name:voltheraLabel,data:this.powerData.power_chart_periodic_vt,color:this.panel.colors.volthera});
		}		
	
		if(this.forceHideUtilMeasures !== true){
			series.push({category:'production',name:productionLabel,data:this.powerData.power_chart_periodic,color:this.panel.colors.production,visible:!this.isPvProductionDisplayed()});
		}

		if(this.isPvProductionDisplayed())
		{
			series.push({category:'pvProduction',name:this.labels.pvProduction,data:this.powerData.power_chart_periodic_pv,color:this.panel.colors.pvProduction});
		}

	
		if(this.powerData.power_chart_periodic_sc && this.powerData.power_chart_periodic_sc.length>0)
		{
			series.push({category:'selfconsumption',name:this.labels.selfConsumption,data:this.powerData.power_chart_periodic_sc,color:this.panel.colors.selfConsumption});
		}

		series.push({category:'import',name:this.labels.import,data:this.powerData.power_chart_periodic_import,visible: false,showInLegend: false});
		series.push({category:'export',name:this.labels.export,data:this.powerData.power_chart_periodic_export,visible: false,showInLegend: false});

		return series;	
	},
	isPvProductionDisplayed:function()
	{
		if (this.powerData.power_chart_periodic_pv)
    		return this.powerData.power_chart_periodic_pv.length>0;
    	else
    		return false;
	},
	periodicLabel:function(x,y,category,name)
	{
		if(this.powerData.power_chart_periodic_c || this.powerData.power_chart_periodic_sc || this.powerData.power_chart_periodic_vt) var hasMeters = true; else var hasMeters = false;
		var label = SE.ChartLabel.getLabel(hasMeters,category,this.labels.power,name);
		return label+'<br/>' + (y+'').replace('.',SE.dSeparator) + ' '+this.labels.kilo+this.labels.w+'<br/>'+(new Date(x+this.panel.GMTOffset)).format(this.fullPeriodicDateFormat);
	},
	createContainer:function(viewMode)
	{
		var isPhone = true;		var viewModeCls = viewMode;
		var masterChartHeight = this.isDoubleChartMode() ? 397 : 570;
				if(isPhone) masterChartHeight -= this.isDoubleChartMode() ? 120 : 175;
		this.energyChartContainer = new SE.HighchartContainer({
															   id:this.chartId || 'se-power-chart-periodic',
															   parent:this.panel,
															   chartConfig:this.createConfig(),
															   chartGraphicsHeight:masterChartHeight+30, 															   height:masterChartHeight
															  });
		this.syncedChartContainer = new SE.SyncedChartsPanel({
															  id:'sync-pae-'+this.chartId,
															  syncEventName:'sync-pae-periodic-chart',
															  title:this.title || this.labels.periodic,
															  syncedSeries:this.seriesSynced,
															  masterChart:this.energyChartContainer,
															  parent:this.panel,
															  isAreasplineSync:true,
															  masterSeriesToSync:_.range(this.energyChartContainer.chartConfig.series.length),
									    					  masterSeriesIndex:0,
									    					  items:[this.energyChartContainer],
									    					  autoHeight:true,
									    					  listeners:{activate:(this.setDateSelectFnName && this.panel[this.setDateSelectFnName]) || this.panel.setPeriodicSelect},
									    					  cls:'sync-chart se-power-panel-'+viewModeCls
															});

		if(this.isDoubleChartMode()) {
			var slaveChartGraphicsHeight = isPhone ? 100 : 150;
			var batteryChart = new SE.BatteryPowerChart({syncedChartContainer:this.syncedChartContainer,syncEventName:'sync-pae-periodic-chart',
				chartGraphicsHeight:slaveChartGraphicsHeight,pointStart:this.pointStart,pointEnd:this.pointEnd,
				panel:this.panel,powerData:this.powerData,labels:SE.labels.dboard,productionLabel:this.productionLabel});
			this.batteryChartContainer = batteryChart.createContainer(viewMode);
			this.syncedChartContainer.items.items.push(this.batteryChartContainer);
			this.syncedChartContainer.slaveChart = this.batteryChartContainer;
		}

		return this.syncedChartContainer;											
	},
	isDoubleChartMode:function()
	{
		return SE.Params.dayChartEnhancmentEnabled && this.powerData.power_chart_periodic_energy_level && this.powerData.power_chart_periodic_energy_level.length > 0;
	},
	export2Image:function()
	{
		this.container.export2Image();
	},
	getFormattedDateTime:function(ts)
	{  
		return (new Date(ts+this.panel.GMTOffset+1000)).format(this.fullPeriodicDateFormat);
							},
	getWeekdayLabel:function(date)
	{
		return Date.dayNames[date.getDay()];
	},
	getSyncedLabel:function(config,label,value,monthTooltipLabel,date)
	{
		var prValue = this.prData[config.x];
		prValue = SE.util.locale.format(prValue,2); 		var prLabel = this.labels.performanceRatio+' '+(prValue+'').replace('.',SE.dSeparator);
		var energyLabel = label+' '+(value+'').replace('.',SE.dSeparator)+' '+monthTooltipLabel;
		return energyLabel+'<br/>'+prLabel+'<br/>'+date;
	}	 
});	

SE.PowerPeriodicChart = Ext.extend(SE.AbsPowerPeriodicChart,
{
	legendAlign:'left',
	legendFontSize:10
});

	
					
			
SE.PrSubChart = Ext.extend(Object,
{
	constructor:function(config)
	{
		Ext.apply(this,config);
		//this.prData = this.panel.monthPR || [];
	},
	createConfig:function(params)
	{
		var _marginBottom =  100; 		var me = this;
        var prDataMax = Math.max.apply(null,this.prData);
		var prChartMax = prDataMax < 1 ? 1 : Math.min(prDataMax,2);
								var xAxisFontSize = '4px';
							var tickInterval = 0;
		if(this.prData && this.prData.length > 50) {
			tickInterval = 5;
		};
        this.prChartConfig =
        {
		    title: this.showTitle ? {
		    	text:this.labels.performanceRatio,
		    	y:0,
		    	style:{
		    		fontSize:'12px'
		    	}
		    } : {text:'',x:-500},
		    //subtitle: this.subtitle || {text:'',x:-500},
		    chart:{
		    	type:'column',
		    	backgroundColor:null,
		    	marginTop:this.marginTop || 20,
		    	marginRight:0,
		    	marginLeft:46,
		    	zoomType:this.panel.zoomType,
		    	resetZoomButton: {position: {align:'left',verticalAlign: 'top',x: 75,y: -100},relativeTo: 'chart'},//hide the zoom button
		        events:{
		        	selection:function(event){		           	
		           		Ext.Bus.fireEvent(me.syncEventName,event);		           		           	
		           	}
		        }
   	        },
		    legend:{enabled:false},
			credits:{enabled:false},
			xAxis:{
	            categories:[0],
	            gridLineColor:'#cacaca',
	            gridLineWidth:1,
		    	tickInterval: tickInterval,
	            labels:{
	            	rotation:0,
	            	formatter:function(){return this.value+1;},
	            	style:{fontSize:xAxisFontSize}
	            }
	        },
	        yAxis:
	        {
	        	title:{text:null},
	        	max:prChartMax,
	        	tickInterval: 0.5,
	        	style:{color:'#89A54E'},
	        	labels:{
	        		x: -8,
	        		formatter:function(){return this.value;}
	        	}
		    },
	        tooltip:{shared:true,positioner:function(){return {x:-1000,y:-3000};}},		    
 		    plotOptions:{
 		    	column:{
 		    		colorByPoint:true,
 		    		grouping:false,
 		    		groupPadding:0.07,
 		    		borderWidth:0
 		    	},
 		    	series:{
 		    		states:{
 		    			hover:{brightness: 0.2}
 		    		},
 		    		cursor:'pointer',
 		    		events:{
 		    			mouseOver:function(event){
 		    				SE.PrChartsUtil.onSeriesMouseOver(event,me,params);
 		    			},
 		    			click:function(event){
 		    				 		    			}
		    		}
		    	}
		    },			
			series:[
				{category:'production',name:this.productionLabel,data:this.prData,pointPadding:0.1}
			],
			colors:SE.PrChartsUtil.getPrColors(this.prData,this.panel.colors.production)
		};
		return this.prChartConfig;
	},
	createContainer:function(viewMode)
	{
		var prChartConfig = this.createConfig();
		return new SE.HighchartContainer({chartConfig:prChartConfig,parent:this.panel,//id:'pr-sub-chart',
										height:this.cHeight,chartGraphicsHeight:this.chartGraphicsHeight,class:'pr-sub-chart',
        								listeners:{activate:this.setRangeSelect},chartName:'PR'});											
	} 
});	

					
SE.EnergyTrafficSubChart = Ext.extend(Object,
{
	constructor:function(config)
	{
		Ext.apply(this,config);
	},
	createConfig:function(params)
	{
		var me = this;
		var chartConfig = new SE.ChartConfig({labels:this.labels});
								var xAxisFontSize = '4px';
							var tickInterval = 0;
		if((this.exportData && this.exportData.length > 50) || (this.importData && this.importData.length > 50)) {
			tickInterval = 5;
		};
        this.trafficChartConfig =
        {
		    title: {text:'',x:-500},
		    //subtitle: this.subtitle || {text:'',x:-500},
		    chart:{
		    	type:'column',
		    	backgroundColor:null,
		    	marginTop:30,
		    	marginRight:0,
		    	marginBottom:60,
		    	zoomType:this.panel.zoomType,
		    	resetZoomButton: {position: {align:'left',verticalAlign: 'top',x: 75,y: -100},relativeTo: 'chart'},//hide the zoom button
		        events:{
		        	selection:function(event){	           	
		           		Ext.Bus.fireEvent(me.syncEventName,event);
		           	}
		        }
   	        },
		    legend:{
		    	y: -3 ,
		    	itemStyle:
		    		{
		    			fontSize:SE.isPhone ? 10 : 12,
		    		 	fontWeight:'normal'
		    		}
		    },
			credits:{enabled:false},
			xAxis:{
/*				crosshair: {
                	width: 0,
                	color: 'gray'
            	},*/
	            categories:[0],
	            gridLineColor:'#cacaca',
	            gridLineWidth:1,
	            tickInterval: tickInterval,
	            labels:{
	            	rotation:0,
	            	formatter:function(){return this.value+1;},
	            	style:{fontSize:xAxisFontSize}
	            }
	        },
	        yAxis:
	        {
	        	title:chartConfig.y_titleConfig_wh,
	        	tickInterval: 0.5,
	        	style:{color:'#89A54E'},
	        	labels:{
	        		x: -3,
	        		formatter:function(){return this.value+' '+me.unitLabel;}
	        	}
		    },
	        tooltip:{shared:true,positioner:function(){return {x:-1000,y:-3000};}},		    
 		    plotOptions:{
 		    	column:{groupPadding:0.03,borderWidth:0},
 		    	stacking: 'normal',
 		    	shadow: false,
 		    	series:{
 		    		states:{
 		    			hover:{brightness: 0.2}
 		    		},
 		    		cursor:'pointer',
 		    		events:{
 		    			mouseOver:function(event){
 		    				SE.PrChartsUtil.onSeriesMouseOver(event,me,params);
 		    			},
 		    			click:function(event){
 		    				 		    			},
 		    			legendItemClick:function(event){
 		    				return SE.isMobile ? false : me.legendSelect(event.target.chart.series,event.target);
 		    			}
		    		}
		    	}
		    },			
			series:[
				{category:'export',name:this.labels.export,data:this.exportData,color:this.panel.colors.export,pointPadding:0.25,pointPlacement:0.1},
				{category:'import',name:this.labels.import,data:this.importData,color:this.panel.colors.import,pointPadding:0.25,pointPlacement:-0.11}
			]
		};
		return this.trafficChartConfig;
	},
	createContainer:function(viewMode)
	{
		var me = this;
		return new SE.HighchartContainer({chartConfig:this.createConfig(),parent:this.panel,class:'energy-traffic-sub-chart',
										height:this.cHeight,chartGraphicsHeight:this.chartGraphicsHeight,
        								listeners:{activate:this.setRangeSelect},chartName:'traffic'});											
	},
	legendSelect:function(series,target)
	{
		if(series.length == 1)
		{
			return false;
		}
		else
		{
			var numHidden = 0;
			series.forEach(function(serie){if(serie.visible==false) numHidden++;});
			if(numHidden==(series.length-1) && target.visible==true)
			{
				return false;
			} 
		}
	},
});	

	
Ext4.define('SE.ChartUtils',
{
	extend: 'Object',
	statics: 
	{
		getSolarEdgeLogoTitle: function(style){
			var styleArg = style || "";
			var txt = "<img src='" + SE.img_url + "/logos/SolarEdge_64x13_New.png' width='64px' height='13px' style='" + styleArg + "' alt='' />";
			return {
				align:"right",
				useHTML: true,
				text: txt			
			};
		}
	}
});


SE.EnergySubChartsPanel = Ext.extend(Ext.Panel, {
	layout:'card',
    initComponent:function()
    {
        var cHeight = 200;
        var hasTraffic = (this.importData&&this.importData.length>0) || (this.exportData&&this.exportData.length>0);
        var hasPR = this.prData && this.prData.length>0;
        this.items=[];
        this.cntrs=[];
        this.btns=[];
        if(hasTraffic) {
            this.traffic = new SE.EnergyTrafficSubChart({syncedChartContainer:this.syncedChartContainer,syncEventName:this.syncEventName,
                cHeight:cHeight, chartGraphicsHeight:this.chartGraphicsHeight,importData:this.importData,exportData:this.exportData,
                panel:this.panel,labels:SE.labels.dboard,productionLabel:this.productionLabel,unitLabel:this.unitLabel,
                columnClickFn:this.columnClickFn,setRangeSelect:this.setRangeSelect});//,

            this.trafficChart = this.traffic.createContainer(this.viewMode);
            this.items.push(this.traffic);
            this.cntrs.push(this.trafficChart);
            this.btns.push(new Ext.Container({cls:'subchart-toolbar-btn subchart-toolbar-btn-on',html:this.labels.traffic,domListeners:{click:{fn:function(){this.activateTraffic();},scope:this}}}));
        }
        if(SE.permissions.ViewSitePR && hasPR) 
        {
			var billingIndx = this.panel.tabOrderArr.indexOf('billingCycle');       	
			if(SE.Params.billingData && SE.Params.billingData.performanceRatio && billingIndx >= 0 && billingIndx == this.panel.activeTab) {
				var prData = SE.Params.billingData.performanceRatio.data;
			} else {
				var prData = this.prData;				
			};
		
            this.pr = new SE.PrSubChart({syncedChartContainer:this.syncedChartContainer,syncEventName:this.syncEventName,
                cHeight:cHeight, chartGraphicsHeight:this.chartGraphicsHeight-41,showTitle:!hasTraffic,marginTop:hasTraffic ? 30 : 20,
                panel:this.panel,labels:SE.labels.dboard,productionLabel:this.productionLabel,prData:prData,
                columnClickFn:this.columnClickFn,setRangeSelect:this.setRangeSelect});//,

            this.prChart = this.pr.createContainer(this.viewMode);
            this.items.push(this.pr);
            this.cntrs.push(this.prChart);
            this.btns.push(new Ext.Container({cls:'subchart-toolbar-btn',html:this.labels.pr,domListeners:{click:{fn:function(){this.activatePR();},scope:this}}}));
        }
        this.chartsToolbar = new Ext.Container({style:'display:flex;justify-content:center;',items:this.btns});
        this.activeSlaveChart = this.trafficChart || this.prChart;
        this.createCSS();
        SE.EnergySubChartsPanel.superclass.initComponent.apply(this,arguments);
    },
    createCSS:function()
    {
        var rules = [
            '.subchart-toolbar-btn{cursor: pointer;width: 130px;text-align: center;font-size: 13px;padding: 2px;}',
            '.subchart-toolbar-btn.subchart-toolbar-btn-on{cursor: default;border-bottom: 3px solid #C00000;color: #C00000;font-weight: bold;}'
                    ];
        SE.util.CSS.addCmpRules('se-sub-chart-panel-css',rules);
    },
    getContainers:function()
    {
        return this.cntrs;
    },
    getActiveSlaveChart:function()
    {
        return this.activeSlaveChart;
    },
    getChartsToolbar:function()
    {
        return this.chartsToolbar;
    },
    activateTraffic:function()
    {
        if(this.activeSlaveChart != this.trafficChart){
            this.trafficChart.show();
            this.btns[0].addClass('subchart-toolbar-btn-on');
            this.btns[1].removeClass('subchart-toolbar-btn-on');
            this.prChart.hide();
            this.activeSlaveChart = this.trafficChart;
        }
    },
    activatePR:function()
    {
        if(this.activeSlaveChart != this.prChart){
            this.trafficChart.hide();
            this.btns[0].removeClass('subchart-toolbar-btn-on');
            this.btns[1].addClass('subchart-toolbar-btn-on');
            this.prChart.show();
            this.activeSlaveChart = this.prChart;
        }
    }
});

	
Ext4.define('SE.ChartUtils',
{
	extend: 'Object',
	statics: 
	{
		getSolarEdgeLogoTitle: function(style){
			var styleArg = style || "";
			var txt = "<img src='" + SE.img_url + "/logos/SolarEdge_64x13_New.png' width='64px' height='13px' style='" + styleArg + "' alt='' />";
			return {
				align:"right",
				useHTML: true,
				text: txt			
			};
		}
	}
});


SE.AbsEnergyMonthChart = Ext.extend(Object,
{
	constructor:function(config)
	{
		Ext.apply(this,config);
		this.m_consumption = this.panel.energy_chart_month_by_day.consumption;
		this.m_production = this.panel.energy_chart_month_by_day.production;
		this.m_selfConsumption = this.panel.energy_chart_month_by_day.selfConsumption;

				this.m_volthera = this.panel.energy_chart_month_by_day.volthera;
				
		this.m_export =  this.panel.energy_chart_month_by_day.export ? this.panel.energy_chart_month_by_day.export.data : [];
		this.m_import =  this.panel.energy_chart_month_by_day.import ? this.panel.energy_chart_month_by_day.import.data : [];
		this.m_battery =  this.panel.energy_chart_month_by_day.battery;

		if(SE.Params.isDoubleChart && SE.permissions.ViewSitePR) {
			this.seriesSynced = 'production';
			this.prData = this.panel.monthPR;			};
		this.createCSS();
	},
	createConfig:function(params)
	{
				if (params && params.prMock) {
			this.m_consumption = this.m_selfConsumption = null;	

		} 
				var chartConfig = new SE.ChartConfig({labels:this.labels});
		var _marginBottom =  150; 		var me = this;
		var legendY = this.getLegendY();

		var monthMax = Math.max(this.panel.energy_chart_month_by_day_max,this.panel.energy_chart_month_by_day_max_c,this.panel.energy_chart_month_by_day_max_sc);
		SE.currntMonthUM = this.panel.month_uom;

        this.monthChartConfig =
        {
		    chart:{type:'column',backgroundColor:null,marginRight:0,marginBottom:_marginBottom,marginTop:40,zoomType:this.panel.zoomType,
		    	   resetZoomButton: {position: {align:'left',verticalAlign: 'top',x: 55,y: 5},relativeTo: 'chart'},
		           events:{selection:function(event){		           	
		           	Ext.Bus.fireEvent('sync-pae-month-chart',event);		           		           	
		           	me.panel.dateMonthRangeZoom(event);}}
   	              },
		    legend:{verticalAlign:'bottom',align:this.legendAlign,x:0,y:legendY,floating: true,borderWidth:0,itemStyle:{fontSize:this.legendFontSize,fontWeight:'normal'}},
			credits:{enabled:false},
			title:{text:'',x:-500},
			subtitle: SE.ChartUtils.getSolarEdgeLogoTitle(),
			xAxis:{/*crosshair:{width: 0,color: 'gray'},*/categories:[0],gridLineColor:'#cacaca',
					gridLineWidth:1,labels:{rotation:0,formatter:function(){return this.value+1;},style:{fontSize:this.xAxisFontSize}}},
	        yAxis:{title:chartConfig.y_titleConfig_wh,max:monthMax,style:{color:'#89A54E'},labels:{x: -3,formatter:function(){return this.value +' '+me.panel.resolveEnergyUnit(SE.currntMonthUM);}}},
 			tooltip:{borderColor:'gray',useHTML:true,shared:true,positioner:function(x,y,point){
	        		return  {x:40,y:40};     				},formatter: function() {
				           var date = me.getLookupedDate(this);
				           var showPrData = me.syncedChartContainer.subChartsPanel && me.syncedChartContainer.subChartsPanel.getActiveSlaveChart().chartName==='PR';				           
				           var tooltipText = '<b class="tooltip-title">'+me.labels.energyOverview+' - '+me.getWeekdayLabel(date)+', '+me.getFormattedDate(date)+'</b></br>';
				           var seriesArr = me.syncedChartContainer.masterChart.chart.series;
				           if(me.panel.isMSCMode) {
				           		var showIndentedSubSeriesData = me.syncedChartContainer.subChartsPanel && me.syncedChartContainer.subChartsPanel.getActiveSlaveChart().chartName==='traffic';
				           		tooltipText+=me.panel.formatEnergySeriesSharedTooltip(SE.currntMonthUM,seriesArr,this.x,showIndentedSubSeriesData);		
				           } else {
				           		tooltipText+=me.panel.formatEnergySeriesSharedTooltip(SE.currntMonthUM,seriesArr,this.x,false,true,false);		
				           		tooltipText+=me.panel.formatEnergySeriesSharedTooltip(SE.currntMonthUM,seriesArr,this.x,false,false,true);		
				           }
						   if (showPrData) {
								var prValue = me.prData[this.x];
								prValue = prValue!=null ? SE.util.locale.format(prValue,2) : SE.labels.dboard.na;
								var prText='<div class="tooltip-series-title">'+me.labels.performanceRatio+'<span style="float:right;"><b>'+(prValue+'').replace('.',SE.dSeparator)+'</b></span></div>'
				           		tooltipText+=prText;
				       	   }
	           			   return '<div style="display:flex; flex-direction:column;">' + tooltipText + '</div>';
	           			   
			    		}
			    },
 		    plotOptions:{column:{grouping:false,groupPadding:0.07,borderWidth:0},stacking: 'normal',shadow: false,
 		    			 series:{states:{hover:{brightness: 0.2}},
 		    			 		 cursor:'pointer',
 		    			 		 events:{mouseOver:function(event){
								 		    			 		    		    			 		 								  },
 		    			 		 		 click:function(event){
							 		    			 		    		    			 		 		 					  },
 		    			 		 		
		    			 		 legendItemClick:function(event){return SE.isMobile ? false : me.legendSelect(event.target.chart.series,event.target);}
		    			 				}
		    					}
		    			},
			series:this.createSeries()
		};
		if(params && params.prMock) 
		{
			this.monthChartConfig.tooltip = false;
		} 
		return this.monthChartConfig;
	},
	legendSelect:function(series,target)
	{
		if(series.length == 1)
		{
			return false;
		}
		else
		{
			var numHidden = 0;
			series.forEach(function(serie){if(serie.visible==false) numHidden++;});
			if(numHidden==(series.length-1) && target.visible==true)
			{
				return false;
			} 
		}
	},
	createSeries:function()
	{
		var series = [];
		if(this.m_consumption)
		{
			series.push({id:'consumption',category:'consumption',stack:'consumption',name:this.labels.consumption,data:this.m_consumption.data,color:this.panel.colors.consumption,pointPadding:0.35,pointPlacement:0.14});
		}	
		if(this.m_import && this.m_import.length>0){
			series.push({visible:false,isSubSeries:true,parentSeries:'consumption',showInLegend:false,id:'import',category:'import',stack:'consumption',name:this.labels.import,data:this.m_import,color:this.panel.colors.import});
		}	
		if(this.m_production && this.forceHideUtilMeasures !== true)
		{
			var productionConfig = {id:'production',category:'production',stack:'production',name:this.productionLabel,data:this.m_production.data,color:this.panel.colors.production,pointPadding:0.1};
						if(this.m_consumption || this.m_selfConsumption || this.m_volthera) Ext.apply(productionConfig,{pointPadding:0.35,pointPlacement:-0.13});

			series.push(productionConfig);
		}
		if(this.m_export && this.m_export.length>0){
			series.push({visible:false,isSubSeries:true,parentSeries:'production',showInLegend:false,id:'export',category:'export',stack:'production',name:this.labels.export,data:this.m_export,color:this.panel.colors.export});
		}
		if(this.m_selfConsumption)
		{ 
			if(this.m_production && this.m_production.roundValueTotal>0)
				this.m_selfConsumption_rate = SE.util.locale.convertFloat(this.m_selfConsumption.roundValueTotal/this.m_production.roundValueTotal*100,2)+'%';
			else
				this.m_selfConsumption_rate = '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0';
			series.push({id:'selfconsumption',parentSeries:'consumption',category:'selfconsumption',stack:'selfconsumption',name:this.labels.selfConsumption,data:this.m_selfConsumption.data,color:this.panel.colors.selfConsumption,pointPadding:0.35});			
		}
		
				if(this.m_volthera)
		{ 
			if(this.m_production && this.m_production.roundValueTotal>0)
				this.m_volthera_rate = SE.util.locale.convertFloat(this.m_volthera.roundValueTotal/this.m_production.roundValueTotal*100,2)+'%';
			else
				this.m_volthera_rate = '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0';
			var voltheraLabel = this.labels.volthera || 'Volthera';
			series.push({id:'volthera',parentSeries:'production',category:'volthera',stack:'volthera',name:voltheraLabel,data:this.m_volthera.data,color:this.panel.colors.volthera,pointPadding:0.35});			
		}
				
		if(this.m_battery){
			series.push({visible:SE.isMobile,isSubSeries:true,parentSeries:'selfconsumption',id:'battery',category:'battery',stack:'selfconsumption',name:this.labels.fromBattery,data:this.m_battery.data,color:this.panel.colors.battery,pointPadding:0.35});
		}	
		return series;	
	},
	monthLabel:function(config,monthTooltipLabel)
	{
		var category = config.series.userOptions.category;
		var name = config.series.name;
				if(this.m_consumption || this.m_selfConsumption || this.m_volthera) var hasMeters = true; else var hasMeters = false;
		var label = SE.ChartLabel.getLabel(hasMeters,category,this.labels.energy,name);
		var value = config.y;
		var date = this.getFormattedDate(this.getLookupedDate(config));
		if(SE.Params.isDoubleChart && SE.permissions.ViewSitePR) {
			var showPrOnTooltip = category === this.seriesSynced;
			if (showPrOnTooltip) {
				return this.getSyncedLabel(config,label,value,monthTooltipLabel,date);
			} else {
				return label+'<br/>'+(value+'').replace('.',SE.dSeparator)+' '+monthTooltipLabel+'<br/>'+date;
			}
		}
		else {
			return label+'<br/>'+(value+'').replace('.',SE.dSeparator)+' '+monthTooltipLabel+'<br/>'+date;
		}
	},
	getLookupedDate:function(config)
	{
		var month = this.panel.end_month.month;
	    var year = this.panel.end_month.year;
	    return new Date(year,month,config.x+1);
	},
	getFormattedDate:function(date)
	{  
		var monthDateFormat = (new Ext.DatePicker()).format;
		return date.format(monthDateFormat);
	},
	getWeekdayLabel:function(date)
	{
		return Date.dayNames[date.getDay()];
	},
	getSyncedLabel:function(config,label,value,monthTooltipLabel,date)
	{
		var prValue = this.prData[config.x];
		prValue = SE.util.locale.format(prValue,2);//SE.util.locale.convertFloat(prValue,3);
		var prLabel = this.labels.performanceRatio+' '+(prValue+'').replace('.',SE.dSeparator);
		var energyLabel = label+' '+(value+'').replace('.',SE.dSeparator)+' '+monthTooltipLabel;
		return energyLabel+'<br/>'+prLabel+'<br/>'+date;
	},
	createCSS:function()
	{
		var isPhone = true;//VM
		var rules = ['#power_chart_month svg{overflow: visible !important;}',
					  '.sync-chart .x-panel-body{overflow: hidden !important}',
					 '#power_chart_month .highcharts-container{overflow: visible !important;z-index:20 !important;}',
					 '.tooltip-series-title{margin-top:6px;}',
					 '.tooltip-series-title .title-left{float:left;}',
					 '.tooltip-subseries-title .title-left{float:left;padding-left:15px;}'];

		if(isPhone){
			rules.push('.tooltip-title,.tooltip-series-title,.tooltip-subseries-title{font-size:8px;margin-top:1px;}');
			rules.push('.tooltip-series-title{min-width:160px;}');
		} else {
			rules.push('.tooltip-series-title{min-width:240px;}');
		}
		SE.util.CSS.addCmpRules('se-pae-month-chart-css',rules);
	},
	createContainer:function(viewMode)
	{
		var powerPanelCls = 'se-power-panel-full';
		var isPhone = true;//VM
		var hasPR = false && false; //VM
		var mHights = this.panel.getEnergyChartHeights(isPhone,this.isDoubleChartMode(),hasPR);
		this.energyChartContainer = new SE.HighchartContainer({
															   id:'power_chart_month',
															   parent:this.panel,
															   chartConfig:this.createConfig(),
															   chartGraphicsHeight:mHights.masterChartGraphicsHeight,
															   height:mHights.masterChartHeight
															  });
		this.syncedChartContainer = new SE.SyncedChartsPanel({
															  id:'sync-pae-month-chart',
															  syncEventName:'sync-pae-month-chart',
															  title:this.labels.month,
															  syncedSeries:this.seriesSynced,
															  masterChart:this.energyChartContainer,
															  parent:this.panel,
															  masterSeriesIndex:this.getMasterSeriesIndex(),
															  masterSeriesToSync:_.range(this.energyChartContainer.chartConfig.series.length),
									    					  items:[this.energyChartContainer],
									    					  autoHeight:true,
									    					  listeners:{activate:this.panel.setMonthSelect},
									    					  cls:isPhone ?'sync-chart se-power-panel-fullDouble':'sync-chart ' + powerPanelCls
															});
		if(this.isDoubleChartMode()){	
			var slaveChartGraphicsHeight = isPhone ? 130 : 170;
			var subChartsPanel = new SE.EnergySubChartsPanel({syncedChartContainer:this.syncedChartContainer,syncEventName:'sync-pae-month-chart',
				chartGraphicsHeight:slaveChartGraphicsHeight,importData:this.m_import,exportData:this.m_export,viewMode:viewMode,
				panel:this.panel,labels:SE.labels.dboard,productionLabel:this.productionLabel,prData:this.panel.monthPR,unitLabel:this.panel.resolveEnergyUnit(this.panel.month_uom),
				columnClickFn:this.panel.getSelectedDay,setRangeSelect:this.panel.setMonthSelect});
			var btns = subChartsPanel.getChartsToolbar();
			var subContainers= subChartsPanel.getContainers();
			if(btns.items.length > 1) this.syncedChartContainer.items.items=this.syncedChartContainer.items.items.concat(btns);
			this.syncedChartContainer.items.items=this.syncedChartContainer.items.items.concat(subContainers);
			this.syncedChartContainer.subChartsPanel = subChartsPanel;
			this.syncedChartContainer.slaveChart = subChartsPanel.getActiveSlaveChart();
		}
		return this.syncedChartContainer;											
	},
	export2Image:function()
	{
		this.syncedChartContainer.export2Image();
	},
	getMasterSeriesIndex:function()
	{
		//gets the index of 'production' series
		if (this.m_consumption) {
			return 1;
		} else {
			return 0;
		}
	},
	isDoubleChartMode:function()
	{
		var hasImportExport = this.m_export.length>0 || this.m_import.length>0;
		var hasPR = false && false; //VM
		return hasImportExport || hasPR;
	},
});	

SE.EnergyMonthChart = Ext.extend(SE.AbsEnergyMonthChart,
{
	legendAlign:'left',
	legendFontSize:10,
		xAxisFontSize:'4px',
		getLegendY:function()
	{
		var hasPR = SE.Params.isDoubleChart && SE.permissions.ViewSitePR;
		return hasPR ? 10 : -70;
	}
});

	
					
Ext4.define('SE.ChartUtils',
{
	extend: 'Object',
	statics: 
	{
		getSolarEdgeLogoTitle: function(style){
			var styleArg = style || "";
			var txt = "<img src='" + SE.img_url + "/logos/SolarEdge_64x13_New.png' width='64px' height='13px' style='" + styleArg + "' alt='' />";
			return {
				align:"right",
				useHTML: true,
				text: txt			
			};
		}
	}
});



SE.AbsEnergyYearChart = Ext.extend(Object,
{
	constructor:function(config)
	{
		Ext.apply(this,config);
		this.yearMax = Math.max(this.panel.energy_chart_year_by_month_max,this.panel.energy_chart_year_by_month_max_c+this.panel.energy_chart_year_by_month_max_sc);
		var yearData = this.panel.energy_chart_year_by_month;
		this.y_consumption = yearData ? yearData.consumption : null;
		this.y_production = yearData ? yearData.production : null;
		this.y_selfConsumption = yearData ? yearData.selfConsumption : null;

				this.y_volthera = yearData ? yearData.volthera : null;
		
		this.y_export = yearData && yearData.export ? yearData.export.data : [];
		this.y_import = yearData && yearData.import ? yearData.import.data : [];
		this.y_battery = yearData ? yearData.battery : null;
		this.createCSS();
		if(SE.Params.isDoubleChart && SE.permissions.ViewSitePR){
			this.seriesSynced = 'production';
			this.prData = this.panel.yearPR;
		};
	},
	createCSS:function()
	{
		var rules = ['#power_chart_year svg{overflow: visible !important;}',
					 '#power_chart_year .highcharts-container{overflow: visible !important;z-index:20 !important;}'];
		SE.util.CSS.addCmpRules('se-pae-year-chart-css',rules);
	},
	createConfig:function()
	{
		var chartConfig = new SE.ChartConfig({labels:this.labels});	
		var _marginBottom =  150; 		var me = this;
		var legendY = this.getLegendY();
		this.yearChartConfig=
		{
		    chart:{type:'column',backgroundColor:null,marginRight:0,marginBottom:_marginBottom,marginTop:40,zoomType:this.panel.zoomType,
		    	   resetZoomButton: {position: {align:'left',verticalAlign: 'top',x: 55,y: 5},relativeTo: 'chart'},
		    	   events:{selection:function(event){Ext.Bus.fireEvent('sync-pae-year-chart',event); me.panel.dateYearRangeZoom(event);}}},
		    legend:{verticalAlign:'bottom',align:this.legendAlign,x:0,y:legendY,floating:true,borderWidth:0,itemStyle:{fontSize:this.legendFontSize,fontWeight:'normal'}},
			credits:{enabled:false},
			title:{text:'',x:-500},
			subtitle: SE.ChartUtils.getSolarEdgeLogoTitle(),
			xAxis:{/*crosshair: {width: 1,color: 'gray'},*/
				   categories:this.panel.year_categories,
				   gridLineColor:'#cacaca',
				   gridLineWidth:1},
	        yAxis:{title:chartConfig.y_titleConfig_wh,max:this.yearMax,style:{color: '#89A54E'},labels:{x: -3, formatter:function(){return this.value +' '+me.panel.resolveEnergyUnit(me.panel.year_uom);}}},
	        tooltip:{hideDelay:2000,borderColor:'gray',useHTML:true,shared:true,positioner:function(x,y,point){
	        		return  {x:40,y:40};     				},formatter: function() {
				           var date = me.getLookupedDate(this);
				           var showPrData = me.syncedChartContainer.subChartsPanel && me.syncedChartContainer.subChartsPanel.getActiveSlaveChart().chartName==='PR';
				           var tooltipText = '<b>'+me.labels.energyOverview+' - '+this.x+', '+me.panel.end_year.year+'</b></br>';
				           var seriesArr = me.syncedChartContainer.masterChart.chart.series;
				           var monthIndex = me.getMonthIndex(this.x);
				           if(me.panel.isMSCMode) {
				           		var showIndentedSubSeriesData = me.syncedChartContainer.subChartsPanel && me.syncedChartContainer.subChartsPanel.getActiveSlaveChart().chartName==='traffic';
				           		tooltipText+=me.panel.formatEnergySeriesSharedTooltip(me.panel.year_uom,seriesArr,monthIndex,showIndentedSubSeriesData);		
				           } else {
				           		tooltipText+=me.panel.formatEnergySeriesSharedTooltip(me.panel.year_uom,seriesArr,monthIndex,false,true,false);		
				           		tooltipText+=me.panel.formatEnergySeriesSharedTooltip(me.panel.year_uom,seriesArr,monthIndex,false,false,true);		
				           }
						   if (showPrData) {
								var prValue = me.prData[me.getMonthIndex(this.x)];
								prValue = prValue!=null ? SE.util.locale.format(prValue,2) : SE.labels.dboard.na;
								var prText='<div class="tooltip-series-title">'+me.labels.performanceRatio+'<span style="float:right;"><b>'+(prValue+'').replace('.',SE.dSeparator)+'</b></span></div>'
				           		tooltipText+=prText;
				       	   }
	           			   return '<div style="display:flex; flex-direction:column;">' + tooltipText + '</div>';
			    		}
			    },
		    plotOptions:{column:{grouping:false,
		    					 groupPadding:0.07,
		    					 borderWidth:0},
		    					 series:{cursor:'pointer',
		    					 		 color:SE.CSSColor.gc1(),
		    					 		 events:{mouseOver:function(event)
		    					 		 				{
			    					 		 						    					 		 				},
		    					 		 		 click:function(event)
		    					 		 		 		{
																	    					 		 		 		},
		    					 legendItemClick:function(event){return SE.isMobile ? false : me.legendSelect(event.target.chart.series,event.target);}}}},
			series:this.createSeries()
		};
		return this.yearChartConfig;
	},
	getMonthIndex:function(selected)
	{
		var monthLabel;
		for(var m in SE.labels.MonthList) if(SE.labels.MonthList[m]==selected) monthLabel = m;
		return ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"].indexOf(monthLabel);
	},
	legendSelect:function(series,target)
	{
		if(series.length == 1)
		{
			return false;
		}
		else
		{
			var numHidden = 0;
			series.forEach(function(serie){if(serie.visible==false) numHidden++;});
			if(numHidden==(series.length-1) && target.visible==true)
			{
				return false;
			} 
		}
	},
	calcPercentage:function(total,part)
	{
		return total > 0 ? (part / total * 100).toFixed(1) : '--';
	},
	createSeries:function()
	{
		var me = this;
		var series = [];
		if(this.y_consumption)
		{
			series.push({category:'consumption',name:this.labels.consumption,data:this.y_consumption.data,color:this.panel.colors.consumption,pointPadding:0.35,pointPlacement:0.14});
		}
		if(this.y_import && this.y_import.length>0){
			series.push({visible:false,parentSeries:'consumption',isSubSeries:true,showInLegend:false,id:'import',category:'import',stack:'consumption',name:this.labels.import,data:this.y_import,color:this.panel.colors.import});
		}	
		if(this.y_production && this.forceHideUtilMeasures !== true)
		{
			var productionConfig = {category:'production',name:this.productionLabel,data:this.y_production.data,color:this.panel.colors.production,pointPadding:0.1};
						if(this.y_consumption || this.y_selfConsumption || this.y_volthera) Ext.apply(productionConfig,{pointPadding:0.35,pointPlacement:-0.13});
			series.push(productionConfig);
		}
		if(this.y_export && this.y_export.length>0){
			series.push({visible:false,parentSeries:'production',isSubSeries:true,showInLegend:false,id:'export',category:'export',stack:'production',name:this.labels.export,data:this.y_export,color:this.panel.colors.export});
		}
		if(this.y_selfConsumption)
		{
			if(this.y_production && this.y_production.roundValueTotal>0)
				this.y_selfConsumption_rate = SE.util.locale.convertFloat(this.y_selfConsumption.roundValueTotal/this.y_production.roundValueTotal*100,2)+'%';
			else
				this.y_selfConsumption_rate = '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0';		
			series.push({category:'selfconsumption',parentSeries:'consumption',name:this.labels.selfConsumption,data:this.y_selfConsumption.data,color:this.panel.colors.selfConsumption,pointPadding:0.35});
		}

				if(this.y_volthera)
		{
			if(this.y_production && this.y_production.roundValueTotal>0)
				this.y_volthera_rate = SE.util.locale.convertFloat(this.y_volthera.roundValueTotal/this.y_production.roundValueTotal*100,2)+'%';
			else
				this.y_volthera_rate = '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0';		
			var voltheraLabel = this.labels.volthera || 'Volthera';
			series.push({category:'volthera',parentSeries:'production',name:voltheraLabel,data:this.y_volthera.data,color:this.panel.colors.volthera,pointPadding:0.35});
		}		

		if(this.y_battery){
			series.push({visible:SE.isMobile,parentSeries:'selfconsumption',isSubSeries:true,id:'battery',category:'battery',stack:'selfconsumption',name:this.labels.fromBattery,data:this.y_battery.data,color:this.panel.colors.battery,pointPadding:0.35});
		}
		return series;
	},
	yearLabel:function(config,yearTooltipLabel)
	{
		var category = config.series.userOptions.category;
		var name = config.series.name;
				if(this.y_consumption || this.y_selfConsumption || this.y_volthera) var hasMeters = true; else var hasMeters=false; 
		var label = SE.ChartLabel.getLabel(hasMeters,category,this.labels.energy,name);
	    var month = this.panel.end_year.month;
	    var year = this.panel.end_year.year;    
		var value = config.y;
		if(SE.Params.isDoubleChart && SE.permissions.ViewSitePR){	
			var showPrOnTooltip = category === this.seriesSynced;
			if (showPrOnTooltip) {
				return this.getSyncedLabel(config,label,value,yearTooltipLabel,year);
			} else {
				return label+'<br/>'+(value+'').replace('.',SE.dSeparator)+' '+yearTooltipLabel+'<br/>'+config.x+' '+year;
			}
		} else {
			return label+'<br/>'+(value+'').replace('.',SE.dSeparator)+' '+yearTooltipLabel+'<br/>'+config.x+' '+year;
		};
	},
	getLookupedDate:function(config)
	{
		var month = this.panel.end_year.month;
	    var year = this.panel.end_year.year;
	    return new Date(year,month,config.x+1);
	},
	getSyncedLabel:function(config,label,value,yearTooltipLabel,year)
	{
		var prIndex = this.panel.year_categories.indexOf(config.x);
		var prValue = this.prData[prIndex];
		prValue = SE.util.locale.format(prValue,2);//  SE.util.locale.convertFloat(prValue,3);
		var prLabel = this.labels.performanceRatio+' '+(prValue+'').replace('.',SE.dSeparator);
		var energyLabel = label+' '+(value+'').replace('.',SE.dSeparator)+' '+yearTooltipLabel;
		return energyLabel+'<br/>'+prLabel+'<br/>'+config.x+' '+year;
	},
	createContainer:function(viewMode)
	{	
		var powerPanelCls = 'se-power-panel-full';
		var isPhone = true;//VM
		var hasPR = SE.Params.isDoubleChart && SE.permissions.ViewSitePR;
		var mHights = this.panel.getEnergyChartHeights(isPhone,this.isDoubleChartMode(),hasPR);		
		this.energyChartContainer = new SE.HighchartContainer({
															   id:'power_chart_year',
															   parent:this.panel,
															   chartConfig:this.createConfig(),
															   chartGraphicsHeight:mHights.masterChartGraphicsHeight,
															   height:mHights.masterChartHeight
															  });
		this.syncedChartContainer = new SE.SyncedChartsPanel({
															  id:'sync-pae-year-chart',
															  syncEventName:'sync-pae-year-chart',
															  title:this.labels.year,
															  syncedSeries:this.seriesSynced,
															  masterChart:this.energyChartContainer,
															  parent:this.panel,
															  masterSeriesIndex:this.getMasterSeriesIndex(),
															  masterSeriesToSync:_.range(this.energyChartContainer.chartConfig.series.length),
									    					  items:[this.energyChartContainer],
									    					  autoHeight:true,
									    					  listeners:{activate:this.panel.setYearSelect},
									    					  cls: 'sync-chart se-power-panel-fullDouble' 															});
		if(this.isDoubleChartMode()){	
			var slaveChartGraphicsHeight = isPhone ? 130 : 170;
			var subChartsPanel = new SE.EnergySubChartsPanel({syncedChartContainer:this.syncedChartContainer,syncEventName:'sync-pae-year-chart',
				chartGraphicsHeight:slaveChartGraphicsHeight,importData:this.y_import,exportData:this.y_export,viewMode:viewMode,
				panel:this.panel,labels:SE.labels.dboard,productionLabel:this.productionLabel,prData:this.panel.yearPR,unitLabel:this.panel.resolveEnergyUnit(this.panel.year_uom),
				columnClickFn:this.panel.getSelectedMonth,setRangeSelect:this.panel.setYearSelect});
			var btns = subChartsPanel.getChartsToolbar();
			var subContainers= subChartsPanel.getContainers();
			if(btns.items.length > 1) this.syncedChartContainer.items.items=this.syncedChartContainer.items.items.concat(btns);
			this.syncedChartContainer.items.items=this.syncedChartContainer.items.items.concat(subContainers);
			this.syncedChartContainer.subChartsPanel = subChartsPanel;
			this.syncedChartContainer.slaveChart = subChartsPanel.getActiveSlaveChart();
		}
		return this.syncedChartContainer;											
	},
	export2Image:function()
	{
		this.container.export2Image();
	},
	getMasterSeriesIndex:function()
	{
		//gets the index of 'production' series
		if (this.y_consumption) {
			return 1;
		} else {
			return 0;
		}
	},
	isDoubleChartMode:function()
	{
		var hasImportExport = this.y_export.length>0 || this.y_import.length>0;
		var hasPR = SE.Params.isDoubleChart && SE.permissions.ViewSitePR; //VM
		return hasImportExport || hasPR;
	} 
});	

SE.EnergyYearChart = Ext.extend(SE.AbsEnergyYearChart,
{
	legendAlign:'left',
	legendFontSize:10,
	getLegendY:function()
	{
		var hasPR = SE.Params.isDoubleChart && SE.permissions.ViewSitePR; //VM
		return hasPR ? 10 : -70;
	}
});

 	if(!SE.isMobile)
{
	SE.Export2Excel = Ext.extend(Object,
	{
		constructor:function(config)
		{
			Ext.apply(this,config);
			this.create();
		},
		create:function()
		{
			this.export2ExcelBtn = new SE.Button(
			{
				width:24,
			    iconCls:'export_csv_btn',
			    borderColor:'#fff',
			    boxShadow:'',
				basicColor:'#fff',
				endColor:'#fff',
			    renderTo:this.panel.id,
			    style:SE.Params.hasLayoutZone?'position:absolute;top:3px;left:878px;':'position:absolute;top:3px;left:591px;',
			    tooltip:{title:'',text:SE.labels.Base.exportCSV},
			    scope:this,
			    handler:this.export
			});
		},
		export:function()
		{
			if(this.panel.energy_chart_month_by_day){
				this.m_consumption = this.panel.energy_chart_month_by_day.consumption;
				this.m_selfConsumption = this.panel.energy_chart_month_by_day.selfConsumption;
								this.m_volthera = this.panel.energy_chart_month_by_day.volthera;
			}
			if(this.panel.energy_chart_year_by_month){
				this.y_consumption = this.panel.energy_chart_year_by_month.consumption;
				this.y_selfConsumption = this.panel.energy_chart_year_by_month.selfConsumption;
								this.y_volthera = this.panel.energy_chart_year_by_month.volthera;
			}
	
			switch(this.panel.tabPanel.activeTab.id)
			{
				case 'sync-pae-se-power-chart-day':
				var type = 'Power';
				var timeUnit = 2;
				var start = this.panel.org_data.dataStartDate;
				var end = this.panel.org_data.dataEndDate;
				if(this.panel.power_chart_periodic_c || this.panel.power_chart_periodic_sc) var hasMeters = true; else var hasMeters = false;
				break;

				case 'sync-pae-se-power-chart-week':
				var type = 'Power';
				var timeUnit = 2;
				var start = this.panel.org_data.dataStartDate;
				var end = this.panel.org_data.dataEndDate;
				if(this.panel.power_chart_periodic_c || this.panel.power_chart_periodic_sc) var hasMeters = true; else var hasMeters = false;
				break;
	
				case 'sync-pae-month-chart':
				var type = 'Energy';
				var timeUnit = 4;
				var year = this.panel.end_month.year
				var month = this.panel.end_month.month
				var start = Date.UTC(year,month,1);
				var end = Date.UTC(year,month+1,1)-1;
								if(this.m_consumption || this.m_selfConsumption || this.m_volthera) var hasMeters = true; else var hasMeters = false; 
				break;

				case 'sync-pae-billing-chart':
				if(SE.Params.billingCycle != null) {
					var type = 'Energy';
					var timeUnit = 6;
					if(SE.Params.billingCycle.timeUnit == 'DAY') {
						timeUnit = 4;
					}	
					var startDate = moment(SE.Params.billingCycle.startTime);
					var start = Date.UTC(startDate.year(),startDate.month(),startDate.date());
					var endDate = moment(SE.Params.billingCycle.endTime);
					var end = Date.UTC(endDate.year(),endDate.month(),endDate.date())+1;
										if(SE.Params.billingData.consumption || SE.Params.billingData.selfConsumption || SE.Params.billingData.volthera) var hasMeters = true; else var hasMeters = false; 
				} else {
					var type = 'Energy';
					var timeUnit = 4;
					var year = this.panel.end_month.year
					var month = this.panel.end_month.month
					var start = Date.UTC(year,month,1);
					var end = Date.UTC(year,month+1,1)-1;
										if(this.m_consumption || this.m_selfConsumption || this.m_volthera) var hasMeters = true; else var hasMeters = false; 				
				}	
				break;
	
				case 'sync-pae-year-chart':
				var type = 'Energy';
				var timeUnit = 6;
				var year = parseInt(Ext.getCmp('selectYear2').getValue());
				var start = Date.UTC(year,0,1);
				var end = Date.UTC(year+1,0,1)-1;
								if(this.y_consumption || this.y_selfConsumption || this.y_volthera) var hasMeters = true; else var hasMeters=false;
				break;
	
				case 'sync-pae-total-chart':
				var type = 'Energy';
				var timeUnit = 7;
				var year = parseInt(Ext.getCmp('selectYear2').getValue());
				var start = Date.UTC(year,0,1);
				var end = Date.UTC(year+1,0,1)-1;
								if(this.y_consumption || this.y_selfConsumption || this.y_volthera) var hasMeters = true; else var hasMeters=false; 
				break;
			}
			var exportLink = SE.contex_url+'/p/charts/'+SE.Params.fieldId+'/chartExport?st='+start+'&et='+end+'&fid='+SE.Params.fieldId+'&timeUnit='+timeUnit+'&pn0='+type+'&id0=0&t0=0&hasMeters='+hasMeters;
	    	window.location = exportLink;	
		},
		hideExport2Excel:function()
		{
			this.export2ExcelBtn.hide();
		},
		showExport2Excel:function()
		{
			this.export2ExcelBtn.show();
		}
	});	
}
else
{
	SE.Export2Excel = Ext.extend(Object,
	{
		export2Excel:Ext.emptyFn,
		hideExport2Excel:Ext.emptyFn,
		showExport2Excel:Ext.emptyFn	
	});
};	
Ext.apply(Ext.form.VTypes,
{
    chart_daterange: function(val, field)
    {
        field.setMinValue(field.panel.startFieldDate);
        field.setMaxValue(field.panel.endFieldDate);
        return true;
    }
});
SE.DateSelectorPanel = Ext.extend(Ext.Panel,
{
	id:'select_panel',
	border:false,
	layout:'card',
	style:'position:absolute;left:0px;z-index:100;',//top:380px;
	defaults:
	{
		border: false,
		height:30,
		width:window.innerWidth,
				style:'text-align:center;'
	},
    initComponent:function()
    {
       	this.renderTo = this.panel.id;
		try{Ext.get('select_panel').remove();}catch(e){}
		this.cls = 'se-power-footer-'+this.viewMode;
		this.daySelectPanel = new Ext.Container();
		this.weekSelectPanel = new Ext.Container();
		this.monthSelectPanel = new Ext.Container();
		this.yearSelectPanel = new Ext.Container();
    	this.items = [this.daySelectPanel,this.weekSelectPanel,this.monthSelectPanel,this.yearSelectPanel];
		
		SE.DateSelectorPanel.superclass.initComponent.call(this);
    }
});

	
SE.DateNavigation = Ext.extend(Object,
{
	constructor:function(config)
	{
		this.createCSS();
		Ext.apply(this,config);
	},
	createCSS:function()
	{
        var rules = ['.chart_nav_prev, .chart_nav_next{cursor:pointer;color:#2496d2;}'
					];
	    SE.util.CSS.addCmpRules('se-date-navigation-css',rules);	
	},
	addDayNav:function(el)
	{
		Ext.DomHelper.append(el,{cls:'chart_nav',id:'chart_nav_day',
							     children:[{id:'day_left',cls:'arrow arrow_left x-column'},
										   {cls:'chart_nav_prev x-column',id:'prev_day',html:SE.labels.dboard.prevDay || 'previous day'},
										   {style:'padding-right:10px;padding-left:10px;color:#2496D2;',cls:'x-column',html:'|'},
										   {cls:'chart_nav_next x-column',id:'next_day',html:SE.labels.dboard.nextDay|| 'next day'},
										   {id:'day_right',cls:'arrow arrow_right x-column'}]});
		Ext.get('prev_day').on('click',this.panel.getPrevDay,this.panel);
		Ext.get('next_day').on('click',this.panel.getNextDay,this.panel);	
	},
	addWeekNav:function(el)
	{
		Ext.DomHelper.append(el,{cls:'chart_nav',id:'chart_nav_week',
							     children:[{id:'week_left',cls:'arrow arrow_left x-column'},
										   {cls:'chart_nav_prev x-column',id:'prev_week',html:SE.labels.dboard.prevWeek},
										   {style:'padding-right:10px;padding-left:10px;color:#2496D2;',cls:'x-column',html:'|'},
										   {cls:'chart_nav_next x-column',id:'next_week',html:SE.labels.dboard.nextWeek},
										   {id:'week_right',cls:'arrow arrow_right x-column'}]});
		Ext.get('prev_week').on('click',this.panel.getPrevWeek,this.panel);
		Ext.get('next_week').on('click',this.panel.getNextWeek,this.panel);	
	},
	addMonthNav:function(el)
	{
		Ext.DomHelper.append(el,{cls:'chart_nav',id:'chart_nav_month',
					             children:[{id:'month_left',cls:'arrow arrow_left x-column'},
										   {cls:'chart_nav_prev x-column',id:'prev_month',html:SE.labels.dboard.prevMonth},
										   {style:'padding-right:10px;padding-left:10px;',cls:'x-column',html:'|'},
										   {cls:'chart_nav_next x-column',id:'next_month',html:SE.labels.dboard.nextMonth},
										   {id:'month_right',cls:'arrow arrow_right x-column'}]});
		Ext.get('prev_month').on('click',this.panel.getPrevMonth,this.panel);
		Ext.get('next_month').on('click',this.panel.getNextMonth,this.panel);	
	},
		addYearNav:function(el)
	{
		Ext.DomHelper.append(el,{cls:'chart_nav',id:'chart_nav_year',
								 children:[{id:'year_left',cls:'arrow arrow_left x-column'},
										   {cls:'chart_nav_prev x-column',id:'prev_year',html:SE.labels.dboard.prevYear},
										   {style:'padding-right:10px;padding-left:10px;',cls:'x-column',html:'|'},
										   {cls:'chart_nav_next x-column',id:'next_year',html:SE.labels.dboard.nextYear},
										   {id:'year_right',cls:'arrow arrow_right x-column'}]});
		Ext.get('prev_year').on('click',this.panel.getPrevYear,this.panel);
		Ext.get('next_year').on('click',this.panel.getNextYear,this.panel);	
	}	   	
});	

	
SE.AbsDateRange = Ext.extend(Object, {
	constructor:function(config) {
		Ext.apply(this,config);
		this.createCSS();
		this.weekDateFormat = (new Ext.DatePicker()).format;
		this.fullWeekDateFormat = this.weekDateFormat + ' H:i:s';
		this.resetZoom();
		var dh = Ext.DomHelper;
		this.zoomDayPanel = dh.append(this.el,{cls:'se-chart-zoom ext-forced-border-box'},true);
		this.zoomWeekPanel = dh.append(this.el,{cls:'se-chart-zoom ext-forced-border-box'},true);
		this.zoomMonthPanel = dh.append(this.el,{cls:'se-chart-zoom ext-forced-border-box'},true);
		this.zoomBillingPanel = dh.append(this.el,{cls:'se-chart-zoom ext-forced-border-box'},true);		
		this.zoomYearPanel = dh.append(this.el,{cls:'se-chart-zoom ext-forced-border-box'},true);
	},
	resetZoom:function() {
		this.zoomDay = false;
		this.zoomWeek = false;
		this.zoomMonth = false;
		this.zoomBilling = false;
		this.zoomYear = false;	
	},
	hideRanges:function() {
		this.zoomBillingPanel.hide();
		this.zoomMonthPanel.hide();
		this.zoomYearPanel.hide();
		this.zoomWeekPanel.hide();
		this.zoomDayPanel.hide();	
	},
	GMTWeekDateFormat:function(time) {
		return new Date(time).format(this.weekDateFormat);
	},
	GMTFullWeekDateFormat:function(time) {
		return new Date(time).format(this.fullWeekDateFormat);
	},
	dateDayRange:function(start_day) {
		this.zoomBillingPanel.hide();
		this.zoomMonthPanel.hide();
		this.zoomYearPanel.hide();
		this.zoomWeekPanel.hide();
		this.zoomDayPanel.show();
		if(this.zoomDay==false && start_day) {
			var date = this.GMTWeekDateFormat(start_day);
			this.zoomDayPanel.update(date);
		}
	},
	dateWeekRange:function(start_week) {
		this.zoomBillingPanel.hide();
		this.zoomMonthPanel.hide();
		this.zoomYearPanel.hide();
		this.zoomWeekPanel.show();
		this.zoomDayPanel.hide();
		if(this.zoomWeek==false) {
			var start = this.GMTWeekDateFormat(start_week);
			var end = this.GMTWeekDateFormat(start_week + 7*24*60*60*1000);
			this.zoomWeekPanel.update(start+' - '+end);
		}
	},
	datePeriodicRangeZoom:function(event) {
		
	},
	dateMonthRange:function() {
		llog('@@ dateMonthRange ...');
		this.zoomBillingPanel.hide();
		this.zoomWeekPanel.hide();
		this.zoomDayPanel.hide();
		this.zoomYearPanel.hide();
		this.zoomMonthPanel.show();
		if(this.zoomMonth==false) {
			var startDate = new Date(this.panel.end_month.year,this.panel.end_month.month,1);
			var formatStartDate = Ext.util.Format.date(startDate);

			var lastDayOfMonth = SE.util.date.getLastDayOfMonth(this.panel.end_month.year,this.panel.end_month.month);
			var endDate = new Date(this.panel.end_month.year,this.panel.end_month.month,lastDayOfMonth);
			var formatEndDate = Ext.util.Format.date(endDate);

			this.zoomMonthPanel.update(formatStartDate + ' - ' + formatEndDate);
		}
	},
	dateBillingRange:function() {
		llog('@@ dateBillingRange ...');
		this.zoomBillingPanel.show();
		this.zoomWeekPanel.hide();
		this.zoomDayPanel.hide();
		this.zoomYearPanel.hide();
		this.zoomMonthPanel.hide();
		if(this.zoomBilling==false) {
						var formatStartDate = Ext.util.Format.date(SE.Params.billingCycle.startTime);
			
						var formatEndDate = Ext.util.Format.date(SE.Params.billingCycle.endTime);
			
			this.zoomBillingPanel.update(formatStartDate + ' - ' + formatEndDate);
		}
	},		
	dateMonthRangeZoom:function(event)
	{
		
	},
	dateYearRange:function() {
		llog('@@ dateYearRange...');
		this.zoomBillingPanel.hide();
		this.zoomWeekPanel.hide();
		this.zoomDayPanel.hide();
		this.zoomMonthPanel.hide();
		this.zoomYearPanel.show();
		var p_end_year = this.panel.end_year || {};
		if(this.zoomYear==false)
		{
			var start_year=Date.UTC(p_end_year.year,0,1);
			var start = this.GMTWeekDateFormat(start_year+this.panel.GMTOffset);
			var end_year = Date.UTC(p_end_year.year+1,0,1)-1;
			var end = this.GMTWeekDateFormat(end_year+this.panel.GMTOffset);
			this.zoomYearPanel.update(start+' - '+end);
		}
	},
	dateYearRangeZoom:function(event) {
		
	},
	dateTotalRange:function() {
		llog('@@ dateTotalRange...');
		this.zoomBillingPanel.hide();
		this.zoomWeekPanel.hide();
		this.zoomDayPanel.hide();
		this.zoomMonthPanel.hide();
		this.zoomYearPanel.hide();
	}	
});	

SE.DateRange = Ext.extend(SE.AbsDateRange,
{
    createCSS:function()
    {
		var rules = [
					 SE.css('.se-chart-zoom',
					 		[
							 'color:#b4b4b4',
							 'font-size:16px',
							 'font-weight:bold',
							 'text-align:center',
							 'height:40px',
							 'width:100%',
							 'padding-left:0px',
							 'padding-top:7px',
							 'position:absolute',
							 'top:68px',
							 'z-index:100',
							 'background-color:#f7f7f7'
					  		])
					 ];	
		SE.util.CSS.addCmpRules('se-date-range-css',rules);
    }
});

	
	SE.SEMInfoWindow = Ext.extend(Ext.Window,
{
    layout:'fit',
    draggable:false,
	width:930,
    height:460,
    y:50,
    modal:true,
	initComponent:function()
    {
		this.helpImg = new Ext.ux.Image({src:SE.contex_url + '/common/img/sem/' + Ext.semImg,width:this.width,height:this.height});
		this.items = [this.helpImg];
        SE.SEMInfoWindow.superclass.initComponent.call(this);	
	}
});
SE.SEMInfoBtn = Ext.extend(SE.Button,
{
	width:24,
	iconCls:'se-info-btn-icon',
	css:['.se-info-btn-icon {background: url(' + SE.img_url + '/se-info-btn-icon.png) no-repeat;}'],
	tooltip:{title:'',text:SE.labels.base.help},
    initComponent:function()
    {
		SE.util.CSS.addCmpRules('se-chart-export-button-css',this.css);
		SE.SEMInfoBtn.superclass.initComponent.call(this);
    },
	handler:function()
	{
		var info = new SE.SEMInfoWindow();
		info.show();
	}
});

	

					
	


SE.MediumBtn('CancelBtn');
Ext.reg('se-cancel-button', SE.CancelBtn);	
SE.DarkMediumBtn('SaveBtn');
Ext.reg('se-save-button', SE.SaveBtn);
SE.ChartSettingsWindow = Ext.extend(Ext.Window,
{//SE.util.getLabel('SmartDevices','deviceName')
    draggable:true,
    resizable:false,
    cls:'chart-settings-win',
	initComponent:function()
    {
		this.title = 'Dashboard Chart Settings'; 
/*		this.form = new this.formCmp({dayPlansStore:this.dayPlansStore,labels:this.labels,maxPlansAllowed:this.maxPlansAllowed,
			planNames:this.planNames,planEditing:this.plan,window:this,mode:this.mode,inUse:false,modalWindow:this,periodicStore:this.periodicStore});
		*/
		var desc = new Ext.form.DisplayField({cls:'chart-settings-desc',value:'Applies to all Dashboard charts'});
		var dayCombo = new SE.DaySelectCombo({selectedMonth:3,name:'chartDaySelect',value:7});
		this.items = [desc,dayCombo];
		//SE.mainFrame.addBlockPanel();
        SE.ChartSettingsWindow.superclass.initComponent.call(this);
	},
	getAddForm:function()
	{
		return this.form;
	}/*,
	close:function()
	{
		SE.mainFrame.removeBlockPanel();
		Ext.getBody().setOverflow('visible');
		SE.AddPeriodicPlanWindow.superclass.close.call(this);
	}*/
});


SE.ChartSettingsBtn = Ext.extend(SE.Button, 
{
	iconCls:'se-charts-settings-btn',
	css:['.se-charts-settings-btn{background-size:100%;background-image:url('+SE.contex_url+'/common/img/setting_24.png)  !important;width:16px;height:16px;}'],
	initComponent:function()
    {
		SE.util.CSS.addCmpRules('se-charts-settings-btn-css',this.css);
		SE.ChartSettingsBtn.superclass.initComponent.call(this);
    },
	handler:function()
	{
		var win = new SE.ChartSettingsWindow();
		win.show();
	}
});

				if(!SE.isMobile)
{
	SE.Export2Excel = Ext.extend(Object,
	{
		constructor:function(config)
		{
			Ext.apply(this,config);
			this.create();
		},
		create:function()
		{
			this.export2ExcelBtn = new SE.Button(
			{
				width:24,
			    iconCls:'export_csv_btn',
			    borderColor:'#fff',
			    boxShadow:'',
				basicColor:'#fff',
				endColor:'#fff',
			    renderTo:this.panel.id,
			    style:SE.Params.hasLayoutZone?'position:absolute;top:3px;left:878px;':'position:absolute;top:3px;left:591px;',
			    tooltip:{title:'',text:SE.labels.Base.exportCSV},
			    scope:this,
			    handler:this.export
			});
		},
		export:function()
		{
			if(this.panel.energy_chart_month_by_day){
				this.m_consumption = this.panel.energy_chart_month_by_day.consumption;
				this.m_selfConsumption = this.panel.energy_chart_month_by_day.selfConsumption;
								this.m_volthera = this.panel.energy_chart_month_by_day.volthera;
			}
			if(this.panel.energy_chart_year_by_month){
				this.y_consumption = this.panel.energy_chart_year_by_month.consumption;
				this.y_selfConsumption = this.panel.energy_chart_year_by_month.selfConsumption;
								this.y_volthera = this.panel.energy_chart_year_by_month.volthera;
			}
	
			switch(this.panel.tabPanel.activeTab.id)
			{
				case 'sync-pae-se-power-chart-day':
				var type = 'Power';
				var timeUnit = 2;
				var start = this.panel.org_data.dataStartDate;
				var end = this.panel.org_data.dataEndDate;
				if(this.panel.power_chart_periodic_c || this.panel.power_chart_periodic_sc) var hasMeters = true; else var hasMeters = false;
				break;

				case 'sync-pae-se-power-chart-week':
				var type = 'Power';
				var timeUnit = 2;
				var start = this.panel.org_data.dataStartDate;
				var end = this.panel.org_data.dataEndDate;
				if(this.panel.power_chart_periodic_c || this.panel.power_chart_periodic_sc) var hasMeters = true; else var hasMeters = false;
				break;
	
				case 'sync-pae-month-chart':
				var type = 'Energy';
				var timeUnit = 4;
				var year = this.panel.end_month.year
				var month = this.panel.end_month.month
				var start = Date.UTC(year,month,1);
				var end = Date.UTC(year,month+1,1)-1;
								if(this.m_consumption || this.m_selfConsumption || this.m_volthera) var hasMeters = true; else var hasMeters = false; 
				break;

				case 'sync-pae-billing-chart':
				if(SE.Params.billingCycle != null) {
					var type = 'Energy';
					var timeUnit = 6;
					if(SE.Params.billingCycle.timeUnit == 'DAY') {
						timeUnit = 4;
					}	
					var startDate = moment(SE.Params.billingCycle.startTime);
					var start = Date.UTC(startDate.year(),startDate.month(),startDate.date());
					var endDate = moment(SE.Params.billingCycle.endTime);
					var end = Date.UTC(endDate.year(),endDate.month(),endDate.date())+1;
										if(SE.Params.billingData.consumption || SE.Params.billingData.selfConsumption || SE.Params.billingData.volthera) var hasMeters = true; else var hasMeters = false; 
				} else {
					var type = 'Energy';
					var timeUnit = 4;
					var year = this.panel.end_month.year
					var month = this.panel.end_month.month
					var start = Date.UTC(year,month,1);
					var end = Date.UTC(year,month+1,1)-1;
										if(this.m_consumption || this.m_selfConsumption || this.m_volthera) var hasMeters = true; else var hasMeters = false; 				
				}	
				break;
	
				case 'sync-pae-year-chart':
				var type = 'Energy';
				var timeUnit = 6;
				var year = parseInt(Ext.getCmp('selectYear2').getValue());
				var start = Date.UTC(year,0,1);
				var end = Date.UTC(year+1,0,1)-1;
								if(this.y_consumption || this.y_selfConsumption || this.y_volthera) var hasMeters = true; else var hasMeters=false;
				break;
	
				case 'sync-pae-total-chart':
				var type = 'Energy';
				var timeUnit = 7;
				var year = parseInt(Ext.getCmp('selectYear2').getValue());
				var start = Date.UTC(year,0,1);
				var end = Date.UTC(year+1,0,1)-1;
								if(this.y_consumption || this.y_selfConsumption || this.y_volthera) var hasMeters = true; else var hasMeters=false; 
				break;
			}
			var exportLink = SE.contex_url+'/p/charts/'+SE.Params.fieldId+'/chartExport?st='+start+'&et='+end+'&fid='+SE.Params.fieldId+'&timeUnit='+timeUnit+'&pn0='+type+'&id0=0&t0=0&hasMeters='+hasMeters;
	    	window.location = exportLink;	
		},
		hideExport2Excel:function()
		{
			this.export2ExcelBtn.hide();
		},
		showExport2Excel:function()
		{
			this.export2ExcelBtn.show();
		}
	});	
}
else
{
	SE.Export2Excel = Ext.extend(Object,
	{
		export2Excel:Ext.emptyFn,
		hideExport2Excel:Ext.emptyFn,
		showExport2Excel:Ext.emptyFn	
	});
};					ChartsDataMapper = {
	energySeriesDataMap:SE.isPublic ? 
	[{series:'production',type:'systemProduction'}] :
	[
		{series:'production',type:'systemProduction'},
		{series:'consumption',type:'consumption'},
		{series:'selfConsumption',type:'selfConsumption'},
		{series:'volthera',type:'volthera'},
		{series:'export',type:'export'},
		{series:'import',type:'import'},
		{series:'battery',type:'batterySelfConsumption'}
	],
	resolveRequestParams:function(params) {
		if (params.month!=null && params.year!=null) {
			params.endDate = Date.UTC(params.year,params.month+1)-1000;
		}
		return params;
	},
	mapEnergyChartData:function(data,timeUnit,fieldStartDate,fieldEndDate) {
		switch(timeUnit) {
			case 'DAY':
				return ChartsDataMapper.mapEnergyDayChartData(data,fieldStartDate,fieldEndDate);
			case 'WEEK':
				return ChartsDataMapper.mapEnergyWeekChartData(data,fieldStartDate,fieldEndDate);
			case 'MONTH':
				return ChartsDataMapper.mapEnergyMonthChartData(data,fieldStartDate,fieldEndDate);
			case 'YEAR':	
				return ChartsDataMapper.mapEnergyYearChartData(data,fieldStartDate,fieldEndDate);
			default:
				llog("no timeunit on chart mapper!");
				return ChartsDataMapper.mapEnergyMonthChartData(data,fieldStartDate,fieldEndDate);
		}
	},
	mapEnergyDayChartData:function(data,fieldStartDate,fieldEndDate) {
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;
		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        start_day:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-1) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-1),
	        start_day_gmt:fieldEndDate ? times.dataStart : times.fieldStart,
			GMTOffset:gmtOffset,
			end_day:ChartsDataMapper.toYearMonthDay(data.dataEndDate),
			end_day_next:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,1) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,1),
			field_end:fieldEndDate,
			org_data:data
		};
		processedData = this.mapPowerData('dayData',processedData,data);
		return processedData;
	},
	mapEnergyWeekChartData:function(data,fieldStartDate,fieldEndDate) {
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;
		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        year_range:ChartsDataMapper.getYearRange(new Date(times.fieldStart),new Date(times.fieldEnd)),
	        start_week:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-7) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-7),
			start_week_gmt:fieldEndDate ? times.dataStart : times.fieldStart,
			GMTOffset:gmtOffset,
			end_week:ChartsDataMapper.toYearMonthDay(times.dataEnd),
			end_week_next:ChartsDataMapper.addDaysToDate(times.dataEnd,1),
			org_data:data
		};
		processedData = this.mapPowerData('weekData',processedData,data);
		return processedData;
	},
	mapEnergyMonthChartData:function(data,fieldStartDate,fieldEndDate) {
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;

		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        year_range:ChartsDataMapper.getYearRange(new Date(times.fieldStart),new Date(times.fieldEnd)),
	        //start_week:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-7) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-7),
			GMTOffset:gmtOffset,
			energy_chart_month_by_day:{},
			energy_chart_month_by_day_max:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'systemProduction'))),
			energy_chart_month_by_day_max_c:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'consumption'))),
			energy_chart_month_by_day_max_sc:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'selfConsumption'))),
			
						energy_chart_month_by_day_max_vt:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'volthera'))),
			
			prev_month_date:Math.max(fieldStartDate||data.fieldStartDate,data.dataStartDate-1000),
			next_month_date:Math.min(fieldEndDate||data.fieldEndDate,data.dataEndDate+1000),
			month_uom:data.measurementUnit,
			end_month:ChartsDataMapper.toYearMonthDay(times.dataEnd),
			end_month_next:ChartsDataMapper.addDaysToDate(times.dataEnd,1),
			monthPR:ChartsDataMapper.mapDateSeries(data,'performanceRatio')
		};
		ChartsDataMapper.energySeriesDataMap.forEach(function(c){
			if(data[c.type]) {
				processedData.energy_chart_month_by_day[c.series] = {
					total:ChartsDataMapper.formatSeriesTotal(data,c.type),
					roundValueTotal:ChartsDataMapper.sumSeriesTotal(data,c.type),
					data:ChartsDataMapper.mapDateSeries(data,c.type)
				};
			};
		});
		return processedData;
	},
	mapEnergyBillingChartData:function(data,fieldStartDate,fieldEndDate) {
		var processedData = {
			energy_chart_billing_by_day:{},
			energy_chart_billing_by_day_max:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'systemProduction'))),
			energy_chart_billing_by_day_max_c:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'consumption'))),
			energy_chart_billing_by_day_max_sc:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'selfConsumption'))),

						energy_chart_billing_by_day_max_vt:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'volthera'))),
			
			billing_uom:data.measurementUnit,
			billingPR:ChartsDataMapper.mapDateSeries(data,'performanceRatio')
		};
		ChartsDataMapper.energySeriesDataMap.forEach(function(c){
			if(data[c.type]) {
				processedData.energy_chart_billing_by_day[c.series] = {
					total:ChartsDataMapper.formatSeriesTotal(data,c.type),
					roundValueTotal:ChartsDataMapper.sumSeriesTotal(data,c.type),
					data:ChartsDataMapper.mapDateSeries(data,c.type)
				};
			};
		});
		return processedData;
	},
	processBillingData:function() {
				if(SE.Params.billingData.systemProduction && SE.Params.billingData.systemProduction.dateSeries) {
			var productionData = SE.Params.billingData.systemProduction.dateSeries.map(function(data){return data.value});						
			SE.Params.billingData.production = {data:productionData};
		};
				if(SE.Params.billingData.selfConsumption && SE.Params.billingData.selfConsumption.dateSeries) {
			SE.Params.billingData.selfConsumption_ = SE.Params.billingData.selfConsumption;
			var selfConsumptionData = SE.Params.billingData.selfConsumption.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.selfConsumption = {data:selfConsumptionData};
		};
				if(SE.Params.billingData.volthera && SE.Params.billingData.volthera.dateSeries) {
			SE.Params.billingData.volthera_ = SE.Params.billingData.volthera;
			var voltheraData = SE.Params.billingData.volthera.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.volthera = {data:voltheraData};
		};
				if(SE.Params.billingData.consumption && SE.Params.billingData.consumption.dateSeries) {
			SE.Params.billingData.consumption_ = SE.Params.billingData.consumption;
			var consumptionData = SE.Params.billingData.consumption.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.consumption = {data:consumptionData};
		};
				if(SE.Params.billingData.batterySelfConsumption && SE.Params.billingData.batterySelfConsumption.dateSeries) {
			var batteryData = SE.Params.billingData.batterySelfConsumption.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.battery = {data:batteryData};
		};
				if(SE.Params.billingData.import && SE.Params.billingData.import.dateSeries) {
			SE.Params.billingData.import_ = SE.Params.billingData.import;
			var importData = SE.Params.billingData.import.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.import = {data:importData};
		};
				if(SE.Params.billingData.export && SE.Params.billingData.export.dateSeries) {
			SE.Params.billingData.export_ = SE.Params.billingData.export;
			var exportData = SE.Params.billingData.export.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.export = {data:exportData};
		};
				if(SE.Params.billingData.performanceRatio && SE.Params.billingData.performanceRatio.dateSeries) {
			SE.Params.billingData.performanceRatio_ = SE.Params.billingData.performanceRatio;
			var performanceRatioData = SE.Params.billingData.performanceRatio.dateSeries.map(function(data){return data.value});
			SE.Params.billingData.performanceRatio = {data:performanceRatioData};
		};			
	},
	mapEnergyYearChartData:function(data,fieldStartDate,fieldEndDate) {
		var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
		var times = this.getLocalizedTimes(data,fieldStartDate,fieldEndDate);
		var gmtOffset = new Date(times.dataEnd).getTimezoneOffset()*60000;

		var processedData = {
			field_start_date:ChartsDataMapper.toYearMonthDay(times.fieldStart),//TODO not in use. this is done on CH by adding -7 days to endDate
	        field_end_date:ChartsDataMapper.toYearMonthDay(times.fieldEnd),//TODO not in use. the endDate (server returns this)
	        field_start_ts:times.fieldStart,
	        field_end_ts:times.fieldEnd,
	        year_range:ChartsDataMapper.getYearRange(new Date(times.fieldStart),new Date(times.fieldEnd)),//TODO all years between field_start_date and field_end_date
	        //start_week:fieldEndDate ? ChartsDataMapper.addDaysToDate(data.dataEndDate,-8) : ChartsDataMapper.addDaysToDate(data.fieldEndDate,-8),
			GMTOffset:gmtOffset,
			energy_chart_year_by_month:{},
			energy_chart_year_by_month_max:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'systemProduction'))),
			energy_chart_year_by_month_max_c:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'consumption'))),
			energy_chart_year_by_month_max_sc:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'selfConsumption'))),

						energy_chart_year_by_month_max_vt:Math.max(Number.MIN_VALUE,Math.max.apply(null,ChartsDataMapper.mapDateSeries(data,'volthera'))),

			end_year:ChartsDataMapper.toYearMonthDay(times.dataEnd),
			end_year_next:ChartsDataMapper.addDaysToDate(times.dataEnd,1),
			prev_year_date:Math.max(fieldStartDate||data.fieldStartDate,ChartsDataMapper.getEndOfPrevYear(data.dataStartDate)),
			next_year_date:Math.min(fieldEndDate||data.fieldEndDate,ChartsDataMapper.getEndOfNextYear(data.dataEndDate)),
			year_uom:data.measurementUnit,
			yearPR:ChartsDataMapper.mapDateSeries(data,'performanceRatio')
		};

		ChartsDataMapper.energySeriesDataMap.forEach(function(c){
			if(data[c.type]) {
				processedData.energy_chart_year_by_month[c.series] = {
					total:ChartsDataMapper.formatSeriesTotal(data,c.type),
					roundValueTotal:ChartsDataMapper.sumSeriesTotal(data,c.type),
					data:ChartsDataMapper.mapDateSeries(data,c.type)
				};
			};
		});
		return processedData;
	},
	updateRangeData:function(processedData,times) {
		processedData.end_week = ChartsDataMapper.toYearMonthDay(times.dataEnd);
		processedData.end_week_next = ChartsDataMapper.addDaysToDate(times.dataEnd,1);
		return processedData;
	},
	mapPowerData:function(resolution,processedData,data) {
		processedData[resolution]={
			per_uom:data.measurementUnit,
			power_chart_periodic : data['systemProduction'] ? ChartsDataMapper.mapDateSeries(data,'systemProduction') : []
		};
		if(!SE.isPublic) {
			processedData[resolution].power_chart_periodic_c = data['consumption'] ? ChartsDataMapper.mapDateSeries(data,'consumption') : [];
			processedData[resolution].power_chart_periodic_sc = data['selfConsumption'] ? ChartsDataMapper.mapDateSeries(data,'selfConsumption') : [];

						processedData[resolution].power_chart_periodic_vt = data['volthera'] ? ChartsDataMapper.mapDateSeries(data,'volthera') : [];
			
			processedData[resolution].power_chart_periodic_pv = data['solarProduction'] ? ChartsDataMapper.mapDateSeries(data,'solarProduction') : [];
			processedData[resolution].power_chart_periodic_import = data['import'] ? ChartsDataMapper.mapDateSeries(data,'import') : [];
			processedData[resolution].power_chart_periodic_export = data['export'] ? ChartsDataMapper.mapDateSeries(data,'export') : [];
			processedData[resolution].power_chart_periodic_storage = data['storagePower'] ? ChartsDataMapper.mapDateSeries(data,'storagePower') : [];
			processedData[resolution].power_chart_periodic_energy_level = data['storageEnergyLevel'] ? ChartsDataMapper.mapDateSeries(data,'storageEnergyLevel') : [];
		}
		return processedData;
	},	
	
	mapDateSeries:function(data,type) {
		return data[type] ? data[type].dateSeries.map(function(item){return item.value;}) : null;
	},
	sumSeriesTotal:function(data,type) {
		return data[type] ? Math.roundPrecise(data[type].dateSeries.reduce(function(a,b){return a+b.value;},0),3) : 0;
	},
	formatSeriesTotal:function(data,type) {
		var unit = 'kWh';//TODO handle mWh vs kWh
		return SE.util.locale.format(ChartsDataMapper.sumSeriesTotal(data,type),3)+" "+unit;
	},
	toYearMonthDay:function(timeStamp) {
		var date = new Date(timeStamp);
		return {year:date.getFullYear(),month:date.getMonth(),day:date.getDate()};
	},
	getYearRange:function(timeStampStart,timeStampEnd) {
		var range = [];
		var startYear = timeStampStart.getFullYear();
		var endYear = timeStampEnd.getFullYear();
		for (var i=startYear; i<=endYear; i++) range.push([i]);
		return range;
	},
	addDaysToDate:function(timeStamp,daysToAdd) {
        let newTimeStamp = timeStamp + daysToAdd*24*60*60*1000;
        return newTimeStamp;
	},
	getEndOfPrevMonth:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setDate(1); // going to 1st of the month
		d.setHours(-1); // going to last hour before this date even started.
		d.setMinutes(59);
		return d.getTime();//-d.getTimezoneOffset()*60000;//return GMT time
	},
	getEndOfNextMonth:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setMonth(d.getMonth()+1); //1 months ahead;
		return ChartsDataMapper.getEndOfPrevMonth(d.getTime());
	},
	getEndOfMonth:function(month,year) {
		var d = new Date();
		d.setYear(year);
		d.setMonth(month+1);
		return ChartsDataMapper.getEndOfPrevMonth(d.getTime());
	},
	getEndOfPrevYear:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setMonth(0); //JAN
		d.setDate(1); // going to 1st of the month
		d.setHours(-1); // going to last hour before this date even started.
		d.setMinutes(59);
		return d.getTime();//-d.getTimezoneOffset()*60000;//return GMT time
	},
	getEndOfNextYear:function(timeStamp) {
		var d=new Date(timeStamp);
		d.setYear(d.getFullYear()+1);
		return ChartsDataMapper.getEndOfPrevYear(d.getTime());
	},
	convertToGmt:function(timeStamp) {
		var date = new Date(timeStamp);
		var tos = date.getTimezoneOffset();
		var new_timeStamp = date.getTime() + tos*60000;
		var new_date = new Date(new_timeStamp);
		var new_tos = new_date.getTimezoneOffset();
				if(typeof Intl!='undefined') {	
			var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
			if(timeZone=='Australia/Sydney' && tos != new_tos) {
				new_timeStamp = new_timeStamp - Math.abs(tos - new_tos)*60000;
				new_date = new Date(new_timeStamp);
			};
		};
		return new_timeStamp;
	},
	getLocalizedTimes:function(data,fieldStartDate,fieldEndDate) {
		return {
			dataStart : fieldStartDate ? ChartsDataMapper.convertToGmt(data.dataStartDate) : ChartsDataMapper.convertToGmt(data.fieldStartDate),
			dataEnd : fieldEndDate ? ChartsDataMapper.convertToGmt(data.dataEndDate) : ChartsDataMapper.convertToGmt(data.fieldEndDate),
			fieldStart : fieldStartDate ? ChartsDataMapper.convertToGmt(fieldStartDate) : ChartsDataMapper.convertToGmt(data.fieldStartDate),
			fieldEnd : fieldEndDate ? ChartsDataMapper.convertToGmt(fieldEndDate) : ChartsDataMapper.convertToGmt(data.fieldEndDate)
		};
	}
}
SE.AbstractEnergyChartPanel = Ext.extend(Ext.Panel,
{
	rules:[
                      '.chart_tab{border-top: 1px solid #cccccc;position:absolute;top:31px;}',
                      '.chart_nav_prev.chart_nav_no_select,.chart_nav_next.chart_nav_no_select{color:#91cae8;cursor:auto;}',
           '.chart_total{position:absolute;top:4px;left:220px;}',
           '.arrow{border-style: solid;border-width:5px;margin:3px 5px 0 6px;}',
           '.arrow_right{border-color: transparent transparent transparent #2496d2;width:1px;height:1px;}',
           '.arrow_left{border-color: transparent #2496d2 transparent transparent;width:1px;height:1px;}',
           '.arrow_right_not_active{border-color: transparent transparent transparent #91cae8;width:1px;height:1px;}',
           '.arrow_left_not_active{border-color: transparent #91cae8 transparent transparent;width:1px;height:1px;}',
           '.highcharts-container{z-index:20;}'
		  ],
	constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);
        SE.AbstractEnergyChartPanel.superclass.constructor.call(this, config);
        this.el = Ext.get(elId);
        this.createCSS();	
		this.powerAndEnergyKey = SE.Params.index + '-' + SE.Params.fieldId + '-chart-tab';
				this.tabOrderArr = SE.Params.dayChartEnhancmentEnabled ? ['day','week','month','year'] : ['week','month','year'];		
				this.wasTabLoadedMap = {};
				this.activeTab = this.tabOrderArr.indexOf('month');		
				this.activeEvent = false;
				this.colors = {consumption:SE.CSSColor.gcc(),
					   production:SE.CSSColor.gcp(),
					   selfConsumption:SE.CSSColor.gsc(),
					   volthera:SE.CSSColor.gvc(),
					   pvProduction:SE.CSSColor.gcpvp(),
					   export:SE.CSSColor.gex(),
					   import:SE.CSSColor.gim(),
					   battery:SE.CSSColor.gbat()
					   };

		var panel = Ext.DomHelper.append(this.el,
										 {id:this.id,
										  cls:this.id + ' ' + this.panelCls,
										  style:this.style,
										  children:[{tag:'p',cls:'x-panel-header-text',style:'padding: 6px 5px 0 11px;',html:this.title}]
										 },true);
		Ext.get('power_energy_panel').dom.children[0].id = 'se-power-energy-panel-title';
		var dh = Ext.DomHelper;
		dh.append(panel,{cls:'se-loading-panel',html:SE.labels.base.loading});
		dh.append(panel,{id:'energy_noData',cls:'se-no-data se-panel-white-background',html:SE.labels.dboard.noData});
		this.dateRange = new SE.DateRange({el:panel,panel:this});

		this.utilContainer = dh.append(panel,{cls:'se-util-measure'});
		var loadingFrameTop = 50;	
		this.utilMeasuresFrame = SE.LoadingFrame.create({renderTo:this.utilContainer, 
														 width:this.panelWidth, 
														 height:25, 
														 style:'position:absolute;top:' + loadingFrameTop + 'px;z-index:100;'
														});
		if(SE.isMobile) {
			this.createUtilMesurments(this.utilContainer);
		};
		        this.year_categories=[SE.labels.dboard.Jan,SE.labels.dboard.Feb,SE.labels.dboard.Mar,SE.labels.dboard.Apr,SE.labels.dboard.May,SE.labels.dboard.Jun,SE.labels.dboard.Jul,SE.labels.dboard.Aug,SE.labels.dboard.Sep,SE.labels.dboard.Oct,SE.labels.dboard.Nov,SE.labels.dboard.Dec];
		
		if(!SE.isMobile) 
		{
			this.export2Excel = new SE.Export2Excel({panel:this,labels:SE.labels.dboard});
		};
		var left = 565;
		if(!SE.isMobile) 		
		{
			this.infoBtn = new SE.SEMInfoBtn({renderTo:this.id,hidden:true,style:'position:absolute;top:6px;left:' + left + 'px;'});
			if(SE.permissions.DashboardSelfSustained && (this.power_chart_periodic_sc && this.power_chart_periodic_sc.length>0) )
			{
				this.infoBtn.show();
				left-=30;
			}
		}
		//this.chartSettings = new SE.ChartSettingsBtn({renderTo:this.id,style:'position:absolute;top:6px;left:' + left + 'px;'});		
		if(this.next_month_date>0)
		{
			this.renderChart();
			this.showPanel();
		}
		else
		{
			this.hidePanel();
			this.utilMeasuresFrame.hide();
		}
				this.createLayer(panel);
    },
    getTopOffSet:function()
    {
    	return 102;
    },
    createUtilMesurments:function(utilContainer) {
    	    	SE.util.script.loadScriptAjax( {
            url:[SE.contex_url + '/p/utilMeasurements/utilizationMeasurementsPanel?fieldId='+SE.Params.fieldId+'&v='+(new Date()).getTime()],
            scope:this,
            onLoad:function() {
				var billingIndx = this.tabOrderArr.indexOf('billingCycle');
				if(SE.Params.billingData && SE.Params.billingData.utilizationMeasures && billingIndx >= 0 && billingIndx == this.activeTab) {
					var utilData = SE.Params.billingData.utilizationMeasures;
				} else {
					var utilData = this.utilData;				
				};	
            	this.utilMeasuresFrame.hide();
				if(this.utilMeasuresCardPanel) this.utilMeasuresCardPanel.destroy();
				this.utilMeasuresCardPanel = Ext4.create('SE.UtilizationCardPanel',{renderTo:utilContainer,
																					width:this.panelWidth,
																					apiData:utilData,
																					isMSCMode:this.isMSCMode,
																					forceHideUtilMeasures:this.forceHideUtilMeasures
																				   });            	
            }
        });
    },
    beforeLoad: function()
    {

    },
    afterLoad: function(data)
    {
llog('@@ afterLoad...');
        Ext.apply(this,data.energyChartData);
        this.reload();
    },
	hidePanel:function()
	{
		Ext.get('energy_noData').show();
		try{Ext.get('select_panel').hide();}catch(e){}
		this.dateRange.hideRanges();
			},
	showPanel:function()
	{
		Ext.get('energy_noData').hide();
	},
	reload:function()
	{
llog('@@ afterLoad...');
		this.removeChart();
		if(this.start_week>0)
		{
			this.renderChart();
			this.showPanel();
		}
		else
		{
			this.hidePanel();
		}
	},
	showMsg:function()
	{
		var xy = Ext.get('power_energy_panel').getXY();
		var msgbox = Ext.Msg.show({msg:SE.labels.dboard.msg}).getDialog();
		msgbox.setPosition(xy[0]+310-msgbox.getWidth()/2,xy[1]+100);
	},
	getEnergyChartHeights:function(isPhone,isDouble,hasPrData)
	{
		var masterChartHeight = isDouble ? this.powerEnergyHeight-430 : this.powerEnergyHeight-245;
		if(isPhone) masterChartHeight-=85;
		var masterChartGraphicsHeight = isDouble ? masterChartHeight : masterChartHeight-5;
		if(isPhone){
			if(isDouble) masterChartGraphicsHeight+=90;
			if(hasPrData){
				masterChartGraphicsHeight-=140;
				masterChartHeight-=45;
			}
		}
		return{masterChartHeight:masterChartHeight,masterChartGraphicsHeight:masterChartGraphicsHeight};
	},
	formatEnergySeriesSharedTooltip:function(uom,seriesArr,x,showIndentedSubSeriesData,onlyMainSeries,onlySubSeries)
	{
		var tooltipText = '';
		for (var i=0;i<seriesArr.length;i++){
       	 	 var series = seriesArr[i];
       		 var y = series.data[x] ? series.data[x].y : null;
       		 var isSubSeries = series.userOptions.isSubSeries;
       		 var unitLabel = this.resolveEnergyUnit(uom)+SE.labels.dboard.wh;
       		 var parent = seriesArr.filter(function(s) {return s.userOptions.category == series.userOptions.parentSeries;})[0];
       		 if((parent && onlyMainSeries) || (!parent && onlySubSeries)) continue;
       		 if(!parent || showIndentedSubSeriesData || onlyMainSeries || onlySubSeries){
       			 var value = y==null ? SE.labels.dboard.na : (SE.util.locale.format(y,3)+'').replace('.',SE.dSeparator)+' '+unitLabel;
           		 var parentChartY = parent && parent.data[x] ? parent.data[x].y : 0;
           		 var precValue = y!=null && parent && showIndentedSubSeriesData && i>0 ? '('+this.calcPercentage(parentChartY,y)+'%)' : '';
           		 var titleCls = isSubSeries && showIndentedSubSeriesData ? "tooltip-subseries-title" : "tooltip-series-title";
           		                    tooltipText+='<div class='+titleCls+'><span class="title-left" style="color:'+series.color+';">■'+series.name+'</span><span style="float:right;"><b>'+value+' '+precValue+'</b></span></div>'
       		 }
        }
        return '<div style="display:flex; flex-direction:column;">' + tooltipText + '</div>';
	},
	showMarkersForIsolatedPoints:function(chart)
	{
		//http://stackoverflow.com/questions/35944286/highcharts-no-point-markers-but-show-single-point-or-discontinous-points
 		for (var s=0;s<chart.series.length;s++) {
 			var points = chart.series[s].points;
            var len = points.length - 1;
          	for (var i = 0; i < len; i++) {
          		//small values less than 1 should be displayed
	          	if(i > 0 && points[i].y !== null && points[i].y >= 1 && points[i-1].y === null && points[i+1].y === null) {
	            	points[i].update({
	              	marker:{
	                enabled:true
	                }
	              });
	            }
          	}
 		}
	},
	calcPercentage:function(total,part) {
		return total > 0 ? SE.util.locale.format(part/total*100,1) : '--';
	},
	setNavigationPanels:function() {
				var end_year = this.end_year || {};
		if(end_year.year==this.field_end_date.year) {
			Ext.get('next_year').addClass('chart_nav_no_select');
			Ext.get('year_right').addClass('arrow_right_not_active');
			Ext.get('next_year').active=false;
		} else {
			Ext.get('next_year').removeClass('chart_nav_no_select');
			Ext.get('year_right').removeClass('arrow_right_not_active');
			Ext.get('next_year').active=true;
		}
		if(end_year.year==this.field_start_date.year) {
			Ext.get('prev_year').addClass('chart_nav_no_select');
			Ext.get('year_left').addClass('arrow_left_not_active');
			Ext.get('prev_year').active=false;
		} else {
			Ext.get('prev_year').removeClass('chart_nav_no_select');
			Ext.get('year_left').removeClass('arrow_left_not_active');
			Ext.get('prev_year').active=true;
		}
		if(this.end_month.month==this.field_end_date.month && this.end_month.year==this.field_end_date.year) {
			Ext.get('next_month').addClass('chart_nav_no_select');
			Ext.get('month_right').addClass('arrow_right_not_active');
			Ext.get('next_month').active=false;
		} else {
			Ext.get('next_month').removeClass('chart_nav_no_select');
			Ext.get('month_right').removeClass('arrow_right_not_active');
			Ext.get('next_month').active=true;
		}
		if(this.end_month.month==this.field_start_date.month && this.end_month.year==this.field_start_date.year) {
			Ext.get('prev_month').addClass('chart_nav_no_select');
			Ext.get('month_left').addClass('arrow_left_not_active');
			Ext.get('prev_month').active=false;
		} else {
			Ext.get('prev_month').removeClass('chart_nav_no_select');
			Ext.get('month_left').removeClass('arrow_left_not_active');
			Ext.get('prev_month').active=true;
		}
		if(this.start_week<this.startFieldDateTime) {
			Ext.get('prev_week').addClass('chart_nav_no_select');
			Ext.get('week_left').addClass('arrow_left_not_active');
			Ext.get('prev_week').active=false;
		} else {
			Ext.get('prev_week').removeClass('chart_nav_no_select');
			Ext.get('week_left').removeClass('arrow_left_not_active');
			Ext.get('prev_week').active=true;
		}
		if(this.end_week_next>this.endFieldDateTime) {
			Ext.get('next_week').addClass('chart_nav_no_select');
			Ext.get('week_right').addClass('arrow_right_not_active');
			Ext.get('next_week').active=false;
		} else {
			Ext.get('next_week').removeClass('chart_nav_no_select');
			Ext.get('week_right').removeClass('arrow_right_not_active');
			Ext.get('next_week').active=true;
		}
		if (SE.Params.dayChartEnhancmentEnabled) {
			if(this.start_day<this.startFieldDateTime)
			{
				Ext.get('prev_day').addClass('chart_nav_no_select');
				Ext.get('day_left').addClass('arrow_left_not_active');
				Ext.get('prev_day').active=false;
			}
			else
			{
				Ext.get('prev_day').removeClass('chart_nav_no_select');
				Ext.get('day_left').removeClass('arrow_left_not_active');
				Ext.get('prev_day').active=true;
			}
			if(this.end_day_next>this.field_end)
			{
				Ext.get('next_day').addClass('chart_nav_no_select');
				Ext.get('day_right').addClass('arrow_right_not_active');
				Ext.get('next_day').active=false;
			}
			else
			{
				Ext.get('next_day').removeClass('chart_nav_no_select');
				Ext.get('day_right').removeClass('arrow_right_not_active');
				Ext.get('next_day').active=true;
			}
		}
	},
	getPrevDay:function()
	{
		llog('@@ getPrevDay @@');
		if(Ext.get('prev_day').active==true)
		{
			this.activeTab = this.tabOrderArr.indexOf('day');
			this.reload({fieldId:SE.Params.fieldId,endDate:this.start_day - 1000});
		}
	},
	getNextDay:function()
	{
		llog('@@ getNextDay @@');
		if(Ext.get('next_day').active==true)
		{
			this.activeTab = this.tabOrderArr.indexOf('day');
			this.reload({fieldId:SE.Params.fieldId,endDate:this.end_day_next});
		}
	},
	getPrevWeek:function()
	{
		llog('@@ getPrevWeek @@');
		if(Ext.get('prev_week').active==true)
		{
			this.activeTab = this.tabOrderArr.indexOf('week');
			if(SE.Params.firstStartWeek) {
				SE.Params.startWeekDate = this.start_week;
				SE.Params.firstStartWeek = false;
			} else {
				SE.Params.startWeekDate = SE.Params.startWeekDate - 7*24*60*60*1000;
			};
			this.reload({fieldId:SE.Params.fieldId,endDate:SE.Params.startWeekDate});
		}
	},
	getNextWeek:function()
	{
		llog('@@ getNextWeek @@');
		if(Ext.get('next_week').active==true)
		{
			if(SE.Params.firstStartWeek) {
				SE.Params.startWeekDate = this.start_week + 7*24*60*60*1000;
				SE.Params.firstStartWeek = false;
			}
			this.activeTab = this.tabOrderArr.indexOf('week');
			SE.Params.startWeekDate = SE.Params.startWeekDate + 7*24*60*60*1000;
			this.reload({fieldId:SE.Params.fieldId,endDate:SE.Params.startWeekDate});			
		}
	},
	getPrevMonth:function()
	{
		llog('@@ getPrevMonth @@');
		if(Ext.get('prev_month').active==true)
		{
			this.activeTab = this.tabOrderArr.indexOf('month');
			this.reload({fieldId:SE.Params.fieldId,endDate:this.prev_month_date});
		}
	},
	getNextMonth:function()
	{
		llog('@@ getNextMonth @@');
		if(Ext.get('next_month').active==true)
		{
			this.activeTab = this.tabOrderArr.indexOf('month');
			this.reload({fieldId:SE.Params.fieldId,endDate:this.next_month_date});
		}
	},
		getSelectedDay:function(event,chart) {
		llog('@@ getSelectedDay @@');
		var crntActiveTab = this.activeTab;
		this.activeTab = this.tabOrderArr.indexOf('day');
		var billingIndx = this.tabOrderArr.indexOf('billingCycle');
		if(billingIndx >= 0 && billingIndx == crntActiveTab) {
						var data = SE.Params.billingData.systemProduction.dateSeries[event.point.index];
						var date = moment.utc(data.date)._d;
			var selectedDate = Date.UTC(date.getFullYear(),date.getMonth(),date.getDate());
			this.reload({fieldId:SE.Params.fieldId,endDate:selectedDate});
		} else {	
			var day = event.point.category+2;//get midnight of day after
			var month = this.end_month.month;
			var year = this.end_month.year;
			var selectedDate = Date.UTC(year,month,day)-1;				this.reload({fieldId:SE.Params.fieldId,endDate:selectedDate});
		};
		this.activeTab = this.tabOrderArr.indexOf('day');
	},
	getSelectedDay_old:function(event,chart) {
		llog('@@ getSelectedDay @@');
		this.activeTab = this.tabOrderArr.indexOf('day');
		var day = event.point.category+2;//get midnight of day after
		var month = this.end_month.month;
		var year = this.end_month.year;
		var selectedDate = Date.UTC(year,month,day)-1;//to get end of day
		this.reload({fieldId:SE.Params.fieldId,endDate:selectedDate});
	},
	getSelectedWeek:function(event,chart) {
		llog('@@ getSelectedWeek @@');
		var crntActiveTab = this.activeTab;
		this.activeTab = this.tabOrderArr.indexOf('week');
		var billingIndx = this.tabOrderArr.indexOf('billingCycle');
		if(billingIndx >= 0 && billingIndx == crntActiveTab) {
			var day = event.point.category + 6;
			var month = this.end_month.month;
						var data = SE.Params.billingData.systemProduction.dateSeries[event.point.index];
						var date = moment.utc(data.date)._d;
			var selectedDate = Date.UTC(date.getFullYear(),date.getMonth(),day);
			this.reload({fieldId:SE.Params.fieldId,endDate:selectedDate});
		} else {
			var day = event.point.category + 7;
			var month = this.end_month.month;
			var year = this.end_month.year;
			var selectedDate = Date.UTC(year,month,day);
			this.reload({fieldId:SE.Params.fieldId,endDate:selectedDate});		
		};	
	},
	getSelectedWeek_old:function(event,chart) {
		llog('@@ getSelectedWeek @@');
		this.activeTab = this.tabOrderArr.indexOf('week');
		var day = event.point.category+7;
		var month = this.end_month.month;
		var year = this.end_month.year;
		var selectedDate = Date.UTC(year,month,day);
		this.reload({fieldId:SE.Params.fieldId,endDate:selectedDate});
	},
	getSelectedMonth:function(event,chart) {
		llog('@@ getSelectedMonth...');
		var crntActiveTab = this.activeTab;
		if(this.activeEvent==false) {
			this.activeEvent = true;
			this.activeTab = this.tabOrderArr.indexOf('month');
			var billingIndx = this.tabOrderArr.indexOf('billingCycle');
			if(billingIndx >= 0 && billingIndx == crntActiveTab) {
												var data = SE.Params.billingData.systemProduction.dateSeries[event.point.index];
								var date = moment.utc(data.date)._d;
				var selectedMonth = date.getMonth();
				var selectedYear = date.getFullYear();
				this.reload({fieldId:SE.Params.fieldId,month:selectedMonth,year:selectedYear});
			} else {	
				var selectedMonth = 0;
				for (var i=0;i<=chart.data.length;i++)
				{
					if(chart.data[i].category == event.point.category)
					{
						selectedMonth = i;
						break;
					}
				}
				var selectedYear = this.end_year.year;
				this.reload({fieldId:SE.Params.fieldId,month:selectedMonth,year:selectedYear});
											};
		}
	},
	getSelectedMonth_old:function(event,chart) {
		llog('@@ getSelectedMonth...');
		if(this.activeEvent==false)
		{
			this.activeEvent = true;
			this.activeTab = this.tabOrderArr.indexOf('month');
			var selectedYear = this.end_year.year;
			var selectedMonth = 0;
			for (var i=0;i<=chart.data.length;i++)
			{
				if(chart.data[i].category == event.point.category)
				{
					selectedMonth = i;
					break;
				}
			}
			this.reload({fieldId:SE.Params.fieldId,month:selectedMonth,year:selectedYear});
		}
	},	
	getSelectedYear:function(event,chart) {
		llog('@@ getSelectedYear...');
		if(this.activeEvent==false)
		{
			this.activeEvent = true;
			this.activeTab = this.tabOrderArr.indexOf('year');
			var selectedMonth = this.end_year.month;
			var selectedYear = event.point.category;
			this.reload({fieldId:SE.Params.fieldId,month:selectedMonth,year:selectedYear});
		}
	},
	getPrevYear:function()
	{
		if(Ext.get('prev_year').active==true)
		{
			this.activeTab = this.tabOrderArr.indexOf('year');
			this.reload({fieldId:SE.Params.fieldId,endDate:this.prev_year_date});
		}
	},
	getNextYear:function()
	{
		if(Ext.get('next_year').active==true)
		{
			this.activeTab = this.tabOrderArr.indexOf('year');
			this.reload({fieldId:SE.Params.fieldId,endDate:this.next_year_date});
		}
	},
	reload:function(params) {
		if(params.activeTab) {
			this.activeTab = params.activeTab;
		};
				this.tabPanel.items.items.forEach(function(c){c.hide();});
		this.dateRange.hideRanges();
		var activeTabOponRequest = this.activeTab;
		var chartLoadingFrame = SE.LoadingFrame.create({renderTo:this.id,height:30});

		var units = this.getUnits();
		var apiTypeKeyword = this.getApiTypeKeyword();

				var requestParams = ChartsDataMapper.resolveRequestParams(params);
				this.lastRequestedEndDate = params.endDate;
		if(this.utilMeasuresCardPanel && this.utilMeasuresCardPanel !== null){
			this.utilMeasuresCardPanel.hide();
		};
		if(requestParams.activeTab==0 && requestParams.endDate > this.fieldEndDate) {
			requestParams.endDate = this.fieldEndDate;		
		};
		var requestConfig = {
			   url:SE.AppURL.apigwContext+'/api/site/'+SE.Params.fieldId+'/' + apiTypeKeyword + 'DashboardChart?chartField=' + units[this.activeTab] + '&foldUp=true',
			   params:requestParams,
			   method:'GET',
			   parent:this,
			   scope:this,
			   success:function(result,request) {
   			   		if(this.activeTab != activeTabOponRequest) {
						this.wasTabLoadedMap = {}; //force reloading on rapid tab change
   			   			return;
   			   		}   			   		
					var data = Ext.util.JSON.decode(result.responseText);
                                        if(data.selfConsumption && data.selfConsumption.dateSeries.every(function(e){return e.value==null || e.value == 0;})) delete data.selfConsumption;
                    if(data.batterySelfConsumption && data.batterySelfConsumption.dateSeries.every(function(e){return e.value==null || e.value == 0;})) delete data.batterySelfConsumption;

															
										if(apiTypeKeyword != 'customEnergy') {
						this.dataStartDate = data.dataStartDate;
				    	this.dataEndDate = data.dataEndDate;
						var processedData = ChartsDataMapper.mapEnergyChartData(data,units[this.activeTab],this.fieldStartDate,this.fieldEndDate,params.perserveTabsData);
						Ext.apply(this,processedData);
					};
																				chartLoadingFrame.hide();
					this.selectPanel.show();
					this.setSelectPanel();
					Ext.fly('se-energy-chart-panel-tab').remove();
					this.utilData = data.utilizationMeasures;
					this.createUtilMesurments(this.utilContainer); 
					if(this.utilMeasuresCardPanel && this.utilMeasuresCardPanel !== null){
						this.utilMeasuresCardPanel.show();
					}
					if(!params.perserveTabsData) this.wasTabLoadedMap = {}; //force reloading on tab change
					this.renderChart();
			   },
			   failure:function(result,request)
			   {
				  new SE.ErrorMsg(result,request);
			   }};
		Ext.Ajax.request(requestConfig);
	},
	fixEndDate:function(requestParams) {
		requestParams.endTime = moment(requestParams.endTime).add(1,'d').format('YYYY-MM-DD 00:00:00');
	},
	setDateInRange:function(dateSeries) {
		var st = moment(SE.Params.billingCycle.startTime);
		var et = moment(SE.Params.billingCycle.endTime);
		var fixedDates  = dateSeries.filter(function(d){if(moment(d.date) >= st && moment(d.date) <= et) return d});
		return fixedDates;
	},
	getApiTypeKeyword:function() {
		var apiTypeKeyword = this.activeTab==0 || (SE.Params.dayChartEnhancmentEnabled && this.activeTab==1) ? 'power' : 'energy';
				return apiTypeKeyword;
	},
	getUnits:function() {
				var units = ['DAY','WEEK','MONTH','YEAR'];		
				return units;	
	},
	removeChart:function()
	{
		if(this.tabPanel && Ext.fly(this.tabPanel.id))
		{
			Ext.fly(this.tabPanel.id).remove();
		}
	},
	datePeriodicRangeZoom:function(event)
	{
		this.dateRange.datePeriodicRangeZoom(event);
	},
	dateMonthRangeZoom:function(event)
	{
		this.dateRange.dateMonthRangeZoom(event);
	},
	dateYearRangeZoom:function(event)
	{
		this.dateRange.dateYearRangeZoom(event);
	},
	resolveEnergyUnit:function(unit)
	{
		return !unit || unit=='Wh' || unit=='W' ? '' : unit.substring(0,1);
	},
    renderChart:function() {
		llog('@@ renderChart...');
		this.month_yAxisLabel = '';
		this.year_yAxisLabel = '';
		SE.dSeparator = Ext.form.NumberField.prototype.decimalSeparator;    
		this.startFieldDateTime=Date.UTC(this.field_start_date.year,this.field_start_date.month,this.field_start_date.day);
		this.startFieldDate=new Date(this.field_start_ts);
		this.endFieldDateTime = Date.UTC(this.field_end_date.year,this.field_end_date.month,this.field_end_date.day);
		this.endFieldDate=new Date(this.field_end_ts);
		
		this.createSelectPanels();
		this.dateRange.resetZoom();
						if(this.energy_chart_month_by_day_total>1000)
		{
			this.energy_chart_month_by_day_total = this.energy_chart_month_by_day_total/1000;
			var monthTotalLabel = SE.labels.dboard.mega+SE.labels.dboard.wh;
		}
		else
		{
			var monthTotalLabel = SE.labels.dboard.kilo+SE.labels.dboard.wh;
		}
		this.setNavigationPanels();
		var productionLabel = this.isPVProductionDisplayed() ? SE.labels.dboard.acProduction : SE.labels.dboard.production;

		var dayWeekChart = new SE.PowerPeriodicChart({powerData:this.dayData||{},panel:this,labels:SE.labels.dboard,productionLabel:productionLabel,pointStart:'start_day',
									setDateSelectFnName:'setDaySelect',title:SE.labels.dboard.day,chartId:'se-power-chart-day',
									forceHideUtilMeasures:this.forceHideUtilMeasures});

		var powerWeekChart = new SE.PowerPeriodicChart({powerData:this.weekData||{},panel:this,labels:SE.labels.dboard,productionLabel:productionLabel,pointStart:'start_week',
									setDateSelectFnName:'setWeekSelect',title:SE.labels.dboard.week,chartId:'se-power-chart-week',
									forceHideUtilMeasures:this.forceHideUtilMeasures});
				SE.powerWeekChart = powerWeekChart;

		var energyMonthChart = new SE.EnergyMonthChart({panel:this,labels:SE.labels.dboard,productionLabel:productionLabel,
														forceHideUtilMeasures:this.forceHideUtilMeasures});
				SE.energyMonthChart = energyMonthChart;

				
		var energyYearChart = new SE.EnergyYearChart({panel:this,labels:SE.labels.dboard,productionLabel:productionLabel,
														forceHideUtilMeasures:this.forceHideUtilMeasures});
				SE.energyYearChart = energyYearChart;

		var viewMode = "fullDouble" ;
		if (SE.Params.dayChartEnhancmentEnabled) {		
			var chartContainerFuncMap = {
				'day':dayWeekChart,
				'week':powerWeekChart,
				'month':energyMonthChart,
				'year':energyYearChart
											}
		} else {
			var chartContainerFuncMap = {
				'week':powerWeekChart,
				'month':energyMonthChart,
				'year':energyYearChart
											}
		}
		this.tabPanel = new Ext.TabPanel({
			id:'se-energy-chart-panel-tab',
	        renderTo:this.id,
	        activeTab:this.activeTab,
	        width:this.chartWidth,
	        height:this.chartHeight,
			 resizeTabs:true, 	        border:false,
	        cls:'chart_tab',
	        deferredRender:false,
	        defaults:{autoScroll: true},
	        listeners: {
					        	tabchange:function(tabPanel) {
					SE.Storage.setItem({session:false,key:this.powerAndEnergyKey,value:tabPanel.activeTab.id});
	        		var newActiveTabId = tabPanel.items.indexOf(tabPanel.activeTab);

	        			        			        			        			        												
																
					if(newActiveTabId != this.activeTab) {	        		
						
	        			this.activeTab = newActiveTabId;
		        		this.selectPanel.hide();
		        		if(this.utilMeasuresCardPanel && this.utilMeasuresCardPanel !== null){
		        			this.utilMeasuresCardPanel.hide();
		        		}
		        		this.reload({activeTab:newActiveTabId,fieldId:SE.Params.fieldId,endDate:this.lastRequestedEndDate || this.fieldEndDate,perserveTabsData:true});
	        		}
					this.wasTabLoadedMap[newActiveTabId] = true;
	        	},scope:this
	        },
	        items:this.tabOrderArr.map(function(tabName){return chartContainerFuncMap[tabName].createContainer(viewMode);})
	    });

		if(SE.Params.billingFT == true) {
			var savedChartTab = this.getSavedTab();
			if(savedChartTab != null) {
				if(savedChartTab == this.tabOrderArr.indexOf('billingCycle')) {
					if(SE.Params.billingCycle == null) {
						if(SE.billingCycleModal) {
							SE.destroyBillingCycleModal();
						}
						SE.renderBillingCycleModal();				
					};
				};

				this.reload({activeTab:savedChartTab,
							 fieldId:SE.Params.fieldId,
							 endDate:this.lastRequestedEndDate || this.fieldEndDate,
							 perserveTabsData:true
							});		
			} else {
				if(SE.Params.billingCycle != null) {
					let activeTab = this.tabOrderArr.indexOf('billingCycle');
					this.reload({activeTab:activeTab,
								 fieldId:SE.Params.fieldId,
								 endDate:this.lastRequestedEndDate || this.fieldEndDate,
								 perserveTabsData:true
								});
				};		
			};
			SE.Params.billingFT = false;
		};
		
		if(SE.Params.billingCycle != null && SE.Params.billingFT == true) {
			SE.Params.billingFT = false;
			let activeTab = this.tabOrderArr.indexOf('billingCycle');
			this.reload({activeTab:activeTab,
						 fieldId:SE.Params.fieldId,
						 endDate:this.lastRequestedEndDate || this.fieldEndDate,
						 perserveTabsData:true
						});
		};
		
		this.activeEvent=false;
		if(this.daysConfig) {
			try {
				var days = Ext.get('highcharts-0').select('svg').elements[0].getElementsByClassName('highcharts-axis')[0].getElementsByTagName('text');
				Ext.each(days, function(day, index){
					var pair = (index + 1) % 2 == 0;
					Ext.getDom(day).style.fontSize='12px';
					if(pair) Ext.getDom(day).getElementsByTagName('tspan')[0].childNodes[0].nodeValue='';
				});
			}
			catch(e){}
		}
    },
	getSavedTab:function() {
		var savedChart = SE.Storage.getItem({session:false, key:this.powerAndEnergyKey});
		if(savedChart != null) {	
			if(savedChart.indexOf('day')>-1) return this.tabOrderArr.indexOf('day');
			if(savedChart.indexOf('week')>-1) return this.tabOrderArr.indexOf('week');
			if(savedChart.indexOf('month')>-1) return this.tabOrderArr.indexOf('month');
			if(savedChart.indexOf('billing')>-1) return this.tabOrderArr.indexOf('billingCycle');
			if(savedChart.indexOf('year')>-1) return this.tabOrderArr.indexOf('year');
		};
		return null;
	},
    isPVProductionDisplayed:function() {
    	if (this.power_chart_periodic_pv)
    		return this.power_chart_periodic_pv.length>0;
    	else
    		return false;
	}
    
});

SE.EnergyChartPanel = Ext.extend(SE.AbstractEnergyChartPanel,
{
	panelCls:'se-border se-border-shdw se-panel-border-color se-panel-white-background',
	chartWidth:window.innerWidth-24,
	chartHeight:390,//TODO remove
	fontSize:'6px',
	zoomType:'',
	daysConfig:true,
	legendTop:0,
    createCSS:function()
    {
		var doubleChart = SE.Params.isDoubleChart && SE.permissions.ViewSitePR;
		var basicFooter = doubleChart ? 496 : 436;
		var rules = ['.se-power-panel-chart{margin-top:25px;}',
					 '.se-power-panel-partialSingle{margin-top:86px;}',
					 '.se-power-panel-partialDouble{margin-top:150px;}',
					 '.se-power-panel-fullSingle{margin-top:194px;}',
					 '.se-power-panel-fullDouble{margin-top:310px;}',

				     '.se-power-footer-chart{top:' + basicFooter + 'px;}',
					 '.se-power-footer-partialSingle{top:' + (basicFooter + 64) + 'px;}',
					 '.se-power-footer-partialDouble{top:' + (basicFooter + 129) + 'px;}',
					 '.se-power-footer-fullSingle{top:' + (basicFooter + 173) + 'px;}',
					 '.se-power-footer-fullDouble{top:' + (basicFooter + 300) + 'px;}',
 					 
					 '.chart_nav{display:inline-block;margin:7px 5px 5px 5px;}',
					 '.chart_uom{position:absolute;top:132px;left:7px;z-index:10;font-weight:bold;}',
					 '#se-energy-chart-panel-tab .x-tab-panel-body {height:749px !important}',					 
					 '#se-energy-chart-panel-tab .x-tab-strip span.x-tab-strip-text{padding:6px;}',

					 '.se-util-measure{position:absolute;top:108px;z-index:100;}',

					 					];
		rules = this.rules.concat(rules);			
		SE.util.CSS.addCmpRules('se-energychartpanel-css',rules);
    },
    createSelectPanels:function()
    {
	    this.selectPanel = new SE.DateSelectorPanel({panel:this,labels:SE.labels.dboard,viewMode:"fullDouble"});
	    this.dateNavigation = new SE.DateNavigation({panel:this,labels:SE.labels.dboard});
	    if(SE.Params.dayChartEnhancmentEnabled) this.dateNavigation.addDayNav(this.selectPanel.daySelectPanel.el)
		this.dateNavigation.addWeekNav(this.selectPanel.weekSelectPanel.el);
		this.dateNavigation.addMonthNav(this.selectPanel.monthSelectPanel.el);
		this.dateNavigation.addYearNav(this.selectPanel.yearSelectPanel.el);
    },     	
	setSelectPanel:function()
	{

	},
	setDaySelect:function()
	{
		Ext.getCmp('select_panel').show();
		Ext.getCmp('select_panel').layout.setActiveItem(this.parent.tabOrderArr.indexOf('day'));
		this.parent.dateRange.dateDayRange(this.parent.start_day_gmt);
	},
	setWeekSelect:function()
	{
		Ext.getCmp('select_panel').show();
		Ext.getCmp('select_panel').layout.setActiveItem(this.parent.tabOrderArr.indexOf('week'));
		this.parent.dateRange.dateWeekRange(this.parent.start_week_gmt);
	},
	setMonthSelect:function()
	{
		Ext.getCmp('select_panel').show();
		Ext.getCmp('select_panel').layout.setActiveItem(this.parent.tabOrderArr.indexOf('month'));
		this.parent.dateRange.dateMonthRange();
	},
	setYearSelect:function()
	{
		Ext.getCmp('select_panel').show();
		Ext.getCmp('select_panel').layout.setActiveItem(this.parent.tabOrderArr.indexOf('year'));
		this.parent.dateRange.dateYearRange();
	},
	setTotalSelect:function()
	{
		Ext.getCmp('select_panel').hide();
		this.parent.dateRange.dateTotalRange();
	},
		
		createLayer:function(panel)
	{
			}
});

	
SE.PowerAndEnergy = Ext.extend(Ext.Panel, {
    initComponent: function() {
        var loadDataUsingApi = true; //TODO feature flag
        if(SE.EnergyChartPanel) {
            if(loadDataUsingApi) {
                this.loadChartUsingApi();
            } else {
                this.energyChartData.monthPR = SE.PrChartsUtil.preProccessSyncedMonthPR(this.energyChartData.dailyPerformanceRatio);
                this.energyChartData.yearPR = SE.PrChartsUtil.preProccessSyncedYearPR(this.energyChartData.monthlyPerformanceRatio,
                                                                                      this.energyChartData.yearlyPerformanceRatio);
                this.energyChartData.totalPR = SE.PrChartsUtil.preProccessSyncedTotalPR(this.energyChartData.yearlyPerformanceRatio,this.energyChartData.year_range);
                this.energyChartPanel = this.createEnergyChartPanel(this.renderTo);
            }
        }
        SE.PowerAndEnergy.superclass.initComponent.call(this);
    },
    loadChartUsingApi:function() {
        Ext.Ajax.request({
            url:SE.AppURL.apigwContext+'/api/site/'+SE.Params.fieldId+'/energyDashboardChart?chartField=MONTH&foldUp=true',
            method:'GET',
            parent:this,
            waitMsg:SE.labels.base.pleaseWait,
            scope:this,
            success:function(result,request) {
                var rawData = Ext.util.JSON.decode(result.responseText);
                this.energyChartData = ChartsDataMapper.mapEnergyChartData(rawData,'MONTH');
                this.energyChartPanel = this.createEnergyChartPanel(this.el);
                this.energyChartPanel.fieldStartDate = rawData.fieldStartDate;
                this.energyChartPanel.fieldEndDate = rawData.fieldEndDate;
                this.energyChartPanel.dataStartDate = rawData.dataStartDate;
                this.energyChartPanel.dataEndDate = rawData.dataEndDate;
                this.energyChartPanel.utilData = rawData.utilizationMeasures;
                this.energyChartPanel.isMSCMode = rawData.isMSCMode;
				            },
            failure:function(result,request) {
              new SE.ErrorMsg(result,request);
            }
        });
    },
    createEnergyChartPanel:function(renderTo) {
        var energyChartParams = Ext.apply(this.energyChartData,
                                  {id:'power_energy_panel',
                                   panelWidth:this.panelWidth,
                                   title:SE.labels.dboard.powerAndEnergyPanel,
                                   style:this.chartStyle,
                                   powerEnergyHeight:this.powerEnergyHeight,
                                   forceHideUtilMeasures:this.forceHideUtilMeasures,
                                  });
        return new SE.EnergyChartPanel(renderTo,energyChartParams);
    },
    energyChartData: {
                    "field_start_date":{},
            "field_end_date":{},
            "year_range":[],
            "start_week":0,
            "end_week":{},
            "end_week_next":0,
            "power_chart_periodic":[],
            "power_chart_periodic_c":[],
            "energy_chart_month_by_day":[],
            "energy_chart_month_by_day_total":0,
            "energy_chart_month_by_day_max":0,
            "energy_chart_month_by_day_total_c":0,
            "energy_chart_month_by_day_max_c":0,
            "energy_chart_year_by_month":[],
            "energy_chart_year_by_month_total":0,
            "energy_chart_year_by_month_max":0,
            "energy_chart_year_by_month_total_c":0,
            "energy_chart_year_by_month_max_c":0,
            "prev_month_date":0,
            "next_month_date":0,
            "prev_year_date":0,
            "next_year_date":0,
            "year_uom":"",
            "month_uom":""
            }
});

SE.Params.isDoubleChart = false;