[ONL-6708] - Migrate donut component (#1291)

* ONL-6708 - Migrate donut component

* changed radius to reactive param.

* edited radius const

* renamed const

* removed .vm test

* updated the version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-donut/ec-donut.spec.js

@@ -54,15 +54,6 @@ describe('EcDonut', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('should get the correct computed properties', () => {
-    const wrapper = mountDonut();
-    const circumference = 2 * Math.PI * wrapper.vm.radius;
-    expect(wrapper.vm.percentageUsed).toBe(20);
-    const offset = circumference * (1 - wrapper.vm.percentageUsed / 100);
-    expect(wrapper.vm.dashArray).toBe(circumference);
-    expect(wrapper.vm.dashOffset).toBe(offset);
-  });
-
   it('should render slots as expected', () => {
     const wrapper = mountDonut({}, {
       slots: {

src/components/ec-donut/ec-donut.vue

@@ -17,29 +17,29 @@
           class="ec-donut__background"
           cx="54"
           cy="54"
-          :r="radius"
+          :r="RADIUS"
           fill="transparent"
           stroke-width="11"
         />
         <circle
           class="ec-donut__remaining"
           cx="54"
           cy="54"
-          :r="radius"
+          :r="RADIUS"
           fill="transparent"
           stroke-width="11"
-          :stroke-dasharray="dashArray"
+          :stroke-dasharray="circumference"
           :stroke-dashoffset="0"
         />
         <circle
           class="ec-donut__used"
           cx="54"
           cy="54"
-          :r="radius"
+          :r="RADIUS"
           fill="transparent"
           stroke-width="11"
-          :stroke-dasharray="dashArray"
-          :stroke-dashoffset="dashOffset"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="usedArcLength"
         />
       </svg>
     </div>
@@ -73,47 +73,36 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
+
 import EcIcon from '../ec-icon';
 
-export default {
-  name: 'EcDonut',
-  components: { EcIcon },
-  props: {
-    amount: {
-      type: Number,
-      required: true,
-    },
-    used: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      radius: 48,
-    };
+const props = defineProps({
+  amount: {
+    type: Number,
+    required: true,
   },
-  computed: {
-    percentageUsed() {
-      if (this.used > this.amount) {
-        return 100;
-      }
-      if (this.used <= 0) {
-        return 0;
-      }
-      return (this.used / this.amount) * 100;
-    },
-    // Calculate the circumference
-    dashArray() {
-      return 2 * Math.PI * this.radius;
-    },
-    // Calculate the how much needs to be offset of the used circle
-    dashOffset() {
-      return this.dashArray * (1 - this.percentageUsed / 100);
-    },
+  used: {
+    type: Number,
+    required: true,
   },
-};
+});
+
+const RADIUS = 48;
+
+const percentageUsed = computed(() => {
+  if (props.used > props.amount) {
+    return 100;
+  }
+  if (props.used <= 0) {
+    return 0;
+  }
+  return (props.used / props.amount) * 100;
+});
+
+const circumference = computed(() => 2 * Math.PI * RADIUS);
+const usedArcLength = computed(() => circumference.value * (1 - percentageUsed.value / 100));
 </script>
 
 <style>