feat: front and back ws analytics query and ui (#234)

defs/api/app-analytics/GET/CountryCodeOrZZ.ts

@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { CountryCode } from "../../../CountryCode";
+import type { ZZ } from "./ZZ";
+
+export type CountryCodeOrZZ = ZZ | CountryCode;

defs/api/app-analytics/GET/Output.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Analytics } from "../../../app-analytics/Analytics";
+
+export type Output = { analytics: Analytics };

defs/api/app-analytics/GET/Query.ts

@@ -0,0 +1,12 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { AnalyticsQueryKind } from "../../../app-analytics/AnalyticsQueryKind";
+import type { CountryCodeOrZZ } from "./CountryCodeOrZZ";
+
+export type Query = {
+  kind: AnalyticsQueryKind;
+  stations: string[] | undefined;
+  app_kind: string | null;
+  app_version: string | null;
+  country_code: CountryCodeOrZZ | null;
+  min_duration_ms?: number;
+};

defs/api/app-analytics/GET/ZZ.ts

@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type ZZ = "ZZ";

defs/app-analytics/Analytics.ts

@@ -0,0 +1,29 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { AnalyticsItem } from "./AnalyticsItem";
+import type { AnalyticsQueryKind } from "./AnalyticsQueryKind";
+import type { AnalyticsStation } from "./AnalyticsStation";
+import type { AppKindVersion } from "./AppKindVersion";
+import type { CountryCode } from "../CountryCode";
+import type { DateTime } from "../DateTime";
+import type { YearMonthDay } from "./YearMonthDay";
+import type { YearMonthDayHour } from "./YearMonthDayHour";
+
+export type Analytics = {
+  is_now: boolean;
+  kind: AnalyticsQueryKind;
+  stations: Array<AnalyticsStation>;
+  since: /** time::DateTime */ string;
+  until: /** time::DateTime */ string;
+  utc_offset_minutes: number;
+  sessions: number;
+  ips: number;
+  total_duration_ms: number;
+  max_concurrent_listeners?: number;
+  max_concurrent_listeners_date?: DateTime;
+  by_day: Array<AnalyticsItem<YearMonthDay>>;
+  by_hour: Array<AnalyticsItem<YearMonthDayHour>> | null;
+  by_country: Array<AnalyticsItem<CountryCode | null>>;
+  by_station: Array<AnalyticsItem<string>>;
+  by_app_kind: Array<AnalyticsItem<string | null>>;
+  by_app_version: Array<AnalyticsItem<AppKindVersion>>;
+};

defs/app-analytics/AnalyticsItem.ts

@@ -0,0 +1,12 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DateTime } from "../DateTime";
+
+export type AnalyticsItem<K> = {
+  key: K;
+  sessions: number;
+  ips: number;
+  total_duration_ms: number;
+  total_transfer_bytes: number;
+  max_concurrent_listeners?: number;
+  max_concurrent_listeners_date?: DateTime;
+};

defs/app-analytics/AnalyticsQueryKind.ts

@@ -0,0 +1,10 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type AnalyticsQueryKind = {
+  now: { offset_date: /** time::DateTime */ string };
+} | {
+  time_range: {
+    since: /** time::DateTime */ string;
+    until: /** time::DateTime */ string;
+  };
+};

defs/app-analytics/AnalyticsStation.ts

@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DateTime } from "../DateTime";
+
+export type AnalyticsStation = {
+  _id: string;
+  name: string;
+  created_at: DateTime;
+};

defs/app-analytics/AppKindVersion.ts

@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type AppKindVersion = { kind: string | null; version: number | null };

defs/app-analytics/YearMonthDay.ts

@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type YearMonthDay = { year: number; month: number; day: number };

defs/app-analytics/YearMonthDayHour.ts

@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type YearMonthDayHour = {
+  year: number;
+  month: number;
+  day: number;
+  hour: number;
+};

front/admin/src/routes/(online)/(app)/analytics/+page.svelte

@@ -1,34 +1,43 @@
 <script lang="ts">
   export let data: import("./$types").PageData;
 
+  let type: "stream" | "app" = "stream";
   let country_code: CountryCode | null | undefined = undefined;
   let os: string | null | undefined = undefined;
   let browser: string | null | undefined = undefined;
   let domain: string | null | undefined = undefined;
   let kind: QueryKind = "last-30d";
   let selected_stations: StationItem[] | "all" = "all";
   let loading: boolean = false;
-  let analytics_data: import("$server/defs/analytics/Analytics").Analytics | null = null;
+  let app_kind: string | null | undefined = undefined;
+  let app_version: number | null | undefined = undefined;
+  let analytics_data: Data | null = null;
 
   type Snapshot = {
+    type: "stream" | "app",
+    kind: QueryKind,
     country_code: CountryCode | null | undefined,
     os: string | null | undefined,
     browser: string | null | undefined,
     domain: string | null | undefined,
-    kind: QueryKind,
+    app_kind: string | null | undefined,
+    app_version: number | null | undefined,
     selected_stations: StationItem[] | "all",
-    analytics_data: import("$server/defs/analytics/Analytics").Analytics | null,
+    analytics_data: Data | null,
   };
 
   export const snapshot = {
     capture: (): Snapshot => {
       return {
+        type,
         analytics_data,
         country_code,
         os,
         browser,
         kind,
         domain,
+        app_kind,
+        app_version,
         selected_stations
       }
     },
@@ -41,6 +50,8 @@
         country_code,
         os,
         domain,
+        app_kind,
+        app_version,
         selected_stations,
       } = snapshot);
     }
