From 4d6bb8b6beb490c3b377a52da21a73cf914f59a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sat, 25 Jan 2014 18:57:35 +0100
Subject: [PATCH] progress on translating grafana/flot options to graphite png
 renderer options

---
 src/app/panels/graphite/module.js        | 34 ++++++++++++++++++++++--
 src/app/panels/graphite/styleEditor.html |  2 +-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/app/panels/graphite/module.js b/src/app/panels/graphite/module.js
index f643b38a343..7b92a4b51d0 100644
--- a/src/app/panels/graphite/module.js
+++ b/src/app/panels/graphite/module.js
@@ -320,13 +320,14 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
     $scope.receiveGraphiteData = function(results) {
       $scope.panelMeta.loading = false;
+      $scope.legend = [];
+
       if (_.isString(results)) {
         $scope.render(results);
         return;
       }
 
       results = results.data;
-      $scope.legend = [];
       var data = [];
 
       _.each(results, function(targetData) {
@@ -481,8 +482,37 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
 
           if (_.isString(data)) {
-            elem.html('<img src="' + data + '"></img>');
+            render_panel_as_graphite_png();
             return;
           }
+          addAxisLabels();
+        }
+
+        function render_panel_as_graphite_png() {
+          data += '&width=' + elem.width();
+          data += '&height=' + elem.css('height').replace('px', '');
+          data += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground
+          data += '&fgcolor=BBBFC2'; // @textColor & @grayLighter
+          data += scope.panel.stack ? '&areaMode=stacked' : ''
+          data += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : '';
+          data += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : '';
+          data += scope.panel.steppedLine ? '&lineMode=staircase' : '';
+
+          switch(scope.panel.nullPointMode) {
+          case 'connected':
+            data += '&lineMode=connected';
+            break;
+          case 'null':
+            break; // graphite default lineMode
+          case 'null as zero':
+            data += "&drawNullAsZero=true";
+            break;
+          }
+
+          elem.html('<img src="' + data + '"></img>');
+        }
+
+        function addAxisLabels() {
+
 });
 
diff --git a/src/app/panels/graphite/styleEditor.html b/src/app/panels/graphite/styleEditor.html
index d950ac7f0c3..c44dcfa5a19 100644
--- a/src/app/panels/graphite/styleEditor.html
+++ b/src/app/panels/graphite/styleEditor.html
@@ -59,7 +59,7 @@
       <select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="render()"></select>
     </div>
     <div class="editor-option">
-      <label class="small">Stepped lines</label><input type="checkbox" ng-model="panel.steppedLine" ng-checked="panel.steppedLine" ng-change="render()">
+      <label class="small">Staircase line</label><input type="checkbox" ng-model="panel.steppedLine" ng-checked="panel.steppedLine" ng-change="render()">
     </div>
   </div>
   <div class="section">