layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/GeoPoint.svelte

@@ -1,74 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import Circle, { type CircleProps, type CirclePropsWithoutHTML } from './Circle.svelte';
-  import type { Without } from '../utils/types.js';
-
-  export type GeoPointPropsWithoutHTML = {
-    /**
-     * Latitude of the point.
-     */
-    lat: number;
-
-    /**
-     * Longitude of the point.
-     */
-    long: number;
-
-    /**
-     * A bindable reference to the underlying element, which
-     * can be a `<circle>` or `<g>` element.
-     */
-    ref?: Element;
-
-    children?: Snippet<[{ x: number; y: number }]>;
-  };
-
-  export type GeoPointProps = Omit<
-    GeoPointPropsWithoutHTML & Without<CircleProps, GeoPointPropsWithoutHTML>,
-    'x' | 'y'
-  >;
-</script>
-
-<script lang="ts">
-  import Group from './Group.svelte';
-  import { getRenderContext } from './Chart.svelte';
-  import { getGeoContext } from './GeoContext.svelte';
-  import { extractLayerProps } from '../utils/attributes.js';
-
-  let { lat, long, ref: refProp = $bindable(), children, ...restProps }: GeoPointProps = $props();
-
-  let ref = $state<Element>();
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  const geoCtx = getGeoContext();
-
-  const points = $derived(geoCtx.projection?.([long, lat]) ?? [0, 0]);
-  const x = $derived(points[0]);
-  const y = $derived(points[1]);
-
-  const renderContext = getRenderContext();
-</script>
-
-{#if renderContext === 'svg'}
-  {#if children}
-    <Group {x} {y} {...extractLayerProps(restProps, 'geo-point-group')}>
-      {@render children({ x, y })}
-    </Group>
-  {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
-  {/if}
-{/if}
-
-{#if renderContext === 'canvas'}
-  {#if children}
-    <!-- TODO: Handle Canvas translation. Consolidate with svg use case above -->
-    <!-- <Group {x} {y} {...$$restProps}> -->
-    {@render children({ x, y })}
-    <!-- </Group> -->
-  {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
-  {/if}
-{/if}

package/dist/components/GeoSpline.svelte

@@ -1,85 +0,0 @@
-<script lang="ts" module>
-  import Spline, { type SplineProps } from './Spline.svelte';
-  import { curveNatural, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-  import type { Without } from '../utils/types.js';
-
-  export type GeoSplinePropsWithoutHTML = {
-    /**
-     * Link between two points on the globe.
-     */
-    link: { source: [number, number]; target: [number, number] };
-
-    /**
-     * The amount of loft to apply to the middle of the curve.
-     *
-     * @default 1.0
-     */
-    loft?: number;
-
-    /**
-     * Curve of spline drawn. Imported via d3-shape.
-     *
-     * @example
-     * import { curveNatural } from 'd3-shape';
-     * <GeoSpline curve={curveNatural} />
-     *
-     * @default curveNatural
-     */
-    curve?: CurveFactory | CurveFactoryLineOnly;
-  };
-
-  export type GeoSplineProps = GeoSplinePropsWithoutHTML &
-    Without<SplineProps, GeoSplinePropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { geoOrthographic, geoInterpolate } from 'd3-geo';
-
-  import { getGeoContext } from './GeoContext.svelte';
-  import { extractLayerProps } from '../utils/attributes.js';
-
-  let {
-    link,
-    loft = 1.0,
-    curve = curveNatural,
-    splineRef: splineRefProp = $bindable(),
-    ...restProps
-  }: GeoSplineProps = $props();
-
-  let splineRef = $state<SVGPathElement>();
-  $effect.pre(() => {
-    splineRefProp = splineRef;
-  });
-
-  const geoCtx = getGeoContext();
-
-  const loftedProjection = $derived(
-    geoCtx.projection
-      ? geoOrthographic()
-          .translate(geoCtx.projection.translate())
-          .rotate(geoCtx.projection.rotate())
-          .scale(geoCtx.projection.scale() * loft)
-      : undefined
-  );
-
-  const source = $derived(geoCtx.projection ? geoCtx.projection(link.source) : [0, 0]) as [
-    number,
-    number,
-  ];
-  const target = $derived(geoCtx.projection ? geoCtx.projection(link.target) : [0, 0]) as [
-    number,
-    number,
-  ];
-  const middle = $derived(
-    geoCtx.projection ? loftedProjection!(geoInterpolate(link.source, link.target)(0.5)) : [0, 0]
-  ) as [number, number];
-</script>
-
-<Spline
-  bind:splineRef
-  data={[source, middle, target]}
-  x={(d) => d[0]}
-  y={(d) => d[1]}
-  {curve}
-  {...extractLayerProps(restProps, 'geo-spline')}
-/>

package/dist/components/TransformControls.svelte

@@ -1,179 +0,0 @@
-<script lang="ts" module>
-  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 { cls } from '@layerstack/tailwind';
-
-  // TODO: maybe we include the icons as I think importing them like this
-  // will bog down the dev server
-  import {
-    mdiArrowULeftTop,
-    mdiMagnifyPlusOutline,
-    mdiMagnifyMinusOutline,
-    mdiImageFilterCenterFocus,
-    mdiChevronDown,
-    mdiResize,
-    mdiArrowExpandAll,
-    mdiCancel,
-  } from '@mdi/js';
-
-  import { getTransformContext } from './TransformContext.svelte';
-  import type { Without } from '../utils/types.js';
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  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={cls(
-    'bg-surface-300/50 border rounded-full m-1 backdrop-blur-sm z-10 flex',
-    orientation === 'vertical' && 'flex-col',
-    {
-      'top-left': 'absolute top-0 left-0',
-      top: 'absolute top-0 left-1/2 -translate-x-1/2',
-      'top-right': 'absolute top-0 right-0',
-      left: 'absolute top-1/2 left-0 -translate-y-1/2',
-      center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
-      right: 'absolute top-1/2 right-0 -translate-y-1/2',
-      'bottom-left': 'absolute bottom-0 left-0',
-      bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-      'bottom-right': 'absolute bottom-0 right-0',
-    }[placement],
-    className
-  )}
-  ondblclick={(e) => {
-    // Stop from propagating to TransformContext
-    e.stopPropagation();
-  }}
->
-  {#if show.includes('zoomIn')}
-    <Tooltip title="Zoom in">
-      <Button
-        icon={mdiMagnifyPlusOutline}
-        on:click={() => transform.zoomIn()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('zoomOut')}
-    <Tooltip title="Zoom out">
-      <Button
-        icon={mdiMagnifyMinusOutline}
-        on:click={() => transform.zoomOut()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('center')}
-    <Tooltip title="Center">
-      <Button
-        icon={mdiImageFilterCenterFocus}
-        on:click={() => transform.translateCenter()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('reset')}
-    <Tooltip title="Reset">
-      <Button
-        icon={mdiArrowULeftTop}
-        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: mdiCancel },
-          { label: 'Zoom', value: 'scale', icon: mdiResize },
-          { label: 'Move', value: 'translate', icon: mdiArrowExpandAll },
-        ]}
-        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 ?? mdiChevronDown} />
-        </svelte:fragment>
-      </MenuButton>
-    </Tooltip>
-  {/if}
-</div>

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

@@ -1,28 +0,0 @@
-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';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const TransformControls: import("svelte").Component<TransformControlsProps, {}, "">;
-type TransformControls = ReturnType<typeof TransformControls>;
-export default TransformControls;

package/dist/components/Treemap.svelte

@@ -1,165 +0,0 @@
-<script lang="ts" module>
-  export type TreemapProps<T> = {
-    /**
-     * The tile function to use for the treemap layout.
-     *
-     * @default treemapSquarify
-     */
-    tile?:
-      | typeof treemapSquarify
-      | 'binary'
-      | 'squarify'
-      | 'resquarify'
-      | 'dice'
-      | 'slice'
-      | 'sliceDice';
-    /**
-     * The padding between nodes.
-     *
-     * @default 0
-     */
-    padding?: number;
-
-    /**
-     * The inner padding between nodes.
-     *
-     * @default 0
-     */
-    paddingInner?: number;
-
-    /**
-     * The outer padding between nodes.
-     *
-     * @default 0
-     */
-    paddingOuter?: number;
-
-    /**
-     * The top padding between nodes.
-     *
-     * @default 0
-     */
-    paddingTop?: number;
-
-    /**
-     * The bottom padding between nodes.
-     *
-     * @default 0
-     */
-    paddingBottom?: number;
-    /**
-     * The left padding between nodes.
-     *
-     */
-    paddingLeft?: number;
-
-    /**
-     * The right padding between nodes.
-     *
-     */
-    paddingRight?: number;
-
-    /**
-     * The selected node.
-     *
-     * @default null
-     */
-    selected?: HierarchyRectangularNode<T> | null;
-
-    hierarchy?: HierarchyNode<T>;
-
-    children?: Snippet<[{ nodes: HierarchyRectangularNode<T>[] }]>;
-  };
-</script>
-
-<script lang="ts" generics="T">
-  import {
-    treemap as d3treemap,
-    treemapBinary,
-    treemapDice,
-    treemapResquarify,
-    treemapSlice,
-    treemapSliceDice,
-    treemapSquarify,
-    type HierarchyNode,
-    type HierarchyRectangularNode,
-  } from 'd3-hierarchy';
-
-  import { aspectTile } from '../utils/treemap.js';
-  import { getChartContext } from './Chart.svelte';
-  import type { Snippet } from 'svelte';
-
-  let {
-    hierarchy,
-    tile = treemapSquarify,
-    padding = 0,
-    paddingInner = 0,
-    paddingOuter = 0,
-    paddingTop = 0,
-    paddingBottom = 0,
-    paddingLeft,
-    paddingRight,
-    selected = $bindable(null),
-    children,
-  }: TreemapProps<T> = $props();
-
-  const ctx = getChartContext();
-
-  const tileFunc = $derived(
-    tile === 'squarify'
-      ? treemapSquarify
-      : tile === 'resquarify'
-        ? treemapResquarify
-        : tile === 'binary'
-          ? treemapBinary
-          : tile === 'dice'
-            ? treemapDice
-            : tile === 'slice'
-              ? treemapSlice
-              : tile === 'sliceDice'
-                ? treemapSliceDice
-                : tile
-  );
-
-  const treemap = $derived.by(() => {
-    const _treemap = d3treemap<T>()
-      .size([ctx.width, ctx.height])
-      .tile(aspectTile(tileFunc, ctx.width, ctx.height));
-
-    if (padding) {
-      _treemap.padding(padding);
-    }
-
-    if (paddingInner) {
-      _treemap.paddingInner(paddingInner);
-    }
-
-    if (paddingOuter) {
-      _treemap.paddingOuter(paddingOuter);
-    }
-
-    if (paddingTop) {
-      _treemap.paddingTop(paddingTop);
-    }
-
-    if (paddingBottom) {
-      _treemap.paddingBottom(paddingBottom);
-    }
-
-    if (paddingLeft) {
-      _treemap.paddingLeft(paddingLeft);
-    }
-    if (paddingRight) {
-      _treemap.paddingRight(paddingRight);
-    }
-    return _treemap;
-  });
-
-  const treemapData = $derived(hierarchy ? treemap(hierarchy) : null);
-
-  $effect.pre(() => {
-    selected = treemapData;
-  });
-</script>
-
-{@render children?.({ nodes: treemapData ? treemapData.descendants() : [] })}

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

@@ -1,30 +0,0 @@
-import type { Component, ComponentProps } from 'svelte';
-import { SelectionState } from '@layerstack/svelte-state';
-import type { SeriesData } from './types.js';
-import type Legend from '../Legend.svelte';
-export declare class HighlightKey<TData, SeriesComponent extends Component> {
-    current: string | null;
-    set: (seriesKey: typeof this.current) => void;
-}
-export declare class SeriesState<TData, TComponent extends Component> {
-    #private;
-    selectedSeries: SelectionState<unknown>;
-    selectedKeys: SelectionState<unknown>;
-    highlightKey: HighlightKey<TData, TComponent>;
-    constructor(getSeries: () => SeriesData<TData, TComponent>[]);
-    get series(): SeriesData<TData, TComponent>[];
-    get isDefaultSeries(): boolean;
-    get allSeriesData(): Array<TData & {
-        seriesKey: string;
-    }>;
-    get visibleSeries(): SeriesData<TData, TComponent>[];
-}
-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,59 +0,0 @@
-import { SelectionState } from '@layerstack/svelte-state';
-import { scaleOrdinal } from 'd3-scale';
-export class HighlightKey {
-    current = $state(null);
-    set = (seriesKey) => {
-        this.current = seriesKey;
-    };
-}
-export class SeriesState {
-    #series = $state.raw([]);
-    selectedSeries = new SelectionState();
-    selectedKeys = new SelectionState();
-    highlightKey = new HighlightKey();
-    constructor(getSeries) {
-        this.#series = getSeries();
-        $effect.pre(() => {
-            // keep series state in sync with the prop
-            this.#series = getSeries();
-        });
-    }
-    get series() {
-        return this.#series;
-    }
-    get isDefaultSeries() {
-        return this.#series.length === 1 && this.#series[0].key === 'default';
-    }
-    get allSeriesData() {
-        return this.#series
-            .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-            .filter((d) => d);
-    }
-    get visibleSeries() {
-        return this.#series.filter((s) => this.selectedSeries.isEmpty() || this.selectedSeries.isSelected(s.key));
-    }
-}
-/**
- * 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',
-        onclick: (_, item) => opts.seriesState.selectedSeries.toggleSelected(item.value),
-        onpointerenter: (_, item) => (opts.seriesState.highlightKey.current = item.value),
-        onpointerleave: () => (opts.seriesState.highlightKey.current = null),
-        ...opts.props,
-        classes: {
-            item: (item) => opts.seriesState.visibleSeries.length &&
-                !opts.seriesState.visibleSeries.some((s) => s.key === item.value)
-                ? 'opacity-50'
-                : '',
-            ...opts.props?.classes,
-        },
-    };
-}