Move heatmap panel into core grafana.

public/app/headers/common.d.ts

@@ -67,3 +67,8 @@ declare module 'remarkable' {
   var config: any;
   export default config;
 }
+
+declare module 'd3' {
+  var d3: any;
+  export default d3;
+}

public/app/plugins/panel/heatmap/axes_editor.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import kbn from 'app/core/utils/kbn';
+
+export class AxesEditorCtrl {
+  panel: any;
+  panelCtrl: any;
+  unitFormats: any;
+  logScales: any;
+
+  /** @ngInject */
+  constructor($scope) {
+    $scope.editor = this;
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+
+    this.unitFormats = kbn.getUnitFormats();
+
+    this.logScales = {
+      'linear': 1,
+      'log (base 2)': 2,
+      'log (base 10)': 10,
+      'log (base 32)': 32,
+      'log (base 1024)': 1024
+    };
+  }
+
+  setUnitFormat(subItem) {
+    this.panel.yAxis.format = subItem.value;
+    this.panelCtrl.render();
+  }
+}
+
+/** @ngInject */
+export function axesEditor() {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/app/plugins/panel/heatmap/partials/axes_editor.html',
+    controller: AxesEditorCtrl,
+  };
+}

public/app/plugins/panel/heatmap/css/heatmap.dark.css

+.axis text {
+}
+
+.axis {
+	font-family: "Open Sans", Helvetica, Arial, sans-serif;
+	font-size: smaller;
+	fill: #D8D9DA;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #7B7B7B;
+  /*shape-rendering: crispEdges;*/
+}
+
+.axis .domain {
+	/*opacity: 0;*/
+}
+
+.tick line {
+	opacity: 0.4;
+	stroke: #7B7B7B;
+}
+
+.tick text {
+	fill: #D8D9DA;
+}
+
+.heatmap-panel {
+  cursor: crosshair;
+  padding: 0;
+}
+
+div.heatmap-tooltip {
+  position: absolute;
+  text-align: left;
+  min-width: 160px;
+  padding: 12px;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  background: #141414;
+  border: 0px;
+  border-radius: 8px;
+  pointer-events: none;
+}
+
+.card-highlighted:hover {
+	stroke: #D8D9DA;
+}
+
+rect.heatmap-card {
+  pointer-events: all;
+}
+
+.heatmap-histogram rect {
+  fill: #828282;
+}
+
+.heatmap-crosshair line {
+  stroke: #9a1010;
+  stroke-width: 1;
+}
+
+.heatmap-selection {
+  stroke-width: 1;
+  opacity: 0.3;
+  fill: #828282;
+  stroke: #D8D9DA;
+}

public/app/plugins/panel/heatmap/css/heatmap.light.css

+.axis {
+	font-family: "Open Sans", Helvetica, Arial, sans-serif;
+	font-size: smaller;
+	fill: #555555;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #D8D9DA;
+  /*shape-rendering: crispEdges;*/
+}
+
+.tick line {
+	opacity: 0.4;
+	stroke: #D8D9DA;
+}
+
+.tick text {
+  fill: #555555;
+}
+
+.heatmap-panel {
+  cursor: crosshair;
+}
+
+div.heatmap-tooltip {
+  position: absolute;
+  text-align: left;
+  min-width: 160px;
+  padding: 12px;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  background: #ECECEC;
+  border: 0px;
+  border-radius: 8px;
+  pointer-events: none;
+}
+
+.card-highlighted:hover {
+	stroke: #D8D9DA;
+}
+
+.heatmap-histogram rect {
+  fill: #555555;
+}
+
+.heatmap-crosshair line {
+  stroke: #a25959;
+  stroke-width: 1;
+}
+
+.heatmap-selection {
+  stroke-width: 1;
+  opacity: 0.3;
+  fill: #555555;
+  stroke: #000;
+}

public/app/plugins/panel/heatmap/display_editor.ts

