<div ng-controller='GraphCtrl'>

	<div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
		<div class="graph-canvas-wrapper">

			<span class="graph-time-info" ng-if="panelMeta.timeInfo">
				<i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}
		  </span>

			<div ng-if="datapointsWarning" class="datapoints-warning">
				<span class="small" ng-show="!datapointsCount">
					No datapoints <tip>No datapoints returned from metric query</tip>
				</span>
				<span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
			</div>

			<div grafana-graph class="histogram-chart">
			</div>

		</div>

		<div class="graph-legend-wrapper" ng-if="panel.legend.show" graph-legend></div>
	</div>

	<div class="clearfix"></div>

	<div style="margin-top: 30px" ng-if="editMode">
		<div class="dashboard-editor-header">
			<div class="dashboard-editor-title">
				<i class="fa fa-bar-chart"></i>
				Graph
			</div>

			<div ng-model="editor.index" bs-tabs>
				<div ng-repeat="tab in panelMeta.editorTabs" data-title="{{tab.title}}">
				</div>
			</div>
		</div>

		<div class="dashboard-editor-body">
			<div ng-repeat="tab in panelMeta.editorTabs" ng-if="editor.index === $index">
				<div ng-include src="tab.src"></div>
			</div>
		</div>
	</div>
</div>
