Use d3 from node_modules (#9625)

* tech: annotations refactor, add tests for regions processing

* tech: move d3 to npm and webpack, #9480

* tech: move color scale functions to separate module

* fix opacity legend rendering

package.json

@@ -129,6 +129,8 @@
     "rxjs": "^5.4.3",
     "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop",
-    "tinycolor2": "^1.4.1"
+    "tinycolor2": "^1.4.1",
+    "d3": "^4.11.0",
+    "d3-scale-chromatic": "^1.1.1"
   }
 }

public/app/features/plugins/plugin_loader.ts

@@ -15,7 +15,7 @@ import * as flatten from 'app/core/utils/flatten';
 import * as ticks from 'app/core/utils/ticks';
 import {impressions} from 'app/features/dashboard/impression_store';
 import builtInPlugins from './built_in_plugins';
-import d3 from 'vendor/d3/d3';
+import * as d3 from 'd3';
 
 // rxjs
 import {Observable} from 'rxjs/Observable';

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

@@ -1,9 +1,10 @@
 import angular from 'angular';
 import _ from 'lodash';
 import $ from 'jquery';
-import d3 from 'vendor/d3/d3';
+import * as d3 from 'd3';
 import {contextSrv} from 'app/core/core';
 import {tickStep} from 'app/core/utils/ticks';
+import {getColorScale, getOpacityScale} from './color_scale';
 
 let module = angular.module('grafana.directives');
 
