svelteplot 0.2.9 → 0.2.10-pr-110.1

package/dist/marks/AxisY.svelte

@@ -26,16 +26,13 @@
         tickClass?: ConstantAccessor<string>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | RawValue[];
-    } & XOR<
-            {
-                /** approximate number of ticks to be generated */
-                tickCount?: number;
-            },
-            {
-                /** approximate number of pixels between generated ticks */
-                tickSpacing?: number;
-            }
-        >;
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
+        /** approximate number of ticks to be generated */
+        tickCount?: number;
+        /** approximate number of pixels between generated ticks */
+        tickSpacing?: number;
+    };
 </script>
 
 <script lang="ts">
@@ -47,39 +44,44 @@
         BaseMarkProps,
         RawValue,
         FacetContext,
-        DefaultOptions
+        PlotDefaults,
+        ChannelName
     } from '../types.js';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import type { ConstantAccessor } from '../types.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
 
-    const DEFAULTS = {
+    let markProps: AxisYMarkProps = $props();
+
+    const DEFAULTS: Omit<AxisYMarkProps, 'data' | ChannelName> = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
-        axisYAnchor: 'left',
-        ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
+        anchor: 'left',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axis,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axisY
     };
 
-    let {
+    const {
         ticks: magicTicks,
         data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
-        anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
+        anchor,
         facetAnchor = 'auto',
         interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         lineAnchor = 'center',
-        tickSize = DEFAULTS.tickSize,
-        tickFontSize = DEFAULTS.tickFontSize,
-        tickPadding = DEFAULTS.tickPadding,
+        tickSize,
+        tickFontSize,
+        tickPadding,
         tickFormat,
         tickClass,
         tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
+        text = true,
         ...options
-    }: AxisYMarkProps = $props();
+    }: AxisYMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -200,6 +202,7 @@
             {tickFontSize}
             {tickClass}
             {options}
+            {text}
             title={useTitle}
             {plot} />
     {/if}

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

@@ -1,4 +1,3 @@
-import type { XOR } from 'ts-essentials';
 export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -15,13 +14,13 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickClass?: ConstantAccessor<string>;
     /** ticks is a shorthand for defining data, tickCount or interval */
     ticks?: number | string | RawValue[];
-} & XOR<{
+    /** set to false or null to disable tick labels */
+    text: boolean | null;
     /** approximate number of ticks to be generated */
     tickCount?: number;
-}, {
     /** approximate number of pixels between generated ticks */
     tickSpacing?: number;
-}>;
+};
 import type { BaseMarkProps, RawValue } from '../types.js';
 import type { ConstantAccessor } from '../types.js';
 /** Renders a vertical axis with labels and tick marks */

package/dist/marks/BarX.svelte

@@ -7,10 +7,13 @@
         PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        LinkableMarkProps,
+        PlotDefaults
     } from '../types.js';
 
     export type BarXMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;
@@ -36,7 +39,20 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, stack, ...options }: BarXMarkProps = $props();
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').bar,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').barX
+    };
+
+    let markProps: BarXMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = null,
+        stack,
+        ...options
+    }: BarXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,5 +1,5 @@
-import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type BarXMarkProps = BaseMarkProps & BaseRectMarkProps & {
+import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, LinkableMarkProps } from '../types.js';
+export type BarXMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     x1?: ChannelAccessor;

package/dist/marks/BarY.svelte

@@ -8,10 +8,12 @@
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        DataRow
+        DataRow,
+        PlotDefaults
     } from '../types.js';
 
     export type BarYMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;