+///<reference path="../../../headers/common.d.ts" />
+
+export class HeatmapDisplayEditorCtrl {
+  panel: any;
+  panelCtrl: any;
+
+  /** @ngInject */
+  constructor($scope) {
+    $scope.editor = this;
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+
+    this.panelCtrl.render();
+  }
+}
+
+/** @ngInject */
+export function heatmapDisplayEditor() {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/app/plugins/panel/heatmap/partials/display_editor.html',
+    controller: HeatmapDisplayEditorCtrl,
+  };
+}

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import {MetricsPanelCtrl} from 'app/plugins/sdk';
+import _ from 'lodash';
+import kbn from 'app/core/utils/kbn';
+import TimeSeries from 'app/core/time_series';
+import {axesEditor} from './axes_editor';
+import {heatmapDisplayEditor} from './display_editor';
+import rendering from './rendering';
+import {convertToHeatMap, getMinLog} from './heatmap_data_converter';
+
+let X_BUCKET_NUMBER_DEFAULT = 30;
+let Y_BUCKET_NUMBER_DEFAULT = 10;
+
+let panelDefaults = {
+  heatmap: {
+  },
+  cards: {
+    cardPadding: null,
+    cardRound: null
+  },
+  color: {
+    mode: 'color',
+    cardColor: '#b4ff00',
+    colorScale: 'linear',
+    exponent: 0.5,
+    colorScheme: 'interpolateSpectral',
+    fillBackground: false
+  },
+  xBucketSize: null,
+  xBucketNumber: null,
+  yBucketSize: null,
+  yBucketNumber: null,
+  xAxis: {
+    show: true
+  },
+  yAxis: {
+    show: true,
+    format: 'short',
+    decimals: null,
+    logBase: 1,
+    splitFactor: null,
+    min: null,
+    max: null,
+    removeZeroValues: false
+  },
+  tooltip: {
+    show: true,
+    seriesStat: false,
+    showHistogram: false
+  },
+  highlightCards: true
+};
+
+let colorModes = ['opacity', 'color'];
+let opacityScales = ['linear', 'sqrt'];
+
+// Schemes from d3-scale-chromatic
+// https://github.com/d3/d3-scale-chromatic
+let colorSchemes = [
+  // Diverging
+  {name: 'Spectral', value: 'interpolateSpectral'},
+  {name: 'BrBG', value: 'interpolateBrBG'},
+  {name: 'PRGn', value: 'interpolatePRGn'},
+  {name: 'PiYG', value: 'interpolatePiYG'},
+  {name: 'PuOr', value: 'interpolatePuOr'},
+  {name: 'RdBu', value: 'interpolateRdBu'},
+  {name: 'RdGy', value: 'interpolateRdGy'},
+  {name: 'RdYlBu', value: 'interpolateRdYlBu'},
+  {name: 'RdYlGn', value: 'interpolateRdYlGn'},
+
+  // Sequential (Single Hue)
+  {name: 'Blues', value: 'interpolateBlues'},
+  {name: 'Greens', value: 'interpolateGreens'},
+  {name: 'Greys', value: 'interpolateGreys'},
+  {name: 'Oranges', value: 'interpolateOranges'},
+  {name: 'Purples', value: 'interpolatePurples'},
+  {name: 'Reds', value: 'interpolateReds'},
+
+  // Sequential (Multi-Hue)
+  {name: 'BuGn', value: 'interpolateBuGn'},
+  {name: 'BuPu', value: 'interpolateBuPu'},
+  {name: 'GnBu', value: 'interpolateGnBu'},
+  {name: 'OrRd', value: 'interpolateOrRd'},
+  {name: 'PuBuGn', value: 'interpolatePuBuGn'},
+  {name: 'PuBu', value: 'interpolatePuBu'},
+  {name: 'PuRd', value: 'interpolatePuRd'},
+  {name: 'RdPu', value: 'interpolateRdPu'},
+  {name: 'YlGnBu', value: 'interpolateYlGnBu'},
+  {name: 'YlGn', value: 'interpolateYlGn'},
+  {name: 'YlOrBr', value: 'interpolateYlOrBr'},
+  {name: 'YlOrRd', value: 'interpolateYlOrRd'}
+];
+
+export class HeatmapCtrl extends MetricsPanelCtrl {
+  static templateUrl = 'module.html';
+
+  opacityScales: any = [];
+  colorModes: any =  [];
+  colorSchemes: any = [];
+  selectionActivated: boolean;
+  unitFormats: any;
+  data: any;
+  series: any;
+  timeSrv: any;
+
+  constructor($scope, $injector, private $rootScope, timeSrv) {
+    super($scope, $injector);
+    this.$rootScope = $rootScope;
+    this.timeSrv = timeSrv;
+    this.selectionActivated = false;
+
+    _.defaultsDeep(this.panel, panelDefaults);
+    this.opacityScales = opacityScales;
+    this.colorModes = colorModes;
+    this.colorSchemes = colorSchemes;
+
+    // Bind grafana panel events
+    this.events.on('render', this.onRender.bind(this));
+    this.events.on('data-received', this.onDataReceived.bind(this));
+    this.events.on('data-error', this.onDataError.bind(this));
+    this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
+    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
+  }
+
+  onInitEditMode() {
+    this.addEditorTab('Axes', axesEditor, 2);
+    this.addEditorTab('Display', heatmapDisplayEditor, 3);
+    this.unitFormats = kbn.getUnitFormats();
+  }
+
+  zoomOut(evt) {
+    this.publishAppEvent('zoom-out', 2);
+  }
+
+  onRender() {
+    if (!this.range) { return; }
+
+    let xBucketSize, yBucketSize;
+    let logBase = this.panel.yAxis.logBase;
+    let xBucketNumber = this.panel.xBucketNumber || X_BUCKET_NUMBER_DEFAULT;
+    let xBucketSizeByNumber = Math.floor((this.range.to - this.range.from) / xBucketNumber);
+
+    // Parse X bucket size (number or interval)
+    let isIntervalString = kbn.interval_regex.test(this.panel.xBucketSize);
+    if (isIntervalString) {
+      xBucketSize = kbn.interval_to_ms(this.panel.xBucketSize);
+    } else if (isNaN(Number(this.panel.xBucketSize)) || this.panel.xBucketSize === '' || this.panel.xBucketSize === null) {
+      xBucketSize = xBucketSizeByNumber;
+    } else {
+      xBucketSize = Number(this.panel.xBucketSize);
+    }
+
+    // Calculate Y bucket size
+    let heatmapStats = this.parseSeries(this.series);
+    let yBucketNumber = this.panel.yBucketNumber || Y_BUCKET_NUMBER_DEFAULT;
+    if (logBase !== 1) {
+      yBucketSize = this.panel.yAxis.splitFactor;
+    } else {
+      if (heatmapStats.max === heatmapStats.min) {
+        yBucketSize = heatmapStats.max / Y_BUCKET_NUMBER_DEFAULT;
+      } else {
+        yBucketSize = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
+      }
+      yBucketSize = this.panel.yBucketSize || yBucketSize;
+    }
+
+    let bucketsData = convertToHeatMap(this.series, yBucketSize, xBucketSize, logBase);
+
+    // Set default Y range if no data
+    if (!heatmapStats.min && !heatmapStats.max) {
+      heatmapStats = {min: -1, max: 1, minLog: 1};
+      yBucketSize = 1;
+    }
+
+    this.data = {
+      buckets: bucketsData,
+      heatmapStats: heatmapStats,
+      xBucketSize: xBucketSize,
+      yBucketSize: yBucketSize
+    };
+  }
+
+  onDataReceived(dataList) {
+    this.series = dataList.map(this.seriesHandler.bind(this));
+    this.render();
+  }
+
+  onDataError() {
+    this.series = [];
+    this.render();
+  }
+
+  seriesHandler(seriesData) {
+    var series = new TimeSeries({
+      datapoints: seriesData.datapoints,
+      alias: seriesData.target
+    });
+
+    series.flotpairs = series.getFlotPairs(this.panel.nullPointMode);
+    series.minLog = getMinLog(series);
+    return series;
+  }
+
+  parseSeries(series) {
+    let min = _.min(_.map(series, s => s.stats.min));
+    let minLog = _.min(_.map(series, s => s.minLog));
+    let max = _.max(_.map(series, s => s.stats.max));
+
+    return {
+      max: max,
+      min: min,
+      minLog: minLog
+    };
+  }
+
+  link(scope, elem, attrs, ctrl) {
+    rendering(scope, elem, attrs, ctrl);
+  }
+}

