svelteplot 0.6.0 → 0.7.0-pr-269.0

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

@@ -1,6 +1,7 @@
 import type * as CSS from 'csstype';
 import { type Snippet } from 'svelte';
 import type { DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+import { sort } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -9,14 +10,14 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: sort;
+        dodgeY: sort;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -75,7 +76,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
          * the font size of the text
          */
         fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
-        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "math" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
         fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
         fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
         fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;
@@ -100,7 +101,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
          * @default 1.2
          */
         lineHeight?: ConstantAccessor<number, Datum>;
-        frameAnchor?: ConstantAccessor<"left" | "right" | "middle" | "top" | "bottom" | "top-left" | "bottom-left" | "top-right" | "bottom-right", Datum>;
+        frameAnchor?: ConstantAccessor<"bottom" | "top" | "left" | "right" | "middle" | "top-left" | "bottom-left" | "top-right" | "bottom-right", Datum>;
         /**
          * rotate text by angle in degrees
          */

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeX } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare class __sveltets_Render<Datum extends DataRow> {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeX;
+        dodgeY: recordizeX;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeY } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare class __sveltets_Render<Datum extends DataRow> {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeY;
+        dodgeY: recordizeY;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

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

@@ -4,6 +4,7 @@ export type ShapeRenderer = {
 };
 import type { DataRecord, ChannelAccessor } from '../types/index.js';
 import { type Snippet } from 'svelte';
+import { sort } from '../index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
     props(): Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
@@ -12,14 +13,14 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
-        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        dodgeX: sort;
+        dodgeY: sort;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        } | ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;

package/dist/marks/WaffleX.svelte

