Merge pull request #67 from svelteplot/fix/line-grouping

gka · web-flow · commit 0e7c864d63ba · 2025-05-27T00:58:23.000+02:00
fix: line chart grouping (resolves #45)
diff --git a/.github/workflows/npm-prerelease.yml b/.github/workflows/npm-prerelease.yml
@@ -5,13 +5,13 @@ on:
         branches: [main]
 
 permissions:
-  contents: write
-  pull-requests: write
+    contents: write
+    pull-requests: write
 
 jobs:
     test:
         runs-on: ubuntu-latest
-        
+
         steps:
             - uses: actions/checkout@v4
 
@@ -32,16 +32,15 @@ jobs:
 
             - name: Run Vitest tests
               run: pnpm test
-              
+
     publish-preview:
         # Prevent this job from running on forks
-        if: github.repository == 'svelteplot/svelteplot'
-        if: github.event.pull_request.draft == false
+        if: github.repository == 'svelteplot/svelteplot' && github.event.pull_request.draft == false
         needs: test
         runs-on: ubuntu-latest
         environment:
             name: npm
-            
+
         steps:
             - uses: actions/checkout@v4
 
@@ -56,7 +55,7 @@ jobs:
               with:
                   node-version: '22'
                   cache: 'pnpm'
-                  registry-url: "https://registry.npmjs.org"
+                  registry-url: 'https://registry.npmjs.org'
 
             - name: Install dependencies
               run: pnpm install
@@ -100,8 +99,6 @@ jobs:
 
                   echo "Generated version: $(node -p "require('./package.json').version")"
 
-
-
             - name: Publish to npm
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH }}
@@ -110,14 +107,14 @@ jobs:
             # Save version for use in PR comment
             - name: Save version
               run: echo "PACKAGE_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
-              
+
             - name: Comment on PR
               uses: peter-evans/create-or-update-comment@v3
               with:
                   issue-number: ${{ github.event.pull_request.number }}
                   body: |
                       📦 Preview package for this PR is published!
-                      
+
                       Version: `${{ env.PACKAGE_VERSION }}`
 
                       Install it with:
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "svelte.svelte-vscode",
+        "dbaeumer.vscode-eslint",
+        "typescript-svelte-plugin"
+    ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1 +1,35 @@
-{}
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[svelte]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact",
+        "svelte"
+    ],
+    "prettier.useTabs": false,
+    "prettier.singleQuote": true,
+    "prettier.tabWidth": 4,
+    "prettier.trailingComma": "none",
+    "prettier.printWidth": 100,
+    "svelte.plugin.svelte.format.enable": false,
+    "eslint.probe": [
+        "javascript",
+        "typescript",
+        "svelte"
+    ],
+    "eslint.experimental.useFlatConfig": true
+}
diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
         "svg-path-parser": "^1.1.0",
         "topojson-client": "^3.1.0",
         "tslib": "^2.8.1",
-        "typedoc": "^0.28.4",
+        "typedoc": "^0.28.5",
         "typedoc-plugin-markdown": "^4.6.3",
         "typescript": "^5.8.3",
         "vite": "^6.3.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/marks/Line.svelte b/src/lib/marks/Line.svelte
@@ -21,7 +21,7 @@
         outlineStroke?: string;
         outlineStrokeWidth?: number;
         outlineStrokeOpacity?: number;
-        curve?: CurveName | CurveFactory;
+        curve?: CurveName | CurveFactory | 'auto';
         tension?: number;
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         text?: ConstantAccessor<string>;
@@ -76,10 +76,6 @@
             if (groupValue === lastGroupValue) {
                 group.push(d);
             } else {
-                if (group.length === 1) {
-                    // just one point makes a bad line, add this one, too
-                    group.push(d);
-                }
                 // new group
                 group = [d];
                 groups.push(group);
diff --git a/src/routes/transforms/jitter/+page.md b/src/routes/transforms/jitter/+page.md
@@ -76,14 +76,6 @@ The jitter transform accepts the following options:
     - Useful for deterministic jittering (testing or reproducibility)
     - Can be used with d3's random generators: `randomLcg()` from d3-random
 
-The following time interval strings are supported for temporal jittering:
-
-- `'1 day'`, `'3 days'`
-- `'1 week'`, `'2 weeks'`, `'3 weeks'`
-- `'1 month'`, `'2 months'`
-- `'1 quarter'`
-- `'1 year'`
-
 ## jitterX
 
 Jitters along the x dimension:
diff --git a/src/tests/line.test.ts b/src/tests/line.test.ts
@@ -227,4 +227,30 @@ describe('Line mark', () => {
         // Verify we have two distinct lines with different stroke colors
         expect(lines[0]?.style.stroke).not.toBe(lines[1]?.style.stroke);
     });
+
+    it('does not connect points from different groups', () => {
+        const { container } = render(LineTest, {
+            props: {
+                data: [
+                    { x: 0, y: 0, category: 'A' },
+                    { x: 1, y: 1, category: 'A' },
+                    { x: 0, y: 1, category: 'B' },
+                    { x: 0.5, y: 1, category: 'C' }
+                ],
+                x: 'x',
+                y: 'y',
+                z: 'category'
+            }
+        });
+
+        const lines = container.querySelectorAll(
+            'g.lines > g > path'
+        ) as NodeListOf<SVGPathElement>;
+        expect(lines).toHaveLength(3);
+
+        const ds = Array.from(lines).map((l) => l.getAttribute('d'));
+        expect(ds[0]).toBe('M1,95L96,5');
+        expect(ds[1]).toBe('M1,5Z');
+        expect(ds[2]).toBe('M48.5,5Z');
+    });
 });