public/app/plugins/panel/heatmap/heatmap_tooltip.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import d3 from 'd3';
+import $ from 'jquery';
+import _ from 'lodash';
+import kbn from 'app/core/utils/kbn';
+import {getValueBucketBound} from './heatmap_data_converter';
+
+let TOOLTIP_PADDING_X = 30;
+let TOOLTIP_PADDING_Y = 5;
+let HISTOGRAM_WIDTH = 160;
+let HISTOGRAM_HEIGHT = 40;
+
+export class HeatmapTooltip {
+  tooltip: any;
+  scope: any;
+  dashboard: any;
+  panel: any;
+  heatmapPanel: any;
+  mouseOverBucket: boolean;
+  originalFillColor: any;
+
+  constructor(elem, scope) {
+    this.scope = scope;
+    this.dashboard = scope.ctrl.dashboard;
+    this.panel = scope.ctrl.panel;
+    this.heatmapPanel = elem;
+    this.mouseOverBucket = false;
+    this.originalFillColor = null;
+
+    elem.on("mouseover", this.onMouseOver.bind(this));
+    elem.on("mouseleave", this.onMouseLeave.bind(this));
+  }
+
+  onMouseOver(e) {
+    if (!this.tooltip) {
+      this.add();
+      this.move(e);
+    }
+  }
+
+  onMouseLeave() {
+    this.destroy();
+  }
+
+  onMouseMove(e) {
+    if (!this.panel.tooltip.show) { return; }
+
+    this.move(e);
+  }
+
+  add() {
+    this.tooltip = d3.select("body")
+      .append("div")
+      .attr("class", "heatmap-tooltip");
+  }
+
+  destroy() {
+    if (this.tooltip) {
+      this.tooltip.remove();
+    }
+
+    this.tooltip = null;
+  }
+
+  show(pos, data) {
+    if (!this.panel.tooltip.show || !data) { return; }
+
+    let {xBucketIndex, yBucketIndex} = this.getBucketIndexes(pos, data);
+
+    if (!data.buckets[xBucketIndex] || !this.tooltip) {
+      this.destroy();
+      return;
+    }
+
+    let boundBottom, boundTop, valuesNumber;
+    let xData = data.buckets[xBucketIndex];
+    let yData = xData.buckets[yBucketIndex];
+
+    let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
+    let time = this.dashboard.formatDate(xData.x, tooltipTimeFormat);
+    let decimals = this.panel.tooltipDecimals || 5;
+    let valueFormatter = this.valueFormatter(decimals);
+
+    let tooltipHtml = `<div><b>${time}</b></div>
+      <div class="heatmap-histogram"></div>`;
+
+    if (yData) {
+      boundBottom = valueFormatter(yData.bounds.bottom);
+      boundTop = valueFormatter(yData.bounds.top);
+      valuesNumber = yData.values.length;
+      tooltipHtml += `<div>
+        bucket: <b>${boundBottom} - ${boundTop}</b> <br>
+        values: <b>${valuesNumber}</b> <br>
+      </div>`;
+
+      if (this.panel.tooltip.seriesStat && yData.seriesStat) {
+        tooltipHtml = this.addSeriesStat(tooltipHtml, yData.seriesStat);
+      }
+    } else {
+      if (!this.panel.tooltip.showHistogram) {
+        this.destroy();
+        return;
+      }
+      boundBottom = yBucketIndex;
+      boundTop = '';
+      valuesNumber = 0;
+    }
+
+    this.tooltip.html(tooltipHtml);
+
+    if (this.panel.tooltip.showHistogram) {
+      this.addHistogram(xData);
+    }
+
+    this.move(pos);
+  }
+
+  getBucketIndexes(pos, data) {
+    let xBucketIndex, yBucketIndex;
+
+    // if panelRelY is defined another panel wants us to show a tooltip
+    if (pos.panelRelY) {
+      xBucketIndex = getValueBucketBound(pos.x, data.xBucketSize, 1);
+      let y = this.scope.yScale.invert(pos.panelRelY * this.scope.chartHeight);
+      yBucketIndex = getValueBucketBound(y, data.yBucketSize, this.panel.yAxis.logBase);
+      pos = this.getSharedTooltipPos(pos);
+
+      if (!this.tooltip) {
+        // Add shared tooltip for panel
+        this.add();
+      }
+    } else {
+      xBucketIndex = this.getXBucketIndex(pos.offsetX, data);
+      yBucketIndex = this.getYBucketIndex(pos.offsetY, data);
+    }
+
+    return {xBucketIndex, yBucketIndex};
+  }
+
+  getXBucketIndex(offsetX, data) {
+    let x = this.scope.xScale.invert(offsetX - this.scope.yAxisWidth).valueOf();
+    let xBucketIndex = getValueBucketBound(x, data.xBucketSize, 1);
+    return xBucketIndex;
+  }
+
+  getYBucketIndex(offsetY, data) {
+    let y = this.scope.yScale.invert(offsetY - this.scope.chartTop);
+    let yBucketIndex = getValueBucketBound(y, data.yBucketSize, this.panel.yAxis.logBase);
+    return yBucketIndex;
+  }
+
+  getSharedTooltipPos(pos) {
+    // get pageX from position on x axis and pageY from relative position in original panel
+    pos.pageX = this.heatmapPanel.offset().left + this.scope.xScale(pos.x);
+    pos.pageY = this.heatmapPanel.offset().top + this.scope.chartHeight * pos.panelRelY;
+    return pos;
+  }
+
+  addSeriesStat(tooltipHtml, seriesStat) {
+    tooltipHtml += "series: <br>";
+    _.forEach(seriesStat, (values, series) => {
+      tooltipHtml += `&nbsp;&nbsp;-&nbsp;&nbsp;${series}: <b>${values}</b><br>`;
+    });
+
+    return tooltipHtml;
+  }
+
+  addHistogram(data) {
+    let xBucket = this.scope.ctrl.data.buckets[data.x];
+    let yBucketSize = this.scope.ctrl.data.yBucketSize;
+    let {min, max, ticks} = this.scope.ctrl.data.yAxis;
+    let histogramData = _.map(xBucket.buckets, bucket => {
+      return [bucket.y, bucket.values.length];
+    });
+    histogramData = _.filter(histogramData, d => {
+      return d[0] >= min && d[0] <= max;
+    });
+
+    let scale = this.scope.yScale.copy();
+    let histXScale = scale
+      .domain([min, max])
+      .range([0, HISTOGRAM_WIDTH]);
+
+    let barWidth;
+    if (this.panel.yAxis.logBase === 1) {
+      barWidth = Math.floor(HISTOGRAM_WIDTH / (max - min) * yBucketSize * 0.9);
+    } else {
+      barWidth = Math.floor(HISTOGRAM_WIDTH / ticks / yBucketSize * 0.9);
+    }
+    barWidth = Math.max(barWidth, 1);
+
+    let histYScale = d3.scaleLinear()
+      .domain([0, _.max(_.map(histogramData, d => d[1]))])
+      .range([0, HISTOGRAM_HEIGHT]);
+
+    let histogram = this.tooltip.select(".heatmap-histogram")
+      .append("svg")
+      .attr("width", HISTOGRAM_WIDTH)
+      .attr("height", HISTOGRAM_HEIGHT);
+
+    histogram.selectAll(".bar").data(histogramData)
+      .enter().append("rect")
+      .attr("x", d => {
+        return histXScale(d[0]);
+      })
+      .attr("width", barWidth)
+      .attr("y", d => {
+        return HISTOGRAM_HEIGHT - histYScale(d[1]);
+      })
+      .attr("height", d => {
+        return histYScale(d[1]);
+      });
+  }
+
+  move(pos) {
+    if (!this.tooltip) { return; }
+
+    let elem = $(this.tooltip.node())[0];
+    let tooltipWidth = elem.clientWidth;
+    let tooltipHeight = elem.clientHeight;
+
+    let left = pos.pageX + TOOLTIP_PADDING_X;
+    let top = pos.pageY + TOOLTIP_PADDING_Y;
+
+    if (pos.pageX + tooltipWidth + 40 > window.innerWidth) {
+      left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;
+    }
+
+    if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {
+      top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
+    }
+
+    return this.tooltip
+      .style("left", left + "px")
+      .style("top", top + "px");
+  }
+
+  valueFormatter(decimals) {
+    let format = this.panel.yAxis.format;
+    return function(value) {
+      if (_.isInteger(value)) {
+        decimals = 0;
+      }
+      return kbn.valueFormats[format](value, decimals);
+    };
+  }
+}

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

