mobility-toolbox-js 2.0.0-beta.1 → 2.0.0-beta.6

package/src/common/styles/index.js

@@ -0,0 +1,4 @@
+export { default as trackerDefaultStyle } from './trackerDefaultStyle';
+export { default as trackerDelayStyle } from './trackerDelayStyle';
+export * from './trackerDefaultStyle';
+export { default as trackerSimpleStyle } from './trackerSimpleStyle';

package/{common/utils/delayTrackerStyle.js → src/common/styles/trackerDefaultStyle.js}

@@ -158,24 +158,24 @@ const style = (trajectory, viewState, options) => {
   } = options;
 
   const { zoom, pixelRatio } = viewState;
-  let { line, type } = trajectory.properties;
+  let { type, cancelled } = trajectory.properties;
   const {
     train_id: id,
+    line,
     delay,
-    cancelled = false,
+    state,
     operator_provides_realtime_journey: operatorProvidesRealtime,
   } = trajectory.properties;
+  let { name, text_color: textColor, color } = line || {};
+
+  // In the future, the cancelled property will be removed we still managed it
+  // until the backend change is on prod.
+  cancelled = cancelled === true || state === 'JOURNEY_CANCELLED';
 
   if (!type) {
     type = 'Rail';
   }
 
-  if (!line) {
-    line = {};
-  }
-
-  let { name, text_color: textColor, color } = line;
-
   if (!name) {
     name = 'I';
   }

package/src/common/styles/trackerDelayStyle.js

@@ -0,0 +1,17 @@
+import trackerDefaultStyle from './trackerDefaultStyle';
+
+/**
+ * A tracker style that display the delay as backgroundColor.
+ *
+ * @param {*} trajectory The trajectory to render.
+ * @param {*} viewState The view state of the map.
+ * @param {*} options Some options to change the rendering
+ * @return a canvas
+ */
+const style = (trajectory, viewState, options) => {
+  return trackerDefaultStyle(trajectory, viewState, {
+    ...options,
+    useDelayStyle: true,
+  });
+};
+export default style;

package/src/common/styles/trackerSimpleStyle.js

@@ -0,0 +1,22 @@
+/**
+ * A very simple tracker style.
+ * Display blue point for each train.
+ */
+let canvas;
+const style = () => {
+  if (!canvas) {
+    document.createElement('canvas');
+    canvas.width = 15;
+    canvas.height = 15;
+    const ctx = canvas.getContext('2d');
+    ctx.arc(8, 8, 5, 0, 2 * Math.PI, false);
+    ctx.fillStyle = '#8ED6FF';
+    ctx.fill();
+    ctx.lineWidth = 3;
+    ctx.strokeStyle = 'black';
+    ctx.stroke();
+    ctx.lineWidth = 3;
+  }
+  return canvas;
+};
+export default style;

package/{common → src/common}/trackerConfig.test.js

