@geops/rvf-mobility-web-component 0.1.24 → 0.1.26

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RouteIcon/RouteIcon.tsx

@@ -7,6 +7,7 @@ import {
 import { JSX, PreactDOMAttributes } from "preact";
 
 import getMainColorForVehicle from "../utils/getMainColorForVehicle";
+import getTextColor from "../utils/getTextColor";
 import getTextFontForVehicle from "../utils/getTextFontForVehicle";
 import getTextForVehicle from "../utils/getTextForVehicle";
 
@@ -32,10 +33,11 @@ function RouteIcon({
     departure?.line ||
     stopSequence?.line ||
     trajectory?.properties?.line;
+  const type = stopSequence?.type || trajectory?.type;
   const backgroundColor = getMainColorForVehicle(
     line || departure || stopSequence || trajectory,
   );
-  const color = lineToUse?.text_color || "black";
+  const color = lineToUse?.text_color || getTextColor(type);
   let borderColor = lineToUse?.stroke || "black";
   const text = getTextForVehicle(
     line || departure || stopSequence || trajectory,
@@ -50,7 +52,7 @@ function RouteIcon({
 
   return (
     <span
-      className="flex h-[40px] min-w-[40px] items-center justify-center rounded-full border-2 px-1"
+      className="flex h-[40px] min-w-[40px] items-center justify-center rounded-full border px-1"
       style={{
         backgroundColor,
         borderColor,

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -55,6 +55,7 @@ import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
 import { RVF_EXTENT_3857, RVF_LAYERS_TITLES } from "../utils/constants";
+import fullTrajectoryStyle from "../utils/fullTrajectoryStyle";
 import getBgColor from "../utils/getBgColor";
 import getFeatureInformationTitle from "../utils/getFeatureInformationTitle";
 import { getRadius } from "../utils/getRadius";
@@ -98,6 +99,7 @@ const realtimeLayerProps = {
   bboxParameters: {
     line_tags: "RVF",
   },
+  fullTrajectoryStyle: fullTrajectoryStyle,
   style: realtimeRVFStyle,
   styleOptions: {
     getBgColor: getBgColor,
@@ -513,10 +515,10 @@ function RvfMobilityMap({
                   title={RVF_LAYERS_TITLES.sharedMobility}
                 />
 
-                <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
+                <div className="pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
                   <ScaleLine className="bg-slate-50/70" />
                   <Copyright
-                    className="bg-slate-50/70"
+                    className="pointer-events-auto bg-slate-50/70"
                     options={copyrightOptions}
                   />
                 </div>

package/src/utils/fullTrajectoryStyle.ts

@@ -0,0 +1,57 @@
+import type { FeatureLike } from "ol/Feature";
+
+import { Circle, Fill, Stroke, Style } from "ol/style";
+
+const borderStyle = new Style({
+  image: new Circle({
+    fill: new Fill({
+      color: "#000000",
+    }),
+    radius: 5,
+  }),
+  stroke: new Stroke({
+    color: "#000000",
+    width: 6,
+  }),
+  zIndex: 2,
+});
+
+const fullTrajectoryStyle = (
+  feature: FeatureLike,
+  resolution: number,
+  options: { getBgColor: (type: string, line: { name: string }) => string },
+): Style[] => {
+  let lineColor = "#ffffff"; // white
+
+  const type = feature.get("type");
+  let stroke = feature.get("stroke");
+
+  if (stroke && stroke[0] !== "#") {
+    stroke = `#${stroke}`;
+  }
+  console.log(feature.getProperties());
+  lineColor =
+    stroke || options?.getBgColor(type, { name: feature.get("line_name") });
+
+  // Don't allow white lines, use red instead.
+  lineColor = /#ffffff/i.test(lineColor) ? "#ff0000" : lineColor;
+
+  const style = [
+    borderStyle,
+    new Style({
+      image: new Circle({
+        fill: new Fill({
+          color: lineColor,
+        }),
+        radius: 4,
+      }),
+      stroke: new Stroke({
+        color: lineColor,
+        width: 4,
+      }),
+      zIndex: 3,
+    }),
+  ];
+  return style;
+};
+export default fullTrajectoryStyle;

package/src/utils/getDelayColor.test.ts

@@ -2,6 +2,8 @@ import getDelayColor from "./getDelayColor";
 
 describe("getDelayColor", () => {
   it("returns green", () => {
+    expect(getDelayColor(0.5 * 60 * 1000)).toBe("transparent");
+    expect(getDelayColor(2.49 * 60 * 1000)).toBe("transparent");
     expect(getDelayColor(0)).toBe("transparent");
   });
   // it("returns yellow", () => {
@@ -9,8 +11,7 @@ describe("getDelayColor", () => {
   //   expect(getDelayColor(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
   // });
   it("returns orange", () => {
-    expect(getDelayColor(0.5 * 60 * 1000)).toBe("#ea580c");
-    expect(getDelayColor(2.49 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColor(3 * 60 * 1000)).toBe("#ea580c");
     expect(getDelayColor(5 * 60 * 1000)).toBe("#ea580c");
   });
   it("returns red", () => {

package/src/utils/getDelayColor.ts

@@ -10,7 +10,7 @@ const getDelayColor = (timeInMs: number, isText = false) => {
   if (minutes > 5) {
     return "#dc2626"; // "text-red-600";
   }
-  if (minutes >= 1) {
+  if (minutes >= 3) {
     return "#ea580c"; // "text-orange-600";
     // return "#d97706"; // "text-amber-600";
   }

package/src/utils/getDelayColorForVehicle.test.ts

@@ -11,6 +11,7 @@ describe("getDelayColorForVehicle", () => {
 
   it("returns transparent", () => {
     expect(getDelayColorForVehicle(0)).toBe("transparent");
+    expect(getDelayColorForVehicle(1 * 60 * 1000)).toBe("transparent");
     expect(getDelayColorForVehicle(0.4 * 60 * 1000)).toBe("transparent");
   });
   // it("returns green", () => {
@@ -22,7 +23,6 @@ describe("getDelayColorForVehicle", () => {
   //   expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
   // });
   it("returns orange", () => {
-    expect(getDelayColorForVehicle(1 * 60 * 1000)).toBe("#ea580c");
     expect(getDelayColorForVehicle(3 * 60 * 1000)).toBe("#ea580c");
     expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ea580c");
     expect(getDelayColorForVehicle(5 * 60 * 1000)).toBe("#ea580c");