Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Refactor some rickshaw code to be reusable.

  • Loading branch information...
commit 1baf7ae3d2a80474f70a2b0baf9140aafa49552b 1 parent d5a166c
Mike Cooper authored
4 apps/questions/templates/questions/stats.html
@@ -2,8 +2,8 @@
2 2 {% set title = _('Question Metrics') %}
3 3 {% set crumbs = [(url('questions.questions'), _('Forum')),
4 4 (None, _('Metrics'))] %}
5   -{% set scripts = ('questions.stats', ) %}
6   -{% set styles = ('questions.stats', ) %}
  5 +{% set scripts = ('rickshaw', 'questions.stats') %}
  6 +{% set styles = ('rickshaw', ) %}
7 7
8 8 {% block content %}
9 9 <h1>{{ _('Question Statistics') }}</h1>
4 apps/questions/views.py
@@ -1235,6 +1235,10 @@ def stats_topic_data(bucket_days, start, end):
1235 1235 timestamp += bucket
1236 1236
1237 1237 # Convert it into a format Rickshaw will be happy with.
  1238 + # [
  1239 + # {'name': 'series1', 'data': [{'x': 1362774285, 'y': 100}, ...]},
  1240 + # ...
  1241 + # ]
1238 1242 histograms = [
1239 1243 {
1240 1244 'name': name,
16 bundles.py
@@ -31,10 +31,10 @@
31 31 'mobile/aaq': (
32 32 'less/mobile/aaq.less',
33 33 ),
34   - 'questions.stats': (
  34 + 'rickshaw': (
35 35 'css/jqueryui/jqueryui-rickshaw.css',
36 36 'css/rickshaw.min.css',
37   - 'less/questions.stats.less',
  37 + 'less/rickshaw.sumo.less',
38 38 ),
39 39 'search': (
40 40 'less/search.less',
@@ -169,11 +169,6 @@
169 169 'js/questions.metrics.js',
170 170 ),
171 171 'questions.stats': (
172   - 'js/libs/jqueryui.rickshaw.js',
173   - 'js/libs/d3.v3.min.js',
174   - 'js/libs/d3.layout.min.js',
175   - 'js/libs/rickshaw.min.js',
176   - 'js/Rickshaw.Graph.BarHoverDetail.js',
177 172 'js/questions.stats.js',
178 173 ),
179 174 'mobile/questions': (
@@ -213,6 +208,13 @@
213 208 'js/editable.js',
214 209 'js/wiki.metrics.js',
215 210 ),
  211 + 'rickshaw': (
  212 + 'js/libs/jqueryui.rickshaw.js',
  213 + 'js/libs/d3.v3.min.js',
  214 + 'js/libs/d3.layout.min.js',
  215 + 'js/libs/rickshaw.min.js',
  216 + 'js/rickshaw_utils.js',
  217 + ),
216 218 'mobile/wiki': (
217 219 'js/libs/underscore.js',
218 220 'js/libs/jquery.cookie.js',
63 media/js/main.js
@@ -123,7 +123,6 @@ k = {};
123 123
124 124 initAutoSubmitSelects();
125 125 disableFormsOnSubmit();
126   - lazyLoadScripts();
127 126 });
128 127
129 128 /*
@@ -170,39 +169,6 @@ k = {};
170 169 }
171 170
172 171 /*
173   - * This lazy loads our jQueryUI script.
174   - */
175   - function lazyLoadScripts() {
176   - var scripts = ['js/libs/jqueryui-min.js'],
177   - styles = [], // was: ['css/jqueryui/jqueryui-min.css']
178   - // turns out this messes with search
179   - i;
180   -
181   - // Don't lazy load scripts that have already been loaded
182   - $.each($('script'), function () {
183   - var this_src = $(this).attr('src');
184   - if (!this_src) return ;
185   - remove_item(scripts, this_src);
186   - });
187   -
188   - // Don't lazy load stylesheets that have already been loaded
189   - $.each($('link[rel="stylesheet"]'), function () {
190   - remove_item(styles, $(this).attr('href'));
191   - });
192   -
193   - setTimeout(function lazyLoad() {
194   - for (i in scripts) {
195   - $.get(k.MEDIA_URL + scripts[i]);
196   - }
197   - for (i in styles) {
198   - $('head').append(
199   - '<link rel="stylesheet" type="text/css" href="' +
200   - k.MEDIA_URL + styles[i] + '">');
201   - }
202   - }, k.LAZY_DELAY);
203   - }
204   -
205   - /*
206 172 * Remove an item from a list if it matches the substring match_against.
207 173 * Caution: modifies from_list.
208 174 * E.g. list = ['string'], remove_item(list, 'str') => list is [].
@@ -248,4 +214,33 @@ k = {};
248 214 $cards.height(max);
249 215 });
250 216 }
  217 +
  218 + function pad(str, length, padChar) {
  219 + str = '' + str;
  220 + while (str.length < length) {
  221 + str = padChar + str;
  222 + }
  223 + return str;
  224 + }
  225 +
  226 + k.dateFormat = function(format, d) {
  227 + var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
  228 + 'Friday', 'Saturday'];
  229 +
  230 + var month = pad(d.getMonth() + 1, 2, '0');
  231 + var date = pad(d.getDate(), 2, '0');
  232 + var hours = pad(d.getHours(), 2, '0');
  233 + var minutes = pad(d.getMinutes(), 2, '0');
  234 + var seconds = pad(d.getSeconds(), 2, '0');
  235 +
  236 + return interpolate(format, {
  237 + 'year': d.getFullYear(),
  238 + 'month': month,
  239 + 'date': date,
  240 + 'day': dayNames[d.getDay()],
  241 + 'hours': hours,
  242 + 'minutes': minutes,
  243 + 'seconds': seconds
  244 + }, true);
  245 + };
251 246 })();
47 media/js/questions.stats.js
... ... @@ -1,57 +1,12 @@
1 1 (function() {
2 2
3   -function prepareData(data) {
4   - var palette = new Rickshaw.Color.Palette();
5   - return new Rickshaw.Series(data, palette);
6   -}
7   -
8   -function makeGraph($elem, data) {
9   - $elem.find('.graph, .legend, .y-axis').empty();
10   - var graph = new Rickshaw.Graph({element: $elem.find('.graph')[0], series: prepareData(data),
11   - renderer: 'bar'
12   - });
13   -
14   - var hoverDetail = new Rickshaw.Graph.BarHoverDetail( {
15   - graph: graph
16   - });
17   -
18   - var legend = new Rickshaw.Graph.Legend( {
19   - graph: graph,
20   - element: $elem.find('.legend')[0]
21   - });
22   -
23   - new Rickshaw.Graph.Behavior.Series.Toggle({
24   - graph: graph,
25   - legend: legend
26   - });
27   -
28   - new Rickshaw.Graph.Behavior.Series.Order({
29   - graph: graph,
30   - legend: legend
31   - });
32   -
33   - var xaxis = new Rickshaw.Graph.Axis.Time( {
34   - graph: graph
35   - });
36   -
37   - var yaxis = new Rickshaw.Graph.Axis.Y({
38   - graph: graph,
39   - orientation: 'left',
40   - element: $elem.find('.y-axis')[0]
41   - });
42   -
43   - graph.render();
44   - xaxis.render();
45   - yaxis.render();
46   -}
47   -
48 3 function init() {
49 4 $('input[type=date]').datepicker({
50 5 dateFormat: 'yy-mm-dd'
51 6 });
52 7
53 8 $topics = $('#topic-stats');
54   - makeGraph($topics, $topics.data('histogram'));
  9 + k.rickshaw.makeGraph($topics, $topics.data('histogram'));
55 10 }
56 11
57 12 $(document).ready(init);
101 media/js/Rickshaw.Graph.BarHoverDetail.js → media/js/rickshaw_utils.js
... ... @@ -1,3 +1,103 @@
  1 +(function($) {
  2 +
  3 +window.k = k || {};
  4 +window.k.rickshaw = {};
  5 +
  6 +k.rickshaw.prepareData = function(data) {
  7 + var palette = new Rickshaw.Color.Palette();
  8 + return new Rickshaw.Series(data, palette);
  9 +};
  10 +
  11 +k.rickshaw.makeGraph = function($elem, data, options) {
  12 + options = $.extend({
  13 + graph: {
  14 + renderer: 'bar'
  15 + },
  16 + annotations: false,
  17 + }, options);
  18 +
  19 + var i;
  20 + var render = [];
  21 + var graph;
  22 + var hoverClass, hoverDetail;
  23 + var $legend, legend;
  24 + var $yaxis, xaxis, yaxis;
  25 + var $slider, slider;
  26 +
  27 + render = [];
  28 +
  29 + $elem.find('.graph, .legend, .y-axis').empty();
  30 + graph = new Rickshaw.Graph({
  31 + element: $elem.find('.graph')[0],
  32 + series: k.rickshaw.prepareData(data),
  33 + renderer: options.graph.renderer,
  34 + interpolation: 'linear'
  35 + });
  36 + render.push(graph);
  37 +
  38 + if (options.graph.renderer === 'bar') {
  39 + hoverClass = Rickshaw.Graph.BarHoverDetail;
  40 + } else {
  41 + hoverClass = Rickshaw.Graph.HoverDetail;
  42 + }
  43 + hoverDetail = new hoverClass({
  44 + graph: graph
  45 + });
  46 +
  47 + $legend = $elem.find('.legend');
  48 + if ($legend.length) {
  49 + legend = new Rickshaw.Graph.Legend( {
  50 + graph: graph,
  51 + element: $legend[0]
  52 + });
  53 +
  54 + new Rickshaw.Graph.Behavior.Series.Toggle({
  55 + graph: graph,
  56 + legend: legend
  57 + });
  58 +
  59 + new Rickshaw.Graph.Behavior.Series.Order({
  60 + graph: graph,
  61 + legend: legend
  62 + });
  63 + render.push(legend);
  64 + }
  65 +
  66 + $yaxis = $elem.find('.y-axis');
  67 + if ($yaxis.length) {
  68 + xaxis = new Rickshaw.Graph.Axis.Time({
  69 + graph: graph
  70 + });
  71 +
  72 + yaxis = new Rickshaw.Graph.Axis.Y({
  73 + graph: graph,
  74 + orientation: 'left',
  75 + element: $elem.find('.y-axis')[0]
  76 + });
  77 + render.push(yaxis);
  78 + }
  79 +
  80 + $slider = $elem.find('.slider');
  81 + if ($slider.length) {
  82 + slider = new Rickshaw.Graph.RangeSlider({
  83 + graph: graph,
  84 + element: $slider
  85 + });
  86 + }
  87 +
  88 + for (i=0; i<render.length; i++) {
  89 + render[i].render();
  90 + }
  91 +
  92 + $yaxis.css({'top': $elem.find('.graph').position().top});
  93 +
  94 + return {
  95 + 'graph': graph,
  96 + 'slider': slider.element
  97 + };
  98 +};
  99 +
  100 +
1 101 Rickshaw.namespace('Rickshaw.Graph.BarHoverDetail');
2 102
3 103 /* This is a mostly intact version of Rickshaw.Graph.HoverDetail that
@@ -151,3 +251,4 @@ Rickshaw.Graph.BarHoverDetail = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail
151 251 }
152 252 });
153 253
  254 +})(jQuery);
24 media/less/questions.stats.less → media/less/rickshaw.sumo.less
@@ -18,8 +18,15 @@
18 18 }
19 19 }
20 20
21   -.controls {
  21 +.timeline {
  22 + margin: 10px 0;
  23 +}
22 24
  25 +.slider {
  26 + margin: 10px 0;
  27 +}
  28 +
  29 +.controls {
23 30 > div {
24 31 .border-radius(2px);
25 32 background: #444;
@@ -81,3 +88,18 @@
81 88 }
82 89 }
83 90 }
  91 +
  92 +.inline-controls {
  93 + margin-left: 40px;
  94 +
  95 + div {
  96 + display: inline-block;
  97 + margin-right: 10px;
  98 + background: rgba(0, 0, 0, 0.05);
  99 + padding: 4px;
  100 +
  101 + input, label {
  102 + margin-right: 5px;
  103 + }
  104 + }
  105 +}
1  settings.py
@@ -505,7 +505,6 @@ def JINJA_CONFIG():
505 505
506 506 # Jingo-Minify should not use the STATIC_ROOT
507 507 JINGO_MINIFY_USE_STATIC = False
508   -
509 508 JAVA_BIN = '/usr/bin/java'
510 509
511 510 LESS_BIN = 'lessc'

0 comments on commit 1baf7ae

Please sign in to comment.
Something went wrong with that request. Please try again.