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 |