fix: chart

resources/js/Global/components/Inputs/PersianDate.vue

@@ -30,129 +30,135 @@
     </div>
 </template>
 <script>
-import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
-import moment from 'jalali-moment';
+    import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
+    import {convertToJalali, convertNowToJalali} from '@Global/utils/date/jalali-date'
 
-export default {
-    components: {
-        datePicker: VuePersianDatetimePicker
-    },
-    props: {
-        color: {default: 'black'},
-        disabled: {default: false},
-        defaultDate: {
-            default: 'now',
-            type: String,
-            validator: (val) => ['now', 'empty'].includes(val)
+    export default {
+        components: {
+            datePicker: VuePersianDatetimePicker
         },
-        min: {default: null},
-        max: {default: null},
-        displayFormat: {default: null},
-        inputFormat: {default: null},
-        format: {default: null},
-        type: {
-            default: 'datetime',
-            type: String,
-            validator: (val) => ['datetime', 'time', 'date'].includes(val)
-        },
-        label: {default: 'در تاریخ '},
-        value: {default: null},
-        icon: {default: 'calendar-alt'},
-    },
-    data: () => ({
-        localeConfig: {
-            fa: {
-                lang: {label: 'شمسی'}
+        props: {
+            color: {default: 'black'},
+            disabled: {default: false},
+            defaultDate: {
+                default: 'now',
+                type: String,
+                validator: (val) => ['now', 'empty'].includes(val)
             },
-            en: {
-                lang: {label: 'Gregorian'}
-            }
+            min: {default: null},
+            max: {default: null},
+            displayFormat: {default: null},
+            inputFormat: {default: null},
+            format: {default: null},
+            type: {
+                default: 'datetime',
+                type: String,
+                validator: (val) => ['datetime', 'time', 'date'].includes(val)
+            },
+            label: {default: 'در تاریخ '},
+            value: {default: null},
+            icon: {default: 'calendar-alt'},
         },
-        show: false,
-        uniqueId: Math.floor(Math.random() * 10000)
-    }),
-    computed: {
-        dateShow: {
-            get() {
-                if (this.value) {
-                    return moment(new Date(this.value)).format(this.defaultDisplayFormat);
-                } else if (!this.disabled) {
-                    if (this.defaultDate === 'now') {
-                        this.$emit('input', moment(new Date()).format(this.defaultFormat));
-                        return moment(new Date()).format(this.defaultDisplayFormat);
-                    } else {
-                        return '';
+        data: () => ({
+            localeConfig: {
+                fa: {
+                    lang: {label: 'شمسی'}
+                },
+                en: {
+                    lang: {label: 'Gregorian'}
+                }
+            },
+            show: false,
+            uniqueId: Math.floor(Math.random() * 10000)
+        }),
+        computed: {
+            dateShow: {
+                get() {
+                    if (this.value) {
+                        return convertToJalali(this.value, this.defaultDisplayFormat);
+                    } else if (!this.disabled) {
+                        if (this.defaultDate === 'now') {
+                            this.$emit('input', convertNowToJalali(null, this.defaultFormat));
+                            return convertNowToJalali(null, this.defaultDisplayFormat);
+                        } else {
+                            return '';
+                        }
                     }
-
+                },
+                set(value) {
                 }
             },
-            set(value) {
-            }
-        },
-        defaultDisplayFormat() {
-            if (!this.displayFormat) {
-                if (this.type === 'datetime') {
-                    return 'jDD jMMMM jYYYY ساعت HH:mm';
-                } else if (this.type === 'date') {
-                    return 'jDD jMMMM jYYYY';
-                } else if (this.type === 'time') {
-                    return 'HH:mm';
+            defaultDisplayFormat() {
+                if (!this.displayFormat) {
+                    if (this.type === 'datetime') {
+                        return 'jDD jMMMM jYYYY ساعت HH:mm';
+                    } else if (this.type === 'date') {
+                        return 'jDD jMMMM jYYYY';
+                    } else if (this.type === 'time') {
+                        return 'HH:mm';
+                    }
                 }
+                return this.displayFormat
             }
-            return this.displayFormat
-        },
-        defaultInputFormat() {
-            if (!this.inputFormat) {
-                if (this.type === 'datetime') {
-                    return 'YYYY-MM-DD HH:mm';
-                } else if (this.type === 'date') {
-                    return 'YYYY-MM-DD';
-                } else if (this.type === 'time') {
-                    return 'HH:mm';
+            ,
+            defaultInputFormat() {
+                if (!this.inputFormat) {
+                    if (this.type === 'datetime') {
+                        return 'YYYY-MM-DD HH:mm';
+                    } else if (this.type === 'date') {
+                        return 'YYYY-MM-DD';
+                    } else if (this.type === 'time') {
+                        return 'HH:mm';
+                    }
                 }
+                return this.inputFormat
             }
-            return this.inputFormat
-        },
-        defaultFormat() {
-            if (!this.format) {
-                if (this.type === 'datetime') {
-                    return 'YYYY-MM-DD HH:mm';
-                } else if (this.type === 'date') {
-                    return 'YYYY-MM-DD';
-                } else if (this.type === 'time') {
-                    return 'HH:mm';
+            ,
+            defaultFormat() {
+                if (!this.format) {
+                    if (this.type === 'datetime') {
+                        return 'YYYY-MM-DD HH:mm';
+                    } else if (this.type === 'date') {
+                        return 'YYYY-MM-DD';
+                    } else if (this.type === 'time') {
+                        return 'HH:mm';
+                    }
                 }
+                return this.format
             }
-            return this.format
-        },
-        minimum() {
-            if (this.min === 'now') {
-                return moment(new Date()).format(this.defaultInputFormat);
-            } else {
-                return this.min;
+            ,
+            minimum() {
+                if (this.min === 'now') {
+                    return convertNowToJalali(null, this.defaultInputFormat);
+                } else {
+                    return this.min;
+                }
             }
-        },
-        maximum() {
-            if (this.max === 'now') {
-                return moment(new Date()).format(this.defaultInputFormat);
-            } else {
-                return this.max;
+            ,
+            maximum() {
+                if (this.max === 'now') {
+                    return convertNowToJalali(null, this.defaultInputFormat);
+                } else {
+                    return this.max;
+                }
             }
-        },
-    },
-    methods: {
-        changeDatePicker(event) {
-            if (!this.disabled) {
-                this.$emit('input', event.format(this.defaultFormat))
+            ,
+        }
+        ,
+        methods: {
+            changeDatePicker(event) {
+                if (!this.disabled) {
+                    this.$emit('input', event.format(this.defaultFormat));
+                }
             }
         }
-    },
-    watch: {
-        disabled(value) {
-            if (value) {
-                this.$emit('input', null);
+        ,
+        watch: {
+            disabled(value) {
+                if (value) {
+                    this.$emit('input', null);
+                }
             }
         }
     }
-}
 </script>

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

@@ -1,11 +1,11 @@
 import chart from "../chart";
-
+import {seperator, price} from '@Global/utils/common/format'
 export default class extends chart {
 
     constructor(options) {
         super(options);
         this.type = options.type ? options.type : 'daily';
-
+        this.formatCount = 'number';
         this.options = {
             fill: {
                 colors: ["#e6e6e6"]
@@ -15,16 +15,35 @@ export default class extends chart {
                     fontFamily: '"iranyekan-regular-en-num", "Montserrat-Regular"'
             },
             xaxis: {
-                categories: []
+                categories: [],
+            },
+            yaxis: {
+                labels: {
+                    formatter: (val) => {
+                        if (this.formatCount === 'number') {
+                            return seperator(val)
+                        } else if(this.formatCount === 'price') {
+                            return price(val)
+                        }
+                    }
+                },
             },
             dataLabels: {
                 style: {
                     colors: ["#000", "#000", "#000"]
-                }
+                },
+                enabled: true,
+                formatter: (val, opt) => {
+                    if (this.formatCount === 'number') {
+                        return seperator(val)
+                    } else if(this.formatCount === 'price') {
+                        return price(val)
+                    }
+                },
             },
             series: [
                 {
-                    name: "bar chart",
+                    name: this.formatCount === 'number' ? "تعداد" : "قیمت",
                     data: []
                 }
             ]
@@ -41,13 +60,22 @@ export default class extends chart {
     setOptions() {
         switch (this.type) {
             case 'weekly':
+                this.formatCount = 'number';
+                return this.setWeekly();
             case 'cost-weekly':
+                this.formatCount = 'price';
                 return this.setWeekly();
             case 'monthly':
+                this.formatCount = 'number';
+                return this.setMonthly();
             case 'cost-monthly':
+                this.formatCount = 'price';
                 return this.setMonthly();
             case 'daily':
+                this.formatCount = 'number';
+                return this.setDaily();
             case 'cost-daily':
+                this.formatCount = 'price';
                 return this.setDaily();
         }
     }

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

@@ -41,7 +41,7 @@ export default class extends chart {
         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;
+            return color.find(x => x.color === colorText).hex;
         } );
     }
 }

resources/js/Global/utils/common/Object.js

@@ -40,3 +40,4 @@ Array.prototype.matchItems = function (array) {
 }
 // Hide method from for-in loops
 Object.defineProperty(Array.prototype, "matchItems", {enumerable: false});
+

resources/js/Global/utils/common/format.js

@@ -0,0 +1,6 @@
+export const price = (number, currency = 'تومان')  => {
+    return  Intl.NumberFormat().format(number) + ' ' + currency;
+}
+export const seperator = (number)  => {
+    return  new Intl.NumberFormat().format(number);
+}