chg: [element:bar] better support of passed options

templates/element/charts/bar.php

@@ -46,7 +46,7 @@ if (!empty($series)) {
             series: <?= json_encode($chartSeries) ?>,
             tooltip: {
                 x: {
-                    show: false
+                    // show: false
                 },
                 y: {
                     title: {
@@ -58,7 +58,7 @@ if (!empty($series)) {
                 theme: 'dark'
             },
         }
-        const chartOptions = Object.assign({}, defaultOptions, passedOptions)
+        const chartOptions = mergeDeep({}, defaultOptions, passedOptions)
         new ApexCharts(document.querySelector('#<?= $chartId ?>'), chartOptions).render();
     })
 </script>

webroot/js/utils.js

@@ -151,4 +151,41 @@ function arrayEqual(array1, array2) {
     const array2Sorted = array2.slice().sort();
     return array1.length === array2.length && array1.slice().sort().every((value, index) => value === array2Sorted[index])
 
-}
+}
+
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ * source: https://stackoverflow.com/a/34749873
+ */
+function mergeDeep(target, ...sources) {
+    if (!sources.length) return target;
+    const source = sources.shift();
+
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key]) Object.assign(target, {
+                    [key]: {}
+                });
+                mergeDeep(target[key], source[key]);
+            } else {
+                Object.assign(target, {
+                    [key]: source[key]
+                });
+            }
+        }
+    }
+
+    return mergeDeep(target, ...sources);
+}