svelteplot 0.1.3-next.4 → 0.1.3-next.6

package/dist/Mark.svelte

@@ -156,6 +156,7 @@
         }
     });
 
+     
     function isDifferent(array1: ResolvedDataRecord[], array2: ResolvedDataRecord[]) {
         if (array1.length !== array2.length) return true;
         for (let i = 0; i < array1.length; i++) {

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

@@ -12,6 +12,10 @@ type ChannelOptions = {
 export declare function toChannelOption(name: ScaledChannelName, channel: ChannelAccessor | ChannelAlias): ChannelOptions;
 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 resolveScaledStyles(datum: DataRecord, channels: Partial<Record<ScaledChannelName, ChannelAccessor> & {
+    style: string;
+}>, 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> & {
+    style: string;
+}>, 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,11 @@ 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]) {
@@ -144,9 +148,9 @@ export function resolveStyles(plot, datum, channels, defaultColorProp = null, us
         }))
     };
     if (plot.css) {
-        return [null, plot.css(stylePropsToCSS(styleProps))];
+        return [null, plot.css(`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`)];
     }
     else {
-        return [stylePropsToCSS(styleProps), null];
+        return [`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`, null];
     }
 }

package/dist/marks/Arrow.svelte

@@ -120,7 +120,7 @@
                         class={[className]}
                         use:addEventHandlers={{
                             getPlotState,
-                            options: mark.options,
+                            options: args,
                             datum: d.datum
                         }}>
                         {#if options.onmouseenter || options.onclick}

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/Text.svelte

@@ -131,7 +131,8 @@
                     {@const [style, styleClass] = resolveStyles(
                         plot,
                         { ...d, __tspanIndex: 0 },
-                        { textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle', ...args },
+                        { fontSize: 12, fontWeight: 500, strokeWidth: 1.6,
+                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle', ...args },
                         'fill',
                         usedScales
                     )}
@@ -140,7 +141,7 @@
                         <!-- multiline text-->
                         {@const fontSize = resolveProp(args.fontSize, d.datum) || 12}
                         <text
-                            class={[textClassName, styleClass]}
+                            class={[textClassName]}
                             dominant-baseline={LINE_ANCHOR[lineAnchor]}
                             transform="translate({[
                                 Math.round(x + dx),
@@ -155,7 +156,7 @@
                                             fontSize
                                 )
                             ]})"
-                            >{#each textLines as line, l}<tspan x="0" dy={l ? fontSize : 0} {style}
+                            >{#each textLines as line, l}<tspan x="0" dy={l ? fontSize : 0} class={styleClass} {style}
                                     >{line}</tspan
                                 >{/each}{#if title}<title>{title}</title>{/if}</text>
                     {:else}
@@ -175,11 +176,6 @@
 
 <style>
     text {
-        fill: none;
-        stroke: none;
-        font-size: 12px;
-        font-weight: 500;
-        stroke-width: 1.6px;
         paint-order: stroke fill;
     }
 </style>

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.6",
     "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",