fix: line chart grouping (resolves #45)

gka · gka · commit 989431fcc254 · 2025-05-27T00:48:25.000+02:00
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,13 +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
 
diff --git a/src/tests/line.test.ts b/src/tests/line.test.ts
@@ -227,4 +227,32 @@ 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');
+
+    })
 });