@@ -10,19 +10,6 @@ describe('trackerConfig', () => {
       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);

package/{common → src/common}/utils/getMapboxMapCopyrights.js

@@ -11,6 +11,7 @@ const getMapboxMapCopyrights = (map) => {
   }
   const { sourceCaches } = map.style;
   let copyrights = [];
+
   Object.values(sourceCaches).forEach((sourceCache) => {
     if (sourceCache.used) {
       const source = sourceCache.getSource();

package/{common → src/common}/utils/index.js

@@ -1,7 +1,6 @@
 export { default as getMapboxStyleUrl } from './getMapboxStyleUrl';
 export { default as getMapboxMapCopyrights } from './getMapboxMapCopyrights';
 export { default as removeDuplicate } from './removeDuplicate';
-export { default as delayTrackerStyle } from './delayTrackerStyle';
-export * from './delayTrackerStyle';
-export { default as simpleTrackerStyle } from './simpleTrackerStyle';
 export * from './timeUtils';
+export * from '../styles';
+export { default as sortByDelay } from './sortByDelay';

package/src/common/utils/sortByDelay.js

@@ -0,0 +1,23 @@
+const sortByDelay = (traj1, traj2) => {
+  const props1 = traj1.properties;
+  const props2 = traj2.properties;
+
+  if (props1.delay === null && props2.delay !== null) {
+    return 1;
+  }
+  if (props2.delay === null && props1.delay !== null) {
+    return -1;
+  }
+
+  // We put cancelled train inbetween green and yellow trains
+  // >=180000ms corresponds to yellow train
+  if (props1.cancelled && !props2.cancelled) {
+    return props2.delay < 180000 ? -1 : 1;
+  }
+  if (props2.cancelled && !props1.cancelled) {
+    return props1.delay < 180000 ? 1 : -1;
+  }
+  return props2.delay - props1.delay;
+};
+
+export default sortByDelay;

package/src/doc/App.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import { Outlet, Routes, Route, Navigate, Link } from 'react-router-dom';
+import { geopsTheme, Header, Footer } from '@geops/geops-ui';
+import Examples from './components/Examples';
+import Example from './components/Example';
+import Documentation from './components/Documentation';
+import Home from './components/Home';
+
+import 'typeface-lato';
+import './App.scss';
+
+const useStyles = makeStyles({
+  content: {
+    flexGrow: 1,
+    overflowY: 'auto',
+    paddingBottom: 115,
+    margin: 'auto',
+    marginTop: 30,
+  },
+  documentation: {
+    flexGrow: 1,
+    overflowY: 'auto',
+    padding: 0,
+  },
+});
+
+const tabs = [
+  {
+    label: 'Home',
+    component: Link,
+    to: '/home',
+  },
+  {
+    label: 'API',
+    component: Link,
+    to: '/api',
+  },
+  {
+    label: 'Examples',
+    component: Link,
+    to: '/examples',
+  },
+  {
+    label: 'Code',
+    href: 'https://github.com/geops/mobility-toolbox-js',
+  },
+];
+
+function Main() {
+  return (
+    <ThemeProvider theme={geopsTheme}>
+      <Header title="mobility-toolbox-js" tabs={tabs} />
+      <Outlet />
+      <Footer />
+    </ThemeProvider>
+  );
+}
+
+function App() {
+  const classes = useStyles();
+
+  return (
+    <Routes>
+      <Route path="/" element={<Main />}>
+        <Route index element={<Navigate to="/home" />} />
+        <Route
+          index
+          path="/home"
+          element={
+            <Container className={classes.content}>
+              <Home />
+            </Container>
+          }
+        />
+        <Route
+          path="/examples"
+          element={
+            <Container className={classes.content}>
+              <Examples />
+            </Container>
+          }
+        />
+        <Route
+          path="/example/:exampleKey"
+          element={
+            <Container className={classes.content}>
+              <Example />
+            </Container>
+          }
+        />
+        <Route path="/api">
+          <Route
+            index
+            element={
+              <Container className={classes.documentation} maxWidth={false}>
+                <Documentation />
+              </Container>
+            }
+          />
+          <Route
+            path="*"
+            element={
+              <Container className={classes.documentation} maxWidth={false}>
+                <Documentation />
+              </Container>
+            }
+          />
+        </Route>
+      </Route>
+    </Routes>
+  );
+}
+
+export default App;

package/src/doc/App.scss

@@ -0,0 +1,51 @@
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Lato, Arial, sans-serif;
+  color: #353535;
+  position: relative;
+  min-height: 100%;
+  overflow-y: scroll;
+  font-size: 18px;
+}
+
+a {
+  text-decoration: none;
+  color: #76b833;
+}
+
+#map a {
+  color: initial;
+}
+
+/* geops ui css */
+button.geops-ui {
+  color: #fff;
+  padding: 5px 15px;
+  font-size: 18px;
+  box-sizing: border-box;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-weight: 700;
+  line-height: 24px;
+  border-radius: 5px;
+  text-transform: none;
+  background-color: #76b833;
+  border: 0;
+  outline: none;
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:hover {
+    box-shadow: 0 5px 16px #35353540;
+    text-decoration: none;
+    background-color: #76b833;
+  }
+}

package/src/doc/_redirects

@@ -0,0 +1,2 @@
+/examples/*    /examples/:splat
+/*    /index.html   200

package/src/doc/components/CodeSandboxButton.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getParameters } from 'codesandbox/lib/api/define';
+import { Button, SvgIcon } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  button: {
+    padding: '5px 15px',
+  },
+});
+
+function CodeSandboxButton({ html, js, extraFiles, ...props }) {
+  const classes = useStyles();
+
+  if (!html || !js) {
+    return null;
+  }
+
+  const dataSB = {
+    files: {
+      'index.html': {
+        content: `${html}<script src="index.js"></script>`,
+      },
+      'index.js': {
+        content: js // eslint-disable-next-line no-template-curly-in-string
+          .replaceAll('${window.apiKey}', window.apiKey)
+          .replaceAll('window.apiKey', `'${window.apiKey}'`),
+      },
+      'package.json': {
+        content: {
+          name: 'vanilla',
+          version: '1.0.0',
+          description: 'Mobility example starter project',
+          main: 'index.html',
+          scripts: {
+            start: 'parcel index.html --open',
+            build: 'parcel build index.html',
+          },
+          dependencies: {
+            'mapbox-gl': '1',
+            'maplibre-gl': '2',
+            'mobility-toolbox-js': 'latest@beta',
+            ol: '6.3.1',
+            'query-string': '6.13.1',
+          },
+          devDependencies: {
+            '@babel/core': '7.2.0',
+            'parcel-bundler': '^1.6.1',
+          },
+          keywords: [
+            'javascript',
+            'starter',
+            'mobility-toolbox-js',
+            'mobility',
+            'toolbox',
+          ],
+        },
+      },
+      ...extraFiles,
+    },
+  };
+  const dataSBStr = getParameters(dataSB);
+  return (
+    <form
+      action="https://codesandbox.io/api/v1/sandboxes/define"
+      method="POST"
+      target="_blank"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <input type="hidden" name="parameters" value={dataSBStr} />
+      <Button
+        type="submit"
+        className={classes.button}
+        startIcon={
+          <SvgIcon fontSize="large">
+            <path
+              d="M2 6l10.455-6L22.91 6L23 17.95L12.455 24L2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144l7.32-4.18l-3.871-2.197l-3.41 1.945l-3.43-1.968L5.133 6.6z"
+              fill="currentColor"
+            />
+          </SvgIcon>
+        }
+      >
+        Edit in Sandbox
+      </Button>
+    </form>
+  );
+}
+
+CodeSandboxButton.propTypes = {
+  html: PropTypes.string,
+  js: PropTypes.string,
+  extraFiles: PropTypes.shape(),
+};
+
+CodeSandboxButton.defaultProps = {
+  html: null,
+  js: null,
+  extraFiles: {},
+};
+
+export default React.memo(CodeSandboxButton);

package/src/doc/components/Documentation.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { useParams, useLocation } from 'react-router-dom';
+import Esdoc from './Esdoc/Esdoc';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+    height: '100%',
+  },
+  iframe: {
+    flexGrow: 1,
+    border: 0,
+    overflow: 'hidden',
+  },
+});
+
+function Documentation() {
+  const classes = useStyles();
+  const params = useParams();
+  const { hash } = useLocation();
+  const [path, setPath] = useState('identifiers%20html');
+
+  useEffect(() => {
+    const matchPath = (params || {})['*'];
+    if (matchPath) {
+      setPath(matchPath.replace(/ /g, '.') + hash);
+    }
+  }, [params, hash]);
+
+  return (
+    <div className={classes.root}>
+      <Esdoc path={path} />
+    </div>
+  );
+}
+
+export default React.memo(Documentation);

package/src/doc/components/Esdoc/Anchor.js

@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Scrollchor } from 'react-scrollchor';
+
+const propTypes = {
+  /**
+   * Path to the link, can include an anchor #
+   */
+  path: PropTypes.string.isRequired,
+
+  /**
+   * Children content of the link.
+   */
+  children: PropTypes.node.isRequired,
+};
+
+/**
+ * Anchor which returns a Scrollchor element
+ * if the path contains an anchor (#), otherwise it returns a <a> element.
+ * @param  {string} options.path  Path to the link, can include an anchor #
+ * @param  {node} options.children Children content of the link.
+ * @return {node} Scrollchor or <a> element
+ * @private
+ */
+function Anchor({ path, children, ...other }) {
+  const pathElements = path.split('#');
+  if (pathElements[0] === window.location.pathname) {
+    const anchor = pathElements[1];
+    const to = anchor ? `#${anchor}` : '';
+
+    return (
+      <Scrollchor
+        to={to}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...other}
+      >
+        {children}
+      </Scrollchor>
+    );
+  }
+
+  return (
+    <a
+      href={path}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...other}
+    >
+      {children}
+    </a>
+  );
+}
+
+Anchor.propTypes = propTypes;
+
+export default Anchor;