Add .title() function. Closes elastic#69

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timelion",
-  "version": "0.1.239",
+  "version": "0.1.240",
   "dependencies": {
     "body-parser": "^1.12.0",
     "boom": "^2.8.0",

public/directives/chart_directive.js

@@ -1,6 +1,7 @@
 var _ = require('lodash');
 var $ = require('jquery');
 var moment = require('moment');
+var appendTitle = require('./lib/append_title');
 
 require('flot');
 require('flotTime');
@@ -10,6 +11,7 @@ require('flotSelection');
 require('flotSymbol');
 
 var app = require('ui/modules').get('apps/timelion', []);
+var template = '<div class="chart-title"></div><div class="chart-canvas"></div>';
 
 app.directive('chart', function ($compile, $rootScope, timefilter, $timeout, Private) {
   return {
@@ -90,7 +92,6 @@ app.directive('chart', function ($compile, $rootScope, timefilter, $timeout, Pri
         $rootScope.$broadcast('timelionPlotHover', event, pos, item);
       });
 
-
       $elem.on('plotselected', function (event, ranges) {
         timefilter.time.from = moment(ranges.xaxis.from);
         timefilter.time.to = moment(ranges.xaxis.to);
@@ -140,9 +141,7 @@ app.directive('chart', function ($compile, $rootScope, timefilter, $timeout, Pri
 
           // Nearest point
           for (j = 0; j < series.data.length; ++j) {
-            if (series.data[j][0] > pos.x) {
-              break;
-            }
+            if (series.data[j][0] > pos.x) break;
           }
 
           var y;
@@ -174,39 +173,48 @@ app.directive('chart', function ($compile, $rootScope, timefilter, $timeout, Pri
           return;
         }
 
+        if (!$('.chart-canvas', $elem).length) $elem.html(template);
+        var canvasElem = $('.chart-canvas', $elem);
+        canvasElem.height($elem.height());
+
+        var title = _(plotConfig).map('_title').compact().last();
+        appendTitle($elem, title);
+
         var options = _.cloneDeep(defaultOptions);
-        var series = _.map($scope.chart, function (series, index) {
+        var series = _.map(plotConfig, function (series, index) {
           series = _.cloneDeep(_.defaults(series, {
             shadowSize: 0,
             lines: {
               lineWidth: 3
             }
           }));
           series._id = index;
+
           if (series._hide) {
             series.data = [];
             //series.color = "#ddd";
             series.label = '(hidden) ' + series.label;
           }
+
           if (series._global) {
             _.merge(options, series._global);
           }
 
           return series;
         });
 
-        $scope.plot = $.plot($elem, _.compact(series), options);
+        $scope.plot = $.plot(canvasElem, _.compact(series), options);
 
         legendScope.$destroy();
         legendScope = $scope.$new();
         // Used to toggle the series, and for displaying values on hover
-        legendValueNumbers = $elem.find('.ngLegendValueNumber');
-        _.each($elem.find('.ngLegendValue'), function (elem) {
+        legendValueNumbers = canvasElem.find('.ngLegendValueNumber');
+        _.each(canvasElem.find('.ngLegendValue'), function (elem) {
           $compile(elem)(legendScope);
         });
       }
 
       $scope.$watch('chart', drawPlot);
     }
   };
-});
+});

public/directives/lib/append_title.js

@@ -0,0 +1,17 @@
+var $ = require('jquery');
+
+module.exports = function appendTitle($elem, title) {
+  var titleElem = $('.chart-title', $elem);
+  var canvasElem = $('.chart-canvas', $elem);
+  var titleSize = 9;
+
+  if (title) {
+    titleElem.height(titleSize);
+    canvasElem.height($elem.height() - titleSize);
+    titleElem.text(title);
+  } else {
+    titleElem.height(0);
+    canvasElem.height($elem.height());
+    titleElem.text(null);
+  }
+};

public/main.less

@@ -70,15 +70,23 @@
   cursor: pointer;
 }
 
-.chart-container {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  box-sizing: border-box;
-  border: 2px dashed transparent;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-  margin-bottom: 10px;
+.chart {
+  &-container {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    box-sizing: border-box;
+    border: 2px dashed transparent;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-bottom: 10px;
+  }
+
+  &-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 11px;
+  }
 }
 
 .chart-container.active {
@@ -290,4 +298,4 @@ div.doc-container {
   margin-left: 5px;
   margin-right: 5px;
   font-weight: bold;
-}
+}

series_functions/title.js

@@ -0,0 +1,22 @@
+var alter = require('../lib/alter.js');
+var Chainable = require('../lib/classes/chainable');
+module.exports = new Chainable('title', {
+  args: [
+    {
+      name: 'inputSeries',
+      types: ['seriesList']
+    },
+    {
+      name: 'title',
+      types: ['string', 'null'],
+      help: 'Title for the plot.'
+    }
+  ],
+  help: 'Adds a title to the top of the plot. If called on more than 1 seriesList the last call will be used.',
+  fn: function hideFn(args) {
+    return alter(args, function (eachSeries, title) {
+      eachSeries._title = title;
+      return eachSeries;
+    });
+  }
+});