svelteplot 0.0.1-alpha.7 → 0.0.1-alpha.9

package/dist/Plot.svelte

@@ -70,6 +70,7 @@ function onMouseMove(evt) {
   if (onmousemove)
     onmousemove({ ...evt, plot });
 }
+$inspect(plot.x.domain);
 let hasLegend = $derived(color?.legend || symbol?.legend);
 </script>
 
@@ -149,6 +150,9 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
     figure .plot-header {
         order: 1;
     }
+    h2, h3 {
+        margin: 0;
+    }
     svg {
         order: 2;
         overflow: visible;

package/dist/classes/Channel.svelte.js

@@ -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/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/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/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/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/types.d.ts

@@ -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.7",
+    "version": "0.0.1-alpha.9",
     "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",