layerchart 0.44.0 → 0.51.0

package/dist/components/charts/ScatterChart.svelte

@@ -0,0 +1,133 @@
+<script generics="TData">import {} from 'svelte';
+import { scaleLinear, scaleTime } from 'd3-scale';
+import { format } from '@layerstack/utils';
+import Axis from '../Axis.svelte';
+import Chart from '../Chart.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Points from '../Points.svelte';
+import Svg from '../layout/Svg.svelte';
+import * as Tooltip from '../tooltip/index.js';
+import { accessor, chartDataArray } from '../../utils/common.js';
+export let data = [];
+export let x = undefined;
+export let y = undefined;
+export let series = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
+export let axis = true;
+export let labels = false;
+// Default xScale based on first data's `x` value
+$: xScale = accessor(x)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear();
+export let props = {};
+let chartData = series
+    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+    .filter((d) => d);
+</script>
+
+<Chart
+  data={chartData}
+  {x}
+  {xScale}
+  {y}
+  yNice
+  padding={axis === false ? undefined : { left: 16, bottom: 16 }}
+  tooltip={{ mode: 'voronoi' }}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:yScale
+  let:r
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+  let:config
+>
+  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  {@const activeSeries = tooltip.data
+    ? (series.find((s) => s.key === tooltip.data.seriesKey) ?? series[0])
+    : null}
+
+  <slot {...slotProps}>
+    <Svg>
+      <slot name="axis" {...slotProps}>
+        {#if axis}
+          <Axis
+            placement="left"
+            grid
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.yAxis}
+          />
+          <Axis
+            placement="bottom"
+            grid
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.xAxis}
+          />
+        {/if}
+      </slot>
+
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s}
+          <Points
+            data={s.data}
+            stroke={s.color}
+            fill={s.color}
+            fill-opacity={0.3}
+            {...props.points}
+            {...s.props}
+          />
+        {/each}
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+
+      <slot name="highlight" {...slotProps}>
+        <Highlight points={{ fill: activeSeries?.color }} lines axis="both" {...props.highlight} />
+      </slot>
+
+      {#if labels}
+        <Labels
+          format={(value) => format(value)}
+          {...props.highlight}
+          {...typeof labels === 'object' ? labels : null}
+        />
+      {/if}
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        {#if activeSeries?.key !== 'default'}
+          <Tooltip.Header color={activeSeries?.color}>
+            {activeSeries?.label ?? activeSeries?.key}
+          </Tooltip.Header>
+        {/if}
+        <Tooltip.List>
+          <Tooltip.Item
+            label={typeof config.x === 'string' ? config.x : 'x'}
+            value={x(data)}
+            {format}
+          />
+          <Tooltip.Item
+            label={typeof config.y === 'string' ? config.y : 'y'}
+            value={y(data)}
+            {format}
+          />
+          {#if config.r}
+            <Tooltip.Item
+              label={typeof config.r === 'string' ? config.r : 'r'}
+              value={r(data)}
+              {format}
+            />
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>

package/dist/components/charts/ScatterChart.svelte.d.ts

@@ -0,0 +1,236 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import Axis from '../Axis.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Points from '../Points.svelte';
+import { type Accessor } from '../../utils/common.js';
+declare class __sveltets_Render<TData> {
+    props(): {
+        ssr?: boolean;
+        pointerEvents?: boolean;
+        position?: string;
+        percentRange?: boolean;
+        width?: number;
+        height?: number;
+        containerWidth?: number;
+        containerHeight?: number;
+        element?: HTMLDivElement;
+        data?: import("d3-sankey").SankeyGraph<any, any> | import("d3-hierarchy").HierarchyNode<TData> | TData[] | undefined;
+        flatData?: any[];
+        x?: Accessor<TData>;
+        y?: Accessor<TData>;
+        z?: Accessor<TData>;
+        r?: Accessor<TData>;
+        x1?: Accessor<TData>;
+        y1?: Accessor<TData>;
+        c?: Accessor<TData>;
+        xDomain?: import("../../utils/scales").DomainType;
+        yDomain?: import("../../utils/scales").DomainType;
+        zDomain?: import("../../utils/scales").DomainType;
+        rDomain?: import("../../utils/scales").DomainType;
+        x1Domain?: import("../../utils/scales").DomainType;
+        y1Domain?: import("../../utils/scales").DomainType;
+        cDomain?: import("../../utils/scales").DomainType;
+        xNice?: boolean | number;
+        yNice?: boolean | number;
+        zNice?: boolean | number;
+        rNice?: boolean | number;
+        xPadding?: [number, number];
+        yPadding?: [number, number];
+        zPadding?: [number, number];
+        rPadding?: [number, number];
+        xScale?: import("../../utils/scales").AnyScale;
+        yScale?: import("../../utils/scales").AnyScale;
+        zScale?: import("../../utils/scales").AnyScale;
+        rScale?: import("../../utils/scales").AnyScale;
+        x1Scale?: import("../../utils/scales").AnyScale;
+        y1Scale?: import("../../utils/scales").AnyScale;
+        cScale?: import("../../utils/scales").AnyScale;
+        xRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        yRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        zRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        rRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        x1Range?: string[] | number[] | ((args: {
+            xScale: import("../../utils/scales").AnyScale;
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        y1Range?: string[] | number[] | ((args: {
+            yScale: import("../../utils/scales").AnyScale;
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        cRange?: string[];
+        xReverse?: boolean;
+        yReverse?: boolean;
+        zReverse?: boolean;
+        rReverse?: boolean;
+        xDomainSort?: boolean;
+        yDomainSort?: boolean;
+        zDomainSort?: boolean;
+        rDomainSort?: boolean;
+        padding?: {
+            top?: Number;
+            right?: Number;
+            bottom?: Number;
+            left?: Number;
+        } | undefined;
+        extents?: {
+            x?: [min: Number, max: Number];
+            y?: [min: Number, max: Number];
+            r?: [min: Number, max: Number];
+            z?: [min: Number, max: Number];
+        } | undefined;
+        custom?: Record<string, any>;
+        debug?: boolean;
+        verbose?: boolean;
+        xBaseline?: number | null;
+        yBaseline?: number | null;
+        radial?: boolean;
+        geo?: Partial<{
+            projection?: (() => import("d3-geo").GeoProjection) | undefined;
+            fitGeojson?: import("d3-geo").GeoPermissibleObjects | undefined;
+            fixedAspectRatio?: number | undefined;
+            clipAngle?: number | undefined;
+            clipExtent?: [[number, number], [number, number]] | undefined;
+            rotate?: {
+                yaw: number;
+                pitch: number;
+                roll: number;
+            } | undefined;
+            scale?: number | undefined;
+            translate?: [number, number] | undefined;
+            center?: [number, number] | undefined;
+            applyTransform?: ("scale" | "translate" | "rotate")[];
+            reflectX?: boolean | undefined;
+            reflectY?: boolean | undefined;
+            geo?: import("svelte/store").Writable<import("d3-geo").GeoProjection>;
+        }> | undefined;
+        tooltip?: boolean | Partial<{
+            mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
+            findTooltipData?: "closest" | "left" | "right";
+            raiseTarget?: boolean;
+            radius?: number;
+            debug?: boolean;
+            onClick?: ({ data }: {
+                data: any;
+            }) => any;
+        }> | undefined;
+        transform?: Partial<{
+            mode?: "canvas" | "manual" | "none";
+            translateOnScale?: boolean;
+            spring?: boolean | Parameters<typeof import("../../stores/motionStore").motionStore>[1]["spring"];
+            tweened?: boolean | Parameters<typeof import("../../stores/motionStore").motionStore>[1]["tweened"];
+            processTranslate?: (x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
+                x: number;
+                y: number;
+            };
+            disablePointer?: boolean;
+            initialScrollMode?: "none" | "scale" | "translate";
+            clickDistance?: number;
+            initialTranslate?: {
+                x: number;
+                y: number;
+            } | undefined;
+            translate?: import("svelte/motion").Spring<{
+                x: number;
+                y: number;
+            }> | import("svelte/motion").Tweened<{
+                x: number;
+                y: number;
+            }> | import("svelte/store").Writable<{
+                x: number;
+                y: number;
+            }>;
+            initialScale?: number | undefined;
+            scale?: import("svelte/store").Writable<number> | import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number>;
+            setScrollMode?: (mode: "none" | "scale" | "translate") => void;
+            reset?: () => void;
+            zoomIn?: () => void;
+            zoomOut?: () => void;
+            translateCenter?: () => void;
+            zoomTo?: (center: {
+                x: number;
+                y: number;
+            }, rect?: {
+                width: number;
+                height: number;
+            }) => void;
+            setTranslate?: (point: {
+                x: number;
+                y: number;
+            }, options?: import("../../stores/motionStore").MotionOptions) => void;
+            setScale?: (value: number, options?: import("../../stores/motionStore").MotionOptions) => void;
+        }> | undefined;
+        transformContext?: import("..").TransformContext;
+    } & {
+        series?: {
+            key: string;
+            label?: string;
+            data: TData[];
+            color?: string;
+            props?: Partial<ComponentProps<Points>>;
+        }[] | undefined;
+        labels?: boolean | {
+            [x: string]: any;
+            placement?: ("inside" | "outside" | "center") | undefined;
+            offset?: number | undefined;
+            format?: import("@layerstack/utils").FormatType | undefined;
+        };
+        axis?: boolean | {
+            placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
+            label?: string;
+            labelPlacement?: "start" | "middle" | "end";
+            labelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
+            rule?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
+            grid?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
+            ticks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            tickLength?: number;
+            format?: import("@layerstack/utils").FormatType | undefined;
+            tickLabelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
+            spring?: boolean | Parameters<typeof import("svelte/motion").spring>[1];
+            tweened?: boolean | Parameters<typeof import("svelte/motion").tweened>[1];
+            transitionIn?: typeof import("svelte/transition").fade | (() => {});
+            transitionInParams?: import("svelte-ux").TransitionParams;
+            scale?: any;
+        };
+        props?: {
+            xAxis?: Partial<ComponentProps<Axis>>;
+            yAxis?: Partial<ComponentProps<Axis>>;
+            points?: Partial<ComponentProps<Points>>;
+            highlight?: Partial<ComponentProps<Highlight>>;
+            labels?: Partial<ComponentProps<Labels>>;
+        } | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: any;
+        axis: any;
+        'below-marks': any;
+        marks: any;
+        'above-marks': any;
+        highlight: any;
+        tooltip: any;
+    };
+}
+export type ScatterChartProps<TData> = ReturnType<__sveltets_Render<TData>['props']>;
+export type ScatterChartEvents<TData> = ReturnType<__sveltets_Render<TData>['events']>;
+export type ScatterChartSlots<TData> = ReturnType<__sveltets_Render<TData>['slots']>;
+export default class ScatterChart<TData> extends SvelteComponentTyped<ScatterChartProps<TData>, ScatterChartEvents<TData>, ScatterChartSlots<TData>> {
+}
+export {};

package/dist/components/charts/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AreaChart } from './AreaChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as PieChart } from './PieChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';

package/dist/components/charts/index.js

@@ -0,0 +1,5 @@
+export { default as AreaChart } from './AreaChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as PieChart } from './PieChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 export { Html, WebGL } from 'layercake';
+export * from './charts/index.js';
 export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
-export { default as AreaStack } from './AreaStack.svelte';
 export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
@@ -53,12 +53,8 @@ export { default as Svg } from './layout/Svg.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
-export { default as Tooltip } from './Tooltip.svelte';
-export { default as TooltipContext } from './TooltipContext.svelte';
-export { default as TooltipItem } from './TooltipItem.svelte';
-export { default as TooltipSeparator } from './TooltipSeparator.svelte';
+export * as Tooltip from './tooltip/index.js';
 export { default as TransformContext, transformContext } from './TransformContext.svelte';
-export { default as TransformControls } from './TransformControls.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';

package/dist/components/index.js

@@ -1,8 +1,8 @@
 // Re-export for easy access (Svg and Canvas are provided by LayerChart)
 export { Html, WebGL } from 'layercake';
+export * from './charts/index.js';
 export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
-export { default as AreaStack } from './AreaStack.svelte';
 export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
@@ -54,12 +54,9 @@ export { default as Svg } from './layout/Svg.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
-export { default as Tooltip } from './Tooltip.svelte';
-export { default as TooltipContext } from './TooltipContext.svelte';
-export { default as TooltipItem } from './TooltipItem.svelte';
-export { default as TooltipSeparator } from './TooltipSeparator.svelte';
+export * as Tooltip from './tooltip/index.js';
 export { default as TransformContext, transformContext } from './TransformContext.svelte';
-export { default as TransformControls } from './TransformControls.svelte';
+// export { default as TransformControls } from './TransformControls.svelte'; // TODO: Restore once no longer using `svelet-ux` or `@mdi/js` (as they are dev dependencies)
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';

package/dist/components/layout/Canvas.svelte

@@ -1,7 +1,7 @@
 <script>import { onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { scaleCanvas } from 'layercake';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from '../ChartContext.svelte';
 import { transformContext } from '../TransformContext.svelte';
 const { width, height, containerWidth, containerHeight, padding } = chartContext();

package/dist/components/layout/Html.svelte

@@ -1,4 +1,4 @@
-<script>import { cls } from 'svelte-ux';
+<script>import { cls } from '@layerstack/tailwind';
 import { chartContext } from '../ChartContext.svelte';
 /** The layer's outermost `<div>` tag. Useful for bindings. */
 export let element = undefined;

package/dist/components/layout/Svg.svelte

@@ -1,4 +1,4 @@
-<script>import { cls } from 'svelte-ux';
+<script>import { cls } from '@layerstack/tailwind';
 import { chartContext } from '../ChartContext.svelte';
 import { transformContext } from '../TransformContext.svelte';
 /** The layer's `<svg>` tag. Useful for bindings. */
@@ -19,9 +19,15 @@ export let labelledBy = undefined;
 export let describedBy = undefined;
 /** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
 export let title = undefined;
+/**
+ * Translate children to center, useful for radial layouts
+ */
+export let center = false;
 const { containerWidth, containerHeight, width, height, padding } = chartContext();
 const { mode, scale, translate } = transformContext();
-let transform = '';
+$: transform = center
+    ? `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`
+    : '';
 $: if (mode === 'canvas') {
     const center = { x: $width / 2, y: $height / 2 };
     const newTranslate = {
@@ -65,8 +71,12 @@ $: if (mode === 'canvas') {
     class="layercake-layout-svg_g"
     transform="translate({$padding.left}, {$padding.top})"
   >
-    <g {transform}>
+    {#if transform}
+      <g {transform}>
+        <slot {element}></slot>
+      </g>
+    {:else}
       <slot {element}></slot>
-    </g>
+    {/if}
   </g>
 </svg>

package/dist/components/layout/Svg.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         labelledBy?: string | undefined;
         describedBy?: string | undefined;
         title?: string | undefined;
+        center?: (boolean | "x" | "y") | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/{Tooltip.svelte → tooltip/Tooltip.svelte}

@@ -1,8 +1,8 @@
 <script>import { fade } from 'svelte/transition';
-import { cls } from 'svelte-ux';
-import { chartContext } from './ChartContext.svelte';
+import { cls } from '@layerstack/tailwind';
+import { chartContext } from './../ChartContext.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
-import { motionStore } from '../stores/motionStore.js';
+import { motionStore } from '../../stores/motionStore.js';
 /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
 export let x = 'pointer';
 /** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
@@ -16,7 +16,6 @@ export let contained = 'container'; // TODO: Support 'window' using getBoundingC
 export let variant = 'default';
 /** Set to `false` to disable spring transitions */
 export let motion = true;
-export let header = undefined;
 export let classes = {};
 const { padding, xGet, yGet, containerWidth, containerHeight } = chartContext();
 const tooltip = tooltipContext();
@@ -109,11 +108,7 @@ $: if ($tooltip?.data) {
   >
     <div
       class={cls(
-        variant !== 'none' && [
-          'px-2 py-1 h-full rounded elevation-1',
-          '[&_.label]:text-xs [&_.label]:text-right [&_.label]:whitespace-nowrap',
-          ['[&_.value]:text-sm [&_.value]:tabular-nums'],
-        ],
+        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded elevation-1'],
         {
           default: [
             'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
@@ -129,26 +124,8 @@ $: if ($tooltip?.data) {
         $$props.class
       )}
     >
-      {#if header || $$slots.header}
-        <div
-          class={cls(
-            variant !== 'none' && 'text-center font-semibold whitespace-nowrap',
-            classes.header
-          )}
-        >
-          <slot name="header" data={$tooltip.data}>
-            {header?.($tooltip.data)}
-          </slot>
-        </div>
-      {/if}
-
       {#if $$slots.default}
-        <div
-          class={cls(
-            variant !== 'none' && 'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1',
-            classes.content
-          )}
-        >
+        <div class={cls(classes.content)}>
           <slot data={$tooltip.data} />
         </div>
       {/if}

package/dist/components/{Tooltip.svelte.d.ts → tooltip/Tooltip.svelte.d.ts}

@@ -6,11 +6,10 @@ declare const __propDef: {
         y?: "pointer" | "data" | number | undefined;
         xOffset?: number | undefined;
         yOffset?: number | undefined;
-        anchor?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        anchor?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: ("container" | false) | undefined;
         variant?: ("default" | "invert" | "none") | undefined;
         motion?: boolean | undefined;
-        header?: ((data: any) => any) | undefined;
         classes?: {
             root?: string;
             container?: string;
@@ -22,9 +21,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        header: {
-            data: any;
-        };
         default: {
             data: any;
         };

package/dist/components/{TooltipContext.svelte → tooltip/TooltipContext.svelte}

@@ -19,15 +19,17 @@ function setTooltipContext(tooltip) {
 import { writable } from 'svelte/store';
 import { bisector, max, min } from 'd3-array';
 import { quadtree as d3Quadtree } from 'd3-quadtree';
-import { cls, sortFunc } from 'svelte-ux';
-import { Svg } from './Chart.svelte';
-import { chartContext } from './ChartContext.svelte';
-import ChartClipPath from './ChartClipPath.svelte';
-import Voronoi from './Voronoi.svelte';
-import { localPoint } from '../utils/event.js';
-import { isScaleBand, scaleInvert } from '../utils/scales.js';
-import { quadtreeRects } from '../utils/quadtree.js';
-const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, containerWidth, containerHeight, padding, } = chartContext();
+import { sortFunc } from '@layerstack/utils';
+import { cls } from '@layerstack/tailwind';
+import Svg from './../layout/Svg.svelte';
+import { chartContext } from './../ChartContext.svelte';
+import ChartClipPath from './../ChartClipPath.svelte';
+import Voronoi from './../Voronoi.svelte';
+import { localPoint } from '../../utils/event.js';
+import { isScaleBand, scaleInvert } from '../../utils/scales.js';
+import { cartesianToPolar } from '../../utils/math.js';
+import { quadtreeRects } from '../../utils/quadtree.js';
+const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, containerWidth, containerHeight, padding, radial, } = chartContext();
 /*
       TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
       - scaleTime / scaleLinear: bisect
@@ -137,8 +139,15 @@ function showTooltip(e, tooltipData) {
     if (tooltipData == null) {
         switch (mode) {
             case 'bisect-x': {
-                // `x` value at pointer coordinate
-                const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
+                let xValueAtPoint;
+                if ($radial) {
+                    // Assume radial is always centered
+                    const { radians } = cartesianToPolar(localX - $width / 2, localY - $height / 2);
+                    xValueAtPoint = scaleInvert($xScale, radians);
+                }
+                else {
+                    xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
+                }
                 const index = bisectX($flatData, xValueAtPoint, 1);
                 const previousValue = $flatData[index - 1];
                 const currentValue = $flatData[index];
@@ -330,7 +339,6 @@ $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].incl
       <Svg>
         <Voronoi
           on:pointerenter={(e) => {
-            // @ts-expect-error
             showTooltip(e.detail.event, e.detail.data);
           }}
           on:pointermove={(e) => {

package/dist/components/tooltip/TooltipHeader.svelte

@@ -0,0 +1,21 @@
+<script>import { cls } from '@layerstack/tailwind';
+export let color = undefined;
+export let classes = {};
+</script>
+
+<div
+  class={cls(
+    'TooltipHeader',
+    'font-semibold whitespace-nowrap border-b mb-1 pb-1 flex items-center gap-2',
+    classes.root,
+    $$props.class
+  )}
+>
+  {#if color}
+    <div
+      class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+      style:--color={color}
+    ></div>
+  {/if}
+  <slot />
+</div>