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