+<div class="heatmap-wrapper">
+	<div class="heatmap-canvas-wrapper">
+		<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
+	</div>
+	<!-- <div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" heatmap-legend></div> -->
+</div>
+<div class="clearfix"></div>

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

+///<reference path="../../../headers/common.d.ts" />
+
+import {loadPluginCss} from 'app/plugins/sdk';
+import {HeatmapCtrl} from './heatmap_ctrl';
+
+// loadPluginCss({
+//   dark: 'public/app/plugins/panel/heatmap/css/heatmap.dark.css',
+//   light: 'public/app/plugins/panel/heatmap/css/heatmap.light.css'
+// });
+
+export {
+  HeatmapCtrl as PanelCtrl
+};

public/app/plugins/panel/heatmap/partials/axes_editor.html

+<div class="editor-row">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Y Axis</h5>
+    <gf-form-switch class="gf-form" label-class="width-5"
+      label="Show"
+      checked="ctrl.panel.yAxis.show" on-change="ctrl.render()">
+    </gf-form-switch>
+    <div class="gf-form">
+      <label class="gf-form-label width-5">Unit</label>
+      <div class="gf-form-dropdown-typeahead max-width-15"
+        ng-model="ctrl.panel.yAxis.format"
+        dropdown-typeahead2="editor.unitFormats"
+        dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-5">Scale</label>
+      <div class="gf-form-select-wrapper max-width-15">
+        <select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select>
+      </div>
+    </div>
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-10">
+        <label class="gf-form-label width-5">Y-Min</label>
+        <input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
+      </div>
+      <div class="gf-form max-width-10">
+        <label class="gf-form-label width-5">Y-Max</label>
+        <input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Decimals</label>
+      <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
+        bs-tooltip="'Override automatic decimal precision for axis.'"
+        ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
+    </div>
+    <div ng-show="ctrl.panel.yAxis.logBase === 1">
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Buckets</label>
+        <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
+          bs-tooltip="'Number of buckets for Y axis.'"
+          ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Bucket Size</label>
+        <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
+          bs-tooltip="'Size of bucket. Has priority over Buckets option.'"
+          ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
+      </div>
+    </div>
+    <div ng-show="ctrl.panel.yAxis.logBase !== 1">
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Split Buckets</label>
+        <input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right"
+          bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
+          ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
+      </div>
+      <gf-form-switch class="gf-form" label-class="width-10"
+        label="Remove zero values"
+        checked="ctrl.panel.yAxis.removeZeroValues" on-change="ctrl.render()">
+      </gf-form-switch>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">X Axis</h5>
+    <gf-form-switch class="gf-form" label-class="width-8"
+      label="Show"
+      checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
+    </gf-form-switch>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Buckets</label>
+      <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right"
+        bs-tooltip="'Number of buckets for X axis.'"
+        ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Bucket Size</label>
+      <input type="text" class="gf-form-input width-8" placeholder="auto" data-placement="right"
+        bs-tooltip="'Size of bucket. Number or interval (10s, 5m, 1h, etc). Supported intervals: ms, s, m, h, d, w, M, y. Has priority over Buckets option.'"
+        ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+  </div>
+</div>

