layerchart 2.0.0-next.1 → 2.0.0-next.2

package/dist/utils/arcText.svelte.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Reactive utilities to create and position text for Arc-based labels/annotations.
+ *
+ * TODO: we can probably simplify / pull some of these pieces out to not do a bunch
+ * of extra work when we don't need to. But for now while we work on the API, this is fine :)
+ */
+import type { Getter, GetterValues } from './types.js';
+import type { ComponentProps } from 'svelte';
+import type { Text } from '../components/index.js';
+export type ArcTextProps = GetterValues<{
+    innerRadius: number;
+    outerRadius: number;
+    cornerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    centroid: [number, number];
+}>;
+export type InternalArcTextProps = ArcTextProps & {
+    /**
+     * Whether the corner radius should be inverted or not.
+     * This changes when text is rotated/flipped to ensure
+     * the corner offset is applied correctly.
+     */
+    invertCorner: Getter<boolean>;
+};
+export type ArcPathResult = {
+    current: string;
+};
+export type ArcTextPosition = 'inner' | 'outer' | 'middle' | 'centroid' | 'outer-radial';
+export type ArcTextOptions = {
+    /**
+     * A percentage string (e.g., '50%') to offset the start angle of the text path.
+     * If a specific offset is needed, you should use option rather than passing it
+     * directly to the `<Text>` component to ensure it is taken into account when
+     * calculating the path the text should follow.
+     *
+     * This has no effect if the position is `'centroid'`.
+     */
+    startOffset?: string;
+    /**
+     * An amount of padding to add to the outer radius of the path to add space
+     * between the text and the arc.
+     */
+    outerPadding?: number;
+    /**
+     * Optional offset specifically for 'outer-radial' position from the outer arc edge.
+     * If not provided, 'outerPadding' will be used.
+     *
+     * // TODO: does 23 even make sense? It looks good but is it too arbitrary? needs sean's attention
+     * Defaults to 23 if neither is set.
+     */
+    radialOffset?: number;
+};
+export declare function createArcTextProps(props: ArcTextProps, opts: ArcTextOptions | undefined, position: ArcTextPosition): {
+    current: ComponentProps<typeof Text>;
+};
+export type GetArcTextProps = (position: ArcTextPosition, opts?: ArcTextOptions) => ComponentProps<typeof Text>;

package/dist/utils/arcText.svelte.js

