svelteplot 0.0.1-alpha.2 → 0.0.1-alpha.21

package/dist/marks/Line.svelte

@@ -1,49 +1,48 @@
-<script>import resolveChannel from "../helpers/resolveChannel";
+<script context="module"></script>
+
+<script>import resolveChannel from "../helpers/resolveChannel.js";
 import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
+import getBaseStyles from "../helpers/getBaseStyles.js";
 import { line } from "d3-shape";
 import { groupBy } from "underscore";
+import { maybeCurve } from "../helpers/curves.js";
 const BaseMark_Line = BaseMark;
 const plot = getContext("svelteplot");
-let {
-  data,
-  x = null,
-  y = null,
-  z = null,
-  fill,
-  stroke,
-  r = 5,
-  ...styleProps
-} = $props();
+let { data, curve, tension, ...channels } = $props();
+let { sort, z, fill, stroke } = $derived(channels);
 let groups = $derived(
-  z ? Object.values(groupBy(data, (d) => resolveChannel("z", d, z))) : [data]
+  z || fill || stroke ? Object.values(groupBy(data, (d) => resolveChannel("z", d, channels))) : [data]
+);
+let sortedGroups = $derived(
+  sort ? groups.sort(
+    (a, b) => resolveChannel("sort", a[0], channels) > resolveChannel("sort", b[0], channels) ? 1 : -1
+  ) : groups
+);
+let linePath = $derived(
+  line().curve(maybeCurve(curve, tension)).x((d) => plot.xScale(resolveChannel("x", d, channels))).y((d) => plot.yScale(resolveChannel("y", d, channels)))
 );
-let linePath = line().x((d) => plot.xScale(resolveChannel("x", d, x))).y((d) => plot.yScale(resolveChannel("y", d, y)));
 </script>
 
-<BaseMark_Line
-    type="dot"
-    {data}
-    channels={['x', 'y', 'radius', 'color']}
-    {x}
-    {y}
-    {r}
-    {fill}
-    {stroke}
-    {...styleProps}
->
+<BaseMark_Line type="line" {data} channels={['x', 'y', 'color']} {...channels}>
     <g class="lines">
-        {#each groups as lineData}
-            <path d={linePath(lineData)} style={getBaseStyles(lineData[0], styleProps)} />
+        {#each sortedGroups as lineData}
+            <path
+                d={linePath(lineData)}
+                stroke={stroke
+                    ? plot.colorScale(resolveChannel('stroke', lineData[0], channels))
+                    : 'currentColor'}
+                fill={fill
+                    ? plot.colorScale(resolveChannel('fill', lineData[0], channels))
+                    : 'none'}
+                style={getBaseStyles(lineData[0], channels)}
+            />
         {/each}
     </g>
 </BaseMark_Line>
 
 <style>
     .lines path {
-        stroke: currentColor;
-        fill: none;
         stroke-width: 1.4px;
     }
 </style>

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

@@ -1,5 +1,17 @@
-import { SvelteComponent } from "svelte";
-import type { LineMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve, DataRow } from '../types.js';
+export type LineMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve: Curve | CurveFactory;
+    tension: number;
+};
+import { type CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: LineMarkProps;
     events: {
@@ -10,6 +22,6 @@ declare const __propDef: {
 export type LineProps = typeof __propDef.props;
 export type LineEvents = typeof __propDef.events;
 export type LineSlots = typeof __propDef.slots;
-export default class Line extends SvelteComponent<LineProps, LineEvents, LineSlots> {
+export default class Line extends SvelteComponentTyped<LineProps, LineEvents, LineSlots> {
 }
 export {};

package/dist/marks/LineX.svelte

@@ -1,10 +1,8 @@
-<script>import Line from "./Line.svelte";
+<script context="module"></script>
+
+<script>import wrapValueArray from "../helpers/wrapValueArray.js";
+import Line from "./Line.svelte";
 let { data, ...rest } = $props();
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="value"
-    y="index"
-    {...rest}
-/>
+<Line data={wrapValueArray(data)} x="value" y="index" {...rest} />

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

@@ -1,9 +1,16 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory } from 'd3-shape';
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve, RawValue } from '../types.js';
+export type LineXMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: RawValue[];
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
     };
+    curve?: Curve | CurveFactory;
+    tension?: number;
+};
+declare const __propDef: {
+    props: LineXMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -12,6 +19,6 @@ declare const __propDef: {
 export type LineXProps = typeof __propDef.props;
 export type LineXEvents = typeof __propDef.events;
 export type LineXSlots = typeof __propDef.slots;
-export default class LineX extends SvelteComponent<LineXProps, LineXEvents, LineXSlots> {
+export default class LineX extends SvelteComponentTyped<LineXProps, LineXEvents, LineXSlots> {
 }
 export {};

package/dist/marks/LineY.svelte

@@ -1,10 +1,8 @@
+<script context="module"></script>
+
 <script>import Line from "./Line.svelte";
+import wrapValueArray from "../helpers/wrapValueArray.js";
 let { data, ...rest } = $props();
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="index"
-    y="value"
-    {...rest}
-/>
+<Line data={wrapValueArray(data)} x="index" y="value" {...rest} />

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

@@ -1,9 +1,17 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+export type LineYMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: RawValue[];
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
     };
+    curve?: Curve | CurveFactory;
+    tension?: number;
+};
+import type { RawValue } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+declare const __propDef: {
+    props: LineYMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -12,6 +20,6 @@ declare const __propDef: {
 export type LineYProps = typeof __propDef.props;
 export type LineYEvents = typeof __propDef.events;
 export type LineYSlots = typeof __propDef.slots;
-export default class LineY extends SvelteComponent<LineYProps, LineYEvents, LineYSlots> {
+export default class LineY extends SvelteComponentTyped<LineYProps, LineYEvents, LineYSlots> {
 }
 export {};

package/dist/marks/RuleX.svelte

@@ -1,22 +1,30 @@
 <script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
-import resolveChannel from "../helpers/resolveChannel";
+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 })));
+let { data = [], ...channels } = $props();
+let { x, y1, y2 } = $derived(channels);
+let dataWrapped = $derived(x ? data : data.map((d) => ({ __x: d, ___orig___: d })));
 </script>
 
-<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={['x', 'y']} {x} {y1} {y2}>
+<BaseMark_RuleX
+    type="rule-x"
+    data={dataWrapped}
+    channels={['x', 'y1', 'y2']}
+    {...{ x: '__x', ...channels }}
+>
     <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}
