· 5 years ago · Dec 30, 2020, 08:38 AM
1<!--to graph as counts-->
2<script>
3import _ from 'lodash';
4import {Bar} from 'vue-chartjs';
5import api from "@/apis/home";
6
7export default {
8 extends: Bar,
9 props: {
10 // allLoanDetailsMap: {
11 // type: Object,
12 // required: true
13 // },
14 isAmount: {
15 type: Boolean,
16 required: true
17 },
18 selectedChart: {
19 type: String,
20 required: false,
21 default: '',
22 },
23 },
24 data() {
25 return {
26 allLoanDetailsMap: {},
27 dataCollection: {},
28 options: {
29 responsive: true,
30 maintainAspectRatio: false
31 },
32 }
33 },
34 async mounted() {
35 await this.getChart();
36 await this.prepareData();
37 await this.generalizeChart();
38 },
39 methods: {
40 async getChart() {
41 this.isLoading = true;
42 try {
43 const { data } = await api.getChart();
44 this.allLoanDetailsMap = data.allLoanDetailsMap;
45 } catch (e) {
46 console.error(e);
47 }
48 },
49
50 generalizeChart(type, data) {
51 let chartData = !!type ? data : this.dataCollection;
52 this.renderChart(chartData, this.options);
53 },
54 prepareData() {
55 let branchNames = [];
56 let processing = [];
57 let lending = [];
58 let closed = [];
59 let rejected = [];
60
61 let eNames = [];
62 let eprocessing = [];
63 let elending = [];
64 let eclosed = [];
65 let erejected = [];
66
67 _.forOwn(this.allLoanDetailsMap, (rootVal, key) => {
68
69 branchNames.push(rootVal.branch);
70
71 processing.push( isAmount ? rootVal.processingLoan : rootVal.processingLoanAmount );
72 lending.push( isAmount ? rootVal.lendingLoan : rootVal.lendingLoanAmount );
73 closed.push( isAmount ? rootVal.closedLoan : rootVal.closedLoanAmount );
74 rejected.push( isAmount ? rootVal.rejectedLoan : rootVal.rejectedLoanAmount );
75
76 _.forOwn(rootVal.economistLoanDTOMap, (innerVal, key) => {
77 eNames.push( isAmount ? innerVal.economist : innerVal.economistAmount );
78 eprocessing.push( isAmount ? innerVal.eprocessing : innerVal.eprocessingAmount );
79 elending.push( isAmount ? innerVal.elending : innerVal.elendingAmount );
80 eclosed.push( isAmount ? innerVal.eclosed : innerVal.eclosedAmount );
81 erejected.push( isAmount ? innerVal.erejected : innerVal.erejectedAmount );
82
83 rootVal.economistLoanDTOMap.chartData = {
84 labels: [...eNames],
85 datasets: [
86 {
87 label: 'Судалж буй зээл',
88 backgroundColor: '#f87979',
89 data: [...eprocessing],
90 },
91 {
92 label: 'Олгосон зээл',
93 backgroundColor: '#0041a5',
94 data: [...elending],
95 },
96 {
97 label: 'Хаасан зээл',
98 backgroundColor: '#9ff879',
99 data: [...eclosed],
100 },
101 {
102 label: 'Татгалзсан зээл',
103 backgroundColor: '#bcc115',
104 data: [...erejected],
105 }
106 ],
107 };
108 console.log(rootVal.economistLoanDTOMap.chartData);
109 eNames = [];
110 eprocessing = []
111 elending = [];
112 eclosed = [];
113 erejected = [];
114 });
115
116 this.dataCollection = {
117 datasets: [
118 {
119 label: 'Судалж буй зээл',
120 backgroundColor: '#f87979',
121 data: [...processing],
122 },
123 {
124 label: 'Олгосон зээл',
125 backgroundColor: '#0041a5',
126 data: [...lending],
127 },
128 {
129 label: 'Хаасан зээл',
130 backgroundColor: '#287365',
131 data: [...closed],
132 },
133 {
134 label: 'Татгалзсан зээл',
135 backgroundColor: '#c18815',
136 data: [...rejected],
137 }
138 ],
139 labels: [...branchNames],
140 }
141 });
142 }
143 },
144 watch: {
145 selectedChart(newVal, oldVal) {
146 if (newVal) {
147 let selectedData = this.allLoanDetailsMap[newVal].economistLoanDTOMap.chartData;
148 this.generalizeChart(newVal, selectedData);
149 }
150 console.log('oldVal:' + oldVal);
151 // console.log('newVal:' + newVal);
152 console.log('newVal:' + newVal);
153 }
154 },
155}
156</script>