public/app/plugins/panel/heatmap/partials/display_editor.html

+<div class="editor-row">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Colors</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Color mode</label>
+      <div class="gf-form-select-wrapper width-12">
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.color.mode" ng-options="s for s in ctrl.colorModes" ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+
+    <div ng-show="ctrl.panel.color.mode === 'opacity'">
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Card Color</label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="ctrl.panel.color.cardColor" ng-change="ctrl.render()" ></spectrum-picker>
+        </span>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Opacity scale</label>
+        <div class="gf-form-select-wrapper width-12">
+          <select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScale" ng-options="s for s in ctrl.opacityScales" ng-change="ctrl.render()"></select>
+        </div>
+      </div>
+      <div class="gf-form" ng-if="ctrl.panel.color.colorScale === 'sqrt'">
+        <label class="gf-form-label width-8">Exponent</label>
+        <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.color.exponent" ng-change="ctrl.refresh()" ng-model-onblur>
+      </div>
+      <div class="gf-form">
+        <svg id="heatmap-opacity-legend"
+          width="22.7em" height="2em">
+        </svg>
+      </div>
+    </div>
+
+    <div ng-show="ctrl.panel.color.mode === 'color'">
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Color scheme</label>
+        <div class="gf-form-select-wrapper width-12">
+          <select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScheme" ng-options="s.value as s.name for s in ctrl.colorSchemes" ng-change="ctrl.render()"></select>
+        </div>
+      </div>
+      <div class="gf-form">
+        <svg id="heatmap-color-legend"
+          width="22.7em" height="2em">
+        </svg>
+      </div>
+      <gf-form-switch class="gf-form" label-class="width-10"
+        label="Fill background"
+        checked="ctrl.panel.color.fillBackground" on-change="ctrl.render()">
+      </gf-form-switch>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Cards</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Space</label>
+      <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.cards.cardPadding" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Round</label>
+      <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Tooltip</h5>
+    <gf-form-switch class="gf-form" label-class="width-8"
+      label="Show tooltip"
+      checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
+    </gf-form-switch>
+    <div ng-if="ctrl.panel.tooltip.show">
+      <gf-form-switch class="gf-form" label-class="width-8"
+        label="Highlight cards"
+        checked="ctrl.panel.highlightCards" on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form" label-class="width-8"
+        label="Series stats"
+        checked="ctrl.panel.tooltip.seriesStat" on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form" label-class="width-8"
+        label="Histogram"
+        checked="ctrl.panel.tooltip.showHistogram" on-change="ctrl.render()">
+      </gf-form-switch>
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Decimals</label>
+        <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+          bs-tooltip="'Max decimal precision for tooltip.'"
+          ng-model="ctrl.panel.tooltipDecimals" ng-change="ctrl.render()" ng-model-onblur>
+      </div>
+    </div>
+  </div>
+</div>

