layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/tooltip/TooltipList.svelte

@@ -1,13 +1,32 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
+  import { layerClass } from '../../utils/attributes.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref: refProp = $bindable(),
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLElement> & {
+    ref?: HTMLElement;
+  } = $props();
+
+  let ref = $state<HTMLElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
 </script>
 
 <div
+  bind:this={ref}
   class={cls(
-    'TooltipList',
+    layerClass('tooltip-list'),
     'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-center',
-    $$props.class
+    className
   )}
+  {...restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>

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

@@ -1,18 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    ref?: HTMLElement;
 };
-export type TooltipListProps = typeof __propDef.props;
-export type TooltipListEvents = typeof __propDef.events;
-export type TooltipListSlots = typeof __propDef.slots;
-export default class TooltipList extends SvelteComponentTyped<TooltipListProps, TooltipListEvents, TooltipListSlots> {
-}
-export {};
+declare const TooltipList: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipList = ReturnType<typeof TooltipList>;
+export default TooltipList;

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -1,5 +1,31 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
+  import { layerClass } from '../../utils/attributes.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref: refProp = $bindable(),
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLElement> & {
+    ref?: HTMLElement;
+  } = $props();
+
+  let ref = $state<HTMLElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 </script>
 
-<div class={cls('rounded-sm bg-surface-content/20 my-1 col-span-full h-px', $$props.class)}></div>
+<div
+  bind:this={ref}
+  class={cls(
+    layerClass('tooltip-separator'),
+    'rounded-sm bg-surface-content/20 my-1 col-span-full h-px',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -1,16 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    ref?: HTMLElement;
 };
-export type TooltipSeparatorProps = typeof __propDef.props;
-export type TooltipSeparatorEvents = typeof __propDef.events;
-export type TooltipSeparatorSlots = typeof __propDef.slots;
-export default class TooltipSeparator extends SvelteComponentTyped<TooltipSeparatorProps, TooltipSeparatorEvents, TooltipSeparatorSlots> {
-}
-export {};
+declare const TooltipSeparator: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipSeparator = ReturnType<typeof TooltipSeparator>;
+export default TooltipSeparator;

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

@@ -1,6 +1,12 @@
 export { default as Context } from './TooltipContext.svelte';
+export * from './TooltipContext.svelte';
 export { default as Header } from './TooltipHeader.svelte';
+export * from './TooltipHeader.svelte';
 export { default as Item } from './TooltipItem.svelte';
+export * from './TooltipItem.svelte';
 export { default as List } from './TooltipList.svelte';
+export * from './TooltipList.svelte';
 export { default as Separator } from './TooltipSeparator.svelte';
+export * from './TooltipSeparator.svelte';
 export { default as Root } from './Tooltip.svelte';
+export * from './Tooltip.svelte';

package/dist/components/tooltip/index.js

@@ -1,6 +1,12 @@
 export { default as Context } from './TooltipContext.svelte';
+export * from './TooltipContext.svelte';
 export { default as Header } from './TooltipHeader.svelte';
+export * from './TooltipHeader.svelte';
 export { default as Item } from './TooltipItem.svelte';
+export * from './TooltipItem.svelte';
 export { default as List } from './TooltipList.svelte';
+export * from './TooltipList.svelte';
 export { default as Separator } from './TooltipSeparator.svelte';
+export * from './TooltipSeparator.svelte';
 export { default as Root } from './Tooltip.svelte';
+export * from './Tooltip.svelte';

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

@@ -0,0 +1,79 @@
+import { type Accessor } from '../../utils/common.js';
+import type { SeriesData } from '../charts/index.js';
+import type { ChartContextValue } from '../Chart.svelte';
+import { type FormatType } from '@layerstack/utils';
+export type SimplifiedChartType = 'bar' | 'area' | 'line' | 'pie' | 'scatter';
+export type BarTooltipMetaContextValue = {
+    type: 'bar';
+    orientation: 'horizontal' | 'vertical';
+    stackSeries: boolean;
+    visibleSeries: SeriesData<any, any>[];
+};
+export type AreaTooltipMetaContextValue = {
+    type: 'area';
+    stackSeries: boolean;
+    visibleSeries: SeriesData<any, any>[];
+};
+export type LineTooltipMetaContextValue = {
+    type: 'line';
+    visibleSeries: SeriesData<any, any>[];
+};
+export type PieTooltipMetaContextValue = {
+    type: 'pie';
+    visibleSeries: SeriesData<any, any>[];
+    key: Accessor<any>;
+    label: Accessor<any>;
+    value: Accessor<any>;
+    color: Accessor<any>;
+};
+export type ArcTooltipMetaContextValue = {
+    type: 'arc';
+    visibleSeries: SeriesData<any, any>[];
+    key: Accessor<any>;
+    label: Accessor<any>;
+    value: Accessor<any>;
+    color: Accessor<any>;
+};
+export type ScatterTooltipMetaContextValue = {
+    type: 'scatter';
+    visibleSeries: SeriesData<any, any>[];
+};
+export type TooltipMetaContextValue = BarTooltipMetaContextValue | AreaTooltipMetaContextValue | LineTooltipMetaContextValue | PieTooltipMetaContextValue | ScatterTooltipMetaContextValue | ArcTooltipMetaContextValue;
+export type TooltipPayload = {
+    color?: string;
+    name?: string;
+    key: string;
+    label?: string;
+    value?: any;
+    keyAccessor?: Accessor<any>;
+    valueAccessor?: Accessor<any>;
+    labelAccessor?: Accessor<any>;
+    colorAccessor?: Accessor<any>;
+    chartType?: SimplifiedChartType;
+    payload: any;
+    rawSeriesData?: SeriesData<any, any>;
+    formatter?: FormatType;
+};
+type BasePayloadHandlerProps = {
+    ctx: ChartContextValue;
+    data: any;
+};
+export declare function handleScatterTooltipPayload({ ctx, data, metaCtx, }: BasePayloadHandlerProps & {
+    metaCtx: ScatterTooltipMetaContextValue;
+}): TooltipPayload[];
+/**
+ * Retrieves the current tooltip meta context value, or null if not set.
+ */
+export declare function getTooltipMetaContext(): TooltipMetaContextValue | null;
+/**
+ * Sets the tooltip meta context value, used to provide additional payload data to the tooltip.
+ * This is typically set by the various simplified chart components, such as BarChart, AreaChart,
+ * etc.
+ */
+export declare function setTooltipMetaContext(v: TooltipMetaContextValue | null): TooltipMetaContextValue | null;
+export declare function getTooltipPayload({ ctx, tooltipData, metaCtx, }: {
+    ctx: ChartContextValue;
+    tooltipData: any;
+    metaCtx: TooltipMetaContextValue | null;
+}): TooltipPayload[];
+export {};

package/dist/components/tooltip/tooltipMetaContext.js

@@ -0,0 +1,139 @@
+// 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 { 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()
+        : metaCtx.visibleSeries;
+    const payload = seriesItems.map((s) => {
+        const seriesTooltipData = s.data ? findRelatedData(s.data, data, ctx.x) : data;
+        const valueAccessor = accessor(s.value ?? (s.data ? ctx.y : s.key));
+        const label = metaCtx.orientation === 'vertical' ? ctx.x(data) : ctx.y(data);
+        const name = s.label ?? (s.key !== 'default' ? s.key : 'value');
+        const value = seriesTooltipData ? valueAccessor(seriesTooltipData) : undefined;
+        const color = s.color ?? ctx.cScale?.(ctx.c(data));
+        return {
+            ...s.data,
+            chartType: 'bar',
+            color,
+            label,
+            name,
+            value,
+            valueAccessor,
+            key: s.key,
+            payload: data,
+            rawSeriesData: s,
+            formatter: format,
+        };
+    });
+    return payload;
+}
+function handleAreaTooltipPayload({ ctx, data, metaCtx, }) {
+    const seriesItems = metaCtx.stackSeries
+        ? [...metaCtx.visibleSeries].reverse()
+        : metaCtx.visibleSeries;
+    const payload = seriesItems.map((s) => {
+        const seriesTooltipData = s.data ? findRelatedData(s.data, data, ctx.x) : data;
+        const valueAccessor = accessor(s.value ?? (s.data ? asAny(ctx.y) : s.key));
+        const label = ctx.x(data);
+        const name = s.label ?? (s.key !== 'default' ? s.key : 'value');
+        const value = seriesTooltipData ? valueAccessor(seriesTooltipData) : undefined;
+        const color = s.color ?? ctx.cScale?.(ctx.c(data));
+        return {
+            ...s.data,
+            chartType: 'area',
+            color,
+            label,
+            name,
+            value,
+            valueAccessor,
+            key: s.key,
+            payload: data,
+            rawSeriesData: s,
+            formatter: format,
+        };
+    });
+    return payload;
+}
+function handleLineTooltipPayload({ ctx, data, metaCtx, }) {
+    return metaCtx.visibleSeries.map((s) => {
+        const seriesTooltipData = s.data ? findRelatedData(s.data, data, ctx.x) : data;
+        const label = ctx.x(data);
+        const valueAccessor = accessor(s.value ?? (s.data ? asAny(ctx.y) : s.key));
+        const name = s.label ?? (s.key !== 'default' ? s.key : 'value');
+        const value = seriesTooltipData ? valueAccessor(seriesTooltipData) : undefined;
+        const color = s.color ?? ctx.cScale?.(ctx.c(data));
+        return {
+            ...s.data,
+            chartType: 'line',
+            color,
+            label,
+            name,
+            value,
+            valueAccessor,
+            key: s.key,
+            payload: data,
+            rawSeriesData: s,
+            formatter: format,
+        };
+    });
+}
+function handlePieOrArcTooltipPayload({ ctx, data, metaCtx, }) {
+    const keyAccessor = accessor(metaCtx.key);
+    const labelAccessor = accessor(metaCtx.label);
+    const valueAccessor = accessor(metaCtx.value);
+    const colorAccessor = accessor(metaCtx.color);
+    return [
+        {
+            key: keyAccessor(data),
+            label: labelAccessor(data) || keyAccessor(data),
+            value: valueAccessor(data),
+            color: colorAccessor(data) ?? ctx.cScale?.(ctx.c(data)),
+            payload: data,
+            chartType: 'pie',
+            labelAccessor,
+            keyAccessor,
+            valueAccessor,
+            colorAccessor,
+        },
+    ];
+}
+export function handleScatterTooltipPayload({ ctx, data, metaCtx, }) {
+    // TODO: implement scatter tooltip payload handling
+    return [{ payload: data, key: '' }];
+}
+const _TooltipMetaContext = new Context('TooltipMetaContext');
+/**
+ * Retrieves the current tooltip meta context value, or null if not set.
+ */
+export function getTooltipMetaContext() {
+    return _TooltipMetaContext.getOr(null);
+}
+/**
+ * Sets the tooltip meta context value, used to provide additional payload data to the tooltip.
+ * This is typically set by the various simplified chart components, such as BarChart, AreaChart,
+ * etc.
+ */
+export function setTooltipMetaContext(v) {
+    return _TooltipMetaContext.set(v);
+}
+export function getTooltipPayload({ ctx, tooltipData, metaCtx, }) {
+    if (!metaCtx)
+        return [{ payload: tooltipData, key: '' }];
+    switch (metaCtx.type) {
+        case 'bar':
+            return handleBarTooltipPayload({ ctx, data: tooltipData, metaCtx });
+        case 'area':
+            return handleAreaTooltipPayload({ ctx, data: tooltipData, metaCtx });
+        case 'line':
+            return handleLineTooltipPayload({ ctx, data: tooltipData, metaCtx });
+        case 'pie':
+        case 'arc':
+            return handlePieOrArcTooltipPayload({ ctx, data: tooltipData, metaCtx });
+        case 'scatter':
+            return handleScatterTooltipPayload({ ctx, data: tooltipData, metaCtx });
+    }
+}

