https://www.dutchlady.com.my/wp-content/plugins/dl-elementor-widge…l-custom-circle-chart.js?ver=1.0.1790340672

1(function ($) {
2    function runAnimateOnScrollCircleChart($scope) {
3      const data = window.dlRadialChartData;
4      if (!data) return;
5  
6      const svgSize = 300;
7      const centerX = svgSize / 2;
8      const centerY = svgSize / 2;
9      const outerRadius = 100;
10      const strokeWidth = 24;
11      const gapValue = 8;
12      const innerRadius = outerRadius - strokeWidth - gapValue;
13  
14      const percentLatest = data.percentLatest;
15      const percentPast = data.percentPast;
16  
17      const arcLatest = document.getElementById('arcLatestY');
18      const arcPast = document.getElementById('arcPastY');
19      const bgPast = document.getElementById('bgPastY');
20      const pathPast = document.getElementById('pathPastY');
21      const label = document.getElementById('percentageLabel');
22  
23      arcPast.setAttribute('r', innerRadius);
24      bgPast.setAttribute('r', innerRadius);
25      pathPast.setAttribute('d', `M${centerX},${centerY - innerRadius} a${innerRadius},${innerRadius} 0 1,1 -0.1,0`);
26  
27      const circumferenceLatest = 2 * Math.PI * outerRadius;
28      const circumferencePast = 2 * Math.PI * innerRadius;
29  
30      arcPast.setAttribute('stroke-dasharray', circumferencePast.toFixed(1));
31      arcPast.setAttribute('stroke-dashoffset', circumferencePast.toFixed(1));
32      arcLatest.setAttribute('stroke-dasharray', circumferenceLatest.toFixed(1));
33      arcLatest.setAttribute('stroke-dashoffset', circumferenceLatest.toFixed(1));
34  
35      const wrapper = $scope.find('.dlCircleChartContainer')[0];
36      if (!wrapper) return;
37  
38      const observer = new IntersectionObserver(entries => {
39        if (entries[0].isIntersecting) {
40          const delay = parseInt(wrapper.dataset.delay || '0');
41          setTimeout(() => {
42            arcPast.style.transition = "stroke-dashoffset 1.5s ease";
43            arcPast.style.strokeDashoffset = circumferencePast * (1 - percentPast / 100) + 25;
44
45            setTimeout(() => {
46              arcLatest.style.transition = "stroke-dashoffset 1.5s ease";
47              arcLatest.style.strokeDashoffset = circumferenceLatest * (1 - percentLatest / 100) + 25;
48            }, 1500);
49
50            setTimeout(() => {
51              label.classList.add("show");
52            }, 3000);
53          }, delay);
54  
55          wrapper.classList.add('chartReady');
56          observer.unobserve(wrapper);
57        }
58      }, { threshold: 0.5 });
59  
60      observer.observe(wrapper);
61  
62      // Tick labels
63      const labelGroup = document.getElementById("dlCircleChartTickLabels");
64      const svgNS = "http://www.w3.org/2000/svg";
65      const radiusForLabels = outerRadius + 28;
66      const tickAngles = [0, 72, 144, 216, 288];
67      const tickValues = [0, 20, 40, 60, 80];
68  

69      tickAngles.forEach((angleDeg, i) => {
70        const angleRad = (angleDeg - 90) * Math.PI / 180;
71        const x = centerX + radiusForLabels * Math.cos(angleRad);
72        const y = centerY + radiusForLabels * Math.sin(angleRad);
73  
74        const label = document.createElementNS(svgNS, "text");
75        label.setAttribute("x", x.toFixed(1));
76        label.setAttribute("y", y.toFixed(1));
77        label.setAttribute("text-anchor", "middle");
78        label.setAttribute("alignment-baseline", "middle");
79        label.setAttribute("transform", `rotate(${angleDeg} ${x.toFixed(1)} ${y.toFixed(1)})`);
80        label.setAttribute("class", "dlCircleChartTickLabel");
81        label.textContent = `${tickValues[i]}`;
82        labelGroup.appendChild(label);
83      });
84    }
85  
86    $(window).on('elementor/frontend/init', function () {
87      elementorFrontend.hooks.addAction('frontend/element_ready/dl-custom-circle-chart.default', function ($scope) {
88        runAnimateOnScrollCircleChart($scope);
89      });
90    });
91  })(jQuery);
92