feat: added theme setting options - dark mode, pallates

public/app.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
- * ApexCharts v3.22.2
- * (c) 2018-2020 Juned Chhipa
+ * ApexCharts v3.27.3
+ * (c) 2018-2021 Juned Chhipa
  * Released under the MIT License.
  */
 

resources/js/areaChart.js

@@ -83,6 +83,9 @@ const areaChart = () => {
                         bottom: 0,
                     }
                 },
+
+                theme: component.get('areaChartModel.theme') || {},
+
             };
 
             this.chart = new ApexCharts(this.$refs.container, options);

resources/js/columnChart.js

@@ -87,6 +87,9 @@ const columnChart = () => {
                 fill: {
                     opacity: component.get('columnChartModel.opacity') || 0.5
                 },
+
+                theme: component.get('columnChartModel.theme') || {},
+
             };
 
             const colors = component.get('columnChartModel.colors');

resources/js/lineChart.js

@@ -61,6 +61,8 @@ const lineChart = () => {
 
                 stroke: component.get('lineChartModel.stroke') || {},
 
+                theme: component.get('lineChartModel.theme') || {},
+
                 title: {
                     text: title,
                     align: 'center'

resources/js/multiColumnChart.js

@@ -88,6 +88,9 @@ const multiColumnChart = () => {
                 fill: {
                     opacity: component.get('columnChartModel.opacity'),
                 },
+
+                theme: component.get('columnChartModel.theme') || {},
+
             };
 
             const colors = component.get('columnChartModel.colors');

resources/js/multiLineChart.js

@@ -74,6 +74,8 @@ const multiLineChart = () => {
                 },
 
                 yaxis: component.get('lineChartModel.yAxis') || {},
+
+                theme: component.get('lineChartModel.theme') || {},
             };
 
             const colors = component.get('lineChartModel.colors');

resources/js/pieChart.js

@@ -72,6 +72,9 @@ const pieChart = () => {
                 ],
 
                 legend: component.get('pieChartModel.legend') || {},
+
+                theme: component.get('pieChartModel.theme') || {},
+
             };
 
             const colors = component.get('pieChartModel.colors');

src/Models/BaseChartModel.php

@@ -18,6 +18,7 @@ class BaseChartModel
     use HasSparkline;
     use HasGrid;
     use HasColors;
+    use HasTheme;
 
     public function __construct()
     {
@@ -30,6 +31,7 @@ class BaseChartModel
         $this->initSparkline();
         $this->initGrid();
         $this->initColors();
+        $this->initTheme();
     }
 
     public function reactiveKey()
@@ -48,7 +50,8 @@ class BaseChartModel
             $this->dataLabelsToArray(),
             $this->sparklineToArray(),
             $this->gridToArray(),
-            $this->colorsToArray()
+            $this->colorsToArray(),
+            $this->themeToArray()
         );
     }
 
@@ -63,5 +66,6 @@ class BaseChartModel
         $this->sparklineFromArray($array);
         $this->gridFromArray($array);
         $this->colorsFromArray($array);
+        $this->themeFromArray($array);
     }
 }

src/Models/HasTheme.php

@@ -0,0 +1,125 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasTheme
+{
+    private $theme;
+    private $mode;
+    private $pallete;
+
+    /**
+     * Initialize 
+     */
+    public function initTheme()
+    {
+        $this->theme = $this->defaultTheme();
+    }
+
+    /**
+     * set default theme
+     * 
+     * @return array $theme
+     */
+    private function defaultTheme()
+    {
+        return [
+            'mode' => 'light',
+            'pallete' => 'pallete1'
+        ];
+    }
+
+    /**
+     * set theme mode
+     * 
+     * @param string $mode
+     * 
+     * @return $this
+     */
+    public function setThemeMode(string $mode)
+    {
+        data_set($this->theme, 'mode', $mode);
+
+        return $this;
+    }
+    
+    /**
+     * set theme mode to dark theme
+     * 
+     * @return $this
+     */
+    public function darkMode()
+    {
+        data_set($this->theme, 'mode', 'dark');
+
+        return $this;
+    }
+
+    /**
+     * set theme mode to light theme
+     * 
+     * @return $this
+     */
+    public function lightMode()
+    {
+        data_set($this->theme, 'mode', 'light');
+
+        return $this;
+    }
+    
+    /**
+     * set the dark mode option to on or off
+     * 
+     * @param bool $status = true
+     * 
+     * @return $this
+     */
+    public function setDarkMode(bool $status = true)
+    {
+        data_set($this->theme, 'mode', $status ? 'dark' : 'light');
+
+        return $this;
+    }
+
+    /**
+     * set theme pallete
+     * 
+     * @param string $pallete
+     * 
+     * @return $this
+     */
+    public function setThemePallete(string $pallete)
+    {
+        data_set($this->theme, 'pallete', $pallete);
+
+        return $this;
+    }
+
+    /**
+     * convert the theme to array
+     * 
+     * @param string $mode
+     * 
+     * @return $this
+     */
+    protected function themeToArray()
+    {
+        return [
+            'theme' => $this->theme,
+        ];
+    }
+
+    /**
+     * set theme from array
+     * 
+     * @param string $mode
+     * 
+     * @return $this
+     */
+    protected function themeFromArray($array)
+    {
+        $this->theme = data_get($array, 'theme', $this->defaultTheme());
+    }
+}