first commit

resources/js/views/charts/chartjs/ChartJsRadarChart.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { getRadarChartConfig } from '@core/libs/chartjs/chartjsConfig'
+import RadarChart from '@core/libs/chartjs/components/RadarChart'
+
+const vuetifyTheme = useTheme()
+const chartConfig = computed(() => getRadarChartConfig(vuetifyTheme.current.value))
+
+const chartData = {
+  labels: [
+    'STA',
+    'STR',
+    'AGI',
+    'VIT',
+    'CHA',
+    'INT',
+  ],
+  datasets: [
+    {
+      fill: true,
+      label: 'Donté Panlin',
+      borderColor: 'transparent',
+      backgroundColor: 'rgba(255,161,161, 0.9)',
+      data: [
+        25,
+        59,
+        90,
+        81,
+        60,
+        82,
+      ],
+      pointBorderColor: 'transparent',
+      pointBackgroundColor: 'transparent',
+    },
+    {
+      fill: true,
+      label: 'Mireska Sunbreeze',
+      borderColor: 'transparent',
+      backgroundColor: 'rgba(155,136,250, 0.9)',
+      data: [
+        40,
+        100,
+        40,
+        90,
+        40,
+        90,
+      ],
+      pointBorderColor: 'transparent',
+      pointBackgroundColor: 'transparent',
+    },
+  ],
+}
+</script>
+
+<template>
+  <RadarChart
+    :height="400"
+    :chart-data="chartData"
+    :chart-options="chartConfig"
+  />
+</template>