public/app/plugins/panel/heatmap/plugin.json

+{
+  "type": "panel",
+  "name": "Heatmap",
+  "id": "heatmap",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/icn-heatmap-panel.svg",
+      "large": "img/icn-heatmap-panel.svg"
+    }
+  }
+}

public/app/system.conf.js

@@ -30,7 +30,8 @@ System.config({
     "jquery.flot.time": "vendor/flot/jquery.flot.time",
     "jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair",
     "jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
-    "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge"
+    "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
+    "d3": "vendor/d3/d3.js"
   },
 
   packages: {

public/vendor/d3/LICENSE

+Copyright 2010-2016 Mike Bostock
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the author nor the names of contributors may be used to
+  endorse or promote products derived from this software without specific prior
+  written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

public/vendor/d3/README.md

+# D3: Data-Driven Documents
+
+<a href="https://d3js.org"><img src="https://d3js.org/logo.svg" align="left" hspace="10" vspace="6"></a>
+
+**D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
+
+## Resources
+
+* [API Reference](https://github.com/d3/d3/blob/master/API.md)
+* [Release Notes](https://github.com/d3/d3/releases)
+* [Gallery](https://github.com/d3/d3/wiki/Gallery)
+* [Examples](http://bl.ocks.org/mbostock)
+* [Wiki](https://github.com/d3/d3/wiki)
+
+## Installing
+
+If you use npm, `npm install d3`. Otherwise, download the [latest release](https://github.com/d3/d3/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [d3js.org](https://d3js.org), [CDNJS](https://cdnjs.com/libraries/d3), or [unpkg](https://unpkg.com/d3/). For example:
+
+```html
+<script src="https://d3js.org/d3.v4.js"></script>
+```
+
+For the minified version:
+
+```html
+<script src="https://d3js.org/d3.v4.min.js"></script>
+```
+
+You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection):
+
+```html
+<script src="https://d3js.org/d3-selection.v1.js"></script>
+```
+
+D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](http://bl.ocks.org/mbostock/bb09af4c39c79cffcde4), Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:
+
+```js
+import {scaleLinear} from "d3-scale";
+```
+
+Or import everything into a namespace (here, `d3`):
+
+```js
+import * as d3 from "d3";
+```
+
+In Node:
+
+```js
+var d3 = require("d3");
+```
+
+You can also require individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign):
+
+```js
+var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
+```

public/vendor/d3/d3.js

+// Import main D3.js module and combine it with another
+var d3 = Object.assign({}, require('./d3.v4.min.js'), require('./d3-scale-chromatic.min.js'));
+module.exports = d3;