/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Wolfram v. Hülsen
* @copyright   2012 - 2024
* @license     GPL [http://www.gnu.de]
* @version     1.0
*
* @title       Plot Analyser
* @category    visu
* @icon        icons/ws/measure_power_meter.svg
* @color       #b00
* @description Analyse plots with flexible configuration of series parameters
* @description_de Analysieren von Plots mit flexibler Eingabe von Parametern
*
* -----------------------------------------------------------------------------
*/


{% extends "apps.html" %}

{% block sidebar %}
	<style type="text/css">
		.base .secondary {
			display: block;
		}
		@media all and (max-width: 767px) {
			.base .secondary {
				width: 100%;
			}
		´}
		
		.apdisplay .ui-field-contain,
		.apdisplay .ui-input-text {
			margin: .2em 0;
		}
		.apdisplay .ui-field-contain .ui-help-container .ui-input-text {
			margin: .2em 2.5em .2em 0;
		}
		.apdisplay .ui-select{
			margin:0;
			padding: 0 2% 0 2%;
			
		}
		.apdisplay .ui-select .ui-btn { 
			scale: 80%;
		}
	</style>
	<div>
		<div class="app">
			<div class="image" style="background-color: #b00;"><img src="icons/ws/measure_power_meter.svg" alt="Plot Analyser"></div>
		</div>
		<h3 style="padding: 40px 0 8px 0;">Plot Analyser</h3>
	</div>

	<h2>{{ lang('plot_analyser', 'Global') }}:</h2>
	<div class= "apdisplay" style="overflow-x:auto;">
		<div class="ui-field-contain">
			<label for="apDataSource">{{ lang('plot_analyser', 'Source') }}</label>
			<select id="apDataSource"><option value="database">{{ lang('plot_analyser', 'Database') }}</option><option value="item">Item</option></select>
		</div>
		<div class="ui-field-contain" style="width:30%; display:inline-block;"><label style="width:30%;">{{ lang('plot_analyser', 'Time') }}</label></div>
		<div class="ui-field-contain" style="width:34%;display:inline-block;">
			<label for="apTmin">tmin</label>
			<input id="apTmin"/>
		</div>
		<div class="ui-field-contain" style="width:34%; float:right;">
			<label for="apTmax">tmax</label>
			<input id="apTmax"/>
		</div>
		<hr>
		<table>
			<tr>
				<td style = "width:30%;"></td><td style = "width:17%;">Y {{ lang('plot_analyser', 'Axis') }} 1</td><td style = "width:17%;">Y {{ lang('plot_analyser', 'Axis') }} 2</td><td style = "width:17%;">Y {{ lang('plot_analyser', 'Axis') }} 3</td><td style = "width:17%;">Y {{ lang('plot_analyser', 'Axis') }} 4</td>
			</tr>
			<tr>
				<td>{{ lang('plot_analyser', 'Axis') }} {{ lang('plot_analyser', 'active') }}</td><td><input type="checkbox" id="apYact1"></td><td><input type="checkbox" id="apYact2"></td><td><input type="checkbox" id="apYact3"></td><td><input type="checkbox" id="apYact4"></td>
			</tr>
			<tr>
				<td> Y min</td><td><input id="apYmin1"/></td><td><input id="apYmin2"/></td><td><input id="apYmin3"/></td><td><input id="apYmin4"/></td>
			</tr>
			<tr>
				<td> Y max</td><td><input id="apYmax1"/></td><td><input id="apYmax2"/></td><td><input id="apYmax3"/></td><td><input id="apYmax4"/></td>
			</tr>
			<tr>
				<td> Y {{ lang('plot_analyser', 'Axis') }} Position</td>
				<td><select id="apYpos1"><option value="0">{{ lang('plot_analyser', 'left') }}</option><option value="1">{{ lang('plot_analyser', 'right') }}</option></select></td>
				<td><select id="apYpos2"><option value="0">{{ lang('plot_analyser', 'left') }}</option><option value="1">{{ lang('plot_analyser', 'right') }}</option></select></td>
				<td><select id="apYpos3"><option value="0">{{ lang('plot_analyser', 'left') }}</option><option value="1">{{ lang('plot_analyser', 'right') }}</option></select></td>
				<td><select id="apYpos4"><option value="0">{{ lang('plot_analyser', 'left') }}</option><option value="1">{{ lang('plot_analyser', 'right') }}</option></select></td>
			</tr>
			<tr>
				<td> Y {{ lang('plot_analyser', 'Axis') }} {{ lang('plot_analyser', 'scale') }}</td>
				<td><select id="apYtype1"><option value="linear">linear</option><option value="logarithmic">logarithm</option><option value="boolean">bool</option></select></td>
				<td><select id="apYtype2"><option value="linear">linear</option><option value="logarithmic">logarithm</option><option value="boolean">bool</option></select></td>
				<td><select id="apYtype3"><option value="linear">linear</option><option value="logarithmic">logarithm</option><option value="boolean">bool</option></select></td>
				<td><select id="apYtype4"><option value="linear">linear</option><option value="logarithmic">logarithm</option><option value="boolean">bool</option></select></td>
			</tr>
			<tr>
				<td> Y {{ lang('plot_analyser', 'Axis') }} {{ lang('plot_analyser', 'Unit') }}</td><td><input id="apYunit1"/></td><td><input id="apYunit2"/></td><td><input id="apYunit3"/></td><td><input id="apYunit4"/></td>
			</tr>
		</table>

		<div class="ui-field-contain">
			<label for="apChartopts">Chart options</label>
			<div class="ui-help-container">
				<a href="#apChartopts_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
				<div data-role="popup" id="apChartopts_hint" data-arrow="true" data-theme="c">
					{{ lang('plot_analyser', 'Chartopts', 'hint') }}
				</div>
				<input id="apChartopts"/>
			</div>
		</div>
		<hr/>
		<h2>{{ lang('plot_analyser', 'itemSettings') }}:</h2>
			{%
		set sources = {
			'1': 'Item 1',
			'2': 'Item 2',
			'3': 'Item 3',
			'4': 'Item 4',
			'5': 'Item 5'
		}
		%}

		<div data-role="tabs" id="apSource">
			<div data-role="navbar">
				<ul>
				{% for source, title in sources %}
						<li data-source="{{ source }}"><a href="#ap_tab_{{ source }}" data-ajax="false"{{ loop.first ? ' class="ui-btn-active"'|raw }}>{{ title }}</a></li>
				{% endfor %}
				</ul>
			</div>
			<hr>
		{% for source, title in sources %}
		<div id="ap_tab_{{ source }}">
			<form class="configform">
				<fieldset>
					<div class="ui-field-contain">
						<label for="apItem{{source}}">Item(s)</label>
						<div class="ui-help-container">
							<a href="#apItem{{source}}_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
							<div data-role="popup" id="apItem{{source}}_hint" data-arrow="true" data-theme="c">
								{{ lang('plot_analyser', 'Item', 'hint') }}
							</div>
							<input id="apItem{{source}}"/>
						</div>
					</div>
					<div class="ui-field-contain">
						<label for="apMode{{source}}"> DB Aggregation</label>
						<select id="apMode{{source}}">
						</select>
					</div>
					<div class="ui-field-contain">
						<label for="apCount">{{ lang('plot_analyser', 'Count', 'label') }}</label>
						<div class="ui-help-container">
							<a href="#apCount{{source}}_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
							<div data-role="popup" id="apCount{{source}}_hint" data-arrow="true" data-theme="c">
								{{ lang('plot_analyser', 'Count', 'hint') }} Default: 100
							</div>
							<input id="apCount{{source}}"/>
						</div>
					</div>
					<div class="ui-field-contain">
						<label for="apExposure{{source}}">{{ lang('plot_analyser', 'Exposure', 'label') }}</label>
						<div class="ui-help-container">
							<a href="#apExposure{{source}}_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
							<div data-role="popup" id="apExposure{{source}}_hint" data-arrow="true" data-theme="c">
								{{ lang('plot_analyser', 'Exposure', 'hint') }} line, linestack, stair, spline, area, areastair, areaspline, areastack, column, columnstack. Default: line
							</div>
							<input id="apExposure{{source}}"/>
						</div>
					</div>
					<div class="ui-field-contain">
						<label for="apColor{{source}}">{{ lang('plot_analyser', 'Color', 'label') }}</label>
						<div class="ui-help-container">
							<a href="#apColor{{source}}_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
							<div data-role="popup" id="apColor{{source}}_hint" data-arrow="true" data-theme="c">
								{{ lang('plot_analyser', 'Color', 'hint') }} 
							</div>
							<input id="apColor{{source}}"/>
						</div>
					</div>
					<div class="ui-field-contain">
						<label for="apAssign{{source}}">{{ lang('plot_analyser', 'Assign', 'label') }} </label>
						<div class="ui-help-container">
							<a href="#apAssign{{source}}_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
							<div data-role="popup" id="apAssign{{source}}_hint" data-arrow="true" data-theme="c">
								{{ lang('plot_analyser', 'Assign', 'hint') }} 
							</div>						
							<input id="apAssign{{source}}"/>
						</div>
					</div>
							<div class="ui-field-contain">
						<label for="apStacking{{source}}">Stacking(s)</label>
						<div class="ui-help-container">
							<a href="#apStacking{{source}}_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
							<div data-role="popup" id="apStacking{{source}}_hint" data-arrow="true" data-theme="c">
								{{ lang('plot_analyser', 'Stacking', 'hint') }} normal, percent. Default: normal
							</div>						
							<input id="apStacking{{source}}"/>
						</div>
					</div>
					<div class="ui-field-contain">
						<label for="apStacks{{source}}">Stack(s)</label>
						<div class="ui-help-container">
							<a href="#apStacks{{source}}_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
							<div data-role="popup" id="apStacks{{source}}_hint" data-arrow="true" data-theme="c">
								{{ lang('plot_analyser', 'Stacks', 'hint') }} 
							</div>						
							<input id="apStacks{{source}}"/>
						</div>
					</div>
				</form>
			</div>
		{% endfor %}
		</div>
	</div>
	<hr>
	<button id="apSubmit">Start Plot</button>

{% endblock %}


{% block content %}
	
	<style type="text/css">
		.apdisplay .highcharts-root:not(.supersized) {
			max-height: 800px;
		}
		.apdisplay .plot.plot-highstock {
			height: 500px;
		}
		.apdisplay .twig {
			-webkit-touch-callout: none!important;
			-webkit-user-select: text!important;
			-moz-user-select: text!important;
			-ms-user-select: text!important;
			user-select: text!important;
			font-size: 1.2em;
			white-space: nowrap;
			overflow-x: scroll;	
			padding-bottom: 1em;
		}
	</style>
	
   {% set mode = "raw" %} 			/** just init to activate boost mode */
   {% set zoom = "advanced" %} 		/** enable navigator */
   {% set export = 2 %} 			/** activate export menu */

	<div id="analyse-plots" data-widget="app.analyse_plots" class="apdisplay">
	
		{{ plot.period('analyse-plotpopup', item, mode, tmin, tmax, ymin, ymax, count, label, color, exposure, axis, zoom, assign, opposite, ycolor, ytype, unit, chartoptions, stacking, stacks, export, source) }}

		<div style="display:inline-block">
			<span style="width:25%">{{ lang('plot_analyser', 'Shift', 'label') }}:&nbsp;&nbsp;</span><span style="display:inline-block;width:30%" ><input id="apShift" value="1d"/></span>{{ plot.timeshift('analyse-timeshift','analyse-plotpopup', '1d','mini', '- 1d +') }}
		</div>
		<br>
		<h2>{{ lang('plot_analyser', 'Code', 'label') }}: </h2>
		<div id="apWidgetCode" class="twig">
				{% filter trim|escape|nl2br %}{% verbatim %}
				{{ plot.period(...) }}
				{% endverbatim %}{% endfilter %}
		</div>
	</div>

/**	options not (yet) used
	data-axis = [ x axix name and y axis name(s) ]
	data-ycolor = [colors of y axes ]
*/


	<script type="text/javascript">
		$('#{{ page }}').on('pagecreate', function (event, ui) {
			
			// get available database modes from backend driver and make
			// them selectable options
			// var modes = io.aggregates ? io.aggregates.concat(['minmax', 'minmaxavg']) : ['avg', 'min', 'max', 'diff', 'sum', 'on', 'raw', 'count', 'countall', 'integrate', 'differentiate', 'duration', 'minmax', 'minmaxavg'];
			var modes = io.aggregates.concat(['minmax', 'minmaxavg']);
			var modeslist = ""
			$.each(modes, function(idx, mode){
				modeslist += "<option value=\"" + mode + "\">" +  mode  + "</option>";
			})
			for (var i=1; i<6; i++){
				$('#apMode'+ i).append(modeslist).val('avg').selectmenu('refresh');
			}
			
			// start plot display on button click
			$('#apSubmit ').on('click', function(event,ui){
			
				var plot = $('[id*="analyse-plotpopup"]');
				var plotId = plot.attr('id');
				var that = plot.data().svWidget;
								
				// stop subscription for actual plot
				if (io.stopseries )
					io.stopseries(plot);
				that.element.highcharts().destroy();
				var apSeries = "", apCount = "", apExposure = "", apColor = "", apMode = "", apLabel = "", apAssign = "", apStacking = "", apStacks = "", apBaseItems = "";

				// Data source: database or item
				var apDataSource = $('#apDataSource').val().toString() || 'database';

				// time axis
				var apTmin = $('#apTmin').val().toString() || '1h';
				var apTmax = $('#apTmax').val().toString() || 'now';
				
				//y-axis parameters for 4 axes				
				var apYmins = [], apYmaxs = [], apYtypes = [],apYposs = [], apYunits = [];
				// check active axis with highest number
				for (var i=1; i<5; i++){
					if ($('#apYact'+i).prop('checked'))
						var apMaxYaxis = i;
				}
				// evaluate settings up to highest active axis
				for (var i=1; i<apMaxYaxis+1; i++){
					apYmins[i-1]  = $('#apYmin'+i).val().toString() || ''; 
					apYmaxs [i-1] = $('#apYmax'+i).val().toString() || '';
					apYtypes[i-1] = $('#apYtype'+i).val().toString();
					apYposs[i-1]  = $('#apYpos' +i).val().toString();
					apYunits[i-1] = $('#apYunit' +i).val().toString() || '';
				}
				var apYmin = apYmins.join(',');
				var apYmax = apYmaxs.join(',');
				var apYtype = apYtypes.join(',');
				var apYpos = apYposs.join(',');
				var apYunit = apYunits.join(',');
				var apChartopts = $('#apChartopts').val() || '';

				// item specific settings organized in 5 tabs
				for (var source = 1; source < 6; source++){
					var apItems = $('#apItem'+ source).val().toString().split(/,\s*/);
					if (apItems =='')
						apItems = null;
					var apModes = $('#apMode' + source).val().toString();
					var apCounts = $('#apCount' + source).val().toString().split(/,\s*/);
					var apExposures = $('#apExposure' + source).val().toString().split(/,\s*/);
					var apColors = $('#apColor' + source).val().toString().split(/,\s*/);
					var apAssigns = $('#apAssign' + source).val().toString().split(/,\s*/);
					var apStackings = $('#apStacking' + source).val().toString().split(/,\s*/);
					var apStackss = $('#apStacks' + source).val().toString().split(/,\s*/);

					// every tab can have more than one item
					$.each(apItems, function(idx, apItem){
						var delimiter = (idx == 0 && source== 1) ? '': ',';
						if (apSeries != '')
							apSeries += ',';
						if (apCounts[idx] == undefined || apCounts[idx] == '')
							apCounts[idx] = 100;
						if (apExposures[idx] == undefined || apExposures[idx] == '')
							apExposures[idx] = 'line';
						if (apColors[idx] == undefined) 
							apColors[idx] = '';
						if (apAssigns[idx] == undefined || apAssigns[idx] == '')
							apAssigns[idx] = 1;
						if (apStackings[idx] == undefined || apStackings[idx] == '') 
							apStackings[idx] = 'normal';
						if (apStackss[idx] == undefined) 
							apStackss[idx] = '';
						if (apDataSource == 'database'){
							if (apModes.indexOf("minmax") == 0){
								apSeries += [apItem, "min", apTmin, apTmax, apCounts[idx]].join('.') +',';
								apSeries += [apItem, "max", apTmin, apTmax, apCounts[idx]].join('.');
								if (apModes == "minmaxavg")
									apSeries += ',' + [apItem, "avg", apTmin, apTmax, apCounts[idx]].join('.');
							} else
									apSeries += [apItem, apModes, apTmin, apTmax, apCounts[idx]].join('.');
						} else
							apSeries += apItem;

						apLabel += delimiter + apItem;
						apCount += delimiter + apCounts[idx];
						apExposure += delimiter + apExposures[idx];
						apColor += delimiter + apColors[idx];
						apMode += delimiter + apModes;
						apAssign += delimiter + apAssigns[idx];
						apStacking += delimiter + apStackings[idx];
						apStacks += delimiter + apStackss[idx];
						apBaseItems += delimiter + apItem;
					})
				}

				// populate widget parameters from input elements
				plot.attr('data-tmin', apTmin);
				that.options.tmin = apTmin;
				plot.attr('data-tmax', apTmax);
				that.options.tmax = apTmax;
				plot.attr('data-ymin', apYmin);
				that.options.ymin = apYmin;
				plot.attr('data-ymax', apYmax);
				that.options.ymax = apYmax;
				plot.attr('data-ytype', apYtype);
				that.options.ytype = apYtype;
				plot.attr('data-opposite', apYpos);
				that.options.opposite = apYpos;
				plot.attr('data-unit', apYunit);
				that.options.unit = apYunit;
				plot.attr('data-chart-options', apChartopts);
				if (apChartopts != undefined && apChartopts != ''){
					try {that.options.chartOptions = JSON.parse(apChartopts);} 
					catch(error){notify.message('error', 'No valid JSON', 'please use quotes for the individual properties, e.g. {"rangeSelector":{"selected":"2"}}');}
				}
				
				plot.attr('data-item',  apSeries);
				that.options.item = apSeries;
				that.items = apSeries.split(',');
				plot.attr('data-mode',  apMode);
				that.options.mode = apMode;
				plot.attr('data-count', apCount);
				that.options.count = apCount;
				plot.attr('data-exposure', apExposure);
				that.options.exposure = apExposure;
				plot.attr('data-color', apColor);
				that.options.color = apColor;
				plot.attr('data-label', apLabel);
				that.options.label = apLabel;
				plot.attr('data-assign', apAssign);
				that.options.assign = apAssign;
				plot.attr('data-stacking', apStacking);
				that.options.stacking = apStacking;
				plot.attr('data-stacks', apStacks);
				that.options.stacks = apStacks;
				
				that._create()
								
				// start new series subscription
				if (io.startseries)
					io.startseries(plot);
					
				// update widget code display field
				var widgetCode = ["''", setWidgetParam(apBaseItems, ''), setWidgetParam(apMode, 'avg'), setWidgetParam(apTmin, '1h'), setWidgetParam(apTmax, 'now'), setWidgetParam(apYmin, ''), setWidgetParam(apYmax, ''),
								 setWidgetParam(apCount, '100'), setWidgetParam(apLabel, ''), setWidgetParam(apColor, ''), setWidgetParam(apExposure, 'line'), "''", "'advanced'", setWidgetParam(apAssign, ''),
								 setWidgetParam(apYpos, ''), "''", setWidgetParam(apYtype, 'linear'), setWidgetParam(apYunit, ''), 	apChartopts ? apChartopts.replace(/\"/g, ''): "''", setWidgetParam(apStacking, 'normal'), setWidgetParam(apStacks, ''), "2", 
								 "'"+apDataSource+"'"	].join(', '); 
				var widgetCodeHtml = $('#apWidgetCode').html();
				$('#apWidgetCode').html(widgetCodeHtml.replace(/period\(.*\)/, 'period('+widgetCode+')'));
			});
			
			function setWidgetParam(widgetParam, defaultValue){
				if (widgetParam.split(/,\s*/).every(function(element){return element == defaultValue}))
					widgetParam = '';
				var paramLength = widgetParam.split(',').length;
				var ret = paramLength > 1 ? "['":"'";
				ret += widgetParam.split(/,\s*/).join("', '");
				ret += paramLength > 1 ? "']" : "'";
				return ret;
			}
			
			$('#apShift').on('change', function () {
				var apShift = $('#apShift').val();
				var timeshift = $('[id*="analyse-timeshift"]');
				var tsWidget = timeshift.data().svWidget;
				timeshift.attr('data-step', apShift);
				tsWidget.options.step = apShift;
				$('#app_analyse_plots-analyse-timeshift')[0].childNodes[1].data = '- ' + apShift + ' +\n\t\t'
			})
		});

	</script>

	<hr />
{% endblock %}