@@ -0,0 +1,115 @@
+<!--
+    @component
+    The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values.
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        LinkableMarkProps,
+        BorderRadius
+    } from '../types';
+    import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { intervalX, recordizeX, sort, stackX } from '../transforms';
+    import type { StackOptions } from '../transforms/stack';
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { resolveProp, resolveStyles } from '../helpers/resolve';
+    import { roundedRect } from '../helpers/roundedRect';
+
+    interface WaffleXMarkProps
+        extends BaseMarkProps<Datum>,
+            LinkableMarkProps<Datum>,
+            WaffleOptions<Datum> {
+        data?: Datum[];
+        /**
+         * bound to a quantitative scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x2?: ChannelAccessor<Datum>;
+        /**
+         * bound to a band scale
+         */
+        y?: ChannelAccessor<Datum>;
+        stack?: StackOptions;
+    }
+
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getPlotDefaults().waffle,
+        ...getPlotDefaults().waffleX
+    };
+
+    let markProps: WaffleXMarkProps = $props();
+
+    const {
+        data = [{} as Datum],
+        class: className = null,
+        stack,
+        symbol = null,
+        unit,
+        ...options
+    }: WaffleXMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    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, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="waffleX"
+    requiredScales={{ y: ['band'] }}
+    channels={['x1', 'x2', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {@const wafflePoly = wafflePolygon('x', args, plot.scales)}
+        {#each scaledData as d, i (i)}
+            {@const borderRadius = resolveProp(args.borderRadius, d?.datum, 0) as BorderRadius}
+            {@const hasBorderRadius =
+                (typeof borderRadius === 'number' && borderRadius > 0) ||
+                (typeof borderRadius === 'object' &&
+                    Math.max(
+                        borderRadius.topRight ?? 0,
+                        borderRadius.bottomRight ?? 0,
+                        borderRadius.topLeft ?? 0,
+                        borderRadius.bottomLeft ?? 0
+                    ) > 0)}
+            {@const [style, styleClass] = resolveStyles(plot, d, options, 'fill', usedScales)}
+            {@const { pattern, rect, path } = wafflePoly(d)}
+            <g class={['waffle-x', className]}>
+                <pattern {...pattern}>
+                    {#if symbol}
+                        {@render symbol(rect)}
+                    {:else if hasBorderRadius}
+                        <path
+                            d={roundedRect(rect.x, rect.y, rect.width, rect.height, borderRadius)}
+                            {style}
+                            class={styleClass} />
+                    {:else}
+                        <rect {style} class={styleClass} {...rect} />
+                    {/if}
+                </pattern>
+                <path {...path} />
+            </g>
+        {/each}
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,19 @@
+import type { DataRecord } from '../types';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): any;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values. */
+declare const WaffleX: $$IsomorphicComponent;
+type WaffleX<Datum extends DataRecord> = InstanceType<typeof WaffleX<Datum>>;
+export default WaffleX;

package/dist/marks/WaffleY.svelte

@@ -0,0 +1,119 @@
+<!--
+    @component
+    The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values.
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    import type {
+        DataRecord,
+        ChannelAccessor,
+        BaseMarkProps,
+        LinkableMarkProps,
+        PlotContext,
+        BorderRadius
+    } from '../types';
+    import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { getContext } from 'svelte';
+    import { intervalY, recordizeY, sort, stackY } from '../transforms';
+    import Mark from '../Mark.svelte';
+    import { resolveProp, resolveStyles } from '../helpers/resolve';
+    import { roundedRect } from '../helpers/roundedRect';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    interface WaffleYMarkProps
+        extends BaseMarkProps<Datum>,
+            LinkableMarkProps<Datum>,
+            WaffleOptions<Datum> {
+        data?: Datum[];
+        /**
+         * bound to a babd scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y2?: ChannelAccessor<Datum>;
+    }
+
+    const DEFAULTS = {
+        ...getPlotDefaults().waffle,
+        ...getPlotDefaults().waffleY
+    };
+
+    let markProps: WaffleYMarkProps = $props();
+
+    const {
+        data = [{} as Datum],
+        class: className = null,
+        stack,
+        symbol = null,
+        ...options
+    }: WaffleYMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        stackY(
+            intervalY(
+                // by default, sort by y channel (the ordinal labels)
+                sort(recordizeY({ data, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="waffleY"
+    requiredScales={{ x: ['band'] }}
+    channels={['y1', 'y2', 'x', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {@const wafflePoly = wafflePolygon('y', args, plot.scales)}
+        {#each scaledData as d, i (i)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                d,
+                args,
+                args.stroke && !args.fill ? 'stroke' : 'fill',
+                usedScales
+            )}
+            {@const borderRadius = resolveProp(args.borderRadius, d?.datum, 0) as BorderRadius}
+            {@const hasBorderRadius =
+                (typeof borderRadius === 'number' && borderRadius > 0) ||
+                (typeof borderRadius === 'object' &&
+                    Math.max(
+                        borderRadius.topRight ?? 0,
+                        borderRadius.bottomRight ?? 0,
+                        borderRadius.topLeft ?? 0,
+                        borderRadius.bottomLeft ?? 0
+                    ) > 0)}
+            {@const { pattern, rect, path } = wafflePoly(d)}
+            <g class={['waffle-y', className]}>
+                <pattern {...pattern}>
+                    {#if symbol}
+                        {@render symbol({ ...rect, style, styleClass, datum: d.datum })}
+                    {:else if hasBorderRadius}
+                        <path
+                            d={roundedRect(rect.x, rect.y, rect.width, rect.height, borderRadius)}
+                            {style}
+                            class={styleClass} />
+                    {:else}
+                        <rect {style} class={styleClass} {...rect} />
+                    {/if}
+                </pattern>
+                <path {...path} />
+            </g>
+        {/each}
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,19 @@
+import type { DataRecord } from '../types';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): any;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values. */
+declare const WaffleY: $$IsomorphicComponent;
+type WaffleY<Datum extends DataRecord> = InstanceType<typeof WaffleY<Datum>>;
+export default WaffleY;

package/dist/marks/helpers/Anchor.svelte.d.ts

@@ -4,11 +4,11 @@ declare class __sveltets_Render<Datum extends Record<string, any>> {
         datum?: Datum | undefined;
         options?: {
             [key: string]: any;
-            href?: ConstantAccessor<string, Datum>;
-            target?: ConstantAccessor<string, Datum>;
-            rel?: ConstantAccessor<string, Datum>;
-            type?: ConstantAccessor<string, Datum>;
-            download?: ConstantAccessor<string, Datum>;
+            href?: ConstantAccessor<string, Datum_1>;
+            target?: ConstantAccessor<string, Datum_1>;
+            rel?: ConstantAccessor<string, Datum_1>;
+            type?: ConstantAccessor<string, Datum_1>;
+            download?: ConstantAccessor<string, Datum_1>;
         } | undefined;
         children?: (() => any) | undefined;
     };

package/dist/marks/helpers/BaseAxisX.svelte

@@ -17,6 +17,7 @@
     import { randomId, testFilter } from '../../helpers/index.js';
     import { INDEX } from '../../constants';
     import { RAW_VALUE } from '../../transforms/recordize';
+    import wordwrap from '../../helpers/wordwrap';
 
     type BaseAxisXProps = {
         scaleFn: (d: RawValue) => number;
@@ -35,7 +36,9 @@
             dx: ConstantAccessor<number>;
             dy: ConstantAccessor<number>;
             filter: ChannelAccessor;
+            wordwrap: boolean;
             textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
+            removeDuplicateTicks: boolean;
         };
         text: boolean;
         plot: PlotState;
@@ -59,8 +62,21 @@
         text = true
     }: BaseAxisXProps = $props();
 
+    const isBandScale = $derived(scaleType === 'band');
+    const bandWidth = $derived(isBandScale ? scaleFn.bandwidth() : 0);
+
     function splitTick(tick: string | string[]) {
-        return Array.isArray(tick) ? tick : [tick];
+        return Array.isArray(tick)
+            ? tick
+            : typeof tick === 'string' && isBandScale && options.wordwrap !== false
+              ? wordwrap(
+                    tick,
+                    { maxLineWidth: bandWidth * 0.9 },
+                    { minCharactersPerLine: 4 },
+                    +resolveProp(tickFontSize, {}, 11),
+                    false
+                )
+              : [tick];
     }
 
     let tickRotate = $derived(plot.options.x.tickRotate || 0);
@@ -72,7 +88,7 @@
     // generate id used for registering margins
     const id = randomId();
 
-    const { autoMarginTop, autoMarginBottom } =
+    const { autoMarginTop, autoMarginBottom, autoMarginLeft, autoMarginRight } =
         getContext<AutoMarginStores>('svelteplot/autoMargins');
 
     let tickTextElements = $state([] as SVGTextElement[]);
@@ -109,6 +125,14 @@
         return tickObjects as ScaledDataRecord[];
     });
 
+    $effect(() => {
+        // just add some minimal horizontal margins for axis ticks
+        untrack(() => $autoMarginLeft);
+        untrack(() => $autoMarginRight);
+        $autoMarginLeft.set(id, 5);
+        $autoMarginRight.set(id, 10);
+    });
+
     $effect(() => {
         untrack(() => [$autoMarginTop, $autoMarginBottom]);
         if (!text) return;
@@ -147,6 +171,8 @@
         return () => {
             if ($autoMarginBottom.has(id)) $autoMarginBottom.delete(id);
             if ($autoMarginTop.has(id)) $autoMarginTop.delete(id);
+            if ($autoMarginLeft.has(id)) $autoMarginLeft.delete(id);
+            if ($autoMarginRight.has(id)) $autoMarginRight.delete(id);
         };
     });
 </script>
@@ -222,7 +248,9 @@
                             {:else}
                                 {#each textLines as line, i (i)}
                                     <tspan x="0" dy={i ? 12 : 0}
-                                        >{!prevTextLines || prevTextLines[i] !== line
+                                        >{!prevTextLines ||
+                                        prevTextLines[i] !== line ||
+                                        options.removeDuplicateTicks === false
                                             ? line
                                             : ''}</tspan>
                                 {/each}

package/dist/marks/helpers/BaseAxisX.svelte.d.ts

@@ -16,7 +16,9 @@ type BaseAxisXProps = {
         dx: ConstantAccessor<number>;
         dy: ConstantAccessor<number>;
         filter: ChannelAccessor;
+        wordwrap: boolean;
         textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
+        removeDuplicateTicks: boolean;
     };
     text: boolean;
     plot: PlotState;