layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/Bar/Bar.base.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  export type BarBaseLayerComponents = {
+    Rect: Component<any>;
+    /**
+     * Used only when the chart is radial. Optional because the HTML layer
+     * doesn't support radial charts and therefore doesn't need to bundle Arc.
+     */
+    Arc?: Component<any>;
+  };
+
+  export type BarBaseProps = BarProps & BarBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import type { PointerEventHandler } from 'svelte/elements';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { BarState } from './Bar.shared.svelte.js';
+
+  let {
+    Rect,
+    Arc,
+    data,
+    x: xProp,
+    y: yProp,
+    x1: x1Prop,
+    y1: y1Prop,
+    seriesKey,
+    stackPadding = 0,
+    fill,
+    fillOpacity,
+    stroke: strokeProp = 'black',
+    strokeWidth = 0,
+    opacity,
+    radius = 0,
+    rounded = 'all',
+    motion,
+    insets,
+    initialX,
+    initialY,
+    initialHeight,
+    initialWidth,
+    width,
+    height,
+    tooltip,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    ...restProps
+  }: BarBaseProps = $props();
+
+  const stroke = $derived(strokeProp === null || strokeProp === undefined ? 'black' : strokeProp);
+
+  const c = new BarState(
+    () =>
+      ({
+        data,
+        x: xProp,
+        y: yProp,
+        x1: x1Prop,
+        y1: y1Prop,
+        seriesKey,
+        stackPadding,
+        radius,
+        rounded,
+        motion,
+        insets,
+        initialX,
+        initialY,
+        initialHeight,
+        initialWidth,
+        width,
+        height,
+        tooltip,
+      }) as BarProps
+  );
+
+  const onPointerEnter: PointerEventHandler<Element> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) c.ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<Element> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) c.ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<Element> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) c.ctx.tooltip.hide();
+  };
+</script>
+
+{#if c.ctx.radial && Arc}
+  <Arc
+    innerRadius={c.dimensions.y}
+    outerRadius={c.dimensions.y + c.dimensions.height}
+    startAngle={c.dimensions.x}
+    endAngle={c.dimensions.x + c.dimensions.width}
+    {fill}
+    {fillOpacity}
+    {stroke}
+    {strokeWidth}
+    {opacity}
+    cornerRadius={radius}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+    {...extractLayerProps(restProps, 'lc-bar')}
+  />
+{:else}
+  <Rect
+    {fill}
+    {fillOpacity}
+    {stroke}
+    {strokeWidth}
+    {opacity}
+    corners={c.corners}
+    {motion}
+    initialX={c.resolvedInitialX}
+    initialY={c.resolvedInitialY}
+    initialHeight={c.resolvedInitialHeight}
+    initialWidth={c.resolvedInitialWidth}
+    {...c.dimensions}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+    {...extractLayerProps(restProps, 'lc-bar')}
+  />
+{/if}

package/dist/components/Bar/Bar.base.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+import type { BarProps } from './Bar.shared.svelte.js';
+export type BarBaseLayerComponents = {
+    Rect: Component<any>;
+    /**
+     * Used only when the chart is radial. Optional because the HTML layer
+     * doesn't support radial charts and therefore doesn't need to bundle Arc.
+     */
+    Arc?: Component<any>;
+};
+export type BarBaseProps = BarProps & BarBaseLayerComponents;
+declare const Bar: Component<BarBaseProps, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Bar/Bar.canvas.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarBase from './Bar.base.svelte';
+  import Rect from '../Rect/Rect.canvas.svelte';
+  import Arc from '../Arc/Arc.canvas.svelte';
+
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  let props: BarProps = $props();
+</script>
+
+<BarBase {Rect} {Arc} {...props} />

package/dist/components/Bar/Bar.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+import type { BarProps } from './Bar.shared.svelte.js';
+declare const Bar: import("svelte").Component<BarProps, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Bar/Bar.html.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarBase from './Bar.base.svelte';
+  import Rect from '../Rect/Rect.html.svelte';
+
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  let props: BarProps = $props();
+</script>
+
+<!-- Arc is intentionally omitted: radial charts aren't supported on the HTML layer. -->
+<BarBase {Rect} {...props} />

package/dist/components/Bar/Bar.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+import type { BarProps } from './Bar.shared.svelte.js';
+declare const Bar: import("svelte").Component<BarProps, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Bar/Bar.shared.svelte.d.ts

@@ -0,0 +1,88 @@
+import type { SVGAttributes } from 'svelte/elements';
+import { type Insets } from '../../utils/rect.svelte.js';
+import { type Accessor } from '../../utils/common.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { CommonEvents, CommonStyleProps, Without } from '../../utils/types.js';
+export type BarPropsWithoutHTML = {
+    /** Data to render the bar from */
+    data: Object;
+    /** Override `x` from context. @default ctx.x */
+    x?: Accessor;
+    /** Override `y` from context. @default ctx.y */
+    y?: Accessor;
+    /** Override `x1` from context. @default ctx.x1 */
+    x1?: Accessor;
+    /** Override `y1` from context. @default ctx.y1 */
+    y1?: Accessor;
+    /** Series key to use for accessor. */
+    seriesKey?: string;
+    /** Padding between stacked bars. */
+    stackPadding?: number;
+    radius?: number;
+    insets?: Insets;
+    initialX?: number;
+    initialY?: number;
+    initialHeight?: number;
+    initialWidth?: number;
+    /** Fixed width in pixels. */
+    width?: number;
+    /** Fixed height in pixels. */
+    height?: number;
+    rounded?: 'all' | 'none' | 'edge' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+    /** Setup pointer events to show tooltip for related data. */
+    tooltip?: boolean;
+} & CommonStyleProps;
+export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML> & CommonEvents;
+/**
+ * Reactive state shared by every per-layer Bar variant. Holds the resolved
+ * accessors, dimensions, corner-rounding flags, and motion-aware initial values.
+ */
+export declare class BarState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => BarProps);
+    series: import("../index.js").SeriesData<any, any> | undefined;
+    seriesAccessor: string | number | ((d: any) => any) | Accessor<any>[] | undefined;
+    stackAccessors: {
+        y0: (d: any) => number;
+        y1: (d: any) => number;
+        value: (d: any) => [number, number] | null;
+    } | null;
+    x: string | number | ((d: any) => any) | Accessor<any>[];
+    y: string | number | ((d: any) => any) | Accessor<any>[];
+    x1: Accessor;
+    y1: Accessor;
+    seriesIndex: number | undefined;
+    seriesCount: number;
+    stackInsets: Insets | undefined;
+    insets: Insets | undefined;
+    getDimensions: (item: any) => {
+        x: any;
+        y: any;
+        width: number;
+        height: number;
+    } | undefined;
+    scaleDimensions: {
+        x: any;
+        y: any;
+        width: number;
+        height: number;
+    };
+    dimensions: {
+        x: any;
+        y: any;
+        width: number;
+        height: number;
+    };
+    valueAccessor: (d: any) => any;
+    resolvedValue: any;
+    /** Resolved `rounded="edge"` based on orientation and value */
+    rounded: "none" | "left" | "right" | "all" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    corners: [number, number, number, number];
+    resolvedInitialY: number | undefined;
+    resolvedInitialHeight: number | undefined;
+    resolvedInitialX: number | undefined;
+    resolvedInitialWidth: number | undefined;
+}