@@ -0,0 +1,262 @@
+/**
+ * Reactive utilities to create and position text for Arc-based labels/annotations.
+ *
+ * TODO: we can probably simplify / pull some of these pieces out to not do a bunch
+ * of extra work when we don't need to. But for now while we work on the API, this is fine :)
+ */
+import { arc as d3arc } from 'd3-shape';
+import { radiansToDegrees } from './math.js';
+function extractOutsideArc(arcPath) {
+    // Extract first arc until straight line to innerRadius (L) or close path (Z)
+    const matches = arcPath.match(/(^.+?)(L|Z)/);
+    if (!matches || !matches[1])
+        return arcPath;
+    return matches[1];
+}
+// Normalize angles to [0, 360) range
+function normalizeAngle(angle) {
+    return ((angle % 360) + 360) % 360;
+}
+/**
+ * Calculates and generates a path in the middle/medial line of an arc.
+ */
+function getArcPathMiddle(props) {
+    const centerRadius = $derived((props.innerRadius() + props.outerRadius()) / 2);
+    const cornerAngleOffset = $derived.by(() => {
+        if (props.cornerRadius() <= 0 || centerRadius <= 0)
+            return 0;
+        const effectiveCornerRadius = Math.min(props.cornerRadius(), centerRadius);
+        return (effectiveCornerRadius * 0.5) / centerRadius;
+    });
+    const effectiveStartAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.startAngle() - cornerAngleOffset;
+        }
+        return props.startAngle() + cornerAngleOffset;
+    });
+    const effectiveEndAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.endAngle() + cornerAngleOffset;
+        }
+        return props.endAngle() - cornerAngleOffset;
+    });
+    const path = $derived(extractOutsideArc(d3arc()
+        .outerRadius(centerRadius)
+        .innerRadius(centerRadius - 0.5)
+        .startAngle(effectiveStartAngle)
+        .endAngle(effectiveEndAngle)() ?? ''));
+    return {
+        get current() {
+            return path;
+        },
+    };
+}
+function getArcPathInner(props) {
+    const cornerAngleOffset = $derived.by(() => {
+        if (props.cornerRadius() <= 0 || props.innerRadius() <= 0)
+            return 0;
+        if (props.cornerRadius() >= props.innerRadius())
+            return Math.PI / 4;
+        return (props.cornerRadius() * 0.5) / props.innerRadius();
+    });
+    const effectiveStartAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.startAngle() - cornerAngleOffset;
+        }
+        return props.startAngle() + cornerAngleOffset;
+    });
+    const effectiveEndAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.endAngle() + cornerAngleOffset;
+        }
+        return props.endAngle() - cornerAngleOffset;
+    });
+    const path = $derived(extractOutsideArc(d3arc()
+        .innerRadius(props.innerRadius())
+        .outerRadius(props.innerRadius() + 0.5)
+        .startAngle(effectiveStartAngle)
+        .endAngle(effectiveEndAngle)() ?? ''));
+    return {
+        get current() {
+            return path;
+        },
+    };
+}
+function getArcPathOuter(props) {
+    const cornerAngleOffset = $derived.by(() => {
+        if (props.cornerRadius() <= 0 || props.outerRadius() <= 0)
+            return 0;
+        return (props.cornerRadius() * 0.5) / props.outerRadius();
+    });
+    const effectiveStartAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.startAngle() - cornerAngleOffset;
+        }
+        return props.startAngle() + cornerAngleOffset;
+    });
+    const effectiveEndAngle = $derived.by(() => {
+        if (props.invertCorner()) {
+            return props.endAngle() + cornerAngleOffset;
+        }
+        return props.endAngle() - cornerAngleOffset;
+    });
+    const path = $derived(extractOutsideArc(d3arc()
+        .innerRadius(props.outerRadius() - 0.5)
+        .outerRadius(props.outerRadius())
+        .startAngle(effectiveStartAngle)
+        .endAngle(effectiveEndAngle)() ?? ''));
+    return {
+        get current() {
+            return path;
+        },
+    };
+}
+function pointOnCircle(radius, angle) {
+    const adjustedAngle = angle - Math.PI / 2;
+    return [radius * Math.cos(adjustedAngle), radius * Math.sin(adjustedAngle)];
+}
+export function createArcTextProps(props, opts = {}, position) {
+    const effectiveStartAngleRadians = $derived.by(() => {
+        const start = props.startAngle();
+        const end = props.endAngle();
+        const offset = opts.startOffset;
+        if (offset) {
+            try {
+                const percentage = parseFloat(offset.slice(0, -1)) / 100;
+                if (!isNaN(percentage) && percentage >= 0 && percentage <= 1) {
+                    const span = end - start;
+                    return start + span * percentage;
+                }
+                else {
+                    console.warn('Invalid percentage for startOffset:', offset);
+                }
+            }
+            catch (e) {
+                console.warn('Could not parse startOffset percentage:', offset, e);
+            }
+        }
+        return start;
+    });
+    // Convert the effective start angle to degrees for orientation checks
+    const effectiveStartDegrees = $derived(radiansToDegrees(effectiveStartAngleRadians));
+    // Normalize the effective angle to the [0, 360) range
+    const normalizedStartDegrees = $derived(normalizeAngle(effectiveStartDegrees));
+    const startDegrees = $derived(radiansToDegrees(props.startAngle()));
+    const endDegrees = $derived(radiansToDegrees(props.endAngle()));
+    const isClockwise = $derived(startDegrees < endDegrees);
+    // Reverse direction of arc when text is on top going counterclockwise or bottom going clockwise
+    const isTopCw = $derived(isClockwise && (normalizedStartDegrees >= 270 || normalizedStartDegrees <= 90));
+    const isTopCcw = $derived(!isClockwise && (normalizedStartDegrees > 270 || normalizedStartDegrees <= 90));
+    const isBottomCw = $derived(isClockwise && normalizedStartDegrees < 270 && normalizedStartDegrees >= 90);
+    const isBottomCcw = $derived(!isClockwise && normalizedStartDegrees <= 270 && normalizedStartDegrees > 90);
+    const reverseText = $derived(isTopCcw || isBottomCw);
+    const pathGenProps = {
+        ...props,
+        startAngle: () => (reverseText ? props.endAngle() : props.startAngle()),
+        endAngle: () => (reverseText ? props.startAngle() : props.endAngle()),
+        invertCorner: () => isBottomCw || isBottomCcw,
+    };
+    const innerPath = getArcPathInner(pathGenProps);
+    const middlePath = getArcPathMiddle(pathGenProps);
+    const outerPath = getArcPathOuter(pathGenProps);
+    const innerDominantBaseline = $derived.by(() => {
+        if (isBottomCw || isBottomCcw)
+            return 'auto';
+        if (isTopCw || isTopCcw)
+            return 'hanging';
+        return 'auto';
+    });
+    const outerDominantBaseline = $derived.by(() => {
+        if (isBottomCw || isBottomCcw)
+            return 'hanging';
+        return undefined;
+    });
+    const sharedProps = $derived.by(() => {
+        if (reverseText) {
+            return {
+                startOffset: opts.startOffset ?? '100%',
+                textAnchor: 'end',
+            };
+        }
+        return {
+            startOffset: opts.startOffset ?? undefined,
+        };
+    });
+    const radialPositionProps = $derived.by(() => {
+        if (position !== 'outer-radial')
+            return {};
+        const midAngle = (props.startAngle() + props.endAngle()) / 2;
+        const basePadding = opts.radialOffset ?? opts.outerPadding ?? 23;
+        const midAngleDegrees = normalizeAngle(radiansToDegrees(midAngle));
+        let textAnchor = 'middle';
+        let effectivePadding = basePadding;
+        const isBottomZone = midAngleDegrees > 45 && midAngleDegrees < 135;
+        const isTopZone = midAngleDegrees > 225 && midAngleDegrees < 315;
+        const isRightZone = midAngleDegrees <= 45 || midAngleDegrees >= 315;
+        const isLeftZone = midAngleDegrees >= 135 && midAngleDegrees <= 225;
+        const positionRadius = props.outerRadius() + effectivePadding;
+        const [x, y] = pointOnCircle(positionRadius, midAngle);
+        if (isRightZone) {
+            textAnchor = 'start';
+            if (midAngleDegrees > 350 || midAngleDegrees < 10)
+                textAnchor = 'start';
+        }
+        else if (isLeftZone) {
+            textAnchor = 'end';
+            if (midAngleDegrees > 170 && midAngleDegrees < 190)
+                textAnchor = 'end';
+        }
+        else if (isBottomZone) {
+            textAnchor = 'middle';
+        }
+        else if (isTopZone) {
+            textAnchor = 'middle';
+        }
+        return {
+            x: x,
+            y: y,
+            textAnchor,
+            'dominant-baseline': 'middle',
+        };
+    });
+    const current = $derived.by(() => {
+        if (position === 'inner') {
+            return {
+                path: innerPath.current,
+                ...sharedProps,
+                'dominant-baseline': innerDominantBaseline,
+            };
+        }
+        else if (position === 'outer') {
+            return {
+                path: outerPath.current,
+                ...sharedProps,
+                'dominant-baseline': outerDominantBaseline,
+            };
+        }
+        else if (position === 'middle') {
+            return {
+                path: middlePath.current,
+                ...sharedProps,
+                'dominant-baseline': 'middle',
+            };
+        }
+        else if (position === 'centroid') {
+            const centroid = props.centroid();
+            return {
+                x: centroid[0],
+                y: centroid[1],
+                textAnchor: 'middle',
+                verticalAnchor: 'middle',
+            };
+        }
+        else {
+            return radialPositionProps;
+        }
+    });
+    return {
+        get current() {
+            return current;
+        },
+    };
+}

