Skip to content

N
nexpie-grafana-theme
Commit 396eadc5 by Alexander Zobnin Committed by Torkel Ödegaard
Options

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
parent 93ac6680
Showing with 47 additions and 149 deletions
package.json
...@@ -129,6 +129,8 @@ ...@@ -129,6 +129,8 @@
"rxjs": "^5.4.3", "rxjs": "^5.4.3",
"tether": "^1.4.0", "tether": "^1.4.0",
"tether-drop": "https://github.com/torkelo/drop", "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'; ...@@ -15,7 +15,7 @@ import * as flatten from 'app/core/utils/flatten';
import * as ticks from 'app/core/utils/ticks'; import * as ticks from 'app/core/utils/ticks';
import {impressions} from 'app/features/dashboard/impression_store'; import {impressions} from 'app/features/dashboard/impression_store';
import builtInPlugins from './built_in_plugins'; import builtInPlugins from './built_in_plugins';
import d3 from 'vendor/d3/d3'; import * as d3 from 'd3';
// rxjs // rxjs
import {Observable} from 'rxjs/Observable'; import {Observable} from 'rxjs/Observable';
......
public/app/plugins/panel/heatmap/color_legend.ts
import angular from 'angular'; import angular from 'angular';
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery'; import $ from 'jquery';
import d3 from 'vendor/d3/d3'; import * as d3 from 'd3';
import {contextSrv} from 'app/core/core'; import {contextSrv} from 'app/core/core';
import {tickStep} from 'app/core/utils/ticks'; import {tickStep} from 'app/core/utils/ticks';
import {getColorScale, getOpacityScale} from './color_scale';
let module = angular.module('grafana.directives'); let module = angular.module('grafana.directives');
...@@ -30,7 +31,7 @@ module.directive('colorLegend', function() { ...@@ -30,7 +31,7 @@ module.directive('colorLegend', function() {
if (panel.color.mode === 'spectrum') { if (panel.color.mode === 'spectrum') {
let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme}); 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); drawSimpleColorLegend(elem, colorScale);
} else if (panel.color.mode === 'opacity') { } else if (panel.color.mode === 'opacity') {
let colorOptions = panel.color; let colorOptions = panel.color;
...@@ -93,7 +94,7 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal ...@@ -93,7 +94,7 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
let widthFactor = legendWidth / (rangeTo - rangeFrom); let widthFactor = legendWidth / (rangeTo - rangeFrom);
let valuesRange = d3.range(rangeFrom, rangeTo, rangeStep); 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") legend.selectAll(".heatmap-color-legend-rect")
.data(valuesRange) .data(valuesRange)
.enter().append("rect") .enter().append("rect")
...@@ -115,7 +116,10 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue ...@@ -115,7 +116,10 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
let legendWidth = Math.floor(legendElem.outerWidth()) - 30; let legendWidth = Math.floor(legendElem.outerWidth()) - 30;
let legendHeight = legendElem.attr("height"); 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 widthFactor = legendWidth / (rangeTo - rangeFrom);
let valuesRange = d3.range(rangeFrom, rangeTo, rangeStep); let valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
...@@ -228,31 +232,6 @@ function clearLegend(elem) { ...@@ -228,31 +232,6 @@ function clearLegend(elem) {
legendElem.empty(); 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) { function getSvgElemX(elem) {
let svgElem = elem.get(0); let svgElem = elem.get(0);
if (svgElem && svgElem.x && svgElem.x.baseVal) { if (svgElem && svgElem.x && svgElem.x.baseVal) {
......
public/app/plugins/panel/heatmap/color_scale.ts 0 → 100644
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
import d3 from 'vendor/d3/d3'; import * as d3 from 'd3';
import $ from 'jquery'; import $ from 'jquery';
import _ from 'lodash'; import _ from 'lodash';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
......
public/app/plugins/panel/heatmap/rendering.ts
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery'; import $ from 'jquery';
import moment from 'moment'; import moment from 'moment';
import * as d3 from 'd3';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import {appEvents, contextSrv} from 'app/core/core'; import {appEvents, contextSrv} from 'app/core/core';
import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks'; import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks';
import d3 from 'vendor/d3/d3';
import {HeatmapTooltip} from './heatmap_tooltip'; import {HeatmapTooltip} from './heatmap_tooltip';
import {mergeZeroBuckets} from './heatmap_data_converter'; import {mergeZeroBuckets} from './heatmap_data_converter';
import {getColorScale, getOpacityScale} from './color_scale';
let MIN_CARD_SIZE = 1, let MIN_CARD_SIZE = 1,
CARD_PADDING = 1, CARD_PADDING = 1,
...@@ -386,8 +387,9 @@ export default function link(scope, elem, attrs, ctrl) { ...@@ -386,8 +387,9 @@ export default function link(scope, elem, attrs, ctrl) {
let maxValue = panel.color.max || maxValueAuto; let maxValue = panel.color.max || maxValueAuto;
let minValue = panel.color.min || 0; 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(); setCardSize();
let cards = heatmap.selectAll(".heatmap-card").data(cardsData); let cards = heatmap.selectAll(".heatmap-card").data(cardsData);
...@@ -422,8 +424,8 @@ export default function link(scope, elem, attrs, ctrl) { ...@@ -422,8 +424,8 @@ export default function link(scope, elem, attrs, ctrl) {
let strokeColor = d3.color(color).brighter(4); let strokeColor = d3.color(color).brighter(4);
let current_card = d3.select(event.target); let current_card = d3.select(event.target);
tooltip.originalFillColor = color; 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); .style("stroke-width", 1);
} }
...@@ -433,30 +435,6 @@ export default function link(scope, elem, attrs, ctrl) { ...@@ -433,30 +435,6 @@ export default function link(scope, elem, attrs, ctrl) {
.style("stroke-width", 0); .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() { function setCardSize() {
let xGridSize = Math.floor(xScale(data.xBucketSize) - xScale(0)); let xGridSize = Math.floor(xScale(data.xBucketSize) - xScale(0));
let yGridSize = Math.floor(yScale(yScale.invert(0) - data.yBucketSize)); let yGridSize = Math.floor(yScale(yScale.invert(0) - data.yBucketSize));
......
public/app/system.conf.js
...@@ -31,7 +31,6 @@ System.config({ ...@@ -31,7 +31,6 @@ System.config({
"jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair", "jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair",
"jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow", "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",
"jquery.flot.dashes": "vendor/flot/jquery.flot.dashes", "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
"twemoji": "vendor/npm/twemoji/2/twemoji.amd.js", "twemoji": "vendor/npm/twemoji/2/twemoji.amd.js",
"ace": "vendor/npm/ace-builds/src-noconflict/ace", "ace": "vendor/npm/ace-builds/src-noconflict/ace",
......
public/vendor/d3/LICENSE deleted 100644 → 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 deleted 100644 → 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 deleted 100644 → 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;
public/vendor/d3/d3.v4.min.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment