layerchart 2.0.0-next.43 → 2.0.0-next.45

package/dist/components/{layout → layers}/Svg.svelte

@@ -55,6 +55,14 @@
      */
     ignoreTransform?: boolean;
 
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the SVG.
+     *
+     * @default false
+     */
+    clip?: boolean;
+
     children?: Snippet<[{ ref: SVGElement }]>;
   };
 
@@ -63,9 +71,10 @@
 </script>
 
 <script lang="ts">
-  import { getTransformContext } from '../TransformContext.svelte';
+  import { getTransformContext } from '../../contexts/transform.js';
 
-  import { getChartContext, setRenderContext } from '../Chart.svelte';
+  import { setLayerContext } from '../../contexts/layer.js';
+  import { getChartContext } from '../../contexts/chart.js';
 
   let {
     ref: refProp = $bindable(),
@@ -75,6 +84,7 @@
     viewBox,
     ignoreTransform = false,
     center = false,
+    clip = false,
     class: className,
     title,
     defs,
@@ -103,7 +113,7 @@
     }
   });
 
-  setRenderContext('svg');
+  setLayerContext('svg');
 </script>
 
 <svg
@@ -114,6 +124,7 @@
   style:z-index={zIndex}
   class={['lc-layout-svg', className]}
   class:disablePointerEvents={pointerEvents === false}
+  class:clip
   role="figure"
   {...restProps}
 >
@@ -152,6 +163,10 @@
       &.disablePointerEvents {
         pointer-events: none;
       }
+
+      &.clip {
+        overflow: hidden;
+      }
     }
   }
 </style>

package/dist/components/{layout → layers}/Svg.svelte.d.ts