package/dist/utils/array.d.ts

@@ -1,5 +1,13 @@
-import { extent as d3extent, type Numeric } from 'd3-array';
+import type { Numeric } from 'd3-array';
+import { extent as d3extent } from 'd3-array';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
 export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3extent<T>>[0]): [T, T];
+/**
+ * Determine whether two arrays equal one another, order not important.
+ * This uses includes instead of converting to a set because this is only
+ * used internally on a small array size and it's not worth the cost
+ * of making a set
+ */
+export declare function arraysEqual(arr1: unknown[], arr2: unknown[]): boolean;

package/dist/utils/array.js

@@ -5,3 +5,16 @@ import { extent as d3extent } from 'd3-array';
 export function extent(iterable) {
     return d3extent(iterable);
 }
+/**
+ * Determine whether two arrays equal one another, order not important.
+ * This uses includes instead of converting to a set because this is only
+ * used internally on a small array size and it's not worth the cost
+ * of making a set
+ */
+export function arraysEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length)
+        return false;
+    return arr1.every((k) => {
+        return arr2.includes(k);
+    });
+}

package/dist/utils/attributes.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Creates a string containing a class name that can be used by
+ * developers to target a specific layer/element within a LayerChart.
+ *
+ * This is a function so that the class names remain consistent and the
+ * prefix/structure can be changed in the future if needed
+ *
+ * @param layerName - the name of the layer to be appended to the generated class name
+ * @returns a string to be used as a class on an element
+ */
+export declare function layerClass(layerName: string): string;
+type ExtractObjectType<T> = T extends object ? (T extends Function ? never : T) : never;
+type WithClass<T> = T & {
+    class?: string;
+};
+type DefaultProps = WithClass<{
+    [key: string]: any;
+}>;
+/**
+ * Pulls out the props from an arbitrary object/function/boolean and appends
+ * a class name to its class property to identify the layer for CSS targeting.
+ *
+ * @param props The props to be extracted, can be an object, function or any other type
+ * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
+ * @returns a typed spreadable object with props for the layer
+ */
+export declare function extractLayerProps<T>(props: T, layerName: string, extraClasses?: string): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
+export {};

