feat: float metrics

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

src/app/core/reports.rs

@@ -3,6 +3,7 @@ use std::fmt::{Debug, Display};
 
 use crate::app::DuckDBConn;
 use crate::utils::validate;
+use crate::web::routes::dashboard::GraphValue;
 use duckdb::params;
 use eyre::Result;
 use itertools::Itertools;
@@ -24,11 +25,11 @@ pub struct DateRange {
 
 impl DateRange {
     pub fn start(&self) -> OffsetDateTime {
-        OffsetDateTime::from_unix_timestamp(self.start as i64).unwrap_or(OffsetDateTime::UNIX_EPOCH)
+        OffsetDateTime::from_unix_timestamp((self.start / 1000) as i64).unwrap_or(OffsetDateTime::UNIX_EPOCH)
     }
 
     pub fn end(&self) -> OffsetDateTime {
-        OffsetDateTime::from_unix_timestamp(self.end as i64).unwrap_or(OffsetDateTime::UNIX_EPOCH)
+        OffsetDateTime::from_unix_timestamp((self.end / 1000) as i64).unwrap_or(OffsetDateTime::UNIX_EPOCH)
     }
 
     pub fn prev(&self) -> DateRange {
@@ -77,7 +78,7 @@ pub enum FilterType {
     IsNull,
 }
 
-pub type ReportGraph = Vec<u64>;
+pub type ReportGraph = Vec<GraphValue>;
 pub type ReportTable = BTreeMap<String, u64>;
 
 #[derive(Object, Clone, Debug, Default)]
@@ -86,7 +87,7 @@ pub struct ReportStats {
     pub total_views: u64,
     pub total_sessions: u64,
     pub unique_visitors: u64,
-    pub avg_views_per_session: u64, // 3 decimal places
+    pub avg_views_per_session: f64,
 }
 
 #[derive(Object, Debug)]
@@ -152,7 +153,7 @@ pub fn overall_report(
     metric: &Metric,
 ) -> Result<ReportGraph> {
     if entities.is_empty() {
-        return Ok(vec![0; data_points as usize]);
+        return Ok(vec![GraphValue::U64(0); data_points as usize]);
     }
 
     // recheck the validity of the entity IDs to be super sure there's no SQL injection
@@ -217,14 +218,14 @@ pub fn overall_report(
 
     match metric {
         Metric::Views | Metric::UniqueVisitors | Metric::Sessions => {
-            let rows = stmt.query_map(duckdb::params_from_iter(params), |row| row.get(1))?;
-            let report_graph = rows.collect::<Result<Vec<u64>, duckdb::Error>>()?;
+            let rows = stmt.query_map(duckdb::params_from_iter(params), |row| Ok(GraphValue::U64(row.get(1)?)))?;
+            let report_graph = rows.collect::<Result<Vec<GraphValue>, duckdb::Error>>()?;
             Ok(report_graph)
         }
         Metric::AvgViewsPerSession => {
-            let rows = stmt.query_map(duckdb::params_from_iter(params), |row| row.get(1))?;
-            let report_graph = rows.collect::<Result<Vec<f64>, duckdb::Error>>()?;
-            Ok(report_graph.iter().map(|v| (v * 1000.0).round() as u64).collect())
+            let rows = stmt.query_map(duckdb::params_from_iter(params), |row| Ok(GraphValue::F64(row.get(1)?)))?;
+            let report_graph = rows.collect::<Result<Vec<GraphValue>, duckdb::Error>>()?;
+            Ok(report_graph)
         }
     }
 }
@@ -295,7 +296,7 @@ pub fn overall_stats(
             total_views: row.get(0)?,
             total_sessions: row.get(1)?,
             unique_visitors: row.get(2)?,
-            avg_views_per_session: (row.get::<_, Option<f64>>(3)?.unwrap_or(0.0) * 1000.0).round() as u64,
+            avg_views_per_session: row.get::<_, Option<f64>>(3)?.unwrap_or(0.0),
         })
     })?;
 

src/web/routes/dashboard.rs

@@ -8,11 +8,17 @@ use poem::http::StatusCode;
 use poem::web::Data;
 use poem_openapi::param::Path;
 use poem_openapi::payload::Json;
-use poem_openapi::{Object, OpenApi};
+use poem_openapi::{Object, OpenApi, Union};
+
+#[derive(Union, Debug, PartialEq, Clone, Copy)]
+pub enum GraphValue {
+    U64(u64),
+    F64(f64),
+}
 
 #[derive(Object)]
 struct GraphResponse {
-    data: Vec<u64>,
+    data: Vec<GraphValue>,
 }
 
 #[derive(Object)]

web/src/api/dashboard.ts

@@ -102,7 +102,7 @@ export const DimensionTable = ({
 							<DimensionValueBar value={d.value} biggest={biggest}>
 								<DimensionLabel dimension={dimension} value={d} />
 							</DimensionValueBar>
-							<div>{formatMetricVal(metric, d.value)}</div>
+							<div>{formatMetricVal(d.value)}</div>
 						</div>
 					);
 				})}

