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