Skip to content

Instantly share code, notes, and snippets.

@Dewep

Dewep/auto-rescroll.html

Last active October 5, 2016 16:03
Show Gist options
  • Save Dewep/361f388e079cf7b2928fdbd96ea5c131 to your computer and use it in GitHub Desktop.
Save Dewep/361f388e079cf7b2928fdbd96ea5c131 to your computer and use it in GitHub Desktop.
Download ZIP
Timeout child scrollable
Raw
auto-rescroll.html
<!DOCTYPE>
<html>
<head>
<title>Test</title>
<style>
body { width: 200px; margin: 0 auto; }
.hide { display: none; }
#parent { height: 400px; overflow: auto; border: 1px solid #eee; margin-top: 30px; text-align: center; }
</style>
</head>
<body>
<div id="parent">
<p>LIGNE</p>
<p><a href="#" onclick="clickOn(this, 'two')">TWO</a></p>
<p>LIGNE</p>
<div id="one">
<p>LIGNE</p>
<p>LIGNE</p>
</div>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
<div id="two">
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
</div>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
<div id="three" class="hide">
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
</div>
<p>LIGNE</p>
<p>LIGNE</p>
<p><a href="#" onclick="clickOn(this, 'one')">ONE</a></p>
<p><a href="#" onclick="clickOn(this, 'three')">THREE</a></p>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
<p>LIGNE</p>
</div>
<script>
(function(){
var parent = document.getElementById("parent")
window.clickOn = function (link, id) {
var before_link = link.getBoundingClientRect();
var elem = document.getElementById(id)
elem.classList.toggle('hide')
var after_link = link.getBoundingClientRect();
var diff_link_top = before_link.top - after_link.top;
parent.scrollTop = parent.scrollTop - diff_link_top;
return false;
}
})()
</script>
</body>
</html>
Raw
directive.js
import _ from "lodash";
import {SearchResult} from "columbo-query";
class DistributionTableController {
constructor($q, $element, StoreService) {
this.$q = $q;
this.$element = $element;
this.StoreService = StoreService;
this.scrollTimeout = null;
this.scrollIsEnabled = true;
}
$onInit() {
this.ready = false;
this.id = performance.now().toString().replace(".", "");
this.field = this.config.getModelField(this.statistic.properties.field);
this.aggregationField = this.config.getModelField(this.statistic.properties.aggregationField);
this._load();
this.reloadSubscription = this.store.subscribe('reload', () => {
this._load();
});
}
$onDestroy() {
this.store.unsubscribe('reload', this.reloadSubscription);
this.$element.removeEventListener("mouseenter", this.onMouseEnter.bind(this));
this.$element.removeEventListener("mouseleave", this.onMouseEnter.bind(this));
this.$element.removeEventListener("click", this.onMouseEnter.bind(this));
}
disableScroll() {
this.$element.css('overflow', 'hidden');
this.scrollIsEnabled = false;
}
enableScroll() {
this.$element.css('overflow', 'auto');
this.scrollIsEnabled = true;
}
onMouseEnter() {
if (!this.scrollIsEnabled && this.scrollTimeout == null) {
this.scrollTimeout = setTimeout(() => {
this.enableScroll();
this.scrollTimeout = null;
}, 500)
}
}
onMouseLeave() {
if (this.scrollIsEnabled || this.scrollTimeout != null) {
this.disableScroll();
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
}
this.scrollTimeout = null;
}
}
onClick() {
if (!this.scrollIsEnabled) {
this.enableScroll();
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
}
this.scrollTimeout = null;
}
}
$postLink() {
this.disableScroll();
this.$element.addEventListener("mouseenter", this.onMouseEnter.bind(this));
this.$element.addEventListener("mouseleave", this.onMouseEnter.bind(this));
this.$element.addEventListener("click", this.onMouseEnter.bind(this));
let width = $(".columbo-dashboard__dashboard-view").width() - 20;
$(".columbo-dashboard__dashboard-distribution-table").width(width);
}
termRatio(count) {
return 100.0 * count / this.total;
}
aggregationValue(bucket) {
return bucket.value.value;
}
_load() {
let store = this.StoreService.buildStore();
store.stub.setSearchUrl(this.config.stub.searchUrl);
store.stub.setResourceUrlPattern(this.config.stub.resourceUrlPattern);
store.restore({ queries: this.store.search.queries, filters: this.store.search.filters });
store.search.aggregation('terms', this.statistic.properties.field, { size: this.statistic.properties.size });
store.search.per(0);
let body = store.search.body();
if(this.statistic.properties.aggregation) {
body.aggregations[`${this.statistic.properties.field}-terms`].aggregations.filtered.aggregations.count.aggregations = {
value: {
[this.statistic.properties.aggregation]: {
field: this.statistic.properties.aggregationField
}
}
};
}
store.stub.search(body).then((response) => {
let result = new SearchResult(store.search, response.data);
this.ready = true;
this.total = result.getTotal();
this.buckets = result.getAggregations()[`${this.statistic.properties.field}-terms`].buckets;
});
}
}
DistributionTableController.$inject = ['$q', '$element', 'StoreService'];
const DistributionTableComponent = {
bindings: {
config: '<',
store: '<',
statistic: '<'
},
controller: DistributionTableController,
template: require('./distribution-table.component.html')
};
export default DistributionTableComponent;
Raw
index.html
<!DOCTYPE>
<html>
<head>
<title>Test</title>
<style>
body { width: 900px; margin: 0 auto; }
.scroll { height: 200px; overflow-y: scroll; border: 1px solid #EEE; padding: 5px }
.no-scroll { overflow: hidden !important; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="scroll fix-scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="scroll fix-scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script>
(function(){
function enableScroll(element) {
element.classList.remove('no-scroll')
}
function disableScroll(element) {
element.classList.add('no-scroll')
}
function setScrollEvents(element) {
var timeout = null
var isEnabled = false
disableScroll(element)
element.addEventListener("mouseenter", function () {
if (!isEnabled && timeout == null) {
timeout = setTimeout(function () {
enableScroll(element)
isEnabled = true
timeout = null
}, 500)
}
})
element.addEventListener("mouseleave", function () {
if (isEnabled || timeout != null) {
disableScroll(element)
isEnabled = false
if (timeout) {
clearTimeout(timeout)
}
timeout = null
}
})
element.addEventListener("click", function () {
if (!isEnabled) {
enableScroll(element)
isEnabled = true
if (timeout) {
clearTimeout(timeout)
}
timeout = null
}
})
}
var elements = document.querySelectorAll(".fix-scroll")
for (var i = 0; i < elements.length; i++) {
setScrollEvents(elements[i])
}
})()
</script>
</body>
</html>
@kmatrah
Copy link

kmatrah commented Oct 5, 2016 

import _ from "lodash";
import geohash from "ngeohash";

class HeatMapController {
  constructor($q, StoreService, uiGmapGoogleMapApi) {
    this.$q = $q;
        this.StoreService = StoreService;
    this.uiGmapGoogleMapApi = uiGmapGoogleMapApi;
    }

  $onInit() {
    this.ready = false;
    this.id = performance.now().toString().replace(".", "");
    this.plots = [];

    this.uiGmapGoogleMapApi.then(() => this._load());

    this.reloadSubscription = this.store.subscribe('reload', () => {
      this._load();
    });
  }

  $onDestroy() {
    this.store.unsubscribe('reload', this.reloadSubscription);
  }

  $postLink() {
    let width = $(".columbo-dashboard__dashboard-view").width() - 20;
    $(".columbo-dashboard__dashboard-heat-map").width(width/2);
  }

  _load() {
    let store = this.StoreService.buildStore();
    store.stub.setSearchUrl(this.config.stub.searchUrl);
    store.stub.setResourceUrlPattern(this.config.stub.resourceUrlPattern);

    store.restore({ queries: this.store.search.queries, filters: this.store.search.filters });

    let body = store.search.body();
    body.size = 0;

    body.aggregations = {
      heat_map: {
        geohash_grid: {
          field: this.statistic.properties.geoField,
          precision: this.statistic.properties.precision,
        }
      }
    };

    store.stub.search(body).then((response) => {
      this.ready = true;
      this._buildMap(response.data.aggregations);
    });
  }

  _buildMap(aggregations) {
    let colorScale = d3.scale.linear()
      .domain([0, d3.max(aggregations['heat_map'].buckets, (d) => d.doc_count)]) 
      .range([this.statistic.properties.map.color.min, this.statistic.properties.map.color.max]);

    let radiusScale = d3.scale.linear()
      .domain([0, d3.max(aggregations['heat_map'].buckets, (d) => d.doc_count)]) 
      .range([this.statistic.properties.map.radius.min, this.statistic.properties.map.radius.max]);

    this.plots = _.map(aggregations['heat_map'].buckets, (b, i) => {
      return { 
        id: i,
        location: geohash.decode(b.key), 
        value: b.doc_count, 
        radius: radiusScale(b.doc_count),
        fill: {
          color: colorScale(b.doc_count),
          opacity: 0.5,
          weight: 1,
        }
      };
    });
  }
}

HeatMapController.$inject = ['$q', 'StoreService', 'uiGmapGoogleMapApi'];

const HeatMapComponent = {
  bindings: { 
    config: '<',
    store: '<',
    statistic: '<',
  },
  controller: HeatMapController,
  template: require('./heat-map.component.html')
};

export default HeatMapComponent;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment