svelteplot 0.0.1-alpha.9 → 0.1.3-next.12

package/dist/marks/BarX.svelte

@@ -0,0 +1,93 @@
+<!--
+    @component
+    For horizontal bar charts using a band scale as y axis
+-->
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { stackX, recordizeX, intervalX, sort } from '../index.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { roundedRect } from '../helpers/roundedRect.js';
+    import type { PlotContext, BaseMarkProps, RectMarkProps, ChannelAccessor } from '../types.js';
+    import type { StackOptions } from '../transforms/stack.js';
+    import type { DataRow } from '../types.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    type BarXProps = BaseMarkProps & {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y?: ChannelAccessor;
+        stack?: StackOptions;
+        borderRadius?:
+            | number
+            | {
+                  topLeft?: number;
+                  topRight?: number;
+                  bottomRight?: number;
+                  bottomLeft?: number;
+              };
+    } & RectMarkProps;
+
+    let { data = [{}], class: className = null, stack, ...options }: BarXProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        stackX(
+            intervalX(
+                // by default, sort by y channel (the ordinal labels)
+                sort(recordizeX({ data, sort: { channel: 'y' }, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="barX"
+    requiredScales={{ y: ['band'] }}
+    channels={['x1', 'x2', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        <GroupMultiple class="bar-x" length={scaledData.length}>
+            {#each scaledData as d}
+                {@const bw = plot.scales.y.fn.bandwidth()}
+                {@const minx = Math.min(d.x1, d.x2)}
+                {@const maxx = Math.max(d.x1, d.x2)}
+                {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
+                {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
+                {@const insetTop = resolveProp(args.insetTop || args.inset, d.datum, 0)}
+                {@const insetBottom = resolveProp(args.insetBottom || args.inset, d.datum, 0)}
+                {@const dx = resolveProp(args.dx, d.datum, 0)}
+                {@const dy = resolveProp(args.dy, d.datum, 0)}
+                {#if d.valid}
+                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
+                    <path
+                        d={roundedRect(
+                            0,
+                            0,
+                            maxx - minx - insetLeft - insetRight,
+                            bw - insetTop - insetBottom,
+                            options.borderRadius
+                        )}
+                        class={[styleClass, className]}
+                        {style}
+                        transform="translate({[
+                            minx + dx + insetLeft,
+                            d.y + insetTop + dy - bw * 0.5
+                        ]})"
+                        use:addEventHandlers={{
+                            getPlotState,
+                            options: args,
+                            datum: d.datum
+                        }} />
+                {/if}
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,4 @@
+/** For horizontal bar charts using a band scale as y axis */
+declare const BarX: import("svelte").Component<any, {}, "">;
+type BarX = ReturnType<typeof BarX>;
+export default BarX;

package/dist/marks/BarY.svelte

@@ -0,0 +1,103 @@
+<!--
+    @component
+    For vertical column charts using a band scale as x axis
+-->
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { intervalY, stackY, recordizeY, sort } from '../index.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { roundedRect } from '../helpers/roundedRect.js';
+    import {
+        type PlotContext,
+        type BaseMarkProps,
+        type ChannelAccessor,
+        type DataRow
+    } from '../types.js';
+    import type { StackOptions } from '../transforms/stack.js';
+    import { maybeData } from '../helpers/index.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    type BarYProps = BaseMarkProps & {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        stack?: StackOptions;
+        /**
+         * Converts y into y1/y2 ranges based on the provided interval. Disables the
+         * implicit stacking
+         */
+        interval?: number | string;
+        borderRadius?:
+            | number
+            | {
+                  topLeft?: number;
+                  topRight?: number;
+                  bottomRight?: number;
+                  bottomLeft?: number;
+              };
+    };
+
+    let { data = [{}], class: className = null, stack, ...options }: BarYProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        stackY(
+            intervalY(
+                // by default, sort by x channel (the ordinal labels)
+                sort(recordizeY({ data, sort: { channel: 'x' }, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="barY"
+    requiredScales={{ x: ['band'] }}
+    channels={['x', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <GroupMultiple class="bar-y" length={scaledData.length}>
+            {#each scaledData as d}
+                {@const bw = plot.scales.x.fn.bandwidth()}
+                {@const miny = Math.min(d.y1, d.y2)}
+                {@const maxy = Math.max(d.y1, d.y2)}
+                {@const insetLeft = resolveProp(args.insetLeft || args.inset, d.datum, 0)}
+                {@const insetRight = resolveProp(args.insetRight || args.inset, d.datum, 0)}
+                {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
+                {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
+                {@const dx = resolveProp(args.dx, d.datum, 0)}
+                {@const dy = resolveProp(args.dy, d.datum, 0)}
+                {#if d.valid}
+                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
+                    <path
+                        d={roundedRect(
+                            0,
+                            0,
+                            bw - insetLeft - insetRight,
+                            maxy - miny - insetTop - insetBottom,
+                            options.borderRadius
+                        )}
+                        class={[styleClass, className]}
+                        {style}
+                        transform="translate({[
+                            d.x + insetLeft + dx - bw * 0.5,
+                            miny + dy + insetTop
+                        ]})"
+                        use:addEventHandlers={{
+                            getPlotState,
+                            options: args,
+                            datum: d.datum
+                        }} />
+                {/if}
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,25 @@
+import { type BaseMarkProps, type ChannelAccessor, type DataRow } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+type BarYProps = BaseMarkProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    stack?: StackOptions;
+    /**
+     * Converts y into y1/y2 ranges based on the provided interval. Disables the
+     * implicit stacking
+     */
+    interval?: number | string;
+    borderRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomRight?: number;
+        bottomLeft?: number;
+    };
+};
+/** For vertical column charts using a band scale as x axis */
+declare const BarY: import("svelte").Component<BarYProps, {}, "">;
+type BarY = ReturnType<typeof BarY>;
+export default BarY;

package/dist/marks/BollingerX.svelte

@@ -0,0 +1,44 @@
+<!--
+    @component
+    line representing a moving average and an area representing volatility as a band
+-->
+<script lang="ts">
+    import { Area, Line, bollingerX, recordizeX } from '../index.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
+    import { pick } from 'es-toolkit';
+
+    type BollingerXProps = BaseMarkProps & {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        /**
+         * the window size (the window transform’s k option), an integer; defaults to 20
+         */
+        n?: number;
+        /**
+         * the band radius, a number representing a multiple of standard deviations; defaults to 2
+         */
+        k?: number;
+    };
+
+    let { data, class: className = null, n = 20, k = 2, ...options }: BollingerXProps = $props();
+
+    let args = $derived(bollingerX(recordizeX({ data, ...options }), { n, k }));
+</script>
+
+<g class="bollinger {className || ''}">
+    <Line
+        {...{
+            x: '__avg',
+            y: '__x',
+            ...pick(args, ['data', 'stroke', 'strokeOpacity', 'opacity'])
+        }} />
+    <Area
+        {...{
+            y1: '__x',
+            x1: '__lo',
+            x2: '__hi',
+            fillOpacity: 0.2,
+            ...pick(args, ['data', 'fill', 'fillOpacity', 'opacity'])
+        }} />
+</g>

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

@@ -0,0 +1,18 @@
+import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
+type BollingerXProps = BaseMarkProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    /**
+     * the window size (the window transform’s k option), an integer; defaults to 20
+     */
+    n?: number;
+    /**
+     * the band radius, a number representing a multiple of standard deviations; defaults to 2
+     */
+    k?: number;
+};
+/** line representing a moving average and an area representing volatility as a band */
+declare const BollingerX: import("svelte").Component<BollingerXProps, {}, "">;
+type BollingerX = ReturnType<typeof BollingerX>;
+export default BollingerX;

package/dist/marks/BollingerY.svelte

@@ -0,0 +1,39 @@
+<!--
+    @component
+    line representing a moving average and an area representing volatility as a band
+-->
+<script lang="ts">
+    import { Area, Line, bollingerY, recordizeY } from '../index.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
+    import { pick } from 'es-toolkit';
+
+    type BollingerYProps = BaseMarkProps & {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        /**
+         * the window size (the window transform’s k option), an integer; defaults to 20
+         */
+        n?: number;
+        /**
+         * the band radius, a number representing a multiple of standard deviations; defaults to 2
+         */
+        k?: number;
+    };
+
+    let { data, n = 20, k = 2, class: className, ...options }: BollingerYProps = $props();
+
+    const args = $derived(bollingerY(recordizeY({ data, ...options }), { n, k }));
+</script>
+
+<g class="bollinger {className || ''}">
+    <Line {...pick(args, ['x', 'y', 'data', 'stroke', 'strokeOpacity', 'opacity'])} />
+    <Area
+        {...{
+            x1: '__x',
+            y1: '__lo',
+            y2: '__hi',
+            fillOpacity: 0.2,
+            ...pick(args, ['data', 'fill', 'fillOpacity', 'opacity'])
+        }} />
+</g>

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

@@ -0,0 +1,18 @@
+import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
+type BollingerYProps = BaseMarkProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    /**
+     * the window size (the window transform’s k option), an integer; defaults to 20
+     */
+    n?: number;
+    /**
+     * the band radius, a number representing a multiple of standard deviations; defaults to 2
+     */
+    k?: number;
+};
+/** line representing a moving average and an area representing volatility as a band */
+declare const BollingerY: import("svelte").Component<BollingerYProps, {}, "">;
+type BollingerY = ReturnType<typeof BollingerY>;
+export default BollingerY;

package/dist/marks/BoxX.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import type { BoxProps } from './BoxY.svelte';
+    import { BarX, TickX, RuleY, Dot, groupY } from '../index.js';
+    import { resolveChannel } from '../helpers/resolve.js';
+
+    let {
+        data = [{}],
+        x,
+        y,
+        rule,
+        bar,
+        tickMedian = true,
+        tickMinMax = false,
+        dot,
+        class: className = null
+    }: BoxProps = $props();
+
+    const { data: grouped } = $derived(
+        groupY(
+            {
+                data: data.filter((d) => resolveChannel('x', d, { x, y }) != null),
+                x,
+                y,
+                x1: x,
+                x2: x
+            },
+            { x: 'median', x1: 'p25', x2: 'p75', fill: (rows) => rows }
+        )
+    );
+
+    const boxData = $derived(
+        grouped
+            .map((row) => {
+                const iqr = row.__x2 - row.__x1;
+                const whisker = iqr * 1.5;
+                const lower = row.__x1 - whisker;
+                const upper = row.__x2 + whisker;
+                const data = row.__fill.map((d) => ({
+                    ...d,
+                    __x: resolveChannel('x', d, { x, y })
+                }));
+                const outliers = data.filter((d) => d.__x < lower || d.__x > upper);
+                const inside = data
+                    .filter((d) => d.__x >= lower && d.__x <= upper)
+                    .sort((a, b) => a.__x - b.__x);
+                // if (inside.length === 0) console.log('No data inside boxplot', data, row, lower, upper);
+                return {
+                    [y]: row[y],
+                    __y: row[y],
+                    p25: row.__x1,
+                    p75: row.__x2,
+                    median: row.__x,
+                    min: inside[0].__x,
+                    max: inside.at(-1).__x,
+                    outliers
+                };
+            })
+            .sort((a, b) => b.median - a.median)
+    );
+</script>
+
+<GroupMultiple class="box-x {className || ''}" length={className ? 2 : grouped.length}>
+    <RuleY data={boxData} y="__y" x1="min" x2="max" {...rule || {}} />
+    <BarX data={boxData} y="__y" x1="p25" x2="p75" fill="#ddd" {...bar || {}} />
+    {#if tickMedian}
+        <TickX
+            data={boxData}
+            y="__y"
+            x="median"
+            strokeWidth={2}
+            {...typeof tickMedian === 'object' ? tickMedian : {}} />
+    {/if}
+    {#if tickMinMax}
+        <TickX
+            data={boxData}
+            x="min"
+            y="__y"
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+        <TickX
+            data={boxData}
+            x="max"
+            y="__y"
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+    {/if}
+    <Dot data={boxData.map((d) => d.outliers).flat()} {x} {y} {...dot || {}} />
+</GroupMultiple>

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

@@ -0,0 +1,4 @@
+import type { BoxProps } from './BoxY.svelte';
+declare const BoxX: import("svelte").Component<BoxProps, {}, "">;
+type BoxX = ReturnType<typeof BoxX>;
+export default BoxX;

package/dist/marks/BoxY.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" module>
+    export type BoxProps = {
+        data: DataRecord[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        /**
+         * Options for the rule marks that represent the min/max range
+         */
+        rule: Record<string, ChannelAccessor>;
+        /**
+         * Options for the bar marks that represent the IQR range
+         */
+        bar: Record<string, ChannelAccessor>;
+        /**
+         * Options for the tick marks that represent the median
+         */
+        tickMedian: Record<string, ChannelAccessor> | boolean;
+        /**
+         * Options for the tick marks that represent the min/max range
+         */
+        tickMinMax: Record<string, ChannelAccessor> | boolean;
+        /**
+         * Options for the dot marks that represent the outliers
+         */
+        dot: Record<string, ChannelAccessor>;
+    };
+</script>
+
+<script lang="ts">
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import type { ChannelAccessor, DataRecord } from '../types.js';
+    import { groupX, BarY, TickY, RuleX, Dot } from '../index.js';
+    import { resolveChannel } from '../helpers/resolve.js';
+
+    let {
+        data = [{}],
+        x,
+        y,
+        rule,
+        bar,
+        tickMedian = true,
+        tickMinMax = false,
+        dot,
+        class: className = null
+    }: BoxProps = $props();
+
+    let { data: grouped } = $derived(
+        groupX(
+            {
+                data: data.filter((d) => resolveChannel('x', d, { x, y }) != null),
+                x,
+                y,
+                y1: y,
+                y2: y
+            },
+            { y: 'median', y1: 'p25', y2: 'p75', fill: (rows) => rows }
+        )
+    );
+
+    let boxData = $derived(
+        grouped.map((row) => {
+            const iqr = row.__y2 - row.__y1;
+            const whisker = iqr * 1.5;
+            const lower = row.__y1 - whisker;
+            const upper = row.__y2 + whisker;
+            const data = row.__fill.map((d) => ({ ...d, __y: resolveChannel('y', d, { x, y }) }));
+            const outliers = data.filter((d) => d.__y < lower || d.__y > upper);
+            const inside = data
+                .filter((d) => d.__y >= lower && d.__y <= upper)
+                .sort((a, b) => a.__y - b.__y);
+            return {
+                __x: row[x],
+                p25: row.__y1,
+                p75: row.__y2,
+                median: row.__y,
+                min: inside[0].__y,
+                max: inside.at(-1).__y,
+                outliers
+            };
+        })
+    );
+</script>
+
+<GroupMultiple class="box-y {className || ''}" length={className ? 2 : grouped.length}>
+    <RuleX data={boxData} x="__x" y1="min" y2="max" {...rule || {}} />
+    <BarY data={boxData} x="__x" y1="p25" y2="p75" fill="#ddd" {...bar || {}} />
+    {#if tickMedian}
+        <TickY
+            data={boxData}
+            x="__x"
+            y="median"
+            strokeWidth={2}
+            {...typeof tickMedian === 'object' ? tickMedian : {}} />
+    {/if}
+    {#if tickMinMax}
+        <TickY
+            data={boxData}
+            x="__x"
+            y="min"
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+        <TickY
+            data={boxData}
+            x="__x"
+            y="max"
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+    {/if}
+    <Dot data={boxData.map((d) => d.outliers).flat()} {x} {y} {...dot || {}} />
+</GroupMultiple>

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

@@ -0,0 +1,29 @@
+export type BoxProps = {
+    data: DataRecord[];
+    x: ChannelAccessor;
+    y: ChannelAccessor;
+    /**
+     * Options for the rule marks that represent the min/max range
+     */
+    rule: Record<string, ChannelAccessor>;
+    /**
+     * Options for the bar marks that represent the IQR range
+     */
+    bar: Record<string, ChannelAccessor>;
+    /**
+     * Options for the tick marks that represent the median
+     */
+    tickMedian: Record<string, ChannelAccessor> | boolean;
+    /**
+     * Options for the tick marks that represent the min/max range
+     */
+    tickMinMax: Record<string, ChannelAccessor> | boolean;
+    /**
+     * Options for the dot marks that represent the outliers
+     */
+    dot: Record<string, ChannelAccessor>;
+};
+import type { ChannelAccessor, DataRecord } from '../types.js';
+declare const BoxY: import("svelte").Component<BoxProps, {}, "">;
+type BoxY = ReturnType<typeof BoxY>;
+export default BoxY;