From 0b78525eddf6e445bd1383c55e8a77f157c952c9 Mon Sep 17 00:00:00 2001 From: "Steinar H. Gunderson" Date: Sun, 21 May 2023 10:18:27 +0200 Subject: [PATCH] Add a filler SVG to make things line up. --- ultimate.css | 2 +- ultimate.js | 65 +++++++++++++++++++++++++++++++--------------------- 2 files changed, 40 insertions(+), 27 deletions(-) diff --git a/ultimate.css b/ultimate.css index 40f5d0f..65ce163 100644 --- a/ultimate.css +++ b/ultimate.css @@ -61,7 +61,7 @@ td.name { padding-right: 20px; } -.ci, .invertedci { +.ci, .invertedci, .fillerci { vertical-align: middle; margin-left: 8px; } diff --git a/ultimate.js b/ultimate.js index 7c265c2..ff979ff 100644 --- a/ultimate.js +++ b/ultimate.js @@ -55,10 +55,22 @@ function add_3cell(tr, text, cls) { return element; } +function add_3cell_with_filler_ci(tr, text, cls) { + let element = add_3cell(tr, text, cls); + + let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.classList.add('fillerci'); + svg.setAttribute('width', ci_width); + svg.setAttribute('height', ci_height); + element.appendChild(svg); + + return element; +} + function add_3cell_ci(tr, ci) { if (isNaN(ci.val)) { - add_3cell(tr, 'N/A'); - return; // FIXME: some SVG padding needed + add_3cell_with_filler_ci(tr, 'N/A'); + return; } let text; @@ -68,50 +80,48 @@ function add_3cell_ci(tr, ci) { text = ci.val.toFixed(2); } let element = add_3cell(tr, text); - let to_x = (val) => { return width * (val - ci.min) / (ci.max - ci.min); }; + let to_x = (val) => { return ci_width * (val - ci.min) / (ci.max - ci.min); }; // Container. - const width = 100; - const height = 20; let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); if (ci.inverted === true) { svg.classList.add('invertedci'); } else { svg.classList.add('ci'); } - svg.setAttribute('width', width); - svg.setAttribute('height', height); + svg.setAttribute('width', ci_width); + svg.setAttribute('height', ci_height); // The good (green) and red (bad) ranges. let s0 = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); s0.classList.add('range'); s0.classList.add('s0'); s0.setAttribute('width', to_x(ci.desired)); - s0.setAttribute('height', height); + s0.setAttribute('height', ci_height); s0.setAttribute('x', '0'); let s1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); s1.classList.add('range'); s1.classList.add('s1'); - s1.setAttribute('width', width - to_x(ci.desired)); - s1.setAttribute('height', height); + s1.setAttribute('width', ci_width - to_x(ci.desired)); + s1.setAttribute('height', ci_height); s1.setAttribute('x', to_x(ci.desired)); // Confidence bar. let bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); bar.classList.add('bar'); bar.setAttribute('width', to_x(ci.upper_ci) - to_x(ci.lower_ci)); - bar.setAttribute('height', height / 3); + bar.setAttribute('height', ci_height / 3); bar.setAttribute('x', to_x(ci.lower_ci)); - bar.setAttribute('y', height / 3); + bar.setAttribute('y', ci_height / 3); // Marker line for average. let marker = document.createElementNS('http://www.w3.org/2000/svg', 'line'); marker.classList.add('marker'); marker.setAttribute('x1', to_x(ci.val)); marker.setAttribute('x2', to_x(ci.val)); - marker.setAttribute('y1', height / 6); - marker.setAttribute('y2', height * 5 / 6); + marker.setAttribute('y1', ci_height / 6); + marker.setAttribute('y2', ci_height * 5 / 6); svg.appendChild(s0); svg.appendChild(s1); @@ -484,6 +494,9 @@ function write_main_menu(chosen_category) { // https://en.wikipedia.org/wiki/1.96#History const z = 1.959964; +const ci_width = 100; +const ci_height = 20; + function make_binomial_ci(val, num, z) { let avg = val / num; @@ -813,20 +826,20 @@ function make_table_per_point(players) { let row = document.createElement('tr'); add_3cell(row, ''); if (globals.points_played > 0) { - add_3cell(row, goals == 0 ? 0 : (goals / globals.points_played).toFixed(2)); - add_3cell(row, assists == 0 ? 0 : (assists / globals.points_played).toFixed(2)); - add_3cell(row, hockey_assists == 0 ? 0 : (hockey_assists / globals.points_played).toFixed(2)); - add_3cell(row, defenses == 0 ? 0 : (defenses / globals.points_played).toFixed(2)); - add_3cell(row, throwaways == 0 ? 0 : (throwaways / globals.points_played).toFixed(2)); - add_3cell(row, drops == 0 ? 0 : (drops / globals.points_played).toFixed(2)); + add_3cell_with_filler_ci(row, goals == 0 ? 0 : (goals / globals.points_played).toFixed(2)); + add_3cell_with_filler_ci(row, assists == 0 ? 0 : (assists / globals.points_played).toFixed(2)); + add_3cell_with_filler_ci(row, hockey_assists == 0 ? 0 : (hockey_assists / globals.points_played).toFixed(2)); + add_3cell_with_filler_ci(row, defenses == 0 ? 0 : (defenses / globals.points_played).toFixed(2)); + add_3cell_with_filler_ci(row, throwaways == 0 ? 0 : (throwaways / globals.points_played).toFixed(2)); + add_3cell_with_filler_ci(row, drops == 0 ? 0 : (drops / globals.points_played).toFixed(2)); add_3cell(row, touches == 0 ? 0 : (touches / globals.points_played).toFixed(2)); } else { - add_3cell(row, 'N/A'); - add_3cell(row, 'N/A'); - add_3cell(row, 'N/A'); - add_3cell(row, 'N/A'); - add_3cell(row, 'N/A'); - add_3cell(row, 'N/A'); + add_3cell_with_filler_ci(row, 'N/A'); + add_3cell_with_filler_ci(row, 'N/A'); + add_3cell_with_filler_ci(row, 'N/A'); + add_3cell_with_filler_ci(row, 'N/A'); + add_3cell_with_filler_ci(row, 'N/A'); + add_3cell_with_filler_ci(row, 'N/A'); add_3cell(row, 'N/A'); } rows.push(row); -- 2.39.2