view.php

<?php
defined('EMONCMS_EXEC') or die('Restricted access');
/*
All Emoncms code is released under the GNU Affero General Public License.
See COPYRIGHT.txt and LICENSE.txt.

---------------------------------------------------------------------
Emoncms - open source energy visualisation
Part of the OpenEnergyMonitor project:
http://openenergymonitor.org
*/

global $path, $session, $settings;

$apikey     = $_GET['apikey']    ?? '';
$feedidsLH  = $_GET['feedidsLH'] ?? '';
$feedidsRH  = $_GET['feedidsRH'] ?? '';
$load_saved = $_GET['load']      ?? '';

$min_feed_interval = 10;
if (isset($settings['feed']['min_feed_interval'])) {
	$min_feed_interval = (int) $settings['feed']['min_feed_interval'];
}
load_js("Lib/js/vue.global.prod-3.5.22.min.js");
load_js("Lib/js/flot-5.1.0.mod.min.js");
load_js("Lib/js/clipboard.js");
load_js("Lib/js/DateTimePicker.js");
load_css("Theme/css/datetimepicker.css");
load_css("Modules/graph/view.css");
?>

<div id="graph-view-app" class="panel-page">
	<!-- ── Graph card ─────────────────────────────────────────────── -->
	<div class="panel mt-2">

		<nav class="panel-header">
			<div class="panel-name">
				<span class="svg-icon-show_chart_bold text-primary"></span>&nbsp;
				<?php echo tr('Data viewer'); ?>
			</div>
			<button class="btn btn-default" v-if="histogramMode" @click="onHistogramBackClick"><?php echo tr('Back to main view'); ?></button>
		</nav>

		<!-- Normal navigation controls -->
		<div class="panel-header graph-toolbar" v-show="!histogramMode && !showTimeManual">
			<div class="input-group my-0">
				<button class="btn btn-default graph_time_refresh" title="<?php echo tr('Refresh'); ?>" @click="onGraphTimeRefresh"><i class="icon-repeat"></i></button>
				<select class="btn btn-default graph_time my-0" v-model="graphTimeHours" @change="onGraphTimeRefresh" style="width:auto;">
					<option value="1"><?php echo tr('1 hour'); ?></option>
					<option value="6"><?php echo tr('6 hours'); ?></option>
					<option value="12"><?php echo tr('12 hours'); ?></option>
					<option value="24"><?php echo tr('24 hours'); ?></option>
					<option value="168"><?php echo tr('1 Week'); ?></option>
					<option value="336"><?php echo tr('2 Weeks'); ?></option>
					<option value="720"><?php echo tr('Month'); ?></option>
					<option value="8760"><?php echo tr('Year'); ?></option>
					<option value="43800"><?php echo tr('5 Years'); ?></option>
				</select>
			</div>

			<button class="btn btn-default my-0 ms-1" title="<?php echo tr('Select time window'); ?>" @click="showTimeManual = true"><i class="icon-resize-horizontal"></i></button>

			<div class="btn-group my-0 ms-1">
				<button class="btn btn-default px-3" id="graph_zoomin" title="<?php echo tr('Zoom In'); ?>" @click="onZoomIn">+</button>
				<button class="btn btn-default px-3" id="graph_zoomout" title="<?php echo tr('Zoom Out'); ?>" @click="onZoomOut">−</button>
				<button class="btn btn-default px-3" id="graph_left" title="<?php echo tr('Earlier'); ?>" @click="onPan(-1)"><</button>
				<button class="btn btn-default px-3" id="graph_right" title="<?php echo tr('Later'); ?>" @click="onPan(1)">></button>
			</div>

			<div id="showcontrols" class="d-flex align-items-center">
				<label class="ctrl-checkbox d-flex align-items-center m-0"><input type="checkbox" id="showlegend" v-model="state.showlegend"> <?php echo tr('Legend'); ?></label>
			</div>
		</div>

		<!-- Date-time picker controls -->
		<div class="panel-header graph-toolbar time-manual-controls" v-show="!histogramMode && showTimeManual">
			<div class="input-group my-0">
				<span class="input-group-text"><?php echo tr('Start'); ?></span>
				<date-time-picker v-model="startLocal" @change="onWindowInputChange"></date-time-picker>
			</div>

			<div class="input-group my-0">
				<span class="input-group-text"><?php echo tr('End'); ?></span>
				<date-time-picker v-model="endLocal" @change="onWindowInputChange"></date-time-picker>
			</div>

			<button class="btn btn-default my-0" title="<?php echo tr('Done'); ?>" @click="showTimeManual = false"><i class="icon-ok"></i></button>
		</div>

		<!-- Histogram controls -->
		<div class="panel-header" v-show="histogramMode">
			<div class="input-group">
				<span class="input-group-text"><?php echo tr('Type'); ?></span>
				<select class="form-select input-220" v-model="histogramType" @change="drawHistogram">
					<option value="timeatvalue"><?php echo tr('Time at value'); ?></option>
					<option value="kwhatpower"><?php echo tr('kWh at Power'); ?></option>
				</select>
				<span class="input-group-text"><?php echo tr('Resolution'); ?></span>
				<input type="text" class="form-control input-220" v-model="histogramResolution" @change="drawHistogram">
			</div>
		</div>

		<!-- Graph area -->
		<div class="panel-body">
			<div id="legend" v-show="!errorMessage"></div>
			<div id="placeholder_bound" :class="{'has-error': !!errorMessage}" style="width:100%; height:400px;">
				<div id="placeholder" class="w-100 h-100" v-show="!errorMessage"></div>
				<div id="error" class="graph-window-error" :class="errorType==='info' ? 'is-info' : 'is-error'" v-show="errorMessage">
					<div class="graph-window-error-title">{{ errorMessage }}</div>
					<div class="graph-window-error-actions" v-if="errorBadFeedIds.length">
						<button type="button" class="btn btn-default" @click="onRemoveMissingFeeds"><?php echo tr('Remove missing'); ?></button>
					</div>
				</div>
			</div>
		</div>
		<div class="panel-body" style="border-top: 1px solid var(--border)" v-show="!histogramMode">
			<div id="window-info" class="window-info" v-if="windowInfo">
				<b><?php echo tr('Window'); ?>:</b> {{ windowInfo.start }} <b>&#x2192;</b> {{ windowInfo.end }}
				&nbsp;&middot;&nbsp; <b><?php echo tr('Length'); ?>:</b> {{ windowInfo.length }}
				<span v-if="windowInfo.floating">&nbsp;&middot;&nbsp; <b><?php echo tr('Floating time on'); ?></b></span>
			</div>

		</div>
	<!-- ── Options card ───────────────────────────────────────────── -->

		<div class="panel-controls graph-toolbar" style="border-top: 1px solid var(--border);" v-show="!histogramMode">

			<div class="controls-row controls-row-top d-flex justify-content-between">
				<div class="input-group interval-controls d-flex justify-content-start">
					<span class="input-group-text"><?php echo tr('Type'); ?></span>
					<select id="request-type" class="form-select input-auto flex-grow-0" v-model="state.mode" @change="onReload">
						<option value="interval"><?php echo tr('Fixed Interval'); ?></option>
						<option value="daily"><?php echo tr('Daily'); ?></option>
						<option value="weekly"><?php echo tr('Weekly'); ?></option>
						<option value="monthly"><?php echo tr('Monthly'); ?></option>
						<option value="annual"><?php echo tr('Annual'); ?></option>
					</select>

					<input v-show="state.mode==='interval'" id="request-interval" type="text" class="form-control flex-grow-0"
						:value="state.fixinterval ? state.interval : state.interval + 's (auto)'"
						:readonly="!state.fixinterval"
						:class="{'interval-input-auto': !state.fixinterval}"
						:title="state.fixinterval ? '' : '<?php echo tr('Click to edit and fix interval'); ?>'"
						@click="onIntervalInputClick"
						@keydown="onIntegerKeydown"
						@change="onIntervalInputChange"
						style="width:104px; text-align:center">
					<button v-show="state.mode==='interval' && state.fixinterval" class="btn btn-default input-group-text" @click="onIntervalResetAuto" title="<?php echo tr('Return to auto interval'); ?>">&#x2715;</button>
				</div>

				<div class="axes-controls">
					<div id="yaxis_left" class="input-group me-2" v-show="leftCount > 0">
						<span class="input-group-text px-2">L</span>
						<!-- Left Y-axis min -->
						<input class="form-control yaxis-minmax" id="yaxis-min" type="text"
							:value="state.yaxismin === 'auto' ? 'auto' : state.yaxismin"
							:readonly="state.yaxismin === 'auto'"
							:class="{'interval-input-auto': state.yaxismin === 'auto'}"
							:title="state.yaxismin === 'auto' ? '<?php echo tr('Click to set min'); ?>' : ''"
							@click="onYAxisInputClick('left', 'min', $event)"
							@keydown="onDecimalKeydown"
							@change="onYAxisMinMaxChange('left', 'min', $event)">
						<!-- Left Y-axis max -->
						<input class="form-control yaxis-minmax" id="yaxis-max" type="text"
							:value="state.yaxismax === 'auto' ? 'auto' : state.yaxismax"
							:readonly="state.yaxismax === 'auto'"
							:class="{'interval-input-auto': state.yaxismax === 'auto'}"
							:title="state.yaxismax === 'auto' ? '<?php echo tr('Click to set max'); ?>' : ''"
							@click="onYAxisInputClick('left', 'max', $event)"
							@keydown="onDecimalKeydown"
							@change="onYAxisMinMaxChange('left', 'max', $event)">
						<button class="btn btn-default input-group-text" v-show="!leftAxisIsAuto" @click="resetYAxis('left')">&#x2715;</button>
					</div>

					<div id="yaxis_right" class="input-group" v-show="rightCount > 0">
						<span class="input-group-text px-2">R</span>
						<!-- Right Y-axis min -->
						<input class="form-control yaxis-minmax" id="yaxis-min2" type="text"
							:value="state.yaxismin2 === 'auto' ? 'auto' : state.yaxismin2"
							:readonly="state.yaxismin2 === 'auto'"
							:class="{'interval-input-auto': state.yaxismin2 === 'auto'}"
							:title="state.yaxismin2 === 'auto' ? '<?php echo tr('Click to set min'); ?>' : ''"
							@click="onYAxisInputClick('right', 'min', $event)"
							@keydown="onDecimalKeydown"
							@change="onYAxisMinMaxChange('right', 'min', $event)">
						<!-- Right Y-axis max -->
						<input class="form-control yaxis-minmax" id="yaxis-max2" type="text"
							:value="state.yaxismax2 === 'auto' ? 'auto' : state.yaxismax2"
							:readonly="state.yaxismax2 === 'auto'"
							:class="{'interval-input-auto': state.yaxismax2 === 'auto'}"
							:title="state.yaxismax2 === 'auto' ? '<?php echo tr('Click to set max'); ?>' : ''"
							@click="onYAxisInputClick('right', 'max', $event)"
							@keydown="onDecimalKeydown"
							@change="onYAxisMinMaxChange('right', 'max', $event)">
						<button class="btn btn-default input-group-text" v-show="!rightAxisIsAuto" @click="resetYAxis('right')">&#x2715;</button>
					</div>
				</div>
			</div>

			<div class="controls-row interval-options-row d-flex flex-column" v-show="state.mode==='interval'">
				<div class="interval-toggle-grid d-flex" :class="{ 'is-expanded': state.removeNull }">
					<!--
					<label class="interval-toggle-item" for="request-limitinterval">
						<input id="request-limitinterval" type="checkbox" v-model="state.limitinterval">
						<span><?php echo tr('Limit to data interval'); ?></span>
					</label>-->

					<div class="interval-toggle-item interval-toggle-item-fill d-flex align-items-center m-0">
						<label class="interval-toggle-check d-flex align-items-center m-0" for="request-removenull">
							<input id="request-removenull" type="checkbox" class="remove-null" v-model="state.removeNull" @change="onRemoveNullChange">
							<span><?php echo tr('Fill nulls with last value'); ?></span>
						</label>
						<span class="input-group interval-max-fill my-0" v-if="state.removeNull">
							<span class="input-group-text"><?php echo tr('Max fill'); ?></span>
							<input type="text" class="form-control remove-null-max-duration" v-model="state.removeNullMaxDuration" @change="onRemoveNullChange" style="width:64px; text-align:center">
							<span class="input-group-text"><?php echo tr('seconds'); ?></span>
						</span>
					</div>

					<label class="interval-toggle-item interval-toggle-item-end d-flex align-items-center m-0" for="showmissing"
						:title="anyDeltaEnabled ? '<?php echo tr('Required while delta is enabled'); ?>' : ''">
						<input type="checkbox" id="showmissing" v-model="state.showmissing" :disabled="anyDeltaEnabled">
						<span><?php echo tr('Show gaps'); ?></span>
					</label>

					<label class="interval-toggle-item ctrl-checkbox d-flex align-items-center m-0" for="showtag">
						<input type="checkbox" id="showtag" v-model="state.showtag">
						<span><?php echo tr('Feed tag'); ?></span>
					</label>
				</div>


			</div>

		</div><!-- .panel-controls -->
	</div>
	<!-- ── Feeds options & stats ───────────────────────────────────────────── -->




	<div class="panel mt-3">
		<div class="panel-header">
			<div class="graph-section-switcher" v-show="!histogramMode">
				<div class="btn-group">
					<button class="btn btn-default" :class="{active: activeSection === 'config'}" @click="showOptions"><i class="icon-cog"></i> Feed Config</button>
					<button class="btn btn-default" :class="{active: activeSection === 'stats'}" @click="showStats"><i class="icon-signal"></i> Feed Stats</button>
					<button class="btn btn-default" :class="{active: activeSection === 'csv'}" @click="showCsvSection"><i class="icon-download-alt"></i> CSV Export</button>
					<button v-if="canEdit" class="btn btn-default" :class="{active: activeSection === 'editor'}" @click="showEditorSection"><i class="icon-pencil"></i> <?php echo tr('Editor'); ?></button>
				</div>
			</div>
		</div>

		<div class="feed-options" :class="{hide: state.feedlist.length===0 || histogramMode}" v-show="!histogramMode && !state.showcsv && !editorMode">
			<div class="panel">
				<div id="tables">
					<table id="feed-options-table" v-show="!state.showStats">
						<colgroup>
							<col style="width:40px">
							<col style="width:50px">
							<col>
							<col style="width:100px">
							<col style="width:65px">
							<col style="width:55px">
							<col style="width:65px">
							<col style="width:72px">
							<col style="width:72px">
							<col style="width:70px">
							<col style="width:100px">
							<col style="width:50px">
							<col style="width:130px">
						</colgroup>
						<thead>
							<tr>
								<th></th>
								<th><?php echo tr('Id'); ?></th>
								<th><?php echo tr('Feed'); ?></th>
								<th><?php echo tr('Type'); ?></th>
								<th><?php echo tr('Color'); ?></th>
								<th><?php echo tr('Fill'); ?></th>
								<th><?php echo tr('Stack'); ?></th>
								<th style="text-align:center"><?php echo tr('Scale'); ?></th>
								<th style="text-align:center"><?php echo tr('Offset'); ?></th>
								<th style="text-align:center"><?php echo tr('Delta'); ?></th>
								<th style="text-align:center"><?php echo tr('Average'); ?></th>
								<th><?php echo tr('DP'); ?></th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(feed, z) in state.feedlist" :key="feed.id">
								<td>
									<a v-if="z > 0" @click="moveFeed(z, -1)" title="<?php echo tr('Move up'); ?>" style="cursor:pointer"><i class="icon-arrow-up"></i></a>
									<a v-if="z < state.feedlist.length - 1" @click="moveFeed(z, 1)" title="<?php echo tr('Move down'); ?>" style="cursor:pointer"><i class="icon-arrow-down"></i></a>
								</td>
								<td>{{ feed.id }}</td>
								<td class="col-primary">{{ feedName(feed) }}</td>
								<td>
									<select class="form-select" style="width:80px" :value="feed.plottype" @change="setPlottype(feed, $event)">
										<option value="lines"><?php echo tr('Lines'); ?></option>
										<option value="bars"><?php echo tr('Bars'); ?></option>
										<option value="points"><?php echo tr('Points'); ?></option>
										<option value="steps"><?php echo tr('Steps'); ?></option>
									</select>
								</td>
								<td><input type="color" class="form-control form-control-color" style="width:46px" :value="feedColor(feed)" @input="setColor(feed, $event)"></td>
								<td style="text-align:center"><input type="checkbox" :checked="!!feed.fill" @change="setFill(feed, $event)"></td>
								<td style="text-align:center"><input type="checkbox" :checked="!!feed.stack" @change="setStack(feed, $event)"></td>
								<td style="text-align:center"><input type="text" class="form-control d-inline-block" style="width:64px" :value="feed.scale" @change="setScale(feed, $event)"></td>
								<td style="text-align:center"><input type="text" class="form-control d-inline-block" style="width:64px" :value="feed.offset" @change="setOffset(feed, $event)"></td>
								<td style="text-align:center"><input type="checkbox" :checked="!!feed.delta" @change="setDelta(feed, $event)"></td>
								<td style="text-align:center"><input type="checkbox" :checked="!!feed.average" @change="setAverage(feed, $event)"></td>
								<td>
									<select class="form-select" style="width:50px" :value="feed.dp" @change="setDp(feed, $event)">
										<option>0</option>
										<option>1</option>
										<option>2</option>
										<option>3</option>
									</select>
								</td>
								<td style="text-align:center"><button class="histogram btn btn-default" @click="onHistogramClick(feed.id)"><?php echo tr('Histogram'); ?></button></td>
							</tr>
						</tbody>
					</table>

					<table v-show="state.showStats" id="feed-stats-table">
						<thead>
							<tr>
								<th><?php echo tr('Id'); ?></th>
								<th><?php echo tr('Feed'); ?></th>
								<th><?php echo tr('Quality'); ?></th>
								<th><?php echo tr('Min'); ?></th>
								<th><?php echo tr('Max'); ?></th>
								<th><?php echo tr('Diff'); ?></th>
								<th><?php echo tr('Mean'); ?></th>
								<th><?php echo tr('Stdev'); ?></th>
								<th><?php echo tr('Wh'); ?></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="feed in state.feedlist" :key="'stats-'+feed.id">
								<td>{{ feed.id }}</td>
								<td>{{ feedName(feed) }}</td>
								<td>{{ feed.stats.quality }}% ({{ feed.stats.good }}/{{ feed.stats.total }})</td>
								<td>{{ Number(feed.stats.min).toFixed(feed.dp) }}</td>
								<td>{{ Number(feed.stats.max).toFixed(feed.dp) }}</td>
								<td>{{ Number(feed.stats.diff).toFixed(feed.dp) }}</td>
								<td>{{ Number(feed.stats.mean).toFixed(feed.dp) }}</td>
								<td>{{ Number(feed.stats.stdev).toFixed(feed.dp) }}</td>
								<td>{{ Number(feed.stats.wh).toFixed(1) }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="panel-controls" style="border-top: 1px solid var(--border)" v-show="!histogramMode && state.showcsv">
			<div class="controls-row">
				<div class="input-group">
					<span class="input-group-text csvoptions"><?php echo tr('Time format'); ?>:</span>
					<select id="csvtimeformat" class="form-select input-auto csvoptions" v-model="state.csvtimeformat">
						<option value="unix"><?php echo tr('Unix timestamp'); ?></option>
						<option value="seconds"><?php echo tr('Seconds since start'); ?></option>
						<option value="datestr"><?php echo tr('Date-time string'); ?></option>
					</select>
				</div>
				<div class="input-group">
					<span class="input-group-text csvoptions"><?php echo tr('Null values'); ?>:</span>
					<select id="csvnullvalues" class="form-select input-auto csvoptions" v-model="state.csvnullvalues">
						<option value="show"><?php echo tr('Show'); ?></option>
						<option value="lastvalue"><?php echo tr('Replace with last value'); ?></option>
						<option value="remove"><?php echo tr('Remove whole line'); ?></option>
					</select>
				</div>
				<div class="input-group">
					<span class="input-group-text csvoptions"><?php echo tr('Headers'); ?>:</span>
					<select id="csvheaders" class="form-select input-auto csvoptions" v-model="state.csvheaders">
						<option value="showNameTag"><?php echo tr('Show name and tag'); ?></option>
						<option value="showName"><?php echo tr('Show name'); ?></option>
						<option value="hide"><?php echo tr('Hide'); ?></option>
					</select>
				</div>
				<div class="ctrl-actions">
					<button id="download-csv" class="btn btn-default csvoptions" @click="onDownloadCsv"><?php echo tr('Download'); ?></button>
					<button class="btn btn-default csvoptions" id="copy-csv" type="button" @click="onCopyCsv"><?php echo tr('Copy'); ?> <i class="icon-share-alt"></i></button>
					<span id="copy-csv-feedback" class="csvoptions"></span>
				</div>
			</div>
			<textarea id="csv" class="form-control" style="height:500px; box-sizing:border-box" v-model="csvText"></textarea>
		</div><!-- .panel-controls (csv) -->

		<div class="panel-controls editor-section" style="border-top: 1px solid var(--border)" v-show="!histogramMode && editorMode">
			<p class="editor-note">
				<i class="icon-warning-sign"></i>
				<span><?php echo tr('Changes are written directly to the feed and cannot be undone.'); ?></span>
			</p>

			<!-- Individual datapoint editing -->
			<div class="editor-block">
				<h5 class="editor-heading"><?php echo tr('Edit individual datapoint'); ?></h5>
				<div v-if="editPoint" class="editor-point-row d-flex align-items-center">
					<div class="input-group my-0">
						<span class="input-group-text">{{ editPoint.name }}</span>
						<span class="input-group-text"><?php echo tr('Time'); ?></span>
						<input type="text" class="form-control" v-model="editPoint.time" style="width:124px">
						<span class="input-group-text"><?php echo tr('Value'); ?></span>
						<input type="text" class="form-control" v-model="editPoint.value" style="width:104px">
						<button class="btn btn-info" @click="onPointSave"><?php echo tr('Save'); ?></button>
						<button class="btn btn-default" @click="editPoint = null" title="<?php echo tr('Cancel'); ?>">&#x2715;</button>
					</div>
					<span class="editor-status" v-if="editStatus">{{ editStatus }}</span>
				</div>
				<p v-else class="editor-hint">{{ pointEditHint }}</p>
			</div>

			<!-- Per-feed window multiply -->
			<div class="editor-block">
				<h5 class="editor-heading">
					<?php echo tr('Multiply data in window'); ?>
					<i class="icon icon-question-sign" style="cursor:pointer" title="<?php echo tr('Enter a float (e.g. 2), a fraction (e.g. 1/2), NAN to erase the window to null, or abs(x) to convert to absolute values.'); ?>"></i>
				</h5>
				<table class="editor-table" v-if="state.feedlist.length">
					<tbody>
						<tr v-for="feed in state.feedlist" :key="'edit-'+feed.id">
							<td class="editor-feed-name">{{ feedName(feed) }}</td>
							<td><input type="text" class="form-control editor-multiply-input" v-model="multiplyValues[feed.id]" placeholder="2, 1/2, -1, NAN, abs(x)" :disabled="feedHasScaleOffset(feed)"></td>
							<td><button class="btn btn-info" @click="onMultiplySubmit(feed)" :disabled="feedHasScaleOffset(feed)"><?php echo tr('Save'); ?></button></td>
							<td class="editor-status">{{ feedHasScaleOffset(feed) ? '<?php echo tr('Remove the scale and offset to edit this feed'); ?>' : multiplyStatus[feed.id] }}</td>
						</tr>
					</tbody>
				</table>
				<p v-else class="editor-hint"><?php echo tr('Select one or more feeds to edit.'); ?></p>
			</div>
		</div><!-- .panel-controls (editor) -->
	</div>

	<Teleport to=".menu-l3">
		<div class="htop"></div>
		<h3 class="l3-title mx-3"><?php echo tr('Graph'); ?></h3>

		<!-- Feed selector -->
		<table id="feed-selector" class="table table-sm mx-3" style="width:90%">
			<colgroup>
				<col style="width:70%">
				<col style="width:15%">
				<col style="width:15%">
			</colgroup>
			<template v-for="(tagFeeds, tag) in feedsByTag" :key="tag">
				<thead>
					<tr class="tagheading" tabindex="0" @click="toggleTag(tag)" @keyup.enter="toggleTag(tag)">
						<th colspan="3"><span class="tag-caret"></span>{{ tag }}</th>
					</tr>
				</thead>
				<tbody v-show="!collapsedTags[tag]">
					<tr v-for="feed in tagFeeds" :key="feed.id" style="color:#666">
						<th class="feed-title" tabindex="0"
							@click="toggleFeedLeft(feed.id)" @keyup.enter="toggleFeedLeft(feed.id)">
							<span class="text-truncate d-inline-block">{{ feed.name.length > 20 ? feed.name.substr(0,20)+'..' : feed.name }}</span>
						</th>
						<td><input type="checkbox" :checked="leftChecked.has(feed.id)" @change="onYAxisChange(feed.id, 1, $event.target.checked)"></td>
						<td><input type="checkbox" :checked="rightChecked.has(feed.id)" @change="onYAxisChange(feed.id, 2, $event.target.checked)"></td>
					</tr>
				</tbody>
			</template>
		</table>

		<!-- My Graphs -->
		<div id="my_graphs" class="px-3">
			<h4>
				<a href="#" class="d-block" @click.prevent="savedGraphsCollapsed = !savedGraphsCollapsed">
					<?php echo tr('My Graphs'); ?>
					<span class="arrow arrow-down float-end"></span>
				</a>
			</h4>
			<div v-if="!savedGraphsCollapsed">
				<select id="graph-select" class="form-select mb-2" v-model="savedGraphSelected">
					<option value="-1"><?php echo tr('Select graph'); ?> :</option>
					<option v-for="(g, i) in savedGraphs" :key="g.id" :value="i">[#{{ g.id }}] {{ g.name }}</option>
				</select>
				<h5><?php echo tr('Graph Name'); ?>:</h5>
				<input id="graphName" class="form-control mb-2" v-model="savedGraphName" type="text" placeholder="<?php echo tr('Graph Name'); ?>" :disabled="!canWriteGraphs">
				<small class="form-text d-block mt-0 mb-2">
					<span v-if="savedGraphSelected > -1"><?php echo tr('Selected graph id'); ?>: {{ savedGraphs[savedGraphSelected].id }}</span>
					<span v-else><?php echo tr('None selected'); ?></span>
				</small>
				<small class="form-text d-block mt-0 mb-2" v-if="savedGraphSelected > -1">
					{{ savedGraphChanged ? '<?php echo tr('Changed'); ?>' : '<?php echo tr('No changes'); ?>' }}
				</small>
				<button class="btn btn-default" @click="onDeleteSavedGraph" :disabled="!canWriteGraphs || savedGraphSelected < 0"><?php echo tr('Delete'); ?></button>&nbsp;
				<button class="btn btn-default" @click="onSaveSavedGraph" :disabled="!canSaveSavedGraph"><?php echo tr('Save'); ?></button>
				<small class="form-text d-block mt-0 mb-2" v-if="savedGraphStatus">{{ savedGraphStatus }}</small>
			</div>
		</div>
	</Teleport>
</div>

<script>
var path = <?php echo json_encode($path); ?>;
const min_feed_interval = <?php echo $min_feed_interval; ?>;
const apikey = <?php echo json_encode($apikey); ?>;
const apikeystr = apikey !== '' ? '&apikey=' + apikey : '';
const feedidsLH = <?php echo json_encode($feedidsLH); ?>;
const feedidsRH = <?php echo json_encode($feedidsRH); ?>;
const load_savegraphs = <?php echo json_encode($load_saved); ?>;
var session_write = <?php echo isset($session['write']) ? (int) $session['write'] : 0; ?>;
var graphTranslations = {
	'Copied': "<?php echo tr('Copied'); ?>",
	'Copy not supported': "<?php echo tr('Copy not supported'); ?>",
	'Request error': "<?php echo tr('Request error'); ?>",
	'Window': "<?php echo tr('Window'); ?>",
	'Length': "<?php echo tr('Length'); ?>",
	'Please select a feed from the Feeds List': "<?php echo tr('Please select a feed from the Feeds List'); ?>",
	'Remove missing': "<?php echo tr('Remove missing'); ?>",
	'Graph not found': "<?php echo tr('Graph not found'); ?>",
	'Graph Name required': "<?php echo tr('Graph Name required'); ?>",
	'Saved': "<?php echo tr('Saved'); ?>",
	'Deleted': "<?php echo tr('Deleted'); ?>",
	'Click a datapoint on the chart to edit it': "<?php echo tr('Click a datapoint on the chart to edit it'); ?>",
	'Zoom in to the feed interval to edit individual datapoints': "<?php echo tr('Zoom in to the feed interval to edit individual datapoints'); ?>",
	'Switch to Fixed Interval mode to edit individual datapoints': "<?php echo tr('Switch to Fixed Interval mode to edit individual datapoints'); ?>",
	'Editing not available for this datapoint at the current zoom level': "<?php echo tr('Editing not available for this datapoint at the current zoom level'); ?>",
	'Multiply the data shown in the current window? This writes to the feed and cannot be undone.': "<?php echo tr('Multiply the data shown in the current window? This writes to the feed and cannot be undone.'); ?>",
	'Invalid value. Use a float, a fraction (1/2), NAN or abs(x).': "<?php echo tr('Invalid value. Use a float, a fraction (1/2), NAN or abs(x).'); ?>",
	'Enter a value': "<?php echo tr('Enter a value'); ?>",
	'Remove the scale and offset to edit this feed': "<?php echo tr('Remove the scale and offset to edit this feed'); ?>"
};
</script>

<?php load_js("Modules/graph/graph.lib.js"); ?>
<?php load_js("Modules/graph/graph.core.js"); ?>
<script>
// On mobile/tablet viewports, start with both l2 and l3 fully hidden
// so the graph fills the screen without sidebars overlapping content.
if (window.innerWidth < 1150 && typeof menu !== 'undefined') {
    menu.hide_l2();
}
</script>