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

package/dist/Plot.svelte

@@ -1,11 +1,7 @@
 <script>import { setContext } from "svelte";
-import { Frame, GridX, GridY } from "./";
-import { DEFAULT_PLOT_OPTIONS, Plot } from "./classes/Plot.svelte";
-import mergeDeep from "./helpers/mergeDeep";
-import AxisX from "./marks/AxisX.svelte";
-import AxisY from "./marks/AxisY.svelte";
-import ColorLegend from "./marks/ColorLegend.svelte";
-import SymbolLegend from "./marks/SymbolLegend.svelte";
+import { Frame, GridX, GridY, AxisX, AxisY, ColorLegend, SymbolLegend } from "./index.js";
+import { DEFAULT_PLOT_OPTIONS, Plot } from "./classes/Plot.svelte.js";
+import mergeDeep from "./helpers/mergeDeep.js";
 let {
   // snippets
   header,
@@ -25,6 +21,7 @@ let {
   title = "",
   subtitle = "",
   caption = "",
+  testid,
   // scales
   radius = null,
   color = null,
@@ -77,39 +74,45 @@ function onMouseMove(evt) {
 let hasLegend = $derived(color?.legend || symbol?.legend);
 </script>
 
-<figure class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
-    <svg
-        role="document"
-        {width}
-        height={plot.height}
-        onmousemove={onmousemove ? onMouseMove : null}
-    >
-        <!-- automatic grids -->
-        {#if grid || x?.grid}<GridX automatic />{/if}
-        {#if grid || y?.grid}<GridY automatic />{/if}
+<figure data-testid={testid} class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
+    <div class="plot-body">
+        <div class="overlay">
+            {#if overlay}{@render overlay(plot)}{/if}
+        </div>
+        <svg
+            role="document"
+            {width}
+            height={plot.height}
+            onmousemove={onmousemove ? onMouseMove : null}
+        >
+            <!-- automatic grids -->
+            {#if (grid && plot.hasScaleX) || x?.grid}<GridX automatic />{/if}
+            {#if (grid && plot.hasScaleY) || y?.grid}<GridY automatic />{/if}
 
-        {#if !plot.hasAxisXMark && plot.hasChannelX}
-            <!-- automatic x axis -->
-            {#if plot.options.x.axis === 'bottom' || plot.options.x.axis === 'both'}
-                <AxisX anchor="bottom" automatic />
-            {/if}
-            {#if plot.options.x.axis === 'top' || plot.options.x.axis === 'both'}
-                <AxisX anchor="top" automatic />
+            {#if !plot.hasAxisXMark && (plot.hasScaleX || x?.grid)}
+                <!-- automatic x axis -->
+                {#if plot.options.x.axis === 'bottom' || plot.options.x.axis === 'both'}
+                    <AxisX anchor="bottom" automatic />
+                {/if}
+                {#if plot.options.x.axis === 'top' || plot.options.x.axis === 'both'}
+                    <AxisX anchor="top" automatic />
+                {/if}
             {/if}
-        {/if}
-        {#if !plot.hasAxisYMark && plot.hasChannelY}
-            <!-- automatic y axis -->
-            {#if plot.options.y.axis === 'left' || plot.options.y.axis === 'both'}
-                <AxisY anchor="left" automatic />
+            {#if !plot.hasAxisYMark && (plot.hasScaleY || y?.grid)}
+                <!-- automatic y axis -->
+                {#if plot.options.y.axis === 'left' || plot.options.y.axis === 'both'}
+                    <AxisY anchor="left" automatic />
+                {/if}
+                {#if plot.options.y.axis === 'right' || plot.options.y.axis === 'both'}
+                    <AxisY anchor="right" automatic />
+                {/if}
             {/if}
-            {#if plot.options.y.axis === 'right' || plot.options.y.axis === 'both'}
-                <AxisY anchor="right" automatic />
-            {/if}
-        {/if}
-        <!-- automatic frame -->
-        {#if frame}<Frame />{/if}
-        {#if children}{@render children(plot)}{/if}
-    </svg>
+            <!-- automatic frame -->
+            {#if frame}<Frame />{/if}
+            {#if children}{@render children(plot)}{/if}
+        </svg>
+        
+    </div>
 
     {#if plot.options.title || plot.options.subtitle || header || hasLegend}
         <div class="plot-header">
@@ -137,10 +140,6 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
             {#if footer}{@render footer(plot)}{/if}
         </div>
     {/if}
-
-    <div class="overlay">
-        {#if overlay}{@render overlay(plot)}{/if}
-    </div>
 </figure>
 
 <style>
@@ -150,12 +149,27 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
         display: flex;
         flex-direction: column;
     }
+
+    .plot-body {
+        position: relative;
+    }
     figure .plot-header {
         order: 1;
     }
-    svg {
+    .overlay {
+        z-index: 2;
+    }
+    h2,
+    h3 {
+        margin: 0;
+    }
+    .plot-body {
         order: 2;
+        
+    }
+    svg {
         overflow: visible;
+        z-index: 1;
     }
     figure .plot-footer {
         order: 3;

package/dist/Plot.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { PlotProps } from './types';
+import { SvelteComponentTyped } from "svelte";
+import type { PlotProps } from './types.js';
 declare const __propDef: {
     props: PlotProps;
     events: {
@@ -11,5 +11,5 @@ type PlotProps_ = typeof __propDef.props;
 export { PlotProps_ as PlotProps };
 export type PlotEvents = typeof __propDef.events;
 export type PlotSlots = typeof __propDef.slots;
-export default class Plot extends SvelteComponent<PlotProps, PlotEvents, PlotSlots> {
+export default class Plot extends SvelteComponentTyped<PlotProps, PlotEvents, PlotSlots> {
 }

package/dist/classes/Mark.svelte.js

@@ -1,9 +1,13 @@
+import { CHANNEL_SCALE } from '../contants.js';
 export class Mark {
     id;
     type;
     automatic;
     channels = $state(new Set());
     props = $state();
+    scales = $derived(new Set(Array.from(this.channels.values())
+        .filter((channel) => this.props[channel] != null && !(typeof this.props[channel] === 'number'))
+        .map((channel) => CHANNEL_SCALE[channel])));
     constructor(type, channels, automatic, props) {
         this.id = Symbol();
         this.type = type;

package/dist/classes/Plot.svelte.js

@@ -1,7 +1,7 @@
-import { createScale, createColorScale } from '../helpers/createScale';
-import mergeDeep from '../helpers/mergeDeep';
-import { Channel } from './Channel.svelte';
-import { uniq } from 'underscore';
+import { createScale, createColorScale } from '../helpers/createScale.js';
+import mergeDeep from '../helpers/mergeDeep.js';
+import { Scale } from './Scale.svelte.js';
+import pick from 'underscore/modules/pick.js';
 export const DEFAULT_PLOT_OPTIONS = {
     title: '',
     subtitle: '',
@@ -37,16 +37,24 @@ export class Plot {
     _height = $state(400);
     options = $state(DEFAULT_PLOT_OPTIONS);
     marks = $state([]);
-    hasChannelX = $derived(!!this.marks.find((mark) => mark.channels.has('x')));
-    hasChannelY = $derived(!!this.marks.find((mark) => mark.channels.has('y')));
+    hasScaleX = $derived(!!this.marks.find((mark) => !mark.automatic && mark.scales.has('x')));
+    hasScaleY = $derived(!!this.marks.find((mark) => !mark.automatic && mark.scales.has('y')));
     hasFilledDotMarks = $derived(!!this.marks.find((d) => d.type === 'dot' && d.props?.fill));
     manualMarks = $derived(this.marks.filter((mark) => !mark.automatic));
-    singlePosChannelMark = $derived(this.manualMarks.length === 1 &&
+    singlePosScaleMark = $derived(this.manualMarks.length === 1 &&
         (!this.manualMarks[0].channels.has('x') || !this.manualMarks[0].channels.has('y')));
-    height = $derived(this._height === 'auto' ? (this.hasChannelY ? 400 : 90) : this._height);
+    height = $derived(this._height === 'auto'
+        ? this.hasScaleY
+            ? this.y.scaleType === 'band'
+                ? this.y.domain.length * 30
+                : this.y.scaleType === 'point'
+                    ? this.y.domain.length * 18
+                    : 400
+            : 90
+        : this._height);
     inset = $derived(typeof this.options.inset === 'number'
         ? this.options.inset
-        : this.singlePosChannelMark
+        : this.singlePosScaleMark
             ? 10
             : 0);
     // derived props
@@ -59,25 +67,29 @@ export class Plot {
     // margins = $state<Margins>({ left: 0, right: 0, top: 0, bottom: 0 });
     plotWidth = $derived(this.width - this.margins.left - this.margins.right);
     plotHeight = $derived(this.height - this.margins.top - this.margins.bottom);
-    x = new Channel('x', this);
-    y = new Channel('y', this);
-    radius = new Channel('radius', this);
-    color = new Channel('color', this);
-    symbol = new Channel('symbol', this);
+    x = new Scale('x', this);
+    y = new Scale('y', this);
+    radius = new Scale('radius', this);
+    color = new Scale('color', this);
+    symbol = new Scale('symbol', this);
     colorSymbolRedundant = $derived(this.color.uniqueMarkProps.length === 1 &&
         this.symbol.uniqueMarkProps.length === 1 &&
         this.color.uniqueMarkProps[0] === this.symbol.uniqueMarkProps[0]);
-    xScale = $derived(createScale(this.x.scaleType === 'linear' && this.options.x.log ? 'log' : this.x.scaleType, this.options?.x?.domain || this.x.domain, this.options?.x?.reverse
+    xScale = $derived(createScale(this.x.scaleType, this.options?.x?.domain || this.x.domain, this.options?.x?.reverse
         ? [this.margins.left + this.plotWidth - this.inset, this.margins.left + this.inset]
-        : [this.margins.left + this.inset, this.margins.left + this.plotWidth - this.inset], this.x.scaleType === 'linear' && this.options.x.log ? { base: 10 } : {}));
-    yScale = $derived(createScale(this.y.scaleType === 'linear' && this.options.y.log ? 'log' : this.y.scaleType, this.options.y?.domain || this.y.domain, this.options.y?.reverse
+        : [this.margins.left + this.inset, this.margins.left + this.plotWidth - this.inset], 
+    // options
+    getScaleOptions(this.x.scaleType, this.options.x)));
+    yScale = $derived(createScale(this.y.scaleType, this.options.y?.domain || this.y.domain, this.options.y?.reverse
         ? [this.margins.top + this.inset, this.height - this.margins.bottom - this.inset]
-        : [this.height - this.margins.bottom - this.inset, this.margins.top + this.inset], this.y.scaleType === 'linear' && this.options.y.log ? { base: '10' } : {}));
+        : [this.height - this.margins.bottom - this.inset, this.margins.top + this.inset], 
+    // options
+    getScaleOptions(this.y.scaleType, this.options.y)));
     radiusScale = $derived(createScale(this.radius.scaleType, [0, Math.max(this.radius.domain[0], this.radius.domain[1])], this.options.radius.range));
     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));
+        : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2'], getScaleOptions(this.symbol.scaleType, this.options.symbol || {})));
+    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) {
@@ -87,13 +99,27 @@ export class Plot {
         this.options = opts;
     }
     addMark(mark) {
-        // console.log('addMark: ' + mark);
         this.marks = [...this.marks, mark];
-        // add mark to respective channels
-        if (mark.channels.has('color'))
-            console.log(this.color.uniqueMarkProps);
     }
     removeMark(removeMark) {
         this.marks = this.marks.filter((mark) => mark.id !== removeMark.id);
     }
 }
+/**
+ * users can pass options to the D3 scale function
+ */
+function getScaleOptions(scaleType, options = {}) {
+    return scaleType === 'linear'
+        ? pick(options, ['clamp', 'unknown'])
+        : scaleType === 'pow'
+            ? pick(options, ['exponent'])
+            : scaleType === 'log'
+                ? { base: 10, ...pick(options, ['base']) }
+                : scaleType === 'symlog'
+                    ? pick(options, ['constant'])
+                    : scaleType === 'point'
+                        ? pick(options, ['padding', 'align', 'round'])
+                        : scaleType === 'band'
+                            ? pick(options, ['padding', 'paddingInner', 'paddingOuter', 'align', 'round'])
+                            : {};
+}

package/dist/classes/Scale.svelte.js

@@ -0,0 +1,94 @@
+import resolveChannel from '../helpers/resolveChannel.js';
+import { extent } from 'd3-array';
+import { CHANNEL_SCALE } from '../contants.js';
+import { isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks.js';
+import uniq from 'underscore/modules/uniq.js';
+const FUNCTION = '(function)';
+export class Scale {
+    name = undefined;
+    plot = $state(undefined);
+    constructor(name, plot) {
+        this.name = name;
+        this.plot = plot;
+    }
+    // readonly type: ScaleType = SCALE_TYPES.position;
+    // all marks that have this channel
+    marks = $derived(this.plot?.marks ?? []);
+    scaleOptions = $derived(this.plot && this.name !== undefined ? this.plot.options[this.name] || {} : {});
+    forceDomain = $derived(this.plot && (this.name === 'x' || this.name === 'y')
+        ? this.scaleOptions?.domain || null
+        : null);
+    possibleChannels = $derived(Object.entries(CHANNEL_SCALE)
+        .filter(([, channel]) => channel === this.name)
+        .map(([prop]) => prop));
+    activeMarks = $derived(this.marks.filter((mark) => this.possibleChannels.find((channel) => mark.channels.has(channel) && mark.props[channel] !== undefined)));
+    manualActiveMarks = $derived(this.activeMarks.filter((mark) => !mark.automatic));
+    propNames = $derived(uniq(this.manualActiveMarks
+        .map((mark) => this.possibleChannels
+        .filter((channel) => mark.channels.has(channel) &&
+        (typeof mark.props[channel] === 'string' ||
+            typeof mark.props[channel] === 'function') &&
+        !String(mark.props[channel]).startsWith('__'))
+        .map((channel) => typeof mark.props[channel] === 'string' ? mark.props[channel] : FUNCTION))
+        .flat(2)));
+    autoTitle = $derived(this.propNames.length === 1 && this.propNames[0] !== FUNCTION ? this.propNames[0] : null);
+    uniqueMarkProps = $derived(uniq(this.manualActiveMarks
+        .map((mark) => this.possibleChannels
+        .filter((prop) => mark.props[prop] !== undefined)
+        .map((prop) => mark.props[prop]))
+        .flat(2)));
+    dataValues = $derived([
+        ...this.activeMarks
+            // only check marks with data
+            .filter((mark) => mark.props.data.length)
+            .map((mark) => this.possibleChannels.map((prop) => mark.props.data.map((row) => resolveChannel(prop, row, mark.props))))
+            .flat(3)
+            .filter((d) => d != null),
+        ...(this.forceDomain || [])
+    ]);
+    isPosition = $derived(this.name === 'x' || this.name === 'y');
+    isColor = $derived(this.name === 'color');
+    scaleType = $derived(this.scaleOptions.type ||
+        inferScaleType(this.dataValues, { isPosition: this.isPosition, isColor: this.isColor }));
+    // readonly valueType = $derived(
+    //     this.dataValues.every((v) => v == null)
+    //         ? 'null'
+    //         : this.dataValues.every(isColorOrNull)
+    //           ? 'color'
+    //           : this.dataValues.every(isBooleanOrNull)
+    //             ? 'boolean'
+    //             : this.dataValues.every(isStringOrNull)
+    //               ? 'text'
+    //               : this.dataValues.every(isNumberOrNull)
+    //                 ? 'number'
+    //                 : this.dataValues.every(isDateOrNull)
+    //                   ? 'date'
+    //                   : 'mixed'
+    // );
+    domain = $derived(this.scaleOptions.domain || inferScaleDomain(this.dataValues, this.scaleType));
+}
+// opacity: typeof === 'number' && between [0,1]
+function inferScaleType(dataValues, { isPosition, isColor }) {
+    if (!dataValues.length)
+        return 'linear';
+    if (dataValues.every(isNumberOrNull))
+        return 'linear';
+    if (dataValues.every(isDateOrNull))
+        return 'time';
+    if (dataValues.every(isStringOrNull))
+        return 'band';
+    return 'linear';
+}
+function inferScaleDomain(dataValues, scaleType) {
+    if (scaleType === 'point' || scaleType === 'band') {
+        return uniq(dataValues);
+    }
+    if (scaleType === 'linear' ||
+        scaleType === 'pow' ||
+        scaleType === 'log' ||
+        scaleType === 'sqrt' ||
+        scaleType === 'sequential' ||
+        scaleType === 'time') {
+        return extent(dataValues);
+    }
+}

package/dist/contants.d.ts

@@ -1,3 +1,3 @@
-import type { ChannelName, MarkProps, MarkStyleProps } from './types';
-export declare const CHANNEL_TYPES: Record<ChannelName, symbol>;
-export declare const MARK_PROP_CHANNEL: Record<MarkProps & MarkStyleProps, ChannelName>;
+import type { ScaleName, ChannelName } from './types.js';
+export declare const SCALE_TYPES: Record<ScaleName, symbol>;
+export declare const CHANNEL_SCALE: Record<ChannelName, ScaleName>;

package/dist/contants.js

@@ -1,4 +1,4 @@
-export const CHANNEL_TYPES = {
+export const SCALE_TYPES = {
     opacity: Symbol('opacity'),
     color: Symbol('color'),
     x: Symbol('position'),
@@ -6,9 +6,10 @@ export const CHANNEL_TYPES = {
     angle: Symbol('angle'),
     symbol: Symbol('symbol'),
     radius: Symbol('radius'),
-    width: Symbol('width')
+    width: Symbol('width'),
+    fontSize: Symbol('width')
 };
-export const MARK_PROP_CHANNEL = {
+export const CHANNEL_SCALE = {
     x: 'x',
     x1: 'x',
     x2: 'x',
@@ -23,18 +24,19 @@ export const MARK_PROP_CHANNEL = {
     opacity: 'opacity',
     fillOpacity: 'opacity',
     strokeOpacity: 'opacity',
-    strokeWidth: 'width'
+    strokeWidth: 'width',
+    fontSize: 'fontSize'
 };
-// export const CHANNEL_MAP: Record<ChannelName, ValueOf<typeof CHANNEL_TYPES>> = {
-// 	x: CHANNEL_TYPES.x,
-// 	y: CHANNEL_TYPES.y,
-// 	opacity: CHANNEL_TYPES.opacity,
-// 	strokeOpacity: CHANNEL_TYPES.opacity,
-// 	strokeWidth: CHANNEL_TYPES.width,
-// 	fillOpacity: CHANNEL_TYPES.opacity,
-// 	stroke: CHANNEL_TYPES.color,
-// 	fill: CHANNEL_TYPES.color,
-// 	r: CHANNEL_TYPES.radius,
-// 	rotate: CHANNEL_TYPES.angle,
-// 	symbol: CHANNEL_TYPES.symbol
+// export const CHANNEL_MAP: Record<ScaleName, ValueOf<typeof SCALE_TYPES>> = {
+// 	x: SCALE_TYPES.x,
+// 	y: SCALE_TYPES.y,
+// 	opacity: SCALE_TYPES.opacity,
+// 	strokeOpacity: SCALE_TYPES.opacity,
+// 	strokeWidth: SCALE_TYPES.width,
+// 	fillOpacity: SCALE_TYPES.opacity,
+// 	stroke: SCALE_TYPES.color,
+// 	fill: SCALE_TYPES.color,
+// 	r: SCALE_TYPES.radius,
+// 	rotate: SCALE_TYPES.angle,
+// 	symbol: SCALE_TYPES.symbol
 // };

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { DataRow } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { DataRow } from '../types.js';
 declare const __propDef: {
     props: {
         data: DataRow[];
@@ -14,6 +14,6 @@ declare const __propDef: {
 export type GroupMultipleProps = typeof __propDef.props;
 export type GroupMultipleEvents = typeof __propDef.events;
 export type GroupMultipleSlots = typeof __propDef.slots;
-export default class GroupMultiple extends SvelteComponent<GroupMultipleProps, GroupMultipleEvents, GroupMultipleSlots> {
+export default class GroupMultiple extends SvelteComponentTyped<GroupMultipleProps, GroupMultipleEvents, GroupMultipleSlots> {
 }
 export {};

package/dist/helpers/autoTimeFormat.d.ts

@@ -1,2 +1,2 @@
-import type { Channel } from '../classes/Channel.svelte';
-export default function autoTimeFormat(x: Channel, plotWidth: number): (date: Date) => string[];
+import type { Scale } from '../classes/Scale.svelte.js';
+export default function autoTimeFormat(x: Scale, plotWidth: number): (date: Date) => string[];

package/dist/helpers/autoTimeFormat.js

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { isDate } from 'underscore';
+import isDate from 'underscore/modules/isDate.js';
 export default function autoTimeFormat(x, plotWidth) {
     const daysPer100Px = ((toNumber(x.domain[1]) - toNumber(x.domain[0])) / plotWidth / 864e5) * 100;
     const format = daysPer100Px < 1 ? 'HH:mm\nMMM DD' : daysPer100Px < 30 ? 'DD\nMMM' : 'MMM\nYYYY';

package/dist/helpers/callWithProps.d.ts

@@ -0,0 +1,4 @@
+import type { RawValue } from '../types.js';
+type Setter = (v: any) => void;
+export default function (d3func: () => Record<string, Setter>, args: RawValue[], props?: Record<string, RawValue>): Record<string, Setter>;
+export {};

package/dist/helpers/callWithProps.js

@@ -0,0 +1,9 @@
+export default function (d3func, args, props = {}) {
+    const res = d3func(...args);
+    for (const [key, val] of Object.entries(props)) {
+        if (typeof res[key] !== 'function')
+            throw new Error(`function ${key} does not exist`);
+        res[key](val);
+    }
+    return res;
+}

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,47 +1,68 @@
-import { scaleBand, scaleLinear, scaleTime, scaleSqrt, scaleLog, scaleOrdinal } from 'd3-scale';
-import { getLogTicks } from './getLogTicks';
-import { categoricalSchemes, isCategoricalScheme, isOrdinalScheme, ordinalScheme } from './colors';
-import { isColorOrNull } from './typeChecks';
+import { scaleBand, scaleLinear, scaleTime, scaleSqrt, scaleLog, scaleOrdinal, scalePoint, scaleSymlog, scalePow } from 'd3-scale';
+import { scaleSequential, scaleDiverging } from 'd3-scale';
+import { getLogTicks } from './getLogTicks.js';
+import { categoricalSchemes, isCategoricalScheme, isQuantitativeScheme, ordinalScheme, quantitativeScheme } from './colors.js';
+import { isColorOrNull } from './typeChecks.js';
 const Scales = {
+    point: scalePoint,
     band: scaleBand,
     linear: scaleLinear,
     time: scaleTime,
     sqrt: scaleSqrt,
+    pow: scalePow,
     log: scaleLog,
-    ordinal: scaleOrdinal
+    symlog: scaleSymlog,
+    ordinal: scaleOrdinal,
+    sequential: scaleSequential,
+    diverging: scaleDiverging
 };
 export function createScale(type, domain, range, options = {}) {
-    const scale = Scales[type](domain, range);
+    const scale = Scales[type]();
+    // scale defaults
+    if (type === 'band' &&
+        options.padding === undefined &&
+        options.paddingInner === undefined &&
+        options.paddingOuter === undefined) {
+        options.padding = 0.2;
+    }
     // allow setting arbiraty scale options
-    for (const [key, val] of Object.entries(options)) {
+    // callWithProps(scale, { domain,})
+    for (const [key, val] of Object.entries({ domain, range, ...options })) {
         if (typeof scale[key] === 'function')
             scale[key](val);
         else
             console.warn('unknown scale setter ' + key);
     }
+    if (type === 'band' || type === 'point') {
+        scale.ticks = () => domain;
+    }
     if (type === 'log') {
-        // overwrite scaleLog's internal ticks() method
         scale.ticks = (count) => getLogTicks(domain, count);
-        // console.log({domain})
-        // console.log(getLogTicks(domain, 5))
     }
     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/curves.d.ts

@@ -0,0 +1,3 @@
+import type { Curve } from '../types.js';
+import { type CurveFactory, type CurveBundleFactory } from 'd3-shape';
+export declare function maybeCurve(curve: Curve | CurveFactory | undefined, tension: number): CurveFactory | CurveBundleFactory;

package/dist/helpers/curves.js

@@ -0,0 +1,42 @@
+import { curveBasis, curveBasisClosed, curveBasisOpen, curveBundle, curveBumpX, curveBumpY, curveCardinal, curveCardinalClosed, curveCardinalOpen, curveCatmullRom, curveCatmullRomClosed, curveCatmullRomOpen, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore } from 'd3-shape';
+const curves = new Map([
+    ['basis', curveBasis],
+    ['basis-closed', curveBasisClosed],
+    ['basis-open', curveBasisOpen],
+    ['bundle', curveBundle],
+    ['bump-x', curveBumpX],
+    ['bump-y', curveBumpY],
+    ['cardinal', curveCardinal],
+    ['cardinal-closed', curveCardinalClosed],
+    ['cardinal-open', curveCardinalOpen],
+    ['catmull-rom', curveCatmullRom],
+    ['catmull-rom-closed', curveCatmullRomClosed],
+    ['catmull-rom-open', curveCatmullRomOpen],
+    ['linear', curveLinear],
+    ['linear-closed', curveLinearClosed],
+    ['monotone-x', curveMonotoneX],
+    ['monotone-y', curveMonotoneY],
+    ['natural', curveNatural],
+    ['step', curveStep],
+    ['step-after', curveStepAfter],
+    ['step-before', curveStepBefore]
+]);
+export function maybeCurve(curve = curveLinear, tension) {
+    if (typeof curve === 'function')
+        return curve; // custom curve
+    const c = curves.get(`${curve}`.toLowerCase());
+    if (!c)
+        throw new Error(`unknown curve: ${curve}`);
+    if (tension !== undefined) {
+        if ('beta' in c) {
+            return c.beta(tension);
+        }
+        else if ('tension' in c) {
+            return c.tension(tension);
+        }
+        else if ('alpha' in c) {
+            return c.alpha(tension);
+        }
+    }
+    return c;
+}

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;