Add a filler SVG to make things line up.

diff --git a/ultimate.css b/ultimate.css
index 40f5d0f4d26d69ef3520a1462f85dc1165f5e15b..65ce16375d9a57cc8751a70fc21404e61307422c 100644 (file)
--- 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 7c265c258ae6b7b406328c934cbc24bb43508e30..ff979ff1a38f3444a309d241ae425f3c3741de10 100644 (file)
--- 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);