← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/nvd3/src/models/lineWithLegend.js

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/nvd3/src/models/lineWithLegend.js
1
 
 
2
 
nv.models.lineWithLegend = function() {
3
 
  var margin = {top: 30, right: 20, bottom: 50, left: 60},
4
 
      getWidth = function() { return 960 },
5
 
      getHeight = function() { return 500 },
6
 
      dotRadius = function() { return 2.5 },
7
 
      color = d3.scale.category10().range(),
8
 
      dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
9
 
 
10
 
  var x = d3.scale.linear(),
11
 
      y = d3.scale.linear(),
12
 
      getX = function(d) { return d.x },
13
 
      getY = function(d) { return d.y },
14
 
      xAxis = nv.models.xaxis().scale(x),
15
 
      yAxis = nv.models.yaxis().scale(y),
16
 
      legend = nv.models.legend().height(30),
17
 
      lines = nv.models.line();
18
 
 
19
 
 
20
 
  function chart(selection) {
21
 
    selection.each(function(data) {
22
 
      var width = getWidth(),
23
 
          height = getHeight(),
24
 
          availableWidth = width - margin.left - margin.right,
25
 
          availableHeight = height - margin.top - margin.bottom;
26
 
 
27
 
      var series = data.filter(function(d) { return !d.disabled })
28
 
            .map(function(d) { return d.values });
29
 
 
30
 
      x   .domain(d3.extent(d3.merge(series), getX ))
31
 
          .range([0, availableWidth]);
32
 
 
33
 
      y   .domain(d3.extent(d3.merge(series), getY ))
34
 
          .range([availableHeight, 0]);
35
 
 
36
 
      lines
37
 
        .width(availableWidth)
38
 
        .height(availableHeight)
39
 
        .color(data.map(function(d,i) {
40
 
          return d.color || color[i % 10];
41
 
        }).filter(function(d,i) { return !data[i].disabled }))
42
 
 
43
 
 
44
 
      var wrap = d3.select(this).selectAll('g.wrap').data([data]);
45
 
      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3lineWithLegend').append('g');
46
 
 
47
 
      gEnter.append('g').attr('class', 'x axis');
48
 
      gEnter.append('g').attr('class', 'y axis');
49
 
      gEnter.append('g').attr('class', 'linesWrap');
50
 
      gEnter.append('g').attr('class', 'legendWrap');
51
 
 
52
 
 
53
 
      legend.dispatch.on('legendClick', function(d,i) { 
54
 
        d.disabled = !d.disabled;
55
 
 
56
 
        if (!data.filter(function(d) { return !d.disabled }).length) {
57
 
          data.map(function(d) {
58
 
            d.disabled = false;
59
 
            wrap.selectAll('.series').classed('disabled', false);
60
 
            return d;
61
 
          });
62
 
        }
63
 
 
64
 
        selection.transition().call(chart);
65
 
      });
66
 
 
67
 
/*
68
 
      //
69
 
      legend.dispatch.on('legendMouseover', function(d, i) {
70
 
        d.hover = true;
71
 
        selection.transition().call(chart)
72
 
      });
73
 
 
74
 
      legend.dispatch.on('legendMouseout', function(d, i) {
75
 
        d.hover = false;
76
 
        selection.transition().call(chart)
77
 
      });
78
 
*/
79
 
 
80
 
      lines.dispatch.on('pointMouseover.tooltip', function(e) {
81
 
        dispatch.tooltipShow({
82
 
          point: e.point,
83
 
          series: e.series,
84
 
          pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
85
 
          seriesIndex: e.seriesIndex,
86
 
          pointIndex: e.pointIndex
87
 
        });
88
 
      });
89
 
 
90
 
      lines.dispatch.on('pointMouseout.tooltip', function(e) {
91
 
        dispatch.tooltipHide(e);
92
 
      });
93
 
 
94
 
 
95
 
      //TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
96
 
      margin.top = legend.height();
97
 
 
98
 
      var g = wrap.select('g')
99
 
          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
100
 
 
101
 
 
102
 
      legend.width(width/2 - margin.right);
103
 
 
104
 
      g.select('.legendWrap')
105
 
          .datum(data)
106
 
          .attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
107
 
          .call(legend);
108
 
 
109
 
 
110
 
      var linesWrap = g.select('.linesWrap')
111
 
          .datum(data.filter(function(d) { return !d.disabled }))
112
 
 
113
 
 
114
 
      d3.transition(linesWrap).call(lines);
115
 
 
116
 
      var timeSeries = (data.length > 0 && data[0].values.length > 0 &&
117
 
                        data[0].values[0].x instanceof Date);
118
 
      if (timeSeries) {
119
 
          xAxis
120
 
            .domain(x.domain())
121
 
            .range(x.range())
122
 
            .scale(d3.time.scale())
123
 
            .ticks(d3.time.days, 0)
124
 
            .tickSize(-availableHeight, 0);
125
 
      } else {
126
 
          xAxis
127
 
            .domain(x.domain())
128
 
            .range(x.range())
129
 
            .ticks( width / 100 )
130
 
            .tickSize(-availableHeight, 0);
131
 
      }
132
 
 
133
 
      g.select('.x.axis')
134
 
          .attr('transform', 'translate(0,' + y.range()[0] + ')');
135
 
      d3.transition(g.select('.x.axis'))
136
 
          .call(xAxis);
137
 
 
138
 
      yAxis
139
 
        .domain(y.domain())
140
 
        .range(y.range())
141
 
        .ticks( height / 36 )
142
 
        .tickSize(-availableWidth, 0);
143
 
 
144
 
      d3.transition(g.select('.y.axis'))
145
 
          .call(yAxis);
146
 
 
147
 
    });
148
 
 
149
 
    return chart;
150
 
  }
151
 
 
152
 
  chart.dispatch = dispatch;
153
 
  chart.legend = legend;
154
 
  chart.xAxis = xAxis;
155
 
  chart.yAxis = yAxis;
156
 
 
157
 
  chart.x = function(_) {
158
 
    if (!arguments.length) return getX;
159
 
    getX = _;
160
 
    lines.x(_);
161
 
    return chart;
162
 
  };
163
 
 
164
 
  chart.y = function(_) {
165
 
    if (!arguments.length) return getY;
166
 
    getY = _;
167
 
    lines.y(_);
168
 
    return chart;
169
 
  };
170
 
 
171
 
  chart.margin = function(_) {
172
 
    if (!arguments.length) return margin;
173
 
    margin = _;
174
 
    return chart;
175
 
  };
176
 
 
177
 
  chart.width = function(_) {
178
 
    if (!arguments.length) return getWidth;
179
 
    getWidth = d3.functor(_);
180
 
    return chart;
181
 
  };
182
 
 
183
 
  chart.height = function(_) {
184
 
    if (!arguments.length) return getHeight;
185
 
    getHeight = d3.functor(_);
186
 
    return chart;
187
 
  };
188
 
 
189
 
  chart.dotRadius = function(_) {
190
 
    if (!arguments.length) return dotRadius;
191
 
    dotRadius = d3.functor(_);
192
 
    lines.dotRadius = _;
193
 
    return chart;
194
 
  };
195
 
 
196
 
 
197
 
  return chart;
198
 
}