package/dist/components/Bar/Bar.shared.svelte.js

@@ -0,0 +1,142 @@
+import { greatestAbs } from '@layerstack/utils';
+import { createDimensionGetter } from '../../utils/rect.svelte.js';
+import { accessor } from '../../utils/common.js';
+import { getChartContext } from '../../contexts/chart.js';
+import {} from '../../utils/motion.svelte.js';
+/**
+ * Reactive state shared by every per-layer Bar variant. Holds the resolved
+ * accessors, dimensions, corner-rounding flags, and motion-aware initial values.
+ */
+export class BarState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+    }
+    series = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey ? this.ctx.series.series.find((s) => s.key === seriesKey) : undefined;
+    });
+    seriesAccessor = $derived(this.series ? this.series.value ?? (this.series.data ? undefined : this.series.key) : undefined);
+    stackAccessors = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey && this.ctx.series.isStacked
+            ? this.ctx.series.getStackAccessors(seriesKey)
+            : null;
+    });
+    x = $derived.by(() => {
+        const xProp = this.#getProps().x;
+        return (xProp ??
+            (this.ctx.valueAxis === 'x' ? this.stackAccessors?.value ?? this.seriesAccessor : undefined) ??
+            this.ctx.x);
+    });
+    y = $derived.by(() => {
+        const yProp = this.#getProps().y;
+        return (yProp ??
+            (this.ctx.valueAxis === 'y' ? this.stackAccessors?.value ?? this.seriesAccessor : undefined) ??
+            this.ctx.y);
+    });
+    x1 = $derived(this.#getProps().x1);
+    y1 = $derived(this.#getProps().y1);
+    seriesIndex = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey
+            ? this.ctx.series.visibleSeries.findIndex((s) => s.key === seriesKey)
+            : undefined;
+    });
+    seriesCount = $derived(this.ctx.series.visibleSeries.length);
+    stackInsets = $derived.by(() => {
+        const stackPadding = this.#getProps().stackPadding ?? 0;
+        if (!this.ctx.series.isStacked || stackPadding === 0 || this.seriesIndex === undefined) {
+            return undefined;
+        }
+        const isFirst = this.seriesIndex === 0;
+        const isLast = this.seriesIndex === this.seriesCount - 1;
+        const stackInset = stackPadding / 2;
+        if (this.ctx.valueAxis === 'y') {
+            return {
+                bottom: isFirst ? undefined : stackInset,
+                top: isLast ? undefined : stackInset,
+            };
+        }
+        return {
+            left: isFirst ? undefined : stackInset,
+            right: isLast ? undefined : stackInset,
+        };
+    });
+    insets = $derived(this.#getProps().insets ?? this.stackInsets);
+    getDimensions = $derived(createDimensionGetter(this.ctx, () => ({
+        x: this.x,
+        y: this.y,
+        x1: this.x1,
+        y1: this.y1,
+        insets: this.insets,
+    })));
+    scaleDimensions = $derived(this.getDimensions(this.#getProps().data) ?? { x: 0, y: 0, width: 0, height: 0 });
+    dimensions = $derived.by(() => {
+        let { x, y, width, height } = this.scaleDimensions;
+        const props = this.#getProps();
+        if (props.width != null) {
+            x = x + (width - props.width) / 2;
+            width = props.width;
+        }
+        if (props.height != null) {
+            y = y + (height - props.height) / 2;
+            height = props.height;
+        }
+        return { x, y, width, height };
+    });
+    valueAccessor = $derived(accessor(this.ctx.valueAxis === 'y' ? this.y : this.x));
+    resolvedValue = $derived.by(() => {
+        const value = this.valueAccessor(this.#getProps().data);
+        return Array.isArray(value) ? greatestAbs(value) : value;
+    });
+    /** Resolved `rounded="edge"` based on orientation and value */
+    rounded = $derived.by(() => {
+        const roundedProp = this.#getProps().rounded ?? 'all';
+        if (roundedProp !== 'edge')
+            return roundedProp;
+        if (this.ctx.valueAxis === 'y') {
+            return this.resolvedValue >= 0 && this.ctx.yRange[0] > this.ctx.yRange[1]
+                ? 'top'
+                : 'bottom';
+        }
+        return this.resolvedValue >= 0 && this.ctx.xRange[0] < this.ctx.xRange[1] ? 'right' : 'left';
+    });
+    corners = $derived.by(() => {
+        const radius = this.#getProps().radius ?? 0;
+        const rounded = this.rounded;
+        const topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
+        const topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
+        const bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
+        const bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
+        return [
+            topLeft ? radius : 0,
+            topRight ? radius : 0,
+            bottomRight ? radius : 0,
+            bottomLeft ? radius : 0,
+        ];
+    });
+    resolvedInitialY = $derived.by(() => {
+        const props = this.#getProps();
+        return (props.initialY ??
+            (props.motion && this.ctx.valueAxis === 'y'
+                ? Math.max(this.ctx.yRange[0], this.ctx.yRange[1])
+                : undefined));
+    });
+    resolvedInitialHeight = $derived.by(() => {
+        const props = this.#getProps();
+        return props.initialHeight ?? (props.motion && this.ctx.valueAxis === 'y' ? 0 : undefined);
+    });
+    resolvedInitialX = $derived.by(() => {
+        const props = this.#getProps();
+        return (props.initialX ??
+            (props.motion && this.ctx.valueAxis === 'x'
+                ? Math.min(this.ctx.xRange[0], this.ctx.xRange[1])
+                : undefined));
+    });
+    resolvedInitialWidth = $derived.by(() => {
+        const props = this.#getProps();
+        return props.initialWidth ?? (props.motion && this.ctx.valueAxis === 'x' ? 0 : undefined);
+    });
+}

package/dist/components/Bar/Bar.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import BarSvg from './Bar.svg.svelte';
+  import BarCanvas from './Bar.canvas.svelte';
+  import BarHtml from './Bar.html.svelte';
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: BarProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <BarSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <BarCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <BarHtml {...props} />
+{/if}

package/dist/components/Bar/Bar.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+import type { BarProps } from './Bar.shared.svelte.js';
+declare const Bar: import("svelte").Component<BarProps, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Bar/Bar.svg.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarBase from './Bar.base.svelte';
+  import Rect from '../Rect/Rect.svg.svelte';
+  import Arc from '../Arc/Arc.svg.svelte';
+
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  let props: BarProps = $props();
+</script>
+
+<BarBase {Rect} {Arc} {...props} />

package/dist/components/Bar/Bar.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+import type { BarProps } from './Bar.shared.svelte.js';
+declare const Bar: import("svelte").Component<BarProps, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Bars/Bars.base.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { BarsProps } from './Bars.shared.svelte.js';
+
+  export type BarsBaseLayerComponents = {
+    Bar: Component<any>;
+    Group: Component<any>;
+  };
+
+  export type BarsBaseProps = BarsProps & BarsBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { BarsState } from './Bars.shared.svelte.js';
+
+  let {
+    Bar,
+    Group,
+    fill,
+    key = (_, i) => i,
+    data: dataProp,
+    onBarClick = () => {},
+    children,
+    radius = 0,
+    strokeWidth = 0,
+    stroke = 'black',
+    seriesKey,
+    stackPadding = 0,
+    ...restProps
+  }: BarsBaseProps = $props();
+
+  const c = new BarsState(
+    () =>
+      ({
+        data: dataProp,
+        key,
+        onBarClick,
+        seriesKey,
+        stackPadding,
+        fill,
+        radius,
+        strokeWidth,
+        stroke,
+      }) as BarsProps
+  );
+</script>
+
+<Group class="lc-bars">
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each c.data as d, i (key(d, i))}
+      <Bar
+        data={d}
+        {radius}
+        {strokeWidth}
+        {stroke}
+        {seriesKey}
+        {stackPadding}
+        fill={fill ?? c.series?.color ?? (c.ctx.config.c ? c.ctx.cGet(d) : null)}
+        onclick={(e: MouseEvent) => onBarClick(e, { data: d })}
+        {...extractLayerProps(restProps, 'lc-bars-bar')}
+      />
+    {/each}
+  {/if}
+</Group>

package/dist/components/Bars/Bars.base.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { BarsProps } from './Bars.shared.svelte.js';
+export type BarsBaseLayerComponents = {
+    Bar: Component<any>;
+    Group: Component<any>;
+};
+export type BarsBaseProps = BarsProps & BarsBaseLayerComponents;
+declare const Bars: Component<BarsBaseProps, {}, "">;
+type Bars = ReturnType<typeof Bars>;
+export default Bars;

package/dist/components/Bars/Bars.canvas.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarsProps, BarsPropsWithoutHTML } from './Bars.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarsBase from './Bars.base.svelte';
+  import Bar from '../Bar/Bar.canvas.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+
+  import type { BarsProps } from './Bars.shared.svelte.js';
+
+  let props: BarsProps = $props();
+</script>
+
+<BarsBase {Bar} {Group} {...props} />

package/dist/components/Bars/Bars.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { BarsProps, BarsPropsWithoutHTML } from './Bars.shared.svelte.js';
+import type { BarsProps } from './Bars.shared.svelte.js';
+declare const Bars: import("svelte").Component<BarsProps, {}, "">;
+type Bars = ReturnType<typeof Bars>;
+export default Bars;

package/dist/components/Bars/Bars.html.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarsProps, BarsPropsWithoutHTML } from './Bars.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarsBase from './Bars.base.svelte';
+  import Bar from '../Bar/Bar.html.svelte';
+  import Group from '../Group/Group.html.svelte';
+
+  import type { BarsProps } from './Bars.shared.svelte.js';
+
+  let props: BarsProps = $props();
+</script>
+
+<BarsBase {Bar} {Group} {...props} />

