moving table config into data attributes

2010-06-18 14:09:20 -07:00 · 2010-06-18 14:09:20 -07:00 · 3d1655e50e
--- a/apps/stats/templates/stats/downloads.html
+++ b/apps/stats/templates/stats/downloads.html
@ -4,21 +4,21 @@
 <div class="featured">
  <div class="featured-inner">
    <div class="featured-body tabular">
-      <table class="stats-overview"><thead>
+      <table class="stats-aggregate"><thead>
        <tr><th>{{_('Category')}}</th><th>Last 7 Days</th><th>7-14 Days Ago</th><th>{{_('All Time')}}</th></tr>
      </thead>
      <tbody>
        <tr>
          <td class="label">{{_('Total Downloads')}}</td>
-          <td class="value"><span class="value" id="sum_range"></span><span class="change" id="sum_diff"></span></td>
-          <td class="value"><span class="value" id="sum_prev_range"></span><span class="change" id="sum_prev_diff"></span></td>
-          <td class="value"><span class="value" id="sum_all_time"></span><span class="change">&nbsp;</span></td>
+          <td class="value"><span class="value aggregate" id="sum_range"></span><span class="change" id="sum_diff"></span></td>
+          <td class="value"><span class="value aggregate" id="sum_prev_range"></span><span class="change" id="sum_prev_diff"></span></td>
+          <td class="value"><span class="value aggregate" id="sum_all_time"></span><span class="change">&nbsp;</span></td>
        </tr>
        <tr>
          <td class="label">{{_('Average Downloads/Day')}}</td>
-          <td class="value"><span class="value" id="mean_range"></span><span class="change" id="mean_diff"></span></td>
-          <td class="value"><span class="value" id="mean_prev_range"></span><span class="change" id="mean_prev_diff"></span></td>
-          <td class="value"><span class="value" id="mean_all_time"></span><span class="change">&nbsp;</span></td>
+          <td class="value"><span class="value aggregate" id="mean_range"></span><span class="change" id="mean_diff"></span></td>
+          <td class="value"><span class="value aggregate" id="mean_prev_range"></span><span class="change" id="mean_prev_diff"></span></td>
+          <td class="value"><span class="value aggregate" id="mean_all_time"></span><span class="change">&nbsp;</span></td>
        </tr>
      </tbody></table>
    </div>
@ -27,41 +27,23 @@
 <h3>{{_('Downloads by Date')}}</h3>
 <div class="statbox">
  <div class="tabular">
-    <table class="bar-table">
+    <table class="csv-table">
+      <thead>
+        <tr>
+          <th 
+            data-field="date"
+            data-format="date">
+              {{_('Date')}}
+          </th>
+          <th 
+            data-field="count"
+            data-format="number"
+            data-bar_column="true"
+            data-bar_width="65%">
+              {{_('Count')}}
+          </th>
+        </tr>
    </table>
  </div>
 </div>
 {% endblock %}
-
-{% block chartconfig %}
-  <script>
-    AMO.csvTableConfig = {
-        el: $("table.bar-table")[0],
-        report: "{{ report }}",
-        columns: [{
-            label: "{{_('Date')}}",
-            field: 'date',
-            format: function (value) {
-                return Highcharts.dateFormat('%a, %b %e, %Y', new Date(value));
-            }
-        },
-        {
-            label: "{{_('Count')}}",
-            field: 'count',
-            format: function (value) {
-                return Highcharts.numberFormat(value, 0);
-            }
-        }],
-        barColumns: [{
-            valueColumn: 2,
-            barColor: '#26a2ce',
-            className: 'bar',
-            width: "65%"
-        }]
-    };
-    AMO.aggregate_stats_field = {
-        metric: "downloads",
-        name: "count"
-    };
-  </script>
-{% endblock %}
--- a/apps/stats/templates/stats/stats.html
+++ b/apps/stats/templates/stats/stats.html
@ -45,7 +45,10 @@
      Notable Stats and tips will go here.
    </aside>
  </div>
-  <div class="primary statistics">
+  <div class="primary statistics"
+    data-report="{{ report }}"
+    data-addon_id="{{ addon.id }}"
+    >
    {% if true %}
      <div class="custom criteria hidden">
        <form>
