feat: revamp demo

demo/data/radar.ts

@@ -1,8 +1,16 @@
 import { ref, computed } from "vue";
 import { defineStore } from "pinia";
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
+
+interface Score {
+  name: string;
+  max: number;
+  value: number;
+}
 
 export const useScoreStore = defineStore("store", () => {
-  const scores = ref([
+  const scores = ref<Score[]>([
     { name: "Attack", max: 20, value: 19 },
     { name: "Defense", max: 20, value: 9 },
     { name: "Speed", max: 20, value: 18 },
@@ -11,29 +19,23 @@ export const useScoreStore = defineStore("store", () => {
     { name: "Agility", max: 20, value: 20 },
   ]);
 
-  const metrics = computed(() => {
-    return scores.value.map(({ name }) => name);
-  });
+  const metrics = computed(() => scores.value.map(({ name }) => name));
 
-  function getRadarData(activeIndex: number) {
-    return {
+  function getRadarData(activeIndex: number): Option {
+    const option = {
       title: {
         text: "Player Ability",
         top: "5%",
         left: "5%",
       },
-      textStyle: {
-        fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-        fontWeight: 300,
-      },
+      textStyle: { ...DEMO_TEXT_STYLE },
       radar: {
         splitNumber: 4,
-        indicator: scores.value.map(({ name, max }, index) => {
-          if (index === activeIndex) {
-            return { name, max, color: "goldenrod" };
-          }
-          return { name, max };
-        }),
+        indicator: scores.value.map(({ name, max }, index) =>
+          index === activeIndex
+            ? { name, max, color: "goldenrod" }
+            : { name, max },
+        ),
       },
       series: [
         {
@@ -42,21 +44,28 @@ export const useScoreStore = defineStore("store", () => {
           data: [{ value: scores.value.map(({ value }) => value) }],
         },
       ],
-    };
+    } satisfies Option;
+
+    return option;
   }
 
-  function increase(index: number, amount: number) {
+  function increase(index: number, amount: number): void {
     const metric = scores.value[index];
-    metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
+    if (!metric) {
+      return;
+    }
+    const next = Math.max(Math.min(metric.value + amount, metric.max), 0);
+    metric.value = next;
   }
 
-  function isMax(index: number) {
-    const { value, max } = scores.value[index];
-    return value === max;
+  function isMax(index: number): boolean {
+    const metric = scores.value[index];
+    return metric ? metric.value === metric.max : false;
   }
 
-  function isMin(index: number) {
-    return scores.value[index].value === 0;
+  function isMin(index: number): boolean {
+    const metric = scores.value[index];
+    return metric ? metric.value === 0 : false;
   }
 
   return {