svelteplot 0.0.1-alpha.1 → 0.0.1-alpha.11

package/dist/Plot.svelte

@@ -0,0 +1,172 @@
+<script>import { setContext } from "svelte";
+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";
+let {
+  // snippets
+  header,
+  footer,
+  overlay,
+  children,
+  // props
+  height = "auto",
+  marginLeft = 30,
+  marginRight = 10,
+  marginTop = 20,
+  marginBottom = 40,
+  inset = null,
+  grid = false,
+  frame = false,
+  maxWidth = null,
+  title = "",
+  subtitle = "",
+  caption = "",
+  // scales
+  radius = null,
+  color = null,
+  symbol = null,
+  x = null,
+  y = null,
+  onmousemove = null
+} = $props();
+let width = $state(400);
+const plot = new Plot(600, height || defaultPlotHeight, {
+  marginTop,
+  marginLeft,
+  marginRight,
+  marginBottom,
+  // scales
+  symbol,
+  radius,
+  x,
+  y,
+  color,
+  // other
+  title,
+  subtitle,
+  caption
+});
+setContext("svelteplot", plot);
+$effect(() => {
+  plot.width = width;
+  plot._height = height;
+  plot.options = mergeDeep({}, DEFAULT_PLOT_OPTIONS, {
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    inset,
+    symbol,
+    radius,
+    color,
+    x,
+    y,
+    title,
+    subtitle,
+    caption
+  });
+});
+function onMouseMove(evt) {
+  if (onmousemove)
+    onmousemove({ ...evt, plot });
+}
+$inspect(plot.x.domain);
+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) && plot.hasChannelX}<GridX automatic />{/if}
+        {#if (grid || y?.grid) && plot.hasChannelY}<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}
+        {/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}
+            {#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>
+
+    {#if plot.options.title || plot.options.subtitle || header || hasLegend}
+        <div class="plot-header">
+            {#if plot.options.title}
+                <h2>{@html plot.options.title}</h2>
+            {/if}
+            {#if plot.options.subtitle}
+                <h3>{@html plot.options.subtitle}</h3>
+            {/if}
+            {#if color?.legend}
+                <ColorLegend />
+            {/if}
+            {#if symbol?.legend}
+                <SymbolLegend />
+            {/if}
+            {#if header}{@render header(plot)}{/if}
+        </div>
+    {/if}
+
+    {#if footer || plot.options.caption}
+        <div class="plot-footer">
+            {#if plot.options.caption}
+                <figcaption>{@html plot.options.caption}</figcaption>
+            {/if}
+            {#if footer}{@render footer(plot)}{/if}
+        </div>
+    {/if}
+
+    <div class="overlay">
+        {#if overlay}{@render overlay(plot)}{/if}
+    </div>
+</figure>
+
+<style>
+    figure {
+        margin: 1em 0;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+    figure .plot-header {
+        order: 1;
+    }
+    h2,
+    h3 {
+        margin: 0;
+    }
+    svg {
+        order: 2;
+        overflow: visible;
+    }
+    figure .plot-footer {
+        order: 3;
+    }
+    .overlay {
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
+</style>

package/dist/Plot.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { PlotProps } from './types.js';
+declare const __propDef: {
+    props: PlotProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}

package/dist/classes/Channel.svelte.js

@@ -0,0 +1,74 @@
+import resolveChannel from '../helpers/resolveChannel.js';
+import { extent } from 'd3-array';
+import { MARK_PROP_CHANNEL } from '../contants.js';
+import { isBooleanOrNull, isColorOrNull, isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks.js';
+import { uniq } from 'underscore';
+export class Channel {
+    name = undefined;
+    plot = undefined;
+    constructor(name, plot) {
+        this.name = name;
+        this.plot = plot;
+    }
+    // readonly type: ChannelType = CHANNEL_TYPES.position;
+    // all marks that have this channel
+    marks = $derived(this.plot?.marks ?? []);
+    forceDomain = $derived(this.plot && (this.name === 'x' || this.name === 'y')
+        ? this.plot.options[this.name]?.domain || null
+        : null);
+    possibleProps = $derived(Object.entries(MARK_PROP_CHANNEL)
+        .filter(([, channel]) => channel === this.name)
+        .map(([prop]) => prop));
+    activeMarks = $derived(this.marks.filter((mark) => mark.channels.has(this.name) && this.possibleProps.find((prop) => mark.props[prop])));
+    manualActiveMarks = $derived(this.activeMarks.filter((mark) => !mark.automatic));
+    autoTitle = $derived(this.manualActiveMarks.length === 1 &&
+        typeof this.manualActiveMarks[0].props?.[this.name] === 'string'
+        ? this.manualActiveMarks[0].props?.[this.name]
+        : null);
+    uniqueMarkProps = $derived(uniq(this.manualActiveMarks
+        .map((mark) => this.possibleProps
+        .filter((prop) => mark.props[prop])
+        .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.possibleProps.map((prop) => mark.props.data.map((row) => resolveChannel(this.name, row, mark.props[prop]))))
+            .flat(3)
+            .filter((d) => d != null),
+        ...(this.forceDomain || [])
+    ]);
+    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.dataValues.length
+        ? [0, 1]
+        : this.valueType === 'boolean' ||
+            this.valueType === 'text' ||
+            this.valueType === 'color'
+            ? uniq(this.dataValues)
+            : extent(this.dataValues));
+    scaleType = $derived(this.name === 'radius'
+        ? 'sqrt'
+        : this.valueType === 'date'
+            ? 'time'
+            : this.valueType === 'number'
+                ? 'linear'
+                : this.valueType === 'text'
+                    ? 'band'
+                    : this.valueType === 'color'
+                        ? 'identity'
+                        : 'linear');
+}
+// opacity: typeof === 'number' && between [0,1]

package/dist/classes/Mark.svelte.js

@@ -0,0 +1,17 @@
+export class Mark {
+    id;
+    type;
+    automatic;
+    channels = $state(new Set());
+    props = $state();
+    constructor(type, channels, automatic, props) {
+        this.id = Symbol();
+        this.type = type;
+        this.automatic = automatic;
+        this.channels = new Set(channels);
+        this.props = props;
+    }
+    toString() {
+        return `Mark[${this.type}]`;
+    }
+}

package/dist/classes/Plot.svelte.js

@@ -0,0 +1,98 @@
+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: '',
+    caption: '',
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 30,
+    marginBottom: 0,
+    radius: { range: [1, 10] },
+    symbol: {},
+    color: {},
+    x: {
+        domain: undefined,
+        grid: false,
+        ticks: undefined,
+        tickSpacing: 80,
+        axis: 'bottom',
+        log: false,
+        reverse: false
+    },
+    y: {
+        domain: undefined,
+        grid: false,
+        ticks: undefined,
+        tickSpacing: 60,
+        axis: 'left',
+        log: false,
+        reverse: false
+    }
+};
+export class Plot {
+    width = $state(600);
+    _height = $state(400);
+    options = $state(DEFAULT_PLOT_OPTIONS);
+    marks = $state([]);
+    hasChannelX = $derived(!!this.marks.find((mark) => !mark.automatic && mark.channels.has('x')));
+    hasChannelY = $derived(!!this.marks.find((mark) => !mark.automatic && mark.channels.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 &&
+        (!this.manualMarks[0].channels.has('x') || !this.manualMarks[0].channels.has('y')));
+    height = $derived(this._height === 'auto' ? (this.hasChannelY ? 400 : 90) : this._height);
+    inset = $derived(typeof this.options.inset === 'number'
+        ? this.options.inset
+        : this.singlePosChannelMark
+            ? 10
+            : 0);
+    // derived props
+    margins = $derived({
+        top: this.options.marginTop,
+        left: this.options.marginLeft,
+        bottom: this.options.marginBottom,
+        right: this.options.marginRight
+    });
+    // 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);
+    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
+        ? [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.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' } : {}));
+    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?.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) {
+        const opts = mergeDeep({}, DEFAULT_PLOT_OPTIONS, options);
+        this.width = width;
+        this._height = height;
+        this.options = opts;
+    }
+    addMark(mark) {
+        // console.log('addMark: ' + mark);
+        this.marks = [...this.marks, mark];
+        // add mark to respective channels
+        console.log('y', this.hasChannelY, this.marks.filter(m => !m.automatic && m.channels.has('y')));
+    }
+    removeMark(removeMark) {
+        this.marks = this.marks.filter((mark) => mark.id !== removeMark.id);
+    }
+}

package/dist/contants.d.ts

@@ -0,0 +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>;

package/dist/contants.js

@@ -0,0 +1,40 @@
+export const CHANNEL_TYPES = {
+    opacity: Symbol('opacity'),
+    color: Symbol('color'),
+    x: Symbol('position'),
+    y: Symbol('position'),
+    angle: Symbol('angle'),
+    symbol: Symbol('symbol'),
+    radius: Symbol('radius'),
+    width: Symbol('width')
+};
+export const MARK_PROP_CHANNEL = {
+    x: 'x',
+    x1: 'x',
+    x2: 'x',
+    y: 'y',
+    y1: 'y',
+    y2: 'y',
+    rotate: 'angle',
+    r: 'radius',
+    symbol: 'symbol',
+    fill: 'color',
+    stroke: 'color',
+    opacity: 'opacity',
+    fillOpacity: 'opacity',
+    strokeOpacity: 'opacity',
+    strokeWidth: 'width'
+};
+// 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
+// };

package/dist/helpers/GroupMultiple.svelte

@@ -0,0 +1,8 @@
+<script>let { data = [], ...rest } = $props();
+</script>
+
+{#if data.length !== 1}
+    <g {...rest}><slot /></g>
+{:else}
+    <slot />
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { DataRow } from '../types.js';
+declare const __propDef: {
+    props: {
+        data: DataRow[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 {};

package/dist/helpers/autoTimeFormat.d.ts

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

package/dist/helpers/autoTimeFormat.js

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import { isDate } from 'underscore';
+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';
+    return (date) => dayjs(date).format(format).split('\n');
+}
+function toNumber(d) {
+    return isDate(d) ? d.getTime() : +d;
+}

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

@@ -0,0 +1,13 @@
+import { interpolateBrBG } from 'd3-scale-chromatic';
+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[];
+export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
+export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
+export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
+export declare function isQuantitativeScheme(scheme: string): boolean;
+export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
+export declare function isDivergingScheme(scheme: string): boolean;
+export {};