refactor: refactor demo

src/demo/data/radar.ts

@@ -0,0 +1,90 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useScoreStore = defineStore("store", () => {
+  const scores = ref([
+    { name: "Attack", max: 20, value: 19 },
+    { name: "Defense", max: 20, value: 9 },
+    { name: "Speed", max: 20, value: 18 },
+    { name: "Strength", max: 20, value: 16 },
+    { name: "Endurance", max: 20, value: 16 },
+    { name: "Agility", max: 20, value: 20 }
+  ]);
+
+  const metrics = computed(() => {
+    return scores.value.map(({ name }) => name);
+  });
+
+  const scoreRadar = computed(() => {
+    return {
+      title: {
+        text: "Player Ability"
+      },
+      textStyle: {
+        fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+        fontWeight: 300
+      },
+      radar: {
+        indicator: scores.value.map(({ name, max }) => {
+          return { name, max };
+        })
+      },
+      series: [
+        {
+          name: "Value",
+          type: "radar",
+          data: [{ value: scores.value.map(({ value }) => value) }]
+        }
+      ]
+    };
+  });
+
+  function getRadarData(activeIndex: number) {
+    return {
+      animation: false,
+      title: {
+        text: "Player Ability"
+      },
+      tooltip: {},
+      radar: {
+        indicator: scores.value.map(({ name, max }, index) => {
+          if (index === activeIndex) {
+            return { name, max, color: "goldenrod" };
+          }
+          return { name, max };
+        })
+      },
+      series: [
+        {
+          name: "Value",
+          type: "radar",
+          data: [{ value: scores.value.map(({ value }) => value) }]
+        }
+      ]
+    };
+  }
+
+  function increase(index: number, amount: number) {
+    const metric = scores.value[index];
+    metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
+  }
+
+  function isMax(index: number) {
+    const { value, max } = scores.value[index];
+    return value === max;
+  }
+
+  function isMin(index: number) {
+    return scores.value[index].value === 0;
+  }
+
+  return {
+    scores,
+    metrics,
+    scoreRadar,
+    getRadarData,
+    increase,
+    isMax,
+    isMin
+  };
+});