layerchart 2.0.0-next.4 → 2.0.0-next.40

package/dist/utils/genData.d.ts

@@ -23,21 +23,21 @@ export declare function createSeries<TKey extends string>(options: {
 }): ({
     x: number;
 } & { [K in TKey]: number; })[];
-export declare function createDateSeries<TKey extends string>(options: {
+export declare function createDateSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
+    min?: number;
+    max?: number;
     keys?: TKey[];
     value?: 'number' | 'integer';
 }): ({
     date: Date;
 } & { [K in TKey]: number; })[];
-export declare function createTimeSeries<TKey extends string>(options: {
+export declare function createTimeSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
-    keys: TKey[];
-    value: 'number' | 'integer';
+    min?: number;
+    max?: number;
+    keys?: TKey[];
+    value?: 'number' | 'integer';
 }): ({
     name: string;
     startDate: Date;
@@ -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';
@@ -43,33 +43,35 @@ export function createSeries(options) {
         };
     });
 }
-export function createDateSeries(options) {
-    const now = startOfToday();
+export function createDateSeries(options = {}) {
+    const now = timeDay.floor(new Date());
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
+    const valueType = options.value ?? 'number';
     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,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };
     });
 }
-export function createTimeSeries(options) {
+export function createTimeSeries(options = {}) {
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
-    let lastStartDate = startOfDay(new Date());
+    const valueType = options.value ?? 'number';
+    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}`,
@@ -78,7 +80,7 @@ export function createTimeSeries(options) {
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };
@@ -124,3 +126,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/graph/dagre.d.ts

@@ -25,10 +25,10 @@ export declare function dagreGraph(data: DagreProps['data'], { nodes, nodeId, ed
     filterNodes?: DagreProps['filterNodes'];
 }): dagre.graphlib.Graph<{}>;
 /**
- * Get all upstream predecessors for dagre nodeId
+ * Get all upstream predecessors ids for dagre nodeId
  */
-export declare function dagreAncestors(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): dagre.Node[];
+export declare function dagreAncestors(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): string[];
 /**
- * Get all downstream descendants for dagre nodeId
+ * Get all downstream descendants ids for dagre nodeId
  */
-export declare function dagreDescendants(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): dagre.Node[];
+export declare function dagreDescendants(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): string[];

package/dist/utils/graph/dagre.js

@@ -49,7 +49,7 @@ export function dagreGraph(data, { nodes = (d) => d.nodes, nodeId = (d) => d.id,
     return g;
 }
 /**
- * Get all upstream predecessors for dagre nodeId
+ * Get all upstream predecessors ids for dagre nodeId
  */
 export function dagreAncestors(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
     if (currentDepth === maxDepth) {
@@ -58,21 +58,19 @@ export function dagreAncestors(graph, nodeId, maxDepth = Infinity, currentDepth
     const predecessors = graph.predecessors(nodeId) ?? [];
     return [
         ...predecessors,
-        // @ts-expect-error: Types from dagre appear incorrect
         ...predecessors.flatMap((pId) => dagreAncestors(graph, pId, maxDepth, currentDepth + 1)),
     ];
 }
 /**
- * Get all downstream descendants for dagre nodeId
+ * Get all downstream descendants ids for dagre nodeId
  */
 export function dagreDescendants(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
     if (currentDepth === maxDepth) {
         return [];
     }
-    const predecessors = graph.successors(nodeId) ?? [];
+    const successors = graph.successors(nodeId) ?? [];
     return [
-        ...predecessors,
-        // @ts-expect-error: Types from dagre appear incorrect
-        ...predecessors.flatMap((pId) => dagreDescendants(graph, pId, maxDepth, currentDepth + 1)),
+        ...successors,
+        ...successors.flatMap((pId) => dagreDescendants(graph, pId, maxDepth, currentDepth + 1)),
     ];
 }

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { applyLanes } from './array.js';
 export * from './canvas.js';
 export * from './common.js';
 export * from './geo.js';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export { applyLanes } from './array.js';
 export * from './canvas.js';
 export * from './common.js';
 export * from './geo.js';

package/dist/utils/math.d.ts

@@ -23,6 +23,23 @@ export declare function cartesianToPolar(x: number, y: number): {
     radius: number;
     radians: number;
 };
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export declare function pointsToAngleAndLength(point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}): {
+    radians: number;
+    angle: number;
+    length: number;
+};
 /** Convert celsius temperature to fahrenheit */
 export declare function celsiusToFahrenheit(temperature: number): number;
 /** Convert fahrenheit temperature to celsius */

package/dist/utils/math.js

@@ -37,6 +37,23 @@ export function cartesianToPolar(x, y) {
         radians,
     };
 }
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export function pointsToAngleAndLength(point1, point2) {
+    const dx = point2.x - point1.x;
+    const dy = point2.y - point1.y;
+    const radians = Math.atan2(dy, dx);
+    const length = Math.sqrt(dx * dx + dy * dy);
+    return {
+        radians,
+        angle: radiansToDegrees(radians),
+        length,
+    };
+}
 /** Convert celsius temperature to fahrenheit */
 export function celsiusToFahrenheit(temperature) {
     return temperature * (9 / 5) + 32;

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/rect.svelte.d.ts

@@ -36,10 +36,10 @@ export declare function createDimensionGetter<TData>(ctx: ChartContextValue<TDat
     y: any;
     width: number;
     height: number;
-};
+} | undefined;
 /**
  * If value is an array, returns first item, else returns original value
  * Useful when x/y getters for band scale are an array (such as for histograms)
  */
-export declare function firstValue(value: number | number[]): number;
+export declare function firstValue(value: number | number[] | undefined): number | undefined;
 export {};

package/dist/utils/rect.svelte.js

@@ -59,7 +59,7 @@ export function createDimensionGetter(ctx, getOptions) {
             const width = Math.max(0, ctx.xScale(right) - ctx.xScale(left) - insets.left - insets.right);
             return { x, y, width, height };
         }
-        else {
+        else if (isScaleBand(ctx.xScale)) {
             // Vertical band or linear
             const x = firstValue(ctx.xScale(_x(item))) + (ctx.x1Scale ? ctx.x1Scale(_x1(item)) : 0) + insets.left;
             const width = Math.max(0, ctx.xScale.bandwidth
@@ -90,10 +90,82 @@ export function createDimensionGetter(ctx, getOptions) {
                 top = min([0, yDomainMinMax[1]]);
                 bottom = yValue;
             }
+            // If yRange is inverted (drawing from top), swap top and bottom
+            if (ctx.yRange[0] < ctx.yRange[1]) {
+                [top, bottom] = [bottom, top];
+            }
+            const y = ctx.yScale(top) + insets.top;
+            const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
+            return { x, y, width, height };
+        }
+        else if (ctx.xInterval) {
+            // x-axis time scale with interval
+            const xValue = _x(item);
+            const start = ctx.xInterval.floor(xValue);
+            const end = ctx.xInterval.offset(start);
+            const x = ctx.xScale(start) + insets.left;
+            const width = ctx.xScale(end) - x - insets.right;
+            const yValue = _y(item);
+            let top = 0;
+            let bottom = 0;
+            if (Array.isArray(yValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                top = max(yValue);
+                bottom = min(yValue);
+            }
+            else if (yValue == null) {
+                // null/undefined value
+                top = 0;
+                bottom = 0;
+            }
+            else if (yValue > 0) {
+                // Positive value
+                top = yValue;
+                bottom = max([0, yDomainMinMax[0]]);
+            }
+            else {
+                // Negative value
+                top = min([0, yDomainMinMax[1]]);
+                bottom = yValue;
+            }
             const y = ctx.yScale(top) + insets.top;
             const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
             return { x, y, width, height };
         }
+        else if (ctx.yInterval) {
+            // y-axis time scale with interval
+            const yValue = _y(item);
+            const start = ctx.yInterval.floor(yValue);
+            const end = ctx.yInterval.offset(start);
+            const y = ctx.yScale(start) + insets.top;
+            const height = ctx.yScale(end) - y - insets.bottom;
+            const xValue = _x(item);
+            let left = 0;
+            let right = 0;
+            if (Array.isArray(xValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                left = min(xValue);
+                right = max(xValue);
+            }
+            else if (xValue == null) {
+                // null/undefined value
+                left = 0;
+                right = 0;
+            }
+            else if (xValue > 0) {
+                // Positive value
+                left = max([0, xDomainMinMax[0]]);
+                right = xValue;
+            }
+            else {
+                // Negative value
+                left = xValue;
+                right = min([0, xDomainMinMax[1]]);
+            }
+            const x = ctx.xScale(left) + insets.left;
+            const width = ctx.xScale(right) - x - insets.right;
+            return { x, y, width, height };
+        }
     };
 }
 /**

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

@@ -1,6 +1,6 @@
-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 Accessor } from './common.js';
 import type { OnlyObjects } from './types.js';
 export type AnyScale<TInput extends SingleDomainType = any, TOutput extends SingleDomainType = any, TScaleArgs extends any[] | readonly any[] = any[]> = {
     (value: TInput): TOutput;
@@ -23,6 +23,9 @@ 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 isScaleNumeric(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 +48,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
@@ -53,6 +55,10 @@ export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBa
 export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
 /** Create new copy of scale with domain and range */
 export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any[]>;
+/**
+ * Auto-detect scale type based on domain values or data values
+ */
+export declare function autoScale(domain?: DomainType, data?: any[], propAccessor?: Accessor<any>): AnyScale;
 /**
  * Create a `scaleBand()` within another scaleBand()'s bandwidth
  * (typically a x1 of an x0 scale, used for grouping)

package/dist/utils/scales.svelte.js

@@ -1,10 +1,22 @@
 import { unique } from '@layerstack/utils';
-import { scaleBand } from 'd3-scale';
+import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
 import { createControlledMotion, } from './motion.svelte.js';
 import { Spring, Tween } from 'svelte/motion';
+import { accessor } from './common.js';
 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 isScaleNumeric(scale) {
+    const domain = scale.domain();
+    return typeof domain[0] === 'number' || typeof domain[1] === 'number';
+}
 export function getRange(scale) {
     if (isAnyScale(scale)) {
         return scale.range();
@@ -54,9 +66,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
@@ -83,6 +92,40 @@ export function createScale(scale, domain, range, context) {
     }
     return scaleCopy;
 }
+/**
+ * Auto-detect scale type based on domain values or data values
+ */
+export function autoScale(domain, data, propAccessor) {
+    let values = null;
+    if (domain && domain.length > 0 && domain.some((d) => d != null)) {
+        // Determine based on non-null domain values
+        values = domain.filter((d) => d != null);
+    }
+    else if (data && data.length > 0 && propAccessor) {
+        // Determine based on data values
+        const value = accessor(propAccessor)(data[0]);
+        // If accessor defined with an array (ex. `x={['start', 'end']}`) use both values
+        if (Array.isArray(value)) {
+            values = value;
+        }
+        else {
+            values = [value];
+        }
+    }
+    if (values) {
+        if (values.some((v) => v instanceof Date)) {
+            return scaleTime();
+        }
+        else if (values.some((v) => typeof v === 'number')) {
+            return scaleLinear();
+        }
+        else if (values.some((v) => typeof v === 'string')) {
+            return scaleBand();
+        }
+    }
+    // fallback to linear scale
+    return scaleLinear();
+}
 /**
  * Create a `scaleBand()` within another scaleBand()'s bandwidth
  * (typically a x1 of an x0 scale, used for grouping)

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/stack.js

@@ -91,7 +91,7 @@ export function stackOffsetSeparated(series, order) {
         return;
     // Standard series
     for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
-        (s0 = s1), (s1 = series[order[i]]);
+        ((s0 = s1), (s1 = series[order[i]]));
         // @ts-expect-error
         let base = max(s0, (d) => d[1]) + gap; // here is where you calculate the maximum of the previous layer
         for (var j = 0; j < m; ++j) {