web/src/components/dimensions/index.tsx

@@ -70,7 +70,7 @@ export const DetailsModal = ({
 							<DimensionValueBar value={d.value} biggest={biggest}>
 								<DimensionLabel dimension={dimension} value={d} />
 							</DimensionValueBar>
-							<div>{formatMetricVal(metric, d.value)}</div>
+							<div>{formatMetricVal(d.value)}</div>
 						</div>
 					);
 				})}

web/src/components/dimensions/modal.tsx

@@ -4,6 +4,7 @@ import styles from "./graph.module.css";
 import { ResponsiveLine, type SliceTooltipProps } from "@nivo/line";
 import { addMonths } from "date-fns";
 import type { DataPoint } from ".";
+import { formatMetricVal } from "../../utils";
 
 export type GraphRange = "year" | "month" | "day" | "hour";
 
@@ -22,12 +23,13 @@ const formatDate = (date: Date, range: GraphRange = "day") => {
 
 const Tooltip = (props: SliceTooltipProps & { title: string; range: GraphRange }) => {
 	const point = props.slice.points[0].data;
+	const value = point.y.valueOf() as number;
 
 	return (
 		<div data-theme="dark" className={styles.tooltip}>
 			<h2>{props.title}</h2>
 			<h3>
-				<span>{formatDate(new Date(point.x), props.range)}</span> {point.y.toString()}
+				<span>{formatDate(new Date(point.x), props.range)}</span> {formatMetricVal(value)}
 			</h3>
 		</div>
 	);

web/src/components/graph/graph.tsx

@@ -15,6 +15,6 @@ export const toDataPoints = (data: number[], range: { start: number; end: number
 	const step = differenceInSeconds(range.end, range.start) / data.length;
 	return data.map((value, i) => ({
 		x: new Date(range.start + i * step * 1000 + 1000),
-		y: metric === "avg_views_per_session" ? value / 1000 : value,
+		y: value,
 	}));
 };

web/src/components/graph/index.tsx

@@ -79,7 +79,7 @@ export const SelectMetric = ({
 		<CardButton onClick={onSelect} active={selected} className={styles.metric}>
 			<h2>{title}</h2>
 			<h3>
-				{formatMetricVal(metric, value)}
+				{formatMetricVal(value)}
 				<span style={{ color }} className={styles.change}>
 					{icon} {formatPercent(changePercent)}
 				</span>

web/src/components/project/metric.tsx

@@ -31,7 +31,7 @@ export const LiveVisitorCount = ({ count }: { count: number }) => {
 		<span className={styles.online}>
 			<CircleIcon fill="#22c55e" color="#22c55e" size={10} />
 			<CircleIcon fill="#22c55e" color="#22c55e" size={10} className={styles.pulse} />
-			{formatMetricVal("unique_visitors", count)} {count === 1 ? "Current Visitor" : "Current Visitors"}
+			{formatMetricVal(count)} {count === 1 ? "Current Visitor" : "Current Visitors"}
 		</span>
 	);
 };

web/src/components/project/project.tsx

@@ -11,21 +11,16 @@ export const cls = (class1: ClassName | ClassName[], ...classes: (ClassName | Cl
 // get the username cookie or undefined if not set
 export const getUsername = () => document.cookie.match(/username=(.*?)(;|$)/)?.[1];
 
-export const formatMetricVal = (metric: Metric, value: number) => {
-	let res = value;
-	if (metric === "avg_views_per_session") {
-		res = value / 1000;
+export const formatMetricVal = (value: number) => {
+	if (value >= 1000) {
+		return `${(value / 1000).toFixed(1).replace(/\.0$/, "")}k`;
 	}
 
-	if (res >= 1000) {
-		return `${(res / 1000).toFixed(1).replace(/\.0$/, "")}K`;
+	if (value >= 1000000) {
+		return `${(value / 1000000).toFixed(1).replace(/\.0$/, "")}M`;
 	}
 
-	if (res >= 1000000) {
-		return `${(res / 1000000).toFixed(1).replace(/\.0$/, "")}M`;
-	}
-
-	return res.toFixed(1).replace(/\.0$/, "") || "0";
+	return value.toFixed(1).replace(/\.0$/, "") || "0";
 };
 
 export const formatPercent = (value: number) => {