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

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

@@ -0,0 +1,15 @@
+import type { StackOptions } from '../transforms/stack.js';
+import type { DataRecord, BaseMarkProps, ChannelAccessor, BaseRectMarkProps } from '../types.js';
+type RectYMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    stack?: StackOptions;
+    interval?: number | string;
+} & BaseRectMarkProps;
+declare const RectY: import("svelte").Component<RectYMarkProps, {}, "">;
+type RectY = ReturnType<typeof RectY>;
+export default RectY;

package/dist/marks/RegressionX.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { ChannelName } from '../types.js';
+    import Mark from '../Mark.svelte';
+    import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
+    import { groups as d3Groups } from 'd3-array';
+
+    let { data = [{}], ...options }: RegressionMarkProps = $props();
+
+    let groupBy: ChannelName | null =
+        options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
+    // separate groups
+    let groups = $derived(
+        groupBy !== null
+            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options)).map(
+                  (g) => g[1]
+              )
+            : [data]
+    );
+</script>
+
+<Mark type="regression">
+    {#each groups as group}
+        <Regression data={group} dependent="x" {...options} />
+    {/each}
+</Mark>

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

@@ -0,0 +1,4 @@
+import { type RegressionMarkProps } from './helpers/Regression.svelte';
+declare const RegressionX: import("svelte").Component<RegressionMarkProps, {}, "">;
+type RegressionX = ReturnType<typeof RegressionX>;
+export default RegressionX;

package/dist/marks/RegressionY.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { ChannelName } from '../types.js';
+    import Mark from '../Mark.svelte';
+    import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
+    import { groups as d3Groups } from 'd3-array';
+
+    let { data = [{}], ...options }: RegressionMarkProps = $props();
+
+    let groupBy: ChannelName | null =
+        options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
+    // separate groups
+    let groups = $derived(
+        groupBy !== null
+            ? d3Groups(data, (d) => resolveChannel(groupBy as ChannelName, d, options)).map(
+                  (g) => g[1]
+              )
+            : [data]
+    );
+</script>
+
+<Mark type="regression">
+    {#each groups as group}
+        <Regression data={group} dependent="y" {...options} />
+    {/each}
+</Mark>

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

@@ -0,0 +1,4 @@
+import { type RegressionMarkProps } from './helpers/Regression.svelte';
+declare const RegressionY: import("svelte").Component<RegressionMarkProps, {}, "">;
+type RegressionY = ReturnType<typeof RegressionY>;
+export default RegressionY;

package/dist/marks/RuleX.svelte

@@ -1,30 +1,54 @@
-<script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-import resolveChannel from "../helpers/resolveChannel.js";
-const BaseMark_RuleX = BaseMark;
-const plot = getContext("svelteplot");
-let { data = [], x, y1, y2, ...styleProps } = $props();
-let dataWrapped = $derived(x ? data : data.map((d) => ({ x: d, ___orig___: d })));
-</script>
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { getContext } from 'svelte';
+    import { recordizeX } from '../transforms/recordize.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+
+    type RuleXMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetTop?: ConstantAccessor<number>;
+        insetBottom?: ConstantAccessor<number>;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+    };
 
-<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={['x', 'y']} {x} {y1} {y2}>
-    <g class="rule-x">
-        {#each data as datum}
-            <line
-                transform="translate({plot.xScale(resolveChannel('x', datum, x))}, {0})"
-                style={getBaseStyles(datum, styleProps)}
-                y1={y1 != null ? plot.yScale(resolveChannel('y', datum, y1)) : plot.margins.top}
-                y2={y2 != null
-                    ? plot.yScale(resolveChannel('y', datum, y2))
-                    : plot.plotHeight + plot.margins.top}
-            />
-        {/each}
-    </g>
-</BaseMark_RuleX>
+    let { data = [{}], class: className = null, ...options }: RuleXMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+    const args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
+</script>
 
-<style>
-    .rule-x line {
-        stroke: currentColor;
-    }
-</style>
+<Mark type="ruleX" channels={['x', 'y1', 'y2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <GroupMultiple class="rule-x {className || ''}" length={className ? 2 : scaledData.length}>
+            {#each scaledData as d}
+                {@const inset = resolveProp(args.inset, d.datum, 0)}
+                {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
+                {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
+                {@const dx = resolveProp(args.dx, d.datum, 0)}
+                {@const dy = resolveProp(args.dy, d.datum, 0)}
+                {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
+                <line
+                    transform="translate({d.x + dx}, {dy})"
+                    {style}
+                    class={[styleClass]}
+                    y1={(inset || insetTop) + (d.y1 != null ? d.y1 : plot.options.marginTop)}
+                    y2={(d.y2 != null ? d.y2 : plot.facetHeight + plot.options.marginTop) -
+                        (inset || insetBottom)} />
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-import type { RuleXMarkProps } from '../types.js';
-declare const __propDef: {
-    props: RuleXMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type RuleXMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    x?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    inset?: ConstantAccessor<number>;
+    insetTop?: ConstantAccessor<number>;
+    insetBottom?: ConstantAccessor<number>;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
 };
-export type RuleXProps = typeof __propDef.props;
-export type RuleXEvents = typeof __propDef.events;
-export type RuleXSlots = typeof __propDef.slots;
-export default class RuleX extends SvelteComponent<RuleXProps, RuleXEvents, RuleXSlots> {
-}
-export {};
+declare const RuleX: import("svelte").Component<RuleXMarkProps, {}, "">;
+type RuleX = ReturnType<typeof RuleX>;
+export default RuleX;

package/dist/marks/RuleY.svelte

@@ -1,30 +1,54 @@
-<script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-import resolveChannel from "../helpers/resolveChannel.js";
-const BaseMark_RuleY = BaseMark;
-const plot = getContext("svelteplot");
-let { data = [], y, x1, x2, ...styleProps } = $props();
-let dataWrapped = $derived(y ? data : data.map((d) => ({ y: d, ___orig___: d })));
-</script>
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { getContext } from 'svelte';
+    import { recordizeY } from '../transforms/recordize.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+
+    type RuleYMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        y?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetLeft?: ConstantAccessor<number>;
+        insetRight?: ConstantAccessor<number>;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+    };
 
-<BaseMark_RuleY type="rule-y" data={dataWrapped} channels={['y', 'x']} {y} {x1} {x2}>
-    <g class="rule-y">
-        {#each data as datum}
-            <line
-                transform="translate(0,{plot.yScale(resolveChannel('y', datum, y))})"
-                style={getBaseStyles(datum, styleProps)}
-                x1={x1 != null ? plot.xScale(resolveChannel('x', datum, x1)) : plot.margins.left}
-                x2={x2 != null
-                    ? plot.xScale(resolveChannel('x', datum, x2))
-                    : plot.plotWidth + plot.margins.left}
-            />
-        {/each}
-    </g>
-</BaseMark_RuleY>
+    let { data = [{}], class: className = null, ...options }: RuleYMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+    const args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
+</script>
 
-<style>
-    .rule-y line {
-        stroke: currentColor;
-    }
-</style>
+<Mark type="ruleY" channels={['y', 'x1', 'x2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
+    {#snippet children({ scaledData, usedScales })}
+        <GroupMultiple class="rule-y {className || ''}" length={className ? 2 : args.data.length}>
+            {#each scaledData as d}
+                {@const inset = resolveProp(args.inset, d.datum, 0)}
+                {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
+                {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
+                {@const dx = resolveProp(args.dx, d.datum, 0)}
+                {@const dy = resolveProp(args.dy, d.datum, 0)}
+                {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
+                <line
+                    transform="translate({dx}, {d.y + dy})"
+                    {style}
+                    class={[styleClass]}
+                    x1={(inset || insetLeft) + (d.x1 != null ? d.x1 : plot.options.marginLeft)}
+                    x2={(d.x2 != null ? d.x2 : plot.facetWidth + plot.options.marginLeft) -
+                        (inset || insetRight)} />
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-import type { RuleYMarkProps } from '../types.js';
-declare const __propDef: {
-    props: RuleYMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+type RuleYMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    y?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    inset?: ConstantAccessor<number>;
+    insetLeft?: ConstantAccessor<number>;
+    insetRight?: ConstantAccessor<number>;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
 };
-export type RuleYProps = typeof __propDef.props;
-export type RuleYEvents = typeof __propDef.events;
-export type RuleYSlots = typeof __propDef.slots;
-export default class RuleY extends SvelteComponent<RuleYProps, RuleYEvents, RuleYSlots> {
-}
-export {};
+declare const RuleY: import("svelte").Component<RuleYMarkProps, {}, "">;
+type RuleY = ReturnType<typeof RuleY>;
+export default RuleY;

package/dist/marks/Sphere.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { type BaseMarkProps } from '../types.js';
+    import Geo from './Geo.svelte';
+
+    let { ...args }: BaseMarkProps = $props();
+</script>
+
+<Geo data={[{ type: 'Sphere' }]} {...args} geoType="sphere" />

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

@@ -0,0 +1,51 @@
+declare const Sphere: import("svelte").Component<Partial<{
+    filter?: import("../types.js").ConstantAccessor<boolean>;
+    facet?: "auto" | "include" | "exclude";
+    fx: import("../types.js").ChannelAccessor;
+    fy: import("../types.js").ChannelAccessor;
+    dx: import("../types.js").ConstantAccessor<number>;
+    dy: import("../types.js").ConstantAccessor<number>;
+    fill: import("../types.js").ConstantAccessor<string>;
+    fillOpacity: import("../types.js").ConstantAccessor<number>;
+    stroke: import("../types.js").ConstantAccessor<string>;
+    strokeWidth: import("../types.js").ConstantAccessor<number>;
+    strokeOpacity: import("../types.js").ConstantAccessor<number>;
+    strokeLinejoin: import("../types.js").ConstantAccessor<"bevel" | "miter" | "miter-clip" | "round">;
+    strokeLinecap: import("../types.js").ConstantAccessor<"butt" | "square" | "round">;
+    strokeMiterlimit: import("../types.js").ConstantAccessor<number>;
+    opacity: import("../types.js").ConstantAccessor<number>;
+    strokeDasharray: import("../types.js").ConstantAccessor<string>;
+    strokeDashoffset: import("../types.js").ConstantAccessor<number>;
+    mixBlendMode: import("../types.js").ConstantAccessor<"normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" | "plus-darker" | "plus-lighter">;
+    clipPath: string;
+    imageFilter: import("../types.js").ConstantAccessor<string>;
+    shapeRendering: import("../types.js").ConstantAccessor<"crispEdges" | "geometricPrecision" | "optimizeSpeed" | "auto">;
+    paintOrder: import("../types.js").ConstantAccessor<string>;
+    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    title: import("../types.js").ConstantAccessor<string>;
+    href: import("../types.js").ConstantAccessor<string>;
+    target: import("../types.js").ConstantAccessor<"_self" | "_blank" | string>;
+    class: string;
+}>, {}, "">;
+type Sphere = ReturnType<typeof Sphere>;
+export default Sphere;

package/dist/marks/Spike.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import Vector, { type VectorMarkProps } from './Vector.svelte';
+    let { data = [{}], ...options }: VectorMarkProps = $props();
+</script>
+
+<Vector
+    {data}
+    fill={options.stroke || 'currentColor'}
+    fillOpacity={0.3}
+    strokeWidth={1}
+    anchor="start"
+    stroke="currentColor"
+    sort={{ channel: '-y' }}
+    {...options}
+    shape="spike" />

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

@@ -0,0 +1,4 @@
+import { type VectorMarkProps } from './Vector.svelte';
+declare const Spike: import("svelte").Component<VectorMarkProps, {}, "">;
+type Spike = ReturnType<typeof Spike>;
+export default Spike;

package/dist/marks/SymbolLegend.svelte

@@ -1,24 +1,38 @@
-<script>import { getContext } from "svelte";
-import { symbol as d3Symbol } from "d3-shape";
-import { maybeSymbol } from "../helpers/symbols.js";
-const plot = getContext("svelteplot");
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import { symbol as d3Symbol } from 'd3-shape';
+    import { maybeSymbol } from '../helpers/symbols.js';
+    import type { PlotContext } from '../types.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    // TODO: allow styling of legend
 </script>
 
-{#if plot.color.manualActiveMarks.length > 0 && !(plot.options.color?.legend && plot.colorSymbolRedundant)}
+<!--
+    @component
+    The SymbolLegend is an HTML mark that can be placed in the header, footer and overlay
+    snippets. You can activate an implicit SymbolLegend above the chart using the global
+    symbol.legend scale option.
+-->
+
+{#if plot.scales.color.manualActiveMarks > 0}
     <div class="symbol-legend">
-        {#each plot.symbolScale.domain() as value}
-            {@const symbolV = plot.symbolScale(value)}
+        {#each plot.scales.color.domain as value}
+            {@const symbolV = plot.scales.symbol.fn(value)}
             {@const symbolType = maybeSymbol(symbolV)}
-            {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
+            {@const color = plot.colorSymbolRedundant
+                ? plot.scales.color.fn(value)
+                : 'currentColor'}
             <div class="item">
                 <div class="swatch">
                     <svg width="15" height="15">
                         <path
                             transform="translate(7.5,7.5)"
-                            fill={plot.hasFilledDotMarks ? color : 'none'}
-                            stroke={plot.hasFilledDotMarks ? null : color}
-                            d={d3Symbol(symbolType, 40)()}
-                        />
+                            style:fill={plot.hasFilledDotMarks ? color : 'none'}
+                            style:stroke={plot.hasFilledDotMarks ? null : color}
+                            d={d3Symbol(symbolType, 40)()} />
                     </svg>
                 </div>
                 <span class="item-label">{value}</span>
@@ -32,6 +46,7 @@ const plot = getContext("svelteplot");
         text-align: left;
         font-size: 12px;
         display: inline-block;
+        margin-right: 2em;
     }
     .item {
         margin: 0 1em 0.5ex 0;

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

@@ -1,14 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SymbolLegendProps = typeof __propDef.props;
-export type SymbolLegendEvents = typeof __propDef.events;
-export type SymbolLegendSlots = typeof __propDef.slots;
-export default class SymbolLegend extends SvelteComponent<SymbolLegendProps, SymbolLegendEvents, SymbolLegendSlots> {
-}
-export {};
+/**
+ * The SymbolLegend is an HTML mark that can be placed in the header, footer and overlay
+ * snippets. You can activate an implicit SymbolLegend above the chart using the global
+ * symbol.legend scale option.
+ */
+declare const SymbolLegend: import("svelte").Component<Record<string, never>, {}, "">;
+type SymbolLegend = ReturnType<typeof SymbolLegend>;
+export default SymbolLegend;