Skip to content

GitLab

R
Respect My Net
Commit e71d0e55 authored by Okhin's avatar Okhin
Browse files
Options

Fixing the borked JS #26

parent 6e0bd7df
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1142 additions and 2724 deletions
bt/views.py
View file @ e71d0e55
......@@ -145,7 +145,7 @@ class JSONMixin(object):
def get(self, request, *args, **kwargs):
qs = self.get_queryset()
if qs.count():
return HttpResponse(json.dumps(sorted([(x.object.id, x.object.resource_name) for x in qs])))
return HttpResponse(json.dumps(sorted([(x.id, x.resource_name) for x in qs])))
else:
return HttpResponse('')
......
nnmon/static/js/d3.min.js
View file @ e71d0e55
This source diff could not be displayed because it is too large. You can view the blob instead.
nnmon/static/js/datamaps.js
View file @ e71d0e55
(function() {
var svg;
/save off default references
//save off default references
var d3 = window.d3, topojson = window.topojson;
var defaultOptions = {
......@@ -22,6 +22,7 @@
hideAntarctica: true,
hideHawaiiAndAlaska : false,
borderWidth: 1,
borderOpacity: 1,
borderColor: '#FDFDFD',
popupTemplate: function(geography, data) {
return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
......@@ -30,13 +31,15 @@
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2
highlightBorderWidth: 2,
highlightBorderOpacity: 1
},
projectionConfig: {
rotation: [97, 0]
},
bubblesConfig: {
borderWidth: 2,
borderOpacity: 1,
borderColor: '#FFFFFF',
popupOnHover: true,
radius: null,
......@@ -49,6 +52,7 @@
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightBorderOpacity: 1,
highlightFillOpacity: 0.85,
exitDelay: 100,
key: JSON.stringify
......@@ -93,7 +97,7 @@
.attr('data-width', width || element.offsetWidth)
.attr('class', 'datamap')
.attr('height', height || element.offsetHeight)
.style('overflow', 'hidden'); / IE10+ doesn't respect height/width when map is zoomed in
.style('overflow', 'hidden'); // IE10+ doesn't respect height/width when map is zoomed in
if (this.options.responsive) {
d3.select(this.options.element).style({'position': 'relative', 'padding-bottom': (this.options.aspectRatio*100) + '%'});
......@@ -105,7 +109,7 @@
return this.svg;
}
/ setProjection takes the svg element and options
// setProjection takes the svg element and options
function setProjection( element, options ) {
var width = options.width || element.offsetWidth;
var height = options.height || element.offsetHeight;
......@@ -193,9 +197,9 @@
return JSON.stringify( colorCodeData[d.id]);
})
.style('fill', function(d) {
/if fillKey - use that
/otherwise check 'fill'
/otherwise check 'defaultFill'
//if fillKey - use that
//otherwise check 'fill'
//otherwise check 'defaultFill'
var fillColor;
var datum = colorCodeData[d.id];
......@@ -210,6 +214,7 @@
return fillColor;
})
.style('stroke-width', geoConfig.borderWidth)
.style('stroke-opacity', geoConfig.borderOpacity)
.style('stroke', geoConfig.borderColor);
}
......@@ -236,11 +241,12 @@
.style('fill', val(datum.highlightFillColor, options.highlightFillColor, datum))
.style('stroke', val(datum.highlightBorderColor, options.highlightBorderColor, datum))
.style('stroke-width', val(datum.highlightBorderWidth, options.highlightBorderWidth, datum))
.style('stroke-opacity', val(datum.highlightBorderOpacity, options.highlightBorderOpacity, datum))
.style('fill-opacity', val(datum.highlightFillOpacity, options.highlightFillOpacity, datum))
.attr('data-previousAttributes', JSON.stringify(previousAttributes));
/as per discussion on https:/github.com/markmarkoh/datamaps/issues/19
if ( ! /((MSIE)|(Trident))/.test ) {
//as per discussion on https://github.com/markmarkoh/datamaps/issues/19
if ( ! /((MSIE)|(Trident))/.test(navigator.userAgent) ) {
moveToFront.call(this);
}
}
......@@ -253,7 +259,7 @@
var $this = d3.select(this);
if (options.highlightOnHover) {
/reapply previous attributes
//reapply previous attributes
var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );
for ( var attr in previousAttributes ) {
$this.style(attr, previousAttributes[attr]);
......@@ -269,7 +275,7 @@
}
}
/plugin to add a simple map legend
//plugin to add a simple map legend
function addLegend(layer, data, options) {
data = data || {};
if ( !this.options.fills ) {
......@@ -321,9 +327,9 @@
throw "Datamaps Error - arcs must be an array";
}
/ For some reason arc options were put in an `options` object instead of the parent arc
/ I don't like this, so to match bubbles and other plugins I'm moving it
/ This is to keep backwards compatability
// For some reason arc options were put in an `options` object instead of the parent arc
// I don't like this, so to match bubbles and other plugins I'm moving it
// This is to keep backwards compatability
for ( var i = 0; i < data.length; i++ ) {
data[i] = defaults(data[i], data[i].options);
delete data[i].options;
......@@ -355,7 +361,7 @@
var destXY = self.latLngToXY(val(datum.destination.latitude, datum), val(datum.destination.longitude, datum));
var midXY = [ (originXY[0] + destXY[0]) / 2, (originXY[1] + destXY[1]) / 2];
if (options.greatArc) {
/ TODO: Move this to inside `if` clause when setting attr `d`
// TODO: Move this to inside `if` clause when setting attr `d`
var greatArc = d3.geo.greatArc()
.source(function(d) { return [val(d.origin.longitude, d), val(d.origin.latitude, d)]; })
.target(function(d) { return [val(d.destination.longitude, d), val(d.destination.latitude, d)]; });
......@@ -365,12 +371,15 @@
var sharpness = val(datum.arcSharpness, options.arcSharpness, datum);
return "M" + originXY[0] + ',' + originXY[1] + "S" + (midXY[0] + (50 * sharpness)) + "," + (midXY[1] - (75 * sharpness)) + "," + destXY[0] + "," + destXY[1];
})
.attr('data-info', function(datum) {
return JSON.stringify(datum);
})
.transition()
.delay(100)
.style('fill', function(datum) {
/*
Thank you Jake Archibald, this is awesome.
Source: http:/jakearchibald.com/2013/animated-line-drawing-svg/
Source: http://jakearchibald.com/2013/animated-line-drawing-svg/
*/
var length = this.getTotalLength();
this.style.transition = this.style.WebkitTransition = 'none';
......@@ -421,13 +430,20 @@
.style("stroke-width", options.lineWidth || 1)
}
layer.append("text")
.attr("x", x)
.attr("y", y)
.style("font-size", (options.fontSize || 10) + 'px')
.style("font-family", options.fontFamily || "Verdana")
.style("fill", options.labelColor || "#000")
.text( d.id );
layer.append("text")
.attr("x", x)
.attr("y", y)
.style("font-size", (options.fontSize || 10) + 'px')
.style("font-family", options.fontFamily || "Verdana")
.style("fill", options.labelColor || "#000")
.text(function() {
if (options.customLabelText && options.customLabelText[d.id]) {
return options.customLabelText[d.id]
} else {
return d.id
}
});
return "bar";
});
}
......@@ -470,11 +486,11 @@
if ( latLng ) return latLng[1];
})
.attr('r', function(datum) {
/ if animation enabled start with radius 0, otherwise use full size.
// if animation enabled start with radius 0, otherwise use full size.
return options.animate ? 0 : val(datum.radius, options.radius, datum);
})
.attr('data-info', function(d) {
return JSON.stringify(d);
.attr('data-info', function(datum) {
return JSON.stringify(datum);
})
.attr('filter', function (datum) {
var filterKey = filterData[ val(datum.filterKey, options.filterKey, datum) ];
......@@ -489,6 +505,9 @@
.style('stroke-width', function ( datum ) {
return val(datum.borderWidth, options.borderWidth, datum);
})
.style('stroke-opacity', function ( datum ) {
return val(datum.borderOpacity, options.borderOpacity, datum);
})
.style('fill-opacity', function ( datum ) {
return val(datum.fillOpacity, options.fillOpacity, datum);
})
......@@ -500,7 +519,7 @@
var $this = d3.select(this);
if (options.highlightOnHover) {
/save all previous attributes for mouseout
//save all previous attributes for mouseout
var previousAttributes = {
'fill': $this.style('fill'),
'stroke': $this.style('stroke'),
......@@ -512,6 +531,7 @@
.style('fill', val(datum.highlightFillColor, options.highlightFillColor, datum))
.style('stroke', val(datum.highlightBorderColor, options.highlightBorderColor, datum))
.style('stroke-width', val(datum.highlightBorderWidth, options.highlightBorderWidth, datum))
.style('stroke-opacity', val(datum.highlightBorderOpacity, options.highlightBorderOpacity, datum))
.style('fill-opacity', val(datum.highlightFillOpacity, options.highlightFillOpacity, datum))
.attr('data-previousAttributes', JSON.stringify(previousAttributes));
}
......@@ -524,7 +544,7 @@
var $this = d3.select(this);
if (options.highlightOnHover) {
/reapply previous attributes
//reapply previous attributes
var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );
for ( var attr in previousAttributes ) {
$this.style(attr, previousAttributes[attr]);
......@@ -538,6 +558,11 @@
.duration(400)
.attr('r', function ( datum ) {
return val(datum.radius, options.radius, datum);
})
.transition()
.duration(0)
.attr('data-info', function(d) {
return JSON.stringify(d);
});
bubbles.exit()
......@@ -551,7 +576,7 @@
}
}
/stolen from underscore.js
//stolen from underscore.js
function defaults(obj) {
Array.prototype.slice.call(arguments, 1).forEach(function(source) {
if (source) {
......@@ -571,14 +596,14 @@
if ( typeof d3 === 'undefined' || typeof topojson === 'undefined' ) {
throw new Error('Include d3.js (v3.0.3 or greater) and topojson on this page before creating a new map');
}
/set options for global use
//set options for global use
this.options = defaults(options, defaultOptions);
this.options.geographyConfig = defaults(options.geographyConfig, defaultOptions.geographyConfig);
this.options.projectionConfig = defaults(options.projectionConfig, defaultOptions.projectionConfig);
this.options.bubblesConfig = defaults(options.bubblesConfig, defaultOptions.bubblesConfig);
this.options.arcConfig = defaults(options.arcConfig, defaultOptions.arcConfig);
/add the SVG container
//add the SVG container
if ( d3.select( this.options.element ).select('svg').length > 0 ) {
addContainer.call(this, this.options.element, this.options.height, this.options.width );
}
......@@ -590,7 +615,7 @@
this.addPlugin('labels', handleLabels);
this.addPlugin('graticule', addGraticule);
/append style block with basic hoverover styles
//append style block with basic hoverover styles
if ( ! this.options.disableDefaultStyles ) {
addStyleBlock();
}
......@@ -598,7 +623,7 @@
return this.draw();
}
/ resize map
// resize map
Datamap.prototype.resize = function () {
var self = this;
......@@ -612,19 +637,19 @@
}
}
/ actually draw the features(states & countries)
// actually draw the features(states & countries)
Datamap.prototype.draw = function() {
/save off in a closure
//save off in a closure
var self = this;
var options = self.options;
/set projections and paths based on scope
//set projections and paths based on scope
var pathAndProjection = options.setProjection.apply(self, [options.element, options] );
this.path = pathAndProjection.path;
this.projection = pathAndProjection.projection;
/if custom URL for topojson data, retrieve it and render
//if custom URL for topojson data, retrieve it and render
if ( options.geographyConfig.dataUrl ) {
d3.json( options.geographyConfig.dataUrl, function(error, results) {
if ( error ) throw new Error(error);
......@@ -639,11 +664,11 @@
return this;
function draw (data) {
/ if fetching remote data, draw the map first then call `updateChoropleth`
// if fetching remote data, draw the map first then call `updateChoropleth`
if ( self.options.dataUrl ) {
/allow for csv or json data types
//allow for csv or json data types
d3[self.options.dataType](self.options.dataUrl, function(data) {
/in the case of csv, transform data to object
//in the case of csv, transform data to object
if ( self.options.dataType === 'csv' && (data && data.slice) ) {
var tmpData = {};
for(var i = 0; i < data.length; i++) {
......@@ -664,7 +689,7 @@
.style('position', 'absolute');
}
/fire off finished callback
//fire off finished callback
self.options.done(self);
}
};
......@@ -932,12 +957,12 @@
Utilities
***************************************/
/convert lat/lng coords to X / Y coords
//convert lat/lng coords to X / Y coords
Datamap.prototype.latLngToXY = function(lat, lng) {
return this.projection([lng, lat]);
};
/add <g> layer to root SVG
//add <g> layer to root SVG
Datamap.prototype.addLayer = function( className, id, first ) {
var layer;
if ( first ) {
......@@ -950,8 +975,19 @@
.attr('class', className || '');
};
Datamap.prototype.updateChoropleth = function(data) {
Datamap.prototype.updateChoropleth = function(data, options) {
var svg = this.svg;
var that = this;
// when options.reset = true, reset all the fill colors to the defaultFill and kill all data-info
if ( options && options.reset === true ) {
svg.selectAll('.datamaps-subunit')
.attr('data-info', function() {
return "{}"
})
.transition().style('fill', this.options.fills.defaultFill)
}
for ( var subunit in data ) {
if ( data.hasOwnProperty(subunit) ) {
var color;
......@@ -971,7 +1007,7 @@
else {
color = this.options.fills[ subunitData.fillKey ];
}
/if it's an object, overriding the previous data
//if it's an object, overriding the previous data
if ( subunitData === Object(subunitData) ) {
this.options.data[subunit] = defaults(subunitData, this.options.data[subunit] || {});
var geo = this.svg.select('.' + subunit).attr('data-info', JSON.stringify(this.options.data[subunit]));
......@@ -1021,7 +1057,7 @@
options = defaults(options || {}, self.options[name + 'Config']);
/add a single layer, reuse the old layer
//add a single layer, reuse the old layer
if ( !createNewLayer && this.options[name + 'Layer'] ) {
layer = this.options[name + 'Layer'];
options = options || this.options[name + 'Options'];
......@@ -1039,7 +1075,7 @@
}
};
/ expose library
// expose library
if (typeof exports === 'object') {
d3 = require('d3');
topojson = require('topojson');
......
nnmon/static/js/jquery-1.11.3.min.js deleted 100644 → 0
View file @ 6e0bd7df
This diff is collapsed.
nnmon/static/js/jquery.min.js
View file @ e71d0e55
jquery-1.11.3.min.js
\ No newline at end of file
jquery-1.12.0.min.js
\ No newline at end of file
nnmon/static/js/jquery.tablesorter.js
View file @ e71d0e55
This diff is collapsed.
nnmon/templates/base.html
View file @ e71d0e55
......@@ -44,11 +44,10 @@
<li><a {% block active_tab_start %}{% endblock %} href="{%root_url%}/start">{% trans "Start Monitoring" %}</a></li>
<li>
<form action="/search/" method="get">
{% csrf_token %}
<span>
<label for="quick_q" class="quick"></label>
<input name="q" id="quick_q" class="quick"></input></form>
<input type="submit" value="Search"></input>
<input name="q" id="quick_q" class="quick">
<input type="submit" value="Search">
</span>
</form>
</li>
......
nnmon/templates/list.html
View file @ e71d0e55
......@@ -24,17 +24,17 @@
var country="{{country}}";
$(document).ready(function() {
$.tablesorter.addParser({
/ set a unique id
/// set a unique id
id: 'stateparser',
is: function(s) {
/ return false so this parser is not auto detected
// return false so this parser is not auto detected
return false;
},
format: function(s) {
/ format your data for normalization
// format your data for normalization
return s{% for s, translation in status %}.replace(/{{translation}}/,{{forloop.counter}}){% endfor %};
},
/ set type, either numeric or text
// set type, either numeric or text
type: 'numeric'
});
$("#sortedlist").tablesorter({
......
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