- vue composition api (#91)

* wip

* fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

resources/js/Shared/VacationChart.vue

@@ -6,17 +6,13 @@
   />
 </template>
 
-<script>
+<script setup>
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components'
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import VChart from 'vue-echarts'
-import {computed} from 'vue'
+import { computed } from 'vue'
 
 use([
   CanvasRenderer,
@@ -26,68 +22,59 @@ use([
   LegendComponent,
 ])
 
-export default {
-  name: 'VacationChart',
-  components: {
-    VChart,
+const props = defineProps({
+  stats: {
+    type: Object,
+    default: () => ({
+      used: 0,
+      pending: 0,
+      remaining: 0,
+    }),
   },
-  props: {
-    stats: {
-      type: Object,
-      default: () => ({
-        used: 0,
-        pending: 0,
-        remaining: 0,
-      }),
-    },
-  },
-  setup(props) {
-    const option = computed(() => ({
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)',
-      },
-      color: [
-        '#2C466F',
-        '#AABDDD',
-        '#527ABA',
-      ],
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-        data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
-      },
-      series: [
-        {
-          name: 'Urlop wypoczynkowy',
-          type: 'pie',
-          itemStyle: {
-            borderRadius: 10,
-            borderColor: '#fff',
-            borderWidth: 2,
-          },
-          label: {
-            show: true,
-            position: 'inner',
-            formatter: param => param.value !== 0 ? param.value : '' ,
-            fontWeight: 'bold',
-            fontSize: 16,
-            color: '#FFFFFF',
-            labelLine: {
-              show: false,
-            },
-          },
-          data: [
-            { value: props.stats.used, name: 'Wykorzystane' },
-            { value: props.stats.pending, name: 'Rozpatrywane' },
-            { value: props.stats.remaining, name: 'Pozostałe' },
-          ],
-          radius: ['30%', '70%'],
-        },
-      ],
-    }))
+})
 
-    return { option }
+const option = computed(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
   },
-}
+  color: [
+    '#2C466F',
+    '#AABDDD',
+    '#527ABA',
+  ],
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
+  },
+  series: [
+    {
+      name: 'Urlop wypoczynkowy',
+      type: 'pie',
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2,
+      },
+      label: {
+        show: true,
+        position: 'inner',
+        formatter: param => param.value !== 0 ? param.value : '' ,
+        fontWeight: 'bold',
+        fontSize: 16,
+        color: '#FFFFFF',
+        labelLine: {
+          show: false,
+        },
+      },
+      data: [
+        { value: props.stats.used, name: 'Wykorzystane' },
+        { value: props.stats.pending, name: 'Rozpatrywane' },
+        { value: props.stats.remaining, name: 'Pozostałe' },
+      ],
+      radius: ['30%', '70%'],
+    },
+  ],
+}))
 </script>