package/dist/components/types.d.ts

@@ -0,0 +1 @@
+export type Placement = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';

package/dist/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/docs/Blockquote.svelte.d.ts

@@ -1,16 +1,20 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {
-        default: {};
-    };
-};
-export type BlockquoteProps = typeof __propDef.props;
-export type BlockquoteEvents = typeof __propDef.events;
-export type BlockquoteSlots = typeof __propDef.slots;
-export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Blockquote: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Blockquote = InstanceType<typeof Blockquote>;
+export default Blockquote;

package/dist/docs/Code.svelte.d.ts

@@ -1,25 +1,29 @@
-import { SvelteComponentTyped } from "svelte";
 import 'prism-svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        source?: string | null | undefined;
-        language?: string | undefined;
-        highlightedSource?: string | undefined;
-        classes?: {
-            root?: string;
-            pre?: string;
-            code?: string;
-        } | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CodeProps = typeof __propDef.props;
-export type CodeEvents = typeof __propDef.events;
-export type CodeSlots = typeof __propDef.slots;
-export default class Code extends SvelteComponentTyped<CodeProps, CodeEvents, CodeSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Code: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    source?: string | null | undefined;
+    language?: string | undefined;
+    highlightedSource?: string | undefined;
+    classes?: {
+        root?: string;
+        pre?: string;
+        code?: string;
+    } | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Code = InstanceType<typeof Code>;
+export default Code;

