svelteplot 0.1.3-next.4 → 0.1.3-next.5

package/dist/core/Plot.svelte

@@ -41,6 +41,7 @@
         facet,
         class: className = '',
         css,
+        width: fixedWidth,
         ...initialOpts
     }: Partial<PlotOptions> = $props();
 
@@ -176,7 +177,7 @@
 
     const hasProjection = $derived(!!preScales.projection);
 
-    const plotWidth = $derived(width - plotOptions.marginLeft - plotOptions.marginRight);
+    const plotWidth = $derived((fixedWidth || width) - plotOptions.marginLeft - plotOptions.marginRight);
 
     // the facet and y domain counts are used for computing the automatic height
     const xFacetCount = $derived(Math.max(1, preScales.fx.domain.length));
@@ -476,7 +477,7 @@
     <div class="plot-body" bind:this={plotBody}>
         {#if underlay}<div class="plot-underlay">{@render underlay(plotOptions)}</div>{/if}
         <svg
-            {width}
+            width={fixedWidth || width}
             {height}
             fill="currentColor"
             viewBox="0 0 {width} {height}"

package/dist/helpers/resolve.d.ts

@@ -13,5 +13,5 @@ export declare function toChannelOption(name: ScaledChannelName, channel: Channe
 export declare function resolveChannel(channel: ChannelName, datum: DataRow, channels: Partial<Record<ChannelName, ChannelAccessor | ChannelAlias>>): RawValue;
 export declare function resolveScaledStyleProps(datum: DataRecord, channels: Partial<Record<ScaledChannelName, ChannelAccessor>>, useScale: Record<ScaledChannelName, boolean>, plot: PlotState, defaultColorProp?: 'fill' | 'stroke' | null): any;
 export declare function resolveScaledStyles(datum: DataRecord, channels: Partial<Record<ScaledChannelName, ChannelAccessor>>, useScale: Record<ScaledChannelName, boolean>, plot: PlotState, defaultColorProp?: 'fill' | 'stroke' | null): string;
-export declare function resolveStyles(plot: PlotState, datum: ScaledDataRecord, channels: Partial<Record<ChannelName & MarkStyleProps, ChannelAccessor>>, defaultColorProp: "fill" | "stroke" | null | undefined, useScale: Record<ScaledChannelName, boolean>): [string | null, string | null];
+export declare function resolveStyles(plot: PlotState, datum: ScaledDataRecord, channels: Partial<Record<ChannelName & MarkStyleProps, ChannelAccessor>>, defaultColorProp: "fill" | "stroke" | null | undefined, useScale: Record<ScaledChannelName, boolean>, recomputeChannels?: boolean): [string | null, string | null];
 export {};

package/dist/helpers/resolve.js

@@ -120,7 +120,7 @@ function stylePropsToCSS(props) {
         .map(([key, value]) => `${key}: ${value}`)
         .join(';')}`;
 }
-export function resolveStyles(plot, datum, channels, defaultColorProp = null, useScale) {
+export function resolveStyles(plot, datum, channels, defaultColorProp = null, useScale, recomputeChannels = false) {
     const styleProps = {
         ...getBaseStylesObject(datum.datum, channels),
         fill: 'none',
@@ -130,7 +130,7 @@ export function resolveStyles(plot, datum, channels, defaultColorProp = null, us
             : {}),
         ...Object.fromEntries(Object.entries(scaledStyleProps)
             .filter(([key]) => channels[key] != null)
-            .map(([key, cssAttr]) => [key, cssAttr, datum[key]])
+            .map(([key, cssAttr]) => [key, cssAttr, recomputeChannels ? resolveChannel(key, datum.datum, channels) : datum[key]])
             .filter(([key, , value]) => isValid(value) || key === 'fill' || key === 'stroke')
             .map(([key, cssAttr, value]) => {
             if (useScale[key]) {

package/dist/marks/Line.svelte

@@ -11,8 +11,6 @@
         ConstantAccessor,
         ChannelAccessor,
         MarkerOptions,
-        FacetContext,
-        PlotState,
         ScaledDataRecord
     } from '../types.js';
 
@@ -40,7 +38,7 @@
     import Mark from '../Mark.svelte';
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { getContext } from 'svelte';
-    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { line, type CurveFactory } from 'd3-shape';
     import { geoPath } from 'd3-geo';
     import callWithProps from '../helpers/callWithProps.js';
@@ -95,10 +93,6 @@
 
     const groupByKey = $derived(args.z || args.stroke);
 
-    const groups = $derived(
-        groupByKey && args.data.length > 0 ? groupIndex(args.data, groupByKey) : [args.data]
-    );
-
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
@@ -189,12 +183,17 @@
                                         'fontStyle',
                                         'textAnchor'
                                     ]),
-                                    fill: args.textFill || args.stroke,
-                                    stroke: args.textStroke,
                                     strokeWidth: args.textStrokeWidth
+                                        ? args.textStrokeWidth
+                                        : args.textStroke
+                                          ? 2
+                                          : 0,
+                                    fill: args.textFill || args.stroke,
+                                    stroke: args.textStroke
                                 },
                                 'fill',
-                                usedScales
+                                usedScales,
+                                true
                             )}
                             <MarkerPath
                                 {mark}
@@ -206,6 +205,7 @@
                                 strokeWidth={args.strokeWidth}
                                 datum={lineData[0]}
                                 d={pathString}
+                                dInv={text ? linePath(lineData.toReversed()) : null}
                                 color={lineData[0].stroke || 'currentColor'}
                                 {style}
                                 class={styleClass}

package/dist/marks/Link.svelte

@@ -9,13 +9,10 @@
         CurveName,
         MarkerOptions,
         RawValue,
-        FacetContext,
-        DataRow,
         ScaledDataRecord
     } from '../types.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { maybeData, testFilter } from '../helpers/index.js';
-    import { getUsedScales, projectXY } from '../helpers/scales.js';
+    import { maybeData } from '../helpers/index.js';
     import Mark from '../Mark.svelte';
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { replaceChannels } from '../transforms/rename.js';
@@ -72,30 +69,39 @@
 
     const sphericalLine = $derived(plot.scales.projection && curve === 'auto');
 
-    const linePath: (d: ScaledDataRecord) => string = $derived.by(() => {
+    const linePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(() => {
         const fn = callWithProps(line, [], {
             curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
             x: (d) => d[0],
             y: (d) => d[1]
         });
 
-        return (d: ScaledDataRecord) =>
-            fn([
-                [d.x1, d.y1],
-                [d.x2, d.y2]
-            ]);
+        return (d: ScaledDataRecord, reversed = false) =>
+            fn(
+                reversed
+                    ? [
+                          [d.x2, d.y2],
+                          [d.x1, d.y1]
+                      ]
+                    : [
+                          [d.x1, d.y1],
+                          [d.x2, d.y2]
+                      ]
+            );
     });
 
-    const sphericalLinePath: (d: ScaledDataRecord) => string = $derived.by(() => {
-        const fn = sphereLine(plot.scales.projection);
-        return (d: ScaledDataRecord) => {
-            const x1 = resolveChannel('x1', d.datum, args);
-            const y1 = resolveChannel('y1', d.datum, args);
-            const x2 = resolveChannel('x2', d.datum, args);
-            const y2 = resolveChannel('y2', d.datum, args);
-            return fn(x1, y1, x2, y2);
-        };
-    });
+    const sphericalLinePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(
+        () => {
+            const fn = sphereLine(plot.scales.projection);
+            return (d: ScaledDataRecord, reversed = false) => {
+                const x1 = resolveChannel('x1', d.datum, args);
+                const y1 = resolveChannel('y1', d.datum, args);
+                const x2 = resolveChannel('x2', d.datum, args);
+                const y2 = resolveChannel('y2', d.datum, args);
+                return reversed ? fn(x2, y2, x1, y1) : fn(x1, y1, x2, y2);
+            };
+        }
+    );
     //     sphericalLine
     //         ?
 
@@ -160,6 +166,7 @@
                         datum={d.datum}
                         color={d.stroke}
                         d={sphericalLine ? sphericalLinePath(d) : linePath(d)}
+                        dInv={sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)}
                         {style}
                         text={text ? resolveProp(text, d.datum) : null}
                         startOffset={resolveProp(args.textStartOffset, d.datum, '50%')}

package/dist/marks/helpers/MarkerPath.svelte

@@ -63,6 +63,7 @@
         markerEnd,
         marker,
         d,
+        dInv,
         style,
         class: className = null,
         textStyleClass = null,
@@ -84,33 +85,9 @@
     const firstPt = $derived(text && hasPath ? points.at(0).split(',').map(Number) : []);
     const lastPt = $derived(text && hasPath ? points.at(-1).split(',').map(Number) : []);
     const leftToRight = $derived(text && hasPath ? firstPt[0] < lastPt.at(-2) : true);
-    const pathIsCurve = $derived(text && hasPath ? d.includes('C') : false);
-    // this rather complicated code "reverses" the path to ensure that the text
-    // is not turned upside down
-    const textPath = $derived(
-        !text || leftToRight
-            ? hasPath
-            : pathIsCurve
-              ? [
-                    'M',
-                    points.at(-1).split(',').slice(-2).join(','),
-                    'C',
-                    points.at(-1).split(',').slice(2, 4).join(','),
-                    ',',
-                    points.at(-1).split(',').slice(0, 2).join(','),
-                    ',',
-                    points[0]
-                ].join('')
-              : [
-                    'M',
-                    points.at(-1),
-                    ...points
-                        .toReversed()
-                        .slice(1)
-                        .map((pt) => `L${pt}`)
-                ].join('')
-    );
 
+    // use reversed path if the path is not left to right
+    const textPath = $derived(!text || leftToRight ? d : dInv);
     const strokeWidth_ = $derived(resolveProp(strokeWidth, datum, 1.4));
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.1.3-next.4",
+    "version": "0.1.3-next.5",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -10,12 +10,11 @@
         "dev": "vite dev",
         "build": "vite build",
         "preview": "vite preview",
-        "test": "npm run test:integration && npm run test:unit",
+        "test": "npm run test:unit",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --check src && eslint src",
         "format": "prettier --write .",
-        "test:integration": "playwright test",
         "test:unit": "vitest",
         "prepack": "npx svelte-package",
         "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
@@ -48,7 +47,6 @@
     "devDependencies": {
         "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
         "@emotion/css": "^11.13.5",
-        "@playwright/test": "^1.52.0",
         "@sveltejs/adapter-auto": "^6.0.0",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/eslint-config": "^8.2.0",
@@ -58,6 +56,7 @@
         "@sveltepress/theme-default": "^6.0.2",
         "@sveltepress/twoslash": "^1.2.1",
         "@sveltepress/vite": "^1.2.1",
+        "@testing-library/svelte": "^5.2.7",
         "@types/d3-array": "^3.2.1",
         "@types/d3-color": "^3.1.3",
         "@types/d3-dsv": "^3.0.7",
@@ -81,6 +80,7 @@
         "prettier-plugin-svelte": "^3.3.3",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
+        "resize-observer-polyfill": "^1.5.1",
         "sass": "^1.86.3",
         "svelte-check": "^4.1.6",
         "svelte-eslint-parser": "1.1.3",