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

package/dist/marks/DifferenceY.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        CurveName,
+        DataRecord,
+        PlotContext
+    } from '../types.js';
+    import { Line, Area } from '../index.js';
+    import { randomId, coalesce } from '../helpers/index.js';
+    import { getContext } from 'svelte';
+    import { extent, max, min } from 'd3-array';
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { CurveFactory } from 'd3-shape';
+
+    type DifferenceYMarkProps = {
+        data: DataRecord[];
+        /*
+         * the horizontal position of the comparison; bound to the x scale
+         */
+        x1: ChannelAccessor;
+        /**
+         * the horizontal position of the metric; bound to the x scale
+         */
+        x2: ChannelAccessor;
+        x: ChannelAccessor;
+        /**
+         * the vertical position of the comparison; bound to the y scale
+         */
+        y1: ChannelAccessor;
+        /**
+         * the vertical position of the metric; bound to the y scale
+         */
+        y2: ChannelAccessor;
+        y: ChannelAccessor;
+        positiveFill?: string;
+        positiveFillOpacity?: number;
+        negativeFill?: string;
+        negativeFillOpacity?: number;
+        stroke: boolean | ChannelAccessor;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+    } & BaseMarkProps;
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    let { data, stroke, class: className = null, ...options }: DifferenceYMarkProps = $props();
+    let { x, x1, x2, y, y1, y2 } = $derived(options);
+
+    const x1x2Differ = $derived((x1 == null || x2 == null) && x1 !== x2);
+
+    const xExtent = $derived(
+        x1x2Differ && x != null ? extent(data, (d) => resolveChannel('x', d, options)) : null
+    );
+    const x1Extent = $derived(
+        x1x2Differ && x1 != null ? extent(data, (d) => resolveChannel('x1', d, options)) : null
+    );
+    const x2Extent = $derived(
+        x1x2Differ && x2 != null ? extent(data, (d) => resolveChannel('x2', d, options)) : null
+    );
+
+    const maxMin = $derived(
+        max([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[0]))
+    );
+    const minMax = $derived(
+        min([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[1]))
+    );
+
+    const croppedX1 = $derived(
+        x1x2Differ
+            ? data.filter((d) => {
+                  const x1val = resolveChannel(x1 != null ? 'x1' : 'x', d, options);
+                  return x1val >= maxMin && x1val <= minMax;
+              })
+            : data
+    );
+
+    const croppedX2 = $derived(
+        x1x2Differ
+            ? data.filter((d) => {
+                  const x2val = resolveChannel(x2 != null ? 'x2' : 'x', d, options);
+                  return x2val >= maxMin && x2val <= minMax;
+              })
+            : data
+    );
+
+    const id = randomId();
+</script>
+
+<g class="positive difference {className || ''}">
+    <!-- pos clips goes from bottom of plot area to the line 2 -->
+    <clipPath id="pos-clip-{id}">
+        <Area
+            data={croppedX2}
+            {...options}
+            fill={options.positiveFill || 'red'}
+            x1={coalesce(x2, x)}
+            y1={coalesce(y2, y)}
+            y2={{ scale: null, value: plot.options.marginTop + plot.facetHeight }} />
+    </clipPath>
+    <!-- pos area goes from top to line 1 -->
+    <Area
+        clipPath="url(#pos-clip-{id})"
+        data={croppedX1}
+        {...options}
+        fill={options.positiveFill || 'pink'}
+        fillOpacity={coalesce(options.positiveFillOpacity, 1)}
+        x1={coalesce(x1, x2, x)}
+        y1={{ scale: null, value: 0 }}
+        y2={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)} />
+</g>
+<g class="negative difference {className || ''}">
+    <!-- neg clips goes from bottom of plot area to the line 1 -->
+    <clipPath id="neg-clip-{id}">
+        <Area
+            data={croppedX1}
+            {...options}
+            fill={options.negativeFill || 'blue'}
+            x1={coalesce(x1, x2, x)}
+            y1={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)}
+            y2={{ scale: null, value: plot.options.marginTop + plot.facetHeight }} />
+    </clipPath>
+    <!-- neg area goes from top to line 2 -->
+    <Area
+        clipPath="url(#neg-clip-{id})"
+        data={croppedX2}
+        {...options}
+        fill={options.negativeFill || 'cyan'}
+        fillOpacity={coalesce(options.negativeFillOpacity, 1)}
+        x1={coalesce(x2, x)}
+        y1={{ scale: null, value: 0 }}
+        y2={coalesce(y2, y)} />
+</g>
+{#if stroke != null}
+    <!-- set stroke to false to hide the line -->
+    <Line
+        data={croppedX2}
+        {...options}
+        stroke={stroke === true ? 'currentColor' : stroke}
+        x={coalesce(x2, x)}
+        y={coalesce(y2, y)} />
+{/if}

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

@@ -0,0 +1,30 @@
+import type { BaseMarkProps, ChannelAccessor, CurveName, DataRecord } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+type DifferenceYMarkProps = {
+    data: DataRecord[];
+    x1: ChannelAccessor;
+    /**
+     * the horizontal position of the metric; bound to the x scale
+     */
+    x2: ChannelAccessor;
+    x: ChannelAccessor;
+    /**
+     * the vertical position of the comparison; bound to the y scale
+     */
+    y1: ChannelAccessor;
+    /**
+     * the vertical position of the metric; bound to the y scale
+     */
+    y2: ChannelAccessor;
+    y: ChannelAccessor;
+    positiveFill?: string;
+    positiveFillOpacity?: number;
+    negativeFill?: string;
+    negativeFillOpacity?: number;
+    stroke: boolean | ChannelAccessor;
+    curve?: CurveName | CurveFactory;
+    tension?: number;
+} & BaseMarkProps;
+declare const DifferenceY: import("svelte").Component<DifferenceYMarkProps, {}, "">;
+type DifferenceY = ReturnType<typeof DifferenceY>;
+export default DifferenceY;

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;