From 93dbaffc61054858eeeefbdb857fa3cd4b08f32f Mon Sep 17 00:00:00 2001
From: asantibanez <santibanez.andres@gmail.com>
Date: Wed, 1 Feb 2023 18:28:06 -0500
Subject: [PATCH] Added custom configs to Column Chart

---
 resources/js/columnChart.js |  4 +++-
 resources/js/helpers.js     | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/helpers.js

diff --git a/resources/js/columnChart.js b/resources/js/columnChart.js
index b009a99..bf71d78 100644
--- a/resources/js/columnChart.js
+++ b/resources/js/columnChart.js
@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const columnChart = () => {
     return {
@@ -23,6 +24,7 @@ const columnChart = () => {
             const grid = component.get('columnChartModel.grid');
             const columnWidth = component.get('columnChartModel.columnWidth');
             const horizontal = component.get('columnChartModel.horizontal');
+            const jsonConfig = component.get('columnChartModel.jsonConfig');
 
             const data = component.get('columnChartModel.data');
             const series = [{
@@ -107,7 +109,7 @@ const columnChart = () => {
                 options['colors'] = colors
             }
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }
diff --git a/resources/js/helpers.js b/resources/js/helpers.js
new file mode 100644
index 0000000..d0ffd66
--- /dev/null
+++ b/resources/js/helpers.js
@@ -0,0 +1,27 @@
+import deepmerge from 'deepmerge'
+
+export const addPathToObjectWithValue = (obj, path, value) => {
+    const pList = path.split('.');
+    const key = pList.pop();
+    const pointer = pList.reduce((accumulator, currentValue) => {
+        if (accumulator[currentValue] === undefined) accumulator[currentValue] = {};
+        return accumulator[currentValue];
+    }, obj);
+    pointer[key] = value;
+    return obj;
+}
+
+export const mergedOptionsWithJsonConfig = (options, jsonConfig) => {
+    const customOptions = Object.keys(jsonConfig)
+        .reduce(function (obj, key) {
+            const value = jsonConfig[key]
+
+            if (typeof value === 'string' && value.includes('function')) {
+                return addPathToObjectWithValue(obj, key, eval('(' + value + ')'))
+            }
+
+            return addPathToObjectWithValue(obj, key, eval(value))
+        }, {})
+
+    return deepmerge(options, customOptions)
+}