Skip to content

Instantly share code, notes, and snippets.

@scien

scien/gosquared platforms

Created February 10, 2016 22:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save scien/b3c31e8e8a90528bfee6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save scien/b3c31e8e8a90528bfee6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gosquared platforms
;
(function() {
function q(f, g) {
if (!(f instanceof g)) throw new TypeError("Cannot call a class as a function");
}
function r(f, g) {
if (!f) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return !g || "object" !== typeof g && "function" !== typeof g ? f : g
}
function t(f, g) {
if ("function" !== typeof g && null !== g) throw new TypeError("Super expression must either be null or a function, not " + typeof g);
f.prototype = Object.create(g && g.prototype, {
constructor: {
value: f,
enumerable: !1,
writable: !0,
configurable: !0
}
});
g && (Object.setPrototypeOf ? Object.setPrototypeOf(f, g) : f.__proto__ = g)
}! function(f) {
function g(e) {
var c = {
limit: "0,200",
v: "v3",
ns: "now"
},
a = {},
b = 0,
d = function(c, d) {
var u = d[0];
a[u.type] = u.list;
2 === ++b && e(null, a)
};
this.fetch("aggregateStats/platforms", c, d);
this.fetch("aggregateStats/browsers", c, d)
}
var h = this;
f = h.libs;
var v = f.jQ,
l = f.d3,
k = h.util;
f = k.localTmpl;
f = f();
var w = f._t,
n = f.TMPL,
x = h.string;
w("PlatformsWidget", '<div class="widget-content"> <div class="widget_top"> <div class="widget_toolbar"></div> <div class="tab-bar"></div> </div> <div class="content"> <div class="pie-holder"></div> <div class="divider"></div> <div class="size-list"></div> </div> </div>');
w("pieChart", '<div class="pie"> <svg width="120" height="180" style="-webkit-transform: translateZ(0)"> <g transform="translate(60,50)"></g> </svg> </div>');
var m = function(e) {
var c = this.el = v(n("pieChart")),
c = this.svg = l.select(c.find("svg").get(0)).select("g");
this.arc = l.svg.arc().innerRadius(0).outerRadius(40);
this.pie = l.layout.pie().sort(function(a, b) {
return "other" === b.id ? 1 : "other" === a.id ? -1 : a.value - b.value
}).value(function(a) {
return a.value
});
this.pieG = c.append("g");
this.keyG = c.append("g");
this.opts =
e || {};
this.data = []
};
m.prototype.setData = function(e) {
var c = this,
a = this.pie,
b = this,
a = this.pieG.selectAll("path").data(a(e), function(b) {
return b.data.id
});
this.data = e;
var d = a.enter().append("path").attr("stroke-linejoin", "round");
d.each(function(b) {
this._current = b
});
d.on("mouseover", function() {
b.hover(this.__data__.data.id)
});
d.on("mouseout", function() {
return c.unhover()
});
d.attr("fill", "#f00").attr("stroke", "#fff").attr("stroke-width", 1.5).attr("d", this.arc);
a.exit().remove();
a.attr("fill", function(a) {
a =
k.md5(a.data.id).slice(0, 1);
return "hsl(" + (b.opts.hue || 205) + ",100%," + (36 + 3.5 * parseInt(a, 16)) + "%)"
});
a.transition().duration(500).attrTween("d", function(a) {
var c = l.interpolate(this._current || a, a);
this._current = c(0);
return function(a) {
return b.arc(c(a))
}
});
a = this.keyG.selectAll("g").data(e, function(a) {
return a.id
});
d = a.enter().append("g").attr("transform", "translate(0,57)");
d.on("mouseover", function() {
b.hover(this.__data__.id)
});
d.on("mouseout", function() {
return c.unhover()
});
d.append("circle").attr("cx",
0).attr("cy", 0).attr("r", 5).attr("stroke-width", 1.5).attr("stroke", "#fff");
d.append("image").attr("xlink:href", function(a) {
return a.image
}).attr("x", -8).attr("y", 13).attr("width", 16).attr("height", 16);
d.append("title").text(function(a) {
return a.title
});
a.exit().remove();
var f = e.length;
a.sort(function(a, b) {
return "other" === b.id ? 1 : "other" === a.id ? -1 : a.value - b.value
});
a.transition().duration(300).attr("transform", function(a, b) {
return "translate(" + ~~(24 * ((f - 1) / 2 - b)) + ", 57)"
});
var g = l.extent(e, function(a) {
return a.value
})[1];
a.select("circle").attr("fill", function(a) {
a = k.md5(a.id).slice(0, 1);
return "hsl(" + (b.opts.hue || 205) + ",100%," + (36 + 3.5 * parseInt(a, 16)) + "%)"
}).attr("r", function(a) {
return 2 + 4.5 * Math.pow(a.value / g, .3)
})
};
m.prototype.hover = function(e) {
this.unhover();
this.pieG.selectAll("path").filter(function(c) {
return c.data.id === e
}).transition().duration(300).attr("class", "hovered").attr("transform", function(c) {
var a = c.endAngle + c.startAngle,
a = a / 2;
c = 10 * Math.sin(a);
a = -10 * Math.cos(a);
return "translate(" + [c, a] + ")"
})
};
m.prototype.unhover =
function(e) {
this.pieG.selectAll("path.hovered").transition().duration(300).attr("transform", "")
};
var p = function(e) {
var c = this;
h.views.BaseWidgetView.apply(this, arguments);
this.el.addClass("platforms");
this.el.html(n("PlatformsWidget"));
var a = this.toolbar = new h.views.WidgetToolbar(e);
this.el.find(".widget_toolbar").replaceWith(a.el);
this.tabs = new h.views.TabControl(this.el.find(".tab-bar"), this.el.find(".tab-panes"));
this.tabButtons = [];
["desktop", "tablet", "mobile"].forEach(function(a) {
a = v(n("tab", {
num: 0,
txt: x("platformsWidget/" + a),
className: a
}));
c.tabButtons.push(a);
c.tabs.addTab(a, !1)
});
this.pie = new m;
this.pie.el.appendTo(this.el.find(".pie-holder"));
this.pie2 = new m({
hue: 40
});
this.pie2.el.appendTo(this.el.find(".size-list"))
};
p.inherits(h.views.BaseWidgetView);
p.prototype.update = function(e) {
var c = this;
["desktop", "tablet", "mobile"].forEach(function(a, d) {
return c.tabButtons[d].find(".num").text(k.formatNumber(e.platforms[a]))
});
var a = 1 < window.devicePixelRatio ? "32" : "16";
this.pie.setData(e.data.platforms.map(function(b) {
return {
id: b.key,
value: b.value,
title: k.platformGroupName(b.key),
image: "https://static.gosquared.com/images/ui/browsercons/" + a + "/" + ("other" === b.key ? "other" : k.platformGroupIcon(b.key)) + ".png"
}
}));
this.pie2.setData(e.data.browsers.map(function(b) {
return {
id: b.key,
value: b.value,
image: "https://static.gosquared.com/images/ui/browsercons/" + a + "/" + ("other" === b.key ? "other" : k.browserIcon(b.key)) + ".png",
title: k.browserName(b.key)
}
}))
};
var y = function(e) {
function c() {
q(this, c);
return r(this, e.apply(this, arguments))
}
t(c, e);
c.prototype.fetch =
function() {
g.call(this.controller, this.fetchCallback.bind(this))
};
return c
}(h.models.Model);
y.prototype.processData = function() {
var e = this;
this.data.platforms = this.data.platforms.concat();
this.data.browsers = this.data.browsers.concat();
var c = this.platforms = {
desktop: 0,
mobile: 0,
tablet: 0,
total: 0
},
a = this.data.platforms;
a.forEach(function(a) {
var b = a.key;
a = a.value;
c.total += a;
/iphone|android|ipod|iemobile|mobilesafari/.test(b) ? c.mobile += a : /ipad/.test(b) ? c.tablet += a : c.desktop += a
});
this.browserTotal = 0;
this.data.browsers.forEach(function(a) {
e.browserTotal +=
a.value
});
for (var b = {
key: "other",
value: 0,
image: "other",
n: 0
}, d; d = a.pop(), 3 < a.length;) b.value += d.value, b.l = d, b.n++;
d && a.push(d);
b.value && a.push(1 == b.n ? b.l : b);
for (b = {
key: "other",
value: 0,
image: "other",
n: 0
}; d = this.data.browsers.pop(), 3 < this.data.browsers.length;) b.value += d.value, b.l = d, b.n++;
d && this.data.browsers.push(d);
b.value && this.data.browsers.push(1 == b.n ? b.l : b)
};
f = function(e) {
function c(a) {
q(this, c);
a = r(this, e.call(this, a));
a.title = x("widgetNames/platforms");
var b = a.view = new p(a),
d = a.model = new y;
d.on("update", function() {
return b.update(d)
});
return a
}
t(c, e);
return c
}(h.controllers.BaseWidgetController);
h.addWidget("platforms", f)
}.call(GS)
})();
@scien
Copy link
Author

scien commented Feb 10, 2016 

var c = this.platforms = {
                    desktop: 0,
                    mobile: 0,
                    tablet: 0,
                    total: 0
                },
                a = this.data.platforms;
            a.forEach(function(a) {
                var b = a.key;
                a = a.value;
                c.total += a;
                /iphone|android|ipod|iemobile|mobilesafari/.test(b) ? c.mobile += a : /ipad/.test(b) ? c.tablet += a : c.desktop += a
            });

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