layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/LinearGradient.svelte

@@ -1,232 +0,0 @@
-<script lang="ts" module>
-  import { asAny, type Without } from '../utils/types.js';
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { Snippet } from 'svelte';
-
-  export type LinearGradientPropsWithoutHTML = {
-    /**
-     * Unique id for linearGradient
-     */
-    id?: string;
-
-    /**
-     * Array array of strings (colors), will equally distributed from 0-100%.
-     * If array of tuples, will use first value as the offset, and second as color
-     *
-     * @default `['var(--tw-gradient-from)', 'var(--tw-gradient-to)']`
-     */
-    stops?: string[] | [string | number, string][];
-
-    /**
-     * Apply color stops top-to-bottom (true) or left-to-right (false)
-     *
-     * @default false
-     */
-    vertical?: boolean;
-
-    /**
-     * @default '0%'
-     */
-    x1?: string;
-
-    /**
-     * @default '0%'
-     */
-    y1?: string;
-
-    /**
-     * @default vertical ? '0%' : '100%'
-     */
-    x2?: string;
-    /**
-     * @default vertical ? '100%' : '0%'
-     */
-    y2?: string;
-
-    /**
-     * Rotate the gradient by a given angle in degrees
-     */
-    rotate?: number;
-
-    /**
-     * Define the coordinate system for attributes (i.e. gradientUnits)
-     *
-     * @default 'objectBoundingBox'
-     */
-    units?: 'objectBoundingBox' | 'userSpaceOnUse';
-
-    /**
-     * A bindable reference to the underlying `<linearGradient>` element
-     *
-     * @bindable
-     */
-    ref?: SVGLinearGradientElement;
-
-    /**
-     * Render as a child of the gradient and will opt out of the default stops
-     * being rendered.
-     */
-    stopsContent?: Snippet;
-
-    children?: Snippet<[{ id: string; gradient: string }]>;
-  };
-
-  export type LinearGradientProps = LinearGradientPropsWithoutHTML &
-    Without<SVGAttributes<SVGLinearGradientElement>, LinearGradientPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { getLayerContext } from '../contexts/layer.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
-  import { parsePercent } from '../utils/math.js';
-  import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import { cls } from '@layerstack/tailwind';
-
-  const uid = $props.id();
-
-  let {
-    id = createId('linearGradient-', uid),
-    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
-    vertical = false,
-    x1 = '0%',
-    y1 = '0%',
-    x2 = vertical ? '0%' : '100%',
-    y2 = vertical ? '100%' : '0%',
-    rotate,
-    units = 'objectBoundingBox',
-    ref: refProp = $bindable(),
-    class: className,
-    stopsContent,
-    children,
-    ...restProps
-  }: LinearGradientProps = $props();
-
-  let ref = $state<SVGLinearGradientElement>();
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  const ctx = getChartContext();
-  const layerCtx = getLayerContext();
-
-  let canvasGradient = $state<CanvasGradient>();
-
-  function createCSSGradient(): string {
-    if (!stops?.length) return '';
-
-    let direction: string;
-    if (rotate !== undefined) {
-      // Convert SVG rotation to CSS linear-gradient angle
-      // SVG: rotate(0) on horizontal gradient = left-to-right = CSS 90deg
-      // SVG: rotate(0) on vertical gradient = top-to-bottom = CSS 180deg
-      const baseAngle = vertical ? 180 : 90;
-      const cssAngle = baseAngle + rotate;
-      direction = `${cssAngle}deg`;
-    } else {
-      // Use direction keywords when no rotation is specified
-      direction = vertical ? 'to bottom' : 'to right';
-    }
-
-    const cssStops = stops
-      .map((stop, i) => {
-        if (Array.isArray(stop)) {
-          return `${stop[1]} ${stop[0]}`;
-        } else {
-          return `${stop} ${i * (100 / (stops.length - 1))}%`;
-        }
-      })
-      .join(', ');
-
-    return `linear-gradient(${direction}, ${cssStops})`;
-  }
-
-  function render(_ctx: CanvasRenderingContext2D) {
-    // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
-    const _stops = stops.map((stop, i) => {
-      if (Array.isArray(stop)) {
-        const { fill } = getComputedStyles(_ctx.canvas, {
-          styles: { fill: stop[1] },
-          classes: className,
-        });
-        return { offset: parsePercent(stop[0]), color: fill };
-      } else {
-        const { fill } = getComputedStyles(_ctx.canvas, {
-          styles: { fill: stop },
-          classes: className,
-        });
-        return { offset: i / (stops.length - 1), color: fill };
-      }
-    });
-
-    // TODO: Use x1/y1/x2/y2 values (convert from percentage strings)
-    const gradient = createLinearGradient(
-      _ctx,
-      ctx.padding.left,
-      ctx.padding.top,
-      vertical ? ctx.padding.left : ctx.width - ctx.padding.right,
-      vertical ? ctx.height + ctx.padding.bottom : ctx.padding.top,
-      _stops
-    );
-
-    canvasGradient = gradient;
-  }
-
-  if (layerCtx === 'canvas') {
-    ctx.registerComponent({
-      name: 'Gradient',
-      kind: 'group',
-      canvasRender: {
-        render,
-        deps: () => [x1, y1, x2, y2, stops, className],
-      },
-    });
-  }
-</script>
-
-{#if layerCtx === 'canvas'}
-  <!--
-	TODO: we can probably pass the context to coerce this type so we don't need a bunch
-	of predicates to check if the gradient is a CanvasGradient or not...
-	-->
-  {@render children?.({ id, gradient: asAny(canvasGradient) })}
-{:else if layerCtx === 'svg'}
-  <defs>
-    <linearGradient
-      bind:this={ref}
-      {id}
-      {x1}
-      {y1}
-      {x2}
-      {y2}
-      gradientTransform={rotate ? `rotate(${rotate})` : ''}
-      gradientUnits={units}
-      {...extractLayerProps(restProps, 'lc-linear-gradient')}
-    >
-      {#if stopsContent}
-        {@render stopsContent?.()}
-      {:else if stops}
-        {#each stops as stop, i}
-          {#if Array.isArray(stop)}
-            <stop
-              offset={stop[0]}
-              stop-color={stop[1]}
-              class={cls('lc-linear-gradient-stop', className)}
-            />
-          {:else}
-            <stop
-              offset="{i * (100 / (stops.length - 1))}%"
-              stop-color={stop}
-              class={cls('lc-linear-gradient-stop', className)}
-            />
-          {/if}
-        {/each}
-      {/if}
-    </linearGradient>
-  </defs>
-
-  {@render children?.({ id, gradient: `url(#${id})` })}
-{:else if layerCtx === 'html'}
-  {@render children?.({ id, gradient: createCSSGradient() })}
-{/if}

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

@@ -1,97 +0,0 @@
-import type { MarkerOptions } from './MarkerWrapper.svelte';
-import type { Without } from '../utils/types.js';
-import type { MotionNoneOption, MotionTweenOption } from '../utils/motion.svelte.js';
-import { type CurveFactory } from 'd3-shape';
-import type { LinkSweep, LinkType } from '../utils/linkUtils.js';
-import type { PathProps, PathPropsWithoutHTML } from './Path.svelte';
-import type { Accessor } from '../utils/common.js';
-export type LinkPropsWithoutHTML = {
-    /**
-     * Source `x` coordinate. Accepts a `number` (pixel value), a string property
-     * name, or `(d) => value` accessor. Strings/functions use `ctx.xScale`.
-     */
-    x1?: Accessor;
-    /**
-     * Source `y` coordinate. Accepts a `number`, property name, or
-     * `(d) => value` accessor. Strings/functions use `ctx.yScale`.
-     */
-    y1?: Accessor;
-    /** Target `x` coordinate. See `x1`. */
-    x2?: Accessor;
-    /** Target `y` coordinate. See `y1`. */
-    y2?: Accessor;
-    /**
-     * Data for the link. In array mode (when `x1`/`y1`/`x2`/`y2` are strings or
-     * functions) this should be an array of rows; one path is rendered per row.
-     * In hierarchy/sankey mode, a single link object (`{source, target, ...}`).
-     * Defaults to `ctx.data` in array mode.
-     */
-    data?: any;
-    /**
-     * Update source and target accessors to be compatible with d3-sankey. see:
-     * https://github.com/d3/d3-sankey#sankeyLinkHorizontal
-     *
-     * @default false
-     */
-    sankey?: boolean;
-    /** Accessor returning the source node from `data` (hierarchy/sankey mode). */
-    source?: (d: any) => any;
-    /** Accessor returning the target node from `data` (hierarchy/sankey mode). */
-    target?: (d: any) => any;
-    /** Accessor returning `x` for a node (hierarchy/sankey mode). */
-    x?: (d: any) => any;
-    /** Accessor returning `y` for a node (hierarchy/sankey mode). */
-    y?: (d: any) => any;
-    /**
-     * The link path type.
-     *
-     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
-     *
-     * @default 'd3'
-     */
-    type?: LinkType;
-    /**
-     * Corner radius (used by `'beveled'` and `'rounded'`).
-     *
-     * @default 20
-     */
-    radius?: number;
-    /**
-     * Bend angle in degrees for the `'swoop'` link type.
-     *
-     * @default 22.5
-     */
-    bend?: number;
-    /** D3 curve function (used when `type === 'd3'`). */
-    curve?: CurveFactory;
-    /** Sweep direction for preset types and d3 paths. */
-    sweep?: LinkSweep;
-    /**
-     * Natural flow direction (affects default curve and axis-dependent step
-     * curves). Also toggles x/y accessor logic in hierarchy mode.
-     */
-    orientation?: 'vertical' | 'horizontal';
-    /**
-     * Interpret coords as polar (`x` = angle, `y` = radius) and render in
-     * radial space. Defaults to `ctx.radial` when unset.
-     */
-    radial?: boolean;
-    /** Marker at both start and end points. */
-    marker?: MarkerOptions;
-    /** Marker at the middle point. */
-    markerMid?: MarkerOptions;
-    /** Marker at the start point. */
-    markerStart?: MarkerOptions;
-    /** Marker at the end point. */
-    markerEnd?: MarkerOptions;
-    motion?: MotionTweenOption | MotionNoneOption;
-    /**
-     * CSS class. In array mode, accepts a `(d) => string` function evaluated
-     * per datum.
-     */
-    class?: string | ((d: any) => string);
-} & Omit<PathPropsWithoutHTML, 'class'>;
-export type LinkProps = LinkPropsWithoutHTML & Without<PathProps, LinkPropsWithoutHTML>;
-declare const Link: import("svelte").Component<LinkProps, {}, "pathRef">;
-type Link = ReturnType<typeof Link>;
-export default Link;

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

@@ -1,70 +0,0 @@
-export type MonthCell = {
-    x: number;
-    y: number;
-    color: any;
-    data: any;
-    date: Date;
-};
-export type MonthPropsWithoutHTML = {
-    /**
-     * The start date of the calendar.
-     */
-    start: Date;
-    /**
-     * The end date of the calendar.
-     */
-    end: Date;
-    /**
-     * Size of the cell in the calendar.
-     *
-     * @default 25
-     */
-    cellSize?: number;
-    /**
-     * Number of months to display per row. If undefined, automatically calculated based on available width.
-     */
-    monthsPerRow?: number;
-    /**
-     * Padding multiplier between months (relative to cellSize).
-     *
-     * @default 1.2
-     */
-    monthPadding?: number;
-    /**
-     * Vertical spacing multiplier between month rows (in number of cell heights).
-     *
-     * @default 8
-     */
-    rowSpacing?: number;
-    /**
-     * Whether to show the day number in each cell.
-     *
-     * @default true
-     */
-    showDayNumber?: boolean;
-    /**
-     * Props to pass to the `<text>` element for month labels.
-     */
-    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
-    /**
-     * Props to pass to the `<text>` element for day numbers.
-     */
-    dayNumberProps?: Partial<ComponentProps<typeof Text>>;
-    /**
-     * Setup pointer events to show tooltip for related data
-     */
-    tooltip?: boolean;
-    children?: Snippet<[{
-        cells: MonthCell[];
-        cellSize: number;
-    }]>;
-} & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
-export type MonthProps = MonthPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, MonthPropsWithoutHTML>;
-import { type ComponentProps, type Snippet } from 'svelte';
-import { type RectPropsWithoutHTML } from './Rect.svelte';
-import Text from './Text.svelte';
-import type { SVGAttributes } from 'svelte/elements';
-import type { Without } from '../utils/types.js';
-declare const Month: import("svelte").Component<MonthPropsWithoutHTML, {}, "">;
-type Month = ReturnType<typeof Month>;
-export default Month;