refac: legend usage in code

Author: setaman

src/components/VueEllipseProgress.vue

@@ -11,11 +11,11 @@
       <div class="ep-legend--container" :style="{ maxWidth: `${size}px` }">
         <div
           class="ep-legend--value"
-          v-if="legend && !isMultiple"
+          v-if="!hideLegend && !isMultiple"
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
           :style="{ fontSize, color: fontColor }"
         >
-          <counter :value="legendVal" :animation="normalizedCircles[0].animation" :loading="loading">
+          <counter :value="computedLegend" :animation="normalizedCircles[0].animation" :loading="loading">
             <template v-slot:default="{ counterTick }">
               <span v-if="legendFormatter">
                 <span v-if="isHTML" v-html="legendFormatter(counterTick)"></span>
@@ -49,11 +49,11 @@ export default {
     counterTick: {},
   }),
   computed: {
-    legendVal() {
+    computedLegend() {
       if (this.loading || this.noData) {
         return 0;
       }
-      return this.legendValue ? this.legendValue : getNumberIfValid(this.progress) || 0;
+      return this.legend ? this.legend : getNumberIfValid(this.progress) || 0;
     },
     shouldHideLegendValue() {
       return !this.isDataAvailable || this.loading;

src/components/interface.js

@@ -95,7 +95,7 @@ const options = {
   hideLegend: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   legendClass: {
     type: String,

tests/unit/container.spec.js

@@ -69,7 +69,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
     it("replaces the progress as the legend of the circle", () => {
       const legendValue = 324;
       wrapper.setProps({ legendValue });
-      expect(wrapper.vm.legendVal).to.equal(legendValue);
+      expect(wrapper.vm.computedLegend).to.equal(legendValue);
       expect(wrapper.vm.progress).to.equal(progress);
     });
   });