+                transform="translate({plot.xScale(resolveChannel('x', datum, channels))}, {0})"
+                style={getBaseStyles(datum, channels)}
+                y1={y1 != null
+                    ? plot.yScale(resolveChannel('y1', datum, channels))
+                    : plot.margins.top}
                 y2={y2 != null
-                    ? plot.yScale(resolveChannel('y', datum, y2))
+                    ? plot.yScale(resolveChannel('y2', datum, channels))
                     : plot.plotHeight + plot.margins.top}
             />
         {/each}

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { RuleXMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { RuleXMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleXMarkProps;
     events: {
@@ -10,6 +10,6 @@ declare const __propDef: {
 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 default class RuleX extends SvelteComponentTyped<RuleXProps, RuleXEvents, RuleXSlots> {
 }
 export {};

package/dist/marks/RuleY.svelte

@@ -1,23 +1,30 @@
 <script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
-import resolveChannel from "../helpers/resolveChannel";
-import wrapArray from "../helpers/wrapArray";
+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 })));
+let { data = [], ...channels } = $props();
+let { y, x1, x2 } = $derived(channels);
+let dataWrapped = $derived(y ? data : data.map((d) => ({ __y: d, ___orig___: d })));
 </script>
 
-<BaseMark_RuleY type="rule-y" data={dataWrapped} channels={['y', 'x']} {y} {x1} {x2}>
+<BaseMark_RuleY
+    type="rule-y"
+    data={dataWrapped}
+    channels={['y', 'x1', 'x2']}
+    {...{ y: '__y', ...channels }}
+>
     <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}
