mobility-toolbox-js 1.6.0-beta.4 → 1.6.0-beta.8

package/common/trackerConfig.js

@@ -12,19 +12,23 @@ const trackerRadiusMapping = {
 };
 
 /**
+ * Trajserv value: 'Tram',  'Subway / Metro / S-Bahn',  'Train', 'Bus', 'Ferry', 'Cable Car', 'Gondola', 'Funicular', 'Long distance bus', 'Rail',
+ * New endpoint use Rail instead of Train.
+ * New tracker values:  null, "tram", "subway", "rail", "bus", "ferry", "cablecar", "gondola", "funicular", "coach".
+ *
  * @ignore
  */
 export const types = [
-  'Tram',
-  'Subway / Metro / S-Bahn',
-  'Train',
-  'Bus',
-  'Ferry',
-  'Cable Car',
-  'Gondola',
-  'Funicular',
-  'Long distance bus',
-  'Rail', // New endpoint use Rail instead of Train.
+  /^Tram/i,
+  /^Subway( \/ Metro \/ S-Bahn)?/i,
+  /^Train/i,
+  /^Bus/i,
+  /^Ferry/i,
+  /^Cable ?Car/i,
+  /^Gondola/i,
+  /^Funicular/i,
+  /^(Long distance bus|coach)/i,
+  /^Rail/i, // New endpoint use Rail instead of Train.
 ];
 
 /**
@@ -89,10 +93,9 @@ export const timeSteps = [
 /**
  * @ignore
  */
