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