Merge pull request 'feat: add color to chart' (#31) from dev into master

Reviewed-on: WillaEngine-Project/WillaEngine#31

resources/js/Global/plugins/chart/apexhart/type/pie.js

@@ -1,5 +1,5 @@
 import chart from "../chart";
-
+import color from "@Global/utils/colors/index"
 export default class extends chart {
 
     constructor(options) {
@@ -37,9 +37,11 @@ export default class extends chart {
     setOptions() {
         this.options.series = this.responseChart.map(x => x.count);
         this.options.labels = this.responseChart.map(x => x.category);
-        this.options.fill.labels = this.responseChart.map(x => x.category);
-        // this.options.labels = this.responseChart.map(x => x.category.name);
-        // this.options.fill.label = this.responseChart.map(x => x.category.name);
-        // this.options['colors'] = this.responseChart.map( x => x.category.color ? x.category.color : "#fff");
+        this.options.labels = this.responseChart.map(x => x.category.name);
+        this.options.fill.label = this.responseChart.map(x => x.category.name);
+        this.options['colors'] =  this.responseChart.map( x =>{
+            let colorText = x.category.color ?  x.category.color : color[parseInt((Math.random() * 100) % 14)].color;
+            return color.find(x => x.color == colorText).hex;
+        } );
     }
 }

resources/js/Global/utils/colors/index.js

@@ -1,17 +1,17 @@
 export default [
-    { name: 'قرمز', color:'red'},
-    { name: 'نارنجی', color:'orange'},
-    { name: 'زرد', color:'yellow'},
-    { name: 'صورتی', color:'pink'},
-    { name: 'طلایی', color:'gold'},
-    { name: 'بنفش', color:'purple'},
-    { name: 'آبی', color:'blue'},
-    { name: 'آبی تیره', color:'dark-blue'},
-    { name: 'سبز', color:'green'},
-    { name: 'سبز پاستیلی', color:'teal'},
-    { name: 'فیروزه ای', color:'cyan'},
-    { name: 'قهوه ای', color:'brown'},
-    { name: 'خاکستری', color:'gray'},
-    { name: 'مشکی', color:'black'},
-    { name: 'سفید', color:'white'},
+    { name: 'قرمز', color:'red', hex: '#ee3552'},
+    { name: 'نارنجی', color:'orange', hex: '#ff6b57'},
+    { name: 'زرد', color:'yellow', hex: '#ffc107'},
+    { name: 'صورتی', color:'pink', hex: '#e94c8f'},
+    { name: 'طلایی', color:'gold', hex: '#ddcfbb'},
+    { name: 'بنفش', color:'purple', hex: '#ac3773'},
+    { name: 'آبی', color:'blue', hex: '#1875BB'},
+    { name: 'آبی تیره', color:'dark-blue', hex: '#04314B'},
+    { name: 'سبز', color:'green', hex: '#0d7e00'},
+    { name: 'سبز پاستیلی', color:'teal', hex: '#00897b'},
+    { name: 'فیروزه ای', color:'cyan', hex: '#32c5d2'},
+    { name: 'قهوه ای', color:'brown', hex: '#915117'},
+    { name: 'خاکستری', color:'gray', hex: '#828282'},
+    { name: 'مشکی', color:'black', hex: '#000'},
+    { name: 'سفید', color:'white', hex: '#fff'},
 ];