feat: extrude paths into to 3D profiles (#83)

* feat: render path as a 3D profile

* feat: add solid fill

* refactor: add data prop support to Profile layer

* fix: moved moved path geometry calculation to updateState method

* docs: added Layers stories folder

* refactor: apply prettier conditions

.eslintignore

@@ -5,3 +5,4 @@ Dockerfile
 README.md
 dist
 storybook-static
+package-lock.json

.eslintrc.json

@@ -1,48 +1,48 @@
 {
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "eslint:recommended",
-    "plugin:prettier/recommended"
-  ],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "plugins": ["@typescript-eslint"],
-      "extends": [
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
         "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
+        "eslint:recommended",
         "plugin:prettier/recommended"
-      ]
-    },
-    {
-      "files": ["*.stories.tsx"],
-      "rules": {
-        "import/no-extraneous-dependencies": "off"
-      }
+    ],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx"],
+            "plugins": ["@typescript-eslint"],
+            "extends": [
+                "plugin:react/recommended",
+                "plugin:@typescript-eslint/recommended",
+                "plugin:prettier/recommended"
+            ]
+        },
+        {
+            "files": ["*.stories.tsx"],
+            "rules": {
+                "import/no-extraneous-dependencies": "off"
+            }
+        },
+        {
+            "files": ["*.yml"],
+            "parser": "yaml-eslint-parser",
+            "plugins": ["eslint-plugin-yml"],
+            "extends": ["plugin:yml/prettier"]
+        }
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
     },
-    {
-      "files": ["*.yml"],
-      "parser": "yaml-eslint-parser",
-      "plugins": ["eslint-plugin-yml"],
-      "extends": ["plugin:yml/standard"]
-    }
-  ],
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 14,
+        "sourceType": "module"
     },
-    "ecmaVersion": 14,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint"],
-  "rules": {}
+    "plugins": ["react", "@typescript-eslint"],
+    "rules": {}
 }

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+}
+

README.md

@@ -2,12 +2,13 @@
 
 Map components and [Deck.gl](https://deck.gl/) layers for rendering GPX tracks.
 
-![GpxLayer](sample/velo.gl.webp)
+![GpxLayer](https://github.com/hkfb/velo.gl/raw/main/sample/velo.gl.webp)
 
 ## Features
 * Deck.gl layers
   * GPX Layer - renders the trace of a GPX file
   * Trip GPX Layer - renders the position along a GPX trace at a given time
+  * Profile Layer - renders paths extruded vertically from sea level, from a set of 3D polylines
 * Map components
   * GPX Map - renders a GPX trace
   * GPX Maptiler - renders a GPX trace on a Maptiler base map
@@ -55,25 +56,15 @@ npm run docker:storybook
 npm run docker:compose:storybook
 ```
 
-### Using docker directly:
-```sh
-docker run --rm -it $(docker build -q .)
-```
-
-### Using docker-compose directly:
-```sh
-docker-compose up --build
-```
-
 ## Testing
 
 ### Using npm with local storybook running:
 ```sh
-npm test:storybook
+npm run test:storybook
 ```
 
 ### Using npm & docker-compose:
 ```sh
-npm docker:compose:test
+npm run docker:compose:test
 ```
 

docker-compose.test.yml

@@ -1,22 +1,22 @@
 version: "3"
 services:
-  storybook:
-    image: velo.gl
-    build: .
-    volumes:
-      - ".:/app:rw"
-    ports:
-      - "6006:6006"
-    healthcheck:
-      test: curl --fail http://localhost:6006/
-  test-storybook:
-    image: velo.gl
-    volumes:
-      - /app/node_modules
-      - ".:/app:ro"
-    depends_on:
-      storybook:
-        condition: service_healthy
-    command: >
-      sh -c "npm ci && npx playwright install-deps
-      && npm run test:storybook -- --url http://storybook:6006/"
+    storybook:
+        image: velo.gl
+        build: .
+        volumes:
+            - ".:/app:rw"
+        ports:
+            - "6006:6006"
+        healthcheck:
+            test: curl --fail http://localhost:6006/
+    test-storybook:
+        image: velo.gl
+        volumes:
+            - /app/node_modules
+            - ".:/app:ro"
+        depends_on:
+            storybook:
+                condition: service_healthy
+        command: >
+            sh -c "npm ci && npx playwright install-deps
+            && npm run test:storybook -- --url http://storybook:6006/"

docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3"
 services:
-  storybook:
-    image: velo.gl
-    build: .
-    volumes:
-      - ".:/app:rw"
+    storybook:
+        image: velo.gl
+        build: .
+        volumes:
+            - ".:/app:rw"