layerchart 2.0.0-next.46 → 2.0.0-next.48

package/dist/components/TransformControls.svelte

@@ -1,230 +0,0 @@
-<script lang="ts" module>
-  import type { HTMLAttributes } from 'svelte/elements';
-  import type { Placement } from './types.js';
-
-  type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
-
-  export type TransformControlsPropsWithoutHTML = {
-    /**
-     * @default 'top-right'
-     */
-    placement?: Placement;
-
-    /**
-     * @default 'vertical'
-     */
-    orientation?: 'horizontal' | 'vertical';
-
-    /**
-     * @default 'md'
-     */
-    size?: ComponentProps<Button>['size'];
-
-    /**
-     * @default ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode']
-     */
-    show?: Actions[];
-  };
-
-  export type TransformControlsProps = TransformControlsPropsWithoutHTML &
-    Without<HTMLAttributes<HTMLElement>, TransformControlsPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { type ComponentProps } from 'svelte';
-  import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
-
-  import LucideFocus from '~icons/lucide/focus';
-  import LucideChevronDown from '~icons/lucide/chevron-down';
-  import LucideCircleOff from '~icons/lucide/circle-off';
-  import LucideImageUpscale from '~icons/lucide/image-upscale';
-  import LucideMove from '~icons/lucide/move';
-  import LucideUndo2 from '~icons/lucide/undo-2';
-  import LucideZoomIn from '~icons/lucide/zoom-in';
-  import LucideZoomOut from '~icons/lucide/zoom-out';
-
-  import { getTransformContext } from '../contexts/transform.js';
-  import type { Without } from '../utils/types.js';
-
-  let {
-    placement = 'top-right',
-    orientation = 'vertical',
-    size = 'md',
-    show = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'],
-    class: className,
-  }: TransformControlsProps = $props();
-
-  const menuPlacementByOrientationAndPlacement = $derived({
-    horizontal: {
-      'top-left': 'bottom-end',
-      top: 'bottom-end',
-      'top-right': 'bottom-end',
-      left: 'bottom-end',
-      center: 'bottom-end',
-      right: 'bottom-end',
-      'bottom-left': 'top-end',
-      bottom: 'top-end',
-      'bottom-right': 'top-end',
-    },
-    vertical: {
-      'top-left': 'right-start',
-      top: 'right-start',
-      'top-right': 'left-start',
-      left: 'right-start',
-      center: 'right-start',
-      right: 'left-start',
-      'bottom-left': 'right-end',
-      bottom: 'right-end',
-      'bottom-right': 'left-end',
-    },
-  } as const);
-
-  const transform = getTransformContext();
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class={['lc-transform-controls', className]}
-  data-orientation={orientation}
-  data-placement={placement}
-  ondblclick={(e) => {
-    // Stop from propagating to TransformContext
-    e.stopPropagation();
-  }}
->
-  {#if show.includes('zoomIn')}
-    <Tooltip title="Zoom in">
-      <Button
-        icon={LucideZoomIn}
-        on:click={() => transform.zoomIn()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('zoomOut')}
-    <Tooltip title="Zoom out">
-      <Button
-        icon={LucideZoomOut}
-        on:click={() => transform.zoomOut()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('center')}
-    <Tooltip title="Center">
-      <Button
-        icon={LucideFocus}
-        on:click={() => transform.translateCenter()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('reset')}
-    <Tooltip title="Reset">
-      <Button
-        icon={LucideUndo2}
-        on:click={() => transform.reset()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('scrollMode')}
-    <Tooltip title="Scroll mode">
-      <MenuButton
-        iconOnly
-        options={[
-          { label: 'None', value: 'none', icon: LucideCircleOff },
-          { label: 'Zoom', value: 'scale', icon: LucideImageUpscale },
-          { label: 'Move', value: 'translate', icon: LucideMove },
-        ]}
-        menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
-        menuIcon={null}
-        {size}
-        value={transform.scrollMode}
-        on:change={(e) => transform.setScrollMode(e.detail.value)}
-        class="text-surface-content"
-      >
-        <svelte:fragment slot="selection" let:value>
-          <Icon data={value?.icon ?? LucideChevronDown} />
-        </svelte:fragment>
-      </MenuButton>
-    </Tooltip>
-  {/if}
-</div>
-
-<style>
-  @layer components {
-    :where(.lc-transform-controls) {
-      display: flex;
-      background: color-mix(
-        in oklab,
-        var(--color-surface-300, light-dark(white, black)) 50%,
-        transparent
-      );
-      border: 1px solid
-        color-mix(in oklab, var(--color-surface-content, currentColor) 20%, transparent);
-      border-radius: 9999px;
-      margin: 4px;
-      backdrop-filter: blur(8px);
-      z-index: 10;
-
-      &[data-orientation='vertical'] {
-        flex-direction: column;
-      }
-
-      &[data-placement] {
-        position: absolute;
-      }
-
-      &[data-placement='top-left'] {
-        top: 0;
-        left: 0;
-      }
-      &[data-placement='top'] {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      &[data-placement='top-right'] {
-        top: 0;
-        right: 0;
-      }
-      &[data-placement='left'] {
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-      }
-      &[data-placement='center'] {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-      &[data-placement='right'] {
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-      }
-      &[data-placement='bottom-left'] {
-        bottom: 0;
-        left: 0;
-      }
-      &[data-placement='bottom'] {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      &[data-placement='bottom-right'] {
-        bottom: 0;
-        right: 0;
-      }
-    }
-  }
-</style>

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

@@ -1,28 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { Placement } from './types.js';
-type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
-export type TransformControlsPropsWithoutHTML = {
-    /**
-     * @default 'top-right'
-     */
-    placement?: Placement;
-    /**
-     * @default 'vertical'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * @default 'md'
-     */
-    size?: ComponentProps<Button>['size'];
-    /**
-     * @default ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode']
-     */
-    show?: Actions[];
-};
-export type TransformControlsProps = TransformControlsPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TransformControlsPropsWithoutHTML>;
-import { type ComponentProps } from 'svelte';
-import { Button } from 'svelte-ux';
-import type { Without } from '../utils/types.js';
-declare const TransformControls: import("svelte").Component<TransformControlsProps, {}, "">;
-type TransformControls = ReturnType<typeof TransformControls>;
-export default TransformControls;

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

@@ -1,12 +0,0 @@
-import type { Component, ComponentProps } from 'svelte';
-import type Legend from '../Legend.svelte';
-import type { SeriesState } from '../../states/series.svelte.js';
-type CreateLegendPropsOptions<TData, TComponent extends Component> = {
-    seriesState: SeriesState<TData, TComponent>;
-    props: Partial<ComponentProps<typeof Legend>>;
-};
-/**
- * A prop builder for the legend component shared between the simplified charts.
- */
-export declare function createLegendProps<TData, TComponent extends Component>(opts: CreateLegendPropsOptions<TData, TComponent>): ComponentProps<typeof Legend>;
-export {};

package/dist/components/charts/utils.svelte.js

@@ -1,27 +0,0 @@
-import { scaleOrdinal } from 'd3-scale';
-import { cls } from '@layerstack/tailwind';
-import { resolveMaybeFn } from '../../utils/common.js';
-/**
- * A prop builder for the legend component shared between the simplified charts.
- */
-export function createLegendProps(opts) {
-    return {
-        scale: opts.seriesState.isDefaultSeries
-            ? undefined
-            : scaleOrdinal(opts.seriesState.series.map((s) => s.key), opts.seriesState.series.map((s) => s.color)),
-        tickFormat: (key) => opts.seriesState.series.find((s) => s.key === key)?.label ?? key,
-        placement: 'bottom',
-        variant: 'swatches',
-        selected: opts.seriesState.selectedKeys.current,
-        onclick: (_, item) => opts.seriesState.selectedKeys.toggle(item.value),
-        onpointerenter: (_, item) => (opts.seriesState.highlightKey.current = item.value),
-        onpointerleave: () => (opts.seriesState.highlightKey.current = null),
-        ...opts.props,
-        classes: {
-            item: (item) => {
-                return cls(resolveMaybeFn(opts.props?.classes?.item, item));
-            },
-            ...opts.props?.classes,
-        },
-    };
-}

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

@@ -1,79 +0,0 @@
-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 '../../contexts/chart.js';
-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 | FormatConfig;
-};
-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

@@ -1,139 +0,0 @@
-// 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';
-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/contexts/tooltip.d.ts

@@ -1,15 +0,0 @@
-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

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