feat(panels): graph panel starting to work

public/app/plugins/panel/graph/legend.js

@@ -8,7 +8,7 @@ define([
 function (angular, _, $) {
 function (angular, _, $) {
   'use strict';
   'use strict';
 
 
-  var module = angular.module('grafana.panels.graph');
+  var module = angular.module('grafana.directives');
 
 
   module.directive('graphLegend', function(popoverSrv) {
   module.directive('graphLegend', function(popoverSrv) {
 
 
@@ -16,13 +16,14 @@ function (angular, _, $) {
       link: function(scope, elem) {
       link: function(scope, elem) {
         var $container = $('<section class="graph-legend"></section>');
         var $container = $('<section class="graph-legend"></section>');
         var firstRender = true;
         var firstRender = true;
-        var panel = scope.panel;
+        var ctrl = scope.ctrl;
+        var panel = ctrl.panel;
         var data;
         var data;
         var seriesList;
         var seriesList;
         var i;
         var i;
 
 
         scope.$on('render', function() {
         scope.$on('render', function() {
-          data = scope.seriesList;
+          data = ctrl.seriesList;
           if (data) {
           if (data) {
             render();
             render();
           }
           }
@@ -54,7 +55,7 @@ function (angular, _, $) {
           var el = $(e.currentTarget);
           var el = $(e.currentTarget);
           var index = getSeriesIndexForElement(el);
           var index = getSeriesIndexForElement(el);
           var seriesInfo = seriesList[index];
           var seriesInfo = seriesList[index];
-          scope.toggleSeries(seriesInfo, e);
+          ctrl.toggleSeries(seriesInfo, e);
         }
         }
 
 
         function sortLegend(e) {
         function sortLegend(e) {
@@ -148,7 +149,7 @@ function (angular, _, $) {
 
 
             var html = '<div class="graph-legend-series';
             var html = '<div class="graph-legend-series';
             if (series.yaxis === 2) { html += ' pull-right'; }
             if (series.yaxis === 2) { html += ' pull-right'; }
-            if (scope.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
+            if (ctrl.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
             html += '" data-series-index="' + i + '">';
             html += '" data-series-index="' + i + '">';
             html += '<div class="graph-legend-icon">';
             html += '<div class="graph-legend-icon">';
             html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>';
             html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>';

public/app/plugins/panel/graph/legend.popover.html

@@ -3,12 +3,12 @@
 
 
 	<div class="editor-row small" style="padding-bottom: 0;">
 	<div class="editor-row small" style="padding-bottom: 0;">
 		<label>Axis:</label>
 		<label>Axis:</label>
-		<button ng-click="toggleYAxis(series);dismiss();"
+		<button ng-click="ctrl.toggleYAxis(series);dismiss();"
 			class="btn btn-mini"
 			class="btn btn-mini"
 			ng-class="{'btn-success': series.yaxis === 1 }">
 			ng-class="{'btn-success': series.yaxis === 1 }">
 			Left
 			Left
 		</button>
 		</button>
-		<button ng-click="toggleYAxis(series);dismiss();"
+		<button ng-click="ctrl.toggleYAxis(series);dismiss();"
 			class="btn btn-mini"
 			class="btn btn-mini"
 			ng-class="{'btn-success': series.yaxis === 2 }">
 			ng-class="{'btn-success': series.yaxis === 2 }">
 			Right
 			Right
@@ -16,10 +16,10 @@
 	</div>
 	</div>
 
 
 	<div class="editor-row">
 	<div class="editor-row">
-		<i ng-repeat="color in colors" class="pointer"
+		<i ng-repeat="color in ctrl.colors" class="pointer"
 			ng-class="{'fa fa-circle-o': color === series.color,'fa fa-circle': color !== series.color}"
 			ng-class="{'fa fa-circle-o': color === series.color,'fa fa-circle': color !== series.color}"
 			ng-style="{color:color}"
 			ng-style="{color:color}"
-			ng-click="changeSeriesColor(series, color);dismiss();">&nbsp;</i>
+			ng-click="ctrl.changeSeriesColor(series, color);dismiss();">&nbsp;</i>
 	</div>
 	</div>
 </div>
 </div>
 
 

public/app/plugins/panel/graph/module.html

-<div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
+<div class="graph-wrapper" ng-class="{'graph-legend-rightside': ctrl.panel.legend.rightSide}">
 	<div class="graph-canvas-wrapper">
 	<div class="graph-canvas-wrapper">
 
 
 		<div ng-if="datapointsWarning" class="datapoints-warning">
 		<div ng-if="datapointsWarning" class="datapoints-warning">
@@ -8,12 +8,12 @@
 			<span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</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>
 
 
-		<div grafana-graph class="histogram-chart" ng-dblclick="zoomOut()">
+		<div grafana-graph class="histogram-chart" ng-dblclick="ctrl.zoomOut()">
 		</div>
 		</div>
 
 
 	</div>
 	</div>
 
 
-	<div class="graph-legend-wrapper" ng-if="panel.legend.show" graph-legend></div>
+	<div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" graph-legend></div>
 </div>
 </div>
 
 
 <div class="clearfix"></div>
 <div class="clearfix"></div>

public/app/plugins/panel/graph/module.ts

@@ -3,6 +3,7 @@ import {PanelDirective} from '../../../features/panel/panel';
 import {GraphCtrl} from './graph_ctrl';
 import {GraphCtrl} from './graph_ctrl';
 
 
 import './graph';
 import './graph';
+import './legend';
 
 
 class GraphPanel extends PanelDirective {
 class GraphPanel extends PanelDirective {
   controller = GraphCtrl;
   controller = GraphCtrl;