chore: add pinia + radar demo

src/demo/Demo.vue

@@ -165,8 +165,8 @@
       </p>
     </section>
 
-    <!-- <h2 id="radar">
-      <a href="#radar">Radar chart <small>(with Vuex integration)</small></a>
+    <h2 id="radar">
+      <a href="#radar">Radar chart <small>(with Pinia integration)</small></a>
       <button
         :class="{
           round: true,
@@ -179,20 +179,35 @@
     <section v-if="expand.radar">
       <figure>
         <v-chart
-        class="echarts" :option="scoreRadar" :init-options="initOptions" autoresize />
+          :option="getRadarData(metricIndex)"
+          :init-options="initOptions"
+          autoresize
+        />
       </figure>
       <p>
         <select v-model="metricIndex">
-          <option v-for="(metric, index) in metrics" :value="index" :key="index"
-            >{{ metric }}
+          <option
+            v-for="(metric, index) in metrics"
+            :value="index"
+            :key="index"
+          >
+            {{ metric }}
           </option>
         </select>
-        <button @click="increase(1)" :disabled="isMax">Increase</button>
-        <button @click="increase(-1)" :disabled="isMin">Decrease</button>
-        <input id="async" type="checkbox" v-model="asyncCount" />
-        <label for="async">Async</label>
+        <button
+          @click="increase(metricIndex, 1)"
+          :disabled="isMax(metricIndex)"
+        >
+          Increase
+        </button>
+        <button
+          @click="increase(metricIndex, -1)"
+          :disabled="isMin(metricIndex)"
+        >
+          Decrease
+        </button>
       </p>
-    </section>-->
+    </section>
 
     <h2 id="connect">
       <a href="#connect">Connectable charts</a>
@@ -334,6 +349,7 @@ import {
 } from "echarts/components";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import "echarts-liquidfill";
+import { mapState, mapActions } from "pinia";
 import logo from "./data/logo";
 import getBar from "./data/bar";
 import pie from "./data/pie";
@@ -341,6 +357,7 @@ import polar from "./data/polar";
 import scatter from "./data/scatter";
 import map from "./data/map";
 import { c1, c2 } from "./data/connect";
+import { useScoreStore } from "./store";
 
 // custom theme
 import theme from "./theme.json";
@@ -434,6 +451,15 @@ export default {
       }
     };
   },
+  computed: {
+    autoresize() {
+      return { throttle: 200, onResize: this.handleResize };
+    },
+    ...mapState(useScoreStore, ["scores"]),
+    metrics() {
+      return this.scores.map(({ name }) => name);
+    }
+  },
   methods: {
     handleClick(...args) {
       console.log("click from echarts", ...args);
@@ -441,6 +467,9 @@ export default {
     handleZrClick(...args) {
       console.log("click from zrender", ...args);
     },
+    handleResize() {
+      console.log("resize");
+    },
     refresh() {
       // simulating async data from server
       this.seconds = 3;
@@ -566,7 +595,8 @@ export default {
     },
     stopActions() {
       clearInterval(this.actionTimer);
-    }
+    },
+    ...mapActions(useScoreStore, ["getRadarData", "increase", "isMax", "isMin"])
   },
   watch: {
     connected: {

src/demo/main.ts

@@ -1,4 +1,8 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import Demo from "./Demo.vue";
 
-createApp(Demo).mount("#app");
+const pinia = createPinia();
+const app = createApp(Demo);
+app.use(pinia);
+app.mount("#app");

src/demo/store.ts

@@ -0,0 +1,76 @@
+import { defineStore } from "pinia";
+
+export const useScoreStore = defineStore("score", {
+  state: () => {
+    return {
+      scores: [
+        { 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 }
+      ],
+      index: 0
+    };
+  },
+  getters: {
+    scoreRadar({ scores }) {
+      return {
+        title: {
+          text: "Player Ability"
+        },
+        tooltip: {},
+        radar: {
+          indicator: scores.map(({ name, max }) => {
+            return { name, max };
+          })
+        },
+        series: [
+          {
+            name: "Value",
+            type: "radar",
+            data: [{ value: scores.map(({ value }) => value) }]
+          }
+        ]
+      };
+    }
+  },
+  actions: {
+    getRadarData(activeIndex: number) {
+      return {
+        animation: false,
+        title: {
+          text: "Player Ability"
+        },
+        tooltip: {},
+        radar: {
+          indicator: this.scores.map(({ name, max }, index) => {
+            if (index === activeIndex) {
+              return { name, max, color: "goldenrod" };
+            }
+            return { name, max };
+          })
+        },
+        series: [
+          {
+            name: "Value",
+            type: "radar",
+            data: [{ value: this.scores.map(({ value }) => value) }]
+          }
+        ]
+      };
+    },
+    increase(index: number, amount: number) {
+      const metric = this.scores[index];
+      metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
+    },
+    isMax(index: number) {
+      const { value, max } = this.scores[index];
+      return value === max;
+    },
+    isMin(index: number) {
+      return this.scores[index].value === 0;
+    }
+  }
+});