IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Move directive-level variables out of scope

Browse Source
This commit is contained in:
Zachary Tong 2013-04-18 15:06:14 -04:00
parent 5a5e4cef4f
commit 25938054e2
4 changed files with 52 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
panels/map2/display/binning.js
View File

@ -4,7 +4,7 @@
* clip on spheres appropriately. To fix this, we would need to translate * clip on spheres appropriately. To fix this, we would need to translate
* the svg path into a geo-path * the svg path into a geo-path
*/ */
function displayBinning(scope, dimensions) { function displayBinning(scope, dr, dimensions) {
var hexbin = d3.hexbin() var hexbin = d3.hexbin()
.size(dimensions) .size(dimensions)
@ -31,12 +31,12 @@ function displayBinning(scope, dimensions) {
_.map(scope.data, function (k, v) { _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v); var decoded = geohash.decode(v);
return _.map(_.range(0, k*scale), function(a,b) { return _.map(_.range(0, k*scale), function(a,b) {
binPoints.push(scope.projection([decoded.longitude, decoded.latitude])); binPoints.push(dr.projection([decoded.longitude, decoded.latitude]));
}) })
}); });
} else { } else {
binPoints = scope.projectedPoints; binPoints = dr.projectedPoints;
} }
//bin and sort the points, so we can set the various ranges appropriately //bin and sort the points, so we can set the various ranges appropriately
@ -64,7 +64,7 @@ function displayBinning(scope, dimensions) {
.interpolate(d3.interpolateLab); .interpolate(d3.interpolateLab);
var hex = scope.g.selectAll(".hexagon") var hex = dr.g.selectAll(".hexagon")
.data(binnedPoints); .data(binnedPoints);
hex.enter().append("path") hex.enter().append("path")

4
panels/map2/display/bullseye.js
View File

@ -2,7 +2,7 @@
* Renders bullseyes as geo-json poly gon entities * Renders bullseyes as geo-json poly gon entities
* Allows for them to clip on spheres correctly * Allows for them to clip on spheres correctly
*/ */
function displayBullseye(scope, path) { function displayBullseye(scope, dr, path) {
var degrees = 180 / Math.PI var degrees = 180 / Math.PI
var circle = d3.geo.circle(); var circle = d3.geo.circle();
@ -14,7 +14,7 @@ function displayBullseye(scope, path) {
]; ];
} }
var arcs = scope.g.selectAll(".arc") var arcs = dr.g.selectAll(".arc")
.data(data); .data(data);
arcs.enter().append("path") arcs.enter().append("path")

6
panels/map2/display/geopoints.js
View File

