![]() Server : LiteSpeed System : Linux premium84.web-hosting.com 4.18.0-553.44.1.lve.el8.x86_64 #1 SMP Thu Mar 13 14:29:12 UTC 2025 x86_64 User : claqxcrl ( 523) PHP Version : 8.1.32 Disable Function : NONE Directory : /home/claqxcrl/www/js/ |
/** - This is jQuery plugin declaration for usage percentage graph - @html: ./html-component/player_stats.html - @deps: jQuery, Chartist.js - @using: ./js/main.js - @author torbara (https://themeforest.net/user/torbara) - */ (function ($, Chartist) { "use strict"; $.fn.animatedonut = function (labels, series, donut, showLabel) { var $el = $(this); if ($el.length === 0) { throw new Error('animatedonut: target element not found'); } var id = $el.attr('id'); $(this).on('visible', function () { var chart = Chartist.Pie('#' + id, { labels: labels, series: series, }, { donut: donut === undefined ? true : donut, showLabel: showLabel === undefined ? true : showLabel }); chart.on('draw', function (data) { if (data.type === 'slice') { // Get the total path length in order to use for dash array animation var pathLength = data.element._node.getTotalLength(); // Set a dasharray that matches the path length as prerequisite to animate dashoffset data.element.attr({ 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px' }); // Create animation definition while also assigning an ID to the animation for later sync usage var animationDefinition = { 'stroke-dashoffset': { id: 'anim' + data.index, dur: 1000, from: -pathLength + 'px', to: '0px', easing: Chartist.Svg.Easing.easeOutQuint, // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible) fill: 'freeze' } }; // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation if (data.index !== 0) { animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end'; } // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us data.element.attr({ 'stroke-dashoffset': -pathLength + 'px' }); // We can't use guided mode as the animations need to rely on setting begin manually // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate data.element.animate(animationDefinition, false); } }); // For the sake of the example we update the chart every time it's created with a delay of 8 seconds chart.on('created', function () { if (window.__anim21278907124) { clearTimeout(window.__anim21278907124); window.__anim21278907124 = null; } // window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000); }); }); $(this).showVisible(); }; })(jQuery, Chartist);