svelteplot 0.0.1-alpha.2 → 0.0.1-alpha.20

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, DataRow } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+export type BarXMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y?: ChannelAccessor;
+    inset: number;
+    stack: StackOptions;
+};
+declare const __propDef: {
+    props: BarXMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarXProps = typeof __propDef.props;
+export type BarXEvents = typeof __propDef.events;
+export type BarXSlots = typeof __propDef.slots;
+export default class BarX extends SvelteComponentTyped<BarXProps, BarXEvents, BarXSlots> {
+}
+export {};

package/dist/marks/BarY.svelte

@@ -0,0 +1,52 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+import { stackY } from "../transforms/stack.js";
+import { recordizeY } from "../transforms/recordize.js";
+const BaseMark_BarY = BaseMark;
+const plot = getContext("svelteplot");
+let { data: rawData, insetLeft, insetRight, ...rawChannels } = $props();
+let { data, ...channels } = $derived(stackY(recordizeY({ data: rawData, ...rawChannels })));
+function isValid(value) {
+  return value !== null && !Number.isNaN(value);
+}
+</script>
+
+<BaseMark_BarY type="bar-y" {data} channels={['x', 'y1', 'y2', 'fill', 'stroke']} {...channels}>
+    <g class="bars-y">
+        {#each data as datum}
+            {@const cx = resolveChannel('x', datum, channels)}
+            {@const cy1 = resolveChannel('y1', datum, channels)}
+            {@const cy2 = resolveChannel('y2', datum, channels)}
+            {@const miny = Math.min(plot.yScale(cy1), plot.yScale(cy2))}
+            {@const maxy = Math.max(plot.yScale(cy1), plot.yScale(cy2))}
+            {@const maybeFillColor = resolveChannel('fill', datum, channels)}
+            {@const maybeStrokeColor = resolveChannel('stroke', datum, channels)}
+            {#if isValid(cx) && isValid(cy1) && isValid(cy2)}
+                <rect
+                    style={getBaseStyles(datum, channels)}
+                    style:fill={maybeFillColor
+                        ? plot.colorScale(maybeFillColor)
+                        : maybeStrokeColor
+                          ? null
+                          : 'currentColor'}
+                    style:stroke={maybeStrokeColor ? plot.colorScale(maybeStrokeColor) : null}
+                    transform="translate({[plot.xScale(cx), miny]})"
+                    height={maxy - miny}
+                    width={plot.xScale.bandwidth()}
+                />
+            {/if}
+        {/each}
+    </g>
+</BaseMark_BarY>
+
+<style>
+    rect {
+        fill: none;
+        stroke: none;
+        stroke-width: 1.6px;
+    }
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, DataRow } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+export type BarYMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    stack: StackOptions;
+    inset: number;
+};
+declare const __propDef: {
+    props: BarYMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarYProps = typeof __propDef.props;
+export type BarYEvents = typeof __propDef.events;
+export type BarYSlots = typeof __propDef.slots;
+export default class BarY extends SvelteComponentTyped<BarYProps, BarYEvents, BarYSlots> {
+}
+export {};

package/dist/marks/BaseMark.svelte

@@ -1,10 +1,17 @@
 <script context="module"></script>
 
-<script generics="T extends BaseMarkProps">import { Mark } from "../classes/Mark.svelte";
+<script generics="T extends BaseMarkProps">import { Mark } from "../classes/Mark.svelte.js";
 import { getContext } from "svelte";
 const plot = getContext("svelteplot");
-let { type, data = [], channels = [], children, automatic, ...rest } = $props();
-const mark = new Mark(type, channels, automatic, { data, ...rest });
+let {
+  type,
+  data = [],
+  channels = [],
+  children,
+  automatic,
+  ...rest
+} = $props();
+const mark = new Mark(type, channels, !!automatic, { data, ...rest });
 plot.addMark(mark);
 $effect(() => {
   mark.channels = new Set(channels);

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

@@ -1,8 +1,9 @@
-import { SvelteComponent } from "svelte";
-import type { BaseMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { BaseMarkProps } from '../types.js';
+import { type Snippet } from 'svelte';
 declare class __sveltets_Render<T extends BaseMarkProps> {
     props(): T & {
-        children?: Function | undefined;
+        children?: Snippet<void> | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +15,6 @@ declare class __sveltets_Render<T extends BaseMarkProps> {
 export type BaseMarkProps<T extends BaseMarkProps> = ReturnType<__sveltets_Render<T>['props']>;
 export type BaseMarkEvents<T extends BaseMarkProps> = ReturnType<__sveltets_Render<T>['events']>;
 export type BaseMarkSlots<T extends BaseMarkProps> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class BaseMark<T extends BaseMarkProps> extends SvelteComponent<BaseMarkProps<T>, BaseMarkEvents<T>, BaseMarkSlots<T>> {
+export default class BaseMark<T extends BaseMarkProps> extends SvelteComponentTyped<BaseMarkProps<T>, BaseMarkEvents<T>, BaseMarkSlots<T>> {
 }
 export {};

package/dist/marks/ColorLegend.svelte

@@ -1,33 +1,33 @@
 <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}
-<div class="color-legend">
-    {#each plot.colorScale.domain() as value}
-        {@const symbolV = plot.symbolScale(value)}
-        {@const symbolType = maybeSymbol(symbolV)}
-        <div class="item">
-            <div class="swatch">
-                <svg width="15" height="15"
-                    >{#if plot.colorSymbolRedundant}
-                        <path
-                            transform="translate(7.5,7.5)"
-                            fill={plot.hasFilledDotMarks ? plot.colorScale(value) : 'none'}
-                            stroke={plot.hasFilledDotMarks ? null : plot.colorScale(value)}
-                            d={d3Symbol(symbolType, 40)()}
-                        />
-                    {:else}
-                        <rect fill={plot.colorScale(value)} width="15" height="15" />
-                    {/if}</svg
-                >
+    <div class="color-legend">
+        {#each plot.colorScale.domain() as value}
+            {@const symbolV = plot.symbolScale(value)}
+            {@const symbolType = maybeSymbol(symbolV)}
+            <div class="item">
+                <div class="swatch">
+                    <svg width="15" height="15"
+                        >{#if plot.colorSymbolRedundant}
+                            <path
+                                transform="translate(7.5,7.5)"
+                                fill={plot.hasFilledDotMarks ? plot.colorScale(value) : 'none'}
+                                stroke={plot.hasFilledDotMarks ? null : plot.colorScale(value)}
+                                d={d3Symbol(symbolType, 40)()}
+                            />
+                        {:else}
+                            <rect fill={plot.colorScale(value)} width="15" height="15" />
+                        {/if}</svg
+                    >
+                </div>
+                <span class="item-label">{value}</span>
             </div>
-            <span class="item-label">{value}</span>
-        </div>
-    {/each}
-</div>
+        {/each}
+    </div>
 {/if}
 
 <style>
@@ -40,7 +40,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/ColorLegend.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 ColorLegendProps = typeof __propDef.props;
 export type ColorLegendEvents = typeof __propDef.events;
 export type ColorLegendSlots = typeof __propDef.slots;
-export default class ColorLegend extends SvelteComponent<ColorLegendProps, ColorLegendEvents, ColorLegendSlots> {
+export default class ColorLegend extends SvelteComponentTyped<ColorLegendProps, ColorLegendEvents, ColorLegendSlots> {
 }
 export {};

package/dist/marks/Dot.svelte

@@ -1,66 +1,51 @@
-<script>import resolveChannel from "../helpers/resolveChannel";
-import { getContext } from "svelte";
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+import { isSymbol, maybeSymbol } from "../helpers/symbols.js";
 import { symbol as d3Symbol } from "d3-shape";
-import { isSymbol, maybeSymbol } from "../helpers/symbols";
-import chroma from "chroma-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" } : {}
-});
+let { data, ...channels } = $props();
+let { r = 3, symbol = "circle" } = $derived(channels);
+let channelsWithDefaults = $derived({ ...channels, r, symbol });
+$inspect(channelsWithDefaults);
 function isValid(value) {
   return value !== null && !Number.isNaN(value);
 }
+function getSymbolPath(symbolT, size) {
+  const symbolType = isSymbol(symbolT) ? maybeSymbol(symbolT) : maybeSymbol(plot.symbolScale(symbolT));
+  return d3Symbol(symbolType, size)();
+}
 </script>
 
 <BaseMark_Dot
     type="dot"
     {data}
-    channels={[
-        ...(x ? ['x' as 'x'] : []),
-        ...(y ? ['y' as 'y'] : []), 
-        ...(r ? ['radius'] : []), 
-        ...(symbol ? ['symbol'] : []), 
-        ...(fill || stroke ? ['color']: [])
-    ]}
-    {x}
-    {y}
-    {r}
-    {fill}
-    {stroke}
-    {symbol}
-    {...styleProps}
+    channels={['x', 'y', 'r', 'symbol', 'fill', 'stroke']}
+    {...channels}
 >
     <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) as string|SymbolType}
+            {@const cx = resolveChannel('x', datum, channelsWithDefaults)}
+            {@const cy = resolveChannel('y', datum, channelsWithDefaults)}
+            {@const maybeFillColor = resolveChannel('fill', datum, channelsWithDefaults)}
+            {@const maybeStrokeColor = resolveChannel('stroke', datum, channelsWithDefaults)}
+            {@const radius =
+                typeof r === 'number'
+                    ? r
+                    : plot.radiusScale(resolveChannel('r', datum, channelsWithDefaults))}
+            {@const size = radius * radius * Math.PI}
+            {@const symbolT = resolveChannel('symbol', datum, channelsWithDefaults)}
             {@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)}
+                    d={getSymbolPath(symbolType, size)}
+                    style={getBaseStyles(datum, channels)}
                     style:fill={maybeFillColor ? plot.colorScale(maybeFillColor) : null}
                     style:stroke={maybeStrokeColor
                         ? plot.colorScale(maybeStrokeColor)

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

@@ -1,5 +1,13 @@
-import { SvelteComponent } from "svelte";
-import type { DotMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, DataRow } from '../types.js';
+export type DotMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    r?: ChannelAccessor;
+    rotate?: ChannelAccessor;
+    symbol?: ChannelAccessor;
+};
 declare const __propDef: {
     props: DotMarkProps;
     events: {
@@ -10,6 +18,6 @@ declare const __propDef: {
 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 default class Dot extends SvelteComponentTyped<DotProps, DotEvents, DotSlots> {
 }
 export {};

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];
@@ -12,6 +12,6 @@ declare const __propDef: {
 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 default class DotX extends SvelteComponentTyped<DotXProps, DotXEvents, DotXSlots> {
 }
 export {};

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];
@@ -12,6 +12,6 @@ declare const __propDef: {
 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 default class DotY extends SvelteComponentTyped<DotYProps, DotYEvents, DotYSlots> {
 }
 export {};

package/dist/marks/Frame.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
+import getBaseStyles from "../helpers/getBaseStyles.js";
 const plot = getContext("svelteplot");
 let { ...styleProps } = $props();
 let styleProps2 = $derived({

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

@@ -1,7 +1,7 @@
-import { SvelteComponent } from "svelte";
-import type { FrameProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { FrameProps } from '../types.js';
 declare const __propDef: {
-    props: import("../types").BaseMarkStyleProps;
+    props: import("../types.js").BaseMarkStyleProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -11,5 +11,5 @@ 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> {
+export default class Frame extends SvelteComponentTyped<FrameProps, FrameEvents, FrameSlots> {
 }

package/dist/marks/GridX.svelte

@@ -1,33 +1,43 @@
 <script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import resolveChannel from "../helpers/resolveChannel";
-import getBaseStyles from "../helpers/getBaseStyles";
 import { get } from "underscore";
+import BaseMark from "./BaseMark.svelte";
+import resolveChannel from "../helpers/resolveChannel.js";
+import getBaseStyles from "../helpers/getBaseStyles.js";
 const BaseMark_GridX = BaseMark;
 const plot = getContext("svelteplot");
-let {
-  ticks = [],
-  y1 = null,
-  y2 = null,
-  automatic = false,
-  ...styleProps
-} = $props();
-let autoTickCount = $derived(plot.plotWidth / get(plot, "options.x.tickSpacing", 80));
+let { ticks = [], automatic = false, ...channels } = $props();
+let autoTickCount = $derived(
+  Math.max(2, Math.round(plot.plotWidth / (plot.options?.x?.tickSpacing || 80)))
+);
+$inspect(autoTickCount);
 let autoTicks = $derived(
   ticks.length > 0 ? ticks : get(plot, "options.x.ticks", plot.xScale.ticks(autoTickCount))
 );
+let { y1, y2 } = $derived(channels);
 </script>
 
-<BaseMark_GridX type="grid-x" data={ticks} channels={['x']} {y1} {y2} {automatic}>
+<BaseMark_GridX
+    type="grid-x"
+    data={ticks.length ? ticks.map((tick) => ({ __x: tick })) : undefined}
+    channels={['y']}
+    x="__x"
+    {...channels}
+    {automatic}
+>
     <g class="grid-x">
-        {#each autoTicks as tick, t}
-            <g class="x-tick" transform="translate({plot.xScale(tick)},{plot.margins.top})">
+        {#each autoTicks as tick}
+            <g
+                class="x-tick"
+                transform="translate({plot.xScale(tick) +
+                    (plot.xScale.bandwidth ? plot.xScale.bandwidth() * 0.5 : 0)},{plot.margins
+                    .top})"
+            >
                 <line
                     class="grid"
-                    style={getBaseStyles(tick, styleProps)}
-                    y1={y1 ? plot.yScale(resolveChannel('y', tick, y1)) : 0}
+                    style={getBaseStyles(tick, channels)}
+                    y1={y1 ? plot.yScale(resolveChannel('y1', tick, channels)) : 0}
                     y2={y2
-                        ? plot.yScale(resolveChannel('y', tick, y2))
+                        ? plot.yScale(resolveChannel('y2', tick, channels))
                         : plot.height - plot.margins.top - plot.margins.bottom}
                 />
             </g>
@@ -37,6 +47,7 @@ let autoTicks = $derived(
 
 <style>
     .x-tick line.grid {
-        stroke: #d9d9d9;
+        stroke: currentColor;
+        stroke-opacity: 0.1;
     }
 </style>

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

@@ -1,9 +1,9 @@
-import { SvelteComponent } from "svelte";
-import type { GridOptions } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { GridOptions, ChannelAccessor } from '../types.js';
 declare const __propDef: {
-    props: Partial<import("../types").MarkProps> & GridOptions & {
-        y1?: import("../types").ChannelAccessor | undefined;
-        y2?: import("../types").ChannelAccessor | undefined;
+    props: Partial<import("../types.js").MarkProps> & GridOptions & {
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
         automatic?: boolean | undefined;
     };
     events: {
@@ -14,6 +14,6 @@ declare const __propDef: {
 export type GridXProps = typeof __propDef.props;
 export type GridXEvents = typeof __propDef.events;
 export type GridXSlots = typeof __propDef.slots;
-export default class GridX extends SvelteComponent<GridXProps, GridXEvents, GridXSlots> {
+export default class GridX extends SvelteComponentTyped<GridXProps, GridXEvents, GridXSlots> {
 }
 export {};

package/dist/marks/GridY.svelte

@@ -1,19 +1,28 @@
 <script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
-import { get } from "underscore";
+import getBaseStyles from "../helpers/getBaseStyles.js";
 const plot = getContext("svelteplot");
 let { ticks = [], automatic = false, ...styleProps } = $props();
-let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing", 80));
+let autoTickCount = $derived(plot.plotHeight / (plot.options.y?.tickSpacing || 80));
 let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.y.ticks", plot.yScale.ticks(autoTickCount))
+  ticks.length > 0 ? ticks : plot.options.y?.ticks || plot.yScale.ticks(autoTickCount)
 );
 </script>
 
-<BaseMark type="grid-y" data={ticks} channels={['y']} {automatic}>
+<BaseMark
+    type="grid-y"
+    data={ticks.length ? ticks.map((tick) => ({ __y: tick })) : undefined}
+    channels={['y']}
+    y="__y"
+    {automatic}
+>
     <g class="grid-y">
         {#each autoTicks as tick}
-            <g class="y-tick" transform="translate({plot.margins.left},{plot.yScale(tick)})">
+            <g
+                class="y-tick"
+                transform="translate({plot.margins.left},{plot.yScale(tick) +
+                    (plot.yScale.bandwidth ? plot.yScale.bandwidth() * 0.5 : 0)})"
+            >
                 <line
                     style={getBaseStyles(tick, styleProps)}
                     class="grid"
@@ -26,6 +35,7 @@ let autoTicks = $derived(
 
 <style>
     .y-tick line.grid {
-        stroke: #d9d9d9;
+        stroke: currentColor;
+        stroke-opacity: 0.2;
     }
 </style>

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { GridYMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { GridYMarkProps } from '../types.js';
 declare const __propDef: {
     props: GridYMarkProps;
     events: {
@@ -10,6 +10,6 @@ declare const __propDef: {
 export type GridYProps = typeof __propDef.props;
 export type GridYEvents = typeof __propDef.events;
 export type GridYSlots = typeof __propDef.slots;
-export default class GridY extends SvelteComponent<GridYProps, GridYEvents, GridYSlots> {
+export default class GridY extends SvelteComponentTyped<GridYProps, GridYEvents, GridYSlots> {
 }
 export {};

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>