1<?php use Fisharebest\Webtrees\Bootstrap4; ?> 2<?php use Fisharebest\Webtrees\I18N; ?> 3 4<script> 5 function statusDisable(sel) { 6 var cbox = document.getElementById(sel); 7 cbox.checked = false; 8 cbox.disabled = true; 9 } 10 11 function statusEnable(sel) { 12 var cbox = document.getElementById(sel); 13 cbox.disabled = false; 14 } 15 16 function statusHide(sel) { 17 var box = document.getElementById(sel); 18 box.style.display = "none"; 19 var box_m = document.getElementById(sel + "_m"); 20 if (box_m) { 21 box_m.style.display = "none"; 22 } 23 if (sel === "map_opt") { 24 var box_axes = document.getElementById("axes"); 25 if (box_axes) { 26 box_axes.style.display = ""; 27 } 28 var box_zyaxes = document.getElementById("zyaxes"); 29 if (box_zyaxes) { 30 box_zyaxes.style.display = ""; 31 } 32 } 33 } 34 35 function statusShow(sel) { 36 var box = document.getElementById(sel); 37 box.style.display = ""; 38 var box_m = document.getElementById(sel + "_m"); 39 if (box_m) { 40 box_m.style.display = "none"; 41 } 42 if (sel === "map_opt") { 43 var box_axes = document.getElementById("axes"); 44 if (box_axes) { 45 box_axes.style.display = "none"; 46 } 47 var box_zyaxes = document.getElementById("zyaxes"); 48 if (box_zyaxes) { 49 box_zyaxes.style.display = "none"; 50 } 51 } 52 } 53 54 function statusChecked(sel) { 55 var cbox = document.getElementById(sel); 56 cbox.checked = true; 57 } 58 59 function statusShowSurname(x) { 60 if (x.value === "surname_distribution_chart") { 61 document.getElementById("surname_opt").style.display = ""; 62 } else if (x.value !== "surname_distribution_chart") { 63 document.getElementById("surname_opt").style.display = "none"; 64 } 65 } 66 67 function loadCustomChart() { 68 $("#custom-chart").html(""); 69 var form = $("#own-stats-form"); 70 jQuery.get(form.attr("action"), form.serialize()) 71 .done(function (data) { 72 $("#custom-chart").html(data); 73 }) 74 .fail(function (jqXHR, textStatus) { 75 // Server error? Show something to get rid of the spinner. 76 $("#custom-chart").html(textStatus); 77 }); 78 return false; 79 } 80</script> 81 82<div class="container pt-3"> 83 <h4 class="border-bottom p-2 mb-4"> 84 <?= I18N::translate('Create your own chart') ?> 85 </h4> 86 87 <form id="own-stats-form" action="index.php" onsubmit="return loadCustomChart();" class="wt-page-options wt-page-options-statistics"> 88 <input type="hidden" name="route" value="module"> 89 <input type="hidden" name="module" value="<?= e($module->name()) ?>"> 90 <input type="hidden" name="action" value="CustomChart"> 91 <input type="hidden" name="ged" value="<?= e($tree->name()) ?>"> 92 <div class="form-group row"> 93 <div class="col-sm-2 wt-page-options-label"> 94 <?= I18N::translate('Chart type') ?> 95 </div> 96 97 <div class="col-sm-4 wt-page-options-value"> 98 <fieldset> 99 <legend><?= I18N::translate('Individual') ?></legend> 100 101 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_BIRTH_MONTH => I18N::translate('Month of birth')], $module::X_AXIS_BIRTH_MONTH, false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?> 102 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_DEATH_MONTH => I18N::translate('Month of death')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?> 103 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_FIRST_CHILD_MONTH => I18N::translate('Month of birth of first child in a relation')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?> 104 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_AGE_AT_DEATH => I18N::translate('Average age at death')], '', false, ['onchange' => 'statusEnable("z_sex"); statusShow("x_years");; statusHide("map_opt");']) ?> 105 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_AGE_AT_MARRIAGE => I18N::translate('Age in year of marriage')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years"); statusShow("x_years_m");; statusHide("map_opt");']) ?> 106 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_AGE_AT_FIRST_MARRIAGE => I18N::translate('Age in year of first marriage')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years"); statusShow("x_years_m");; statusHide("map_opt");']) ?> 107 </fieldset> 108 109 <fieldset> 110 <legend><?= I18N::translate('Family') ?></legend> 111 112 <?= Bootstrap4::radioButtons('x-as', [ 113 $module::X_AXIS_MARRIAGE_MONTH => I18N::translate('Month of marriage'), 114 $module::X_AXIS_FIRST_MARRIAGE_MONTH => I18N::translate('Month of first marriage'), 115 ], '', false, ['onchange' => 'statusChecked("z_none"); statusDisable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?> 116 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_NUMBER_OF_CHILDREN => I18N::translate('Number of children')], '', false, ['onchange' => 'statusChecked("z_none"); statusDisable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?> 117 </fieldset> 118 119 <fieldset> 120 <legend><?= I18N::translate('Map') ?></legend> 121 122 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_INDIVIDUAL_MAP => I18N::translate('Individuals')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusShow("chart_type");']) ?> 123 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_BIRTH_MAP => I18N::translate('Births')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusHide("chart_type"); statusHide("surname_opt");']) ?> 124 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_MARRIAGE_MAP => I18N::translate('Marriages')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusHide("chart_type"); statusHide("surname_opt");']) ?> 125 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_DEATH_MAP => I18N::translate('Deaths')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusHide("chart_type"); statusHide("surname_opt");']) ?> 126 </fieldset> 127 </div> 128 129 <div class="col-sm-2 wt-page-options-label"> 130 <?= I18N::translate('Details') ?> 131 </div> 132 133 <div class="col-sm-4 wt-page-options-value"> 134 <fieldset id="axes"> 135 <legend><?= I18N::translate('Categories') ?></legend> 136 137 <label> 138 <input type="radio" id="z_none" name="z-as" value="<?= $module::Z_AXIS_ALL ?>" onclick="statusDisable('z-axis-boundaries-periods');"> 139 <?= I18N::translate('none') ?> 140 </label> 141 <br> 142 <label> 143 <input type="radio" id="z_sex" name="z-as" value="<?= $module::Z_AXIS_SEX ?>" onclick="statusDisable('z-axis-boundaries-periods');"> 144 <?= I18N::translate('gender') ?> 145 </label> 146 <br> 147 <label> 148 <input type="radio" id="z_time" name="z-as" value="<?= $module::Z_AXIS_TIME ?>" checked onclick="statusEnable('z-axis-boundaries-periods');"> 149 <?= I18N::translate('date periods') ?> 150 </label> 151 <label for="z-axis-boundaries-periods" class="sr-only"> 152 <?= I18N::translate('Date range') ?> 153 </label> 154 <select id="z-axis-boundaries-periods" class="form-control" name="z-axis-boundaries-periods"> 155 <option value="1700,1750,1800,1850,1900,1950,2000" selected> 156 <?= /* I18N: from 1700 interval 50 years */ 157 I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 50, I18N::digits(1700), I18N::number(50)) ?> 158 </option> 159 <option value="1800,1840,1880,1920,1950,1970,2000"> 160 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 40, I18N::digits(1800), I18N::number(40)) ?> 161 </option> 162 <option value="1800,1850,1900,1950,2000"> 163 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 50, I18N::digits(1800), I18N::number(50)) ?> 164 </option> 165 <option value="1900,1920,1940,1960,1980,1990,2000"> 166 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 20, I18N::digits(1900), I18N::number(20)) ?> 167 </option> 168 <option value="1900,1925,1950,1975,2000"> 169 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 25, I18N::digits(1900), I18N::number(25)) ?> 170 </option> 171 <option value="1940,1950,1960,1970,1980,1990,2000"> 172 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 10, I18N::digits(1940), I18N::number(10)) ?> 173 </option> 174 </select> 175 </fieldset> 176 177 <fieldset id="zyaxes"> 178 <legend><?= I18N::translate('Results') ?></legend> 179 180 <label> 181 <input type="radio" name="y-as" value="<?= $module::Y_AXIS_NUMBERS ?>" checked> 182 <?= I18N::translate('numbers') ?> 183 </label> 184 <br> 185 <label> 186 <input type="radio" name="y-as" value="<?= $module::Y_AXIS_PERCENT ?>"> 187 <?= I18N::translate('percentage') ?> 188 </label> 189 </fieldset> 190 191 <fieldset id="x_years" style="display:none;"> 192 <legend><?= I18N::translate('Age interval') ?></legend> 193 194 <label for="x-axis-boundaries-ages" class="sr-only"> 195 <?= I18N::translate('Age interval') ?> 196 </label> 197 <?= Bootstrap4::select([ 198 '1,5,10,20,30,40,50,60,70,80,90,100' => I18N::plural('%s year', '%s years', 10, I18N::number(10)), 199 '5,20,40,60,75,80,85,90' => I18N::plural('%s year', '%s years', 20, I18N::number(20)), 200 '10,25,50,75,100' => I18N::plural('%s year', '%s years', 25, I18N::number(25)), 201 ], '1,5,10,20,30,40,50,60,70,80,90,100', [ 202 'id' => 'x-axis-boundaries-ages', 203 'name' => 'x-axis-boundaries-ages', 204 ]) ?> 205 </fieldset> 206 207 <fieldset id="x_years_m" style="display:none;"> 208 <legend><?= I18N::translate('Age interval') ?></legend> 209 210 <label for="x-axis-boundaries-ages_m" class="sr-only"> 211 <?= I18N::translate('Select the desired age interval') ?> 212 </label> 213 <?= Bootstrap4::select([ 214 '16,18,20,22,24,26,28,30,32,35,40,50' => I18N::plural('%s year', '%s years', 2, I18N::number(2)), 215 '20,25,30,35,40,45,50' => I18N::plural('%s year', '%s years', 5, I18N::number(5)), 216 ], '16,18,20,22,24,26,28,30,32,35,40,50', [ 217 'id' => 'x-axis-boundaries-ages_m', 218 'name' => 'x-axis-boundaries-ages_m', 219 ]) ?> 220 </fieldset> 221 222 <div id="map_opt" style="display:none;"> 223 <fieldset id="chart_type"> 224 <legend><?= I18N::translate('Chart type') ?></legend> 225 226 <label for="chart_type" class="sr-only"><?= I18N::translate('Chart type') ?></label> 227 <select name="chart_type" class="form-control" onchange="statusShowSurname(this);"> 228 <option value="indi_distribution_chart" selected> 229 <?= I18N::translate('Individuals') ?> 230 </option> 231 <option value="surname_distribution_chart"> 232 <?= I18N::translate('Surnames') ?> 233 </option> 234 </select> 235 236 <div id="surname_opt" class="form-group" style="display:none;"> 237 <label for="SURN"><?= I18N::translate('Surname') ?></label> 238 <input data-autocomplete-type="SURN" class="form-control" type="text" id="SURN" name="SURN"> 239 </div> 240 </fieldset> 241 242 <fieldset> 243 <legend id="label-area"><?= I18N::translate('Geographic area') ?></legend> 244 245 <label for="chart_shows" class="sr-only"><?= I18N::translate('Geographic area') ?></label> 246 <select id="chart_shows" class="form-control" name="chart_shows"> 247 <option value="world" selected> 248 <?= I18N::translate('World') ?> 249 </option> 250 <option value="150"> 251 <?= I18N::translate('Europe') ?> 252 </option> 253 <option value="021"> 254 <?= I18N::translate('Northern America') ?> 255 </option> 256 <option value="005"> 257 <?= I18N::translate('South America') ?> 258 </option> 259 <option value="142"> 260 <?= I18N::translate('Asia') ?> 261 </option> 262 <option value="145"> 263 <?= I18N::translate('Middle East') ?> 264 </option> 265 <option value="002"> 266 <?= I18N::translate('Africa') ?> 267 </option> 268 </select> 269 </fieldset> 270 </div> 271 </div> 272 </div> 273 274 <p> 275 <button type="submit" class="btn btn-primary"> 276 <?= view('icons/save') ?> 277 <?= I18N::translate('show the chart') ?> 278 </button> 279 </p> 280 </form> 281 282 <div id="custom-chart" class="wt-ajax-load"> 283 <!-- Not initially empty, to disable spinner --> 284 </div> 285</div> 286