Update google charts

12 files changed, 262 insertions, 47 deletions

diff --git a/resources/views/modules/statistics-chart/custom.phtml b/resources/views/modules/statistics-chart/custom.phtml
index 7fb3fe9369..df8bc61762 100644
--- a/resources/views/modules/statistics-chart/custom.phtml
+++ b/resources/views/modules/statistics-chart/custom.phtml
@@ -246,22 +246,22 @@
                         <option value="world" selected>
                             <?= I18N::translate('World') ?>
                         </option>
-                        <option value="europe">
+                        <option value="150">
                             <?= I18N::translate('Europe') ?>
                         </option>
-                        <option value="usa">
-                            <?= I18N::translate('United States') ?>
+                        <option value="021">
+                            <?= I18N::translate('Northern America') ?>
                         </option>
-                        <option value="south_america">
+                        <option value="005">
                             <?= I18N::translate('South America') ?>
                         </option>
-                        <option value="asia">
+                        <option value="142">
                             <?= I18N::translate('Asia') ?>
                         </option>
-                        <option value="middle_east">
+                        <option value="145">
                             <?= I18N::translate('Middle East') ?>
                         </option>
-                        <option value="africa">
+                        <option value="002">
                             <?= I18N::translate('Africa') ?>
                         </option>
                     </select>
diff --git a/resources/views/modules/statistics-chart/individuals.phtml b/resources/views/modules/statistics-chart/individuals.phtml
index 71b550881c..0585809dfb 100644
--- a/resources/views/modules/statistics-chart/individuals.phtml
+++ b/resources/views/modules/statistics-chart/individuals.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\I18N; ?>
-
 <?php
 /** @var \Fisharebest\Webtrees\Statistics $stats */
 ?>
diff --git a/resources/views/modules/statistics-chart/other.phtml b/resources/views/modules/statistics-chart/other.phtml
index d20f54ed63..c681580a1b 100644
--- a/resources/views/modules/statistics-chart/other.phtml
+++ b/resources/views/modules/statistics-chart/other.phtml
@@ -1,4 +1,6 @@
 <?php
+declare(strict_types=1);
+
 /** @var \Fisharebest\Webtrees\Statistics $stats */
 ?>
 
diff --git a/resources/views/modules/statistics-chart/page.phtml b/resources/views/modules/statistics-chart/page.phtml
index 7f8775b966..b27d3f31bb 100644
--- a/resources/views/modules/statistics-chart/page.phtml
+++ b/resources/views/modules/statistics-chart/page.phtml
@@ -1,4 +1,10 @@
-<?php use Fisharebest\Webtrees\View; ?>
+<?php
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\View;
+?>
+
+<?= view('statistics/other/chart-setup') ?>
 
 <h2 class="wt-page-title">
     <?= $title ?>
@@ -33,7 +39,7 @@
 
   // If the URL contains a fragment, then activate the corresponding tab.
   // Use a prefix on the fragment, to prevent scrolling to the element.
-  var target = document.location.hash.replace("tab-", "");
+  var target = window.location.hash.replace("tab-", "");
   var tab    = $("#statistics-tabs .nav-link[href='" + target + "']");
   // If not, then activate the first tab.
   if (tab.length === 0) {
@@ -43,7 +49,7 @@
 
   // If the user selects a tab, update the URL to reflect this
   $('#statistics-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-      document.location.hash = "tab-" + e.target.href.substring(e.target.href.indexOf('#') + 1);
+    window.location.hash = "tab-" + e.target.href.substring(e.target.href.indexOf('#') + 1);
   });
 </script>
 <?php View::endpush() ?>
diff --git a/resources/views/statistics/families/total-records.phtml b/resources/views/statistics/families/total-records.phtml
index 522d6ae88f..69d23009d7 100644
--- a/resources/views/statistics/families/total-records.phtml
+++ b/resources/views/statistics/families/total-records.phtml
@@ -26,7 +26,7 @@ use Fisharebest\Webtrees\I18N;
 
                 <div class="mb-3 col-12">
                     <div class="card m-0">
-                        <h5 class="card-header border-bottom-0">
+                        <h5 class="card-header">
                             <?= I18N::translate('Marriages by century') ?>
                         </h5>
                         <div class="card-body">
@@ -39,7 +39,7 @@ use Fisharebest\Webtrees\I18N;
             <div class="card-deck">
                 <div class="mb-3 col-lg-12 col-md-6">
                     <div class="card m-0">
-                        <h5 class="card-header border-bottom-0">
+                        <h5 class="card-header">
                             <?= I18N::translate('Earliest marriage') ?>
                         </h5>
                         <div class="card-body">
@@ -50,7 +50,7 @@ use Fisharebest\Webtrees\I18N;
 
                 <div class="mb-3 col-lg-12 col-md-6">
                     <div class="card m-0">
