refactor: migrate to <script setup>

2024-04-29 13:51:42 +02:00
parent 86a084aa4f
commit 43745d958a
63 changed files with 1056 additions and 1754 deletions
@@ -1,49 +1,34 @@
-<template>
-  <CChartPolarArea :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartPolarArea } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartPolarAreaExample',
-  components: { CChartPolarArea },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: 'My First dataset',
-            backgroundColor: 'rgba(179,181,198,0.5)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(179,181,198,1)',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: 'My Second dataset',
-            backgroundColor: 'rgba(255,99,132,0.5)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(255,99,132,1)',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-        options: {
-          aspectRatio: 1.5,
-        },
-      }
+
+const data = {
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: 'rgba(179,181,198,0.5)',
+      pointBackgroundColor: 'rgba(179,181,198,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+      pointHoverBorderColor: 'rgba(179,181,198,1)',
+      data: [65, 59, 90, 81, 56, 55, 40],
    },
+    {
+      label: 'My Second dataset',
+      backgroundColor: 'rgba(255,99,132,0.5)',
+      pointBackgroundColor: 'rgba(255,99,132,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+      pointHoverBorderColor: 'rgba(255,99,132,1)',
+      data: [28, 48, 40, 19, 96, 27, 100],
+    },
+  ],
+  options: {
+    aspectRatio: 1.5,
  },
 }
 </script>
+
+<template>
+  <CChartPolarArea :data="data" />
+</template>