| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2009 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * Factory function to create a View for "fragmentation". | |
| 7 * | |
| 8 * This display of the data shows tree closure/open events as red/green blocks. | |
| 9 */ | |
| 10 var CreateFragmentationView; | |
| 11 | |
| 12 // ----------------------------------------------------------------------------- | |
| 13 // Private implementation | |
| 14 // ----------------------------------------------------------------------------- | |
| 15 | |
| 16 (function() { | |
| 17 | |
| 18 CreateFragmentationView = function(timeRange, entries) { | |
| 19 return new FragmentationView(timeRange, entries); | |
| 20 } | |
| 21 | |
| 22 function FragmentationView(timeRange, entries) { | |
| 23 Draw(entries, timeRange); | |
| 24 } | |
| 25 | |
| 26 FragmentationView.prototype.Show = function(visible) { | |
| 27 gViewerApp.ShowViewContentAndTabArea('fragmentation', visible); | |
| 28 } | |
| 29 | |
| 30 /** | |
| 31 * Draws the fragmentation chart for all days in |timeRange|. | |
| 32 * @param {array<Entry>} entries | |
| 33 * @param {TimeRange} timeRange | |
| 34 */ | |
| 35 function Draw(entries, timeRange) { | |
| 36 // Figure out what days we touch. | |
| 37 var days = DateUtil.GetLocalDaysInRange(timeRange); | |
| 38 | |
| 39 var tbody = document.getElementById("tbody"); | |
| 40 // Clear anything already present in the output table. | |
| 41 tbody.innerHTML = ""; | |
| 42 | |
| 43 // Draw the rows for each day worth of data. | |
| 44 for (var i = 0; i < days.length; ++i) { | |
| 45 var day = days[i]; | |
| 46 DrawDay(tbody, entries, day); | |
| 47 } | |
| 48 } | |
| 49 | |
| 50 /** | |
| 51 * Draws a specific day's row in the fragmentation chart. | |
| 52 * @param {DOMNode} tbody | |
| 53 * @param {array<Entry>} entries | |
| 54 * @param {TimeRange} day | |
| 55 */ | |
| 56 function DrawDay(tbody, entries, day) { | |
| 57 var tr = DomUtil.AddNode(tbody, "tr"); | |
| 58 | |
| 59 var tdForDayName = DomUtil.AddNode(tr, "td"); | |
| 60 DrawDayNameColumn(day, tdForDayName); | |
| 61 | |
| 62 var tableTd = DomUtil.AddNode(tr, "td"); | |
| 63 | |
| 64 tableTd.width = "100%"; | |
| 65 | |
| 66 // Extract the data from |entries| that apply to |day|, and break it | |
| 67 // into (start,duration) runs. | |
| 68 var runs = MakeRuns(entries, day); | |
| 69 | |
| 70 DrawRunsTable(tableTd, runs); | |
| 71 } | |
| 72 | |
| 73 /** | |
| 74 * Draws a specific day's name column in the fragmentation chart. | |
| 75 * @param {TimeRange} day | |
| 76 * @param {DOMNode} td The column to print name into. | |
| 77 */ | |
| 78 function DrawDayNameColumn(day, td) { | |
| 79 var d = new Date(); | |
| 80 d.setTime(day.endTime); | |
| 81 | |
| 82 // Display the day as for example "2009/8/38". | |
| 83 var dateText = | |
| 84 d.getFullYear() + "/" + | |
| 85 PadWithZero(d.getMonth() + 1, 2) + "/" + | |
| 86 PadWithZero(d.getDate(), 2); | |
| 87 | |
| 88 // Color saturday and sunday differently. | |
| 89 if (d.getDay() == 0) { | |
| 90 td.className = "sundayName"; | |
| 91 } else if (d.getDay() == 6) { | |
| 92 td.className = "saturdayName"; | |
| 93 } | |
| 94 | |
| 95 td.innerHTML = dateText; | |
| 96 } | |
| 97 | |
| 98 /** | |
| 99 * Draws a fragmentation table for |runs|. | |
| 100 * | |
| 101 * @param {DOMNode} parent Container to put table into. | |
| 102 * @param {array<Run>} runs | |
| 103 */ | |
| 104 function DrawRunsTable(parent, runs) { | |
| 105 var table = DomUtil.AddNode(parent, "table"); | |
| 106 table.cellSpacing = 0; | |
| 107 table.cellPadding = 0; | |
| 108 table.width = "100%"; | |
| 109 | |
| 110 var tr = DomUtil.AddNode(table, "tr"); | |
| 111 | |
| 112 // If we have any entires that lasted less than 1 minute, pretend like | |
| 113 // they were a minute in length (otherwise they will be too tiny to click on. | |
| 114 var MIN_DURATION = 60000; | |
| 115 | |
| 116 // Sum up how much total time the runs span. | |
| 117 var totalDuration = 0; | |
| 118 for (var i = 0; i < runs.length; ++i) { | |
| 119 totalDuration += Math.max(MIN_DURATION, runs[i].duration); | |
| 120 } | |
| 121 | |
| 122 for (var i = 0; i < runs.length; ++i) { | |
| 123 var run = runs[i]; | |
| 124 var duration = Math.max(MIN_DURATION, run.duration); | |
| 125 var width = duration / totalDuration; | |
| 126 AddRunColumn(tr, run, width); | |
| 127 } | |
| 128 } | |
| 129 | |
| 130 /** | |
| 131 * Inserts a column into |tr| for |run|, which occupies |widthFraction| | |
| 132 * percentage of space in the row. | |
| 133 * | |
| 134 * @param {DOMNode} tr | |
| 135 * @param {Run} run | |
| 136 * @param {number} widthFraction | |
| 137 */ | |
| 138 function AddRunColumn(tr, run, widthFraction) { | |
| 139 var td = DomUtil.AddNode(tr, "td"); | |
| 140 td.className = run.entry.GetTreeState(); | |
| 141 | |
| 142 td.width = (100 * widthFraction).toFixed(4) + "%"; | |
| 143 td.innerHTML = " "; | |
| 144 | |
| 145 // When users click on the column, display details on the entry. | |
| 146 td.onclick = function() { | |
| 147 var msg = "[duration = " + (run.duration / (60 * 1000)).toFixed(0) + | |
| 148 " minutes]\n\n" + | |
| 149 DateUtil.FormatAsLocalDate(run.entry.timestamp) + "\n\n" + | |
| 150 run.entry.author + ":\n\n" + | |
| 151 run.entry.message; | |
| 152 alert(msg); | |
| 153 }; | |
| 154 } | |
| 155 | |
| 156 })(); // Private implementation. | |
| OLD | NEW |