chore: QOL improvements & changelog

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

Author: explodingcamera

CHANGELOG.md

@@ -16,6 +16,20 @@ The format is roughly based on the output of `git-cliff` and this project adhere
 Since this is not a library, this changelog focuses on the changes that are relevant to the end-users. For a detailed list of changes, see the commit history, which adheres to [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). New releases are created automatically when a new tag is pushed (Commit message: chore(release): vX.X.X).
 -->
 
-## [Unreleased]
+<!-- ## [Unreleased] -->
 
-:rocket: This is the first release of the Liwan.
+## **Liwan v0.1.0** - 2024-09-18
+
+This is the first full release of the Liwan! 🎉
+All essential features for web analytics are now available, including:
+
+- Live tracking of page views
+- Geolocation of visitors
+- Automatic GeoIP database updates
+- Basic user management
+- Filtering and searching
+- Multiple tracking dimensions: URL, referrer, browser, OS, device type, country, and city
+- Multiple metrics: page views, unique visitors, sessions, and average views per session
+- Multiple date ranges (custom date ranges are coming soon!)
+- Documentation and a simple setup guide at [liwan.dev](https://liwan.dev)
+- A simple and clean UI

web/public/favicon.ico

@@ -138,7 +138,7 @@ export const useProjectData = ({
 		refetchInterval,
 		staleTime,
 		enabled: project !== undefined,
-		queryKey: ["project_graph", project?.id, range, graphRange, metric, dataPoints],
+		queryKey: ["project_graph", project?.id, range, graphRange, metric, filters, dataPoints],
 		queryFn: () =>
 			api["/api/dashboard/project/{project_id}/graph"]
 				.post({ json: { range, metric, dataPoints, filters }, params: { project_id: project?.id ?? "" } })

web/src/api/hooks.ts

@@ -15,6 +15,7 @@
   .tabsList > button {
     all: unset;
     cursor: pointer;
+    user-select: none;
 
     &[aria-selected="true"] {
       text-decoration: underline;
@@ -80,6 +81,19 @@
   display: flex;
   flex-direction: column;
   min-height: calc(var(--count) * (2.1rem + 0.2rem));
+  position: relative;
+
+  .spinner {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  &.loading {
+    .dimensionRow {
+      opacity: 0.2;
+    }
+  }
 }
 
 .showMore {
@@ -127,6 +141,7 @@
   all: unset;
   position: relative;
   color: var(--pico-h2-color);
+  padding: 0.5rem 0;
 
   &:hover {
     text-decoration: underline;

web/src/components/dimensions/dimensions.module.css

@@ -1,20 +1,11 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import { LinkIcon, SquareArrowOutUpRightIcon, ZoomIn } from "lucide-react";
+import { LinkIcon, SquareArrowOutUpRightIcon } from "lucide-react";
 import styles from "./dimensions.module.css";
 
-import {
-	type DateRange,
-	type Dimension,
-	type DimensionTableRow,
-	type Metric,
-	type ProjectResponse,
-	dimensionNames,
-	metricNames,
-	useDimension,
-} from "../../api";
+import { type Dimension, type DimensionTableRow, dimensionNames, metricNames, useDimension } from "../../api";
 
 import { BrowserIcon, MobileDeviceIcon, OSIcon, ReferrerIcon } from "../icons";
-import { countryCodeToFlag, formatFullUrl, formatHost, formatPath, getHref, tryParseUrl } from "../../utils";
+import { cls, countryCodeToFlag, formatHost, formatPath, getHref, tryParseUrl } from "../../utils";
 import { DetailsModal } from "./modal";
 import { formatMetricVal } from "../../utils";
 import type { ProjectQuery } from "../project";
@@ -85,11 +76,15 @@ export const DimensionTabs = ({
 
 export const DimensionTable = (props: DimensionProps) => {
 	const { data, biggest, order, isLoading } = useDimension({ dimension: props.dimension, ...props.query });
-
 	const dataTruncated = data?.slice(0, 6);
+
 	return (
 		<>
-			<div className={styles.dimensionTable} style={{ "--count": 6 } as React.CSSProperties}>
+			<div
+				className={cls(styles.dimensionTable, isLoading && styles.loading)}
+				style={{ "--count": 6 } as React.CSSProperties}
+			>
+				{isLoading && <div className={cls("loading-spinner", styles.spinner)} />}
 				{dataTruncated?.map((d) => {
 					return (
 						<div

web/src/components/dimensions/index.tsx

@@ -5,19 +5,19 @@ import styles from "./dimensions.module.css";
 import { cls, formatMetricVal } from "../../utils";
 import { Dialog } from "../dialog";
 import { DimensionLabel, DimensionValueBar } from ".";
-import {
-	dimensionNames,
-	metricNames,
-	useDimension,
-	type DateRange,
-	type Dimension,
-	type Metric,
-	type ProjectResponse,
-} from "../../api";
+import { dimensionNames, metricNames, useDimension, type Dimension, type DimensionTableRow } from "../../api";
 import { useDeferredValue, useMemo, useState } from "react";
 import type { ProjectQuery } from "../project";
 
-export const DetailsModal = ({ dimension, query }: { dimension: Dimension; query: ProjectQuery }) => {
+export const DetailsModal = ({
+	dimension,
+	query,
+	onSelect,
+}: {
+	dimension: Dimension;
+	query: ProjectQuery;
+	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
+}) => {
 	const { data, biggest, order, isLoading } = useDimension({ dimension, ...query });
 
 	const [filter, setFilter] = useState("");
@@ -64,7 +64,7 @@ export const DetailsModal = ({ dimension, query }: { dimension: Dimension; query
 							className={styles.dimensionRow}
 						>
 							<DimensionValueBar value={d.value} biggest={biggest}>
-								<DimensionLabel dimension={dimension} value={d} />
+								<DimensionLabel dimension={dimension} value={d} onSelect={() => onSelect(d, dimension)} />
 							</DimensionValueBar>
 							<div>{formatMetricVal(d.value)}</div>
 						</div>

web/src/components/dimensions/modal.tsx

@@ -5,6 +5,7 @@ import { ResponsiveLine, type SliceTooltipProps } from "@nivo/line";
 import { addMonths } from "date-fns";
 import type { DataPoint } from ".";
 import { formatMetricVal } from "../../utils";
+import { useWindowSize } from "@uidotdev/usehooks";
 
 export type GraphRange = "year" | "month" | "day" | "hour";
 
@@ -47,11 +48,19 @@ export const LineGraph = ({
 	const max = useMemo(() => Math.max(...data.map((d) => d.y)), [data]);
 	const yCount = 5;
 
+	const size = useWindowSize();
+	let xCount = Math.min(data.length, 8);
+	if (size.width && size.width < 1000) {
+		xCount = Math.min(data.length, 6);
+	} else if (size.width && size.width < 600) {
+		xCount = Math.min(data.length, 4);
+	}
+
 	return (
 		<ResponsiveLine
 			data={[{ data, id: "data", color: "hsl(0, 70%, 50%)" }]}
 			margin={{ top: 10, right: 40, bottom: 30, left: 40 }}
-			xScale={data.length > 14 ? { type: "time" } : { type: "point" }}
+			xScale={{ type: "time" }}
 			yScale={{
 				type: "linear",
 				nice: true,
@@ -68,6 +77,7 @@ export const LineGraph = ({
 			axisBottom={{
 				legend: "",
 				format: (value: Date) => formatDate(value, range),
+				tickValues: xCount,
 			}}
 			axisLeft={{
 				legend: "",

web/src/components/graph/graph.tsx

@@ -1,20 +1,20 @@
 import styles from "./project.module.css";
 import _map from "./worldmap.module.css";
 
-import { useLocalStorage } from "@uidotdev/usehooks";
 import { Suspense, lazy, useEffect, useState } from "react";
+import { useLocalStorage } from "@uidotdev/usehooks";
 
+import { type RangeName, resolveRange } from "../api/ranges";
 import { metricNames, useDimension, useProject, useProjectData } from "../api";
 import type { DimensionFilter, DateRange, Metric, ProjectResponse, DimensionTableRow, Dimension } from "../api";
-import { type RangeName, resolveRange } from "../api/ranges";
 
 import { cls } from "../utils";
-import { DimensionCard, DimensionTabs, DimensionTabsCard, cardStyles } from "./dimensions";
+import { LineGraph } from "./graph";
 import { SelectRange } from "./project/range";
 import { ProjectHeader } from "./project/project";
 import { SelectMetrics } from "./project/metric";
-import { LineGraph } from "./graph";
 import { SelectFilters } from "./project/filter";
+import { DimensionCard, DimensionTabs, DimensionTabsCard, cardStyles } from "./dimensions";
 
 const WorldMap = lazy(() => import("./worldmap").then((module) => ({ default: module.WorldMap })));
 

web/src/components/project.tsx

@@ -6,10 +6,6 @@ form.password {
   label {
     width: 100%;
   }
-
-  h2 {
-    font-size: 1.2rem;
-  }
 }
 
 .header {
@@ -39,4 +35,22 @@ form.password {
     flex-direction: column;
     width: 100%;
   }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  code {
+    font-size: 0.9rem;
+    background-color: var(--pico-background-color);
+    padding: 1rem 1rem;
+    border-radius: var(--pico-border-radius);
+
+    .tag {
+      color: var(--pico-primary-background);
+    }
+    .entity {
+      color: var(--pico-secondary-inverse);
+    }
+  }
 }

web/src/components/settings/me.module.css

@@ -47,6 +47,22 @@ export const MyAccount = () => {
 					</div>
 				</div>
 			</article>
+			<article>
+				<h2>Snippet code</h2>
+				<p>
+					You can copy the tracking snippet for a specific entity <a href="/settings/entities">here</a>, use the{" "}
+					<a href="https://npmjs.com/package/liwan-tracker">liwan-tracker</a> npm package, or use the following code:
+				</p>
+				<code>
+					<span className={styles.tag}>{"<script"}</span> type="module" data-entity="
+					<span className={styles.entity}>YOUR_ENTITY_ID</span>" src="
+					{window.location.origin}/script.js"
+					<span className={styles.tag}>
+						{">"}
+						{"</script>"}
+					</span>
+				</code>
+			</article>
 			<article>
 				<form className={styles.password} onSubmit={handleSubmit} ref={formRef}>
 					<h2>Update Password</h2>