package/dist/docs/ConnectorSweepMenuField.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { MenuField } from 'svelte-ux';
+  import type { ConnectorSweep } from '../utils/connectorUtils.js';
+
+  let {
+    value = $bindable('horizontal-vertical'),
+  }: {
+    value?: ConnectorSweep;
+  } = $props();
+
+  const options = ['horizontal-vertical', 'vertical-horizontal', 'none'].map((type) => ({
+    label: type,
+    value: type,
+  }));
+</script>
+
+<MenuField label="Connector Sweep" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

package/dist/docs/ConnectorSweepMenuField.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ConnectorSweep } from '../utils/connectorUtils.js';
+type $$ComponentProps = {
+    value?: ConnectorSweep;
+};
+declare const ConnectorSweepMenuField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ConnectorSweepMenuField = ReturnType<typeof ConnectorSweepMenuField>;
+export default ConnectorSweepMenuField;

package/dist/docs/ConnectorTypeMenuField.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { MenuField } from 'svelte-ux';
+  import type { ConnectorType } from '../utils/connectorUtils.js';
+
+  let {
+    value = $bindable('rounded'),
+  }: {
+    value?: ConnectorType;
+  } = $props();
+
+  const options = ['straight', 'square', 'beveled', 'rounded', 'd3'].map((type) => ({
+    label: type,
+    value: type,
+  }));
+</script>
+
+<MenuField label="Connector Type" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

