feat: update lockfile, add vercel analytics, add missing props, fix e…

…chart style in dark mode

components/LatestTable.vue

@@ -3,6 +3,7 @@ import { TRADE_TYPES, CONDITIONS } from "~/types/constants";
 import { Price } from "~/types";
 
 defineProps<{
+  modelValue: string;
   data: Price[];
   page: number;
   pageCount: number;

components/PriceTrend.vue

@@ -15,8 +15,16 @@ const props = defineProps<{
   data: Trend[];
 }>();
 
+const isDark = useDark({
+  selector: "html",
+  attribute: "data-theme",
+  valueDark: "dracula",
+  valueLight: "light",
+});
+
 const option = computed(() => {
   return {
+    backgroundColor: isDark.value ? "#272A34" : "transparent",
     tooltip: { trigger: "axis" },
     legend: { show: true },
     grid: {
@@ -25,7 +33,7 @@ const option = computed(() => {
       bottom: 0,
       containLabel: true,
     },
-    xAxis: { type: "time" },
+    xAxis: { type: "time", axisLabel: { formatter: "{MM}/{dd}" } },
     yAxis: { type: "value" },
     series: [
       {
@@ -35,6 +43,7 @@ const option = computed(() => {
           .filter(({ condition }) => condition === CONDITIONS.USED)
           .map(({ price, posted_at, ptt_article_id }) => [+new Date(posted_at || ""), price, ptt_article_id]),
         symbol: "circle",
+        symbolSize: 7,
         smooth: 0.2,
       },
       {
@@ -44,6 +53,7 @@ const option = computed(() => {
           .filter(({ condition }) => condition === CONDITIONS.NEW)
           .map(({ price, posted_at, ptt_article_id }) => [+new Date(posted_at || ""), price, ptt_article_id]),
         symbol: "circle",
+        symbolSize: 7,
         smooth: 0.2,
       },
     ],
@@ -60,6 +70,6 @@ function handleClick(args: ECElementEvent) {
 
 <template>
   <div class="h-[300px]">
-    <v-chart :option="option" autoresize @click="handleClick" />
+    <v-chart :option="option" :theme="isDark ? 'dark' : ''" autoresize @click="handleClick" />
   </div>
 </template>

package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.14",
+    "@vercel/analytics": "^1.1.1",
     "echarts": "^5.4.3",
     "vue-echarts": "^6.6.1",
     "zod": "^3.22.4"

plugins/analytics.client.ts

@@ -0,0 +1,5 @@
+import { inject } from "@vercel/analytics";
+
+export default defineNuxtPlugin(() => {
+  inject();
+});