@@ -30,7 +31,7 @@ module.directive('colorLegend', function() {
 
         if (panel.color.mode === 'spectrum') {
           let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
-          let colorScale = getColorScale(colorScheme, legendWidth);
+          let colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, legendWidth);
           drawSimpleColorLegend(elem, colorScale);
         } else if (panel.color.mode === 'opacity') {
           let colorOptions = panel.color;
@@ -93,7 +94,7 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
   let widthFactor = legendWidth / (rangeTo - rangeFrom);
   let valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
-  let colorScale = getColorScale(colorScheme, maxValue, minValue);
+  let colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, maxValue, minValue);
   legend.selectAll(".heatmap-color-legend-rect")
     .data(valuesRange)
     .enter().append("rect")
@@ -115,7 +116,10 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
   let legendWidth = Math.floor(legendElem.outerWidth()) - 30;
   let legendHeight = legendElem.attr("height");
 
-  let rangeStep = 10;
+  let rangeStep = 1;
+  if (rangeTo - rangeFrom > legendWidth) {
+    rangeStep = Math.floor((rangeTo - rangeFrom) / legendWidth);
+  }
   let widthFactor = legendWidth / (rangeTo - rangeFrom);
   let valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
@@ -228,31 +232,6 @@ function clearLegend(elem) {
   legendElem.empty();
 }
 
-function getColorScale(colorScheme, maxValue, minValue = 0) {
-  let colorInterpolator = d3[colorScheme.value];
-  let colorScaleInverted = colorScheme.invert === 'always' ||
-    (colorScheme.invert === 'dark' && !contextSrv.user.lightTheme);
-
-  let start = colorScaleInverted ? maxValue : minValue;
-  let end = colorScaleInverted ? minValue : maxValue;
-
-  return d3.scaleSequential(colorInterpolator).domain([start, end]);
-}
-
-function getOpacityScale(options, maxValue, minValue = 0) {
-  let legendOpacityScale;
-  if (options.colorScale === 'linear') {
-    legendOpacityScale = d3.scaleLinear()
-    .domain([minValue, maxValue])
-    .range([0, 1]);
-  } else if (options.colorScale === 'sqrt') {
-    legendOpacityScale = d3.scalePow().exponent(options.exponent)
-    .domain([minValue, maxValue])
-    .range([0, 1]);
-  }
-  return legendOpacityScale;
-}
-
 function getSvgElemX(elem) {
   let svgElem = elem.get(0);
   if (svgElem && svgElem.x && svgElem.x.baseVal) {

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

@@ -0,0 +1,27 @@
+import * as d3 from 'd3';
+import * as d3ScaleChromatic from 'd3-scale-chromatic';
+
+export function getColorScale(colorScheme: any, lightTheme: boolean, maxValue: number, minValue = 0): (d: any) => any {
+  let colorInterpolator = d3ScaleChromatic[colorScheme.value];
+  let colorScaleInverted = colorScheme.invert === 'always' ||
+    (colorScheme.invert === 'dark' && !lightTheme);
+
+  let start = colorScaleInverted ? maxValue : minValue;
+  let end = colorScaleInverted ? minValue : maxValue;
+
+  return d3.scaleSequential(colorInterpolator).domain([start, end]);
+}
+
+export function getOpacityScale(options, maxValue, minValue = 0) {
+  let legendOpacityScale;
+  if (options.colorScale === 'linear') {
+    legendOpacityScale = d3.scaleLinear()
+    .domain([minValue, maxValue])
+    .range([0, 1]);
+  } else if (options.colorScale === 'sqrt') {
+    legendOpacityScale = d3.scalePow().exponent(options.exponent)
+    .domain([minValue, maxValue])
+    .range([0, 1]);
+  }
+  return legendOpacityScale;
+}

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

@@ -1,4 +1,4 @@
-import d3 from 'vendor/d3/d3';
+import * as d3 from 'd3';
 import $ from 'jquery';
 import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';

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

@@ -1,12 +1,13 @@
 import _ from 'lodash';
 import $ from 'jquery';
 import moment from 'moment';
+import * as d3 from 'd3';
 import kbn from 'app/core/utils/kbn';
 import {appEvents, contextSrv} from 'app/core/core';
 import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks';
-import d3 from 'vendor/d3/d3';
 import {HeatmapTooltip} from './heatmap_tooltip';
 import {mergeZeroBuckets} from './heatmap_data_converter';
+import {getColorScale, getOpacityScale} from './color_scale';
 
 let MIN_CARD_SIZE = 1,
     CARD_PADDING = 1,
@@ -386,8 +387,9 @@ export default function link(scope, elem, attrs, ctrl) {
     let maxValue = panel.color.max || maxValueAuto;
     let minValue = panel.color.min || 0;
 
-    colorScale = getColorScale(maxValue, minValue);
+    let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
-    setOpacityScale(maxValue);
+    colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme,  maxValue, minValue);
+    opacityScale = getOpacityScale(panel.color, maxValue);
     setCardSize();
 
     let cards = heatmap.selectAll(".heatmap-card").data(cardsData);
@@ -422,8 +424,8 @@ export default function link(scope, elem, attrs, ctrl) {
     let strokeColor = d3.color(color).brighter(4);
     let current_card = d3.select(event.target);
     tooltip.originalFillColor = color;
-    current_card.style("fill", highlightColor)
+    current_card.style("fill", highlightColor.toString())
-    .style("stroke", strokeColor)
+    .style("stroke", strokeColor.toString())
     .style("stroke-width", 1);
   }
 
@@ -433,30 +435,6 @@ export default function link(scope, elem, attrs, ctrl) {
     .style("stroke-width", 0);
   }
 
-  function getColorScale(maxValue, minValue = 0) {
-    let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
-    let colorInterpolator = d3[colorScheme.value];
-    let colorScaleInverted = colorScheme.invert === 'always' ||
-      (colorScheme.invert === 'dark' && !contextSrv.user.lightTheme);
-
-    let start = colorScaleInverted ? maxValue : minValue;
-    let end = colorScaleInverted ? minValue : maxValue;
-
-    return d3.scaleSequential(colorInterpolator).domain([start, end]);
-  }
-
-  function setOpacityScale(maxValue) {
-    if (panel.color.colorScale === 'linear') {
-      opacityScale = d3.scaleLinear()
-      .domain([0, maxValue])
-      .range([0, 1]);
-    } else if (panel.color.colorScale === 'sqrt') {
-      opacityScale = d3.scalePow().exponent(panel.color.exponent)
-      .domain([0, maxValue])
-      .range([0, 1]);
-    }
-  }
-
   function setCardSize() {
     let xGridSize = Math.floor(xScale(data.xBucketSize) - xScale(0));
     let yGridSize = Math.floor(yScale(yScale.invert(0) - data.yBucketSize));

public/app/system.conf.js

@@ -31,7 +31,6 @@ System.config({
     "jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair",
     "jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
     "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
-    "d3": "vendor/d3/d3.js",
     "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
     "twemoji": "vendor/npm/twemoji/2/twemoji.amd.js",
     "ace": "vendor/npm/ace-builds/src-noconflict/ace",

public/vendor/d3/LICENSE

@@ -1,27 +0,0 @@
-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

@@ -1,57 +0,0 @@
-# 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

@@ -1,3 +0,0 @@
-// 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;