<commit_before>// # Use

// <vue-radial-progress-bar :total-steps="10" :completed-steps="5"><h4>Inner content</h4></vue-radial-progress-bar>

// # Props

// Name | Default value | Description
// ---|:---:|---
// `diameter` | `200` | Diameter of the progress bar circle in pixels.
// `totalSteps` | `10` | Total number of steps to complete progress bar.
// `completedSteps` | `0` | Number of completed steps in the progress bar.
// `startColor` | `#bbff42` | The color of the leading edge of the progress bar gradient.
// `stopColor` | `#429321` | The secondary color of the progress bar gradient.
// `innerStrokeColor` | `#323232` | Background color of the progress bar.
// `strokeWidth` | `10` | The width of the progress bar.
// `animateSpeed` | `1000` | The amount of time in milliseconds to animate one step.
// `fps` | `60` | The frames per second that the animation should run.
// `timingFunc` | `linear` | The transition timing function to use for the CSS transition. See [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function).


(function(){
  "use strict"
  
  App.register('component').enter(function(){
    var template = '<div class="vue-radial-progress-bar-container" :style="containerStyle">\
                      <div class="vue-radial-progress-bar-inner" :style="innerCircleStyle">\
                        <slot></slot>\
                      </div>\
                      <svg class="vue-radial-progress-bar-bar"\
                           :width="diameter"\
                           :height="diameter"\
                           version="1.1"\
                           xmlns="http://www.w3.org/2000/svg">\
                        <defs>\
                          <radialGradient :id="\'radial-gradient\' + _uid"\
                                          :fx="gradient.fx"\
                                          :fy="gradient.fy"\
                                          :cx="gradient.cx"\
                                          :cy="gradient.cy"\
                                          :r="gradient.r">\
                            <stop class="vue-radial-progress-bar-start-color" offset="30%"/>\
                            <stop class="vue-radial-progress-bar-stop-color" offset="100%"/>\
                          </radialGradient>\
                        </defs>\
                        <circle class="vue-radial-progress-bar-circle" :r="innerCircleRadius"\
                                :cx="radius"\
                                :cy="radius"\
                                fill="transparent"\
                                :stroke-dasharray="circumference"\
                                stroke-dashoffset="0"\
                                stroke-linecap="round"\
                                :style="strokeStyle"></circle>\
                        <circle :transform="\'rotate(270, \' + radius + \',\' + radius + \')\'"\
                                :r="innerCircleRadius"\
                                :cx="radius"\
                                :cy="radius"\
                                fill="transparent"\
                                :stroke="\'url(#radial-gradient\' + _uid + \')\'"\
                                :stroke-dasharray="circumference"\
                                :stroke-dashoffset="circumference"\
                                stroke-linecap="round"\
                                :style="progressStyle"></circle>\
                      </svg>\
                    </div>';
    
     Vue.component('vue-radial-progress-bar', {
      template: template,
      props: {
        diameter: {
          type: Number,
          required: false,
          default: 200
        },
        totalSteps: {
          type: Number,
          required: true,
          default: 10
        },
        completedSteps: {
          type: Number,
          required: true,
          default: 0
        },
        strokeWidth: {
          type: Number,
          required: false,
          default: 10
        },
        animateSpeed: {
          type: Number,
          required: false,
          default: 1000
        },
        fps: {
          type: Number,
          required: false,
          default: 60
        },
        timingFunc: {
          type: String,
          required: false,
          default: 'linear'
        }
      },
      data: function() {
        return {
          gradient: {
            fx: 0.99,
            fy: 0.5,
            cx: 0.5,
            cy: 0.5,
            r: 0.65
          },
          gradientAnimation: null,
          currentAngle: 0,
          strokeDashoffset: 0
        }
      },
      computed: {
        radius: function() {
          return this.diameter / 2
        },
        circumference: function() {
          return Math.PI * this.innerCircleDiameter
        },
        stepSize: function() {
          if (this.totalSteps === 0) {
            return 0
          }
          return 100 / this.totalSteps
        },
        finishedPercentage: function() {<commit_msg>Update radial_progress_bar.js<commit_after>// # Use

// <vue-radial-progress-bar :total-steps="10" :completed-steps="5"><h4>Inner content</h4></vue-radial-progress-bar>

// # Props

// Name | Default value | Description
// ---|:---:|---
// `diameter` | `200` | Diameter of the progress bar circle in pixels.
// `totalSteps` | `10` | Total number of steps to complete progress bar.
// `completedSteps` | `0` | Number of completed steps in the progress bar.
// `startColor` | `#bbff42` | The color of the leading edge of the progress bar gradient.
// `stopColor` | `#429321` | The secondary color of the progress bar gradient.
// `innerStrokeColor` | `#323232` | Background color of the progress bar.
// `strokeWidth` | `10` | The width of the progress bar.
// `animateSpeed` | `1000` | The amount of time in milliseconds to animate one step.
// `fps` | `60` | The frames per second that the animation should run.
// `timingFunc` | `linear` | The transition timing function to use for the CSS transition. See [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function).


(function(){
  "use strict"
  
  App.register('component').enter(function(){
    var template = '<div class="vue-radial-progress-bar-container" :class="[over ? \'vue-radial-progress-bar-over\' : \'\', complete ? \'vue-radial-progress-bar-complete\' : \'\']" :style="containerStyle">\
                      <div class="vue-radial-progress-bar-inner" :style="innerCircleStyle">\
                        <slot></slot>\
                      </div>\
                      <svg class="vue-radial-progress-bar-bar"\
                           :width="diameter"\
                           :height="diameter"\
                           version="1.1"\
                           xmlns="http://www.w3.org/2000/svg">\
                        <defs>\
                          <radialGradient :id="\'radial-gradient\' + _uid"\
                                          :fx="gradient.fx"\
                                          :fy="gradient.fy"\
                                          :cx="gradient.cx"\
                                          :cy="gradient.cy"\
                                          :r="gradient.r">\
                            <stop class="vue-radial-progress-bar-start-color" offset="30%"/>\
                            <stop class="vue-radial-progress-bar-stop-color" offset="100%"/>\
                          </radialGradient>\
                        </defs>\
                        <circle class="vue-radial-progress-bar-circle" :r="innerCircleRadius"\
                                :cx="radius"\
                                :cy="radius"\
                                fill="transparent"\
                                :stroke-dasharray="circumference"\
                                stroke-dashoffset="0"\
                                stroke-linecap="round"\
                                :style="strokeStyle"></circle>\
                        <circle :transform="\'rotate(270, \' + radius + \',\' + radius + \')\'"\
                                :r="innerCircleRadius"\
                                :cx="radius"\
                                :cy="radius"\
                                fill="transparent"\
                                :stroke="\'url(#radial-gradient\' + _uid + \')\'"\
                                :stroke-dasharray="circumference"\
                                :stroke-dashoffset="circumference"\
                                stroke-linecap="round"\
                                :style="progressStyle"></circle>\
                      </svg>\
                    </div>';
    
     Vue.component('vue-radial-progress-bar', {
      template: template,
      props: {
        diameter: {
          type: Number,
          required: false,
          default: 200
        },
        totalSteps: {
          type: Number,
          required: true,
          default: 10
        },
        completedSteps: {
          type: Number,
          required: true,
          default: 0
        },
        strokeWidth: {
          type: Number,
          required: false,
          default: 10
        },
        animateSpeed: {
          type: Number,
          required: false,
          default: 1000
        },
        fps: {
          type: Number,
          required: false,
          default: 60
        },
        timingFunc: {
          type: String,
          required: false,
          default: 'linear'
        }
      },
      data: function() {
        return {
          gradient: {
            fx: 0.99,
            fy: 0.5,
            cx: 0.5,
            cy: 0.5,
            r: 0.65
          },
          gradientAnimation: null,
          currentAngle: 0,
          strokeDashoffset: 0
        }
      },
      computed: {
        over: function() {
          if (this.completedSteps > this.totalSteps) {
           return true; 
          }
          
          return false;
        },
        complete: function() {
          if (this.completedSteps === this.totalSteps) {
           return true; 
          }
          
          return false;
        },
        radius: function() {
          return this.diameter / 2
        },
        circumference: function() {
          return Math.PI * this.innerCircleDiameter
        },
        stepSize: function() {
          if (this.totalSteps === 0) {
            return 0
          }
          return 100 / this.totalSteps
        },
        finishedPercentage: function() {
{'fraction_non_alphanumeric': 0.12827274439630815, 'fraction_numerical': 0.015633829346392916, 'mean_word_length': 1.1622887395642436, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 48, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 20, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3873027', 'n_tokens_mistral': 2859, 'n_tokens_neox': 2639, 'n_words': 575}