-const getTypeIndex = (type) => {
+export const getTypeIndex = (type) => {
   if (typeof type === 'string') {
-    const matched = types.find((t) => new RegExp(type).test(t));
-    return types.indexOf(matched);
+    return types.findIndex((t) => t.test(type));
   }
   return type;
 };

package/common/trackerConfig.test.js

@@ -0,0 +1,38 @@
+import { getTypeIndex } from './trackerConfig';
+
+describe('trackerConfig', () => {
+  describe('#getTypeIndex()', () => {
+    test("retrurn the type is it's not a string", () => {
+      const obj = { foo: 'foo' };
+      expect(getTypeIndex(obj)).toBe(obj);
+      expect(getTypeIndex(0)).toBe(0);
+      expect(getTypeIndex(null)).toBe(null);
+      expect(getTypeIndex(undefined)).toBe(undefined);
+    });
+
+    test('find good index for old trajserv values', () => {
+      expect(getTypeIndex('Tram')).toBe(0);
+      expect(getTypeIndex('Subway / Metro / S-Bahn')).toBe(1);
+      expect(getTypeIndex('Train')).toBe(2);
+      expect(getTypeIndex('Bus')).toBe(3);
+      expect(getTypeIndex('Ferry')).toBe(4);
+      expect(getTypeIndex('Cable Car')).toBe(5);
+      expect(getTypeIndex('Gondola')).toBe(6);
+      expect(getTypeIndex('Funicular')).toBe(7);
+      expect(getTypeIndex('Long distance bus')).toBe(8);
+      expect(getTypeIndex('Rail')).toBe(9);
+    });
+
+    test('find good index for new tracker values', () => {
+      expect(getTypeIndex('tram')).toBe(0);
+      expect(getTypeIndex('subway')).toBe(1);
+      expect(getTypeIndex('bus')).toBe(3);
+      expect(getTypeIndex('ferry')).toBe(4);
+      expect(getTypeIndex('cablecar')).toBe(5);
+      expect(getTypeIndex('gondola')).toBe(6);
+      expect(getTypeIndex('funicular')).toBe(7);
+      expect(getTypeIndex('coach')).toBe(8);
+      expect(getTypeIndex('rail')).toBe(9);
+    });
+  });
+});

package/common/utils/createTrackerFilters.js

@@ -0,0 +1,82 @@
+/**
+ * Return a filter functions based on some parameters of a vehicle.
+ *
+ * @param {string|Array<string>} line - A list of vehicle's name to filter. Names can be separated by a comma. Ex: 'S1,S2,S3'
+ * @param {string|Array<string} route - A list of vehicle's route (contained in routeIdentifier property) to filter. Indentifiers can be separated by a comma. Ex: 'id1,id2,id3'
+ * @param {string|Array<string} operator  A list of vehicle's operator to filter. Operators can be separated by a comma. Ex: 'SBB,DB'
+ * @param {Regexp} regexLine - A regex aplly of vehcile's name.
+ * @private
+ */
+const createFilters = (line, route, operator, regexLine) => {
+  const filterList = [];
+
+  if (!line && !route && !operator && !regexLine) {
+    return null;
+  }
+
+  if (regexLine) {
+    const regexLineList =
+      typeof regexLine === 'string' ? [regexLine] : regexLine;
+    const lineFilter = (item) => {
+      const name = item.name || (item.line && item.line.name) || '';
+      if (!name) {
+        return false;
+      }
+      return regexLineList.some((regexStr) =>
+        new RegExp(regexStr, 'i').test(name),
+      );
+    };
+    filterList.push(lineFilter);
+  }
+
+  if (line) {
+    const lineFiltersList = typeof line === 'string' ? line.split(',') : line;
+    const lineList = lineFiltersList.map((l) =>
+      l.replace(/\s+/g, '').toUpperCase(),
+    );
+    const lineFilter = (item) => {
+      const name = (
+        item.name ||
+        (item.line && item.line.name) ||
+        ''
+      ).toUpperCase();
+      if (!name) {
+        return false;
+      }
+      return lineList.includes(name);
+    };
+    filterList.push(lineFilter);
+  }
+
+  if (route) {
+    const routes = typeof route === 'string' ? route.split(',') : route;
+    const routeList = routes.map((item) => parseInt(item, 10));
+    const routeFilter = (item) => {
+      const routeId = parseInt(item.routeIdentifier.split('.')[0], 10);
+      return routeList.includes(routeId);
+    };
+    filterList.push(routeFilter);
+  }
+
+  if (operator) {
+    const operatorList = typeof operator === 'string' ? [operator] : operator;
+    const operatorFilter = (item) =>
+      operatorList.some((op) => new RegExp(op, 'i').test(item.operator));
+    filterList.push(operatorFilter);
+  }
+
+  if (!filterList.length) {
+    return null;
+  }
+
+  return (t) => {
+    for (let i = 0; i < filterList.length; i += 1) {
+      if (!filterList[i](t)) {
+        return false;
+      }
+    }
+    return true;
+  };
+};
+
+export default createFilters;

package/common/utils/createTrackerFilters.test.js

@@ -0,0 +1,89 @@
+import createTrackerFilters from './createTrackerFilters';
+
+const u1 = {
+  routeIdentifier: '001.000827.004:7',
+  operator: 'FoO',
+  line: {
+    name: 'U1',
+  },
+};
+const ireta = {
+  routeIdentifier: '0022.000827.004:7',
+  operator: 'BAR',
+  line: {
+    name: 'IRETA',
+  },
+};
+const arb = {
+  routeIdentifier: '00333.000827.004:7',
+  operator: 'qux',
+  line: {
+    name: 'ARB',
+  },
+};
+
+const trajectories = [u1, ireta, arb];
+
+describe('#createTrackerFilter()', () => {
+  test('returns null', () => {
+    const filterFunc = createTrackerFilters();
+    expect(filterFunc).toBe(null);
+  });
+
+  describe('using line', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters('u1,foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(['u1', 'foo', 'IRETA']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using route identifier', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters(null, '1,foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(null, ['22', 'foo', '1']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using operator', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters(null, null, 'foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(null, null, ['bar', 'foo', '1']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using regexLine', () => {
+    test('as string', () => {
+      const filterFunc = createTrackerFilters(
+        null,
+        null,
+        null,
+        '^(S|R$|RE|PE|D|IRE|RB|TER)',
+      );
+      expect(trajectories.filter(filterFunc)).toEqual([ireta]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createTrackerFilters(null, null, null, [
+        '^IR',
+        '^ARB$',
+        'foo',
+      ]);
+      expect(trajectories.filter(filterFunc)).toEqual([ireta, arb]);
+    });
+  });
+});

package/common/utils/index.js

@@ -1,3 +1,4 @@
 export { default as getMapboxStyleUrl } from './getMapboxStyleUrl';
 export { default as getMapboxMapCopyrights } from './getMapboxMapCopyrights';
 export { default as removeDuplicate } from './removeDuplicate';
+export { default as trackerStyle } from './trackerStyle';

package/common/utils/trackerStyle.js

@@ -0,0 +1,201 @@
+import {
+  getRadius,
+  getBgColor,
+  getDelayColor,
+  getDelayText,
+  getTextColor,
+  getTextSize,
+} from '../trackerConfig';
+
+const styleCache = {};
+
+const style = (trajectory, viewState, trackerLayer) => {
+  const {
+    hoverVehicleId,
+    selectedVehicleId,
+    useDelayStyle,
+    delayOutlineColor,
+    delayDisplay,
+  } = trackerLayer;
+
+  const {
+    zoom,
+    pixelRatio,
+    operator_provides_realtime_journey: operatorProvidesRealtime,
+  } = viewState;
+  let { line, type } = trajectory;
+  const { id, delay, cancelled = false } = trajectory;
+
+  if (!type) {
+    type = 'Rail';
+  }
+
+  if (!line) {
+    line = {};
+  }
+
+  let { name, text_color: textColor, color } = line;
+
+  if (!name) {
+    name = 'I';
+  }
+
+  if (!textColor) {
+    textColor = '#000000';
+  }
+
+  if (color && color[0] !== '#') {
+    color = `#${color}`;
+  }
+
+  if (textColor[0] !== '#') {
+    textColor = `#${textColor}`;
+  }
+
+  const z = Math.min(Math.floor(zoom || 1), 16);
+  const hover = hoverVehicleId === id;
+  const selected = selectedVehicleId === id;
+
+  // Calcul the radius of the circle
+  let radius = getRadius(type, z) * pixelRatio;
+  const isDisplayStrokeAndDelay = radius >= 7 * pixelRatio;
+  if (hover || selected) {
+    radius = isDisplayStrokeAndDelay
+      ? radius + 5 * pixelRatio
+      : 14 * pixelRatio;
+  }
+  const mustDrawText = radius > 10 * pixelRatio;
+
+  // Optimize the cache key, very important in high zoom level
+  let key = `${z}${type}${color}${hover}${selected}${cancelled}${delay}`;
+
+  if (useDelayStyle) {
+    key += `${operatorProvidesRealtime}`;
+  }
+
+  if (mustDrawText) {
+    key += `${name}${textColor}`;
+  }
+
+  if (!styleCache[key]) {
+    if (radius === 0) {
+      styleCache[key] = null;
+      return null;
+    }
+
+    const margin = 1 * pixelRatio;
+    const radiusDelay = radius + 2;
+    const markerSize = radius * 2;
+
+    const canvas = document.createElement('canvas');
+    // add space for delay information
+    canvas.width = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
+    canvas.height = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
+    const ctx = canvas.getContext('2d');
+    const origin = canvas.width / 2;
+
+    if (isDisplayStrokeAndDelay && delay !== null) {
+      // Draw circle delay background
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(origin, origin, radiusDelay, 0, 2 * Math.PI, false);
+      ctx.fillStyle = getDelayColor(delay, cancelled);
+      ctx.filter = 'blur(1px)';
+      ctx.fill();
+      ctx.restore();
+    }
+
+    // Show delay if feature is hovered or if delay is above 5mins.
+    if (
+      isDisplayStrokeAndDelay &&
+      (hover || delay >= delayDisplay || cancelled)
+    ) {
+      // Draw delay text
+      ctx.save();
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.font = `bold ${Math.max(
+        cancelled ? 19 : 14,
+        Math.min(cancelled ? 19 : 17, radius * 1.2),
+      )}px arial, sans-serif`;
+      ctx.fillStyle = getDelayColor(delay, cancelled, true);
+
+      ctx.strokeStyle = delayOutlineColor;
+      ctx.lineWidth = 1.5 * pixelRatio;
+      const delayText = getDelayText(delay, cancelled);
+      ctx.strokeText(delayText, origin + radiusDelay + margin, origin);
+      ctx.fillText(delayText, origin + radiusDelay + margin, origin);
+      ctx.restore();
+    }
+
+    // Draw colored circle with black border
+    let circleFillColor;
+    if (useDelayStyle) {
+      circleFillColor = getDelayColor(delay, cancelled);
+    } else {
+      circleFillColor = color || getBgColor(type);
+    }
+
+    ctx.save();
+    if (isDisplayStrokeAndDelay || hover || selected) {
+      ctx.lineWidth = 1 * pixelRatio;
+      ctx.strokeStyle = '#000000';
+    }
+    ctx.fillStyle = circleFillColor;
+    ctx.beginPath();
+    ctx.arc(origin, origin, radius, 0, 2 * Math.PI, false);
+    ctx.fill();
+    // Dashed outline if a provider provides realtime but we don't use it.
+    if (
+      isDisplayStrokeAndDelay &&
+      useDelayStyle &&
+      delay === null &&
+      operatorProvidesRealtime === 'yes'
+    ) {
+      ctx.setLineDash([5, 3]);
+    }
+    if (isDisplayStrokeAndDelay || hover || selected) {
+      ctx.stroke();
+    }
+    ctx.restore();
+
+    // Draw text in the circle
+    if (mustDrawText) {
+      const fontSize = Math.max(radius, 10 * pixelRatio);
+      const textSize = getTextSize(ctx, markerSize, name, fontSize);
+
+      // Draw a stroke to the text only if a provider provides realtime but we don't use it.
+      if (
+        useDelayStyle &&
+        delay === null &&
+        operatorProvidesRealtime === 'yes'
+      ) {
+        ctx.save();
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'center';
+        ctx.font = `bold ${textSize + 2}px Arial`;
+        ctx.strokeStyle = circleFillColor;
+        ctx.strokeText(name, origin, origin);
+        ctx.restore();
+      }
+
+      // Draw a text
+      ctx.save();
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+      ctx.fillStyle = !useDelayStyle
+        ? textColor || getTextColor(type)
+        : '#000000';
+      ctx.font = `bold ${textSize}px Arial`;
+      ctx.strokeStyle = circleFillColor;
+      ctx.strokeText(name, origin, origin);
+      ctx.fillText(name, origin, origin);
+      ctx.restore();
+    }
+
+    styleCache[key] = canvas;
+  }
+
+  return styleCache[key];
+};
+export default style;