@ -80,15 +83,8 @@
 {% block js %}
 <script>
    (function () {
-        var addon_id = {{ addon.id }};
        var stats_base_url = '{{ stats_base_url }}/';
-        var reportName = '{{ report }}';
-        AMO.getAddonId = function () { return addon_id };
        AMO.getStatsBaseURL = function () { return stats_base_url };
-        AMO.getReportName = function () { return reportName };
-        AMO.getSeriesList = function () { 
-          return AMO.seriesList || {"metric" : reportName, fields : ["count"]};
-        };
    })();
 </script>
 {% block chartconfig %}
--- a/media/css/stats.css
+++ b/media/css/stats.css
@ -310,34 +310,34 @@ background:#003595;
 *    bar-chart tables
 **/

-.bar-table tbody {
+.csv-table tbody {
    display: none;
 }
-.bar-table tbody.selected {
+.csv-table tbody.selected {
    display: table-row-group;
 }

-table.bar-table {
+table.csv-table {
    width: 100%;
 }
-table.bar-table td,
-table.bar-table th {
+table.csv-table td,
+table.csv-table th {
    text-align: right;
 }
-table.bar-table td.bar div {
+table.csv-table td.bar div {
    text-align: right;
    margin: 8px 0;
    line-height: 100%;
    height: 100%;
 }

-table.bar-table td.bar,
-table.bar-table th.bar {
+table.csv-table td.bar,
+table.csv-table th.bar {
    border-left: 1px solid #8db9c7;
    padding: 0;
 }
-table.bar-table td:first-child,
-table.bar-table th:first-child {
+table.csv-table td:first-child,
+table.csv-table th:first-child {
    text-align: left;
 }

@ -357,37 +357,37 @@ aside.highlight {
 *  Big table
 **/

-table.stats-overview {
+table.stats-aggregate {
    width: 100%;
    margin-top: .5em;
 }

-table.stats-overview thead th {
+table.stats-aggregate thead th {
    text-align: right;
    padding-right: 72px;
    line-height: 90%;
 }

-table.stats-overview thead th:first-child {
+table.stats-aggregate thead th:first-child {
    text-align: left;
    padding-right: inherit;
 }

-table.stats-overview tbody td {
+table.stats-aggregate tbody td {
    line-height: 120%;
    font-size: 140%;
 }

-table.stats-overview tbody td.value {
+table.stats-aggregate tbody td.value {
    padding: 5px 0 3 0px;
    text-align: right;
 }

-table.stats-overview tbody td.label {
+table.stats-aggregate tbody td.label {
    padding-left: 2px;
 }

-table.stats-overview tbody span.change {
+table.stats-aggregate tbody span.change {
    display: block;
    float: right;
    width: 54px;
@ -397,10 +397,10 @@ table.stats-overview tbody span.change {
    padding-top: 2px;
 }

-table.stats-overview tbody span.change.plus {
+table.stats-aggregate tbody span.change.plus {
    color: #00774d;
 }
-table.stats-overview tbody span.change.minus {
+table.stats-aggregate tbody span.change.minus {
    color: #850000;
 }

--- a/media/js/zamboni/stats.js
+++ b/media/js/zamboni/stats.js
@ -1,9 +1,98 @@
-// (function () {
+$(document).ready(function () {
+    
+    jQuery.fn.getData = function(name) {
+        return this.attr("data-" + name);
+    };
+
+    var addon_id = $(".primary").getData("addon_id");
+    var reportName = $(".primary").getData("report");
+    AMO.getAddonId = function () { return addon_id };
+    AMO.getReportName = function () { return reportName };
+    AMO.getSeriesList = function () { 
+        return AMO.seriesList || {"metric" : reportName, fields : ["count"]};
+    };
+    
+    t.go();
+    
+    AMO.StatsManager.init();
+    
+    t.lap("StatsManager init");
+
+    var report = AMO.getReportName();
+
+    $("#date-range-start").datepicker();
+    $("#date-range-end").datepicker();
+
+    t.lap("datepicker init");
+
+    var rangeMenu = $(".criteria.range ul");
+
+    rangeMenu.click(function(e) {
+        var $target = $(e.target).parent();
+        var newRange = $target.attr("data-range");
+        var $customRangeForm = $("div.custom.criteria");
+
+        if (newRange) {
+            $(this).children("li.selected").removeClass("selected");
+            $target.addClass("selected");
+
+            if (newRange == "custom") {
+                $customRangeForm.removeClass("hidden").slideDown('fast');
+            } else {
+                $customRangeForm.slideUp('fast');
+                AMO.StatsManager.getSeries(AMO.getSeriesList(), newRange, updateSeries);
+            }
+        }
+        e.preventDefault();
+    });
+
+    $("#date-range-submit").click(function(e) {
+        var start = new Date($("#date-range-start").val());
+        var end = new Date($("#date-range-end").val());
+
+        range = {
+            custom: true,
+            start: start,
+            end: end
+        };
+
+        generateSeries(report, range, updateSeries);
+    });
+
+    t.lap("events init");
+
+    var csv_table_el = $(".csv-table");
+    if (csv_table_el.length) {
+        csvTable = new PageTable(csv_table_el[0]);
+    }
+
+    t.lap("csvtable init");
+    
+
+    LoadBar.on("Loading the latest data&hellip;");
+    //Get initial dataset
+    if (datastore[report] && datastore[report].maxdate) {
+        var fetchStart = datastore[report].maxdate - millis("1 day");
+    } else {
+        var fetchStart = ago("30 days");
+    }
+    AMO.StatsManager._fetchData(report, fetchStart, today(), function () {
+        if (AMO.aggregate_stats_field) {
+            show_aggregate_stats(AMO.aggregate_stats_field, 30);
+        }
+        AMO.StatsManager.getSeries(AMO.getSeriesList(), "30 days", initCharts);
+        LoadBar.off();
+        csvTable.gotoPage(1);
+    });
+
+    //initTopCharts();
+
+});
+
+

    var mainChart;

-    var _seriesCache = {};
-
    function dayFormatter(x) { return Highcharts.dateFormat('%a, %b %e, %Y', x); }
    function weekFormatter(x) { return Highcharts.dateFormat('%b %e - ', x) + Highcharts.dateFormat('%b %e, %Y', x+7*24*60*60*1000); }
    function monthFormatter(x) { return Highcharts.dateFormat('%B %Y', x); }
@ -121,84 +210,6 @@
    }


-    $(document).ready(function () {
-        
-        t.go();
-        
-        AMO.StatsManager.init();
-        
-        t.lap("StatsManager init");
-
-        var report = AMO.getReportName();
-
-        $("#date-range-start").datepicker();
-        $("#date-range-end").datepicker();
-
-        t.lap("datepicker init");
-
-        var rangeMenu = $(".criteria.range ul");
-
-        rangeMenu.click(function(e) {
-            var $target = $(e.target).parent();
-            var newRange = $target.attr("data-range");
-            var $customRangeForm = $("div.custom.criteria");
-
-            if (newRange) {
-                $(this).children("li.selected").removeClass("selected");
-                $target.addClass("selected");
-
-                if (newRange == "custom") {
-                    $customRangeForm.removeClass("hidden").slideDown('fast');
-                } else {
-                    $customRangeForm.slideUp('fast');
-                    AMO.StatsManager.getSeries(AMO.getSeriesList(), newRange, updateSeries);
-                }
-            }
-            e.preventDefault();
-        });
-
-        $("#date-range-submit").click(function(e) {
-            var start = new Date($("#date-range-start").val());
-            var end = new Date($("#date-range-end").val());
-
-            range = {
-                custom: true,
-                start: start,
-                end: end
-            };
-
-            generateSeries(report, range, updateSeries);
-        });
-
-        t.lap("events init");
-
-
-        if (AMO.csvTableConfig) {
-            csvTable = new PageTable(AMO.csvTableConfig);
-        }
-
-        t.lap("csvtable init");
-        
-
-        LoadBar.on("Loading the latest data&hellip;");
-        //Get initial dataset
-        if (datastore[report] && datastore[report].maxdate) {
-            var fetchStart = datastore[report].maxdate - millis("1 day");
-        } else {
-            var fetchStart = ago("30 days");
-        }
-        AMO.StatsManager._fetchData(report, fetchStart, today(), function () {
-            if (AMO.aggregate_stats_field) {
-                show_aggregate_stats(AMO.aggregate_stats_field, 30);
-            }
-            AMO.StatsManager.getSeries(AMO.getSeriesList(), "30 days", initCharts);
-            LoadBar.off();
-            csvTable.gotoPage(1);
-        });
-
-        //initTopCharts();
-
-    });

 // })();

--- a/media/js/zamboni/stats_tables.js
+++ b/media/js/zamboni/stats_tables.js
@ -7,9 +7,8 @@
 **/


-function PageTable(_cfg) {
-    this.tableEl = $(_cfg.el);
-    this.thead = $("<thead></thead>");
+function PageTable(_el) {
+    this.tableEl = $(_el);
    this.paginator = {
        ol: $("<ol class='pagination'></ol>"),
        li: [],
@ -20,22 +19,40 @@ function PageTable(_cfg) {
    };
    this.pages = [];
    this.currentpage = 0;
-    this.columns = _cfg.columns;
-    this.report = _cfg.report;
-    this._cfg = _cfg;
-    this.page_size = _cfg.page_size || 14;
-
-    //Make a header if necessary
    
-    var tr = $("<tr></tr>");
-    for (var i=0; i<this.columns.length; i++) {
-        var col = this.columns[i];
-        tr.append("<th>" + col.label + "</th>");
-    }
-
-    this.thead.append(tr);
-    this.tableEl.append(this.thead);
-
+    this.format = {
+        date: function (value) {
+            return Highcharts.dateFormat('%a, %b %e, %Y', new Date(value));
+        },
+        number: function (value) {
+            return Highcharts.numberFormat(value, 0);
+        }
+    };
+    
+    var $th = $("thead th", this.tableEl);
+    
+    var columns = [];
+    var barColumns = [];
+    $th.each(function (i, v) {
+        $v = $(v);
+        var col = {};
+        col.field = $v.getData("field");
+        col.format = $v.getData("format");
+        if ($v.getData("bar_column")) {
+            barColumns.push({
+                valueColumn: i+1,
+                barColor: '#26a2ce',
+                className: 'bar',
+                width: $v.getData("bar_width")
+            });
+        }
+        columns.push(col);
+    })
+    this.columns = columns;
+    
+    this.report = AMO.getReportName();
+    this.page_size = 14;
+    
    //Set up paginator
    
    this.paginator.ol.append(this.paginator.prev_li);
@ -56,17 +73,18 @@ function PageTable(_cfg) {
    
    //Set up a BarTable if needed
    
-    if (_cfg.barColumns) {
+    dbg(barColumns);
+    
+    if (barColumns.length) {
        this.barTable = new BarTable({
            el: this.tableEl,
-            columns: _cfg.barColumns
+            columns: barColumns
        })
    }
 }
 PageTable.prototype.gotoPage = function(num) {
    this.tableEl.parent().addClass("loading");
    if (this.pages[num]) {
-        dbg(num);
        if (num > 0) {
            $("tbody.selected", this.tableEl).removeClass("selected");
            $("li.selected", this.paginator.ol).removeClass("selected");
@ -112,9 +130,9 @@ PageTable.prototype.addPage = function (data) {
            for (var c=0; c<this.columns.length; c++) {
                col = this.columns[c];
                val = AMO.StatsManager.getField(row, col.field);
-                attr = " value='" + val + "'";
+                attr = " data-value='" + val + "'";
                if (col.format) {
-                    val = col.format(val);
+                    val = this.format[col.format](val);
                }
                page.push('<td', attr, '>', val, '</td>');
            }
@ -131,6 +149,8 @@ PageTable.prototype.addPage = function (data) {
    
    t.lap('done page');
    
+    console.log(page.html());
+    
    this.pages[data.page] = page;
    this.tableEl.append(page);
    if (this.barTable) {
@ -204,8 +224,8 @@ BarTable.prototype.render = function(tbody) {
        for (var j=0; j<tds.length; j++) {
            if ($.inArray(j,ignore) < 0) {
                var td = $(tds[j]);
-                if (td.attr('value')) {
-                    var val = parseFloat(td.attr('value'));
+                if (td.getData('value')) {
+                    var val = parseFloat(td.getData('value'));
                } else {
                    var val = parseFloat(td.text());
                }