| OLD | NEW |
| (Empty) | |
| 1 part of vmstats; |
| 2 |
| 3 class BarGraph { |
| 4 CanvasElement _canvas; |
| 5 GraphModel _model; |
| 6 List<Element> _elements; |
| 7 num scaleHeight = 0; |
| 8 |
| 9 final int SAMPLE_WIDTH = 5; |
| 10 final int LEFT_MARGIN = 50; |
| 11 final int RIGHT_MARGIN = 150; |
| 12 final int LEGEND_WIDTH = 130; |
| 13 final int LEGEND_Y = 20; |
| 14 final int INSIDE_MARGIN = 2; |
| 15 |
| 16 final int NUM_DIVIDERS = 5; |
| 17 final String FONT = "14px sans-serif"; |
| 18 |
| 19 BarGraph(CanvasElement canvas, List<Element> elements) { |
| 20 _canvas = canvas; |
| 21 _elements = elements; |
| 22 int maxElements = |
| 23 (_canvas.width - LEFT_MARGIN - RIGHT_MARGIN) ~/ SAMPLE_WIDTH; |
| 24 _model = new GraphModel(maxElements); |
| 25 _model.addListener(drawGraph, null); |
| 26 drawBarGraph(); |
| 27 } |
| 28 |
| 29 void addSample(List<int> segments) { |
| 30 if (segments.length != _elements.length) { |
| 31 throw new RuntimeError('invalid sample size for graph'); |
| 32 } |
| 33 _model.addSample(segments); |
| 34 } |
| 35 |
| 36 void drawBarGraph() { |
| 37 // Draw chart's outer box. |
| 38 var context = _canvas.context2d; |
| 39 context.beginPath(); |
| 40 context.strokeStyle = 'black'; |
| 41 // The '2's are the width of the line, even though 1 is specified. |
| 42 context.strokeRect( |
| 43 LEFT_MARGIN - 2, 1, _canvas.width - LEFT_MARGIN - RIGHT_MARGIN + 2, |
| 44 _canvas.height - 2, 1); |
| 45 |
| 46 // Draw legend. |
| 47 int x = _canvas.width - LEGEND_WIDTH; |
| 48 int y = LEGEND_Y; |
| 49 context.font = FONT; |
| 50 for (int i = 0; i < _elements.length; i++) { |
| 51 context.fillStyle = _elements[i].color; |
| 52 context.fillRect(x, y, 20, 20); |
| 53 context.fillStyle = 'black'; |
| 54 context.fillText(_elements[i]._name, x + 30, y + 15); |
| 55 y += 30; |
| 56 } |
| 57 } |
| 58 |
| 59 void drawGraph(var unused) { |
| 60 int graphHeight = _model.maxTotal; |
| 61 int width = _canvas.clientWidth; |
| 62 int height = _canvas.clientHeight; |
| 63 if (graphHeight >= scaleHeight) { |
| 64 // Make scale height a bit higher to allow for growth, and |
| 65 // round to nearest 100. |
| 66 scaleHeight = graphHeight * 1.2; |
| 67 scaleHeight = ((scaleHeight / 100).ceil() * 100).toInt(); |
| 68 } |
| 69 num scale = height / scaleHeight; |
| 70 drawValues(scaleHeight, scale); |
| 71 drawChart(scaleHeight, scale); |
| 72 } |
| 73 |
| 74 void drawChart(int maxHeight, num scale) { |
| 75 int dividerHeight = maxHeight ~/ NUM_DIVIDERS; |
| 76 var context = _canvas.context2d; |
| 77 context.beginPath(); |
| 78 int height = maxHeight; |
| 79 num scaledY = dividerHeight * scale; |
| 80 |
| 81 // Draw the vertical axis values and lines. |
| 82 for (int i = 1; i < NUM_DIVIDERS; i++) { |
| 83 height -= (dividerHeight ~/100) * 100; |
| 84 context.font = FONT; |
| 85 context.fillStyle = 'black'; |
| 86 context.textAlign = 'right'; |
| 87 context.textBaseline = 'middle'; |
| 88 context.fillText(height.toString(), LEFT_MARGIN - 10, scaledY); |
| 89 context.moveTo(LEFT_MARGIN - 2, scaledY); |
| 90 context.strokeStyle = 'grey'; |
| 91 context.lineWidth = 0.5; |
| 92 context.lineTo(_canvas.width - RIGHT_MARGIN, scaledY); |
| 93 context.stroke(); |
| 94 scaledY += dividerHeight * scale; |
| 95 } |
| 96 } |
| 97 |
| 98 void drawValues(int maxHeight, num scale) { |
| 99 Iterator<Sample> iterator = _model.iterator; |
| 100 int x = LEFT_MARGIN + INSIDE_MARGIN; |
| 101 |
| 102 while (iterator.moveNext()) { |
| 103 Sample s = iterator.current; |
| 104 int y = INSIDE_MARGIN; |
| 105 if (s != null) { |
| 106 num blankHeight = scaleHeight - s.total; |
| 107 drawVerticalSegment(x, y, SAMPLE_WIDTH, blankHeight, 'white', scale); |
| 108 y += blankHeight; |
| 109 for (int i = s.length - 1; i >= 0; i--) { |
| 110 int h = s[i]; |
| 111 drawVerticalSegment(x, y, SAMPLE_WIDTH, h, _elements[i].color, scale); |
| 112 y += s[i]; |
| 113 } |
| 114 } else { |
| 115 drawVerticalSegment(x, INSIDE_MARGIN, SAMPLE_WIDTH, |
| 116 maxHeight, 'white', scale); |
| 117 } |
| 118 x += SAMPLE_WIDTH ; |
| 119 } |
| 120 } |
| 121 |
| 122 void drawVerticalSegment(int x, int y, int w, int h, String color, |
| 123 num scale) { |
| 124 var context = _canvas.context2d; |
| 125 y = (y * scale).floor(); |
| 126 h = (h * scale).ceil(); |
| 127 context.beginPath(); |
| 128 context.lineWidth = w; |
| 129 context.fillStyle = color; |
| 130 context.strokeStyle = color; |
| 131 if (x < INSIDE_MARGIN) { |
| 132 x = INSIDE_MARGIN; |
| 133 } |
| 134 if (y < INSIDE_MARGIN) { |
| 135 y = INSIDE_MARGIN; |
| 136 } |
| 137 int max = _canvas.width - INSIDE_MARGIN; |
| 138 if ((x + w) > max) { |
| 139 w = max - x; |
| 140 } |
| 141 max = _canvas.height - INSIDE_MARGIN; |
| 142 if ((y + h) > max) { |
| 143 h = max - y; |
| 144 } |
| 145 context.moveTo(x, y); |
| 146 context.lineTo(x, y + h); |
| 147 context.stroke(); |
| 148 } |
| 149 } |
| 150 |
| 151 class GraphModel extends ObservableModel { |
| 152 List<Sample> _samples = new List<Sample>(); |
| 153 int _maxSize; |
| 154 |
| 155 final int _MAX_LENGTH = 999999999; |
| 156 |
| 157 GraphModel(int maxSize) { |
| 158 _maxSize = maxSize; |
| 159 } |
| 160 |
| 161 void addSample(List<int> segments) { |
| 162 int len = _samples.length; |
| 163 if (_samples.length >= _maxSize) { |
| 164 _samples.remove(_samples.first); |
| 165 } |
| 166 _samples.add(new Sample(segments)); |
| 167 notifySuccess(); |
| 168 } |
| 169 |
| 170 int get maxSize => _maxSize; |
| 171 |
| 172 Iterator<Sample> get iterator => _samples.iterator; |
| 173 |
| 174 Sample operator[](int i) => _samples[i]; |
| 175 |
| 176 /** |
| 177 * Returns the minimum total from all the samples. |
| 178 */ |
| 179 int get minTotal { |
| 180 int min = _MAX_LENGTH; |
| 181 _samples.forEach((Sample s) => min = (s.total < min ? s.total : min)); |
| 182 return min; |
| 183 } |
| 184 |
| 185 /** |
| 186 * Returns the maximum total from all the samples. |
| 187 */ |
| 188 int get maxTotal { |
| 189 int max = 0; |
| 190 _samples.forEach((Sample s) => max = (s.total > max ? s.total : max)); |
| 191 return max; |
| 192 } |
| 193 } |
| 194 |
| 195 /** |
| 196 * An element is a data type that gets charted. Each element has a name for |
| 197 * the legend, and a color for the bar graph. The number of elements in a |
| 198 * graph should match the number of segments in each sample. |
| 199 */ |
| 200 class Element { |
| 201 String _name; |
| 202 String _color; // Any description the DOM will accept, like "red" or "#000". |
| 203 |
| 204 Element(String name, String color) { |
| 205 _name = name; |
| 206 _color = color; |
| 207 } |
| 208 |
| 209 String get name => _name; |
| 210 String get color => _color; |
| 211 } |
| 212 |
| 213 /** |
| 214 * A sample is a list of segment lengths. |
| 215 */ |
| 216 class Sample { |
| 217 List<int> _segments; |
| 218 |
| 219 Sample(List<int> segments) { |
| 220 _segments = segments; |
| 221 } |
| 222 |
| 223 int get length => _segments.length; |
| 224 int operator[](int i) => _segments[i]; |
| 225 |
| 226 Iterator<int> get iterator => _segments.iterator; |
| 227 |
| 228 int get total { |
| 229 return _segments.reduce(0, (int prev, int element) => prev + element); |
| 230 } |
| 231 } |
| OLD | NEW |