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