svelteplot 0.0.1-alpha.9 → 0.1.3-next.3

package/dist/Plot.svelte

@@ -1,171 +1,163 @@
-<script>import { setContext } from "svelte";
-import { Frame, GridX, GridY, AxisX, AxisY, ColorLegend, SymbolLegend } from "./index.js";
-import { DEFAULT_PLOT_OPTIONS, Plot } from "./classes/Plot.svelte";
-import mergeDeep from "./helpers/mergeDeep.js";
-let {
-  // snippets
-  header,
-  footer,
-  overlay,
-  children,
-  // props
-  height = "auto",
-  marginLeft = 30,
-  marginRight = 10,
-  marginTop = 20,
-  marginBottom = 40,
-  inset = null,
-  grid = false,
-  frame = false,
-  maxWidth = null,
-  title = "",
-  subtitle = "",
-  caption = "",
-  // scales
-  radius = null,
-  color = null,
-  symbol = null,
-  x = null,
-  y = null,
-  onmousemove = null
-} = $props();
-let width = $state(400);
-const plot = new Plot(600, height || defaultPlotHeight, {
-  marginTop,
-  marginLeft,
-  marginRight,
-  marginBottom,
-  // scales
-  symbol,
-  radius,
-  x,
-  y,
-  color,
-  // other
-  title,
-  subtitle,
-  caption
-});
-setContext("svelteplot", plot);
-$effect(() => {
-  plot.width = width;
-  plot._height = height;
-  plot.options = mergeDeep({}, DEFAULT_PLOT_OPTIONS, {
-    marginBottom,
-    marginLeft,
-    marginRight,
-    marginTop,
-    inset,
-    symbol,
-    radius,
-    color,
-    x,
-    y,
-    title,
-    subtitle,
-    caption
-  });
-});
-function onMouseMove(evt) {
-  if (onmousemove)
-    onmousemove({ ...evt, plot });
-}
-$inspect(plot.x.domain);
-let hasLegend = $derived(color?.legend || symbol?.legend);
+<!--
+    @component
+    The Plot component is the container for plots. It collects the marks with
+    their data and channels and computes the shared scales.
+
+    The Plot component is split into two parts. This is the outer Plot which 
+    provides convenient defaults and automatically adds axes etc to the grapihcs.
+    The downside is that it adds a bunch of imports that you may not be using.
+    To help with this you can use the core/Plot component directly for a more
+    low-level Plot wrapper.
+-->
+<script lang="ts">
+    import Plot from './core/Plot.svelte';
+
+    import type { PlotOptions } from './types.js';
+
+    // implicit marks
+    import AxisX from './marks/AxisX.svelte';
+    import AxisY from './marks/AxisY.svelte';
+    import ColorLegend from './marks/ColorLegend.svelte';
+    import Frame from './marks/Frame.svelte';
+    import GridX from './marks/GridX.svelte';
+    import GridY from './marks/GridY.svelte';
+    import SymbolLegend from './marks/SymbolLegend.svelte';
+    import FacetAxes from './core/FacetAxes.svelte';
+
+    // automatic scales
+    import { autoScale, autoScaleColor } from './helpers/autoScales.js';
+    import { namedProjection } from './helpers/autoProjection.js';
+    import { isObject } from './helpers/index.js';
+
+    let {
+        header: userHeader,
+        footer: userFooter,
+        overlay,
+        underlay,
+        children: parentChildren,
+        testid,
+        facet,
+        projection,
+        ...restOptions
+    }: Partial<PlotOptions> = $props();
+
+    const projectionOpts = $derived.by(() => {
+        if (
+            projection &&
+            typeof projection !== 'function' &&
+            typeof projection?.type !== 'function'
+        ) {
+            const { type: projFactory, aspectRatio } = namedProjection(
+                isObject(projection) ? projection.type : projection
+            );
+            return {
+                ...(isObject(projection) ? projection : {}),
+                type: projFactory,
+                aspectRatio
+            };
+        }
+        return projection;
+    });
+
+    const scales = $derived(
+        Object.fromEntries(
+            ['x', 'y', 'r', 'color', 'opacity', 'symbol', 'length', 'fx', 'fy'].map((scale) => {
+                const scaleOpts = restOptions[scale] || {};
+                const scaleFn = scaleOpts.scale || (scale === 'color' ? autoScaleColor : autoScale);
+                return [scale, { ...scaleOpts, scale: scaleFn }];
+            })
+        )
+    );
 </script>
 