@ -2,19 +2,19 @@
* Renders geopoints as geo-json poly gon entities * Renders geopoints as geo-json poly gon entities
* Allows for them to clip on spheres correctly * Allows for them to clip on spheres correctly
*/ */
function displayGeopoints(scope, path) { function displayGeopoints(scope, dr, path) {
var points = []; var points = [];
var circle = d3.geo.circle(); var circle = d3.geo.circle();
var degrees = 180 / Math.PI var degrees = 180 / Math.PI
if (scope.panel.display.geopoints.enabled) { if (scope.panel.display.geopoints.enabled) {
points = scope.points; points = dr.points;
} }
var geopoints = scope.g.selectAll(".geopoint") var geopoints = dr.g.selectAll(".geopoint")
.data(points); .data(points);
geopoints.enter().append("path") geopoints.enter().append("path")

117
panels/map2/module.js
View File

@ -178,16 +178,17 @@ angular.module('kibana.map2', [])
restrict: 'A', restrict: 'A',
link: function (scope, elem, attrs) { link: function (scope, elem, attrs) {
//directive level variables related to d3
var dr = {};
//elem.html('')
scope.initializing = false; scope.initializing = false;
scope.worldData = null;
scope.worldNames = null;
scope.ctrlKey = false;
dr.worldData = null;
dr.worldNames = null;
//These are various options that should not be cached in scope.panel //These are various options that should not be cached in scope.panel
scope.options = { dr.options = {
data: { data: {
dropdown:[ dropdown:[
@ -208,7 +209,7 @@ angular.module('kibana.map2', [])
* Initialize the panels if new, or render existing panels * Initialize the panels if new, or render existing panels
*/ */
scope.init_or_render = function() { scope.init_or_render = function() {
if (typeof scope.svg === 'undefined') { if (typeof dr.svg === 'undefined') {
console.log("init"); console.log("init");
//prevent duplicate initialization steps, if render is called again //prevent duplicate initialization steps, if render is called again
@ -262,35 +263,31 @@ angular.module('kibana.map2', [])
.defer(d3.json, "panels/map2/lib/world-110m.json") .defer(d3.json, "panels/map2/lib/world-110m.json")
.defer(d3.tsv, "panels/map2/lib/world-country-names.tsv") .defer(d3.tsv, "panels/map2/lib/world-country-names.tsv")
.await(function(error, world, names) { .await(function(error, world, names) {
scope.worldData = world; dr.worldData = world;
scope.worldNames = names; dr.worldNames = names;
//Better way to get these values? Seems kludgy to use jQuery on the div... //Better way to get these values? Seems kludgy to use jQuery on the div...
var width = $(elem[0]).width(), var width = $(elem[0]).width(),
height = $(elem[0]).height(); height = $(elem[0]).height();
//scale to whichever dimension is smaller, helps to ensure the whole map is displayed //scale to whichever dimension is smaller, helps to ensure the whole map is displayed
scope.scale = (width > height) ? (height/5) : (width/5); dr.scale = (width > height) ? (height/5) : (width/5);
dr.zoom = d3.behavior.zoom()
scope.zoom = d3.behavior.zoom()
.scaleExtent([1, 20]) .scaleExtent([1, 20])
.on("zoom", translate_map); .on("zoom", translate_map);
//used by choropleth //used by choropleth
//@todo change domain so that it reflects the domain of the data //@todo change domain so that it reflects the domain of the data
scope.quantize = d3.scale.quantize() dr.quantize = d3.scale.quantize()
.domain([0, 1000]) .domain([0, 1000])
.range(d3.range(9).map(function(i) { return "q" + (i+1); })); .range(d3.range(9).map(function(i) { return "q" + (i+1); }));
//Extract name and two-letter codes for our countries //Extract name and two-letter codes for our countries
scope.countries = topojson.feature(scope.worldData, scope.worldData.objects.countries).features; dr.countries = topojson.feature(dr.worldData, dr.worldData.objects.countries).features;
scope.countries = scope.countries.filter(function(d) { dr.countries = dr.countries.filter(function(d) {
return scope.worldNames.some(function(n) { return dr.worldNames.some(function(n) {
if (d.id == n.id) { if (d.id == n.id) {
d.name = n.name; d.name = n.name;
return d.short = n.short; return d.short = n.short;
@ -300,22 +297,19 @@ angular.module('kibana.map2', [])
return a.name.localeCompare(b.name); return a.name.localeCompare(b.name);
}); });
//create the new svg //create the new svg
scope.svg = d3.select(elem[0]).append("svg") dr.svg = d3.select(elem[0]).append("svg")
.attr("width", "100%") .attr("width", "100%")
.attr("height", "100%") .attr("height", "100%")
.attr("viewBox", "0 0 " + width + " " + height) .attr("viewBox", "0 0 " + width + " " + height)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.call(scope.zoom); .call(dr.zoom);
scope.g = scope.svg.append("g"); dr.g = dr.svg.append("g");
scope.initializing = false; scope.initializing = false;
render_panel(); render_panel();
}); });
}); });
} }
@ -328,38 +322,37 @@ angular.module('kibana.map2', [])
var width = $(elem[0]).width(), var width = $(elem[0]).width(),
height = $(elem[0]).height(); height = $(elem[0]).height();
//Projection is dependant on the map-type //Projection is dependant on the map-type
if (scope.panel.display.data.type === 'mercator') { if (scope.panel.display.data.type === 'mercator') {
scope.projection = d3.geo.mercator() dr.projection = d3.geo.mercator()
.translate([width/2, height/2]) .translate([width/2, height/2])
.scale(scope.scale); .scale(dr.scale);
} else if (scope.panel.display.data.type === 'orthographic') { } else if (scope.panel.display.data.type === 'orthographic') {
scope.projection = d3.geo.orthographic() dr.projection = d3.geo.orthographic()
.translate([width/2, height/2]) .translate([width/2, height/2])
.scale(100) .scale(100)
.clipAngle(90); .clipAngle(90);
//recenters the sphere more towards the US...not really necessary //recenters the sphere more towards the US...not really necessary
scope.projection.rotate([100 / 2, 20 / 2, scope.projection.rotate()[2]]); dr.projection.rotate([100 / 2, 20 / 2, dr.projection.rotate()[2]]);
} }
var path = d3.geo.path() var path = d3.geo.path()
.projection(scope.projection); .projection(dr.projection);
//Special fix for when the user changes from mercator -> orthographic //Special fix for when the user changes from mercator -> orthographic
//The globe won't redraw automatically, we need to force it //The globe won't redraw automatically, we need to force it
if (scope.panel.display.data.type === 'orthographic') { if (scope.panel.display.data.type === 'orthographic') {
scope.svg.selectAll("path").attr("d", path); dr.svg.selectAll("path").attr("d", path);
} }
console.log(scope.data); console.log(scope.data);
//Geocoded points are decoded into lonlat //Geocoded points are decoded into lonlat
scope.points = _.map(scope.data, function (k, v) { dr.points = _.map(scope.data, function (k, v) {
//console.log(k,v); //console.log(k,v);
var decoded = geohash.decode(v); var decoded = geohash.decode(v);
return [decoded.longitude, decoded.latitude]; return [decoded.longitude, decoded.latitude];
@ -367,15 +360,15 @@ angular.module('kibana.map2', [])
//And also projected projected to x/y. Both sets of points are used //And also projected projected to x/y. Both sets of points are used
//by different functions //by different functions
scope.projectedPoints = _.map(scope.points, function (coords) { dr.projectedPoints = _.map(dr.points, function (coords) {
return scope.projection(coords); return dr.projection(coords);
}); });
scope.svg.select(".overlay").remove(); dr.svg.select(".overlay").remove();
scope.svg.append("rect") dr.svg.append("rect")
.attr("class", "overlay") .attr("class", "overlay")
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
@ -383,13 +376,13 @@ angular.module('kibana.map2', [])
//Draw the countries, if this is a choropleth, draw with fancy colors //Draw the countries, if this is a choropleth, draw with fancy colors
var countryPath = scope.g.selectAll(".land") var countryPath = dr.g.selectAll(".land")
.data(scope.countries); .data(dr.countries);
countryPath.enter().append("path") countryPath.enter().append("path")
.attr("class", function(d) { .attr("class", function(d) {
if (scope.panel.display.choropleth.enabled) { if (scope.panel.display.choropleth.enabled) {
return 'land ' + scope.quantize(scope.data[d.short]); return 'land ' + dr.quantize(scope.data[d.short]);
} else { } else {
return 'land'; return 'land';
} }
@ -398,39 +391,15 @@ angular.module('kibana.map2', [])
countryPath.exit().remove(); countryPath.exit().remove();
/*
//draw boundaries
scope.g.selectAll("land").append("path")
.datum(topojson.mesh(scope.worldData, scope.worldData.objects.land, function(a, b) { return a !== b; }))
.attr("class", "land boundary")
.attr("d", path);
*/
//If this is a sphere, set up drag and keypress listeners //If this is a sphere, set up drag and keypress listeners
if (scope.panel.display.data.type === 'orthographic') { if (scope.panel.display.data.type === 'orthographic') {
dr.svg.style("cursor", "move")
//scope.svg.focus();
/*
scope.svg.selectAll(".overlay")
.on("keydown", function() {
scope.ctrlKey = d3.event.ctrlKey;
})
.on("keyup", function() {
scope.ctrlKey = d3.event.ctrlKey;
});
*/
scope.svg.style("cursor", "move")
.call(d3.behavior.drag() .call(d3.behavior.drag()
.origin(function() { var rotate = scope.projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; }) .origin(function() { var rotate = dr.projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; })
.on("drag", function() { .on("drag", function() {
if (scope.keylistener.keyActive(17)) { if (scope.keylistener.keyActive(17)) {
scope.projection.rotate([d3.event.x / 2, -d3.event.y / 2, scope.projection.rotate()[2]]); dr.projection.rotate([d3.event.x / 2, -d3.event.y / 2, dr.projection.rotate()[2]]);
scope.svg.selectAll("path").attr("d", path); dr.svg.selectAll("path").attr("d", path);
} }
})); }));
} }
@ -443,9 +412,9 @@ angular.module('kibana.map2', [])
//@todo fix this //@todo fix this
var dimensions = [width, height]; var dimensions = [width, height];
displayBinning(scope, dimensions); displayBinning(scope, dr, dimensions);
displayGeopoints(scope, path); displayGeopoints(scope, dr, path);
displayBullseye(scope, path); displayBullseye(scope, dr, path);
@ -453,8 +422,8 @@ angular.module('kibana.map2', [])
//If the panel scale is not default (e.g. the user has moved the maps around) //If the panel scale is not default (e.g. the user has moved the maps around)
//set the scale and position to the last saved config //set the scale and position to the last saved config
if (scope.panel.display.scale != -1) { if (scope.panel.display.scale != -1) {
scope.zoom.scale(scope.panel.display.scale).translate(scope.panel.display.translate); dr.zoom.scale(scope.panel.display.scale).translate(scope.panel.display.translate);
scope.g.style("stroke-width", 1 / scope.panel.display.scale).attr("transform", "translate(" + scope.panel.display.translate + ") scale(" + scope.panel.display.scale + ")"); dr.g.style("stroke-width", 1 / scope.panel.display.scale).attr("transform", "translate(" + scope.panel.display.translate + ") scale(" + scope.panel.display.scale + ")");
} }
@ -476,11 +445,11 @@ angular.module('kibana.map2', [])
s = d3.event.scale; s = d3.event.scale;
t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0])); t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1])); t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
scope.zoom.translate(t); dr.zoom.translate(t);
scope.panel.display.translate = t; scope.panel.display.translate = t;
scope.panel.display.scale = s; scope.panel.display.scale = s;
scope.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ") scale(" + s + ")"); dr.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ") scale(" + s + ")");
} }
} }
} }