ws done

app/components/chart/Line.vue

@@ -45,6 +45,7 @@ const isPositive = computed(() => {
   if (!firstValue.value || !lastValue.value) return false
   return lastValue.value > firstValue.value
 })
+
 const series = [
   {
     data: cryptoData ? cryptoData : getRandomDailyData(),
@@ -91,21 +92,13 @@ watch(colorMode, () => {
   })
 })
 
-watch(
-  price,
-  () => {
-    emit('update:currentValue', price.value ? price.value : lastValue.value)
-  },
-  { immediate: true },
-)
+watch(price, () => {
+  emit('update:currentValue', price.value ? price.value : lastValue.value)
+}, { immediate: true })
 
-watch(
-  variation,
-  () => {
-    emit('update:variation', variation.value)
-  },
-  { immediate: true },
-)
+watch(variation, () => {
+  emit('update:variation', variation.value)
+}, { immediate: true })
 
 function mouseOut() {
   emit('update:currentValue', lastValue.value)
@@ -127,6 +120,13 @@ const chartOptions = {
     zoom: {
       enabled: false,
     },
+    animations: {
+      enabled: true,
+      easing: 'linear',
+      dynamicAnimation: {
+        speed: 1000
+      }
+    },
     toolbar: {
       show: false,
     },
@@ -191,7 +191,6 @@ const chartOptions = {
     },
   },
   tooltip: {
-
     custom: function({ series, seriesIndex, dataPointIndex }) {
       const value = series[seriesIndex][dataPointIndex] as number
       price.value = value
@@ -216,6 +215,16 @@ const chartOptions = {
     },
   },
 } satisfies ApexOptions
+
+watch(() => cryptoData, () => {
+  const cryptoDataCopy = cryptoData
+  // sort by timestamp
+  chart.value.chart.updateSeries([
+    {
+      data: cryptoDataCopy.sort((a, b) => a.timestamp - b.timestamp)
+    }
+  ])
+})
 </script>
 
 <template>

app/pages/app/crypto/[symbol].vue

@@ -2,6 +2,8 @@
 import type { Variations } from '~~/types/ApexChart'
 import type { Crypto } from '~~/types/Crypto'
 
+const dayjs = useDayjs()
+
 const cryptos = usePublicCrypto()
 
 const { symbol } = useRoute().params
@@ -10,16 +12,16 @@ if (!crypto) {
   useRouter().push('/app/market')
 }
 
+const cryptoData = ref(crypto.data)
+
 const variations = ref<Variations>({
   percent: -1,
   value: -1,
 })
 
 const price = ref(crypto.data[crypto.data.length - 1][1])
-const series = crypto.data
 const dynamicData = ref(0)
 
-
 let ws: WebSocket | undefined
 
 function connect() {
@@ -36,6 +38,11 @@ function connect() {
   ws.addEventListener('message', (event) => {
     if (event.data.includes('number')) {
       dynamicData.value = JSON.parse(event.data).number
+      // add another day to the data
+      /*cryptoData.value.push([
+        dayjs().add(1, 'day').valueOf(),
+        dynamicData.value
+      ])*/
     }
     if (event.data.includes('pong')) {
       console.log('ws', 'Received pong')
@@ -84,7 +91,7 @@ onUnmounted(() => {
     <ChartLine
       style="--stagger: 3; --delay: 100ms"
       data-animate
-      :crypto-data="series"
+      :crypto-data
       @update:current-value="price = $event"
       @update:variation="variations = $event"
     />

server/api/crypto/ws.ts

@@ -12,7 +12,7 @@ export default defineWebSocketHandler({
     peer.subscribe('value')
 
     const sendRandomNumber = () => {
-      const randomNumber = (Math.floor(Math.random() * 10000)).toFixed(2)
+      const randomNumber = generateRandomValue()
       peer.send({ number: randomNumber })
     }
 

server/app/cryptoService.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs'
 import type { UpsertCryptoDto } from '~~/types/Crypto'
+import { generateRandomValue } from '~~/server/utils/number'
 
 function smoothCryptoData(cryptoData: [timestamp: number, value: number][], windowSize: number) {
   const smoothedData = []
@@ -24,7 +25,10 @@ export async function getAllCryptos(all: boolean = false) {
   const cryptoList = cryptos.map((crypto) => {
     const data = []
     for (let i = 0; i < 365; i++) {
-      data.push([dayjs().subtract(i, 'day').valueOf(), Math.floor(Math.random() * (10000 - 300 + 1)) + 300])
+      data.push([
+        dayjs().subtract(i, 'day').valueOf(),
+        generateRandomValue()
+      ])
     }
     crypto.data = smoothCryptoData(data, 7)
     return crypto

server/utils/number.ts

@@ -0,0 +1,3 @@
+export function generateRandomValue(min: number = 300, max: number = 10000): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}