Commit 9edfb210 by Zachary Tong

Initial base for bullseye feature

parent 37161ba3
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] + ")");
*/
}
\ No newline at end of file
......@@ -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 + ")");
}
}
}
};
......
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