Skip to content

N
nexpie-grafana-theme
Commit 9edfb210 by Zachary Tong
Options

Initial base for bullseye feature

parent 37161ba3
Showing with 67 additions and 7 deletions
panels/map2/display/bullseye.js 0 → 100644
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
panels/map2/module.html
...@@ -32,6 +32,11 @@ ...@@ -32,6 +32,11 @@
.q8 { fill:rgb(8,81,156); } .q8 { fill:rgb(8,81,156); }
.q9 { fill:rgb(8,48,107); } .q9 { fill:rgb(8,48,107); }
.arc {
stroke: #f00;
stroke-width: .5px;
fill: none;
}
</style> </style>
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'> <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> <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
......
panels/map2/module.js
...@@ -36,7 +36,12 @@ angular.module('kibana.map2', []) ...@@ -36,7 +36,12 @@ angular.module('kibana.map2', [])
enabled: false enabled: false
}, },
bullseye: { bullseye: {
enabled: false enabled: false,
coord: {
lat: 0,
lon: 0
},
} }
}, },
displayTabs: ["Geopoints", "Binning", "Choropleth", "Bullseye", "Data"], displayTabs: ["Geopoints", "Binning", "Choropleth", "Bullseye", "Data"],
...@@ -206,7 +211,8 @@ angular.module('kibana.map2', []) ...@@ -206,7 +211,8 @@ angular.module('kibana.map2', [])
.script("panels/map2/lib/d3.hexbin.v0.min.js") .script("panels/map2/lib/d3.hexbin.v0.min.js")
.script("panels/map2/lib/queue.v1.min.js") .script("panels/map2/lib/queue.v1.min.js")
.script("panels/map2/display/binning.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. // Populate element. Note that jvectormap appends, does not replace.
scripts.wait(function () { scripts.wait(function () {
...@@ -243,15 +249,16 @@ angular.module('kibana.map2', []) ...@@ -243,15 +249,16 @@ angular.module('kibana.map2', [])
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
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 * D3 and general config section
*/ */
var projection = d3.geo.mercator() var projection = d3.geo.mercator()
.translate([0,0]) .translate([width/2, height/2])
.scale(scale); .scale(scale);
var zoom = d3.behavior.zoom() var zoom = d3.behavior.zoom()
...@@ -310,10 +317,9 @@ angular.module('kibana.map2', []) ...@@ -310,10 +317,9 @@ angular.module('kibana.map2', [])
//where countries are //where countries are
scope.svg.append("rect") scope.svg.append("rect")
.attr("class", "overlay") .attr("class", "overlay")
.attr("x", -width / 2)
.attr("y", -height / 2)
.attr("width", width) .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 //Draw the countries, if this is a choropleth, draw with fancy colors
scope.g.selectAll("path") scope.g.selectAll("path")
...@@ -342,6 +348,7 @@ angular.module('kibana.map2', []) ...@@ -342,6 +348,7 @@ angular.module('kibana.map2', [])
//Hexagonal Binning //Hexagonal Binning
if (scope.panel.display.binning.enabled) { if (scope.panel.display.binning.enabled) {
//@todo fix this
var dimensions = [width, height]; var dimensions = [width, height];
displayBinning(scope, dimensions, projection); displayBinning(scope, dimensions, projection);
} }
...@@ -351,6 +358,10 @@ angular.module('kibana.map2', []) ...@@ -351,6 +358,10 @@ angular.module('kibana.map2', [])
displayGeopoints(scope); displayGeopoints(scope);
} }
if (scope.panel.display.bullseye.enabled) {
displayBullseye(scope, projection, path);
}
/** /**
* Zoom Functionality * Zoom Functionality
...@@ -373,6 +384,7 @@ angular.module('kibana.map2', []) ...@@ -373,6 +384,7 @@ angular.module('kibana.map2', [])
scope.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")"); 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