Merge pull request #50 from syntaxlexx/theme-mods

Feat: added theme setting options - dark mode, palette
asantibanez · Jul 25, 2023 · 25b13b3 · 25b13b3
2 parents ac1e613 + c408b63
commit 25b13b3
Show file tree

Hide file tree

Showing 11 changed files with 1,432 additions and 1,112 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/app.js b/public/app.js
diff --git a/public/app.js.LICENSE.txt b/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.
  */
 

diff --git a/resources/js/areaChart.js b/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);

diff --git a/resources/js/columnChart.js b/resources/js/columnChart.js
@@ -94,13 +94,16 @@ const columnChart = () => {
                     opacity: component.get('columnChartModel.opacity') || 0.5
                 },
 
+                theme: component.get('columnChartModel.theme') || {},
+
                 tooltip: {
                     y: {
                         formatter: function(value, series) {
                             return data[series.dataPointIndex].extras.tooltip || value;
                         }
                     }
                 },
+
             };
 
             const colors = component.get('columnChartModel.colors');

diff --git a/resources/js/lineChart.js b/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'

diff --git a/resources/js/multiColumnChart.js b/resources/js/multiColumnChart.js
@@ -89,6 +89,9 @@ const multiColumnChart = () => {
                 fill: {
                     opacity: component.get('columnChartModel.opacity'),
                 },
+
+                theme: component.get('columnChartModel.theme') || {},
+
             };
 
             const colors = component.get('columnChartModel.colors');

diff --git a/resources/js/multiLineChart.js b/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');

diff --git a/resources/js/pieChart.js b/resources/js/pieChart.js
@@ -76,6 +76,8 @@ const pieChart = () => {
 
                 legend: component.get('pieChartModel.legend') || {},
 
+                theme: component.get('pieChartModel.theme') || {},
+
                 tooltip: {
                     y: {
                         formatter: function(value, series) {

diff --git a/src/Models/BaseChartModel.php b/src/Models/BaseChartModel.php
@@ -18,6 +18,7 @@ class BaseChartModel
     use HasSparkline;
     use HasGrid;
     use HasColors;
+    use HasTheme;
     use HasJsonConfig;
 
     public function __construct()
@@ -31,6 +32,7 @@ public function __construct()
         $this->initSparkline();
         $this->initGrid();
         $this->initColors();
+        $this->initTheme();
         $this->initJsonConfig();
     }
 
@@ -51,6 +53,7 @@ public function toArray()
             $this->sparklineToArray(),
             $this->gridToArray(),
             $this->colorsToArray(),
+            $this->themeToArray()
             $this->jsonConfigToArray()
         );
     }
@@ -66,6 +69,7 @@ public function fromArray($array)
         $this->sparklineFromArray($array);
         $this->gridFromArray($array);
         $this->colorsFromArray($array);
+        $this->themeFromArray($array);
         $this->jsonConfigFromArray($array);
     }
 }
diff --git a/src/Models/HasTheme.php b/src/Models/HasTheme.php
@@ -0,0 +1,125 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasTheme
+{
+    private $theme;
+    private $mode;
+    private $palette;
+
+    /**
+     * Initialize 
+     */
+    public function initTheme()
+    {
+        $this->theme = $this->defaultTheme();
+    }
+
+    /**
+     * set default theme
+     * 
+     * @return array $theme
+     */
+    private function defaultTheme()
+    {
+        return [
+            'mode' => 'light',
+            'palette' => 'palette1'
+        ];
+    }
+
+    /**
+     * 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 setThemePalette(string $palette)
+    {
+        data_set($this->theme, 'palette', $palette);
+
+        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());
+    }
+}