package/dist/utils/attributes.js

@@ -0,0 +1,40 @@
+import { cls } from '@layerstack/tailwind';
+/**
+ * Creates a string containing a class name that can be used by
+ * developers to target a specific layer/element within a LayerChart.
+ *
+ * This is a function so that the class names remain consistent and the
+ * prefix/structure can be changed in the future if needed
+ *
+ * @param layerName - the name of the layer to be appended to the generated class name
+ * @returns a string to be used as a class on an element
+ */
+export function layerClass(layerName) {
+    return `lc-${layerName}`;
+}
+// type guard to narrow props to an object with optional class
+// for extractLayerProps
+function isObjectWithClass(val) {
+    return typeof val === 'object' && val !== null && typeof val !== 'function';
+}
+/**
+ * Pulls out the props from an arbitrary object/function/boolean and appends
+ * a class name to its class property to identify the layer for CSS targeting.
+ *
+ * @param props The props to be extracted, can be an object, function or any other type
+ * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
+ * @returns a typed spreadable object with props for the layer
+ */
+export function extractLayerProps(props, layerName, extraClasses) {
+    const className = layerClass(layerName);
+    if (isObjectWithClass(props)) {
+        return {
+            ...props,
+            class: cls(className, props.class ?? '', extraClasses),
+        };
+    }
+    return {
+        class: cls(className, extraClasses),
+    };
+}

