Add ability to show a negative percentage

README.md

@@ -83,7 +83,8 @@ Follwing `props` are used while initialization
 | start-angle | Number | Initial angle (for `0` value) <br> Default: `-Math.PI` |
 | insert-mode | String | Canvas insertion mode: append or prepend it into the parent element <br> Default: `"prepend"` |
 | thickness | Number | Width of the arc. By default it's automatically calculated as 1/14 of `size` but you may set your own number <br> Default: `"auto"` |
-| show-percent | Boolean | Show loaded percentage inside circle. If `inner-text` property is set then percentage will not be shown. <br> Default : `true`|
+| show-percent | Boolean | Show loaded percentage inside circle. If `inner-text` property is set then percentage will not be shown. <br> Default : `true`
+| show-negative-percent | Boolean | Show loaded percentage inside circle as a negative number. When used with `reverse` set to `true` and a positive  number for `progress` the progress will fill in reverse and show as a negative percentage. <br> Default : `false`|
 ---
 
 ## Events

src/App.vue

@@ -23,6 +23,31 @@
         <p style="margin-top:0;font-size:12px;">Slot!</p>
       </vue-circle>
       <button @click="redraw">Redraw</button>
+
+    <p>
+      Negative Percentage Example!
+    </p>
+      <vue-circle
+        ref="myprogressNegative"
+        :progress="p"
+        :size="100"
+        :reverse="true"
+        line-cap="round"
+        :fill="fill"
+        empty-fill="rgba(0, 0, 0, .1)"
+        :animation-start-value="0.0"
+        :start-angle="0"
+        insert-mode="append"
+        :animation="{ duration: 1200, easing: 'easeOutBounce' }"
+        :thickness="5"
+        :show-percent="true"
+        :show-negative-percent="true"
+        @vue-circle-progress="progress"
+        @vue-circle-end="progress_end"
+        >
+        <p style="margin-top:0;font-size:12px;">Slot!</p>
+      </vue-circle>
+      <button @click="redrawNegative">Redraw</button>
   </div>
 </template>
 
@@ -50,6 +75,9 @@
       },
       redraw(){
         this.$refs.myprogress.updateProgress(60);
+      },
+      redrawNegative(){
+        this.$refs.myprogressNegative.updateProgress(60);
       }
     }
   }

src/index.vue

@@ -79,6 +79,10 @@ export default {
     showLegend:{
       type : Boolean,
       default : true
+    },    
+    showNegativePercent:{
+      type : Boolean,
+      default : false
     },
   },
   mounted(){
@@ -113,7 +117,9 @@ export default {
     function renderCircleBody(self, value){
       value = !!value ? value : vm.progress;
       if (!vm.showLegend){ return }
-      else if (vm.showLegend && vm.showPercent) {
+      else if (vm.showLegend && vm.showPercent && vm.showNegativePercent) {
+        $(self).find('span.legend-text').html("-"+Math.floor(value*vm.scale)+"%");
+      } else if (vm.showLegend && vm.showPercent) {
         $(self).find('span.legend-text').html(Math.floor(value*vm.scale)+"%");
       } else if (vm.showLegend && !vm.showPercent) {
         $(self).find('span.legend-text').html((value*vm.scale).toFixed(vm.precision));