docs: add story demonstrating using a data uri (#174)

* docs: add story demonstrating using a data uri

* refactor: apply lint conditions

README.md

@@ -69,3 +69,6 @@ npm ci
 npm run docker:compose:test:update
 ```
 
+## Demo
+Live demo: [VeloLens](https://velo-lens.com/)
+

docker-compose.yml

@@ -15,7 +15,7 @@ services:
         healthcheck:
             test: curl --fail http://localhost:6006/
         command: >
-            sh -c "npm run storybook -- --no-open"
+            sh -c "VITE_COVERAGE=false npm run storybook -- --no-open"
 
     test-storybook:
         image: mcr.microsoft.com/playwright:v1.49.1-noble

src/constant.stories.ts

@@ -1,14 +1,16 @@
+import { type MapViewState } from "@deck.gl/core";
+
 export const TEIDE_ACTIVITY_FILE = "Teide.tcx";
 
 export const JR_ACTIVITY_FILE = "Jotunheimen_rundt.gpx";
 
-export const JR_INITIAL_VIEW_STATE = {
+export const JR_INITIAL_VIEW_STATE: MapViewState = {
     longitude: 8.3,
     latitude: 61.4,
     zoom: 8,
 };
 
-export const JR_PITCHED_VIEW_STATE = {
+export const JR_PITCHED_VIEW_STATE: MapViewState = {
     ...JR_INITIAL_VIEW_STATE,
     pitch: 45,
 };

src/layers/activity-profile-layer/activity-profile-layer.stories.tsx

@@ -25,6 +25,25 @@ export default {
     },
 };
 
+async function uriToBlob(uri: string) {
+    try {
+        // Fetch the URI content
+        const response = await fetch(uri);
+
+        // Ensure the fetch was successful
+        if (!response.ok) {
+            throw new Error(`Failed to fetch URI: ${response.statusText}`);
+        }
+
+        // Convert the response into a Blob
+        const blob = await response.blob();
+        return blob;
+    } catch (error) {
+        console.error("Error converting URI to Blob:", error);
+        throw error;
+    }
+}
+
 export const JotunheimenRundt: StoryObj = {
     render: () => {
         const data = JR_ACTIVITY_FILE;
@@ -285,3 +304,41 @@ export const PhongShading: StoryObj<
         );
     },
 };
+
+export const DataUrl: StoryObj = {
+    render: () => {
+        const [dataUri, setDataUri] = React.useState<string>();
+        React.useEffect(() => {
+            const reader = new FileReader();
+            reader.addEventListener(
+                "load",
+                () => {
+                    setDataUri(reader.result as string);
+                },
+                false,
+            );
+            uriToBlob(JR_ACTIVITY_FILE).then((blob) => {
+                reader.readAsDataURL(blob);
+            });
+        }, []);
+
+        const layer = dataUri
+            ? new ActivityProfileLayer({ data: dataUri })
+            : null;
+
+        return (
+            <DeckGL
+                layers={[layer]}
+                initialViewState={JR_PITCHED_VIEW_STATE}
+                controller
+            ></DeckGL>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Use a URL as profile data.",
+            },
+        },
+    },
+};