File Manager

'use strict';
var csvData = new Array(), modal, titleH, years = 0;

$(document).ready(function () {
    $.get('data.csv', function (resp) {
        processData(resp);
    }).always(function () {
        $('#title-text').html(titleH);
    });

// Get the modal
    modal = document.getElementById('strategyModal');

// Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    };

// When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    };
});

function processData(allText) {
    csvData = CSVToArray(allText, ',');
    /*var jsonObject = allText.split(/\r\n|\r|\n/g);
     for (var i = 0; i < jsonObject.length; i++) {
     csvData.push(jsonObject[i].split(/,(?=")/));
     }*/

let code, budget, withdraw, balance,
            summaryData = [0, 0, 0, 0, 0],
            strategyData = [0, 0, 0, 0, 0, 0], strategyPData = [0, 0, 0, 0, 0, 0], strategyBData = [0, 0, 0, 0, 0, 0], strategyPercentUsed = [0, 0, 0, 0, 0, 0], strategyPercentBal = [0, 0, 0, 0, 0, 0];
    // Retrived data from csv file content
    $.each(csvData, function (index, cols) {
        if (index === 0) {
            titleH = cols[0];
            var yearWord = 'ประจำปีงบประมาณ';
            years = cols[0].substr((cols[0].indexOf(yearWord) + yearWord.length + 1), 4);
            return;
        }
        if (index === 1) {
            //Columns
            return;
        }

if (cols[0] === '' || cols[0] === undefined)
            return;

budget = sanitise(parseFloat(cols[2].replace(/,/g, '')));
        withdraw = sanitise(parseFloat(cols[3].replace(/,/g, '')));
        balance = sanitise(parseFloat(cols[4].replace(/,/g, '')));
        code = parseInt(cols[0].replace(/,/g, ''));

switch (true) {
            case (code >= 100 && code < 200) :
                strategyData[0] += budget;
                strategyPData[0] += withdraw;
                strategyBData[0] += balance;
                break;
            case (code >= 200 && code < 300):
                strategyData[1] += budget;
                strategyPData[1] += withdraw;
                strategyBData[1] += balance;
                break;
            case (code >= 300 && code < 400):
                strategyData[2] += budget;
                strategyPData[2] += withdraw;
                strategyBData[2] += balance;
                break;
            case (code >= 400 && code < 500):
                strategyData[3] += budget;
                strategyPData[3] += withdraw;
                strategyBData[3] += balance;
                break;
            case (code >= 500 && code < 600):
                strategyData[4] += budget;
                strategyPData[4] += withdraw;
                strategyBData[4] += balance;
                break;
            case (code >= 600 && code < 700):
                strategyData[5] += budget;
                strategyPData[5] += withdraw;
                strategyBData[5] += balance;
                break;
        }

summaryData[0] += budget;
        summaryData[1] += withdraw;
        summaryData[2] += balance;
    });

summaryData[3] = ((summaryData[1] * 100) / summaryData[0]).toFixed(2);
    summaryData[4] = (100 - summaryData[3]).toFixed(2);

for (var i = 0; i < 6; i++) {
        strategyPercentUsed[i] = ((strategyPData[i] * 100) / strategyData[i]).toFixed(2);
        strategyPercentBal[i] = (100 - strategyPercentUsed[i]).toFixed(2);
    }

var summaryDataSet = {
        labels: ['เบิกจ่ายแล้ว', 'คงเหลือ', 'ร้อยละเบิกจ่าย', 'ร้อยละคงเหลือ'],
        datasets: [{
                data: [summaryData[1], summaryData[2], 0, 0],
                backgroundColor: [
                    window.chartColors.green,
                    window.chartColors.red,
                    window.chartColors.greenLight,
                    window.chartColors.redLight
                ],
                labels: ['เบิกจ่ายแล้ว', 'คงเหลือ'],
                borderWidth: 1
            }, {
                data: [summaryData[3], summaryData[4]],
                backgroundColor: [
                    window.chartColors.greenLight,
                    window.chartColors.redLight
                ],
                labels: ['ร้อยละเบิกจ่าย', 'ร้อยละคงเหลือ'],
                borderWidth: 1
            }]
    };

var strategyDataSet = {
        labels: ['ประเด็นที่ 1', 'ประเด็นที่ 2', 'ประเด็นที่ 3', 'ประเด็นที่ 4', 'ประเด็นที่ 5', 'ประเด็นที่ 6'],
        datasets: [{
                label: 'เบิกจ่ายแล้ว',
                backgroundColor: '#ff9900',
                stack: 'Stack 0',
                yAxisID: 'y-axis-1',
                data: strategyPData
            }, {
                label: 'คงเหลือ',
                backgroundColor: '#898382',
                stack: 'Stack 0',
                yAxisID: 'y-axis-1',
                data: strategyBData
            }, {
                label: 'ร้อยละเบิกจ่าย',
                backgroundColor: '#3366cc',
                stack: 'Stack 1',
                yAxisID: 'y-axis-2',
                data: strategyPercentUsed
            }, {
                label: 'ร้อยละคงเหลือ',
                backgroundColor: '#dc3912',
                stack: 'Stack 1',
                yAxisID: 'y-axis-2',
                data: strategyPercentBal
            }]

};

renderSummary(summaryDataSet, summaryData);
    renderStrategy(strategyDataSet);
}