-<figure class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
-    <svg
-        role="document"
-        {width}
-        height={plot.height}
-        onmousemove={onmousemove ? onMouseMove : null}
-    >
-        <!-- automatic grids -->
-        {#if grid || x?.grid}<GridX automatic />{/if}
-        {#if grid || y?.grid}<GridY automatic />{/if}
+{#snippet header()}
+    {#if restOptions.title}<h2>{restOptions.title}</h2>{/if}
+    {#if restOptions.subtitle}<h3>{restOptions.subtitle}</h3>{/if}
+    <!-- also pass on user header -->
+    {#if userHeader}{@render userHeader()}{/if}
+    {#if restOptions.color?.legend}
+        <ColorLegend />
+    {/if}
+    {#if restOptions.symbol?.legend}
+        <SymbolLegend />
+    {/if}
+{/snippet}
 
-        {#if !plot.hasAxisXMark && plot.hasChannelX}
-            <!-- automatic x axis -->
-            {#if plot.options.x.axis === 'bottom' || plot.options.x.axis === 'both'}
-                <AxisX anchor="bottom" automatic />
-            {/if}
-            {#if plot.options.x.axis === 'top' || plot.options.x.axis === 'both'}
+{#snippet footer()}
+    {#if restOptions.caption}<div>{restOptions.caption}</div>{/if}
+    {#if userFooter}{@render userFooter()}{/if}
+{/snippet}
+
+<!-- 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
+    })}
+        <!-- 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 !plot.hasAxisYMark && plot.hasChannelY}
-            <!-- automatic y axis -->
-            {#if plot.options.y.axis === 'left' || plot.options.y.axis === 'both'}
+        {#if !hasProjection && !hasExplicitAxisY}
+            {#if options.axes && (options.y.axis === 'left' || options.y.axis === 'both')}
                 <AxisY anchor="left" automatic />
             {/if}
-            {#if plot.options.y.axis === 'right' || plot.options.y.axis === 'both'}
+            {#if options.axes && (options.y.axis === 'right' || options.y.axis === 'both')}
                 <AxisY anchor="right" automatic />
             {/if}
         {/if}
-        <!-- automatic frame -->
-        {#if frame}<Frame />{/if}
-        {#if children}{@render children(plot)}{/if}
-    </svg>
-
-    {#if plot.options.title || plot.options.subtitle || header || hasLegend}
-        <div class="plot-header">
-            {#if plot.options.title}
-                <h2>{@html plot.options.title}</h2>
-            {/if}
-            {#if plot.options.subtitle}
-                <h3>{@html plot.options.subtitle}</h3>
-            {/if}
-            {#if color?.legend}
-                <ColorLegend />
-            {/if}
-            {#if symbol?.legend}
-                <SymbolLegend />
-            {/if}
-            {#if header}{@render header(plot)}{/if}
-        </div>
-    {/if}
-
-    {#if footer || plot.options.caption}
-        <div class="plot-footer">
-            {#if plot.options.caption}
-                <figcaption>{@html plot.options.caption}</figcaption>
-            {/if}
-            {#if footer}{@render footer(plot)}{/if}
-        </div>
-    {/if}
-
-    <div class="overlay">
-        {#if overlay}{@render overlay(plot)}{/if}
-    </div>
-</figure>
+        <!-- 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}
+    {#snippet facetAxes()}
+        <FacetAxes />
+    {/snippet}
+</Plot>
 
 <style>
-    figure {
-        margin: 1em 0;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-    }
-    figure .plot-header {
-        order: 1;
-    }
-    h2, h3 {
-        margin: 0;
-    }
-    svg {
-        order: 2;
-        overflow: visible;
-    }
-    figure .plot-footer {
-        order: 3;
-    }
-    .overlay {
-        position: absolute;
-        pointer-events: none;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
+    :root {
+        --plot-bg: white;
+        --plot-fg: currentColor;
     }
 </style>

package/dist/Plot.svelte.d.ts

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-import type { PlotProps } from './types.js';
-declare const __propDef: {
-    props: PlotProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type PlotProps_ = typeof __propDef.props;
-export { PlotProps_ as PlotProps };
-export type PlotEvents = typeof __propDef.events;
-export type PlotSlots = typeof __propDef.slots;
-export default class Plot extends SvelteComponent<PlotProps, PlotEvents, PlotSlots> {
-}
+import Plot from './core/Plot.svelte';
+import type { PlotOptions } from './types.js';
+/**
+ * The Plot component is the container for plots. It collects the marks with
+ * their data and channels and computes the shared scales.
+ *
+ * The Plot component is split into two parts. This is the outer Plot which
+ * provides convenient defaults and automatically adds axes etc to the grapihcs.
+ * The downside is that it adds a bunch of imports that you may not be using.
+ * To help with this you can use the core/Plot component directly for a more
+ * low-level Plot wrapper.
+ */
+declare const Plot: import("svelte").Component<Partial<PlotOptions>, {}, "">;
+type Plot = ReturnType<typeof Plot>;
+export default Plot;

package/dist/constants.d.ts

@@ -0,0 +1,14 @@
+import type { ScaleName, ScaleType, ScaledChannelName } from './types.js';
+export declare const SCALE_TYPES: Record<ScaleName, symbol>;
+export declare const SCALES: ScaleName[];
+export declare const VALID_SCALE_TYPES: Record<ScaleName, Set<ScaleType>>;
+/**
+ * Map of all scaled channels
+ */
+export declare const CHANNEL_SCALE: Record<ScaledChannelName, ScaleName>;
+export declare const CSS_VAR: RegExp;
+export declare const CSS_COLOR: RegExp;
+export declare const CSS_COLOR_MIX: RegExp;
+export declare const CSS_COLOR_CONTRAST: RegExp;
+export declare const CSS_RGBA: RegExp;
+export declare const CSS_URL: RegExp;

package/dist/constants.js

@@ -0,0 +1,109 @@
+export const SCALE_TYPES = {
+    opacity: Symbol('opacity'),
+    color: Symbol('color'),
+    x: Symbol('position'),
+    y: Symbol('position'),
+    symbol: Symbol('symbol'),
+    r: Symbol('radius'),
+    length: Symbol('length'),
+    fx: Symbol('fx'),
+    fy: Symbol('fy'),
+    projection: Symbol('projection')
+};
+export const SCALES = [
+    'x',
+    'y',
+    'color',
+    'opacity',
+    'symbol',
+    'r',
+    'length',
+    'fx',
+    'fy',
+    'projection'
+];
+export const VALID_SCALE_TYPES = {
+    color: new Set([
+        'linear',
+        'categorical',
+        'ordinal',
+        'diverging',
+        'quantile',
+        'quantize',
+        'quantile-cont',
+        'threshold',
+        'log',
+        'symlog',
+        'pow',
+        'sqrt',
+        'diverging-log',
+        'diverging-pow',
+        'diverging-sqrt',
+        'diverging-symlog'
+    ]),
+    x: new Set([
+        'linear',
+        'log',
+        'symlog',
+        'time',
+        'ordinal',
+        'band',
+        'point',
+        'quantile',
+        'quantize',
+        'threshold'
+    ]),
+    y: new Set([
+        'linear',
+        'log',
+        'symlog',
+        'time',
+        'ordinal',
+        'band',
+        'point',
+        'quantile',
+        'quantize',
+        'threshold'
+    ])
+    // ...
+};
+/**
+ * Map of all scaled channels
+ */
+export const CHANNEL_SCALE = {
+    x: 'x',
+    x1: 'x',
+    x2: 'x',
+    y: 'y',
+    y1: 'y',
+    y2: 'y',
+    r: 'r',
+    length: 'length',
+    fx: 'fx',
+    fy: 'fy',
+    symbol: 'symbol',
+    fill: 'color',
+    stroke: 'color',
+    opacity: 'opacity',
+    fillOpacity: 'opacity',
+    strokeOpacity: 'opacity'
+};
+export const CSS_VAR = /^var\(--([a-z-0-9,\s]+)\)$/;
+export const CSS_COLOR = /^color\(/;
+export const CSS_COLOR_MIX = /^color-mix\(/; // just check for prefix
+export const CSS_COLOR_CONTRAST = /^color-contrast\(/; // just check for prefix
+export const CSS_RGBA = /^rgba\(/; // just check for prefix
+export const CSS_URL = /^url\(#/; // just check for prefix
+// export const CHANNEL_MAP: Record<ScaleName, ValueOf<typeof SCALE_TYPES>> = {
+// 	x: SCALE_TYPES.x,
+// 	y: SCALE_TYPES.y,
+// 	opacity: SCALE_TYPES.opacity,
+// 	strokeOpacity: SCALE_TYPES.opacity,
+// 	strokeWidth: SCALE_TYPES.width,
+// 	fillOpacity: SCALE_TYPES.opacity,
+// 	stroke: SCALE_TYPES.color,
+// 	fill: SCALE_TYPES.color,
+// 	r: SCALE_TYPES.radius,
+// 	rotate: SCALE_TYPES.angle,
+// 	symbol: SCALE_TYPES.symbol
+// };

package/dist/core/Facet.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { setContext, type Snippet } from 'svelte';
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { BaseMarkProps, DataRecord, PlotScale, RawValue } from '../types.js';
+    import { identity } from '../helpers';
+
+    let {
+        fx,
+        fy,
+        left,
+        top,
+        right,
+        bottom,
+        topEmpty,
+        bottomEmpty,
+        leftEmpty,
+        rightEmpty,
+        children
+    }: {
+        fx: RawValue;
+        fy: RawValue;
+        left: boolean;
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        topEmpty: boolean;
+        bottomEmpty: boolean;
+        leftEmpty: boolean;
+        rightEmpty: boolean;
+        children?: Snippet;
+    } = $props();
+
+    setContext('svelteplot/facet', {
+        getTestFacet() {
+            return (datum: DataRecord, options: Partial<BaseMarkProps>) => {
+                return (
+                    (options.fx == null || resolveChannel('fx', datum, options) === fx) &&
+                    (options.fy == null || resolveChannel('fy', datum, options) === fy)
+                );
+            };
+        },
+        getFacetState() {
+            return {
+                fx,
+                fy,
+                left,
+                top,
+                right,
+                bottom,
+                topEmpty,
+                bottomEmpty,
+                leftEmpty,
+                rightEmpty
+            };
+        }
+    });
+</script>
+
+{@render children?.()}

package/dist/core/Facet.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Snippet } from 'svelte';
+import type { RawValue } from '../types.js';
+type $$ComponentProps = {
+    fx: RawValue;
+    fy: RawValue;
+    left: boolean;
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    topEmpty: boolean;
+    bottomEmpty: boolean;
+    leftEmpty: boolean;
+    rightEmpty: boolean;
+    children?: Snippet;
+};
+declare const Facet: import("svelte").Component<$$ComponentProps, {}, "">;
+type Facet = ReturnType<typeof Facet>;
+export default Facet;

package/dist/core/FacetAxes.svelte

@@ -0,0 +1,66 @@
+<!-- 
+    @component
+    The FacetAxes component renders the facet axes
+-->
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { PlotContext } from '../types.js';
+    import { scaleBand } from 'd3-scale';
+    import BaseAxisX from '../marks/helpers/BaseAxisX.svelte';
+    import BaseAxisY from '../marks/helpers/BaseAxisY.svelte';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    // we need the plot context for the overall width & height
+    const plot = $derived(getPlotState());
+
+    const useFacetX = $derived(plot.scales.fx.domain.length > 0);
+    const useFacetY = $derived(plot.scales.fy.domain.length > 0);
+
+    const fxValues = $derived(useFacetX ? plot.scales.fx.domain : [true]);
+    const fyValues = $derived(useFacetY ? plot.scales.fy.domain : [true]);
+
+    // create band scales for fx and fy
+    const facetXScale = $derived(
+        scaleBand().paddingInner(0.1).domain(fxValues).rangeRound([0, plot.plotWidth])
+    );
+    const facetYScale = $derived(
+        scaleBand().paddingInner(0.1).domain(fyValues).rangeRound([0, plot.plotHeight])
+    );
+</script>
+
+<!-- facet grid -->
+{#if fxValues.length > 1 && plot.options.fx.axis}
+    <g transform="translate({plot.options.marginLeft}, 0)">
+        <BaseAxisX
+            scaleFn={facetXScale}
+            scaleType="band"
+            ticks={fxValues}
+            tickFormat={(d) => d}
+            tickSize={0}
+            tickPadding={5}
+            anchor={plot.options.fx.axis}
+            options={plot.options.fx.axisOptions || {}}
+            {...plot.options.fx.axisProps || {}}
+            height={plot.plotHeight}
+            marginTop={plot.options.marginTop}
+            {plot} />
+    </g>
+{/if}
+{#if fyValues.length > 1 && plot.options.fy.axis}
+    <g transform="translate(0, {plot.options.marginTop})">
+        <BaseAxisY
+            scaleFn={facetYScale}
+            scaleType="band"
+            ticks={fyValues}
+            tickFormat={(d) => d}
+            tickSize={0}
+            tickPadding={5}
+            anchor={plot.options.fy.axis}
+            lineAnchor="center"
+            options={plot.options.fy.axisOptions || {}}
+            {...plot.options.fy.axisProps || {}}
+            width={plot.plotWidth}
+            marginLeft={plot.options.marginLeft}
+            {plot} />
+    </g>
+{/if}

package/dist/core/FacetAxes.svelte.d.ts

@@ -0,0 +1,4 @@
+/** The FacetAxes component renders the facet axes */
+declare const FacetAxes: import("svelte").Component<Record<string, never>, {}, "">;
+type FacetAxes = ReturnType<typeof FacetAxes>;
+export default FacetAxes;