-                        <h5 class="card-header border-bottom-0">
+                        <h5 class="card-header">
                             <?= I18N::translate('Latest marriage') ?>
                         </h5>
                         <div class="card-body">
diff --git a/resources/views/statistics/other/chart-distribution.phtml b/resources/views/statistics/other/chart-distribution.phtml
deleted file mode 100644
index fe75a0e30f..0000000000
--- a/resources/views/statistics/other/chart-distribution.phtml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-declare(strict_types=1);
-
-use Fisharebest\Webtrees\I18N;
-?>
-
-<h4 class="border-bottom p-2 mb-4">
-    <?= $chart_title ?>
-</h4>
-
-<div class="mb-3">
-    <div class="card-deck">
-        <div class="col-12 mb-3">
-            <div class="card m-0">
-                <div class="card-body">
-                    <div id="google_charts" class="text-center">
-                        <img src="<?= $chart_url ?>" alt="<?= $chart_title ?>" title="<?= $chart_title ?>" class="gchart" />
-                        <br>
-                        <table class="center">
-                            <tr>
-                                <td bgcolor="#<?= $chart_color2 ?>" width="12"></td><td><?= I18N::translate('Highest population') ?></td>
-                                <td bgcolor="#<?= $chart_color3 ?>" width="12"></td><td><?= I18N::translate('Lowest population') ?></td>
-                                <td bgcolor="#<?= $chart_color1 ?>" width="12"></td><td><?= I18N::translate('Nobody at all') ?></td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/resources/views/statistics/other/chart-google.phtml b/resources/views/statistics/other/chart-google.phtml
deleted file mode 100644
index 5172f56d28..0000000000
--- a/resources/views/statistics/other/chart-google.phtml
+++ /dev/null
@@ -1 +0,0 @@
-<img src="<?= $chart_url ?>" width="<?= $sizes[0] ?>"  height="<?= $sizes[1] ?>" alt="<?= $chart_title ?>" title="<?= $chart_title ?>" />
diff --git a/resources/views/statistics/other/chart-setup.phtml b/resources/views/statistics/other/chart-setup.phtml
new file mode 100644
index 0000000000..694fc2da9e
--- /dev/null
+++ b/resources/views/statistics/other/chart-setup.phtml
@@ -0,0 +1,26 @@
+<?php
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\View;
+?>
+
+<?php View::push('javascript') ?>
+<script src="https://www.gstatic.com/charts/loader.js"></script>
+<script>
+
+google.charts.load(
+    'current',
+    {
+        'packages': [
+            'corechart',
+            'geochart',
+            'bar'
+        ],
+        // Note: you will need to get a mapsApiKey for your project.
+        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
+        'mapsApiKey': ''
+    }
+);
+
+</script>
+<?php View::endpush() ?>
diff --git a/resources/views/statistics/other/charts/column.phtml b/resources/views/statistics/other/charts/column.phtml
new file mode 100644
index 0000000000..b0ffd0d454
--- /dev/null
+++ b/resources/views/statistics/other/charts/column.phtml
@@ -0,0 +1,52 @@
+<?php
+declare(strict_types=1);
+
+$id = 'google-chart-' . bin2hex(random_bytes(8));
+?>
+
+<?= view('statistics/other/chart-setup') ?>
+
+<div id="<?= $id ?>" title="<?= $chart_title ?>"></div>
+
+<script>
+
+var callbackColumnChart = function () {
+    var options = {
+        title: '<?= $chart_title ?? '' ?>',
+        subtitle: '<?= $chart_sub_title ?? '' ?>',
+        vAxis: {
+            title: '<?= $vAxis_title ?? '' ?>'
+        },
+        hAxis: {
+            title: '<?= $hAxis_title ?? '' ?>'
+        },
+        colors: <?= json_encode($colors) ?>
+    };
+
+    google.charts.setOnLoadCallback(function () {
+        drawColumnChart(
+            '<?= $id ?>',
+            <?= json_encode($data) ?>,
+            options
+        );
+    });
+
+    $(window).resize(function () {
+        drawColumnChart(
+            '<?= $id ?>',
+            <?= json_encode($data) ?>,
+            options
+        );
+    });
+};
+
+if (
+    document.readyState === "complete" ||
+    (document.readyState !== "loading" && !document.documentElement.doScroll)
+) {
+    callbackColumnChart();
+} else {
+    document.addEventListener("DOMContentLoaded", callbackColumnChart);
+}
+
+</script>
diff --git a/resources/views/statistics/other/charts/combo.phtml b/resources/views/statistics/other/charts/combo.phtml
new file mode 100644
index 0000000000..dc0e8cbab2
--- /dev/null
+++ b/resources/views/statistics/other/charts/combo.phtml
@@ -0,0 +1,52 @@
+<?php
+declare(strict_types=1);
+
+$id = 'google-chart-' . bin2hex(random_bytes(8));
+?>
+
+<?= view('statistics/other/chart-setup') ?>
+
+<div id="<?= $id ?>" title="<?= $chart_title ?>"></div>
+
+<script>
+
+var callbackComboChart = function () {
+    var options = {
+        title: '<?= $chart_title ?? '' ?>',
+        subtitle: '<?= $chart_sub_title ?? '' ?>',
+        vAxis: {
+            title: '<?= $vAxis_title ?? '' ?>'
+        },
+        hAxis: {
+            title: '<?= $hAxis_title ?? '' ?>'
+        },
+        colors: <?= json_encode($colors) ?>
+    };
+
+    google.charts.setOnLoadCallback(function () {
+        drawComboChart(
+            '<?= $id ?>',
+            <?= json_encode($data) ?>,
+            options
+        );
+    });
+
+    $(window).resize(function () {
+        drawComboChart(
+            '<?= $id ?>',
+            <?= json_encode($data) ?>,
+            options
+        );
+    });
+};
+
+if (
+    document.readyState === "complete" ||
+    (document.readyState !== "loading" && !document.documentElement.doScroll)
+) {
+    callbackComboChart();
+} else {
+    document.addEventListener("DOMContentLoaded", callbackComboChart);
+}
+
+</script>
diff --git a/resources/views/statistics/other/charts/geo.phtml b/resources/views/statistics/other/charts/geo.phtml
new file mode 100644
index 0000000000..c12a979f67
--- /dev/null
+++ b/resources/views/statistics/other/charts/geo.phtml
@@ -0,0 +1,67 @@
+<?php
+declare(strict_types=1);
+
+$id = 'google-chart-' . bin2hex(random_bytes(8));
+?>
+
+<?= view('statistics/other/chart-setup') ?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= $chart_title ?>
+</h4>
+
+<div class="mb-3">
+    <div class="card-deck">
+        <div class="col-12 mb-3">
+            <div class="card m-0">
+                <div class="card-body">
+                    <div id="google_charts" class="text-center">
+                        <div id="<?= $id ?>"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+
+var callbackGeoChart = function () {
+    google.charts.setOnLoadCallback(drawRegionsMap);
+
+    function drawRegionsMap () {
+        var data = google.visualization.arrayToDataTable(
+            <?= json_encode($data) ?>
+        );
+
+        var options = {
+            title: '<?= $chart_title ?>',
+            region: '<?= $region ?>',
+            height: '100%',
+            width: '100%',
+            colorAxis: {
+                colors: [
+                    '#<?= $chart_color3 ?>',
+                    '#<?= $chart_color2 ?>'
+                ]
+            }
+        };
+
+        var chart = new google.visualization.GeoChart(document.getElementById('<?= $id ?>'));
+
+        chart.draw(data, options);
+    }
+
+    $(window).resize(drawRegionsMap);
+};
+
+if (
+    document.readyState === "complete" ||
+    (document.readyState !== "loading" && !document.documentElement.doScroll)
+) {
+    callbackGeoChart();
+} else {
+    document.addEventListener("DOMContentLoaded", callbackGeoChart);
+}
+
+</script>
diff --git a/resources/views/statistics/other/charts/pie.phtml b/resources/views/statistics/other/charts/pie.phtml
new file mode 100644
index 0000000000..d463654899
--- /dev/null
+++ b/resources/views/statistics/other/charts/pie.phtml
@@ -0,0 +1,44 @@
+<?php
+declare(strict_types=1);
+
+$id = 'google-chart-' . bin2hex(random_bytes(8));
+?>
+
+<?= view('statistics/other/chart-setup') ?>
+
+<div id="<?= $id ?>"></div>
+
+<script>
+
+var callbackPieChart = function () {
+    google.charts.setOnLoadCallback(function () {
+        drawPieChart(
+            '<?= $id ?>',
+            <?= json_encode($data) ?>,
+            <?= json_encode($colors) ?>,
+            '<?= $title ?>',
+            '<?= $labeledValueText ?? 'value' ?>'
+        );
+    });
+
+    $(window).resize(function () {
+        drawPieChart(
+            '<?= $id ?>',
+            <?= json_encode($data) ?>,
+            <?= json_encode($colors) ?>,
+            '<?= $title ?>',
+            '<?= $labeledValueText ?? 'value' ?>'
+        );
+    });
+};
+
+if (
+    document.readyState === "complete" ||
+    (document.readyState !== "loading" && !document.documentElement.doScroll)
+) {
+    callbackPieChart();
+} else {
+    document.addEventListener("DOMContentLoaded", callbackPieChart);
+}
+
+</script>