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