https://projects.banquemondiale.org/etc.clientlibs/worldbankgroup/…/lendingChartsV2/clientlibs/site.js

1$(document).ready(function(){
2    const locale = lendingChartsLocale;
3    const apiUrl = lendingChartsApiUrl;
4    const key = lendingChartsKey;
5    var flag = false;
6    /*$(window).scroll(function() {
7        var hT = $('#lending-charts').offset().top,
8        hH = $('#lending-charts').outerHeight(),
9        wH = $(window).height(),
10        wS = $(this).scrollTop();
11        if (wS > (hT+hH-wH) && !flag){
12            flag = true;
13            $.ajax({
14                method: 'GET',
15                url: apiUrl,
16                headers: {
17                    "apikey": key
18                },       
19                    
20            }).done(function(data) {
21                prepareChart(data);
22            });
23        }
24    });
25    $(document).ajaxSend(function(){
26        
27    })
28    */
29
30
31	var targetEvents = document.querySelector('#lending-charts');
32	var observerEvents = new IntersectionObserver(handleIntersection, optionsEvents);
33	observerEvents.observe(targetEvents);
34
35    var libraryImported = false;
36	var optionsEvents = {};
37	function handleIntersection(entries) {
38		entries.map((entry) => {
39		  if (entry.isIntersecting) {
40			var innerContent = document.getElementById(entry.target.id).innerHTML;
41			if(!libraryImported){
42				GetData(entry.target.id);
43				libraryImported = true;
44			}
45		  }
46		});
47	}
48
49   function GetData(type) {
50
51    		$.ajax({
52                method: 'GET',
53                url: apiUrl,
54                headers: {
55                    "apikey": key
56                },       
57                    
58            }).done(function(data) {
59                prepareChart(data);
60            });
61    }
62
63
64        function prepareChart(data){
65        var projectYears = data.response.projectYear;
66        projectYears.sort(function (a,b){
67            return a.Year.localeCompare(b.Year);
68        })
69            //projectYears.sort((a, b) => a.Year.localeCompare(b.Year));
70            var outPutData = [];
71        projectYears.forEach(function(projectYear){
72            return outPutData.push([+projectYear.Year, +projectYear.CmtAmt])
73        });
74        /*projectYears.forEach(projectYear => {
75        outPutData.push([+projectYear.Year, +projectYear.CmtAmt])                
76        }); */
77        console.log("outPutData",outPutData);
78        if(outPutData.length>0){
79            var start = outPutData[0][0], end = outPutData[outPutData.length - 1][0]; 
80            console.log(start);
81            console.log(end);
82            var tickInterval = Math.floor((end - start)/6); 
83            console.log(tickInterval);   
84            var chartTitle = LENDING_INDICATORS[locale].chartTitle;
85            var xtitle = LENDING_INDICATORS[locale].xtitle;
86            var ytitle = LENDING_INDICATORS[locale].ytitle;
87            var pointFormat = LENDING_INDICATORS[locale].pointFormat;
88            
89            Highcharts.chart('lending-charts', {
90                title: { 
91                    text: chartTitle,
92                    align: 'left',
93                    x: 30,
94                    style: {
95                        color: '#333',
96                        fontWeight: 'bold',
97                        fontSize: "16px"
98                    },
99                        useHTML: true
100                },           
101                    xAxis: {    
102                        title: { text: xtitle },   
103                            lineWidth: 1.5,            
104                        lineColor: '#445565',
105                        tickInterval: tickInterval                
106                    },
107                        yAxis: {                                
108                            title: { text: ytitle },
109                                lineWidth: 1,
110                            labels: {
111                                enabled: false
112                            }                
113                        },
114                        legend: { enabled: false },
115                        tooltip: {
116                            headerFormat: '',
117                            pointFormat: pointFormat,
118                            useHTML: true
119                        },
120                        series: [{
121                            type: 'column',                
122                            data: outPutData,
123                            color: '#445565'                
124                        }],
125                        credits: {
126                            text: ''
127                        }                                            
128                    });
129             }
130
131        }
132
133    });