svelteplot 0.0.1-alpha.6 → 0.0.1-alpha.8

package/dist/Plot.svelte

@@ -1,11 +1,7 @@
 <script>import { setContext } from "svelte";
-import { Frame, GridX, GridY } from "./";
+import { Frame, GridX, GridY, AxisX, AxisY, ColorLegend, SymbolLegend } from "./index.js";
 import { DEFAULT_PLOT_OPTIONS, Plot } from "./classes/Plot.svelte";
 import mergeDeep from "./helpers/mergeDeep.js";
-import AxisX from "./marks/AxisX.svelte";
-import AxisY from "./marks/AxisY.svelte";
-import ColorLegend from "./marks/ColorLegend.svelte";
-import SymbolLegend from "./marks/SymbolLegend.svelte";
 let {
   // snippets
   header,
@@ -74,6 +70,7 @@ function onMouseMove(evt) {
   if (onmousemove)
     onmousemove({ ...evt, plot });
 }
+$inspect(plot.x.domain);
 let hasLegend = $derived(color?.legend || symbol?.legend);
 </script>
 

package/dist/Plot.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { PlotProps } from './types';
+import type { PlotProps } from './types.js';
 declare const __propDef: {
     props: PlotProps;
     events: {

package/dist/classes/Channel.svelte.js

@@ -1,6 +1,6 @@
 import resolveChannel from '../helpers/resolveChannel.js';
 import { extent } from 'd3-array';
-import { MARK_PROP_CHANNEL, CHANNEL_TYPES } from '../contants';
+import { MARK_PROP_CHANNEL } from '../contants.js';
 import { isBooleanOrNull, isColorOrNull, isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks.js';
 import { uniq } from 'underscore';
 export class Channel {
@@ -67,6 +67,8 @@ export class Channel {
                 ? 'linear'
                 : this.valueType === 'text'
                     ? 'band'
-                    : 'linear');
+                    : this.valueType === 'color'
+                        ? 'identity'
+                        : 'linear');
 }
 // opacity: typeof === 'number' && between [0,1]

package/dist/classes/Plot.svelte.js

@@ -1,6 +1,7 @@
 import { createScale, createColorScale } from '../helpers/createScale.js';
 import mergeDeep from '../helpers/mergeDeep.js';
 import { Channel } from './Channel.svelte';
+import { get } from 'underscore';
 export const DEFAULT_PLOT_OPTIONS = {
     title: '',
     subtitle: '',
@@ -76,7 +77,7 @@ export class Plot {
     symbolScale = $derived(createScale('ordinal', this.symbol.domain, this.options.symbol?.range || this.hasFilledDotMarks
         ? ['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']
         : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2']));
-    colorScale = $derived(createColorScale(this.color.scaleType, this.color.domain, this.options.color.scheme));
+    colorScale = $derived(createColorScale(this.color.scaleType, this.color.domain, this.options.color?.range || null, this.options.color?.scheme));
     hasAxisXMark = $derived(!!this.marks.find((mark) => mark.type === 'axis-x' && !mark.automatic));
     hasAxisYMark = $derived(!!this.marks.find((mark) => mark.type === 'axis-y' && !mark.automatic));
     constructor(width, height, options) {
@@ -89,8 +90,7 @@ export class Plot {
         // console.log('addMark: ' + mark);
         this.marks = [...this.marks, mark];
         // add mark to respective channels
-        if (mark.channels.has('color'))
-            console.log(this.color.uniqueMarkProps);
+        // console.log(this.x.domain);
     }
     removeMark(removeMark) {
         this.marks = this.marks.filter((mark) => mark.id !== removeMark.id);

package/dist/helpers/GroupMultiple.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { DataRow } from '../types';
+import type { DataRow } from '../types.js';
 declare const __propDef: {
     props: {
         data: DataRow[];

package/dist/helpers/colors.d.ts

@@ -1,5 +1,5 @@
 import { interpolateBrBG } from 'd3-scale-chromatic';
-import type { ColorScheme } from '../types';
+import type { ColorScheme } from '../types.js';
 export declare const categoricalSchemes: Map<string, readonly string[]>;
 export declare function isCategoricalScheme(scheme: string): boolean;
 type SchemeGetter = (n: number) => readonly string[];

package/dist/helpers/createScale.d.ts

@@ -1,4 +1,5 @@
+import type { ColorScheme, RawValue } from '../types.js';
 declare const Scales: Record<string, (domain: number[], range: [number, number]) => (val: any) => any>;
 export declare function createScale(type: keyof typeof Scales, domain: any, range: any, options?: {}): (val: any) => any;
-export declare function createColorScale(type: any, domain: string[] | [number, number] | [Date, Date] | [boolean | boolean], scheme: any): ((d: any) => any) | (unknown[] & string[] & import("d3-scale").ScaleOrdinal<string, unknown, never>);
+export declare function createColorScale(type: any, domain: string[] | [number, number] | [Date, Date] | [boolean | boolean], range: RawValue[] | null, scheme: ColorScheme | null): ((d: any) => any) | (unknown[] & string[] & import("d3-scale").ScaleOrdinal<string, unknown, never>) | import("d3-scale").ScaleSequential<string, never>;
 export {};

package/dist/helpers/createScale.js

@@ -1,6 +1,7 @@
 import { scaleBand, scaleLinear, scaleTime, scaleSqrt, scaleLog, scaleOrdinal } from 'd3-scale';
+import { scaleSequential, scaleDiverging } from 'd3-scale';
 import { getLogTicks } from './getLogTicks.js';
-import { categoricalSchemes, isCategoricalScheme, ordinalScheme } from './colors.js';
+import { categoricalSchemes, isCategoricalScheme, isQuantitativeScheme, ordinalScheme, quantitativeScheme } from './colors.js';
 import { isColorOrNull } from './typeChecks.js';
 const Scales = {
     band: scaleBand,
@@ -8,7 +9,9 @@ const Scales = {
     time: scaleTime,
     sqrt: scaleSqrt,
     log: scaleLog,
-    ordinal: scaleOrdinal
+    ordinal: scaleOrdinal,
+    sequential: scaleSequential,
+    diverging: scaleDiverging
 };
 export function createScale(type, domain, range, options = {}) {
     const scale = Scales[type](domain, range);
@@ -28,20 +31,27 @@ export function createScale(type, domain, range, options = {}) {
     return scale;
 }
 const identity = (d) => d;
-export function createColorScale(type, domain, scheme) {
+export function createColorScale(type, domain, range, scheme) {
+    if (type === 'identity')
+        return identity;
     if (type === 'band') {
         if (domain.every(isColorOrNull)) {
-            console.log('domain is colors', domain);
             return identity;
         }
-        const colorRange = !scheme
-            ? categoricalSchemes.get('tableau10')
-            : Array.isArray(scheme)
-                ? scheme
+        const colorRange = Array.isArray(range)
+            ? range
+            : !scheme
+                ? categoricalSchemes.get('tableau10')
                 : isCategoricalScheme(scheme)
                     ? categoricalSchemes.get(scheme)
                     : ordinalScheme(scheme)(domain.length);
         return scaleOrdinal().domain(domain).range(colorRange);
     }
+    else if (type === 'linear') {
+        const colorInterpolator = isQuantitativeScheme(scheme)
+            ? quantitativeScheme(scheme)
+            : quantitativeScheme('blues');
+        return scaleSequential(domain, colorInterpolator);
+    }
     return (d) => d;
 }

package/dist/helpers/getBaseStyles.d.ts

@@ -1,2 +1,2 @@
-import type { ChannelAccessor, MarkStyleProps, DataRow } from '../types';
+import type { ChannelAccessor, MarkStyleProps, DataRow } from '../types.js';
 export default function (datum: DataRow, props: Partial<Record<MarkStyleProps, ChannelAccessor>>): string;

package/dist/helpers/isDataRecord.d.ts

@@ -1,2 +1,2 @@
-import type { DataRecord } from '../types';
+import type { DataRecord } from '../types.js';
 export default function (value: any): value is DataRecord;

package/dist/helpers/typeChecks.d.ts

@@ -1,4 +1,4 @@
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDateOrNull(v: RawValue): boolean;
 export declare function isNumberOrNull(v: RawValue): boolean;

package/dist/helpers/wrapArray.d.ts

@@ -1,2 +1,2 @@
-import type { DataRow } from '../types';
-export default function (data: DataRow[]): (Date | [number, number] | import("../types").DataRecord)[];
+import type { DataRow } from '../types.js';
+export default function (data: DataRow[]): (Date | [number, number] | import("../types.js").DataRecord)[];

package/dist/marks/AxisX.svelte

@@ -1,6 +1,5 @@
 <script>import { getContext } from "svelte";
 import dayjs from "dayjs";
-import { get } from "underscore";
 import BaseMark from "./BaseMark.svelte";
 import getBaseStyles from "../helpers/getBaseStyles.js";
 import removeIdenticalLines from "../helpers/removeIdenticalLines.js";
@@ -19,9 +18,11 @@ let {
   fill = null,
   ...styleProps
 } = $props();
-let autoTickCount = $derived(plot.plotWidth / get(plot, "options.x.tickSpacing", 80));
+let autoTickCount = $derived(Math.max(2, Math.round(plot.plotWidth / (plot.options?.x?.tickSpacing || 80))));
+$inspect(autoTickCount);
+$inspect(ticks.length);
 let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.x.ticks", plot.xScale.ticks(autoTickCount))
+  ticks.length > 0 ? ticks : plot.options?.x?.ticks ?? plot.xScale.ticks(autoTickCount)
 );
 let useTickFormat = $derived(
   typeof tickFormat === "function" ? tickFormat : plot.x.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.x, plot.plotWidth) : (d) => String(d)
@@ -33,7 +34,7 @@ let tickTexts = $derived(
 );
 let optionsLabel = $derived(plot.options?.x?.label);
 let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel === void 0 ? plot.x.autoTitle : optionsLabel)
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : `${plot.x.autoTitle} \u2192`)
 );
 </script>
 
@@ -44,7 +45,7 @@ let useTitle = $derived(
                 x={plot.plotWidth + plot.margins.left}
                 y={plot.height - 10}
                 class="axis-title"
-                dominant-baseline="hanging">{useTitle} →</text
+                dominant-baseline="hanging">{useTitle}</text
             >
         {/if}
         {#each autoTicks as tick, t}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { AxisMarkOptions } from '../types';
+import type { AxisMarkOptions } from '../types.js';
 declare const __propDef: {
     props: AxisMarkOptions & {
         anchor?: "bottom" | "top" | undefined;

package/dist/marks/AxisY.svelte

@@ -20,16 +20,17 @@ let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing"
 let autoTicks = $derived(
   ticks.length > 0 ? ticks : get(plot, "options.y.ticks", plot.yScale.ticks(autoTickCount))
 );
-let optionsLabel = $derived(get(plot, "options.y.label"));
+let optionsLabel = $derived(plot.options.y?.label);
 let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel === void 0 ? plot.y.autoTitle : optionsLabel)
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : `\u2191 ${plot.y.autoTitle}`)
 );
+$inspect(optionsLabel);
 </script>
 
 <BaseMark_AxisX type="axis-y" data={ticks} channels={['y']} {automatic}>
     <g class="axis-y">
         {#if useTitle}
-            <text x={0} y={5} class="axis-title" dominant-baseline="hanging">↑ {useTitle}</text>
+            <text x={0} y={5} class="axis-title" dominant-baseline="hanging">{useTitle}</text>
         {/if}
         {#each autoTicks as tick}
             <g

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { AxisYMarkProps } from '../types';
+import type { AxisYMarkProps } from '../types.js';
 declare const __propDef: {
     props: AxisYMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { BaseMarkProps } from '../types';
+import type { BaseMarkProps } from '../types.js';
 declare class __sveltets_Render<T extends BaseMarkProps> {
     props(): T & {
         children?: Function | undefined;

package/dist/marks/ColorLegend.svelte

@@ -5,29 +5,29 @@ 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/Dot.svelte

@@ -30,10 +30,10 @@ function isValid(value) {
     {data}
     channels={[
         ...(x ? ['x'] : []),
-        ...(y ? ['y'] : []), 
-        ...(r ? ['radius'] : []), 
-        ...(symbol ? ['symbol'] : []), 
-        ...(fill || stroke ? ['color']: [])
+        ...(y ? ['y'] : []),
+        ...(r ? ['radius'] : []),
+        ...(symbol ? ['symbol'] : []),
+        ...(fill || stroke ? ['color'] : [])
     ]}
     {x}
     {y}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { DotMarkProps } from '../types';
+import type { DotMarkProps } from '../types.js';
 declare const __propDef: {
     props: DotMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import type { FrameProps } from '../types';
+import type { FrameProps } from '../types.js';
 declare const __propDef: {
-    props: import("../types").BaseMarkStyleProps;
+    props: import("../types.js").BaseMarkStyleProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/marks/GridX.svelte

@@ -1,8 +1,8 @@
 <script>import { getContext } from "svelte";
+import { get } from "underscore";
 import BaseMark from "./BaseMark.svelte";
 import resolveChannel from "../helpers/resolveChannel.js";
 import getBaseStyles from "../helpers/getBaseStyles.js";
-import { get } from "underscore";
 const BaseMark_GridX = BaseMark;
 const plot = getContext("svelteplot");
 let {

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { GridOptions } from '../types';
+import type { GridOptions } 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?: import("../types.js").ChannelAccessor | undefined;
+        y2?: import("../types.js").ChannelAccessor | undefined;
         automatic?: boolean | undefined;
     };
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { GridYMarkProps } from '../types';
+import type { GridYMarkProps } from '../types.js';
 declare const __propDef: {
     props: GridYMarkProps;
     events: {

package/dist/marks/Line.svelte

@@ -4,6 +4,7 @@ import BaseMark from "./BaseMark.svelte";
 import getBaseStyles from "../helpers/getBaseStyles.js";
 import { line } from "d3-shape";
 import { groupBy } from "underscore";
+import isDataRecord from "../helpers/isDataRecord.js";
 const BaseMark_Line = BaseMark;
 const plot = getContext("svelteplot");
 let {
@@ -14,10 +15,16 @@ let {
   fill,
   stroke,
   r = 5,
+  sort,
   ...styleProps
 } = $props();
 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, z || fill || stroke))) : [data]
+);
+let sortedGroups = $derived(
+  sort ? groups.sort(
+    (a, b) => resolveChannel("sort", a[0], sort) > resolveChannel("sort", b[0], sort) ? 1 : -1
+  ) : groups
 );
 let linePath = line().x((d) => plot.xScale(resolveChannel("x", d, x))).y((d) => plot.yScale(resolveChannel("y", d, y)));
 </script>
@@ -34,16 +41,21 @@ let linePath = line().x((d) => plot.xScale(resolveChannel("x", d, x))).y((d) =>
     {...styleProps}
 >
     <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('color', lineData[0], stroke))
+                    : 'currentColor'}
+                fill={fill ? plot.colorScale(resolveChannel('color', lineData[0], fill)) : 'none'}
+                style={getBaseStyles(lineData[0], styleProps)}
+            />
         {/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,5 @@
 import { SvelteComponent } from "svelte";
-import type { LineMarkProps } from '../types';
+import type { LineMarkProps } from '../types.js';
 declare const __propDef: {
     props: LineMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RuleXMarkProps } from '../types';
+import type { RuleXMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleXMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RuleYMarkProps } from '../types';
+import type { RuleYMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleYMarkProps;
     events: {

package/dist/marks/SymbolLegend.svelte

@@ -5,28 +5,26 @@ 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/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CHANNEL_TYPES } from './contants';
+import type { CHANNEL_TYPES } from './contants.js';
 import type { Plot } from './classes/Plot.svelte';
 import type { MouseEventHandler } from 'svelte/elements';
 export type Datasets = {
@@ -30,6 +30,11 @@ export type Datasets = {
         body_mass_g: number;
         sex: string;
     }[];
+    bls: {
+        division: string;
+        date: Date;
+        unemployment: number;
+    }[];
 };
 export type AxisXAnchor = 'bottom' | 'top' | 'both';
 export type AxisYAnchor = 'left' | 'right' | 'both';
@@ -80,7 +85,9 @@ export type PlotProps = {
         legend?: boolean;
     } | null;
     color?: {
-        scheme?: ColorScheme | string[];
+        range?: string[];
+        domain: RawValue[];
+        scheme?: ColorScheme;
         legend?: boolean;
     } | null;
 };
@@ -133,6 +140,9 @@ export type LineMarkProps = MarkProps & BaseMarkStyleProps & {
     x?: ChannelAccessor;
     y?: ChannelAccessor;
     z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
 };
 export type GridOptions = {
     ticks?: RawValue[];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.6",
+    "version": "0.0.1-alpha.8",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
@@ -49,7 +49,7 @@
         "prettier": "^3.1.0",
         "prettier-plugin-svelte": "^3.1.2",
         "sass": "^1.69.5",
-        "svelte": "5.0.0-next.20",
+        "svelte": "5.0.0-next.22",
         "svelte-check": "^3.6.2",
         "svelte-highlight": "^7.4.2",
         "tslib": "^2.6.2",