feat(app): cumulative statistics

Signed-off-by: Eric Hegnes <eric@hegnes.com>

Author: ehegnes

app2/src/lib/components/model/BarChart.svelte

@@ -2,7 +2,7 @@
 import ErrorComponent from "$lib/components/model/ErrorComponent.svelte"
 import type { FetchDecodeGraphqlError } from "$lib/utils/queries"
 import type { DailyTransfer } from "@unionlabs/sdk/schema"
-import { Option } from "effect"
+import { Array as A, Option } from "effect"
 import type { TimeoutException } from "effect/Cause"
 import { constVoid } from "effect/Function"
 
@@ -14,16 +14,16 @@ type Props = {
   hoveredDate?: Option.Option<DailyTransfer>
 }
 
-const { data, error, class: className = "", onHoverChange = constVoid, hoveredDate }: Props =
-  $props()
-
-// Format large numbers with commas (used for chart tooltips)
-function formatNumber(num: string | number): string {
-  return Number(num).toLocaleString()
-}
+const {
+  data: _data,
+  error,
+  class: className = "",
+  onHoverChange = constVoid,
+  hoveredDate,
+}: Props = $props()
 
 // Derived values for chart data
-const reversedDailyTransfers = $derived(Option.isSome(data) ? [...data.value].reverse() : [])
+const data = $derived(Option.getOrElse(_data, A.empty<DailyTransfer>))
 
 // Track which bar should be highlighted based on the external hover
 const highlightedDate = $derived.by(() => {
@@ -34,18 +34,29 @@ const highlightedDate = $derived.by(() => {
   return Option.some(String(hoveredDate.value.day_date))
 })
 
-const maxCount = $derived(Option.isSome(data) ? Math.max(...data.value.map(d => d.count)) : 0)
+const maxCount = $derived(
+  Option.match(
+    _data,
+    {
+      onSome: (xs) => Math.max(...xs.map(d => d.count)),
+      onNone: () => 0,
+    },
+  ),
+)
 
 // Track the currently hovered day for display
 let hoveredDay = $state<Option.Option<DailyTransfer>>(Option.none())
 
 // Find the day with the highest count
 const highestDay = $derived.by(() => {
-  if (!Option.isSome(data) || data.value.length === 0) {
+  if (!Option.isSome(_data) || _data.value.length === 0) {
     return Option.none()
   }
   return Option.some(
-    data.value.reduce((max, current) => (current.count > max.count ? current : max), data.value[0]),
+    _data.value.reduce(
+      (max, current) => (current.count > max.count ? current : max),
+      _data.value[0],
+    ),
   )
 })
 
@@ -67,14 +78,14 @@ const displayDate = $derived(() =>
 
 // Calculate bar heights as percentages
 const barHeights = $derived(
-  reversedDailyTransfers.map(day => ({
+  data.map(day => ({
     ...day,
     heightPercent: maxCount > 0 ? Math.max((day.count / maxCount) * 100, 1) : 1,
   })),
 )
 </script>
 
-{#if Option.isSome(data) && maxCount > 0}
+{#if Option.isSome(_data) && maxCount > 0}
   <!-- Chart container -->
   <div class="h-full relative chart-container {className} {Option.isSome(highlightedDate) ? 'has-hover' : ''}">
     <!-- Grid lines -->

app2/src/lib/queries/statistics.svelte.ts

@@ -1,9 +1,18 @@
 import { dailyPackets, dailyTransfers, statistics } from "$lib/stores/statistics.svelte"
 import { createQueryGraphql } from "$lib/utils/queries"
-import { DailyTransfers, Statistics } from "@unionlabs/sdk/schema"
+import { DailyTransfer, DailyTransfers, Statistics } from "@unionlabs/sdk/schema"
 import { Option, Schema, Struct } from "effect"
+import * as A from "effect/Array"
+import * as DateTime from "effect/DateTime"
+import { flow, pipe } from "effect/Function"
+import * as Order from "effect/Order"
 import { graphql } from "gql.tada"
 
+const orderDailyTransfer = Order.mapInput<Date, DailyTransfer>(
+  Order.Date,
+  ({ day_date }) => DateTime.toDate(day_date),
+)
+
 export const statisticsQuery = createQueryGraphql({
   schema: Schema.Struct({ v2_stats_count: Statistics }),
   document: graphql(`
@@ -39,8 +48,12 @@ export const dailyTransfersQuery = (limit = 60) =>
     refetchInterval: "60 seconds",
     writeData: data => {
       // Only show testnet 10 transfers
-      dailyTransfers.data = data.pipe(
-        Option.map(Struct.get("v2_stats_transfers_daily_count")),
+      dailyTransfers.data = pipe(
+        data,
+        Option.map(flow(
+          Struct.get("v2_stats_transfers_daily_count"),
+          A.sortBy(orderDailyTransfer),
+        )),
       )
     },
     writeError: error => {
@@ -62,8 +75,12 @@ export const dailyPacketsQuery = (limit = 60) =>
     variables: { limit },
     refetchInterval: "60 seconds",
     writeData: data => {
-      dailyPackets.data = data.pipe(
-        Option.map(Struct.get("v2_stats_packets_daily_count")),
+      dailyPackets.data = pipe(
+        data,
+        Option.map(flow(
+          Struct.get("v2_stats_packets_daily_count"),
+          A.sortBy(orderDailyTransfer),
+        )),
       )
     },
     writeError: error => {

app2/src/lib/stores/statistics.svelte.ts

@@ -1,8 +1,10 @@
 import { type AppContext, runFork, runPromise } from "$lib/runtime"
 import type { FetchDecodeGraphqlError } from "$lib/utils/queries"
 import type { DailyTransfers, Statistics } from "@unionlabs/sdk/schema"
-import { Effect, Fiber, Option } from "effect"
+import { Effect, Fiber, Option, pipe } from "effect"
+import * as A from "effect/Array"
 import type { TimeoutException } from "effect/Cause"
+import * as I from "effect/Iterable"
 
 class StatisticsStore {
   data = $state(Option.none<Statistics>())
@@ -50,6 +52,30 @@ class DailyPacketsStore {
   data = $state(Option.none<DailyTransfers>())
   error = $state(Option.none<FetchDecodeGraphqlError | TimeoutException>())
   fiber = $state(Option.none<Fiber.RuntimeFiber<any, never>>())
+  cumData = $derived(
+    pipe(
+      Option.all([this.data, statistics.data]),
+      Option.map(([xs, stats]) => {
+        const base = stats[0].value
+
+        return pipe(
+          xs,
+          I.scan(base, (acc, { count }) => acc + Number(count)),
+          I.zip(xs),
+          I.drop(1),
+          I.map(([count, { day_date }]) => ({
+            count,
+            day_date,
+          })),
+          A.fromIterable,
+          x => {
+            console.log({ x })
+            return x
+          },
+        )
+      }),
+    ),
+  )
 
   async runEffect<A>(effect: Effect.Effect<A, never, AppContext>) {
     this.data = Option.none()

app2/src/routes/explorer/+page.svelte

@@ -35,13 +35,13 @@ const highestTransferDay = $derived.by(() => {
 
 // Find the day with the highest count for packets
 const highestPacketDay = $derived.by(() => {
-  if (!Option.isSome(dailyPackets.data) || dailyPackets.data.value.length === 0) {
+  if (!Option.isSome(dailyPackets.cumData) || dailyPackets.cumData.value.length === 0) {
     return Option.none()
   }
   return Option.some(
-    dailyPackets.data.value.reduce(
+    dailyPackets.cumData.value.reduce(
       (max, current) => (current.count > max.count ? current : max),
-      dailyPackets.data.value[0],
+      dailyPackets.cumData.value[0],
     ),
   )
 })
@@ -62,9 +62,9 @@ const displayTransferDay = $derived.by(() => {
 
 // Find the packet data for the hovered day
 const displayPacketDay = $derived.by(() => {
-  if (Option.isSome(hoveredDay) && Option.isSome(dailyPackets.data)) {
+  if (Option.isSome(hoveredDay) && Option.isSome(dailyPackets.cumData)) {
     const hoveredDateString = String(hoveredDay.value.day_date)
-    const packet = dailyPackets.data.value.find(
+    const packet = dailyPackets.cumData.value.find(
       p => String(p.day_date) === hoveredDateString,
     )
     if (packet) {
@@ -160,7 +160,7 @@ onMount(() => {
       </div>
 
       <BarChart
-        data={dailyPackets.data}
+        data={dailyPackets.cumData}
         error={dailyPackets.error}
         onHoverChange={(day) => hoveredDay = day}
         hoveredDate={hoveredDay}