mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Initial base for bullseye feature
This commit is contained in:
parent
37161ba37a
commit
9edfb210bf
42
panels/map2/display/bullseye.js
Normal file
42
panels/map2/display/bullseye.js
Normal file
@ -0,0 +1,42 @@
|
||||
function displayBullseye(scope, projection, path) {
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.innerRadius(5)
|
||||
.outerRadius(10)
|
||||
.startAngle(0) //converting from degs to radians
|
||||
.endAngle(2*Math.PI) //just radians
|
||||
|
||||
var coords = projection([parseFloat(scope.panel.display.bullseye.coord.lon), parseFloat(scope.panel.display.bullseye.coord.lat)]);
|
||||
|
||||
|
||||
var circle = d3.geo.circle();
|
||||
|
||||
var data = [
|
||||
{lat: parseFloat(scope.panel.display.bullseye.coord.lat), lon: parseFloat(scope.panel.display.bullseye.coord.lon)}
|
||||
];
|
||||
|
||||
scope.g.selectAll("arc")
|
||||
.data(data)
|
||||
.enter().append("path")
|
||||
.datum(function(d) {
|
||||
console.log(d);
|
||||
|
||||
return circle.origin([d.lon, d.lat]).angle(1)();
|
||||
})
|
||||
.attr("d", path)
|
||||
.attr("class", "arc");
|
||||
|
||||
|
||||
/*
|
||||
scope.g.append("path")
|
||||
.attr("d", arc)
|
||||
.attr("transform", "translate(" + coords[0] + "," + coords[1] + ")");
|
||||
|
||||
scope.g
|
||||
.append("circle")
|
||||
.attr("r", 1)
|
||||
.attr("opacity", 1)
|
||||
.attr("transform", "translate(" + coords[0] + "," + coords[1] + ")");
|
||||
*/
|
||||
|
||||
}
|
@ -32,6 +32,11 @@
|
||||
.q8 { fill:rgb(8,81,156); }
|
||||
.q9 { fill:rgb(8,48,107); }
|
||||
|
||||
.arc {
|
||||
stroke: #f00;
|
||||
stroke-width: .5px;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
|
||||
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
|
||||
|
@ -36,7 +36,12 @@ angular.module('kibana.map2', [])
|
||||
enabled: false
|
||||
},
|
||||
bullseye: {
|
||||
enabled: false
|
||||
enabled: false,
|
||||
coord: {
|
||||
lat: 0,
|
||||
lon: 0
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
displayTabs: ["Geopoints", "Binning", "Choropleth", "Bullseye", "Data"],
|
||||
@ -206,7 +211,8 @@ angular.module('kibana.map2', [])
|
||||
.script("panels/map2/lib/d3.hexbin.v0.min.js")
|
||||
.script("panels/map2/lib/queue.v1.min.js")
|
||||
.script("panels/map2/display/binning.js")
|
||||
.script("panels/map2/display/geopoints.js");
|
||||
.script("panels/map2/display/geopoints.js")
|
||||
.script("panels/map2/display/bullseye.js");
|
||||
|
||||
// Populate element. Note that jvectormap appends, does not replace.
|
||||
scripts.wait(function () {
|
||||
@ -243,15 +249,16 @@ angular.module('kibana.map2', [])
|
||||
var width = $(elem[0]).width(),
|
||||
height = $(elem[0]).height();
|
||||
|
||||
|
||||
//scale to whichever dimension is smaller, helps to ensure the whole map is displayed
|
||||
var scale = (width > height) ? (height / 2 / Math.PI) : (width / 2 / Math.PI);
|
||||
var scale = (width > height) ? (height/5) : (width/5);
|
||||
|
||||
|
||||
/**
|
||||
* D3 and general config section
|
||||
*/
|
||||
var projection = d3.geo.mercator()
|
||||
.translate([0,0])
|
||||
.translate([width/2, height/2])
|
||||
.scale(scale);
|
||||
|
||||
var zoom = d3.behavior.zoom()
|
||||
@ -310,10 +317,9 @@ angular.module('kibana.map2', [])
|
||||
//where countries are
|
||||
scope.svg.append("rect")
|
||||
.attr("class", "overlay")
|
||||
.attr("x", -width / 2)
|
||||
.attr("y", -height / 2)
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
.attr("height", height)
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
//Draw the countries, if this is a choropleth, draw with fancy colors
|
||||
scope.g.selectAll("path")
|
||||
@ -342,6 +348,7 @@ angular.module('kibana.map2', [])
|
||||
|
||||
//Hexagonal Binning
|
||||
if (scope.panel.display.binning.enabled) {
|
||||
//@todo fix this
|
||||
var dimensions = [width, height];
|
||||
displayBinning(scope, dimensions, projection);
|
||||
}
|
||||
@ -351,6 +358,10 @@ angular.module('kibana.map2', [])
|
||||
displayGeopoints(scope);
|
||||
}
|
||||
|
||||
if (scope.panel.display.bullseye.enabled) {
|
||||
displayBullseye(scope, projection, path);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Zoom Functionality
|
||||
@ -373,6 +384,7 @@ angular.module('kibana.map2', [])
|
||||
scope.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user