svelteplot 0.2.7-pr-65.2 → 0.2.8-pr-68.0

package/dist/Plot.svelte

@@ -91,89 +91,101 @@
 <!-- There's a bug triggering RangeError: Maximum call stack size exceeded 
      when using SveltePlot in ssr, so for now, we're disabling it -->
 
-<Plot
-    {overlay}
-    {underlay}
-    {...restOptions}
-    header={userHeader ||
-    restOptions.title ||
-    restOptions.subtitle ||
-    restOptions.color?.legend ||
-    restOptions.symbol?.legend
-        ? header
-        : null}
-    footer={userFooter || restOptions?.caption ? footer : null}
-    projection={projectionOpts}
-    implicitScales
-    {...scales}>
-    {#snippet children({
-        hasProjection,
-        hasExplicitAxisX,
-        hasExplicitAxisY,
-        hasExplicitGridX,
-        hasExplicitGridY,
-        options,
-        scales,
-        ...restProps
-    })}
-        <svelte:boundary onerror={(err) => console.warn(err)}>
-            <!-- implicit axes -->
-            {#if !hasProjection && !hasExplicitAxisX}
-                {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}
-                    <AxisX anchor="top" automatic />
+<svelte:boundary>
+    <Plot
+        {overlay}
+        {underlay}
+        {...restOptions}
+        header={userHeader ||
+        restOptions.title ||
+        restOptions.subtitle ||
+        restOptions.color?.legend ||
+        restOptions.symbol?.legend
+            ? header
+            : null}
+        footer={userFooter || restOptions?.caption ? footer : null}
+        projection={projectionOpts}
+        implicitScales
+        {...scales}>
+        {#snippet children({
+            hasProjection,
+            hasExplicitAxisX,
+            hasExplicitAxisY,
+            hasExplicitGridX,
+            hasExplicitGridY,
+            options,
+            scales,
+            ...restProps
+        })}
+            <svelte:boundary onerror={(err) => console.warn(err)}>
+                <!-- implicit axes -->
+                {#if !hasProjection && !hasExplicitAxisX}
+                    {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}
+                        <AxisX anchor="top" automatic />
+                    {/if}
+                    {#if options.axes && (options.x.axis === 'bottom' || options.x.axis === 'both')}
+                        <AxisX anchor="bottom" automatic />
+                    {/if}
                 {/if}
-                {#if options.axes && (options.x.axis === 'bottom' || options.x.axis === 'both')}
-                    <AxisX anchor="bottom" automatic />
+                {#if !hasProjection && !hasExplicitAxisY}
+                    {#if options.axes && (options.y.axis === 'left' || options.y.axis === 'both')}
+                        <AxisY anchor="left" automatic />
+                    {/if}
+                    {#if options.axes && (options.y.axis === 'right' || options.y.axis === 'both')}
+                        <AxisY anchor="right" automatic />
+                    {/if}
                 {/if}
-            {/if}
-            {#if !hasProjection && !hasExplicitAxisY}
-                {#if options.axes && (options.y.axis === 'left' || options.y.axis === 'both')}
-                    <AxisY anchor="left" automatic />
+                <!-- implicit grids -->
+                {#if !hasExplicitGridX && (options.grid || options.x.grid)}
+                    <GridX automatic />
                 {/if}
-                {#if options.axes && (options.y.axis === 'right' || options.y.axis === 'both')}
-                    <AxisY anchor="right" automatic />
+                {#if !hasExplicitGridY && (options.grid || options.y.grid)}
+                    <GridY automatic />
                 {/if}
-            {/if}
-            <!-- implicit grids -->
-            {#if !hasExplicitGridX && (options.grid || options.x.grid)}
-                <GridX automatic />
-            {/if}
-            {#if !hasExplicitGridY && (options.grid || options.y.grid)}
-                <GridY automatic />
-            {/if}
-            <!-- implicit frame -->
-            {#if options.frame}
-                <Frame automatic />
-            {/if}
-            {@render parentChildren?.({
-                options,
-                scales,
-                ...restProps
-            })}
-            {#snippet failed(error, reset)}
-                <text class="error" transform="translate(10,10)">
-                    {#each error.message.split('\n') as line, i (i)}
-                        <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
-                    {/each}
-                </text>{/snippet}
-        </svelte:boundary>
-    {/snippet}
-    {#snippet facetAxes()}
-        <FacetAxes />
+                <!-- implicit frame -->
+                {#if options.frame}
+                    <Frame automatic />
+                {/if}
+                {@render parentChildren?.({
+                    options,
+                    scales,
+                    ...restProps
+                })}
+                {#snippet failed(error, reset)}
+                    <text class="error" transform="translate(10,10)">
+                        {#each error.message.split('\n') as line, i (i)}
+                            <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
+                        {/each}
+                    </text>{/snippet}
+            </svelte:boundary>
+        {/snippet}
+        {#snippet facetAxes()}
+            <FacetAxes />
+        {/snippet}
+    </Plot>
+    {#snippet failed(error)}
+        <div class="error">Error: {error.message}</div>
     {/snippet}
-</Plot>
+</svelte:boundary>
 
 <style>
     :root {
         --plot-bg: white;
         --plot-fg: currentColor;
     }
-    text.error {
-        stroke: var(--plot-bg);
-        fill: crimson;
+    .error {
         font-size: 11px;
         stroke-width: 3px;
         font-weight: bold;
+    }
+    text.error {
+        stroke: var(--plot-bg);
+        fill: crimson;
         paint-order: stroke fill;
     }
+    div.error {
+        color: crimson;
+        white-space: pre-wrap;
+        line-height: 1.1;
+    }
 </style>

package/dist/helpers/autoTicks.js

@@ -1,5 +1,5 @@
 import { maybeTimeInterval } from './time.js';
-import { range as rangei } from 'd3-array';
+import { extent, range as rangei } from 'd3-array';
 export function maybeInterval(interval) {
     if (interval == null)
         return;
@@ -30,11 +30,12 @@ export function maybeInterval(interval) {
     return interval;
 }
 export function autoTicks(type, ticks, interval, domain, scaleFn, count) {
-    return ticks
-        ? ticks
-        : interval
-            ? maybeInterval(interval, type).range(domain[0], domain[1])
-            : typeof scaleFn.ticks === 'function'
-                ? scaleFn.ticks(count)
-                : [];
+    if (ticks)
+        return ticks;
+    if (interval) {
+        const [lo, hi] = extent(domain);
+        const I = maybeInterval(interval, type);
+        return I.range(lo, I.offset(hi));
+    }
+    return typeof scaleFn.ticks === 'function' ? scaleFn.ticks(count) : [];
 }

package/dist/helpers/scales.js

@@ -5,6 +5,7 @@ import { isSymbolOrNull } from './typeChecks.js';
 import { resolveProp, toChannelOption } from './resolve.js';
 import isDataRecord from './isDataRecord.js';
 import { createProjection } from './projection.js';
+import { maybeInterval } from './autoTicks.js';
 /**
  * compute the plot scales
  */
@@ -148,7 +149,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         valueArr.sort(ascending);
     }
     const valueArray = type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
-    const domain = scaleOptions.domain
+    let domain = scaleOptions.domain
         ? isOrdinal
             ? scaleOptions.domain
             : extent(scaleOptions.zero ? [0, ...scaleOptions.domain] : scaleOptions.domain)
@@ -162,6 +163,14 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                 ? valueArray.toReversed()
                 : valueArray
             : extent(scaleOptions.zero ? [0, ...valueArray] : valueArray);
+    if (scaleOptions.interval) {
+        if (isOrdinal) {
+            domain = domainFromInterval(domain, scaleOptions.interval);
+        }
+        else {
+            throw new Error('Setting interval via axis options is only supported for ordinal scales');
+        }
+    }
     if (!scaleOptions.scale) {
         throw new Error(`No scale function defined for ${name}`);
     }
@@ -192,6 +201,11 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                 : null
     };
 }
+function domainFromInterval(domain, interval) {
+    const interval_ = maybeInterval(interval);
+    const [lo, hi] = extent(domain);
+    return interval_.range(lo, interval_.offset(hi));
+}
 /**
  * Infer a scale type based on the scale name, the data values mapped to it and
  * the mark types that are bound to the scale

package/dist/marks/ColorLegend.svelte

@@ -129,7 +129,7 @@
                 marginBottom={20}
                 height={38}
                 inset={0}
-                x={{ domain, tickSpacing, tickFormat }}>
+                x={{ domain, tickSpacing: 30, tickFormat }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
                         {#each ticks as t (t)}

package/dist/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);

package/dist/marks/Line.svelte.d.ts

@@ -7,7 +7,7 @@ export type LineMarkProps = {
     outlineStroke?: string;
     outlineStrokeWidth?: number;
     outlineStrokeOpacity?: number;
-    curve?: CurveName | CurveFactory;
+    curve?: CurveName | CurveFactory | 'auto';
     tension?: number;
     sort?: ConstantAccessor<RawValue> | {
         channel: 'stroke' | 'fill';

package/dist/marks/helpers/CanvasLayer.svelte

@@ -2,6 +2,27 @@
     import { getContext } from 'svelte';
     import type { PlotContext } from '../../types';
     import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { MediaQuery } from 'svelte/reactivity';
+    import type { Attachment } from 'svelte/attachments';
+
+    const darkMode = new MediaQuery('prefers-color-scheme: dark');
+    let colorScheme = $state();
+
+    /**
+     * we need to repaint on dark mode changes in case the user
+     * is using any css variables or currentColor that changes
+     * with the color scheme
+     */
+    const watchColorScheme: Attachment = (element: Element) => {
+        const htmlElement = element.ownerDocument.documentElement;
+        const observer = new MutationObserver(() => {
+            colorScheme = getComputedStyle(htmlElement).colorScheme;
+        });
+        observer.observe(htmlElement, { attributes: true });
+        return () => {
+            observer.disconnect();
+        };
+    };
 
     let restProps: {} = $props();
 
@@ -14,14 +35,15 @@
     canvas element inside a foreignObject for use in a plot and takes care of 
     scaling it to the device pixel ratio.
 -->
-
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        {...restProps}
-        width={plot.width * (devicePixelRatio.current ?? 1)}
-        height={plot.height * (devicePixelRatio.current ?? 1)}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
+<foreignObject x="0" y="0" {@attach watchColorScheme} width={plot.width} height={plot.height}>
+    {#key [colorScheme, darkMode.current]}
+        <canvas
+            xmlns="http://www.w3.org/1999/xhtml"
+            {...restProps}
+            width={plot.width * (devicePixelRatio.current ?? 1)}
+            height={plot.height * (devicePixelRatio.current ?? 1)}
+            style="width: {plot.width}px; height: {plot.height}px;"></canvas>
+    {/key}
 </foreignObject>
 
 <style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.7-pr-65.2",
+    "version": "0.2.8-pr-68.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -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",