Timeline width in SQL panel properly scaled.

Author: Tomasz Buchert

debug_toolbar/panels/sql.py

@@ -183,8 +183,10 @@ def content(self):
                 query['rgb_color'] = self._databases[alias]['rgb_color']
                 try:
                     query['width_ratio'] = (query['duration'] / self._sql_time) * 100
+                    query['width_ratio_relative'] =  100.0 * query['width_ratio'] / (100.0 - width_ratio_tally)
                 except ZeroDivisionError:
                     query['width_ratio'] = 0
+                    query['width_ratio_relative'] = 0
                 query['start_offset'] = width_ratio_tally
                 query['end_offset'] = query['width_ratio'] + query['start_offset']
                 width_ratio_tally += query['width_ratio']

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -35,7 +35,7 @@
 						</div>
 					</td>
 					<td class="timeline">
-						<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" style="left:{{ query.start_offset|dotted_number }}%;"><strong style="width:{{ query.width_ratio|dotted_number }}%;">{{ query.width_ratio }}%</strong></div></div>
+						<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" style="left:{{ query.start_offset|dotted_number }}%;"><strong style="width:{{ query.width_ratio_relative|dotted_number }}%;">{{ query.width_ratio }}%</strong></div></div>
 					</td>
 					<td class="time">
 						{{ query.duration|floatformat:"2" }}