xref: /webtrees/resources/views/modules/statistics-chart/custom.phtml (revision da58fa21ddd29f92b1fde63c8ee425cf3d7f4eee) 
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