<commit_before>{% load hq_shared_tags %}{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CommCare HQ Map</title>
	{% compress css %}
        <link type="text/css" rel="stylesheet" media="all" href="{% new_static 'style/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css' %}"/>
        <link type="text/css" rel="stylesheet" media="all" href="{% new_static 'reports/css/leaflet/leaflet.css' %}" />
    {% endcompress %}
    <style>
        #map { height: 800px; }
    </style>
</head>
<body>
	<div class="container-fluid">
		{% block main_content %}
            <h1>Incoming Forms by country <small>This should update in real time. Also check out the <a href="{% url 'dimagisphere_charts' %}" target="_blank">graph</a></small></h1>
            <div id="map"></div>
            <div id="controls" class="pull-right">Simulate:
                <button id="controlButton" type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-play"></span>
                </button>
            </div>
		{% endblock main_content %}
	</div>
    {% compress js %}
        <script type="text/javascript" src="{% new_static 'jquery/dist/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'style/lib/bootstrap-3.2.0/dist/js/bootstrap.min.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'js/ws4redis.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'reports/javascripts/leaflet.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'hqadmin/js/dimagisphere_helper.js' %}"></script>
    {% endcompress %}
    {% block script_panel %}
        <script type="text/javascript">
jQuery(document).ready(function($) {
    var ws4redis = WS4Redis({
        uri: '{{ WEBSOCKET_URI }}form-feed?subscribe-broadcast',
        receive_message: receiveMessage,
        heartbeat_msg: {{ WS4REDIS_HEARTBEAT }}
    });

    function addDataToMap(msgObj) {
        if (dimagisphere.addData(msgObj)) {
            colorAll();
            // this removes from active after a bit of time
            window.setTimeout(function () {
                dimagisphere.formData.recentFormsByCountry[msgObj.country] -= 1;
            }, 1000);
        }
    }

    // receive a message though the Websocket from the server
    function receiveMessage(msg) {
        addDataToMap(JSON.parse(msg));
    }

    var map = L.map('map').setView([0, 0], 3)

    var mapId = 'mapbox.dark';
    // todo: move to config somewhere
    var accessToken = '<KEY>';
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        maxZoom: 10,
        id: mapId,
        accessToken: accessToken
    }).addTo(map);

    function getColor(featureId) {
        // courtesy of http://colorbrewer2.org/
        var colors = ['#edf8fb','#b2e2e2','#66c2a4','#2ca25f','#006d2c'];
        var count = dimagisphere.formData.totalFormsByCountry[featureId];
        if (!count) {
            return colors[0];
        }
        var activeCount = dimagisphere.formData.recentFormsByCountry[featureId];
        if (!activeCount) {
            var pct = count / dimagisphere.formData.maxFormsByCountry;
            var index = Math.min(Math.ceil(pct * colors.length), colors.length - 1);
            return colors[index];
        }
        else {
            var activeColors = ['#fef0d9','#fdcc8a','#fc8d59','#e34a33','#b30000'];
            var activeIndex = Math.min(activeCount, activeColors.length - 1);
            return activeColors[activeIndex]
        }
    }

    function getOpacity(featureId) {
        if (dimagisphere.formData.totalFormsByCountry[featureId]) {
            return .9;
        } else {
            return 0;
        }
    }

    function style(feature) {
        return {
            fillColor: getColor(feature.properties.name),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: getOpacity(feature.properties.name)
        };
    }

    // todo: should probably be getting this from somewhere else and possibly not on every page load.
    var countriesGeo;
    $.getJSON('https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json', function (data) {
        countriesGeo = L.geoJson(data, {style: style}).addTo(map);
    });

    function colorAll() {
        if (countriesGeo !== undefined) {
            countriesGeo.setStyle(style);
        }
    }

    // update all every 5 seconds in case no activity (this is just to clear active state)
    window.setInterval(colorAll, 5000);

    // simulation controls
    var simulationOn = false;
    var controlButton = $('#controlButton');
    function setPauseButton() {
        controlButton.children('span').removeClass('glyphicon-play').addClass('glyphicon-pause');
    }
    function setPlayButton() {
        controlButton.children('span').removeClass('glyphicon-pause').addClass('glyphicon-play');
    }
    function simulateForms() {
        if (simulationOn) {
            addDataToMap(dimagisphere.generateRandomItem());
            window.setTimeout(simulateForms, 1200);
        }
    }
    controlButton.click(function () {
        if (!simulationOn) {
            simulationOn = true;
            setPauseButton()
            simulateForms();
        } else {
            simulationOn = false;
            setPlayButton();
        }
    });
});
</script>
	{% endblock %}