@@ -53,6 +64,8 @@
   import { locale, lang } from "$lib/locale";
 	import type { CountryCode } from "$server/defs/CountryCode";
 	import type { QueryKind, StationItem } from "$share/analytics/AnalyticsFilters.svelte";
+	import type { Data } from "$share/analytics/AnalyticsData.svelte";
+	import { ripple } from "$share/ripple";
 </script>
 
 <svelte:head>
@@ -61,9 +74,7 @@
 
 <Page>
   <PageTop>
-    <svelte:fragment slot="title">
-      Analytics
-    </svelte:fragment>
+    <svelte:fragment slot="title">Analytics</svelte:fragment>
   </PageTop>
 
   <Analytics
@@ -76,6 +87,8 @@
     bind:os
     bind:browser
     bind:domain
+    bind:app_kind
+    bind:app_version
     lang={$lang}
     locale={$locale.analytics}
     stats_map_locale={$locale.stats_map}

front/app/src/routes/(root)/(online)/(app)/accounts/[account]/analytics/+page.svelte

@@ -2,41 +2,52 @@
   export let data: import("./$types").PageData;
   import Page from "$lib/components/Page.svelte";
 	import Analytics from "$share/analytics/Analytics.svelte";
+	import AnalyticsTypeSelector from "$share/analytics/AnalyticsTypeSelector.svelte";
   import { locale, lang } from "$lib/locale";
 
   import type { CountryCode } from "$server/defs/CountryCode";
 	import type { QueryKind, StationItem } from "$share/analytics/AnalyticsFilters.svelte";
+	import type { Data } from "$share/analytics/AnalyticsData.svelte";
 
   $: account_stations = data.stations.items.filter(item => item.account_id === data.account._id);
 
+  let type: "stream" | "app" = "stream";
   let country_code: CountryCode | null | undefined = undefined;
   let os: string | null | undefined = undefined;
   let browser: string | null | undefined = undefined;
   let domain: string | null | undefined = undefined;
   let kind: QueryKind = "last-30d";
   let selected_stations: StationItem[] | "all" = "all";
   let loading: boolean = false;
-  let analytics_data: import("$server/defs/analytics/Analytics").Analytics | null = null;
-  
+  let app_kind: string | null | undefined = undefined;
+  let app_version: number | null | undefined = undefined;
+  let analytics_data: Data | null = null;
+
   type Snapshot = {
+    type: "stream" | "app",
+    kind: QueryKind,
     country_code: CountryCode | null | undefined,
     os: string | null | undefined,
     browser: string | null | undefined,
     domain: string | null | undefined,
-    kind: QueryKind,
+    app_kind: string | null | undefined,
+    app_version: number | null | undefined,
     selected_stations: StationItem[] | "all",
-    analytics_data: import("$server/defs/analytics/Analytics").Analytics | null,
+    analytics_data: Data | null,
   };
 
   export const snapshot = {
     capture: (): Snapshot => {
       return {
+        type,
         analytics_data,
         country_code,
         os,
         browser,
         kind,
         domain,
+        app_kind,
+        app_version,
         selected_stations
       }
     },
@@ -49,6 +60,8 @@
         country_code,
         os,
         domain,
+        app_kind,
+        app_version,
         selected_stations,
       } = snapshot);
     }
@@ -60,10 +73,13 @@
 </svelte:head>
 
 <Page>
-  <h1>{$locale.pages["account/analytics"].title}</h1>
+  <h1>
+    {$locale.pages["account/analytics"].title}
+  </h1>
 
   <Analytics
     stations={account_stations}
+    bind:type
     bind:data={analytics_data}
     bind:loading
     bind:selected_stations
@@ -72,9 +88,11 @@
     bind:os
     bind:browser
     bind:domain
+    bind:app_kind
+    bind:app_version
     lang={$lang}
     locale={$locale.analytics}
     stats_map_locale={$locale.stats_map}
     country_names={$locale.countries}
-  />
+    />
 </Page>

front/server/src/api/shared-api.ts

@@ -305,6 +305,10 @@ export const shared_api = ({
     return await client.analytics.get(ip(req), ua(req), get_token(req), req.query as any);
   }))
 
+  api.route("/app-analytics").get(json(async req => {
+    return await client.app_analytics.get(ip(req), ua(req), get_token(req), req.query as any);
+  }))
+
   api.route("/invitations")
     .get(json(async req => {
       return await client.invitations.list(ip(req), ua(req), get_token(req), req.query as any)

front/server/src/client.ts

@@ -30,6 +30,7 @@ export class Client {
   accounts: Accounts;
   stations: Stations;
   analytics: Analytics;
+  app_analytics: AppAnalytics;
   invitations: AccountInvitations;
   payment_methods: PaymentMethods;
   stream_connections: StreamConnections;
@@ -48,6 +49,7 @@ export class Client {
     this.accounts = new Accounts(this);
     this.stations = new Stations(this);
     this.analytics = new Analytics(this);
+    this.app_analytics = new AppAnalytics(this);
     this.invitations = new AccountInvitations(this);
     this.payment_methods = new PaymentMethods(this);
     this.stream_connections = new StreamConnections(this);
@@ -635,6 +637,18 @@ export class Analytics {
   }
 }
 
+export class AppAnalytics {
+  client: Client;
+  constructor(client: Client) {
+    this.client = client;
+  }
+
+  async get(ip: string | null, ua: string | null, token: string, query: import("$api/app-analytics/GET/Query").Query): Promise<import("$api/app-analytics/GET/Output").Output> {
+    const url = `/app-analytics${qss(query)}`;
+    return await this.client.get(ip, ua, token, url);
+  }
+}
+
 export class PaymentMethods {
   client: Client;
   constructor(client: Client) {