aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/frontend/app')
-rw-r--r--src/frontend/app/api/schema.ts12
-rw-r--r--src/frontend/app/components/stop/StopUsageModal.tsx151
-rw-r--r--src/frontend/app/i18n/locales/en-GB.json15
-rw-r--r--src/frontend/app/i18n/locales/es-ES.json15
-rw-r--r--src/frontend/app/i18n/locales/gl-ES.json15
-rw-r--r--src/frontend/app/routes/map.tsx12
-rw-r--r--src/frontend/app/routes/stops-$id.tsx43
7 files changed, 255 insertions, 8 deletions
diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index d9aec89..c0c97a4 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -36,8 +36,14 @@ export const ShiftBadgeSchema = z.object({
export const PositionSchema = z.object({
latitude: z.number(),
longitude: z.number(),
- orientationDegrees: z.number(),
- shapeIndex: z.number(),
+ orientationDegrees: z.number().optional().nullable(),
+ shapeIndex: z.number().optional().nullable(),
+});
+
+export const BusStopUsagePointSchema = z.object({
+ h: z.number().int(),
+ t: z.number().int(),
+ d: z.number().int(),
});
export const VehicleInformationSchema = z.object({
@@ -67,6 +73,7 @@ export const StopArrivalsResponseSchema = z.object({
stopLocation: PositionSchema.optional().nullable(),
routes: z.array(RouteInfoSchema),
arrivals: z.array(ArrivalSchema),
+ usage: z.array(BusStopUsagePointSchema).optional().nullable(),
});
export type RouteInfo = z.infer<typeof RouteInfoSchema>;
@@ -77,6 +84,7 @@ export type DelayBadge = z.infer<typeof DelayBadgeSchema>;
export type ShiftBadge = z.infer<typeof ShiftBadgeSchema>;
export type Position = z.infer<typeof PositionSchema>;
export type Arrival = z.infer<typeof ArrivalSchema>;
+export type BusStopUsagePoint = z.infer<typeof BusStopUsagePointSchema>;
export type StopArrivalsResponse = z.infer<typeof StopArrivalsResponseSchema>;
// Transit Routes
diff --git a/src/frontend/app/components/stop/StopUsageModal.tsx b/src/frontend/app/components/stop/StopUsageModal.tsx
new file mode 100644
index 0000000..41db64a
--- /dev/null
+++ b/src/frontend/app/components/stop/StopUsageModal.tsx
@@ -0,0 +1,151 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Sheet } from "react-modal-sheet";
+import type { BusStopUsagePoint } from "~/api/schema";
+
+interface StopUsageModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ usage: BusStopUsagePoint[];
+}
+
+export const StopUsageModal = ({
+ isOpen,
+ onClose,
+ usage,
+}: StopUsageModalProps) => {
+ const { t } = useTranslation();
+
+ // Get current day of week (1=Monday, 7=Sunday)
+ // JS getDay(): 0=Sunday, 1=Monday ... 6=Saturday
+ const currentJsDay = new Date().getDay();
+ const initialDay = currentJsDay === 0 ? 7 : currentJsDay;
+
+ const [selectedDay, setSelectedDay] = useState<number>(initialDay);
+
+ const days = [
+ { id: 1, label: t("days.monday") },
+ { id: 2, label: t("days.tuesday") },
+ { id: 3, label: t("days.wednesday") },
+ { id: 4, label: t("days.thursday") },
+ { id: 5, label: t("days.friday") },
+ { id: 6, label: t("days.saturday") },
+ { id: 7, label: t("days.sunday") },
+ ];
+
+ const filteredData = useMemo(() => {
+ const data = usage.filter((u) => u.d === selectedDay);
+ // Ensure all 24 hours are represented
+ const fullDay = Array.from({ length: 24 }, (_, h) => {
+ const match = data.find((u) => u.h === h);
+ return { h, t: match?.t ?? 0 };
+ });
+ return fullDay;
+ }, [usage, selectedDay]);
+
+ const maxUsage = useMemo(() => {
+ const max = Math.max(...filteredData.map((d) => d.t));
+ return max === 0 ? 1 : max;
+ }, [filteredData]);
+
+ // Use a square root scale to make smaller values more visible
+ const getScaledHeight = (value: number) => {
+ if (value <= 0) return 0;
+ const scaledValue = Math.sqrt(value);
+ const scaledMax = Math.sqrt(maxUsage);
+ return (scaledValue / scaledMax) * 100;
+ };
+
+ return (
+ <Sheet isOpen={isOpen} onClose={onClose} detent="content">
+ <Sheet.Container className="bg-white! dark:bg-black! !rounded-t-[20px]">
+ <Sheet.Header className="bg-white! dark:bg-black! !rounded-t-[20px]" />
+ <Sheet.Content className="p-6 pb-12 text-slate-900 dark:text-slate-100">
+ <div className="flex flex-col gap-6">
+ <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+ <h2 className="text-xl font-bold">
+ {t("stop.usage_title", "Ocupación por horas")}
+ </h2>
+ <div className="flex items-center gap-1 rounded-full border border-border bg-background/90 p-1 shadow-sm backdrop-blur w-fit">
+ {days.map((day) => (
+ <button
+ key={day.id}
+ type="button"
+ onClick={() => setSelectedDay(day.id)}
+ className={`h-8 min-w-8 px-2 rounded-full flex items-center justify-center transition-colors text-xs font-bold ${
+ selectedDay === day.id
+ ? "bg-primary text-white"
+ : "text-muted hover:text-text"
+ }`}
+ >
+ {day.label}
+ </button>
+ ))}
+ </div>
+ </div>
+
+ <div className="p-6 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-border/50">
+ <div className="h-64 flex items-end gap-1.5 px-1 relative">
+ {/* Horizontal grid lines */}
+ <div className="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20 py-1">
+ <div className="w-full border-t border-slate-400 border-dashed"></div>
+ <div className="w-full border-t border-slate-400 border-dashed"></div>
+ <div className="w-full border-t border-slate-400 border-dashed"></div>
+ </div>
+
+ {filteredData.map((data) => {
+ const height = getScaledHeight(data.t);
+ const isServiceHour = data.h >= 7 && data.h < 23;
+
+ return (
+ <div
+ key={data.h}
+ className="group relative flex-1 flex flex-col items-center h-full justify-end"
+ >
+ <div
+ className={`w-full rounded-t-md transition-all duration-500 ease-out min-h-[2px] ${
+ isServiceHour
+ ? "bg-primary/60 group-hover:bg-primary shadow-[0_0_10px_rgba(var(--primary-rgb),0.2)]"
+ : "bg-slate-300 dark:bg-slate-700 group-hover:bg-slate-400"
+ }`}
+ style={{ height: `${height}%` }}
+ >
+ {data.t > 0 && (
+ <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-[10px] px-2 py-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10 shadow-lg border border-white/10">
+ {data.t} {t("stop.usage_passengers", "pas.")}
+ </div>
+ )}
+ </div>
+ {data.h % 4 === 0 && (
+ <span className="text-[10px] font-medium text-slate-500 mt-2 absolute -bottom-6">
+ {data.h}h
+ </span>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ <div className="h-6"></div> {/* Spacer for hour labels */}
+ </div>
+
+ <div className="flex flex-col gap-2">
+ <p className="text-[10px] text-slate-400 dark:text-slate-500 text-center uppercase tracking-wider font-semibold">
+ {t(
+ "stop.usage_scale_info",
+ "Escala no lineal para resaltar valores bajos"
+ )}
+ </p>
+ <p className="text-xs text-slate-500 dark:text-slate-400 text-center italic leading-relaxed">
+ {t(
+ "stop.usage_disclaimer",
+ "Datos históricos aproximados de ocupación."
+ )}
+ </p>
+ </div>
+ </div>
+ </Sheet.Content>
+ </Sheet.Container>
+ <Sheet.Backdrop onTap={onClose} />
+ </Sheet>
+ );
+};
diff --git a/src/frontend/app/i18n/locales/en-GB.json b/src/frontend/app/i18n/locales/en-GB.json
index f3d15b3..6cb939d 100644
--- a/src/frontend/app/i18n/locales/en-GB.json
+++ b/src/frontend/app/i18n/locales/en-GB.json
@@ -222,5 +222,20 @@
"gps_quality": "GPS Quality",
"gps_reliable": "GPS data is from the current trip, and the position is a reliable estimate.",
"gps_imprecise": "GPS data seems to indicate the bus is on the previous trip (possibly from another line). The position might not be reliable."
+ },
+ "days": {
+ "monday": "Mo",
+ "tuesday": "Tu",
+ "wednesday": "We",
+ "thursday": "Th",
+ "friday": "Fr",
+ "saturday": "Sa",
+ "sunday": "Su"
+ },
+ "stop": {
+ "usage_title": "Hourly occupancy",
+ "usage_passengers": "pax",
+ "usage_disclaimer": "Based on average historical occupancy from recent months available at datos.vigo.org. Does not reflect real-time occupancy.",
+ "usage_scale_info": "Graph uses a non-linear scale to better highlight lower occupancy values."
}
}
diff --git a/src/frontend/app/i18n/locales/es-ES.json b/src/frontend/app/i18n/locales/es-ES.json
index ea74031..5334fe1 100644
--- a/src/frontend/app/i18n/locales/es-ES.json
+++ b/src/frontend/app/i18n/locales/es-ES.json
@@ -222,5 +222,20 @@
"gps_quality": "Calidad GPS",
"gps_reliable": "Los datos del GPS son del viaje actual, y la posición es una estimación fiable.",
"gps_imprecise": "Los datos del GPS parecen indicar que el autobús está realizando el viaje anterior (posiblemente de otra línea). La posición puede no ser fiable."
+ },
+ "days": {
+ "monday": "L",
+ "tuesday": "M",
+ "wednesday": "X",
+ "thursday": "J",
+ "friday": "V",
+ "saturday": "S",
+ "sunday": "D"
+ },
+ "stop": {
+ "usage_title": "Ocupación por horas",
+ "usage_passengers": "pas.",
+ "usage_disclaimer": "Basado en la ocupación histórica promedio de los últimos meses disponible en datos.vigo.org. No refleja la ocupación en tiempo real.",
+ "usage_scale_info": "La escala del gráfico no es lineal para resaltar mejor los valores bajos."
}
}
diff --git a/src/frontend/app/i18n/locales/gl-ES.json b/src/frontend/app/i18n/locales/gl-ES.json
index 7072f55..132ab0b 100644
--- a/src/frontend/app/i18n/locales/gl-ES.json
+++ b/src/frontend/app/i18n/locales/gl-ES.json
@@ -215,5 +215,20 @@
"gps_quality": "Calidade GPS",
"gps_reliable": "Os datos do GPS son da viaxe actual, e a posición é unha estimación fiable.",
"gps_imprecise": "Os datos do GPS parecen indicar que o autobús está a realizar a viaxe anterior (posiblemente doutra liña). A posición pode non ser fiable."
+ },
+ "days": {
+ "monday": "L",
+ "tuesday": "M",
+ "wednesday": "Mc",
+ "thursday": "X",
+ "friday": "V",
+ "saturday": "S",
+ "sunday": "D"
+ },
+ "stop": {
+ "usage_title": "Ocupación por horas",
+ "usage_passengers": "pas.",
+ "usage_disclaimer": "Baseado na ocupación histórica media dos últimos meses dispoñible en datos.vigo.org. Non reflicte a ocupación en tempo real.",
+ "usage_scale_info": "A escala do gráfico non é lineal para resaltar mellor os valores baixos."
}
}
diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx
index c9c4850..2686222 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -307,6 +307,18 @@ export default function StopMap() {
"text-anchor": "center",
"text-justify": "center",
"text-size": ["interpolate", ["linear"], ["zoom"], 11, 8, 22, 16],
+ "symbol-sort-key": [
+ "match",
+ ["get", "transitKind"],
+ "coach",
+ 3,
+ "train",
+ 2,
+ "bus",
+ 1,
+ 0,
+ ],
+ "text-allow-overlap": false,
}}
paint={{
"text-color": [
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index bff8c7f..8f84764 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -1,18 +1,31 @@
-import { CircleHelp, Eye, EyeClosed, Star } from "lucide-react";
+import {
+ ChartNoAxesColumn,
+ CircleHelp,
+ Eye,
+ EyeClosed,
+ Star,
+} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router";
import { fetchArrivals } from "~/api/arrivals";
-import { type Arrival, type Position, type RouteInfo } from "~/api/schema";
+import {
+ type Arrival,
+ type Position,
+ type RouteInfo,
+ type StopArrivalsResponse,
+} from "~/api/schema";
import { ArrivalList } from "~/components/arrivals/ArrivalList";
import { ErrorDisplay } from "~/components/ErrorDisplay";
import LineIcon from "~/components/LineIcon";
import { PullToRefresh } from "~/components/PullToRefresh";
import { StopHelpModal } from "~/components/stop/StopHelpModal";
import { StopMapModal } from "~/components/stop/StopMapModal";
+import { StopUsageModal } from "~/components/stop/StopUsageModal";
import { usePageTitle } from "~/contexts/PageTitleContext";
import { formatHex } from "~/utils/colours";
import StopDataProvider from "../data/StopDataProvider";
+import "../tailwind-full.css";
import "./stops-$id.css";
export const getArrivalId = (a: Arrival): string => {
@@ -36,7 +49,7 @@ export default function Estimates() {
);
// Data state
- const [data, setData] = useState<Arrival[] | null>(null);
+ const [data, setData] = useState<StopArrivalsResponse | null>(null);
const [dataDate, setDataDate] = useState<Date | null>(null);
const [dataLoading, setDataLoading] = useState(true);
const [dataError, setDataError] = useState<ErrorInfo | null>(null);
@@ -45,6 +58,7 @@ export default function Estimates() {
const [isManualRefreshing, setIsManualRefreshing] = useState(false);
const [isMapModalOpen, setIsMapModalOpen] = useState(false);
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
+ const [isUsageVisible, setIsUsageVisible] = useState(false);
const [isReducedView, setIsReducedView] = useState(false);
const [selectedArrivalId, setSelectedArrivalId] = useState<
string | undefined
@@ -84,7 +98,7 @@ export default function Estimates() {
setDataError(null);
const response = await fetchArrivals(stopId, false);
- setData(response.arrivals);
+ setData(response);
setStopName(response.stopName);
setApiRoutes(response.routes);
if (response.stopLocation) {
@@ -179,6 +193,15 @@ export default function Estimates() {
onClick={toggleFavourite}
/>
+ {data.usage && data.usage.length > 0 && (
+ <ChartNoAxesColumn
+ className={`cursor-pointer transition-colors ${
+ isUsageVisible ? "text-primary" : "text-muted"
+ }`}
+ onClick={() => setIsUsageVisible(!isUsageVisible)}
+ />
+ )}
+
<CircleHelp
className="text-muted cursor-pointer"
onClick={() => setIsHelpModalOpen(true)}
@@ -210,7 +233,7 @@ export default function Estimates() {
</div>
</div>
<ArrivalList
- arrivals={data}
+ arrivals={data.arrivals}
reduced={isReducedView}
onArrivalClick={(arrival) => {
setSelectedArrivalId(getArrivalId(arrival));
@@ -230,7 +253,7 @@ export default function Estimates() {
longitude: apiLocation?.longitude,
lines: [],
}}
- circulations={(data ?? []).map((a) => ({
+ circulations={(data?.arrivals ?? []).map((a) => ({
id: getArrivalId(a),
currentPosition: a.currentPosition ?? undefined,
stopShapeIndex: a.stopShapeIndex ?? undefined,
@@ -248,6 +271,14 @@ export default function Estimates() {
isOpen={isHelpModalOpen}
onClose={() => setIsHelpModalOpen(false)}
/>
+
+ {data?.usage && (
+ <StopUsageModal
+ isOpen={isUsageVisible}
+ onClose={() => setIsUsageVisible(false)}
+ usage={data.usage}
+ />
+ )}
</div>
</PullToRefresh>
);
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 03:43:05 +0000