package/dist/docs/ConnectorTypeMenuField.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ConnectorType } from '../utils/connectorUtils.js';
+type $$ComponentProps = {
+    value?: ConnectorType;
+};
+declare const ConnectorTypeMenuField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ConnectorTypeMenuField = ReturnType<typeof ConnectorTypeMenuField>;
+export default ConnectorTypeMenuField;

package/dist/docs/CurveMenuField.svelte

@@ -3,9 +3,20 @@
 
   import { MenuField } from 'svelte-ux';
   import { entries } from '@layerstack/utils';
+  import type { ComponentProps } from 'svelte';
 
-  export let value: any | undefined = d3shapes['curveLinear'];
-  export let showOpenClosed = false;
+  let {
+    value = $bindable(),
+    showOpenClosed = false,
+    ...restProps
+  }: {
+    value?: any;
+    showOpenClosed?: boolean;
+  } & ComponentProps<MenuField> = $props();
+
+  if (value === undefined) {
+    value = d3shapes['curveLinear'];
+  }
 
   const options = entries(d3shapes)
     .filter(([key]) => {
@@ -29,5 +40,5 @@
   bind:value
   stepper
   classes={{ menuIcon: 'hidden' }}
-  {...$$restProps}
+  {...restProps}
 />

package/dist/docs/CurveMenuField.svelte.d.ts

@@ -1,18 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: any | undefined;
-        showOpenClosed?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CurveMenuFieldProps = typeof __propDef.props;
-export type CurveMenuFieldEvents = typeof __propDef.events;
-export type CurveMenuFieldSlots = typeof __propDef.slots;
-export default class CurveMenuField extends SvelteComponentTyped<CurveMenuFieldProps, CurveMenuFieldEvents, CurveMenuFieldSlots> {
-}
-export {};
+import { MenuField } from 'svelte-ux';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = {
+    value?: any;
+    showOpenClosed?: boolean;
+} & ComponentProps<MenuField>;
+declare const CurveMenuField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type CurveMenuField = ReturnType<typeof CurveMenuField>;
+export default CurveMenuField;