https://emit-beta-v2.replit.app/routes/emissions.js

1export default {
2    template: '#emissions',
3    data() {
4        return {
5            span: 21,
6            view: 'Table',
7            filter: '',
8            sum: false,
9            unit: '',
10            pctFed: emit.getProp('pctFed') / 100,
11            fed: false,
12            select: '0',
13            pols: ['name','units','pm10','pm25','voc','nox','co','so2','haps'],
14            page: { rowsPerPage: 15 },
15            //selected: [],
16            columns: [
17                { name: 'name', label: 'Description', field: row => row.name, align: 'left', sortable: false },
18                { name: 'units', label: 'Units', field: 'units', align: 'left', sortable: true },
19                { name: 'pm10', label: 'PM10', field: 'pm10', align: 'left', sortable: true },
20                { name: 'pm25', label: 'PM2.5', field: 'pm25', align: 'left', sortable: true },
21                { name: 'voc', label: 'VOC', field: 'voc', align: 'left', sortable: true },
22                { name: 'nox', label: 'NOx', field: 'nox', align: 'left', sortable: true },
23                { name: 'co', label: 'CO', field: 'co', align: 'left', sortable: true },
24                { name: 'so2', label: 'SO2', field: 'so2', align: 'left', sortable: true },
25                { name: 'haps', label: 'HAPs', field: 'haps', align: 'left', sortable: true },
26                { name: 'co2', label: 'CO2', field: 'co2', align: 'left', sortable: true },
27                { name: 'ch4', label: 'CH4', field: 'ch4', align: 'left', sortable: true },
28                { name: 'n2o', label: 'N2O', field: 'n2o', align: 'left', sortable: true },
29                { name: 'co2e', label: 'CO2e', field: 'co2e', align: 'left', sortable: true },
30            ],
31            chart: true,
32            stage: 0,
33        }
34    },
35    created() {
36        this.emis = emit.emis();
37        this.cap_ghg = [{label: 'CAPs & HAPs', value: 0},{label: 'GHG', value: 1}];
38        this.projEmis = [];
39        this.emis.forEach(row => {
40            if (row.ref.indexOf('pie') != -1) { this.projEmis.push(row) } // tons/project, kill pie test
41        });  
42        this.units = [...new Set(this.emis.map(e => e.units))];
43        this.filtered = this.emis;
44        this.sums = { pm10: 0, pm25: 0, voc: 0, nox: 0, co: 0, so2: 0, haps: 0, co2: 0, ch4: 0, n2o: 0, co2e: 0 };
45        this.colors = ['#f44336','#bdbdbd','#4db6ac','#4caf50','#76ff03','#ad1457','#18ffff','#607d8b','#d500f9','#ff8f00','#00e676','ff0','#9575cd','#ff5722'];
46    },
47    methods: {
48        setActive(id) { this.view = id },
49        filterData(rows, filter, cols, cellValue) {
50            const search = (filter) ? filter.toLowerCase() : '';
51            this.filtered = rows.filter(
52                row => cols.some(col => (cellValue(col, row) + '').toLowerCase().indexOf(search) !== -1)
53            )
54            return this.filtered;
55        },
56        sumData() {
57            for (let n in this.sums) { this.sums[n] = 0 }
58            this.filtered.forEach(row => {
59                if (row.units == this.unit) {
60                    for (let n in this.sums) { this.sums[n] += Number(row[n]) }
61                }
62            });
63        },
64        calcFed() {
65            if (this.pctFed == 0) {
66                if (this.fed == true) {
67                    this.$q.notify({ position: 'top', message: 'Federal interest is NOT set.', color: 'warning', icon: 'info', textColor: 'grey-10',
68                        actions: [ { label: 'Dismiss', color: 'black', handler: () => { /* ... */ } } ]
69                    }); 
70                }
71                return;
72            }
73
74            let pols = ['pm10','pm25','voc','nox','co','so2','haps','co2','ch4','n2o','co2e'];
75            if (this.fed == true) {
76                this.emis.forEach(e => {
77                    for (let x = 0; x < pols.length; x++) { e[pols[x]] = Number(e[pols[x]] * this.pctFed).toFixed(5) }
78                });
79
80            } else {
81                this.emis.forEach(e => {
82                    for (let x = 0; x < pols.length; x++) {e[pols[x]] = Number(e[pols[x]] / this.pctFed).toFixed(4) }
83                });
84            }
85        },
86        exportTbl() {
87            let cols = ['name','units','pm10','pm25','voc','nox','co','so2','haps','co2','ch4','n2o','co2e','permit'];
88            if (this.emis.length > 0) {
89                let headers = [], csv = [];
90                for (let i = 0; i < this.emis.length; i++) {
91                    if (i == 0) {
92                        for (let n = 0; n < cols.length; n++) { headers.push(cols[n]) }
93                        csv.push(headers.join(","));
94                    }
95                    let row = []; 
96                    for (let j = 0; j < cols.length; j++) { row.push(this.emis[i][cols[j]]) }
97                    csv.push(row.join(","));		
98                }
99                exportTable(csv.join("\n"),'EMIT - '+ emit.getProp('proj').name +' - '+ ((this.fed) ? 'Federal Only' : 'Total Project')+'.csv'); 
100            } else {
101                this.$q.notify({ message: 'Nothing to export.', color: 'red', icon: 'info',
102                    actions: [
103                        { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
104                    ]
105                });
106            }
107        },
108        drawPie(pol) {

109            Chart.helpers.each(Chart.instances, function(inst) {
110                if (inst.canvas.id == 'pie') { inst.destroy() }
111            });
112
113            let config, ds = { label: '', backgroundColor: [], data: [] };
114            let labels = (this.select == 0) ? ['PM10','PM2.5','VOC','NOx','CO','SO2','HAPs'] : ['CO2','CH4','N2O'];
115            let ref = (this.select == 0) ? ['pm10','pm25','voc','nox','co','so2','haps'] :  ['co2','ch4','n2o'];
116            let canvas = document.getElementById('pie'), ctx = canvas.getContext("2d"); 
117
118            switch (this.stage) {
119                case 0: // stage 0 - flat data model all pollutants
120                    ds.label = 'Summary Line Emissions (tons/project)';
121                    for (let n = 0; n < labels.length; n++) {
122                        ds.backgroundColor.push(this.colors[n]);
123                        ds.data.push(0);
124                    }
125
126                    this.projEmis.forEach((row) => {
127                        for (let n = 0; n < ref.length; n++) {
128                            if (!isNaN(row[ref[n]])) {
129                                ds.data[n] += Number(row[ref[n]]) 
130                            }
131                        }
132                    });
133
134                    for (let n = 0; n < labels.length; n++) {
135                        ds.data[n] = parseFloat(ds.data[n]).toFixed(4);
136                    }
137                    config = { title: ['- click pie wedges for details -'], labels: labels, data: [ds] };
138                    this.stage = 1;
139                    break;
140
141                case 1: // stage 1 - pollutants by activitiy
142                    ds.label = 'Detail Line Emissions (tons/project)';
143                    let details = [], indx = labels.indexOf(pol), dRef = ref[indx];
144
145                    this.projEmis.forEach((row) => {
146                        if (!isNaN(row[dRef]) && row[dRef] != '0.0000') {
147                            ds.backgroundColor.push(this.getColor());
148                            details.push(row.name);
149                            ds.data.push(row[dRef]);
150                        }
151                    });
152
153                    config = { title: ['- click pie to return to summary -'], labels: details, data: [ds] };
154                    this.stage = 0;
155                    break; 
156            }
157
158            let chart = new Chart(ctx, {
159                type: 'pie',
160                data: {
161                    labels: (config.labels) ? config.labels : false,
162                    datasets: config.data
163                },
164                options: {
165                    tooltips: { mode: 'index' },
166                    legend: { position: 'bottom', labels: { fontColor: 'grey' } },
167                    title: { display: true, text: config.title, fontSize: 13, fontColor: 'grey' }
168                }
169            });
170
171            canvas.onclick = (evt) => {
172                let activePoints = chart.getElementsAtEvent(evt);
173                if (activePoints[0]) {
174                    let chartData = activePoints[0]['_chart'].config.data;
175                    let idx = activePoints[0]['_index'];
176                    let label = chartData.labels[idx];
177                    // let value = chartData.datasets[0].data[idx];
178                    this.drawPie(label);
179                }
180            }; 
181        },
182        getColor() {
183            let seed = '0123456789ABCDEF', color = '#';
184            for (let i = 0; i < 6; i++) {
185                color += seed[Math.floor(Math.random() * 16)];
186            }
187            return color;
188        } 
189    },
190    watch: {
191        view() {
192            this.sum = false;
193            if (this.view == 'Summary' && this.projEmis.length > 0) {
194                this.stage = 0;
195                setTimeout(() => { this.drawPie() }, 500);
196            }
197        },
198        filter() {
199            this.unit = ''; 
200            for (let n in this.sums) { this.sums[n] = 0 }
201            if (this.filter == null) { this.filtered = this.emis }
202        },
203        fed() { 
204            this.calcFed();
205            if (this.view == 'Summary') { 
206                this.stage = 0;
207                this.drawPie();
208            }
209        },
210        select() {
211            this.pols = (this.select == 0) ? ['name','units','pm10','pm25','voc','nox','co','so2','haps'] : ['name','units','co2','ch4','n2o','co2e'];
212        },
213        pols() { 
214            if (this.view == 'Summary' && this.projEmis.length > 0) { 
215                this.stage = 0;
216                this.drawPie();
217            }
218        },
219    },
220    beforeDestroy() {

221        Chart.helpers.each(Chart.instances, function(inst) {
222            if (inst.canvas.id == 'pie') { inst.destroy() }
223        });
224    }
225}