/soc/2012/sanket/www-statscollector: 686a8ea4cc3f: Rewrite JS to...
sanket
sanket at soc.pidgin.im
Sun Jul 8 01:40:08 EDT 2012
Changeset: 686a8ea4cc3ffd1a756e05588b6d218b6041b61a
Author: sanket <sanket at soc.pidgin.im>
Date: 2012-07-07 22:37 +0530
Branch: default
URL: http://hg.pidgin.im/soc/2012/sanket/www-statscollector/rev/686a8ea4cc3f
Description:
Rewrite JS to purge it into a separate file
Currently all the JS was going into the index.html file which was making
it excessively monolithic and hard to read. I have purged out *many* functions
into a separate JS file charts.js.
diffstat:
pidgin_stats_collector/media/js/charts.js | 253 ++++++++++
pidgin_stats_collector/templates/display/index.html | 502 +-------------------
2 files changed, 268 insertions(+), 487 deletions(-)
diffs (truncated from 788 to 300 lines):
diff --git a/pidgin_stats_collector/media/js/charts.js b/pidgin_stats_collector/media/js/charts.js
new file mode 100644
--- /dev/null
+++ b/pidgin_stats_collector/media/js/charts.js
@@ -0,0 +1,253 @@
+function drawChart(cat, dat, e, ttle) {
+ var chart;
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: e,
+ type: 'column',
+ margin: [ 50, 50, 150, 80]
+ },
+ title: {
+ text: ttle
+ },
+ xAxis: {
+ categories: cat,
+ labels: {
+ rotation: -45,
+ align: 'right',
+ style: {
+ fontSize: '13px',
+ fontFamily: 'Verdana, sans-serif'
+ }
+ }
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'User count'
+ }
+ },
+ legend: {
+ enabled: true
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.x +'</b><br/>'+
+ 'User count: '+ this.y;
+ }
+ },
+ series: [{
+ name: 'Avg Buddy list size',
+ data: dat,
+ dataLabels: {
+ enabled: true,
+ rotation: 0,
+ color: '#000',
+ align: 'right',
+ x: 0,
+ y: -10,
+ formatter: function() {
+ return this.y;
+ },
+ style: {
+ fontSize: '13px',
+ fontFamily: 'Verdana, sans-serif'
+ }
+ }
+ }]
+ });
+ }
+
+ function drawPie(dat, e, ttle){
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: e,
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: true
+ },
+ title: {
+ text: ttle
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
+ }
+ },
+ plotOptions: {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ color: '#000000',
+ connectorColor: '#000000',
+ formatter: function() {
+ return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
+ }
+ }
+ }
+ },
+ series: [{
+ type: 'pie',
+ name: 'OS Share',
+ data: dat,
+ }]
+ });
+ });
+
+}
+
+function drawOSChart(cat, dat, e, title)
+ {
+ var chart;
+
+
+ var colors = Highcharts.getOptions().colors,
+ categories = cat,
+ name = title,
+ data = dat;
+
+ function setChart(name, categories, data, color) {
+ chart.xAxis[0].setCategories(categories);
+ chart.series[0].remove();
+ chart.addSeries({
+ name: name,
+ data: data,
+ color: color || 'white'
+ });
+ }
+
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: e,
+ type: 'column'
+ },
+ title: {
+ text: 'Operating System usage trend'
+ },
+ subtitle: {
+ text: 'Click the columns to view detailed OS analysis. Click again to come back.'
+ },
+ xAxis: {
+ categories: categories
+ },
+ yAxis: {
+ title: {
+ text: 'User Count'
+ }
+ },
+ plotOptions: {
+ column: {
+ cursor: 'pointer',
+ point: {
+ events: {
+ click: function() {
+ var drilldown = this.drilldown;
+ if (drilldown) { // drill down
+ setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
+ } else { // restore
+ setChart(name, categories, data);
+ }
+ }
+ }
+ },
+ dataLabels: {
+ enabled: true,
+ color: colors[0],
+ style: {
+ fontWeight: 'bold'
+ },
+ formatter: function() {
+ return this.y;
+ }
+ }
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ var point = this.point,
+ s = this.x +':<b>'+ this.y +'% market share</b><br/>';
+ if (point.drilldown) {
+ s += 'Click to view '+ point.category +' versions';
+ } else {
+ s += 'Click to return to browser brands';
+ }
+ return s;
+ }
+ },
+ series: [{
+ name: name,
+ data: data,
+ color: 'white'
+ }],
+ exporting: {
+ enabled: false
+ }
+ });
+
+}
+
+function pluginDetailChart(cat, dat, e, ttle)
+ {
+ var chart;
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: e,
+ type: 'bar',
+ margin: [ 100, 100, 200, 200],
+ plotBackgroundColor: "#999966",
+ backgroundColor: "#000",
+ },
+ title: {
+ text: ttle
+ },
+ xAxis: {
+ categories: cat,
+ labels: {
+ rotation: 0,
+ align: 'right',
+ style: {
+ fontSize: '13px',
+ fontFamily: 'Verdana, sans-serif'
+ }
+ }
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'User count'
+ }
+ },
+ legend: {
+ enabled: true
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.x +'</b><br/>'+
+ 'User count: '+ this.y;
+ }
+ },
+ series: [{
+
+ data: dat,
+ dataLabels: {
+ enabled: true,
+ rotation: 0,
+ color: '#000',
+ align: 'right',
+ x: 30,
+ y: 0,
+ formatter: function() {
+ return this.y;
+ },
+ style: {
+ fontSize: '13px',
+ fontFamily: 'Verdana, sans-serif'
+ }
+ }
+ }]
+ });
+
+}
\ No newline at end of file
diff --git a/pidgin_stats_collector/templates/display/index.html b/pidgin_stats_collector/templates/display/index.html
--- a/pidgin_stats_collector/templates/display/index.html
+++ b/pidgin_stats_collector/templates/display/index.html
@@ -18,6 +18,7 @@
<script src="/media/js/modules/exporting.js"></script>
<script src="/media/js/simplemodal.js"></script>
<script src="/media/js/stats.js"></script>
+ <script src="/media/js/charts.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
@@ -176,130 +177,22 @@
</div>
</div>
- <!-- Google Analytics Widget Code -->
-<!--<script type="text/javascript">
- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
- document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-</script><script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
-<script type="text/javascript">
- jQuery(document).ready( function() {
- var pageTracker = _gat._getTracker("UA-2814037-1");
- pageTracker._setDomainName(".pidgin.im");
- pageTracker._initData();
- pageTracker._trackPageview();
- jQuery('a').each( function() {
- var url;
- if ( this.href.match("http:\/\/developer.pidgin.im") ) {
- if ( this.href.match(/\.(.)$/) ) {
- url = this.pathname + this.search;
- };
- } else {
- var port = '';
- if ( this.port != '') port = ':'+this.port;
- url = '/external/' + this.hostname + port + this.pathname + this.search;
- };
- if ( url ) {
- if ( ! url.match('^\/attachment\/') ) {
- jQuery(this).click( function() {
- pageTracker._trackPageview(url);
More information about the Commits
mailing list