@@ -44,6 +44,13 @@ type SVGPropsWithoutHTML = {
      * Useful to add static elements such as legends.
      */
     ignoreTransform?: boolean;
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the SVG.
+     *
+     * @default false
+     */
+    clip?: boolean;
     children?: Snippet<[{
         ref: SVGElement;
     }]>;

package/dist/components/{layout → layers}/WebGL.svelte

@@ -69,7 +69,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { getChartContext } from '../Chart.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
   import { Context } from 'runed';
 
   let {

package/dist/components/{layout → layers}/WebGL.svelte.d.ts

@@ -48,6 +48,6 @@ export type WebGLContextValue = {
 };
 export declare function setWebGLContext(context: WebGLContextValue): WebGLContextValue;
 export declare function getWebGLContext(): WebGLContextValue;
-declare const WebGl: import("svelte").Component<WebGLProps, {}, "ref" | "context">;
-type WebGl = ReturnType<typeof WebGl>;
-export default WebGl;
+declare const WebGL: import("svelte").Component<WebGLProps, {}, "ref" | "context">;
+type WebGL = ReturnType<typeof WebGL>;
+export default WebGL;

package/dist/components/tests/TestHarness.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" module>
+  export const componentTestId = 'test-lc-component';
+  export const chartTestId = 'test-lc-chart';
+</script>
+
+<script lang="ts">
+  import type { Component as ComponentType } from 'svelte';
+  import Chart from '../Chart.svelte';
+  import Layer from '../layers/Layer.svelte';
+
+  type ChildComponent = {
+    component: ComponentType;
+    props?: Record<string, any> | ((snippetProps: any) => Record<string, any>);
+  };
+
+  let {
+    useChart = true,
+    chartProps = {},
+    layer = 'svg',
+    layerProps = {},
+    component,
+    componentProps = {},
+    childComponents = [],
+  }: {
+    useChart?: boolean;
+    chartProps?: Record<string, any>;
+    layer?: 'svg' | 'html' | 'canvas';
+    layerProps?: Record<string, any>;
+    component: ComponentType;
+    componentProps?: Record<string, any>;
+    childComponents?: ChildComponent[];
+  } = $props();
+
+  const TestComponent = $derived(component);
+
+  // Merge defaults with chartProps so chartProps can override defaults
+  const mergedChartProps = $derived({
+    height: 300,
+    ...chartProps,
+  });
+
+  // Merge future defaults with componentProps so componentProps can override defaults
+  const mergedComponentProps = $derived({
+    ...componentProps,
+  });
+
+  function resolveProps(
+    props: Record<string, any> | ((snippetProps: any) => Record<string, any>) | undefined,
+    snippetProps: any
+  ): Record<string, any> {
+    if (typeof props === 'function') {
+      return props(snippetProps);
+    }
+    return props ?? {};
+  }
+</script>
+
+{#snippet Component()}
+  <TestComponent {...mergedComponentProps} data-testid={componentTestId}>
+    {#snippet children(snippetProps: any)}
+      {#each childComponents as child}
+        <child.component {...resolveProps(child.props, snippetProps)} />
+      {/each}
+    {/snippet}
+  </TestComponent>
+{/snippet}
+
+{#if useChart}
+  <Chart {...mergedChartProps} data-testid={chartTestId}>
+    <Layer center type={layer} {...layerProps}>
+      {@render Component()}
+    </Layer>
+  </Chart>
+{:else}
+  {@render Component()}
+{/if}

package/dist/components/tests/TestHarness.svelte.d.ts

@@ -0,0 +1,19 @@
+export declare const componentTestId = "test-lc-component";
+export declare const chartTestId = "test-lc-chart";
+import type { Component as ComponentType } from 'svelte';
+type ChildComponent = {
+    component: ComponentType;
+    props?: Record<string, any> | ((snippetProps: any) => Record<string, any>);
+};
+type $$ComponentProps = {
+    useChart?: boolean;
+    chartProps?: Record<string, any>;
+    layer?: 'svg' | 'html' | 'canvas';
+    layerProps?: Record<string, any>;
+    component: ComponentType;
+    componentProps?: Record<string, any>;
+    childComponents?: ChildComponent[];
+};
+declare const TestHarness: ComponentType<$$ComponentProps, {}, "">;
+type TestHarness = ReturnType<typeof TestHarness>;
+export default TestHarness;

package/dist/components/tooltip/Tooltip.svelte

@@ -158,10 +158,10 @@
   import { cls } from '@layerstack/tailwind';
 
   import { isScaleBand } from '../../utils/scales.svelte.js';
-  import { getChartContext, type ChartContextValue } from '../Chart.svelte';
-  import { getTooltipContext } from './TooltipContext.svelte';
+  import { getChartContext, type ChartContextValue } from '../../contexts/chart.js';
+  import { getTooltipContext } from '../../contexts/tooltip.js';
   import { createMotion, type MotionProp } from '../../utils/motion.svelte.js';
-  import { untrack, type Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
 
   let {
     anchor = 'top-left',

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -131,7 +131,7 @@ export type TooltipPropsWithoutHTML<T = any> = {
     context?: ChartContextValue<T, any, any>;
 };
 export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipPropsWithoutHTML<T>>;
-import { type ChartContextValue } from '../Chart.svelte';
+import { type ChartContextValue } from '../../contexts/chart.js';
 import { type MotionProp } from '../../utils/motion.svelte.js';
 import { type Snippet } from 'svelte';
 declare function $$render<T = any>(): {

package/dist/components/tooltip/TooltipContext.svelte

@@ -1,11 +1,9 @@
 <script lang="ts" module>
-  import { Context } from 'runed';
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Without } from '../../utils/types.js';
+  import { setTooltipContext, type TooltipContextValue } from '../../contexts/tooltip.js';
 
-  const _TooltipContext = new Context<TooltipContextValue>('TooltipContext');
-
-  type TooltipMode =
+  export type TooltipMode =
     | 'bisect-x' // requires values to be sorted
     | 'bisect-y' // requires values to be sorted
     | 'band'
@@ -17,40 +15,6 @@
     | 'quadtree-y' // ignores x values (constant 0)
     | 'manual';
 
-  export type TooltipContextValue<T = any> = {
-    x: number;
-    y: number;
-    data: T | null;
-    payload: TooltipPayload[];
-    show(
-      e: PointerEvent | MouseEvent | TouchEvent,
-      tooltipData?: any,
-      payload?: TooltipPayload
-    ): void;
-    hide(e?: PointerEvent): void;
-    mode: TooltipMode;
-    isHoveringTooltipArea: boolean;
-    isHoveringTooltipContent: boolean;
-  };
-
-  //   const defaultContext = {
-  //     x: 0,
-  //     y: 0,
-  //     data: null as any,
-  //     payload: [],
-  //     show: () => {},
-  //     hide: () => {},
-  //     mode: 'manual',
-  //   } as TooltipContextValue;
-
-  export function getTooltipContext<T = any>() {
-    return _TooltipContext.get() as TooltipContextValue<T>;
-  }
-
-  function setTooltipContext<T = any>(tooltip: TooltipContextValue<T>) {
-    return _TooltipContext.set(tooltip) as TooltipContextValue<T>;
-  }
-
   type TooltipContextPropsWithoutHTML<T = any> = {
     /**
      * The tooltip interaction mode
@@ -136,9 +100,9 @@
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
-  import { getChartContext } from '../Chart.svelte';
-  import { getGeoContext } from '../GeoContext.svelte';
-  import Svg from './../layout/Svg.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import Svg from './../layers/Svg.svelte';
   import Arc from '../Arc.svelte';
   import ChartClipPath from './../ChartClipPath.svelte';
   import Voronoi from './../Voronoi.svelte';
@@ -523,11 +487,13 @@
                 const xVal = ctx.x(d);
                 const start = ctx.xInterval.floor(xVal);
                 const end = ctx.xInterval.offset(start);
+                const xStart = ctx.xScale(start);
+                const xEnd = ctx.xScale(end);
 
                 return {
-                  x: ctx.xScale(start),
+                  x: Math.min(xStart, xEnd),
                   y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
-                  width: ctx.xScale(end) - ctx.xScale(start),
+                  width: Math.abs(xEnd - xStart),
                   height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
                   data: d,
                 };
@@ -536,12 +502,14 @@
                 const yVal = ctx.y(d);
                 const start = ctx.yInterval.floor(yVal);
                 const end = ctx.yInterval.offset(start);
+                const yStart = ctx.yScale(start);
+                const yEnd = ctx.yScale(end);
 
                 return {
                   x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
-                  y: ctx.yScale(start),
+                  y: Math.min(yStart, yEnd),
                   width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
-                  height: ctx.yScale(end) - ctx.yScale(start),
+                  height: Math.abs(yEnd - yStart),
                   data: d,
                 };
               } else if (isScaleTime(ctx.xScale)) {

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -1,18 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
-type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
-export type TooltipContextValue<T = any> = {
-    x: number;
-    y: number;
-    data: T | null;
-    payload: TooltipPayload[];
-    show(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any, payload?: TooltipPayload): void;
-    hide(e?: PointerEvent): void;
-    mode: TooltipMode;
-    isHoveringTooltipArea: boolean;
-    isHoveringTooltipContent: boolean;
-};
-export declare function getTooltipContext<T = any>(): TooltipContextValue<T>;
+import { type TooltipContextValue } from '../../contexts/tooltip.js';
+export type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
 type TooltipContextPropsWithoutHTML<T = any> = {
     /**
      * The tooltip interaction mode
@@ -81,7 +70,6 @@ type TooltipContextPropsWithoutHTML<T = any> = {
 };
 export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipContextPropsWithoutHTML<T>>;
 import type { Snippet } from 'svelte';
-import { type TooltipPayload } from './tooltipMetaContext.js';
 declare function $$render<TData = any>(): {
     props: TooltipContextProps<TData>;
     exports: {};

package/dist/components/tooltip/tooltipMetaContext.d.ts

@@ -1,7 +1,7 @@
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import { type Accessor } from '../../utils/common.js';
 import type { SeriesData } from '../charts/index.js';
-import type { ChartContextValue } from '../Chart.svelte';
-import { type FormatType, type FormatConfig } from '@layerstack/utils';
+import type { ChartContextValue } from '../../contexts/chart.js';
 export type SimplifiedChartType = 'bar' | 'area' | 'line' | 'pie' | 'scatter';
 export type BarTooltipMetaContextValue = {
     type: 'bar';

package/dist/components/tooltip/tooltipMetaContext.js

@@ -1,9 +1,9 @@
 // Additional meta data that can be set by the various simplified chart components
 // to provide additional payload data to the tooltip for ease of composition.
+import { Context } from 'runed';
+import { format } from '@layerstack/utils';
 import { accessor, findRelatedData } from '../../utils/common.js';
 import { asAny } from '../../utils/types.js';
-import { format } from '@layerstack/utils';
-import { Context } from 'runed';
 function handleBarTooltipPayload({ ctx, data, metaCtx, }) {
     const seriesItems = metaCtx.stackSeries
         ? [...metaCtx.visibleSeries].reverse()

package/dist/contexts/canvas.d.ts

@@ -0,0 +1,33 @@
+import type { MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { ComputedStylesOptions } from '../utils/canvas.js';
+export type ComponentRender<T extends Element = Element> = {
+    name: string;
+    render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
+    retainState?: boolean;
+    events?: {
+        click?: MouseEventHandler<T> | null;
+        dblclick?: MouseEventHandler<T> | null;
+        pointerenter?: PointerEventHandler<T> | null;
+        pointerover?: PointerEventHandler<T> | null;
+        pointermove?: PointerEventHandler<T> | null;
+        pointerleave?: PointerEventHandler<T> | null;
+        pointerout?: PointerEventHandler<T> | null;
+        pointerdown?: PointerEventHandler<T> | null;
+        touchmove?: TouchEventHandler<T> | null;
+    };
+    /**
+     * Optional dependencies to track and invalidate the canvas context when they change.
+     */
+    deps?: () => any[];
+};
+export type CanvasContextValue = {
+    /**
+     * Register component to render.
+     *
+     * Returns method to unregister on component destroy
+     */
+    register<T extends Element>(component: ComponentRender<T>): () => void;
+    invalidate(): void;
+};
+export declare function getCanvasContext(): CanvasContextValue;
+export declare function setCanvasContext(context: CanvasContextValue): CanvasContextValue;

package/dist/contexts/canvas.js

@@ -0,0 +1,14 @@
+import { Context } from 'runed';
+const CanvasContext = new Context('CanvasContext');
+const defaultCanvasContext = {
+    register: (_) => {
+        return () => { };
+    },
+    invalidate: () => { },
+};
+export function getCanvasContext() {
+    return CanvasContext.getOr(defaultCanvasContext);
+}
+export function setCanvasContext(context) {
+    return CanvasContext.set(context);
+}

package/dist/contexts/chart.d.ts

@@ -0,0 +1,84 @@
+import type { TimeInterval } from 'd3-time';
+import type { AxisKey, DataType, Extents, Nice, Padding, PaddingArray, XRangeWithScale, YRangeWithScale } from '../utils/types.js';
+import { type AnyScale, type DomainType } from '../utils/scales.svelte.js';
+import type { GeoContextValue } from './geo.js';
+import type { TooltipContextValue } from './tooltip.js';
+import type { TransformContextValue } from './transform.js';
+import type { BrushContextValue } from '../components/BrushContext.svelte';
+import type { PreservedChartConfig } from '../components/Chart.svelte';
+export type ChartContextValue<T = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = {
+    activeGetters: Record<AxisKey, (d: T) => any>;
+    width: number;
+    height: number;
+    percentRange: boolean;
+    aspectRatio: number;
+    containerRef: HTMLElement | undefined;
+    containerWidth: number;
+    containerHeight: number;
+    config: PreservedChartConfig<T, XScale, YScale>;
+    x: (d: T) => any;
+    y: (d: T) => any;
+    z: (d: T) => any;
+    r: (d: T) => any;
+    x1: (d: T) => any;
+    y1: (d: T) => any;
+    c: (d: T) => any;
+    data: DataType<T>;
+    xNice: Nice;
+    yNice: Nice;
+    zNice: Nice;
+    rNice: Nice;
+    xDomainSort: boolean;
+    yDomainSort: boolean;
+    zDomainSort: boolean;
+    rDomainSort: boolean;
+    xReverse: boolean;
+    yReverse: boolean;
+    zReverse: boolean;
+    rReverse: boolean;
+    xPadding: PaddingArray;
+    yPadding: PaddingArray;
+    zPadding: PaddingArray;
+    rPadding: PaddingArray;
+    padding: Padding;
+    flatData: T[];
+    extents: Extents;
+    xDomain: number[];
+    yDomain: number[];
+    zDomain: DomainType;
+    rDomain: DomainType;
+    cDomain: DomainType;
+    x1Domain: DomainType;
+    y1Domain: DomainType;
+    xRange: any[];
+    yRange: any[];
+    zRange: any[];
+    rRange: any[];
+    cRange: readonly string[] | string[] | undefined;
+    x1Range: XRangeWithScale<XScale> | undefined;
+    y1Range: YRangeWithScale<YScale> | undefined;
+    meta: Record<string, any>;
+    xScale: AnyScale;
+    yScale: AnyScale;
+    zScale: AnyScale;
+    rScale: AnyScale;
+    cScale: AnyScale | null;
+    x1Scale: AnyScale | null;
+    y1Scale: AnyScale | null;
+    yGet: (d: T) => any;
+    xGet: (d: T) => any;
+    zGet: (d: T) => any;
+    rGet: (d: T) => any;
+    cGet: (d: T) => any;
+    x1Get: (d: T) => any;
+    y1Get: (d: T) => any;
+    xInterval: TimeInterval | null;
+    yInterval: TimeInterval | null;
+    radial: boolean;
+    tooltip: TooltipContextValue<T>;
+    geo: GeoContextValue;
+    brush: BrushContextValue;
+    transform: TransformContextValue;
+};
+export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartContextValue<T, XScale, YScale>;
+export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartContextValue<T, XScale, YScale>): ChartContextValue<T, XScale, YScale>;

package/dist/contexts/chart.js

@@ -0,0 +1,10 @@
+import { Context } from 'runed';
+import {} from '../utils/scales.svelte.js';
+const _ChartContext = new Context('ChartContext');
+export function getChartContext() {
+    return _ChartContext.getOr({});
+}
+export function setChartContext(context) {
+    // @ts-expect-error - shh
+    return _ChartContext.set(context);
+}

package/dist/contexts/geo.d.ts

@@ -0,0 +1,6 @@
+import { type GeoProjection } from 'd3-geo';
+export type GeoContextValue = {
+    projection: GeoProjection | undefined;
+};
+export declare function getGeoContext(): GeoContextValue;
+export declare function setGeoContext(geo: GeoContextValue): GeoContextValue;

package/dist/contexts/geo.js

@@ -0,0 +1,12 @@
+import { Context } from 'runed';
+import {} from 'd3-geo';
+/**
+ * Access or set the current GeoContext.
+ */
+const _GeoContext = new Context('GeoContext');
+export function getGeoContext() {
+    return _GeoContext.getOr({ projection: undefined });
+}
+export function setGeoContext(geo) {
+    return _GeoContext.set(geo);
+}

package/dist/contexts/index.d.ts

@@ -0,0 +1,6 @@
+export * from './chart.js';
+export * from './geo.js';
+export * from './layer.js';
+export * from './legendPayload.js';
+export * from './settings.js';
+export * from './tooltip.js';

package/dist/contexts/index.js

@@ -0,0 +1,6 @@
+export * from './chart.js';
+export * from './geo.js';
+export * from './layer.js';
+export * from './legendPayload.js';
+export * from './settings.js';
+export * from './tooltip.js';

package/dist/contexts/layer.d.ts

@@ -0,0 +1,3 @@
+export type LayerContext = 'svg' | 'canvas' | 'html';
+export declare function getLayerContext(): LayerContext;
+export declare function setLayerContext(context: LayerContext): LayerContext;

package/dist/contexts/layer.js

@@ -0,0 +1,8 @@
+import { Context } from 'runed';
+const _LayerContext = new Context('LayerContext');
+export function getLayerContext() {
+    return _LayerContext.get();
+}
+export function setLayerContext(context) {
+    return _LayerContext.set(context);
+}

package/dist/contexts/settings.d.ts

@@ -0,0 +1,4 @@
+import { Settings, type SettingsOptions } from '../states/settings.svelte.js';
+/** Get the current settings context, or default if not set */
+export declare function getSettings(): Settings;
+export declare function setSettings(settings: SettingsOptions): Settings;

package/dist/contexts/settings.js

@@ -0,0 +1,10 @@
+import { Context } from 'runed';
+import { Settings, defaultSettings } from '../states/settings.svelte.js';
+const _SettingsContext = new Context('Settings');
+/** Get the current settings context, or default if not set */
+export function getSettings() {
+    return _SettingsContext.getOr(defaultSettings);
+}
+export function setSettings(settings) {
+    return _SettingsContext.set(new Settings(settings));
+}

package/dist/contexts/tooltip.d.ts

@@ -0,0 +1,15 @@
+import type { TooltipPayload } from '../components/tooltip/tooltipMetaContext.js';
+import type { TooltipMode } from '../components/tooltip/TooltipContext.svelte';
+export type TooltipContextValue<T = any> = {
+    x: number;
+    y: number;
+    data: T | null;
+    payload: TooltipPayload[];
+    show(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any, payload?: TooltipPayload): void;
+    hide(e?: PointerEvent): void;
+    mode: TooltipMode;
+    isHoveringTooltipArea: boolean;
+    isHoveringTooltipContent: boolean;
+};
+export declare function getTooltipContext<T = any>(): TooltipContextValue<T>;
+export declare function setTooltipContext<T = any>(tooltip: TooltipContextValue<T>): TooltipContextValue<T>;

package/dist/contexts/tooltip.js

@@ -0,0 +1,8 @@
+import { Context } from 'runed';
+const _TooltipContext = new Context('TooltipContext');
+export function getTooltipContext() {
+    return _TooltipContext.get();
+}
+export function setTooltipContext(tooltip) {
+    return _TooltipContext.set(tooltip);
+}