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

package/dist/marks/Dot.svelte

@@ -1,82 +1,137 @@
-<script>import { getContext } from "svelte";
-import { symbol as d3Symbol } from "d3-shape";
-import BaseMark from "./BaseMark.svelte";
-import resolveChannel from "../helpers/resolveChannel.js";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-import { isSymbol, maybeSymbol } from "../helpers/symbols.js";
-const BaseMark_Dot = BaseMark;
-const plot = getContext("svelteplot");
-let {
-  data,
-  x = null,
-  y = null,
-  r = 3,
-  symbol = "circle",
-  stroke = null,
-  fill = null,
-  ...styleProps
-} = $props();
-let styleProps2 = $derived({
-  ...styleProps,
-  ...!styleProps.fill && !styleProps.stroke ? { stroke: "currentColor" } : {}
-});
-function isValid(value) {
-  return value !== null && !Number.isNaN(value);
-}
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        FacetContext,
+        PlotDefaults
+    } from '../types.js';
+    import {
+        resolveChannel,
+        resolveProp,
+        resolveScaledStyles,
+        resolveStyles
+    } from '../helpers/resolve.js';
+    import { maybeSymbol } from '../helpers/symbols.js';
+    import { symbol as d3Symbol } from 'd3-shape';
+    import { projectXY } from '../helpers/scales.js';
+    import { sort } from '../index.js';
+    import Mark from '../Mark.svelte';
+    import DotCanvas from './helpers/DotCanvas.svelte';
+    import { maybeData, testFilter, isValid } from '../helpers/index.js';
+    import { recordizeXY } from '../transforms/recordize.js';
+    import { addEventHandlers } from './helpers/events.js';
+
+    type DotProps = BaseMarkProps & {
+        data: DataRecord[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        r?: ChannelAccessor;
+        fill?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        symbol?: ChannelAccessor | Snippet<[number, string]>;
+        children?: Snippet;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+        canvas: boolean;
+        dotClass: ConstantAccessor<string>;
+        in: any;
+        inParams: any;
+        out: any;
+        outParams: any;
+        transition: any;
+        wrap: Snippet;
+    };
+
+    let {
+        data = [{}],
+        canvas = false,
+        class: className = '',
+        dotClass = null,
+        in: tIn = undefined,
+        inParams = undefined,
+        out: tOut = undefined,
+        outParams = undefined,
+        ...options
+    }: DotProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    function getSymbolPath(symbolType, size) {
+        return d3Symbol(maybeSymbol(symbolType), size)();
+    }
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    const { dotRadius } = getContext<PlotDefaults>('svelteplot/_defaults');
+    let testFacet = $derived(getTestFacet());
+
+    const args = $derived(
+        // todo: move sorting to Mark
+        sort(
+            recordizeXY({
+                data: maybeData(data),
+                // sort by descending radius by default
+                ...(options.r ? { sort: { channel: '-r' } } : {}),
+                ...options,
+                ...(options.fill === true ? { fill: 'currentColor' } : {})
+            })
+        )
+    );
 </script>
 
-<BaseMark_Dot
+<Mark
     type="dot"
-    {data}
+    required={['x', 'y']}
     channels={[
-        ...(x ? ['x'] : []),
-        ...(y ? ['y'] : []),
-        ...(r ? ['radius'] : []),
-        ...(symbol ? ['symbol'] : []),
-        ...(fill || stroke ? ['color'] : [])
+        'x',
+        'y',
+        'r',
+        'symbol',
+        'fill',
+        'opacity',
+        'stroke',
+        'fillOpacity',
+        'strokeOpacity'
     ]}
-    {x}
-    {y}
-    {r}
-    {fill}
-    {stroke}
-    {symbol}
-    {...styleProps}
->
-    <g class="dots">
-        {#each data as datum, i}
-            {@const cx = resolveChannel('x', datum, x)}
-            {@const cy = resolveChannel('y', datum, y)}
-            {@const symbolT = resolveChannel('symbol', datum, symbol)}
-            {@const symbolType = isSymbol(symbolT)
-                ? maybeSymbol(symbolT)
-                : maybeSymbol(plot.symbolScale(symbolT))}
-            {@const radius =
-                typeof r === 'number' ? r : plot.radiusScale(resolveChannel('radius', datum, r))}
-            {@const size = radius * radius * Math.PI}
-            {@const maybeFillColor = resolveChannel('color', datum, fill)}
-            {@const maybeStrokeColor = resolveChannel('color', datum, stroke)}
-            {#if isValid(cx) && isValid(cy)}
-                <path
-                    d={d3Symbol(symbolType, size)()}
-                    style={getBaseStyles(datum, styleProps)}
-                    style:fill={maybeFillColor ? plot.colorScale(maybeFillColor) : null}
-                    style:stroke={maybeStrokeColor
-                        ? plot.colorScale(maybeStrokeColor)
-                        : maybeFillColor
-                          ? null
-                          : 'currentColor'}
-                    transform="translate({[plot.xScale(cx), plot.yScale(cy)]})"
-                />
+    defaults={{ r: dotRadius, symbol: 'circle' }}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        <g class="dots {className || ''}">
+            {#if canvas}
+                <DotCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} />
+            {:else}
+                {#each scaledData as d}
+                    {#if d.valid && isValid(d.r)}
+                        {@const [style, styleClass] = resolveStyles(
+                            plot,
+                            d,
+                            { strokeWidth: 1.6, ...args },
+                            'stroke',
+                            usedScales
+                        )}
+                        <path
+                            transform="translate({d.x}, {d.y})"
+                            d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
+                            class={[
+                                dotClass ? resolveProp(dotClass, d.datum, null) : null,
+                                styleClass
+                            ]}
+                            {style}
+                            use:addEventHandlers={{
+                                getPlotState,
+                                options: args,
+                                datum: d.datum
+                            }} />
+                    {/if}
+                {/each}
             {/if}
-        {/each}
-    </g>
-</BaseMark_Dot>
+        </g>
+    {/snippet}
+</Mark>
 
 <style>
-    path {
-        fill: none;
-        stroke: none;
-        stroke-width: 1.6px;
-    }
 </style>

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

@@ -1,15 +1,25 @@
-import { SvelteComponent } from "svelte";
-import type { DotMarkProps } from '../types.js';
-declare const __propDef: {
-    props: DotMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type DotProps = BaseMarkProps & {
+    data: DataRecord[];
+    x: ChannelAccessor;
+    y: ChannelAccessor;
+    r?: ChannelAccessor;
+    fill?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    symbol?: ChannelAccessor | Snippet<[number, string]>;
+    children?: Snippet;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
+    canvas: boolean;
+    dotClass: ConstantAccessor<string>;
+    in: any;
+    inParams: any;
+    out: any;
+    outParams: any;
+    transition: any;
+    wrap: Snippet;
 };
-export type DotProps = typeof __propDef.props;
-export type DotEvents = typeof __propDef.events;
-export type DotSlots = typeof __propDef.slots;
-export default class Dot extends SvelteComponent<DotProps, DotEvents, DotSlots> {
-}
-export {};
+declare const Dot: import("svelte").Component<DotProps, {}, "">;
+type Dot = ReturnType<typeof Dot>;
+export default Dot;

package/dist/marks/DotX.svelte

@@ -1,5 +1,17 @@
-<script>import Dot from "./Dot.svelte";
-let { data, ...rest } = $props();
+<script lang="ts">
+    import Dot from './Dot.svelte';
+    import { recordizeX } from '../index.js';
+    import type { BaseMarkProps, DataRow } from '../types.js';
+    import type { ChannelAccessor } from '../types.js';
+
+    type DotXProps = BaseMarkProps & {
+        data: DataRow[];
+        x?: ChannelAccessor;
+    };
+
+    let { data = [{}], ...options }: DotXProps = $props();
+
+    const args = $derived(recordizeX({ data, ...options, y: 1 }, { withIndex: false }));
 </script>
 
-<Dot {data} x={(d) => d} y={0} {...rest} />
+<Dot {...args} />

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

@@ -1,17 +1,9 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { BaseMarkProps, DataRow } from '../types.js';
+import type { ChannelAccessor } from '../types.js';
+type DotXProps = BaseMarkProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
 };
-export type DotXProps = typeof __propDef.props;
-export type DotXEvents = typeof __propDef.events;
-export type DotXSlots = typeof __propDef.slots;
-export default class DotX extends SvelteComponent<DotXProps, DotXEvents, DotXSlots> {
-}
-export {};
+declare const DotX: import("svelte").Component<DotXProps, {}, "">;
+type DotX = ReturnType<typeof DotX>;
+export default DotX;

package/dist/marks/DotY.svelte

@@ -1,5 +1,10 @@
-<script>import Dot from "./Dot.svelte";
-let { data, ...rest } = $props();
+<script lang="ts">
+    import Dot from './Dot.svelte';
+    import { recordizeY } from '../index.js';
+
+    let { data = [{}], ...options } = $props();
+
+    const args = $derived(recordizeY({ data, ...options, x: 0 }, { withIndex: false }));
 </script>
 
-<Dot {data} y={(d) => d} x={0} {...rest} />
+<Dot {...args} />

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

@@ -1,17 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DotYProps = typeof __propDef.props;
-export type DotYEvents = typeof __propDef.events;
-export type DotYSlots = typeof __propDef.slots;
-export default class DotY extends SvelteComponent<DotYProps, DotYEvents, DotYSlots> {
-}
-export {};
+declare const DotY: import("svelte").Component<{
+    data?: any[];
+} & Record<string, any>, {}, "">;
+type DotY = ReturnType<typeof DotY>;
+export default DotY;

package/dist/marks/Frame.svelte

@@ -1,37 +1,45 @@
-<script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-const plot = getContext("svelteplot");
-let { ...styleProps } = $props();
-let styleProps2 = $derived({
-  ...styleProps,
-  ...!styleProps.fill && !styleProps.stroke ? { stroke: "currentColor" } : {}
-});
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { BaseMarkProps } from '../types.js';
+    import { resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
+    import { addEventHandlers } from './helpers/events.js';
+
+    type FrameMarkProps = BaseMarkProps &
+        BaseRectMarkProps & {
+            automatic?: boolean;
+        };
+
+    let { automatic, class: className = null, ...options }: FrameMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    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>
 
-<BaseMark type="frame" data={[]} channels={[]}>
+<Mark type="frame" {automatic}>
     <rect
-        class="frame"
-        style={getBaseStyles(null, styleProps2)}
-        x={plot.margins.left}
-        y={plot.margins.top}
-        width={plot.plotWidth}
-        height={plot.plotHeight}
-    />
-</BaseMark>
-
-<!-- 
-<text
-    style="font-size: 40px;text-anchor:middle"
-    dominant-baseline="central"
-    opacity={0.1}
-    transform="translate({plot.margins.left + plot.plotWidth * 0.5}, {plot.margins.top +
-        plot.plotHeight * 0.5})">{plot.plotWidth} x {plot.plotHeight}</text
-> -->
+        class={['frame', className]}
+        transform={dx || dy ? `translate(${dx},${dy})` : null}
+        style={resolveScaledStyles({}, options, {}, plot, 'stroke')}
+        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 - (insetLeft || 0) - (insetRight || 0)}
+        height={plot.facetHeight - (insetBottom || 0) - (insetTop || 0)}
+        use:addEventHandlers={{ getPlotState, options: options, datum: {} }} />
+</Mark>
 
 <style>
-    .frame {
-        stroke: none;
-        fill: none;
-    }
 </style>

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

@@ -1,15 +1,8 @@
-import { SvelteComponent } from "svelte";
-import type { FrameProps } from '../types.js';
-declare const __propDef: {
-    props: import("../types.js").BaseMarkStyleProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { BaseRectMarkProps } from '../types.js';
+import type { BaseMarkProps } from '../types.js';
+type FrameMarkProps = BaseMarkProps & BaseRectMarkProps & {
+    automatic?: boolean;
 };
-type FrameProps_ = typeof __propDef.props;
-export { FrameProps_ as FrameProps };
-export type FrameEvents = typeof __propDef.events;
-export type FrameSlots = typeof __propDef.slots;
-export default class Frame extends SvelteComponent<FrameProps, FrameEvents, FrameSlots> {
-}
+declare const Frame: import("svelte").Component<FrameMarkProps, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/marks/Geo.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { DataRecord, PlotContext, BaseMarkProps } from '../types.js';
+    import Mark from '../Mark.svelte';
+    import { geoPath } from 'd3-geo';
+    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
+    import { getUsedScales } from '../helpers/scales.js';
+    import callWithProps from '../helpers/callWithProps.js';
+    import { sort } from '../index.js';
+    import { testFilter } from '../helpers/index.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GeoCanvas from './helpers/GeoCanvas.svelte';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    type GeoMarkProps = {
+        data: DataRecord[];
+        geoType?: 'sphere' | 'graticule';
+        dragRotate: boolean;
+        canvas: boolean;
+    } & BaseMarkProps;
+
+    let {
+        data = [{}],
+        canvas = false,
+        geoType,
+        dragRotate,
+        class: className = null,
+        ...options
+    }: GeoMarkProps = $props();
+
+    const path = $derived(
+        callWithProps(geoPath, [plot.scales.projection], {
+            ...(options.r
+                ? { pointRadius: (d) => plot.scales.r.fn(resolveChannel('r', d, options)) }
+                : { pointRadius: 3 })
+        })
+    );
+
+    const args = $derived(
+        sort({
+            data,
+            ...(options.r ? { sort: { channel: '-r' } } : {}),
+            ...options
+        })
+    );
+    const preferStroke = new Set(['MultiLineString', 'LineString']);
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    const testFacet = $derived(getTestFacet());
+</script>
+
+<Mark
+    type="geo"
+    channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
+    {...args}>
+    {#snippet children({ mark, usedScales })}
+        <g
+            aria-label="geo"
+            class={['geo', geoType && `geo-${geoType}`, className]}
+            style="fill:currentColor">
+            {#if canvas}
+                <GeoCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} {path} />
+            {:else}
+                {#each args.data as datum}
+                    {#if testFilter(datum, mark.options) && testFacet(datum, mark.options)}
+                        {#snippet el(datum)}
+                            {@const title = resolveProp(args.title, datum, '')}
+                            {@const geometry = resolveProp(args.geometry, datum, datum)}
+                            <path
+                                d={path(geometry)}
+                                style={resolveScaledStyles(
+                                    datum,
+                                    args,
+                                    usedScales,
+                                    plot,
+                                    preferStroke.has(geometry.type) ? 'stroke' : 'fill'
+                                )}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum
+                                }}>
+                                {#if title}<title>{title}</title>{/if}
+                            </path>
+                        {/snippet}
+                        {#if options.href}
+                            <a
+                                href={resolveProp(args.href, datum, '')}
+                                target={resolveProp(args.target, datum, '_self')}>
+                                {@render el(datum)}
+                            </a>
+                        {:else}
+                            {@render el(datum)}
+                        {/if}
+                    {/if}
+                {/each}
+            {/if}
+        </g>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,10 @@
+import type { DataRecord, BaseMarkProps } from '../types.js';
+type GeoMarkProps = {
+    data: DataRecord[];
+    geoType?: 'sphere' | 'graticule';
+    dragRotate: boolean;
+    canvas: boolean;
+} & BaseMarkProps;
+declare const Geo: import("svelte").Component<GeoMarkProps, {}, "">;
+type Geo = ReturnType<typeof Geo>;
+export default Geo;

package/dist/marks/Graticule.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import Geo from './Geo.svelte';
+    import { geoGraticule } from 'd3-geo';
+    import type { DefaultOptions, BaseMarkProps } from '../types.js';
+
+    import { getContext } from 'svelte';
+
+    const DEFAULTS = {
+        graticuleStep: 10,
+        ...getContext<Partial<DefaultOptions>>('svelteplot/defaults')
+    };
+
+    type GraticuleMarkProps = BaseMarkProps & {
+        step?: number;
+        stepX?: number;
+        stepY?: number;
+    };
+
+    let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();
+
+    let graticule = $derived.by(() => {
+        const graticule = geoGraticule();
+        graticule.stepMinor([stepX || step, stepY || step]);
+        return graticule;
+    });
+</script>
+
+<Geo data={[graticule()]} {...options} geoType="graticule" preferStroke />

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

@@ -0,0 +1,9 @@
+import type { BaseMarkProps } from '../types.js';
+type GraticuleMarkProps = BaseMarkProps & {
+    step?: number;
+    stepX?: number;
+    stepY?: number;
+};
+declare const Graticule: import("svelte").Component<GraticuleMarkProps, {}, "">;
+type Graticule = ReturnType<typeof Graticule>;
+export default Graticule;