+                transform="translate(0,{plot.yScale(resolveChannel('y', datum, channels))})"
+                style={getBaseStyles(datum, channels)}
+                x1={x1 != null
+                    ? plot.xScale(resolveChannel('x1', datum, channels))
+                    : plot.margins.left}
                 x2={x2 != null
-                    ? plot.xScale(resolveChannel('x', datum, x2))
+                    ? plot.xScale(resolveChannel('x2', datum, channels))
                     : plot.plotWidth + plot.margins.left}
             />
         {/each}

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { RuleYMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { RuleYMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleYMarkProps;
     events: {
@@ -10,6 +10,6 @@ declare const __propDef: {
 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 default class RuleY extends SvelteComponentTyped<RuleYProps, RuleYEvents, RuleYSlots> {
 }
 export {};

package/dist/marks/SymbolLegend.svelte

@@ -1,32 +1,30 @@
 <script>import { getContext } from "svelte";
 import { symbol as d3Symbol } from "d3-shape";
-import { maybeSymbol } from "../helpers/symbols";
+import { maybeSymbol } from "../helpers/symbols.js";
 const plot = getContext("svelteplot");
 </script>
 
 {#if plot.color.manualActiveMarks.length > 0 && !(plot.options.color?.legend && plot.colorSymbolRedundant)}
-<div class="symbol-legend">
-    {#each plot.symbolScale.domain() as value}
-        {@const symbolV = plot.symbolScale(value)}
-        {@const symbolType = maybeSymbol(symbolV)}
-        {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
-        <div class="item">
-            <div class="swatch">
-                <svg width="15" height="15"
-                    >
+    <div class="symbol-legend">
+        {#each plot.symbolScale.domain() as value}
+            {@const symbolV = plot.symbolScale(value)}
+            {@const symbolType = maybeSymbol(symbolV)}
+            {@const color = plot.colorSymbolRedundant ? plot.colorScale(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)()}
                         />
-                   </svg
-                >
+                    </svg>
+                </div>
+                <span class="item-label">{value}</span>
             </div>
-            <span class="item-label">{value}</span>
-        </div>
-    {/each}
-</div>
+        {/each}
+    </div>
 {/if}
 
 <style>
@@ -38,7 +36,9 @@ const plot = getContext("svelteplot");
     .item {
         margin: 0 1em 0.5ex 0;
     }
-    path { stroke-width: 1.5;}
+    path {
+        stroke-width: 1.5;
+    }
     .item,
     .item-label,
     .swatch {

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
@@ -9,6 +9,6 @@ declare const __propDef: {
 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 default class SymbolLegend extends SvelteComponentTyped<SymbolLegendProps, SymbolLegendEvents, SymbolLegendSlots> {
 }
 export {};

package/dist/marks/TickX.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+const BaseMark_TickX = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], ...channels } = $props();
+</script>
+
+<BaseMark_TickX type="tick-x" {data} channels={['x', 'y', 'stroke']} {...channels}>
+    <g class="tick-x">
+        {#each data as datum}
+            <line
+                transform="translate({plot.xScale(resolveChannel('x', datum, channels))}, {0})"
+                style:stroke={channels.stroke
+                    ? plot.colorScale(resolveChannel('stroke', datum, channels))
+                    : null}
+                style={getBaseStyles(datum, channels)}
+                y1={plot.yScale(resolveChannel('y', datum, channels))}
+                y2={plot.yScale(resolveChannel('y', datum, channels)) + plot.yScale.bandwidth()}
+            />
+        {/each}
+    </g>
+</BaseMark_TickX>
+
+<style>
+    .tick-x line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TickMarkProps } from '../types.js';
+declare const __propDef: {
+    props: TickMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TickXProps = typeof __propDef.props;
+export type TickXEvents = typeof __propDef.events;
+export type TickXSlots = typeof __propDef.slots;
+export default class TickX extends SvelteComponentTyped<TickXProps, TickXEvents, TickXSlots> {
+}
+export {};

package/dist/marks/TickY.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+const BaseMark_TickY = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], ...channels } = $props();
+</script>
+
+<BaseMark_TickY type="tick-y" {data} channels={['x', 'y', 'stroke']} {...channels}>
+    <g class="tick-y">
+        {#each data as datum}
+            <line
+                transform="translate(0, {plot.yScale(resolveChannel('y', datum, channels))})"
+                style:stroke={channels.stroke
+                    ? plot.colorScale(resolveChannel('stroke', datum, channels))
+                    : null}
+                style={getBaseStyles(datum, channels)}
+                x1={plot.xScale(resolveChannel('x', datum, channels))}
+                x2={plot.xScale(resolveChannel('x', datum, channels)) + plot.xScale.bandwidth()}
+            />
+        {/each}
+    </g>
+</BaseMark_TickY>
+
+<style>
+    .tick-y line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TickMarkProps } from '../types.js';
+declare const __propDef: {
+    props: TickMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TickYProps = typeof __propDef.props;
+export type TickYEvents = typeof __propDef.events;
+export type TickYSlots = typeof __propDef.slots;
+export default class TickY extends SvelteComponentTyped<TickYProps, TickYEvents, TickYSlots> {
+}
+export {};

package/dist/transforms/normalize.d.ts

@@ -0,0 +1,18 @@
+export declare function normalizeY({ data, y, y1, y2, stroke, fill, z, ...restProps }: {
+    [x: string]: any;
+    data: any;
+    y: any;
+    y1: any;
+    y2: any;
+    stroke: any;
+    fill: any;
+    z: any;
+}): {
+    data: any[];
+    y: any;
+    y1: any;
+    y2: any;
+    stroke: any;
+    fill: any;
+    z: any;
+};

package/dist/transforms/normalize.js

@@ -0,0 +1,25 @@
+import groupBy from 'underscore/modules/groupBy.js';
+export function normalizeY({ data, y, y1, y2, stroke, fill, z, ...restProps }) {
+    const groupBy = stroke || fill || z;
+    const normalizedData = normalize(data, groupBy, ['y', 'y1', 'y2']);
+    return {
+        data: normalizedData,
+        y,
+        y1,
+        y2,
+        stroke,
+        fill,
+        z,
+        ...restProps
+    };
+}
+function normalize(data, groupKey, props) {
+    const filteredProps = props.filter((p) => data[0][p] != null);
+    const groups = Object.values(groupBy(data, groupKey));
+    return groups
+        .map((data) => data.map((datum) => ({
+        ...datum,
+        ...Object.fromEntries(filteredProps.map((prop) => [prop, datum[prop] / data[0][prop]]))
+    })))
+        .flat(1);
+}

package/dist/transforms/recordize.d.ts

@@ -0,0 +1,3 @@
+import type { TransformArg } from '../types.js';
+export declare function recordizeX({ data, ...channels }: TransformArg): TransformArg;
+export declare function recordizeY({ data, ...channels }: TransformArg): TransformArg;

package/dist/transforms/recordize.js

@@ -0,0 +1,36 @@
+import isDataRecord from '../helpers/isDataRecord.js';
+// This transform takes an array of raw values as input and returns
+export function recordizeX({ data, ...channels }) {
+    const dataIsRawValueArray = !isDataRecord(data[0]);
+    if (dataIsRawValueArray) {
+        return {
+            data: data.map((value, index) => ({
+                __value: value,
+                __index: index,
+                ___orig___: value
+            })),
+            ...channels,
+            x: '__value',
+            y: '__index'
+        };
+    }
+    return { data, ...channels };
+}
+export function recordizeY({ data, ...channels }) {
+    if (!data)
+        return { data, ...channels };
+    const dataIsRawValueArray = !isDataRecord(data[0]);
+    if (dataIsRawValueArray) {
+        return {
+            data: data.map((value, index) => ({
+                __value: value,
+                __index: index,
+                ___orig___: value
+            })),
+            ...channels,
+            x: '__index',
+            y: '__value'
+        };
+    }
+    return { data, ...channels };
+}

package/dist/transforms/rename.d.ts

@@ -0,0 +1,4 @@
+import type { ChannelName, TransformArg } from '../types.js';
+type RenameChannelsOptions = Record<ChannelName, ChannelName>;
+export declare function renameChannels({ data, ...channels }: TransformArg, options: RenameChannelsOptions): TransformArg;
+export {};

package/dist/transforms/rename.js

@@ -0,0 +1,10 @@
+export function renameChannels({ data, ...channels }, options) {
+    const newChannels = channels;
+    for (const [from, to] of Object.entries(options)) {
+        if (newChannels[from] !== undefined) {
+            newChannels[to] = newChannels[from];
+            delete newChannels[from];
+        }
+    }
+    return { data, ...newChannels };
+}

package/dist/transforms/stack.d.ts

@@ -0,0 +1,11 @@
+import type { TransformArg } from '../types.js';
+type StackOrder = 'none' | 'appearance' | 'inside-out' | 'sum';
+type StackOffset = 'none' | 'wiggle' | 'center' | 'normalize';
+export type StackOptions = {
+    offset: null | StackOffset;
+    order: null | StackOrder;
+    reverse: boolean;
+};
+export declare function stackY({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export declare function stackX({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export {};