svelteplot 0.1.3-next.8 → 0.1.3-next.9

package/dist/Mark.svelte

@@ -78,8 +78,6 @@
         }
     }
 
-    
-
     const mark = new Mark(type);
 
     $effect(() => {
@@ -128,24 +126,26 @@
     const testFacet = $derived(getTestFacet());
 
     const resolvedData: ResolvedDataRecord[] = $derived(
-        data.map((d,i) => ({...d, [INDEX]: i})).flatMap((row) => {
-            const channels = options as Record<ChannelName, ChannelAccessor>;
-            if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
-            const out: ResolvedDataRecord = {
-                datum: row
-            };
-            for (const [channel] of Object.entries(CHANNEL_SCALE) as [
-                ScaledChannelName,
-                ScaleName
-            ][]) {
-                // check if the mark has defined an accessor for this channel
-                if (options?.[channel] !== undefined && out[channel] === undefined) {
-                    // resolve value
-                    out[channel] = resolveChannel(channel, row, options);
+        data
+            .map((d, i) => ({ ...d, [INDEX]: i }))
+            .flatMap((row) => {
+                const channels = options as Record<ChannelName, ChannelAccessor>;
+                if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
+                const out: ResolvedDataRecord = {
+                    datum: row
+                };
+                for (const [channel] of Object.entries(CHANNEL_SCALE) as [
+                    ScaledChannelName,
+                    ScaleName
+                ][]) {
+                    // check if the mark has defined an accessor for this channel
+                    if (options?.[channel] !== undefined && out[channel] === undefined) {
+                        // resolve value
+                        out[channel] = resolveChannel(channel, row, options);
+                    }
                 }
-            }
-            return [out];
-        })
+                return [out];
+            })
     );
 
     let prevResolvedData: ResolvedDataRecord[] = [];
@@ -158,7 +158,6 @@
         }
     });
 
-     
     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

@@ -156,7 +156,7 @@
             explicitDomains,
             hasProjection: !!initialOpts.projection,
             margins: initialOpts.margins,
-            inset: initialOpts.inset, 
+            inset: initialOpts.inset
         })
     );
 
@@ -175,7 +175,9 @@
 
     const hasProjection = $derived(!!preScales.projection);
 
-    const plotWidth = $derived((fixedWidth || 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));

package/dist/marks/BarX.svelte

@@ -47,7 +47,7 @@
         )
     );
 
-    $inspect({args})
+    $inspect({ args });
 </script>
 
 <Mark

package/dist/marks/Frame.svelte

@@ -14,10 +14,17 @@
     let { automatic, class: className = null, ...options }: FrameMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let dx = $derived(resolveProp(options.dx, null, 0));
-    let dy = $derived(resolveProp(options.dy, null, 0));
+    const dx = $derived(resolveProp(options.dx, null, 0));
+    const dy = $derived(resolveProp(options.dy, null, 0));
+
+    const {
+        insetLeft = options.inset || 0,
+        insetTop = options.inset || 0,
+        insetRight = options.inset || 0,
+        insetBottom = options.inset || 0
+    } = $derived(options);
 </script>
 
 <Mark type="frame" {automatic}>
@@ -25,12 +32,12 @@
         class={['frame', className]}
         transform={dx || dy ? `translate(${dx},${dy})` : null}
         style={resolveScaledStyles({}, options, {}, plot, 'stroke')}
-        x={plot.options.marginLeft}
-        y={plot.options.marginTop}
+        x={plot.options.marginLeft + +insetLeft}
+        y={plot.options.marginTop + +insetTop}
         rx={resolveProp(options.rx, null, null)}
         ry={resolveProp(options.ry, null, null)}
-        width={plot.facetWidth}
-        height={plot.facetHeight}
+        width={plot.facetWidth - (insetLeft || 0) - (insetRight || 0)}
+        height={plot.facetHeight - (insetBottom || 0) - (insetTop || 0)}
         use:addEventHandlers={{ getPlotState, options: options, datum: {} }} />
 </Mark>
 

package/dist/marks/Link.svelte

@@ -156,7 +156,7 @@
                     )}
 
                     <MarkerPath
-                        mark={{...mark, options: args}}
+                        mark={{ ...mark, options: args }}
                         scales={plot.scales}
                         markerStart={args.markerStart}
                         markerEnd={args.markerEnd}

package/dist/marks/Text.svelte

@@ -131,8 +131,13 @@
                     {@const [style, styleClass] = resolveStyles(
                         plot,
                         { ...d, __tspanIndex: 0 },
-                        { fontSize: 12, fontWeight: 500, strokeWidth: 1.6,
-                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle', ...args },
+                        {
+                            fontSize: 12,
+                            fontWeight: 500,
+                            strokeWidth: 1.6,
+                            textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
+                            ...args
+                        },
                         'fill',
                         usedScales
                     )}
@@ -156,8 +161,11 @@
                                             fontSize
                                 )
                             ]})"
-                            >{#each textLines as line, l}<tspan x="0" dy={l ? fontSize : 0} class={styleClass} {style}
-                                    >{line}</tspan
+                            >{#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}
                         <!-- singleline text-->

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.1.3-next.8",
+    "version": "0.1.3-next.9",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",