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