package/dist/components/Bars/Bars.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { BarsProps, BarsPropsWithoutHTML } from './Bars.shared.svelte.js';
+import type { BarsProps } from './Bars.shared.svelte.js';
+declare const Bars: import("svelte").Component<BarsProps, {}, "">;
+type Bars = ReturnType<typeof Bars>;
+export default Bars;

package/dist/components/Bars/Bars.shared.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { BarProps, BarPropsWithoutHTML } from '../Bar/Bar.shared.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+export type BarsPropsWithoutHTML = {
+    /** Override the data from the context. */
+    data?: any;
+    /** @default (d, index) => index */
+    key?: (d: any, index: number) => any;
+    /** Event dispatched when an individual bar is clicked. */
+    onBarClick?: (e: MouseEvent, detail: {
+        data: any;
+    }) => void;
+    /** Series key to use for accessor. */
+    seriesKey?: string;
+    /** Padding between stacked bars. */
+    stackPadding?: number;
+    children?: Snippet;
+    [key: string]: any;
+} & Omit<BarPropsWithoutHTML, 'data' | 'children' | 'seriesKey' | 'stackPadding'>;
+export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
+/**
+ * Reactive state shared by every per-layer Bars variant.
+ */
+export declare class BarsState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => BarsProps);
+    series: import("../index.js").SeriesData<any, any> | undefined;
+    seriesData: any[] | undefined;
+    data: any[];
+}

package/dist/components/Bars/Bars.shared.svelte.js

@@ -0,0 +1,30 @@
+import { chartDataArray } from '../../utils/common.js';
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer Bars variant.
+ */
+export class BarsState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+        this.ctx.registerComponent({
+            name: 'Bars',
+            kind: 'mark',
+            markInfo: () => {
+                const p = getProps();
+                return {
+                    data: p.data,
+                    seriesKey: p.seriesKey,
+                    color: p.fill,
+                };
+            },
+        });
+    }
+    series = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey ? this.ctx.series.series.find((s) => s.key === seriesKey) : undefined;
+    });
+    seriesData = $derived(this.series?.data);
+    data = $derived(chartDataArray(this.#getProps().data ?? this.seriesData ?? this.ctx.data));
+}