@@ -36,11 +38,24 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, stack, ...options }: BarYMarkProps = $props();
-
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').bar,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').barY
+    };
+
+    let markProps: BarYMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = null,
+        stack,
+        ...options
+    }: BarYMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
     const args = $derived(
         stackY(
             intervalY(

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

@@ -1,5 +1,5 @@
 import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, DataRow } from '../types.js';
-export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type BarYMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
@@ -14,6 +14,6 @@ export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
 };
 import type { StackOptions } from '../transforms/stack.js';
 /** For vertical column charts using a band scale as x axis */
-declare const BarY: import("svelte").Component<BarYMarkProps, {}, "">;
+declare const BarY: import("svelte").Component<any, {}, "">;
 type BarY = ReturnType<typeof BarY>;
 export default BarY;

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

@@ -13,6 +13,6 @@ export type BollingerXMarkProps = BaseMarkProps & {
 };
 import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
 /** line representing a moving average and an area representing volatility as a band */
-declare const BollingerX: import("svelte").Component<BollingerXMarkProps, {}, "">;
+declare const BollingerX: import("svelte").Component<any, {}, "">;
 type BollingerX = ReturnType<typeof BollingerX>;
 export default BollingerX;

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

@@ -13,6 +13,6 @@ export type BollingerYMarkProps = BaseMarkProps & {
 };
 import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
 /** line representing a moving average and an area representing volatility as a band */
-declare const BollingerY: import("svelte").Component<BollingerYMarkProps, {}, "">;
+declare const BollingerY: import("svelte").Component<any, {}, "">;
 type BollingerY = ReturnType<typeof BollingerY>;
 export default BollingerY;

package/dist/marks/BoxX.svelte

@@ -1,23 +1,37 @@
 <!-- @component
     Creates a horizontal box plot for visualizing data distribution with quartiles and outliers
 -->
+<script module lang="ts">
+    export type BoxXMarkProps = BoxYMarkProps;
+</script>
+
 <script lang="ts">
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import type { BoxProps } from './BoxY.svelte';
+    import type { BoxYMarkProps } from './BoxY.svelte';
     import { BarX, TickX, RuleY, Dot, groupY } from '../index.js';
     import { resolveChannel } from '../helpers/resolve.js';
+    import { getContext } from 'svelte';
+    import type { PlotDefaults } from '../types.js';
 
-    let {
+    let markProps: BoxXMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').box,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').boxX
+    };
+    const {
         data = [{}],
-        x,
-        y,
-        rule,
         bar,
-        tickMedian = true,
-        tickMinMax = false,
+        rule,
+        tickMedian,
+        tickMinMax,
         dot,
-        class: className = null
-    }: BoxProps = $props();
+        x,
+        y,
+        class: className = ''
+    }: BoxXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { data: grouped } = $derived(
         groupY(

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

@@ -1,5 +1,6 @@
-import type { BoxProps } from './BoxY.svelte';
+export type BoxXMarkProps = BoxYMarkProps;
+import type { BoxYMarkProps } from './BoxY.svelte';
 /** Creates a horizontal box plot for visualizing data distribution with quartiles and outliers */
-declare const BoxX: import("svelte").Component<BoxProps, {}, "">;
+declare const BoxX: import("svelte").Component<BoxYMarkProps, {}, "">;
 type BoxX = ReturnType<typeof BoxX>;
 export default BoxX;

package/dist/marks/BoxY.svelte

@@ -2,7 +2,7 @@
     Creates a vertical box plot for visualizing data distribution with quartiles and outliers
 -->
 <script lang="ts" module>
-    export type BoxProps = {
+    export type BoxYMarkProps = Pick<BaseMarkProps, 'class'> & {
         data: DataRecord[];
         x: ChannelAccessor;
         y: ChannelAccessor;
@@ -31,21 +31,31 @@
 
 <script lang="ts">
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import type { ChannelAccessor, DataRecord } from '../types.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRecord } from '../types.js';
     import { groupX, BarY, TickY, RuleX, Dot } from '../index.js';
     import { resolveChannel } from '../helpers/resolve.js';
+    import { getContext } from 'svelte';
+    import type { PlotDefaults } from '../types.js';
 
-    let {
+    let markProps: BoxYMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').box,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').boxY
+    };
+    const {
         data = [{}],
-        x,
-        y,
-        rule,
+        class: className = '',
         bar,
-        tickMedian = true,
-        tickMinMax = false,
+        rule,
+        tickMedian,
+        tickMinMax,
         dot,
-        class: className = null
-    }: BoxProps = $props();
+        x,
+        y
+    }: BoxYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let { data: grouped } = $derived(
         groupX(

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

@@ -1,4 +1,4 @@
-export type BoxProps = {
+export type BoxYMarkProps = Pick<BaseMarkProps, 'class'> & {
     data: DataRecord[];
     x: ChannelAccessor;
     y: ChannelAccessor;
@@ -23,8 +23,8 @@ export type BoxProps = {
      */
     dot: Record<string, ChannelAccessor>;
 };
-import type { ChannelAccessor, DataRecord } from '../types.js';
+import type { BaseMarkProps, ChannelAccessor, DataRecord } from '../types.js';
 /** Creates a vertical box plot for visualizing data distribution with quartiles and outliers */
-declare const BoxY: import("svelte").Component<BoxProps, {}, "">;
+declare const BoxY: import("svelte").Component<BoxYMarkProps, {}, "">;
 type BoxY = ReturnType<typeof BoxY>;
 export default BoxY;

package/dist/marks/Brush.svelte

@@ -44,27 +44,41 @@
     import { getContext } from 'svelte';
     import Frame from './Frame.svelte';
     import Rect from './Rect.svelte';
-    import type { BaseMarkProps, PlotContext } from '../types.js';
+    import type { BaseMarkProps, PlotContext, PlotDefaults } from '../types.js';
     import { clientToLayerCoordinates } from './helpers/events.js';
 
-    let {
-        brush = $bindable({ enabled: false }),
-        stroke = 'currentColor',
+    let { brush = $bindable(), ...markProps }: BrushMarkProps = $props();
+
+    const DEFAULTS = {
+        stroke: 'currentColor',
+        strokeDasharray: '2,3',
+        strokeOpacity: 0.6,
+        resizeHandleSize: 10,
+        constrainToDomain: false,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brush
+    };
+
+    const {
+        data = [{}],
+        stroke,
         strokeWidth,
-        strokeDasharray = '2,3',
-        strokeOpacity = 0.6,
+        strokeDasharray,
+        strokeOpacity,
         strokeLinecap,
         strokeDashoffset,
         strokeLinejoin,
         strokeMiterlimit,
         cursor: forceCursor,
         limitDimension = false,
-        constrainToDomain = false,
-        resizeHandleSize = 10,
+        constrainToDomain,
+        resizeHandleSize,
         onbrushstart,
         onbrushend,
         onbrush
-    }: BrushMarkProps = $props();
+    }: BrushMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -361,4 +375,10 @@
         {strokeMiterlimit}
         {strokeWidth} />
 {/if}
-<Frame fill="transparent" inset={-20} {cursor} {onpointerdown} {onpointermove} />
+<Frame
+    fill="transparent"
+    stroke="transparent"
+    inset={-20}
+    {cursor}
+    {onpointerdown}
+    {onpointermove} />

package/dist/marks/BrushX.svelte

@@ -1,11 +1,17 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushXMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 
 <script lang="ts">
     import Brush, { type BrushMarkProps } from './Brush.svelte';
+    import type { PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
 
-    let { brush, ...restProps }: BrushXMarkProps = $props();
+    let { brush = $bindable(), ...options }: BrushXMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brush,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brushX
+    };
 </script>
 
-<Brush bind:brush limitDimension="x" {...restProps} />
+<Brush bind:brush limitDimension="x" {...DEFAULTS} {...options} />

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

@@ -1,5 +1,5 @@
 export type BrushXMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 import { type BrushMarkProps } from './Brush.svelte';
-declare const BrushX: import("svelte").Component<BrushXMarkProps, {}, "">;
+declare const BrushX: import("svelte").Component<BrushXMarkProps, {}, "brush">;
 type BrushX = ReturnType<typeof BrushX>;
 export default BrushX;

package/dist/marks/BrushY.svelte

@@ -1,11 +1,17 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 
 <script lang="ts">
     import Brush, { type BrushMarkProps } from './Brush.svelte';
+    import type { PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
 
-    let { brush, ...restProps }: BrushYMarkProps = $props();
+    let { brush = $bindable(), ...options }: BrushYMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brush,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brushY
+    };
 </script>
 
-<Brush bind:brush limitDimension="y" {...restProps} />
+<Brush bind:brush limitDimension="y" {...DEFAULTS} {...options} />

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

@@ -1,5 +1,5 @@
 export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 import { type BrushMarkProps } from './Brush.svelte';
-declare const BrushY: import("svelte").Component<BrushYMarkProps, {}, "">;
+declare const BrushY: import("svelte").Component<BrushYMarkProps, {}, "brush">;
 type BrushY = ReturnType<typeof BrushY>;
 export default BrushY;

package/dist/marks/Cell.svelte

@@ -8,10 +8,12 @@
         DataRecord,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
 
     export type CellMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRecord[];
             x?: ChannelAccessor;
@@ -28,7 +30,20 @@
     import { isValid } from '../helpers/isValid.js';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, ...options }: CellMarkProps = $props();
+    let markProps: CellMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').cell
+    };
+
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: CellMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,10 +1,10 @@
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type CellMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type CellMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRecord[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
 };
 /** For arbitrary rectangles, requires band x and y scales */
-declare const Cell: import("svelte").Component<CellMarkProps, {}, "">;
+declare const Cell: import("svelte").Component<any, {}, "">;
 type Cell = ReturnType<typeof Cell>;
 export default Cell;

package/dist/marks/ColorLegend.svelte

@@ -11,14 +11,14 @@
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
-    import type { DefaultOptions, PlotContext } from '../types.js';
+    import type { PlotDefaults, PlotContext } from '../types.js';
 
     let { class: className = null }: ColorLegendMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const DEFAULTS = getContext<Partial<DefaultOptions>>('svelteplot/_defaults');
+    const DEFAULTS = getContext<Partial<PlotDefaults>>('svelteplot/_defaults');
 
     const legendTitle = $derived(plot.options.color.label);
     const scaleType = $derived(plot.scales.color.type);
@@ -167,6 +167,7 @@
     .swatch {
         display: inline-flex;
         align-items: center;
+        column-gap: 0.3rem;
     }
     .item-label {
         vertical-align: super;

package/dist/marks/Dot.svelte

@@ -10,7 +10,7 @@
         symbol?: ChannelAccessor | Snippet<[number, string]>;
         canvas?: boolean;
         dotClass?: ConstantAccessor<string>;
-    };
+    } & LinkableMarkProps;
 </script>
 
 <script lang="ts">
@@ -21,8 +21,8 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
-        PlotDefaults
+        PlotDefaults,
+        LinkableMarkProps
     } from '../types.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '../helpers/symbols.js';
@@ -33,14 +33,21 @@
     import { maybeData, isValid } from '../helpers/index.js';
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
+    import Anchor from './helpers/Anchor.svelte';
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').dot
+    };
 
-    let {
+    let markProps: DotMarkProps = $props();
+
+    const {
         data = [{}],
         canvas = false,
         class: className = '',
         dotClass = null,
         ...options
-    }: DotMarkProps = $props();
+    }: DotMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -49,10 +56,6 @@
         return d3Symbol(maybeSymbol(symbolType), size)();
     }
 
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    const { dotRadius } = getContext<PlotDefaults>('svelteplot/_defaults');
-    let testFacet = $derived(getTestFacet());
-
     const args = $derived(
         // todo: move sorting to Mark
         sort(
@@ -81,10 +84,10 @@
         'fillOpacity',
         'strokeOpacity'
     ]}
-    defaults={{ r: dotRadius, symbol: 'circle' }}
+    defaults={{ r: 3, symbol: 'circle' }}
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
-        <g class="dots {className || ''}">
+        <g class="dot {className || ''}">
             {#if canvas}
                 <DotCanvas data={scaledData} {mark} />
             {:else}
@@ -97,19 +100,21 @@
                             'stroke',
                             usedScales
                         )}
-                        <path
-                            transform="translate({d.x}, {d.y})"
-                            d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
-                            class={[
-                                dotClass ? resolveProp(dotClass, d.datum, null) : null,
-                                styleClass
-                            ]}
-                            {style}
-                            use:addEventHandlers={{
-                                getPlotState,
-                                options: args,
-                                datum: d.datum
-                            }} />
+                        <Anchor {options} datum={d.datum}>
+                            <path
+                                transform="translate({d.x}, {d.y})"
+                                d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
+                                class={[
+                                    dotClass ? resolveProp(dotClass, d.datum, null) : null,
+                                    styleClass
+                                ]}
+                                {style}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }} />
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}