package/dist/utils/canvas.js

@@ -49,7 +49,7 @@ function render(ctx, render, styleOptions = {}) {
         ctx.globalAlpha = Number(computedStyles?.opacity);
     }
     // Text properties
-    ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+    ctx.font = `${computedStyles.fontWeight} ${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
     // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
     if (computedStyles.textAnchor === 'middle') {
         ctx.textAlign = 'center';
@@ -74,10 +74,11 @@ function render(ctx, render, styleOptions = {}) {
             .map((s) => Number(s.replace('px', '')));
         ctx.setLineDash(dashArray);
     }
-    paintOrder.forEach((attr) => {
+    for (const attr of paintOrder) {
         if (attr === 'fill') {
             const fill = styleOptions.styles?.fill &&
                 (styleOptions.styles?.fill instanceof CanvasGradient ||
+                    styleOptions.styles?.fill instanceof CanvasPattern ||
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
                 : computedStyles?.fill;
@@ -107,7 +108,7 @@ function render(ctx, render, styleOptions = {}) {
                 render.stroke(ctx);
             }
         }
-    });
+    }
 }
 /** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
 export function renderPathData(ctx, pathData, styleOptions = {}) {
@@ -163,11 +164,18 @@ export function scaleCanvas(ctx, width, height) {
     ctx.scale(devicePixelRatio, devicePixelRatio);
     return { width: ctx.canvas.width, height: ctx.canvas.height };
 }
+/** Get pixel color (r,g,b,a) at canvas coordinates */
+export function getPixelColor(ctx, x, y) {
+    const dpr = window.devicePixelRatio ?? 1;
+    const imageData = ctx.getImageData(x * dpr, y * dpr, 1, 1);
+    const [r, g, b, a] = imageData.data;
+    return { r, g, b, a };
+}
 export function _createLinearGradient(ctx, x0, y0, x1, y1, stops) {
     const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-    stops.forEach(({ offset, color }) => {
+    for (const { offset, color } of stops) {
         gradient.addColorStop(offset, color);
-    });
+    }
     return gradient;
 }
 /** Create linear gradient and memoize result to fix reactivity */
@@ -175,9 +183,38 @@ export const createLinearGradient = memoize(_createLinearGradient, (ctx, x0, y0,
     const key = JSON.stringify({ x0, y0, x1, y1, stops });
     return key;
 });
-export function getPixelColor(ctx, x, y) {
-    const dpr = window.devicePixelRatio ?? 1;
-    const imageData = ctx.getImageData(x * dpr, y * dpr, 1, 1);
-    const [r, g, b, a] = imageData.data;
-    return { r, g, b, a };
+export function _createPattern(ctx, width, height, shapes, background) {
+    const patternCanvas = document.createElement('canvas');
+    const patternCtx = patternCanvas.getContext('2d');
+    // Add pattern canvas to DOM to allow computed styles to be read (`getComputedStyles()`)
+    ctx.canvas.after(patternCanvas);
+    // TODO: Fix blurry pattern
+    // const newScale = scaleCanvas(patternCtx, width, height);
+    patternCanvas.width = width;
+    patternCanvas.height = height;
+    if (background) {
+        patternCtx.fillStyle = background;
+        patternCtx.fillRect(0, 0, width, height);
+    }
+    for (const shape of shapes) {
+        patternCtx.save();
+        if (shape.type === 'circle') {
+            renderCircle(patternCtx, { cx: shape.cx, cy: shape.cy, r: shape.r }, { styles: { fill: shape.fill, opacity: shape.opacity } });
+        }
+        else if (shape.type === 'line') {
+            renderPathData(patternCtx, shape.path, {
+                styles: { stroke: shape.stroke, strokeWidth: shape.strokeWidth, opacity: shape.opacity },
+            });
+        }
+        patternCtx.restore();
+    }
+    const pattern = ctx.createPattern(patternCanvas, 'repeat');
+    // Cleanup
+    ctx.canvas.parentElement?.removeChild(patternCanvas);
+    return pattern;
 }
+/** Create pattern and memoize result to fix reactivity */
+export const createPattern = memoize(_createPattern, (ctx, width, height, shapes, background) => {
+    const key = JSON.stringify({ width, height, shapes, background });
+    return key;
+});

package/dist/utils/chart.d.ts

@@ -0,0 +1,78 @@
+import type { DomainType } from './scales.svelte.js';
+import type { AxisKey, BaseRange, DataType, Extents, FieldAccessors, Nice, PaddingArray } from './types.js';
+import type { AnyScale } from './scales.svelte.js';
+/**
+ * Creates a function to calculate a domain based on extents and a domain directive.
+ * @param s The key (e.g., 'x', 'y') to look up in the extents object
+ * @returns A function that computes the final domain from extents and a domain input
+ */
+export declare function calcDomain<K extends AxisKey>(s: K, extents: Extents, domain: DomainType | undefined): number[];
+/**
+ * If we have a domain from settings (the directive), fill in
+ * any null values with ones from our measured extents;
+ * otherwise, return the measured extent.
+ * @param domain A two-value array of numbers representing the measured extent
+ * @param directive A two-value array of numbers or nulls that will have any nulls filled in from the `domain` array
+ * @returns A two-value array of numbers representing the filled-in domain
+ */
+export declare function partialDomain(domain?: number[] | undefined, directive?: Array<number | null>): number[];
+type CreateChartScaleOpts = {
+    domain: number[];
+    scale: AnyScale & {
+        interpolator?: () => {
+            name: string;
+        };
+        nice?: (nice?: number) => void;
+    };
+    padding: PaddingArray | undefined;
+    nice: Nice;
+    reverse: boolean;
+    width: number;
+    height: number;
+    range: BaseRange | undefined;
+    percentRange: boolean;
+    extents: Extents;
+};
+export declare function createChartScale(axis: AxisKey, { domain, scale, padding, nice, reverse, width, height, range, percentRange, }: CreateChartScaleOpts): AnyScale;
+/**
+ * Get a D3 scale name
+ * https://svelte.dev/repl/ec6491055208401ca41120c9c8a67737?version=3.49.0
+ */
+export declare function findScaleName(scale: any): string;
+interface ScaleInfo {
+    scale: AnyScale;
+    sort?: boolean;
+}
+interface ActiveScales {
+    [key: string]: ScaleInfo;
+}
+/**
+ * Calculates scale extents for given data and scales
+ * @template T The type of data objects in the input array
+ * @param {T[]} flatData Array of data objects
+ * @param {FieldAccessors<T>} getters Field accessor functions
+ * @param {ActiveScales} activeScales Object containing scale information
+ * @returns {Extents} Calculated extents for each scale
+ */
+export declare function calcScaleExtents<T>(flatData: DataType<T>, getters: FieldAccessors<T>, activeScales: ActiveScales): UniqueResults;
+export interface UniqueResults {
+    x?: (number | string)[];
+    y?: (number | string)[];
+    z?: (number | string)[];
+    r?: (number | string)[];
+}
+export declare function identity<T>(d: T): T;
+export declare function createGetter<TData>(accessor: (d: TData) => any, scale: AnyScale | null): (d: TData) => any;
+/**
+ * Move an element to the last child of its parent.
+ * Adapted from d3-selection `.raise`
+ */
+export declare function raise(node: Element): void;
+/**
+ * Flatten arrays of arrays one level deep
+ * @param list The list to flatten
+ * @param accessor An optional accessor function or string property key
+ * @returns Flattened array
+ */
+export default function flatten<T, U>(list: T[], accessor?: string | ((item: T) => U[])): U[];
+export {};