Merge pull request #24 from ppodds/feat/editor

feat: change stock and backtest date range

components/dashboard/DashboardCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{ title: string }>();
+defineProps<{ title?: string }>();
 </script>
 
 <template>

components/dashboard/DashboardStockSearch.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+const props = defineProps<{
+  defaultQuery?: string;
+}>();
+
+const emits = defineEmits<{
+  (e: "do-search", value: string): void;
+}>();
+
+const config = useRuntimeConfig();
+
+const query = ref(props.defaultQuery ?? "");
+const list = ref([]);
+
+watch(
+  () => query.value,
+  async () => {
+    if (query.value === "") {
+      list.value = [];
+      return;
+    }
+
+    list.value = await $fetch<{ symbol: string }[]>(
+      `${config.public.apiBaseUrl}/search`,
+      {
+        params: { query: query.value },
+      },
+    );
+  },
+);
+
+function doSearch(symbol: string) {
+  emits("do-search", symbol);
+  list.value = [];
+}
+</script>
+
+<template>
+  <div class="search-box">
+    <form>
+      <input
+        v-model="query"
+        type="text"
+        placeholder="Search for symbol"
+        @keypress.enter.prevent="
+          () => {
+            if (list.length > 0) doSearch(list[0].symbol);
+          }
+        "
+      />
+      <div>
+        <ul>
+          <li v-for="item in list" @click="doSearch(item.symbol)">
+            <div class="symbol">{{ item.symbol }}</div>
+            <div class="company-name">
+              {{ item.longname ?? item.shortname }}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.search-box {
+  display: flex;
+  height: 3rem;
+  width: 32rem;
+}
+
+.search-box > form {
+  width: 100%;
+  height: 100%;
+}
+
+.search-box > form > input {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+}
+
+.search-box > form > div > ul {
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+}
+
+.search-box > form > div > ul > li {
+  display: flex;
+  list-style: none;
+  max-width: 100%;
+  padding: 0.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.search-box > form > div > ul > li:hover {
+  background-color: cornsilk;
+}
+
+.search-box > form > div > ul > li > div {
+  display: inline-block;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.symbol {
+  width: 6rem;
+  margin-right: 1rem;
+  font-weight: bold;
+}
+</style>

pages/dashboard.vue

@@ -16,13 +16,20 @@ definePageMeta({
 const indicatorts = await import("indicatorts");
 
 const config = useRuntimeConfig();
-// TODO: change stock
-const { data: stockData } = await useFetch<Ticker>(
-  `${config.public.apiBaseUrl}/tickers/2330.TW/historical-data?start=1980-01-01`,
+const symbol = ref("2330.TW");
+const dateFilterInput = ref("1980-01-01");
+const dateFilter = computed(() => new Date(dateFilterInput.value));
+const url = computed(
+  () =>
+    `${config.public.apiBaseUrl}/tickers/${
+      symbol.value
+    }/historical-data?start=${dateFilter.value.toISOString()}`,
 );
+// TODO: change stock
+const { data: stockData, refresh } = await useFetch<Ticker>(url);
 
 // prepare runtime
-const stock = new Stock(stockData.value);
+let stock = new Stock(stockData.value);
 
 if (indicatorts && stock && runtime && process.client) {
   console.log("Backtest runtime ready");
@@ -100,10 +107,37 @@ function generateChart(backtestData: Backtest) {
     ],
   };
 }
+
+function updateDashboard() {
+  stock = new Stock(stockData.value);
+  backtestData.value = backtest(strategyCode);
+  chartData.value = generateChart(backtestData.value);
+}
+
+watch(
+  () => dateFilterInput.value,
+  async () => {
+    await refresh();
+    updateDashboard();
+  },
+);
 </script>
 
 <template>
   <div class="dashboard">
+    <div class="container">
+      <DashboardStockSearch
+        :default-query="symbol"
+        @do-search="
+          async (newSymbol) => {
+            symbol = newSymbol;
+            await refresh();
+            updateDashboard();
+          }
+        "
+      />
+      <input v-model="dateFilterInput" type="date" />
+    </div>
     <ClientOnly v-if="backtestData">
       <DashboardCard title="Total Actions">
         <p>{{ backtestData.actionCount }}</p>
@@ -135,4 +169,11 @@ function generateChart(backtestData: Backtest) {
 .dashboard > div {
   margin: 0.25rem;
 }
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  z-index: 50;
+}
 </style>