progresscircle.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. function makesvg(percentage, inner_text){
  2. var array = inner_text.split("/");
  3. var abs_percentage = Math.abs(percentage).toString();
  4. var percentage_str = percentage.toString();
  5. var classes = ""
  6. if(percentage < 0){
  7. classes = "danger-stroke circle-chart__circle--negative";
  8. } else if(percentage > 0 && percentage <= 30){
  9. classes = "warning-stroke";
  10. } else{
  11. classes = "success-stroke";
  12. }
  13. var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" xmlns="http://www.w3.org/2000/svg">'
  14. + '<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9" />'
  15. + '<circle class="circle-chart__circle '+classes+'"'
  16. + 'stroke-dasharray="'+ abs_percentage+',100" cx="16.9" cy="16.9" r="15.9" />'
  17. + '<g class="circle-chart__info">'
  18. + ' <text class="circle-chart__percent" x="17.9" y="13.5">'+array[0]+'</text>';
  19. if(array[1]){
  20. svg += '<text class="circle-chart__subline" x="17.9" y="22">'+array[1]+'</text>'
  21. }
  22. svg += ' </g></svg>';
  23. return svg
  24. }
  25. (function( $ ) {
  26. $.fn.circlechart = function() {
  27. this.each(function() {
  28. var percentage = $(this).data("percentage");
  29. var inner_text = $(this).text();
  30. $(this).html(makesvg(percentage, inner_text));
  31. });
  32. return this;
  33. };
  34. }( jQuery ));