[PATCH 1/5] ui-diff: use SVG for diffstat graphs

[Chris Mayo]

Only absolute positioning in SVG so draw a bar in removed colour of
length representing all the changes and then draw additions on top.

Signed-off-by: Chris Mayo <aklhfex at gmail.com>
---
 cgit.css  | 16 +++++-----------
 ui-diff.c | 16 ++++++++--------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/cgit.css b/cgit.css
index d4aadbf..2321333 100644
--- a/cgit.css
+++ b/cgit.css
@@ -511,22 +511,16 @@ div#cgit table.diffstat td.graph {
 	vertical-align: middle;
 }
 
-div#cgit table.diffstat td.graph table {
-	border: none;
-}
-
-div#cgit table.diffstat td.graph td {
-	padding: 0px;
-	border: 0px;
+div#cgit table.diffstat td.graph svg {
 	height: 7pt;
 }
 
-div#cgit table.diffstat td.graph td.add {
-	background-color: #5c5;
+div#cgit table.diffstat td.graph rect.add {
+	fill: #5c5;
 }
 
-div#cgit table.diffstat td.graph td.rem {
-	background-color: #c55;
+div#cgit table.diffstat td.graph rect.rem {
+	fill: #c55;
 }
 
 div#cgit div.diffstat-summary {
diff --git a/ui-diff.c b/ui-diff.c
index 70dcc91..001d77e 100644
--- a/ui-diff.c
+++ b/ui-diff.c
@@ -51,6 +51,7 @@ struct diff_filespec *cgit_get_current_new_file(void)
 static void print_fileinfo(struct fileinfo *info)
 {
 	char *class;
+	int total_changes;
 
 	switch (info->status) {
 	case DIFF_STATUS_ADDED:
@@ -111,16 +112,15 @@ static void print_fileinfo(struct fileinfo *info)
 		      info->old_size, info->new_size);
 		return;
 	}
-	htmlf("%d", info->added + info->removed);
+	total_changes = info->added + info->removed;
+	htmlf("%d", total_changes);
 	html("</td><td class='graph'>");
-	htmlf("<table summary='file diffstat' width='%d%%'><tr>", (max_changes > 100 ? 100 : max_changes));
-	htmlf("<td class='add' style='width: %.1f%%;'/>",
+	htmlf("<svg aria-label='file diffstat' width='%d%%'>", (max_changes > 100 ? 100 : max_changes));
+	htmlf("<rect class='rem' width='%.1f%%' height='100%%'/>",
+	      total_changes * 100.0 / max_changes);
+	htmlf("<rect class='add' width='%.1f%%' height='100%%'/>",
 	      info->added * 100.0 / max_changes);
-	htmlf("<td class='rem' style='width: %.1f%%;'/>",
-	      info->removed * 100.0 / max_changes);
-	htmlf("<td class='none' style='width: %.1f%%;'/>",
-	      (max_changes - info->removed - info->added) * 100.0 / max_changes);
-	html("</tr></table></td></tr>\n");
+	html("</svg></td></tr>\n");
 }
 
 static void count_diff_lines(char *line, int len)
-- 
2.20.1