</body>
</html>
<commit_msg>add mouse over highlighting to borders<commit_after>{% load hq_shared_tags %}{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CommCare HQ Map</title>
	{% compress css %}
        <link type="text/css" rel="stylesheet" media="all" href="{% new_static 'style/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css' %}"/>
        <link type="text/css" rel="stylesheet" media="all" href="{% new_static 'reports/css/leaflet/leaflet.css' %}" />
    {% endcompress %}
    <style>
        #map { height: 800px; }
    </style>
</head>
<body>
	<div class="container-fluid">
		{% block main_content %}
            <h1>Incoming Forms by country <small>This should update in real time. Also check out the <a href="{% url 'dimagisphere_charts' %}" target="_blank">graph</a></small></h1>
            <div id="map"></div>
            <div id="controls" class="pull-right">Simulate:
                <button id="controlButton" type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-play"></span>
                </button>
            </div>
		{% endblock main_content %}
	</div>
    {% compress js %}
        <script type="text/javascript" src="{% new_static 'jquery/dist/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'style/lib/bootstrap-3.2.0/dist/js/bootstrap.min.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'js/ws4redis.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'reports/javascripts/leaflet.js' %}"></script>
        <script type="text/javascript" src="{% new_static 'hqadmin/js/dimagisphere_helper.js' %}"></script>
    {% endcompress %}
    {% block script_panel %}
        <script type="text/javascript">
jQuery(document).ready(function($) {
    var ws4redis = WS4Redis({
        uri: '{{ WEBSOCKET_URI }}form-feed?subscribe-broadcast',
        receive_message: receiveMessage,
        heartbeat_msg: {{ WS4REDIS_HEARTBEAT }}
    });

    function addDataToMap(msgObj) {
        if (dimagisphere.addData(msgObj)) {
            colorAll();
            // this removes from active after a bit of time
            window.setTimeout(function () {
                dimagisphere.formData.recentFormsByCountry[msgObj.country] -= 1;
            }, 1000);
        }
    }

    // receive a message though the Websocket from the server
    function receiveMessage(msg) {
        addDataToMap(JSON.parse(msg));
    }

    var countriesGeo;
    // A lot of the styling work here is modeled after http://leafletjs.com/examples/choropleth.html
    var map = L.map('map').setView([0, 0], 3)
    var mapId = 'mapbox.dark';
    // todo: move to config somewhere
    var accessToken = '<KEY>';
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        maxZoom: 10,
        id: mapId,
        accessToken: accessToken
    }).addTo(map);

    function getColor(featureId) {
        // courtesy of http://colorbrewer2.org/
        var colors = ['#edf8fb','#b2e2e2','#66c2a4','#2ca25f','#006d2c'];
        var count = dimagisphere.formData.totalFormsByCountry[featureId];
        if (!count) {
            return colors[0];
        }
        var activeCount = dimagisphere.formData.recentFormsByCountry[featureId];
        if (!activeCount) {
            var pct = count / dimagisphere.formData.maxFormsByCountry;
            var index = Math.min(Math.ceil(pct * colors.length), colors.length - 1);
            return colors[index];
        }
        else {
            var activeColors = ['#fef0d9','#fdcc8a','#fc8d59','#e34a33','#b30000'];
            var activeIndex = Math.min(activeCount, activeColors.length - 1);
            return activeColors[activeIndex]
        }
    }

    function getOpacity(featureId) {
        if (dimagisphere.formData.totalFormsByCountry[featureId]) {
            return .9;
        } else {
            return 0;
        }
    }

    function style(feature) {
        return {
            fillColor: getColor(feature.properties.name),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: getOpacity(feature.properties.name)
        };
    }

    function highlightFeature(e) {
        var layer = e.target;
        layer.setStyle({
            weight: 4,
            color: '#002c5f',
            dashArray: ''
        });
        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }

    function resetHighlight(e) {
        countriesGeo.resetStyle(e.target);
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight
        });
    }

    // todo: should probably be getting this from somewhere else and possibly not on every page load.
    $.getJSON('https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json', function (data) {
        countriesGeo = L.geoJson(data, {style: style, onEachFeature: onEachFeature}).addTo(map);
    });

    function colorAll() {
        if (countriesGeo !== undefined) {
            countriesGeo.setStyle(style);
        }
    }

    // update all every 5 seconds in case no activity (this is just to clear active state)
    window.setInterval(colorAll, 5000);

    // simulation controls
    var simulationOn = false;
    var controlButton = $('#controlButton');
    function setPauseButton() {
        controlButton.children('span').removeClass('glyphicon-play').addClass('glyphicon-pause');
    }
    function setPlayButton() {
        controlButton.children('span').removeClass('glyphicon-pause').addClass('glyphicon-play');
    }
    function simulateForms() {
        if (simulationOn) {
            addDataToMap(dimagisphere.generateRandomItem());
            window.setTimeout(simulateForms, 1200);
        }
    }
    controlButton.click(function () {
        if (!simulationOn) {
            simulationOn = true;
            setPauseButton()
            simulateForms();
        } else {
            simulationOn = false;
            setPlayButton();
        }
    });
});
</script>
	{% endblock %}
</body>
</html>

{'fraction_non_alphanumeric': 0.14747962069539178, 'fraction_numerical': 0.013059391116286808, 'mean_word_length': 2.477870986404397, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 93, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7058971', 'n_tokens_mistral': 3827, 'n_tokens_neox': 3617, 'n_words': 728}