svelteplot
diff --git a/‎screenshot-examples.js
Lines changed: 50 additions & 1 deletion b/‎screenshot-examples.js
Lines changed: 50 additions & 1 deletion
diff --git a/‎src/routes/examples/area/area-x.svelte
Lines changed: 0 additions & 1 deletion b/‎src/routes/examples/area/area-x.svelte
Lines changed: 0 additions & 1 deletion
diff --git a/‎src/routes/examples/area/streamgraph.svelte
Lines changed: 28 additions & 0 deletions b/‎src/routes/examples/area/streamgraph.svelte
Lines changed: 28 additions & 0 deletions
diff --git a/‎src/routes/examples/types.ts
Lines changed: 8 additions & 0 deletions b/‎src/routes/examples/types.ts
Lines changed: 8 additions & 0 deletions
diff --git a/‎static/examples/area/area-x.dark.png
23 Bytes b/‎static/examples/area/area-x.dark.png
23 Bytes
diff --git a/‎static/examples/area/streamgraph.dark.png
48.6 KB b/‎static/examples/area/streamgraph.dark.png
48.6 KB
diff --git a/‎static/examples/area/streamgraph.png
48.2 KB b/‎static/examples/area/streamgraph.png
48.2 KB
@@ -12,6 +12,9 @@ const OUTPUT_DIR = path.join(__dirname, 'static', 'examples');
 const SCREENSHOT_WIDTH = 600;
 const DEVICE_PIXEL_RATIO = 2;
 
+// Only take missing screenshots if ENV variable is set
+const ONLY_MISSING = process.env.ONLY_MISSING == 1;
+
 // Start the development server and return server instance and local URL
 const startServer = () => {
     console.log('Starting development server...');
@@ -70,6 +73,26 @@ const getSvelteFiles = async (dir) => {
     return files.flat();
 };
 
+const getExistingScreenshots = async (dir) => {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+
+    const files = await Promise.all(
+        entries.map(async (entry) => {
+            const fullPath = path.join(dir, entry.name);
+
+            if (entry.isDirectory()) {
+                return getExistingScreenshots(fullPath);
+            } else if (entry.isFile() && entry.name.endsWith('.png')) {
+                return [fullPath];
+            }
+
+            return [];
+        })
+    );
+
+    return files.flat();
+};
+
 // Convert file path to URL path
 const filePathToUrlPath = (filePath) => {
     const relativePath = path.relative(EXAMPLES_DIR, filePath);
@@ -161,9 +184,35 @@ const screenshotExamples = async () => {
         });
 
         // Get all example Svelte files
-        const svelteFiles = await getSvelteFiles(EXAMPLES_DIR);
+        let svelteFiles = await getSvelteFiles(EXAMPLES_DIR);
         console.log(`Found ${svelteFiles.length} example files to screenshot`);
 
+        if (ONLY_MISSING) {
+            // Filter to only include files that don't have screenshots ()
+            const existingScreenshots = (await getExistingScreenshots(OUTPUT_DIR)).map((file) =>
+                path.relative(OUTPUT_DIR, file)
+            );
+
+            console.log(`Found ${existingScreenshots.length} existing screenshots`);
+
+            // Filter out files that already have screenshots
+            svelteFiles = svelteFiles.filter((filePath) => {
+                return (
+                    !existingScreenshots.find((screenshot) =>
+                        filePath.endsWith(screenshot.replace('.png', '.svelte'))
+                    ) ||
+                    !existingScreenshots.find((screenshot) =>
+                        filePath.endsWith(screenshot.replace('.dark.png', '.svelte'))
+                    )
+                );
+            });
+
+            console.log(
+                `Filtered down to ${svelteFiles.length} files needing screenshots`,
+                svelteFiles
+            );
+        }
+
         // Process each file
         for (const filePath of svelteFiles) {
             const urlPath = filePathToUrlPath(filePath);
 
@@ -6,7 +6,6 @@
     import { Plot, AreaX } from 'svelteplot';
     import { page } from '$app/state';
     import type { ExamplesData } from '../types';
-    import { setContext } from 'svelte';
     let { aapl } = $derived(page.data.data) as ExamplesData;
 </script>
 
 
@@ -0,0 +1,28 @@
+<script module>
+    export const title = 'Streamgraph';
+</script>
+
+<script lang="ts">
+    import { Plot, AreaY } from '$lib/index.js';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+    const { riaa } = $derived(
+        page.data.data
+    ) as ExamplesData;
+</script>
+
+<Plot
+    marginLeft={0}
+    x={{ grid: true }}
+    y={{ axis: false }}
+    color={{ legend: true }}>
+    <AreaY
+        data={riaa}
+        x="year"
+        y="revenue"
+        z="format"
+        curve="basis"
+        fill="group"
+        opacity={0.8}
+        stack={{ offset: 'wiggle', order: 'inside-out' }} />
+</Plot>
@@ -74,6 +74,13 @@ type BeagleRow = {
     lat: number;
 };
 
+type RiaaRow = {
+    year: Date;
+    format: string;
+    group: string;
+    revenue: number;
+};
+
 export type ExamplesData = {
     aapl: AaplRow[];
     simpsons: SimpsonsRow[];
@@ -85,4 +92,5 @@ export type ExamplesData = {
     };
     world: any;
     beagle: BeagleRow[];
+    riaa: RiaaRow[];
 };