find: function(expression){
if (this.length === 1) return $(slick.find(expression, this[0]))
var buffer = []
for (var i = 0, node; node = this[i]; i++) buffer.push(slick.find(expression, node))
return $(buffer)
},
_renderSections: function(stat) {
if(slick.find(this._selector + " " + this._computersQuoteSelector)) { // this tab is rendered;
if(!stat) stat = this._defaultStat;
dom.text(slick.find(this._selector + " " + this._computersQuoteSelector), "");
var computersQuote = new PercentagePullQuote(stat.map(function(v) { return 1 - v; }).value());
computersQuote.render(this._selector + " " + this._computersQuoteSelector);
dom.text(slick.find(this._selector + " " + this._mobileQuoteSelector), "");
var mobileQuote = new PercentagePullQuote(stat.value());
mobileQuote.render(this._selector + " " + this._mobileQuoteSelector);
dom.text(slick.find(this._selector + " " + this._computersBrowsersHistSelector), "");
var computersBrowsers = this._repo.getStatistic("Browsers").filter(Platforms.desktopBrowsers).at(stat.time()).topN(4, true);
var computersBrowsersKey = new ColorKey(computersBrowsers.keys(), colors);
computersBrowsers = computersBrowsers.map(function(s, k) {
return computersBrowsersKey.withColor(s, k);
});
var computersBrowsersHist = new HorizontalHistogram(computersBrowsers, {labels: true});
computersBrowsersHist.render(this._selector + " " + this._computersBrowsersHistSelector);
dom.text(slick.find(this._selector + " " + this._mobileHistSelector), "");
var mobileOses = this._repo.getStatistic("Operating Systems").filter(Platforms.mobile).at(stat.time()).topN(4, true);
var mobileKey = new ColorKey(mobileOses.keys(), colors);
mobileOses = mobileOses.map(function(s, k) {
return mobileKey.withColor(s, k);
});
var mobileHist = new HorizontalHistogram(mobileOses, {labels: true, rtl: true});
mobileHist.render(this._selector + " " + this._mobileHistSelector);
}
},
_selectTab: function(id) {
var contentSection = slick.find(this._contentSelector, this._element);
dom.text(contentSection, "");
var tabs = slick.search(".tabs li", this._element);
_.each(tabs, function(tab) {
dom.removeClass(tab, "selected");
});
var selected = slick.find(".tabs li.tab-" + id, this._element);
dom.addClass(selected, "selected");
this._tabs[id][1](this._selector + " " + this._contentSelector);
},
render: function(selector) {
this._element = slick.find(selector);
var allPublishers = this._repo.getPublishersByVisits();
this._topPublishers = this._topN(allPublishers);
this._otherPublisher = new OtherPublisher(_.difference(allPublishers, this._topPublishers));
var publishers = this._topPublishers.concat(this._otherPublisher);
publishers = withVisitProportions(
publishers,
this._repo.getTotalPublisherVisits()
);
var topDatasets = withVisitProportions(withOtherPublisher(
this._topN(this._repo.getDatasetsByVisits()),
this._topPublishers, this._otherPublisher
), this._repo.getTotalDatasetVisits());
this._publisherColorKey = new ColorKey(_.map(publishers, function(p) { return p.id(); }));
publishers = _.map(publishers, bind(this, function(publisher) {
return this._publisherColorKey.withColor(publisher, publisher.id());
}));
this._topDatasets = _.map(topDatasets, bind(this, function(dataset) {
return this._publisherColorKey.withColor(dataset, dataset.publisher().id());
}));
this._datasetsColumn = new VisitableList(this._app, this._topDatasets);
var publishersList = new VisitableList(this._app, publishers, {
links: false,
onClick: bind(this, function(visitable) {
this._app.sendMessage("selectPublisher", visitable.publisher());
}),
onHover: bind(this, function(visitable) {
this._app.sendMessage("highlightPublisher", visitable.publisher());
})
});
var publishersPie = new VisitablePie(this._app, publishers);
this._publishersColumn = new PublishersColumn(this._app, publishersPie, publishersList);
render.toSelector(this._template, selector);
this._publishersColumn.render(selector + " " + this._publishersColumnSelector);
this._datasetsColumn.render(selector + " " + this._datasetsColumnSelector);
var backLink = slick.find(this._backLinkSelector, this._element);
events.on(backLink, "click", bind(this, function(event) {
event.preventDefault();
this._app.sendMessage("selectPublisher", null) ;
}));
},
render : function(selector) {
this._element = render(this._template, selector, this._templateParams(), true);
var checkboxes = slick.search("input", this._element);
var labels = slick.search("label", this._element);
_.each(checkboxes, bindListener(this, function(checkbox) {
events.on(checkbox, "click", bindListener(this, this._changeSelection));
}));
_.each(labels, bindListener(this, function(label) {
events.on(label, "mouseover", bindListener(this, this._changeHighlight));
events.on(label, "mouseout", bindListener(this, this._removeHighlight));
}));
events.on(slick.find(".select_all", this._element), "click", bindListener(this, this._selectAll));
events.on(slick.find(".select_none", this._element), "click", bindListener(this, this._selectNone));
},
render: function(selector) {
var container = slick.find(selector);
this._element = document.createElement("ul");
dom.addClass(this._element, "visitable_list");
container.appendChild(this._element);
this._renderVisitables();
},
render: function(selector) {
var element = slick.find(selector);
this._map = L.map(element, { attributionControl: false });
this._map.setView([23, 18], 2);
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(this._map);
if(this._withoutUK) {
this._statistics = this._statistics.without("United Kingdom");
}
this._statistics.last().proportionally().sqrt().each(bind(this, function(name, statistic) {
var country = this._repo.getCountry(name);
if(country) {
var radius = statistic.value() * this._maxRadius;
var marker = L.circleMarker(
[country.latitude(), country.longitude()],
{radius: radius, color: colors.base }
);
this._markers[name] = marker;
marker.addEventListener("click", bind(this, function() {
this._onMarkerClick(name);
}));
marker.addTo(this._map);
}
}));
},
BudgetPie.prototype._initD3 = function() {
var width = this._element.offsetWidth;
var height = this._element.offsetWidth;
var radius = width /2;
var svg = d3.select(slick.find(".chart", this._element))
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
this._layout = d3.layout.pie()
.sort(null)
.value(bindListener(this, function(d) {
return d.dept ? this._parentDept.cash_budget() : 0;
}));
this._arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
this._slice = svg.datum(this._data).selectAll("path").data(this._layout)
.enter().append("path")
.style("fill", function(d) { return d.data.color; })
.attr("d", this._arc);
this._label = svg.append("text")
.text("100%");
}
render: function(selector) {
this._element = slick.find(selector);
var outerWidth = this._element.offsetWidth;
this._width = outerWidth - this._hMargin * 2;
this._height = this._aspect * outerWidth - this._vMargin * 2;
dom.setAttribute(this._element, "style", "height:" + this._aspect * outerWidth + "px;");
this._x = d3.scale.ordinal()
.domain(this._series.times())
.rangeRoundBands([0, this._width], 0.1);
this._axisX = d3.time.scale()
.range([0, this._width])
.domain([this._series.startTime(), this._series.endTime()]);
this._y = d3.scale.linear()
.range([0, this._height])
.domain([0, 1]);
this._axisY = d3.scale.linear()
.range([0, this._height])
.domain([1, 0]);
this._svg = d3.select(this._element).append("svg")
.attr("width", this._width + 2 * this._hMargin)
.attr("height", this._height + 2 * this._vMargin)
.append("g")
.attr("transform", "translate(" + this._hMargin + "," + this._vMargin + ")");
this._container = this._svg.append("g");
this._renderAxes();
this._renderChunks();
},
render: function(selector) {
this._element = slick.find(selector);
var outerWidth = this._element.offsetWidth;
this._width = outerWidth - this._hMargin * 2;
this._height = this._aspect * outerWidth - this._vMargin * 2;
dom.setAttribute(this._element, "style", "height:" + this._aspect * outerWidth + "px;");
this._x = d3.time.scale()
.range([0, this._width])
.domain([this._series.startTime(), this._series.endTime()]);
this._y = d3.scale.linear()
.range([0, this._height])
.domain([this._series.maxOfSeries().value(), 0]);
this._svg = d3.select(this._element).append("svg")
.attr("width", this._width + 2 * this._hMargin)
.attr("height", this._height + 2 * this._vMargin)
.append("g")
.attr("transform", "translate(" + this._hMargin + "," + this._vMargin + ")");
this._container = this._svg.append("g");
this._renderAxes();
this._renderLine();
if(this._points) this._renderPoints();
if(this._mouseOver) this._setupListeners();
},
render: function(selector) {
this._element = slick.find(selector);
var width = this._element.offsetWidth;
var height = this._scale * width;
dom.setAttribute(this._element, "style", "height:" + height + "px;");
this._yScale = this._yScale.range([0, height]);
var svg = d3.select(this._element).append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var barWidth = width / this._statistics.size() - this._margin;
var bar = svg.selectAll(".bar")
.data(this._statistics.series())
.enter().append("g")
.attr("transform", bind(this, function(d, i) {
return "translate(" + i * (barWidth + this._margin) + ",0)";
}));
bar.append("rect")
.attr("y", bind(this, function(d) { return height - this._yScale(d.value()); }))
.attr("height", bind(this, function(d) { return this._yScale(d.value()); }))
.attr("width", barWidth)
.attr("fill", function(d) { return d.color(); });
}
render: function(selector) {
render.toSelector(this._template, selector);
this._selector = selector;
this._element = slick.find(selector);
this._setupLinks();
this._setupGraphics();
this._normaliseHeights();
},
_onSelectPublisher: function(publisher) {
var titleArea = slick.find(this._titleAreaSelector, this._element);
if(publisher) {
style(titleArea, { display: "block" });
var title = slick.find(this._titleSelector, this._element);
dom.text(title, publisher.title());
var n = publisher.title() == "Other" ? 10 : this._app.nToDisplay;
this._datasetsColumn.update(_.map(
withOtherPublisher(this._topN(publisher.datasets(), n), this._topPublishers, this._otherPublisher),
bind(this, function(dataset) {
return this._publisherColorKey.withColor(dataset, dataset.publisher().id());
})
));
} else {
style(titleArea, { display: "none" });
this._datasetsColumn.update(this._topDatasets);
}
},
_showHomeAwaySection: function() {
var homeAwaySection = slick.find(this._homeAwaySectionSelector);
window.setTimeout(bind(this, function() {
style(homeAwaySection, {
"height": this._homeAwaySectionHeight + "px",
"opacity": "1.0"
});
}, 50));
},
_setupLinks: function() {
events.on(slick.find(".datasets_link", this._element), "click", bind(this, function(event) {
event.preventDefault();
this._app.sendMessage("switchTab", "Datasets");
}));
events.on(slick.find(".countries_link", this._element), "click", bind(this, function(event) {
event.preventDefault();
this._app.sendMessage("switchTab", "Countries");
}));
events.on(slick.find(".platforms_link", this._element), "click", bind(this, function(event) {
event.preventDefault();
this._app.sendMessage("switchTab", "Platforms");
}));
events.on(slick.find(".social_link", this._element), "click", bind(this, function(event) {
event.preventDefault();
this._app.sendMessage("switchTab", "Social");
}));
},
_onHighlight: function(project) {
_.each(slick.search("label", this._element), function(element) {
dom.removeClass(element, "highlighted");
})
if(project) {
var department = project.department;
var element = slick.find("label[for='"+department.key()+"']", this._element);
dom.addClass(element, "highlighted");
}
},
_showBackButton: function() {
var backButtonContainer = slick.find(this._backButtonSelector);
var link = document.createElement("a");
dom.text(link, "\u00AB Back");
dom.setAttribute(link, "href", "#");
events.on(link, "click", bind(this, function(event) {
event.preventDefault();
this._app.sendMessage("countrySelected", null);
}));
backButtonContainer.appendChild(link);
},
render : function(selector, x, y) {
_.each(slick.search(".hover"), function(e) { e.remove(); });
d3.select(selector).append("div").attr("class", "hover");
this._element = slick.find(".hover");
style(this._element, { top: y + "px", width: this._width});
var parentWidth = window.innerWidth;
if(x < parentWidth / 2) {
style(this._element, {left: x + "px"});
} else {
style(this._element, {right: (parentWidth - x) + "px"});
}
this._contentComponent.render(selector + " .hover");
},
_hideHomeAwaySection: function() {
var homeAwaySection = slick.find(this._homeAwaySectionSelector);
this._homeAwaySectionHeight = homeAwaySection.offsetHeight;
style(homeAwaySection, {
"position": "relative",
"height": this._homeAwaySectionHeight + "px",
"transition": "height 500ms, opacity 500ms"
});
window.setTimeout(function() {
style(homeAwaySection, {
"height": "0px",
"opacity": 0
});
}, 50);
},
_hideCountrySection: function() {
var countrySectionContainer = slick.find(this._countrySummarySelector);
dom.text(countrySectionContainer, "");
},
render: function(selector) {
this._element = slick.find(selector);
this._rootElement = this._createLinkElement(this._root);
this._element.appendChild(this._rootElement);
},
_hideBackButton: function() {
var backButtonContainer = slick.find(this._backButtonSelector);
dom.text(backButtonContainer, "");
},