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<h3> 83 <?= I18N::translate('Create your own chart') ?> 84</h3> 85 86<form id="own-stats-form" action="index.php" onsubmit="return loadCustomChart();" class="wt-page-options wt-page-options-statistics"> 87 <input type="hidden" name="route" value="module"> 88 <input type="hidden" name="module" value="<?= e($module->name()) ?>"> 89 <input type="hidden" name="action" value="CustomChart"> 90 <input type="hidden" name="ged" value="<?= e($tree->name()) ?>"> 91 <div class="form-group row"> 92 <div class="col-sm-2 wt-page-options-label"> 93 <?= I18N::translate('Chart type') ?> 94 </div> 95 96 <div class="col-sm-4 wt-page-options-value"> 97 <fieldset> 98 <legend><?= I18N::translate('Individual') ?></legend> 99 100 <?= 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");']) ?> 101 <?= 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");']) ?> 102 <?= 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");']) ?> 103 <?= 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");']) ?> 104 <?= 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");']) ?> 105 <?= 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");']) ?> 106 </fieldset> 107 108 <fieldset> 109 <legend><?= I18N::translate('Family') ?></legend> 110 111 <?= Bootstrap4::radioButtons('x-as', [ 112 $module::X_AXIS_MARRIAGE_MONTH => I18N::translate('Month of marriage'), 113 $module::X_AXIS_FIRST_MARRIAGE_MONTH => I18N::translate('Month of first marriage'), 114 ], '', false, ['onchange' => 'statusChecked("z_none"); statusDisable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?> 115 <?= 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");']) ?> 116 </fieldset> 117 118 <fieldset> 119 <legend><?= I18N::translate('Map') ?></legend> 120 121 <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_INDIVIDUAL_MAP => I18N::translate('Individuals')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusShow("chart_type");']) ?> 122 <?= 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");']) ?> 123 <?= 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");']) ?> 124 <?= 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");']) ?> 125 </fieldset> 126 </div> 127 128 <div class="col-sm-2 wt-page-options-label"> 129 <?= I18N::translate('Details') ?> 130 </div> 131 132 <div class="col-sm-4 wt-page-options-value"> 133 <fieldset id="axes"> 134 <legend><?= I18N::translate('Categories') ?></legend> 135 136 <label> 137 <input type="radio" id="z_none" name="z-as" value="<?= $module::Z_AXIS_ALL ?>" onclick="statusDisable('z-axis-boundaries-periods');"> 138 <?= I18N::translate('none') ?> 139 </label> 140 <br> 141 <label> 142 <input type="radio" id="z_sex" name="z-as" value="<?= $module::Z_AXIS_SEX ?>" onclick="statusDisable('z-axis-boundaries-periods');"> 143 <?= I18N::translate('gender') ?> 144 </label> 145 <br> 146 <label> 147 <input type="radio" id="z_time" name="z-as" value="<?= $module::Z_AXIS_TIME ?>" checked onclick="statusEnable('z-axis-boundaries-periods');"> 148 <?= I18N::translate('date periods') ?> 149 </label> 150 <label for="z-axis-boundaries-periods" class="sr-only"> 151 <?= I18N::translate('Date range') ?> 152 </label> 153 <select id="z-axis-boundaries-periods" class="form-control" name="z-axis-boundaries-periods"> 154 <option value="1700,1750,1800,1850,1900,1950,2000" selected> 155 <?= /* I18N: from 1700 interval 50 years */ 156 I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 50, I18N::digits(1700), I18N::number(50)) ?> 157 </option> 158 <option value="1800,1840,1880,1920,1950,1970,2000"> 159 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 40, I18N::digits(1800), I18N::number(40)) ?> 160 </option> 161 <option value="1800,1850,1900,1950,2000"> 162 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 50, I18N::digits(1800), I18N::number(50)) ?> 163 </option> 164 <option value="1900,1920,1940,1960,1980,1990,2000"> 165 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 20, I18N::digits(1900), I18N::number(20)) ?> 166 </option> 167 <option value="1900,1925,1950,1975,2000"> 168 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 25, I18N::digits(1900), I18N::number(25)) ?> 169 </option> 170 <option value="1940,1950,1960,1970,1980,1990,2000"> 171 <?= I18N::plural('from %1$s interval %2$s year', 'from %1$s interval %2$s years', 10, I18N::digits(1940), I18N::number(10)) ?> 172 </option> 173 </select> 174 </fieldset> 175 176 <fieldset id="zyaxes"> 177 <legend><?= I18N::translate('Results') ?></legend> 178 179 <label> 180 <input type="radio" name="y-as" value="<?= $module::Y_AXIS_NUMBERS ?>" checked> 181 <?= I18N::translate('numbers') ?> 182 </label> 183 <br> 184 <label> 185 <input type="radio" name="y-as" value="<?= $module::Y_AXIS_PERCENT ?>"> 186 <?= I18N::translate('percentage') ?> 187 </label> 188 </fieldset> 189 190 <fieldset id="x_years" style="display:none;"> 191 <legend><?= I18N::translate('Age interval') ?></legend> 192 193 <label for="x-axis-boundaries-ages" class="sr-only"> 194 <?= I18N::translate('Age interval') ?> 195 </label> 196 <?= Bootstrap4::select([ 197 '1,5,10,20,30,40,50,60,70,80,90,100' => I18N::plural('%s year', '%s years', 10, I18N::number(10)), 198 '5,20,40,60,75,80,85,90' => I18N::plural('%s year', '%s years', 20, I18N::number(20)), 199 '10,25,50,75,100' => I18N::plural('%s year', '%s years', 25, I18N::number(25)), 200 ], '1,5,10,20,30,40,50,60,70,80,90,100', [ 201 'id' => 'x-axis-boundaries-ages', 202 'name' => 'x-axis-boundaries-ages', 203 ]) ?> 204 </fieldset> 205 206 <fieldset id="x_years_m" style="display:none;"> 207 <legend><?= I18N::translate('Age interval') ?></legend> 208 209 <label for="x-axis-boundaries-ages_m" class="sr-only"> 210 <?= I18N::translate('Select the desired age interval') ?> 211 </label> 212 <?= Bootstrap4::select([ 213 '16,18,20,22,24,26,28,30,32,35,40,50' => I18N::plural('%s year', '%s years', 2, I18N::number(2)), 214 '20,25,30,35,40,45,50' => I18N::plural('%s year', '%s years', 5, I18N::number(5)), 215 ], '16,18,20,22,24,26,28,30,32,35,40,50', [ 216 'id' => 'x-axis-boundaries-ages_m', 217 'name' => 'x-axis-boundaries-ages_m', 218 ]) ?> 219 </fieldset> 220 221 <div id="map_opt" style="display:none;"> 222 <fieldset id="chart_type"> 223 <legend><?= I18N::translate('Chart type') ?></legend> 224 225 <label for="chart_type" class="sr-only"><?= I18N::translate('Chart type') ?></label> 226 <select name="chart_type" class="form-control" onchange="statusShowSurname(this);"> 227 <option value="indi_distribution_chart" selected> 228 <?= I18N::translate('Individuals') ?> 229 </option> 230 <option value="surname_distribution_chart"> 231 <?= I18N::translate('Surnames') ?> 232 </option> 233 </select> 234 235 <div id="surname_opt" class="form-group" style="display:none;"> 236 <label for="SURN"><?= I18N::translate('Surname') ?></label> 237 <input data-autocomplete-type="SURN" class="form-control" type="text" id="SURN" name="SURN"> 238 </div> 239 </fieldset> 240 241 <fieldset> 242 <legend id="label-area"><?= I18N::translate('Geographic area') ?></legend> 243 244 <label for="chart_shows" class="sr-only"><?= I18N::translate('Geographic area') ?></label> 245 <select id="chart_shows" class="form-control" name="chart_shows"> 246 <option value="world" selected> 247 <?= I18N::translate('World') ?> 248 </option> 249 <option value="europe"> 250 <?= I18N::translate('Europe') ?> 251 </option> 252 <option value="usa"> 253 <?= I18N::translate('United States') ?> 254 </option> 255 <option value="south_america"> 256 <?= I18N::translate('South America') ?> 257 </option> 258 <option value="asia"> 259 <?= I18N::translate('Asia') ?> 260 </option> 261 <option value="middle_east"> 262 <?= I18N::translate('Middle East') ?> 263 </option> 264 <option value="africa"> 265 <?= I18N::translate('Africa') ?> 266 </option> 267 </select> 268 </fieldset> 269 </div> 270 </div> 271 </div> 272 273 <p class="center"> 274 <button type="submit" class="btn btn-primary"> 275 <?= view('icons/save') ?> 276 <?= I18N::translate('show the chart') ?> 277 </button> 278 </p> 279</form> 280 281<div id="custom-chart" class="wt-ajax-load"> 282 <!-- Not initially empty, to disable spinner --> 283</div> 284