var renderSummary = function (data, para1) {
    var ctx = document.getElementById('renderSummary').getContext('2d');
    var summary = new Chart(ctx, {
        type: 'pie',
        data: data,
        options: {
            title: {
                display: true,
                text: 'งบประมาณที่ได้รับจัดสรรและเบิกจ่ายตามแผนกลยุทธ์ ประจำปีงบประมาณ ' + years + ' (' + formatNumber(para1[0]) + ')'
            },
            responsive: true,
            showAllTooltips: true,
            legend: {
                labels: {
                    generateLabels: function (chart) {
                        var data = chart.data;
                        if (data.labels.length && data.datasets.length) {
                            return data.labels.map(function (label, i) {
                                var meta = chart.getDatasetMeta(0);
                                var ds = data.datasets[0];
                                var arc = meta.data[i];
                                var custom = arc && arc.custom || {};
                                var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
                                var arcOpts = chart.options.elements.arc;
                                var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                                var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

// We get the value of the current label
                                var value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];
                                switch (i) {
                                    case 2:
                                        value = para1[3];
                                        break;
                                    case 3:
                                        value = para1[4];
                                        break;
                                }
                                return {
                                    // Instead of `text: label,`
                                    // We add the value to the string
                                    text: label + " : " + formatNumber(value),
                                    fillStyle: fill,
                                    strokeStyle: stroke,
                                    lineWidth: bw,
                                    hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
                                    index: i
                                };
                            });
                        } else {
                            return [];
                        }
                    }
                }
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        var dataset = data.datasets[tooltipItem.datasetIndex];
                        var index = tooltipItem.index;
                        return dataset.labels[index] + ': ' + dataset.data[index];
                    }
                }
            },
            plugins: {
                datalabels: {
                    display: function (context) {
                        return context.dataset.data[context.dataIndex] !== 0; // or >= 1 or ...
                    },
                    align: 'center',
                    anchor: 'center',
                    backgroundColor: '#ffffff',
                    formatter: function (value, context) {
                        return formatNumber(value);
                    }
                }
            }
        }
    });
};

$.each(csvData, function (index, cols) {
                        if (index === 0 || index === 1) {
                            //Columns
                            return;
                        }

if (cols[0] === '' || cols[0] === undefined || !cols[0].startsWith(strategyPre))
                            return;

table.append(
                                '<tr>' +
                                '<td>' + cols[0] + '</td>' +
                                '<td>' + cols[1] + '</td>' +
                                '<td class="number">' + cols[2] + '</td>' +
                                '<td class="number">' + cols[3] + '</td>' +
                                '<td class="number">' + cols[4] + '</td>' +
                                '<td class="number">' + cols[5] + '</td>' +
                                '<td class="number">' + cols[6] + '</td>' +
                                '<td>' + cols[7] + '</td>' +
                                '</tr>'
                                );

total[0] += sanitise(parseFloat(cols[2].replace(/,/g, '')));
                        total[1] += sanitise(parseFloat(cols[3].replace(/,/g, '')));
                        total[2] += sanitise(parseFloat(cols[4].replace(/,/g, '')));
                    });
                    table.append(
                            '<tfoot><tr>' +
                            '<td colspan="2">รวม</td>' +
                            '<td class="number">' + formatNumber(total[0]) + '</td>' +
                            '<td class="number">' + formatNumber(total[1]) + '</td>' +
                            '<td class="number">' + formatNumber(total[2]) + '</td>' +
                            '<td></td>' +
                            '<td></td>' +
                            '<td></td>' +
                            '</tr></tfoot>'
                            );
                    modal.style.display = "block";
                }
            },
            plugins: {
                datalabels: {
                    display: false
                }
            }
        }
    });
};

var getIssue = function (x) {
    switch (x) {
        case '1':
            return  "ประเด็นที่ 1 การวิจัยและนวัตกรรมเพื่อเป็นองค์กรชั้นนําทางพฤติกรรมศาสตร์ในระดับอาเซียน";
        case '2':
            return  "ประเด็นที่ 2 ความเข้มแข็งของเครือข่ายทั้งในและต่างประเทศเพื่อพัฒนาบุคลากรและการจัดการเรียนการสอน";
        case '3':
            return  "ประเด็นที่ 3 องค์ความรู้และนวัตกรรมที่มีการบูรณาการงานบริการวิชาการแก่สังคมกับการเรียนการสอน การวิจัยและการทำนุบํารุงศิลปวัฒนธรรมโดยสอดคล้องกับความต้องการของชุมชนและสังคม";
        case '4':
            return  "ประเด็นที่ 4 ขับเคลื่อนการปฏิบัติงานในแต่ละภาคส่วนเพื่อผลงานที่ได้มาตรฐาน";
        case '5':
            return  "ประเด็นที่ 5 ระบบการบริหารงานที่มีประสิทธิภาพ";
        case '6':
            return  "ประเด็นที่ 6 Edpex";
    }
};

File Manager

Editing: graph/html/js/main.js.bak