{"version":3,"names":[],"mappings":"","sources":["custom-charts.js"],"sourcesContent":["export function customCharts() {\n\n    //////////////////////////////////////////////////////\n    // FUNCTIONS\n    //////////////////////////////////////////////////////\n    function nFormatter(num, digits) {\n        const lookup = [\n          { value: 1, symbol: \"\" },\n          { value: 1e3, symbol: \"k\" },\n          { value: 1e6, symbol: \"M\" },\n          { value: 1e9, symbol: \"G\" },\n          { value: 1e12, symbol: \"T\" },\n          { value: 1e15, symbol: \"P\" },\n          { value: 1e18, symbol: \"E\" }\n        ];\n        const rx = /\\.0+$|(\\.[0-9]*[1-9])0+$/;\n        var item = lookup.slice().reverse().find(function(item) {\n          return num >= item.value;\n        });\n        return item ? (num / item.value).toFixed(digits).replace(rx, \"$1\") + item.symbol : \"0\";\n    }\n\n    function chartLinearGradient(chart) {\n        var chartGradientFill = chart.getContext('2d').createLinearGradient(0, 0, 0, 230);\n        chartGradientFill.addColorStop(0, \"rgba(126, 221, 211, 0.5)\");\n        chartGradientFill.addColorStop(0.7, \"rgba(126, 221, 211, 0.15)\");\n        chartGradientFill.addColorStop(1, \"rgba(126, 221, 211, 0)\");\n\n        return chartGradientFill;\n    }\n\n    // Return dollar value with a prepended dollar sign\n    function dollarLabel(context) {\n        // return \"$ \" + Number(context.parsed.y).toFixed(2); Unformated amount ex: 200000.00\n        return \"$ \" + context.formattedValue; //Formated by charts js ex: 200,000.00\n    }\n\n    // Return shorten tick values\n    function tickFormatter(value, index, values) {\n        return nFormatter(value, 2);\n    }\n\n    // Return percentage value\n    function percentageValue(tooltipItem) {\n        let context = Array.isArray(tooltipItem) ? tooltipItem[0] : tooltipItem;\n        let total = 0;\n        context.dataset.data.forEach(function(value) {\n            total += value;\n        });\n        return Math.round((context.raw / total) * 100)+\"%\";\n    }\n    // Return percentage value of the portfolio\n    function percentageOfPortfolio(tooltipItem) {\n        let context = Array.isArray(tooltipItem) ? tooltipItem[0] : tooltipItem;\n        let total = 0;\n        context.dataset.data.forEach(function(value) {\n            total += value;\n        });\n        return Math.round((context.raw / total) * 100)+\"% of portfolio\";\n    }\n    \n    //Initialize\n    if($('.js-chart-active').length) {\n        \n        //////////////////////////////////////////////////////\n        // RENDER\n        //////////////////////////////////////////////////////\n        var ovhChart = document.getElementById('ovhChart'); //Overall Holdings\n        var investOvChart = document.getElementById('investOvChart'); //Overall Investments\n        var insOvChart = document.getElementById('insOvChart'); //Overall Insurances\n        var pbBarChart = document.getElementById('pbBarChart'); //Portfolio Breakdown Bar Chart\n        var pbPieChart = document.getElementById('pbPieChart'); //Portfolio Breakdown Doughnut Chart\n        var ppoChart = document.getElementById('ppoChart'); //Portfolio Breakdown Doughnut Chart\n        var mfrChart = document.getElementById('mfrChart'); //Portfolio Mutual Funds Returns Chart\n        var mfallocationBarChart = document.getElementById('mfallocationBarChart'); //Portfolio Mutual Funds Allocation Bar Chart\n        var mfallocationPieChart = document.getElementById('mfallocationPieChart'); //Portfolio Mutual Funds Allocation Doughnut Chart\n        var aaBarChart = document.getElementById('aaBarChart'); //Asset Allocation - Portfolio Bar Chart\n        var aaPieChart = document.getElementById('aaPieChart'); //Asset Allocation - Portfolio Doughnut Chart\n\n        //////////////////////////////////////////////////////\n        // GLOBAL CONFIGS\n        //////////////////////////////////////////////////////\n        Chart.defaults.font.family = 'Barlow, sans-serif';\n        Chart.defaults.font.size = 12;\n        Chart.defaults.font.weight = 700;\n        Chart.defaults.maintainAspectRatio = false;\n        Chart.defaults.plugins.title.display = false;\n        Chart.defaults.plugins.legend.display = false;\n        Chart.defaults.plugins.tooltip.titleMarginBottom = 2;\n        Chart.defaults.plugins.tooltip.backgroundColor = '#1C355E';\n        Chart.defaults.plugins.tooltip.displayColors = false;\n        Chart.defaults.plugins.tooltip.boxWidth = 0;\n        Chart.defaults.plugins.tooltip.boxHeight = 0;\n        Chart.defaults.plugins.tooltip.bodyColor = \"white\";\n        Chart.defaults.plugins.tooltip.footerColor = \"#A7DAE4\"; //primary-blue-200\n        Chart.defaults.plugins.tooltip.footerMarginTop = 0;\n        Chart.defaults.barThickness = 8;\n        Chart.defaults.borderRadius = 5;\n        Chart.defaults.borderSkipped = false;\n        Chart.defaults.elements.point.backgroundColor = '#7EDDD3';\n        Chart.defaults.elements.point.borderColor = '#7EDDD3';\n        Chart.defaults.elements.line.borderColor = '#7EDDD3';\n\n        //Bar Chart SCALES config\n        const vBarChartScales = {\n            y: {\n                grid: {\n                    display: false,\n                    borderColor: '#ffffff'\n                },\n                ticks: {\n                    display: false\n                }\n            },\n            x: {\n                grid: {\n                    borderColor: '#ffffff'\n                },\n                ticks: {\n                    callback: tickFormatter\n                }\n            }\n        }\n\n        //GENERAL - Line chart options\n        const lineChartoptions = {\n            plugins: {\n                tooltip: {\n                    callbacks: {\n                        label: dollarLabel\n                    },\n                    titleFont: {\n                        weight: 400,\n                    },\n                    bodyColor: Chart.defaults.plugins.tooltip.bodyColor, //primary-blue-200,\n                    bodySpacing: 0,\n                    bodyFont: {\n                        size: 14\n                    },\n                    footerFont: {\n                        size: 14\n                    }\n                }\n            },\n            scales : {\n                y: {\n                    grid: {\n                        display: false,\n                        borderColor: '#ffffff'\n                    },\n                    ticks: {\n                        callback: tickFormatter\n                    },\n                    beginAtZero: true\n                },\n                x: {\n                    grid: {\n                        display: false,\n                        borderColor: '#ffffff'\n                    }\n                }\n            }\n        }\n\n        //GENERAL - Vertical bar chart options\n        const verticalBarChartOptions = {\n            indexAxis: 'y',\n            maintainAspectRatio: false,\n            barThickness: Chart.defaults.barThickness,\n            borderRadius: Chart.defaults.borderRadius,\n            borderSkipped: false,\n            plugins : {\n                tooltip: {\n                    callbacks: {\n                        label: dollarLabel,\n                        footer: percentageValue\n                    },\n                    titleFont: {\n                        weight: 400,\n                    },\n                    bodyColor: Chart.defaults.plugins.tooltip.bodyColor, //primary-blue-200,\n                    bodySpacing: 0,\n                    bodyFont: {\n                        size: 14\n                    },\n                    footerFont: {\n                        size: 14\n                    }    \n                }\n            },\n            scales : vBarChartScales\n        }\n        //GENERAL - Doughnut chart options\n        const doughnutChartOptions = {\n            indexAxis: 'y',\n            plugins : {\n                tooltip: {\n                    callbacks: {\n                        title: function(context) {\n                            return context[0].label;\n                        },\n                        label: dollarLabel,\n                        footer: percentageValue\n                    },\n                    titleFont: {\n                        weight: 400,\n                    },\n                    bodyColor: Chart.defaults.plugins.tooltip.bodyColor, //primary-blue-200,\n                    bodySpacing: 0,\n                    bodyFont: {\n                        size: 14\n                    },\n                    footerFont: {\n                        size: 14\n                    }          \n                }\n            }        \n        }\n        \n        \n        //PORTFOLIO - Vertical bar chart options\n        const portfolioVerticalBarChartOptions = {\n            indexAxis: 'y',\n            maintainAspectRatio: false,\n            barThickness: Chart.defaults.barThickness,\n            borderRadius: Chart.defaults.borderRadius,\n            borderSkipped: false,\n            plugins : {\n                tooltip: {\n                    callbacks: {\n                        label: dollarLabel,\n                        footer: percentageOfPortfolio\n                    },\n                    titleColor: \"#fff\",\n                    titleFont: {\n                        weight: 400,\n                    },\n                    bodyColor: Chart.defaults.plugins.tooltip.bodyColor, //primary-blue-200,\n                    bodySpacing: 0,\n                    bodyFont: {\n                        size: 14\n                    },\n                    footerFont: {\n                        size: 14\n                    }           \n                }\n            },\n            scales : vBarChartScales\n        }\n        //PORTFOLIO - Doughnut chart options\n        const portfolioDoughnutChartOptions = {\n            indexAxis: 'y',\n            plugins : {\n                tooltip: {\n                    callbacks: {\n                        title: function(context) {\n                            return context[0].label;\n                        },\n                        label: dollarLabel,\n                        footer: percentageOfPortfolio\n                    },\n                    titleColor: \"#fff\",\n                    titleFont: {\n                        weight: 400,\n                    },\n                    bodyColor: Chart.defaults.plugins.tooltip.bodyColor, //primary-blue-200,\n                    bodySpacing: 0,\n                    bodyFont: {\n                        size: 14\n                    },\n                    footerFont: {\n                        size: 14\n                    }           \n                }\n            }        \n        }\n\n\n        //////////////////////////////////////////////////////\n        // CHARTS CONFIG\n        //////////////////////////////////////////////////////\n\n        //Dashboard Chart - Overall Holdings\n        if (ovhChart) {\n            const dataovhChart = {\n                labels: ['JUN 24','JUN 26','JUN 30','JUL 04','JUL 08','JUL 12','JUL 16','JUL 20',],\n                datasets: [{\n                data: [458789.54, 650780.68, 597098.34, 679512.87, 819855.09, 787008.45, 1123678.12, 1320507.09],\n                fill: true,\n                backgroundColor: chartLinearGradient(ovhChart),\n                }]\n            };\n            const ovh = new Chart(ovhChart,{\n                type: 'line',\n                data: dataovhChart,\n                options: lineChartoptions\n            });\n        }\n\n        //Dashboard Chart - Investments\n        if (investOvChart) {\n            const datainvestOvChart = {\n                labels: ['JUN 24','JUN 26','JUN 30','JUL 04','JUL 08','JUL 12','JUL 16','JUL 20'],\n                datasets: [{\n                data: [158789.54, 250780.68, 397098.34, 279512.87, 219855.09, 387008.45, 223678.12, 320507.09],\n                fill: true,\n                backgroundColor: chartLinearGradient(investOvChart)\n                }]\n            };\n            const investOv = new Chart(investOvChart,{\n                type: 'line',\n                data: datainvestOvChart,\n                options: lineChartoptions\n            });\n        }\n\n        //Dashboard Chart - Insurances\n        if (insOvChart) {\n            const datainsOvChart = {\n                labels: ['DEC 2020','MAR 2021','MAY 2021','JUL 2021',],\n                datasets: [{\n                data: [110566.34, 119607.34, 128907.22, 130907.09],\n                fill: true,\n                backgroundColor: chartLinearGradient(insOvChart)\n                }]\n            };\n            const insOv = new Chart(insOvChart,{\n                type: 'line',\n                data: datainsOvChart,\n                options: lineChartoptions\n            });\n        }\n\n        //Dashboard - Portfolio Breakdown\n        const datapbBarChart = {\n            labels: ['Registered Retirement Income fun (AGF)','Self-Directed Tax-Free Savings Account','Self-Directed Life Income Fund','Self Directed Open Plan','Self Directed Spousal RRIF','Self-Directed Life Income Fund'],\n            datasets: [{\n                data: [155908.08, 121087.21, 285445.32, 382300.71, 403882.44,114441.18],\n                fill: false,\n                backgroundColor: [\n                '#FC8667', //orange\n                '#45BFE2', //blue light\n                '#8565D5', //purple\n                '#7EDDD3', //teal\n                '#4E7AFC', //blue\n                '#FBE122', //yellow\n                ]\n            }]\n        };\n        if (pbBarChart) {\n            const pbBar = new Chart(pbBarChart,{\n                type: 'bar',\n                data: datapbBarChart,\n                options: portfolioVerticalBarChartOptions\n            });\n        }\n        //Dashboard - Portfolio Breakdown\n        if (pbPieChart) {\n            const pbPie = new Chart(pbPieChart,{\n                type: 'doughnut',\n                data: datapbBarChart,\n                options: portfolioDoughnutChartOptions\n            });\n        }\n\n         //Portfolio Overview Chart - Plan Overview\n         if (ppoChart) {\n            const datappoChart = {\n               labels: ['JUN 24','JUN 26','JUN 30','JUL 04','JUL 08','JUL 12','JUL 16','JUL 20',],\n               datasets: [{\n               data: [119789.54, 120789.54, 119789.54, 118789.54, 121789.54, 130789.54, 122789.54, 126450.09],\n               fill: true,\n               backgroundColor: chartLinearGradient(ppoChart)\n               }]\n           };\n            const ppo = new Chart(ppoChart,{\n                type: 'line',\n                data: datappoChart,\n                options: lineChartoptions\n            });\n        }\n         \n        //Portfolio Mutual Fund Returns Chart\n        if (mfrChart) {\n            const dataMfrChart = {\n               labels: ['2003','2007','2010','2013','2017','2019','2021'],\n               datasets: [{\n               data: [15890.54, 14890.54, 13890.54, 13560.54, 16890.54, 18890.54, 19890.54],\n               fill: true,\n               backgroundColor: chartLinearGradient(mfrChart)\n               }]\n           };\n            const ppo = new Chart(mfrChart,{\n                type: 'line',\n                data: dataMfrChart,\n                options: lineChartoptions\n            });\n        }\n\n        //Mutual Details Allocation Data\n        const datamfallocationChart = {\n            labels: ['Name of Asset Allocation', 'Name of Asset Allocation','Name of Asset Allocation','Name of Asset Allocation','Name of Asset Allocation','Name of Asset Allocation','Name of Asset Allocation','Name of Asset Allocation'],\n            datasets: [{\n                axis: 'y',\n                data: [2, 5, 21, 7, 8, 48, 4, 5],\n                fill: false,\n                backgroundColor: [\n                '#FC8667', //orange\n                '#45BFE2', //blue light\n                '#8565D5', //purple\n                '#7EDDD3', //teal\n                '#4E7AFC', //blue\n                '#FBE122', //yellow\n                '#d63384', //orange light\n                '#F8B73B' //pink\n                ]\n            }]\n        };\n        //Mutual Details Allocation - Bar Chart\n        if (mfallocationBarChart) {\n            const mfallocationBar = new Chart(mfallocationBarChart,{\n                type: 'bar',\n                data: datamfallocationChart,\n                options: {\n                    indexAxis: verticalBarChartOptions.indexAxis,\n                    maintainAspectRatio: false,\n                    barThickness: Chart.defaults.barThickness,\n                    borderRadius: Chart.defaults.borderRadius,\n                    borderSkipped: false,\n                    plugins : {\n                        tooltip: {\n                            callbacks: {\n                                label: percentageValue,\n                            },\n                            titleFont: {\n                                weight: 400,\n                            },\n                            bodyColor: Chart.defaults.plugins.tooltip.footerColor, //primary-blue-200\n                            bodySpacing: 0,\n                            bodyFont: {\n                                size: 14\n                            }\n                        }\n                    },\n                    scales : {\n                        y: verticalBarChartOptions.scales.y,\n                        x: {\n                            grid: verticalBarChartOptions.scales.x.grid,\n                            min: 0,\n                            max: 100,\n                            ticks: {\n                                callback: function(value) {\n                                    return value + \"%\";\n                                }\n                            }\n                        }\n                    }\n                }\n            });\n        }\n        //Mutual Details Allocation - Doughnut Chart\n        if (mfallocationPieChart) {\n            const mfallocationPie = new Chart(mfallocationPieChart,{\n                type: 'doughnut',\n                data: datamfallocationChart,\n                options: {\n                    indexAxis: doughnutChartOptions.indexAxis,\n                    plugins: {\n                        tooltip: {\n                            callbacks: {\n                                title: function(context) {\n                                    return context[0].label;\n                                },\n                                label: percentageValue\n                            },\n                            titleFont: {\n                                weight: 400,\n                            },\n                            bodyColor: Chart.defaults.plugins.tooltip.footerColor, //primary-blue-200\n                            bodySpacing: 0,\n                            bodyFont: {\n                                size: 14\n                            }\n                        }\n                    }\n                }\n            });\n        }\n\n        //Asset Allocation - Portfolio\n        const dataAaChart = {\n            labels: ['Cash and equivalents','Fixed income','Canadian income balanced','Canadian money market funds','Canadian neutral balanced','Global fixed income balanced', 'Global neutral balanced'],\n            datasets: [{\n                axis: 'y',\n                data: [5067.08, 54087.21, 49445.32, 7300.71, 33882.44, 56441.18, 67441.18],\n                fill: false,\n                backgroundColor: [\n                '#FC8667', //orange\n                '#45BFE2', //blue light\n                '#8565D5', //purple\n                '#7EDDD3', //teal\n                '#4E7AFC', //blue\n                '#FBE122', //yellow\n                '#d63384' //pink\n                ]\n            }]\n        };\n        //Asset Allocation - Bar Portfolio\n        if (aaBarChart) {\n            const aaBar = new Chart(aaBarChart,{\n                type: 'bar',\n                data: dataAaChart,\n                options: verticalBarChartOptions\n            });\n        }\n        //Asset Allocation - Pie Portfolio\n        if (aaPieChart) {\n            const aaPie = new Chart(aaPieChart,{\n                type: 'doughnut',\n                data: dataAaChart,\n                options: doughnutChartOptions\n            });\n        }\n    }\n}"],"file":"custom-charts.js"}