Add gains chart

app.vue

@@ -3,6 +3,8 @@
     <ClientOnly>
       <Editor ref="editor" />
       <button @click="backtest()">Backtest</button>
+      <button @click="showChart()">Show Chart</button>
+      <Chart v-if="chartVisable" :data="chartData" />
     </ClientOnly>
   </div>
 </template>
@@ -22,6 +24,8 @@ const { data: stockData } = await useFetch<Ticker>(
   `${config.public.apiBaseUrl}/tickers/2330.TW/historical-data?start=1980-01-01`,
 );
 const editor = ref<InstanceType<typeof Editor>>();
+const chartVisable = ref(false);
+const chartData = ref(null);
 
 // prepare runtime
 const stock = new Stock(stockData.value);
@@ -64,4 +68,21 @@ function backtest(): Backtest {
   console.log(t);
   return t;
 }
+
+function showChart() {
+  const result = backtest();
+  chartData.value = {
+    labels: stock.dates,
+    datasets: [
+      {
+        label: "Gain",
+        data: result.gains,
+        borderColor: "rgba(54, 162, 235, 1)",
+        backgroundColor: "rgba(54, 162, 235, 0.2)",
+        borderWidth: 1,
+      },
+    ],
+  };
+  chartVisable.value = true;
+}
 </script>

components/chart/Chart.vue

@@ -0,0 +1,45 @@
+<template>
+  <canvas ref="chartCanvas"></canvas>
+</template>
+
+<script setup lang="ts">
+import { Chart } from "chart.js";
+
+const chartCanvas = ref<HTMLCanvasElement>(null);
+const props = defineProps<{
+  data: any;
+}>();
+const chart = ref(null);
+
+onMounted(() => {
+  chart.value = new Chart(chartCanvas.value, {
+    type: "line",
+    data: props.data,
+    options: {
+      elements: {
+        point: {
+          radius: 0,
+        },
+      },
+    },
+  });
+});
+
+watch(
+  () => props.data,
+  () => {
+    chart.value.destroy();
+    chart.value = new Chart(chartCanvas.value, {
+      type: "line",
+      data: props.data,
+      options: {
+        elements: {
+          point: {
+            radius: 0,
+          },
+        },
+      },
+    });
+  },
+);
+</script>

nuxt.config.ts

@@ -2,6 +2,9 @@ import { defineNuxtConfig } from "nuxt";
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+  build: {
+    transpile: ["chart.js"],
+  },
   runtimeConfig: {
     public: {
       apiBaseUrl: "",

package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "blockly": "^8.0.5",
+    "chart.js": "^3.9.1",
     "indicatorts": "^1.0.10"
   }
 }

plugins/chart.ts

@@ -0,0 +1,7 @@
+import { Chart, registerables } from "chart.js";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook("app:beforeMount", () => {
+    Chart.register(...registerables);
+  });
+});