svelteplot 0.9.1 → 0.9.2

package/dist/marks/AxisX.svelte

@@ -51,7 +51,10 @@
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor | 'auto', Datum>;
-        removeDuplicateTicks: boolean;
+        /**
+         * you can set this to true to remove duplicate tick labels
+         */
+        removeDuplicateTicks?: boolean;
     }
 
     let markProps: AxisXMarkProps = $props();
@@ -241,7 +244,7 @@
     {#if showAxis}
         <BaseAxisX
             {anchor}
-            {className}
+            class={className}
             {labelAnchor}
             options={{ ...options, ...plot.options.x }}
             {plot}

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

@@ -88,7 +88,10 @@ declare function $$render<Datum extends RawValue>(): {
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor | "auto", Datum>;
-        removeDuplicateTicks: boolean;
+        /**
+         * you can set this to true to remove duplicate tick labels
+         */
+        removeDuplicateTicks?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/AxisY.svelte

@@ -221,7 +221,7 @@
     {#if showAxis}
         <BaseAxisY
             {anchor}
-            {className}
+            class={className}
             {lineAnchor}
             options={{
                 ...options,

package/dist/marks/BarX.svelte

@@ -11,6 +11,11 @@
         x2?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         stack?: StackOptions;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+
+        canvas?: boolean;
         /**
          * Converts x into x1/x2 ranges based on the provided interval. Disables the
          * implicit stacking
@@ -25,6 +30,7 @@
     import type { DataRow } from '../types/index.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
+    import RectCanvas from './helpers/RectCanvas.svelte';
     import type {
         BaseMarkProps,
         BaseRectMarkProps,
@@ -46,6 +52,7 @@
         data = [{} as Datum],
         class: className = null,
         stack,
+        canvas = false,
         ...options
     }: BarXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
@@ -55,8 +62,7 @@
         stackX(
             intervalX(
                 // by default, sort by y channel (the ordinal labels)
-                sort(recordizeX({ data, ...options })),
-                { plot }
+                sort(recordizeX({ data, ...options }))
             ),
             stack
         )
@@ -68,25 +74,50 @@
     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, i (i)}
-                {@const bw = plot.scales.y.fn.bandwidth()}
-                {@const minx = Math.min(d.x1, d.x2)}
-                {@const maxx = Math.max(d.x1, d.x2)}
-                {#if d.valid}
-                    <RectPath
-                        {usedScales}
-                        class={className}
-                        {options}
-                        datum={d}
-                        x={minx}
-                        useInsetAsFallbackHorizontally={false}
-                        y={d.y - bw * 0.5}
-                        width={maxx - minx}
-                        height={bw} />
-                {/if}
-            {/each}
-        </GroupMultiple>
+    {#snippet children({ usedScales, scaledData })}
+        {@const bw = plot.scales.y.fn.bandwidth()}
+        {@const barGroupClass = className ? `bar-x ${className}` : 'bar-x'}
+        {#if canvas}
+            {@const rectCanvasData = scaledData
+                .filter((d) => d.valid)
+                .map((d) => {
+                    const minx = Math.min(d.x1, d.x2);
+                    const maxx = Math.max(d.x1, d.x2);
+
+                    return {
+                        ...d,
+                        x1: minx,
+                        x2: maxx,
+                        y1: d.y - bw * 0.5,
+                        y2: d.y + bw * 0.5
+                    };
+                })}
+            <GroupMultiple class={barGroupClass} length={scaledData.length}>
+                <RectCanvas
+                    {options}
+                    data={rectCanvasData}
+                    {usedScales}
+                    useInsetAsFallbackHorizontally={false} />
+            </GroupMultiple>
+        {:else}
+            <GroupMultiple class="bar-x" length={scaledData.length}>
+                {#each scaledData as d, i (i)}
+                    {@const minx = Math.min(d.x1, d.x2)}
+                    {@const maxx = Math.max(d.x1, d.x2)}
+                    {#if d.valid}
+                        <RectPath
+                            {usedScales}
+                            class={className}
+                            {options}
+                            datum={d}
+                            x={minx}
+                            useInsetAsFallbackHorizontally={false}
+                            y={d.y - bw * 0.5}
+                            width={maxx - minx}
+                            height={bw} />
+                    {/if}
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -72,6 +72,10 @@ declare function $$render<Datum extends DataRow>(): {
         x2?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         stack?: StackOptions;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+        canvas?: boolean;
         /**
          * Converts x into x1/x2 ranges based on the provided interval. Disables the
          * implicit stacking

package/dist/marks/BarY.svelte

@@ -12,6 +12,10 @@
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;
         stack?: StackOptions;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+        canvas?: boolean;
         /**
          * Converts y into y1/y2 ranges based on the provided interval. Disables the
          * implicit stacking
@@ -25,6 +29,7 @@
     import type { StackOptions } from '../transforms/stack.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
+    import RectCanvas from './helpers/RectCanvas.svelte';
     import type {
         BaseMarkProps,
         BaseRectMarkProps,
@@ -48,6 +53,7 @@
         data = [{}],
         class: className = null,
         stack,
+        canvas = false,
         ...options
     }: BarYMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
@@ -55,8 +61,7 @@
         stackY(
             intervalY(
                 // by default, sort by x channel (the ordinal labels)
-                sort(recordizeY({ data, ...options })),
-                { plot }
+                sort(recordizeY({ data, ...options }))
             ),
             stack
         )
@@ -69,24 +74,49 @@
     channels={['x', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...args}>
     {#snippet children({ scaledData, usedScales })}
-        <GroupMultiple class="bar-y" length={scaledData.length}>
-            {#each scaledData as d, i (i)}
-                {@const bw = plot.scales.x.fn.bandwidth()}
-                {@const miny = Math.min(d.y1, d.y2)}
-                {@const maxy = Math.max(d.y1, d.y2)}
-                {#if d.valid}
-                    <RectPath
-                        x={d.x - bw * 0.5}
-                        y={miny}
-                        options={args}
-                        class={className}
-                        width={bw}
-                        height={maxy - miny}
-                        datum={d}
-                        {usedScales}
-                        useInsetAsFallbackVertically={false} />
-                {/if}
-            {/each}
-        </GroupMultiple>
+        {@const bw = plot.scales.x.fn.bandwidth()}
+        {@const barGroupClass = className ? `bar-y ${className}` : 'bar-y'}
+        {#if canvas}
+            {@const rectCanvasData = scaledData
+                .filter((d) => d.valid)
+                .map((d) => {
+                    const miny = Math.min(d.y1, d.y2);
+                    const maxy = Math.max(d.y1, d.y2);
+
+                    return {
+                        ...d,
+                        x1: d.x - bw * 0.5,
+                        x2: d.x + bw * 0.5,
+                        y1: miny,
+                        y2: maxy
+                    };
+                })}
+            <GroupMultiple class={barGroupClass} length={scaledData.length}>
+                <RectCanvas
+                    {options}
+                    data={rectCanvasData}
+                    {usedScales}
+                    useInsetAsFallbackVertically={false} />
+            </GroupMultiple>
+        {:else}
+            <GroupMultiple class="bar-y" length={scaledData.length}>
+                {#each scaledData as d, i (i)}
+                    {@const miny = Math.min(d.y1, d.y2)}
+                    {@const maxy = Math.max(d.y1, d.y2)}
+                    {#if d.valid}
+                        <RectPath
+                            x={d.x - bw * 0.5}
+                            y={miny}
+                            options={args}
+                            class={className}
+                            width={bw}
+                            height={maxy - miny}
+                            datum={d}
+                            {usedScales}
+                            useInsetAsFallbackVertically={false} />
+                    {/if}
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -71,6 +71,10 @@ declare function $$render<Datum extends DataRow>(): {
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;
         stack?: StackOptions;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+        canvas?: boolean;
         /**
          * Converts y into y1/y2 ranges based on the provided interval. Disables the
          * implicit stacking

package/dist/marks/Cell.svelte

@@ -8,6 +8,10 @@
         data: Datum[];
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+        canvas?: boolean;
     }
     import type {
         DataRecord,
@@ -22,6 +26,7 @@
 
     import { isValid } from '../helpers/index.js';
     import RectPath from './helpers/RectPath.svelte';
+    import RectCanvas from './helpers/RectCanvas.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
@@ -34,6 +39,7 @@
     const {
         data = [{} as Datum],
         class: className = '',
+        canvas = false,
         ...options
     }: CellMarkProps = $derived({
         ...DEFAULTS,
@@ -67,19 +73,36 @@
         {@const bwx = plot.scales.x.fn.bandwidth()}
         {@const bwy = plot.scales.y.fn.bandwidth()}
         <g class="cell {className || ''}" data-fill={usedScales.fillOpacity}>
-            {#each scaledData as d, i (i)}
-                {#if d.valid && (args.fill == null || isValid(resolveChannel('fill', d.datum, args)))}
-                    <RectPath
-                        datum={d}
-                        class={className}
-                        {usedScales}
-                        options={args}
-                        x={d.x - bwx * 0.5}
-                        y={d.y - bwy * 0.5}
-                        width={bwx}
-                        height={bwy} />
-                {/if}
-            {/each}
+            {#if canvas}
+                {@const rectCanvasData = scaledData
+                    .filter(
+                        (d) =>
+                            d.valid &&
+                            (args.fill == null || isValid(resolveChannel('fill', d.datum, args)))
+                    )
+                    .map((d) => ({
+                        ...d,
+                        x1: d.x - bwx * 0.5,
+                        x2: d.x + bwx * 0.5,
+                        y1: d.y - bwy * 0.5,
+                        y2: d.y + bwy * 0.5
+                    }))}
+                <RectCanvas options={args} data={rectCanvasData} {usedScales} />
+            {:else}
+                {#each scaledData as d, i (i)}
+                    {#if d.valid && (args.fill == null || isValid(resolveChannel('fill', d.datum, args)))}
+                        <RectPath
+                            datum={d}
+                            class={className}
+                            {usedScales}
+                            options={args}
+                            x={d.x - bwx * 0.5}
+                            y={d.y - bwy * 0.5}
+                            width={bwx}
+                            height={bwy} />
+                    {/if}
+                {/each}
+            {/if}
         </g>
     {/snippet}
 </Mark>

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

@@ -67,6 +67,10 @@ declare function $$render<Datum extends DataRecord>(): {
         data: Datum[];
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

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

@@ -67,6 +67,7 @@ declare function $$render<Datum extends DataRow>(): {
         data: Record<string | symbol, import("../types/index.js").RawValue>[];
         x?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         y?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        canvas?: boolean;
     }, "data" | "y"> & {
         data: Datum[];
     };

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

@@ -67,6 +67,7 @@ declare function $$render<Datum extends DataRow>(): {
         data: Record<string | symbol, import("../types/index.js").RawValue>[];
         x?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         y?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        canvas?: boolean;
     }, "data" | "x"> & {
         data: Datum[];
     };

package/dist/marks/Rect.svelte

@@ -13,7 +13,12 @@
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;
         interval?: number | string;
-        className?: string;
+        class?: string;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+
+        canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
     import { intervalX, intervalY } from '../index.js';
@@ -26,6 +31,7 @@
     } from '../types/index.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
+    import RectCanvas from './helpers/RectCanvas.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { IS_SORTED } from '../transforms/sort';
     import { usePlot } from '../hooks/usePlot.svelte.js';
@@ -39,6 +45,7 @@
     const {
         data = [{} as Datum],
         class: className = '',
+        canvas = false,
         ...options
     }: RectMarkProps = $derived({
         ...DEFAULTS,
@@ -47,9 +54,7 @@
 
     const plot = usePlot();
 
-    const args = $derived(
-        intervalY(intervalX({ data, ...options }, { plot }), { plot }) as RectMarkProps
-    );
+    const args = $derived(intervalY(intervalX({ data, ...options })) as RectMarkProps);
 </script>
 
 <Mark
@@ -59,32 +64,52 @@
     {...markProps}
     {...args}>
     {#snippet children({ usedScales, scaledData })}
-        <GroupMultiple class={scaledData.length > 1 ? className : null} length={scaledData.length}>
-            {#each scaledData as d, i (i)}
-                {#if d.valid}
-                    {@const x1 = d.x1 == null ? plot.options.marginLeft + d.dx : d.x1}
-                    {@const x2 =
-                        d.x2 == null ? plot.options.marginLeft + plot.facetWidth + d.dx : d.x2}
-                    {@const y1 = d.y1 == null ? plot.options.marginTop + d.dy : d.y1}
-                    {@const y2 =
-                        d.y2 == null ? plot.options.marginTop + plot.facetHeight + d.dy : d.y2}
+        {#if canvas}
+            {@const rectCanvasData = scaledData.map((d) => {
+                const x1 = d.x1 == null ? plot.options.marginLeft + d.dx : d.x1;
+                const x2 = d.x2 == null ? plot.options.marginLeft + plot.facetWidth + d.dx : d.x2;
+                const y1 = d.y1 == null ? plot.options.marginTop + d.dy : d.y1;
+                const y2 = d.y2 == null ? plot.options.marginTop + plot.facetHeight + d.dy : d.y2;
+                const minx = Math.min(x1, x2);
+                const maxx = Math.max(x1, x2);
+                const miny = Math.min(y1, y2);
+                const maxy = Math.max(y1, y2);
+
+                return { ...d, x1: minx, x2: maxx, y1: miny, y2: maxy };
+            })}
+            <GroupMultiple class={className} length={scaledData.length}>
+                <RectCanvas options={args} data={rectCanvasData} {usedScales} />
+            </GroupMultiple>
+        {:else}
+            <GroupMultiple
+                class={scaledData.length > 1 ? className : null}
+                length={scaledData.length}>
+                {#each scaledData as d, i (i)}
+                    {#if d.valid}
+                        {@const x1 = d.x1 == null ? plot.options.marginLeft + d.dx : d.x1}
+                        {@const x2 =
+                            d.x2 == null ? plot.options.marginLeft + plot.facetWidth + d.dx : d.x2}
+                        {@const y1 = d.y1 == null ? plot.options.marginTop + d.dy : d.y1}
+                        {@const y2 =
+                            d.y2 == null ? plot.options.marginTop + plot.facetHeight + d.dy : d.y2}
 
-                    {@const miny = Math.min(y1, y2)}
-                    {@const maxy = Math.max(y1, y2)}
-                    {@const minx = Math.min(x1, x2)}
-                    {@const maxx = Math.max(x1, x2)}
+                        {@const miny = Math.min(y1, y2)}
+                        {@const maxy = Math.max(y1, y2)}
+                        {@const minx = Math.min(x1, x2)}
+                        {@const maxx = Math.max(x1, x2)}
 
-                    <RectPath
-                        datum={d}
-                        class={scaledData.length === 1 ? className : null}
-                        x={minx}
-                        y={miny}
-                        width={maxx - minx}
-                        height={maxy - miny}
-                        options={args}
-                        {usedScales} />
-                {/if}
-            {/each}
-        </GroupMultiple>
+                        <RectPath
+                            datum={d}
+                            class={scaledData.length === 1 ? className : null}
+                            x={minx}
+                            y={miny}
+                            width={maxx - minx}
+                            height={maxy - miny}
+                            options={args}
+                            {usedScales} />
+                    {/if}
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -72,7 +72,11 @@ declare function $$render<Datum extends DataRecord>(): {
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;
         interval?: number | string;
-        className?: string;
+        class?: string;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/RectX.svelte

@@ -33,7 +33,7 @@
 
     const plot = usePlot();
 
-    const args = $derived(stackX(intervalY(recordizeX({ data, ...options }), { plot }), stack));
+    const args = $derived(stackX(intervalY(recordizeX({ data, ...options })), stack));
 </script>
 
 <Rect {...args}></Rect>

package/dist/marks/RectY.svelte

@@ -31,7 +31,7 @@
 
     const plot = usePlot();
 
-    const args = $derived(stackY(intervalX(recordizeY({ data, ...options }), { plot }), stack));
+    const args = $derived(stackY(intervalX(recordizeY({ data, ...options })), stack));
 </script>
 
 <Rect {...args}></Rect>

package/dist/marks/WaffleX.svelte

@@ -64,8 +64,7 @@
         stackX(
             intervalX(
                 // by default, sort by y channel (the ordinal labels)
-                sort(recordizeX({ data, ...options })),
-                { plot }
+                sort(recordizeX({ data, ...options }))
             ),
             stack
         )

package/dist/marks/WaffleY.svelte

@@ -61,8 +61,7 @@
         stackY(
             intervalY(
                 // by default, sort by y channel (the ordinal labels)
-                sort(recordizeY({ data, ...options })),
-                { plot }
+                sort(recordizeY({ data, ...options }))
             ),
             stack
         )

package/dist/marks/helpers/BaseAxisX.svelte

@@ -42,7 +42,7 @@
         };
         text: boolean;
         plot: PlotState;
-        class: string;
+        class: string | undefined;
     };
 
     let {

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

@@ -22,7 +22,7 @@ type BaseAxisXProps = {
     };
     text: boolean;
     plot: PlotState;
-    class: string;
+    class: string | undefined;
 };
 declare const BaseAxisX: import("svelte").Component<BaseAxisXProps, {}, "">;
 type BaseAxisX = ReturnType<typeof BaseAxisX>;

package/dist/marks/helpers/BaseAxisY.svelte

@@ -36,7 +36,7 @@
         };
         plot: PlotState;
         text: boolean | null;
-        class: string;
+        class: string | undefined;
     };
 
     let {

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

@@ -20,7 +20,7 @@ type BaseAxisYProps = {
     };
     plot: PlotState;
     text: boolean | null;
-    class: string;
+    class: string | undefined;
 };
 declare const BaseAxisY: import("svelte").Component<BaseAxisYProps, {}, "">;
 type BaseAxisY = ReturnType<typeof BaseAxisY>;