layerchart 2.0.0-next.2 → 2.0.0-next.20

package/dist/utils/canvas.js

@@ -1,11 +1,25 @@
+import memoize from 'memoize';
 import { cls } from '@layerstack/tailwind';
-import { memoize } from 'lodash-es';
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
+const supportedStyles = [
+    'fill',
+    'fillOpacity',
+    'stroke',
+    'strokeWidth',
+    'opacity',
+    'fontWeight',
+    'fontSize',
+    'fontFamily',
+    'textAnchor',
+    'textAlign',
+    'paintOrder',
+];
 /**
  * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
  */
-export function getComputedStyles(canvas, { styles, classes } = {}) {
+export function _getComputedStyles(canvas, { styles, classes } = {}) {
+    // console.count(`getComputedStyles: ${getComputedStylesKey(canvas, { styles, classes })}`);
     try {
         // Get or create `<svg>` below `<canvas>`
         let svg = document.getElementById(CANVAS_STYLES_ELEMENT_ID);
@@ -24,13 +38,19 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
         if (styles) {
             Object.assign(svg.style, styles);
         }
+        // Make sure `<svg>` is not visible
+        svg.style.display = 'none';
         if (classes) {
             svg.setAttribute('class', cls(classes)
                 .split(' ')
                 .filter((s) => !s.startsWith('transition-'))
                 .join(' '));
         }
-        const computedStyles = window.getComputedStyle(svg);
+        // Capture copy to enable memoization and avoid capturing all styles (which is very slow)
+        const computedStyles = supportedStyles.reduce((acc, style) => {
+            acc[style] = window.getComputedStyle(svg)[style];
+            return acc;
+        }, {});
         return computedStyles;
     }
     catch (e) {
@@ -38,38 +58,71 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
         return {};
     }
 }
+function getComputedStylesKey(canvas, { styles, classes } = {}) {
+    return JSON.stringify({ canvasId: canvas.id, styles, classes });
+}
+export const getComputedStyles = memoize(_getComputedStyles, {
+    cacheKey: ([canvas, styleOptions]) => {
+        return getComputedStylesKey(canvas, styleOptions);
+    },
+});
 /** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
-function render(ctx, render, styleOptions = {}) {
+function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     // console.count('render');
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
-    const computedStyles = getComputedStyles(ctx.canvas, styleOptions);
-    // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
-    const paintOrder = computedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
-    if (computedStyles?.opacity) {
-        ctx.globalAlpha = Number(computedStyles?.opacity);
+    let resolvedStyles;
+    if (styleOptions.classes == null &&
+        !Object.values(styleOptions.styles ?? {}).some((v) => typeof v === 'string' && v.includes('var('))) {
+        // Skip resolving styles if no classes are provided and no styles are using CSS variables
+        resolvedStyles = styleOptions.styles ?? {};
     }
-    // Text properties
-    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';
+    else {
+        // Remove constant non-css variable properties (ex. `strokeWidth: 0.5`, `fill: #123456`) as not needed and improves memoization cache hit
+        const { constantStyles, variableStyles } = Object.entries(styleOptions.styles ?? {}).reduce((acc, [key, value]) => {
+            if (typeof value === 'number' || (typeof value === 'string' && !value.includes('var('))) {
+                acc.constantStyles[key] = value;
+            }
+            else if (typeof value === 'string' && value.includes('var(')) {
+                acc.variableStyles[key] = value;
+            }
+            return acc;
+        }, { constantStyles: {}, variableStyles: {} });
+        const computedStyles = getComputedStyles(ctx.canvas, {
+            styles: variableStyles,
+            classes: styleOptions.classes,
+        });
+        resolvedStyles = { ...computedStyles, ...constantStyles };
     }
-    else if (computedStyles.textAnchor === 'end') {
-        ctx.textAlign = 'right';
+    // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
+    const paintOrder = resolvedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
+    if (resolvedStyles?.opacity) {
+        ctx.globalAlpha = Number(resolvedStyles?.opacity);
     }
-    else {
-        ctx.textAlign = computedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
+    // font/text properties can be expensive to set (not sure why), so only apply if needed (renderText())
+    if (applyText) {
+        // Text properties
+        ctx.font = `${resolvedStyles.fontWeight} ${resolvedStyles.fontSize} ${resolvedStyles.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 (resolvedStyles.textAnchor === 'middle') {
+            ctx.textAlign = 'center';
+        }
+        else if (resolvedStyles.textAnchor === 'end') {
+            ctx.textAlign = 'right';
+        }
+        else {
+            ctx.textAlign = resolvedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
+        }
+        // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
+        // ctx.textBaseline = 'top';
+        // ctx.textBaseline = 'middle';
+        // ctx.textBaseline = 'bottom';
+        // ctx.textBaseline = 'alphabetic';
+        // ctx.textBaseline = 'hanging';
+        // ctx.textBaseline = 'ideographic';
     }
-    // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
-    // ctx.textBaseline = 'top';
-    // ctx.textBaseline = 'middle';
-    // ctx.textBaseline = 'bottom';
-    // ctx.textBaseline = 'alphabetic';
-    // ctx.textBaseline = 'hanging';
-    // ctx.textBaseline = 'ideographic';
     // Dashed lines
-    if (computedStyles.strokeDasharray.includes(',')) {
-        const dashArray = computedStyles.strokeDasharray
+    if (resolvedStyles.strokeDasharray?.includes(',')) {
+        const dashArray = resolvedStyles.strokeDasharray
             .split(',')
             .map((s) => Number(s.replace('px', '')));
         ctx.setLineDash(dashArray);
@@ -81,11 +134,11 @@ function render(ctx, render, styleOptions = {}) {
                     styleOptions.styles?.fill instanceof CanvasPattern ||
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
-                : computedStyles?.fill;
+                : resolvedStyles?.fill;
             if (fill && !['none', DEFAULT_FILL].includes(fill)) {
                 const currentGlobalAlpha = ctx.globalAlpha;
-                const fillOpacity = Number(computedStyles?.fillOpacity);
-                const opacity = Number(computedStyles?.opacity);
+                const fillOpacity = Number(resolvedStyles?.fillOpacity);
+                const opacity = Number(resolvedStyles?.opacity);
                 ctx.globalAlpha = fillOpacity * opacity;
                 ctx.fillStyle = fill;
                 render.fill(ctx);
@@ -98,12 +151,12 @@ function render(ctx, render, styleOptions = {}) {
                 (styleOptions.styles?.stroke instanceof CanvasGradient ||
                     !styleOptions.styles?.stroke?.includes('var'))
                 ? styleOptions.styles?.stroke
-                : computedStyles?.stroke;
+                : resolvedStyles?.stroke;
             if (stroke && !['none'].includes(stroke)) {
                 ctx.lineWidth =
-                    typeof computedStyles?.strokeWidth === 'string'
-                        ? Number(computedStyles?.strokeWidth?.replace('px', ''))
-                        : (computedStyles?.strokeWidth ?? 1);
+                    typeof resolvedStyles?.strokeWidth === 'string'
+                        ? Number(resolvedStyles?.strokeWidth?.replace('px', ''))
+                        : (resolvedStyles?.strokeWidth ?? 1);
                 ctx.strokeStyle = stroke;
                 render.stroke(ctx);
             }
@@ -123,7 +176,7 @@ export function renderText(ctx, text, coords, styleOptions = {}) {
         render(ctx, {
             fill: (ctx) => ctx.fillText(text.toString(), coords.x, coords.y),
             stroke: (ctx) => ctx.strokeText(text.toString(), coords.x, coords.y),
-        }, styleOptions);
+        }, styleOptions, { applyText: true });
     }
 }
 export function renderRect(ctx, coords, styleOptions = {}) {
@@ -145,6 +198,19 @@ export function renderCircle(ctx, coords, styleOptions = {}) {
     }, styleOptions);
     ctx.closePath();
 }
+export function renderEllipse(ctx, coords, styleOptions = {}) {
+    ctx.beginPath();
+    ctx.ellipse(coords.cx, coords.cy, coords.rx, coords.ry, 0, 0, 2 * Math.PI);
+    render(ctx, {
+        fill: (ctx) => {
+            ctx.fill();
+        },
+        stroke: (ctx) => {
+            ctx.stroke();
+        },
+    }, styleOptions);
+    ctx.closePath();
+}
 /** Clear canvas accounting for Canvas `context.translate(...)` */
 export function clearCanvasContext(ctx, options) {
     // Clear with negative offset due to Canvas `context.translate(...)`
@@ -179,9 +245,8 @@ export function _createLinearGradient(ctx, x0, y0, x1, y1, stops) {
     return gradient;
 }
 /** Create linear gradient and memoize result to fix reactivity */
-export const createLinearGradient = memoize(_createLinearGradient, (ctx, x0, y0, x1, y1, stops) => {
-    const key = JSON.stringify({ x0, y0, x1, y1, stops });
-    return key;
+export const createLinearGradient = memoize(_createLinearGradient, {
+    cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
 });
 export function _createPattern(ctx, width, height, shapes, background) {
     const patternCanvas = document.createElement('canvas');
@@ -214,7 +279,6 @@ export function _createPattern(ctx, width, height, shapes, background) {
     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;
+export const createPattern = memoize(_createPattern, {
+    cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
 });

package/dist/utils/genData.d.ts

@@ -75,3 +75,17 @@ export declare function getSpiral({ angle, radius, count, width, height, }: {
     x: number;
     y: number;
 }[];
+interface SineWaveOptions {
+    numPoints: number;
+    frequency?: number;
+    amplitude?: number;
+    noiseLevel?: number;
+    phase?: number;
+    xMin?: number;
+    xMax?: number;
+}
+export declare function generateSineWave(options: SineWaveOptions): {
+    x: number;
+    y: number;
+}[];
+export {};

package/dist/utils/genData.js

@@ -1,4 +1,4 @@
-import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { timeMinute, timeDay } from 'd3-time';
 import { cumsum } from 'd3-array';
 import { randomNormal } from 'd3-random';
 import { degreesToRadians, radiansToDegrees } from './math.js';
@@ -44,14 +44,14 @@ export function createSeries(options) {
     });
 }
 export function createDateSeries(options) {
-    const now = startOfToday();
+    const now = timeDay.floor(new Date());
     const count = options.count ?? 10;
     const min = options.min;
     const max = options.max;
     const keys = options.keys ?? ['value'];
     return Array.from({ length: count }).map((_, i) => {
         return {
-            date: subDays(now, count - i - 1),
+            date: timeDay.offset(now, -count + i),
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
@@ -66,10 +66,10 @@ export function createTimeSeries(options) {
     const min = options.min;
     const max = options.max;
     const keys = options.keys ?? ['value'];
-    let lastStartDate = startOfDay(new Date());
+    let lastStartDate = timeDay.floor(new Date());
     const timeSeries = Array.from({ length: count }).map((_, i) => {
-        const startDate = addMinutes(lastStartDate, getRandomInteger(0, 60));
-        const endDate = addMinutes(startDate, getRandomInteger(5, 60));
+        const startDate = timeMinute.offset(lastStartDate, getRandomInteger(0, 60));
+        const endDate = timeMinute.offset(startDate, getRandomInteger(5, 60));
         lastStartDate = startDate;
         return {
             name: `item ${i + 1}`,
@@ -124,3 +124,21 @@ export function getSpiral({ angle, radius, count, width, height, }) {
         };
     });
 }
+export function generateSineWave(options) {
+    const { numPoints, frequency = 1, amplitude = 1, noiseLevel = 0, phase = 0, xMin = 0, xMax = 2 * Math.PI, } = options;
+    if (numPoints <= 0) {
+        throw new Error('Number of points must be greater than 0');
+    }
+    const points = [];
+    const xStep = (xMax - xMin) / (numPoints - 1);
+    for (let i = 0; i < numPoints; i++) {
+        const x = xMin + i * xStep;
+        // Generate base sine wave
+        const sineValue = amplitude * Math.sin(frequency * x + phase);
+        // Add random noise if specified
+        const noise = noiseLevel > 0 ? (Math.random() - 0.5) * 2 * noiseLevel : 0;
+        const y = sineValue + noise;
+        points.push({ x, y });
+    }
+    return points;
+}

package/dist/utils/path.d.ts

@@ -17,5 +17,15 @@ export declare function spikePath({ x, y, width, height, }: {
     width: number;
     height: number;
 }): string;
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export declare function roundedPolygonPath(coords: {
+    x: number;
+    y: number;
+}[], radius: number): string;
 /** Flatten all `y` coordinates to `0` */
 export declare function flattenPathData(pathData: string, yOverride?: number): string;

package/dist/utils/path.js

@@ -36,6 +36,36 @@ export function spikePath({ x, y, width, height, }) {
   `;
     return pathData;
 }
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export function roundedPolygonPath(coords, radius) {
+    if (radius === 0) {
+        // Simple polygon with straight lines
+        return `M${coords[0].x},${coords[0].y}${coords
+            .slice(1)
+            .map((p) => `L${p.x},${p.y}`)
+            .join('')}Z`;
+    }
+    let path = '';
+    const length = coords.length + 1;
+    for (let i = 0; i < length; i++) {
+        const a = coords[i % coords.length];
+        const b = coords[(i + 1) % coords.length];
+        const t = Math.min(radius / Math.hypot(b.x - a.x, b.y - a.y), 0.5);
+        if (i == 0)
+            path += `M${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+        if (i > 0)
+            path += `Q${a.x},${a.y} ${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+        if (i < length - 1)
+            path += `L${a.x * t + b.x * (1 - t)},${a.y * t + b.y * (1 - t)}`;
+    }
+    path += 'Z';
+    return path;
+}
 /** Flatten all `y` coordinates to `0` */
 export function flattenPathData(pathData, yOverride = 0) {
     let result = pathData;

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

@@ -1,4 +1,4 @@
-import { type ScaleBand } from 'd3-scale';
+import { type ScaleBand, type ScaleTime } from 'd3-scale';
 import { type MotionProp, type MotionOptions, type SpringOptions, type TweenOptions } from './motion.svelte.js';
 import type { Accessor } from './common.js';
 import type { OnlyObjects } from './types.js';
@@ -23,6 +23,8 @@ export type AnyScale<TInput extends SingleDomainType = any, TOutput extends Sing
     thresholds?: () => TInput[];
     quantiles?: () => TInput[];
 };
+export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
+export declare function isScaleTime(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
 export declare function getRange(scale: any): any[];
 export type SingleDomainType = number | string | Date | null | undefined;
 export type DomainType = (number | string | Date | null | undefined)[] | null | undefined;
@@ -45,7 +47,6 @@ export declare function createMotionScale<Domain, Range>(scale: AnyScale, motion
  * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
  */
 export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number) => any;
-export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value

package/dist/utils/scales.svelte.js

@@ -5,6 +5,13 @@ import { Spring, Tween } from 'svelte/motion';
 function isAnyScale(scale) {
     return typeof scale === 'function' && typeof scale.range === 'function';
 }
+export function isScaleBand(scale) {
+    return typeof scale.bandwidth === 'function';
+}
+export function isScaleTime(scale) {
+    const domain = scale.domain();
+    return domain[0] instanceof Date || domain[1] instanceof Date;
+}
 export function getRange(scale) {
     if (isAnyScale(scale)) {
         return scale.range();
@@ -54,9 +61,6 @@ export function scaleBandInvert(scale) {
         return domain[Math.max(0, Math.min(index, domain.length - 1))];
     };
 }
-export function isScaleBand(scale) {
-    return typeof scale.bandwidth === 'function';
-}
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value

package/dist/utils/shape.d.ts

@@ -0,0 +1,43 @@
+/** Get points to create a polygon with given number of points and radius
+ *
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @returns Array of points (angle, radius)
+ */
+export declare function polygonPoints(count: number, radius: number, rotate?: number): {
+    angle: number;
+    radius: number;
+}[];
+/** Create polygon
+ *
+ * @param cx - Center x coordinate
+ * @param cy - Center y coordinate
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @param rotate - Rotation of the polygon (degrees)
+ * @param inset - Percent to inset odd points (<1 inset, >1 outset)
+ * @param scaleX - Horizontal stretch factor
+ * @param scaleY - Vertical stretch factor
+ * @param skewX - Skew angle in degrees along the X axis
+ * @param skewY - Skew angle in degrees along the Y axis
+ * @param tiltX - Tilt factor for x-coordinates (0 = no tilt, positive moves points top => down, negative moves points bottom => up)
+ * @param tiltY - Tilt factor for y-coordinates (0 = no tilt, positive moves points left => right, negative moves points right => left)
+ * @returns Array of points (x, y)
+ */
+export declare function polygon(options: {
+    cx: number;
+    cy: number;
+    count: number;
+    radius: number;
+    rotate?: number;
+    inset?: number;
+    scaleX?: number;
+    scaleY?: number;
+    skewX?: number;
+    skewY?: number;
+    tiltX?: number;
+    tiltY?: number;
+}): {
+    x: number;
+    y: number;
+}[];

package/dist/utils/shape.js

@@ -0,0 +1,59 @@
+import { range } from 'd3-array';
+import { degreesToRadians } from './math.js';
+/** Get points to create a polygon with given number of points and radius
+ *
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @returns Array of points (angle, radius)
+ */
+export function polygonPoints(count, radius, rotate = 0) {
+    const angle = 360 / count;
+    return range(count).map((index) => {
+        return {
+            angle: degreesToRadians(angle * index) + degreesToRadians(rotate),
+            radius,
+        };
+    });
+}
+/** Create polygon
+ *
+ * @param cx - Center x coordinate
+ * @param cy - Center y coordinate
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @param rotate - Rotation of the polygon (degrees)
+ * @param inset - Percent to inset odd points (<1 inset, >1 outset)
+ * @param scaleX - Horizontal stretch factor
+ * @param scaleY - Vertical stretch factor
+ * @param skewX - Skew angle in degrees along the X axis
+ * @param skewY - Skew angle in degrees along the Y axis
+ * @param tiltX - Tilt factor for x-coordinates (0 = no tilt, positive moves points top => down, negative moves points bottom => up)
+ * @param tiltY - Tilt factor for y-coordinates (0 = no tilt, positive moves points left => right, negative moves points right => left)
+ * @returns Array of points (x, y)
+ */
+export function polygon(options) {
+    const { cx, cy, count, radius, rotate = 0, inset = 1, scaleX = 1, scaleY = 1, skewX = 0, skewY = 0, tiltX = 0, tiltY = 0, } = options;
+    const skewXRad = degreesToRadians(skewX);
+    const skewYRad = degreesToRadians(skewY);
+    return polygonPoints(count, radius, rotate).map(({ angle, radius }, i) => {
+        // inset
+        const insetScale = i % 2 == 0 ? 1 : 1 - inset;
+        // scale
+        let x = radius * insetScale * Math.cos(angle) * scaleX;
+        let y = radius * insetScale * Math.sin(angle) * scaleY;
+        // tilt
+        const normalizedY = (y + radius) / (2 * radius);
+        const normalizedX = (x + radius) / (2 * radius);
+        const tiltScaleX = tiltX > 0 ? 1 + tiltX * (1 - normalizedY) : 1 - tiltX * normalizedY;
+        const tiltScaleY = tiltY > 0 ? 1 + tiltY * (1 - normalizedX) : 1 - tiltY * normalizedX;
+        x *= tiltScaleX;
+        y *= tiltScaleY;
+        // skew
+        const xSkewed = x + Math.tan(skewXRad) * y;
+        const ySkewed = y + Math.tan(skewYRad) * x;
+        return {
+            x: cx + xSkewed,
+            y: cy + ySkewed,
+        };
+    });
+}

package/dist/utils/string.d.ts

@@ -0,0 +1,49 @@
+export declare const getStringWidth: any;
+export type RasterizeTextOptions = {
+    fontSize?: string;
+    fontWeight?: number;
+    fontFamily?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+    spacing?: number;
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+};
+export declare function rasterizeText(text: string, options?: RasterizeTextOptions): number[][];
+export declare function toTitleCase(str: string): string;
+export type TruncateTextOptions = {
+    /**
+     * The maximum pixel width (optional if maxChars is provided).
+     */
+    maxWidth?: number;
+    /**
+     * CSS style for width calculation
+     */
+    style?: CSSStyleDeclaration;
+    /**
+     * The maximum character count
+     */
+    maxChars?: number;
+    /**
+     * Where to place the ellipsis: 'start', 'middle', or 'end'
+     *
+     * @default 'end'
+     */
+    position?: 'start' | 'middle' | 'end';
+    /**
+     * The character(s) to use as the ellipsis
+     *
+     * @default '…'
+     */
+    ellipsis?: string;
+};
+/**
+ * Truncates a string to fit within a specified pixel width or character count.
+ * If the string's width exceeds the maxWidth, it will be truncated. If the character
+ * count exceeds maxChars, it will also be truncated.
+ *
+ * The ellipsis can be placed at the start, middle, or end of the string.
+ */
+export declare function truncateText(text: string, { position, ellipsis, maxWidth, style, maxChars }: TruncateTextOptions): string;

package/dist/utils/string.js

@@ -1,4 +1,4 @@
-import { memoize } from 'lodash-es';
+import memoize from 'memoize';
 const MEASUREMENT_ELEMENT_ID = '__text_measurement_id';
 function _getStringWidth(str, style) {
     try {
@@ -24,7 +24,9 @@ function _getStringWidth(str, style) {
         return null;
     }
 }
-export const getStringWidth = memoize(_getStringWidth, (str, style) => `${str}_${JSON.stringify(style)}`);
+export const getStringWidth = memoize(_getStringWidth, {
+    cacheKey: ([str, style]) => `${str}_${JSON.stringify(style)}`,
+});
 export function rasterizeText(text, options = {}) {
     const fontSize = options.fontSize ?? '200px';
     const fontWeight = options.fontWeight ?? 600;

package/dist/utils/ticks.d.ts

@@ -1,9 +1,9 @@
 import { type TimeInterval } from 'd3-time';
+import { Duration, type FormatType, type FormatConfig } from '@layerstack/utils';
 import { type AnyScale } from './scales.svelte.js';
-export declare function getMajorTicks(start: Date, end: Date): TimeInterval | null;
-export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): string;
-export declare function getMinorTicks(start: Date, end: Date): TimeInterval | null;
+export declare function getDurationFormat(duration: Duration, multiline?: boolean): (date: Date, i: number) => string;
 export type TicksConfig = number | any[] | ((scale: AnyScale) => any[] | undefined) | {
     interval: TimeInterval | null;
 } | null;
-export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, placement?: 'radius' | 'top' | 'bottom' | 'left' | 'right' | 'angle'): any[];
+export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number): any[];
+export declare function resolveTickFormat(scale: AnyScale, ticks?: TicksConfig, count?: number, formatType?: FormatType | FormatConfig, multiline?: boolean): (date: Date, i: number) => string;