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