@mhkeller/layercake-annotations 0.3.2 → 0.4.0

package/dist/README.md

@@ -38,8 +38,10 @@ src/lib/
 ```typescript
 {
   id: number,              // Unique identifier
-  [xKey]: any,             // X data value (key from LayerCake config)
-  [yKey]: any,             // Y data value (key from LayerCake config)
+  data: {                  // User data values (nested to avoid key collisions)
+    [xKey]: any,           // X data value (key from LayerCake config)
+    [yKey]: any            // Y data value (key from LayerCake config)
+  },
   dx: number,              // X offset: -100 to 100 (percentage of chart width)
   dy: number,              // Y offset: -100 to 100 (percentage of chart height)
   text: string,            // Annotation text (supports line breaks)
@@ -62,8 +64,10 @@ src/lib/
     dy: number             // Pixels from annotation vertical center
   },
   target: {
-    [xKey]: any,           // X data value (same accessor as LayerCake)
-    [yKey]: any,           // Y data value
+    data: {                // User data values (nested to avoid key collisions)
+      [xKey]: any,         // X data value (same accessor as LayerCake)
+      [yKey]: any          // Y data value
+    },
     dx?: number,           // 0-100: % offset within ordinal band (X)
     dy?: number            // 0-100: % offset within ordinal band (Y)
   }
@@ -77,13 +81,13 @@ The library uses multiple coordinate systems:
 ### Annotation Position
 
 ```
-Final position = scale(dataValue) + (dx/100 × chartDimension)
+Final position = scale(data[key]) + (dx/100 × chartDimension)
 ```
 
 | Property | Unit | Range | Example |
 |----------|------|-------|---------|
-| `[xKey]` | Data value | Depends on data | `new Date('2024-01-15')` |
-| `[yKey]` | Data value | Depends on data | `42` |
+| `data.[xKey]` | Data value | Depends on data | `new Date('2024-01-15')` |
+| `data.[yKey]` | Data value | Depends on data | `42` |
 | `dx` | % of chart width | -100 to 100 | `5` = 5% right |
 | `dy` | % of chart height | -100 to 100 | `-10` = 10% up |
 
@@ -100,7 +104,7 @@ Pixels relative to annotation box edge:
 
 | Property | Unit | When used |
 |----------|------|-----------|
-| `[xKey]`, `[yKey]` | Data values | Always (same keys as LayerCake config) |
+| `data.[xKey]`, `data.[yKey]` | Data values | Always (same keys as LayerCake config) |
 | `dx`, `dy` | % within band (0-100) | Only for ordinal scales |
 
 ## Keyboard Shortcuts

package/dist/components/AnnotationEditor.svelte

@@ -41,8 +41,8 @@
 	/**
 	 * Coordinates
 	 */
-	let left = $derived(`calc(${$xGet(d)}${units} + ${d.dx}%)`);
-	let top = $derived(`calc(${$yGet(d)}${units} + ${d.dy}%)`);
+	let left = $derived(`calc(${$xGet(d.data)}${units} + ${d.dx}%)`);
+	let top = $derived(`calc(${$yGet(d.data)}${units} + ${d.dy}%)`);
 
 	/**
 	 * @param {Array} [position] - The x and y pixel coordinates of the draggable element.
@@ -52,10 +52,21 @@
 		const xVal = x ? invertScale($xScale, x) : [];
 		const yVal = y ? invertScale($yScale, y) : [];
 
-		const newProps = filterObject(
+		// Build data object, preserving existing values and overlaying new ones
+		const newData = filterObject(
 			{
+				...d.data,
 				[$config.x]: xVal[0],
-				[$config.y]: yVal[0],
+				[$config.y]: yVal[0]
+			},
+			(d) => d !== undefined
+		);
+
+		/** @type {Record<string, unknown>} */
+		const newProps = filterObject(
+			{
+				// Only include data if it has values (avoid overwriting with empty object)
+				data: Object.keys(newData).length > 0 ? newData : undefined,
 				dx: xVal[1],
 				dy: yVal[1]
 			},

package/dist/components/AnnotationsData.svelte

@@ -21,8 +21,8 @@
 		<div
 			class="static-wrapper"
 			data-id={i}
-			style:left={`calc(${$xGet(d)}${units} + ${d.dx || 0}%)`}
-			style:top={`calc(${$yGet(d)}${units} + ${d.dy || 0}%)`}
+			style:left={`calc(${$xGet(d.data)}${units} + ${d.dx || 0}%)`}
+			style:top={`calc(${$yGet(d.data)}${units} + ${d.dy || 0}%)`}
 			style:width={d.width}
 		>
 			<div class="layercake-annotation {d.class || ''}" style={d.style} style:text-align={d.align || 'left'}>

package/dist/components/ArrowZone.svelte

@@ -217,8 +217,10 @@
 					clockwise,
 					source: { dx: newSourceDx, dy: newSourceDy },
 					target: {
-						[$config.x]: targetDataX,
-						[$config.y]: targetDataY,
+						data: {
+							[$config.x]: targetDataX,
+							[$config.y]: targetDataY
+						},
 						dx: targetOffsetX,
 						dy: targetOffsetY
 					}
@@ -242,8 +244,10 @@
 					dy: arrow?.source?.dy ?? defaultSourceDy
 				},
 				target: {
-					[$config.x]: targetDataX,
-					[$config.y]: targetDataY,
+					data: {
+						[$config.x]: targetDataX,
+						[$config.y]: targetDataY
+					},
 					dx: targetOffsetX,
 					dy: targetOffsetY
 				}

package/dist/modules/coordinates.js

@@ -37,9 +37,9 @@ export function getAnnotationBox(anno, scales) {
 	const offsetX = ((anno.dx ?? 0) / 100) * width;
 	const offsetY = ((anno.dy ?? 0) / 100) * height;
 
-	// Calculate top-left position
-	const left = xScale(x(anno)) + offsetX;
-	const top = yScale(y(anno)) + offsetY;
+	// Calculate top-left position (data values are nested in anno.data)
+	const left = xScale(x(anno.data)) + offsetX;
+	const top = yScale(y(anno.data)) + offsetY;
 
 	// Get width (stored as "150px" string or use default)
 	const annoWidth = anno.width ? parseInt(anno.width) : DEFAULT_ANNOTATION_WIDTH;
@@ -90,9 +90,9 @@ export function getArrowSource(anno, arrow, scales, annoHeight = 0) {
 export function getArrowTarget(arrow, scales) {
 	const { xScale, yScale, x, y, width, height } = scales;
 
-	// Target is in data space
-	const baseX = xScale(x(arrow.target));
-	const baseY = yScale(y(arrow.target));
+	// Target is in data space (data values are nested in arrow.target.data)
+	const baseX = xScale(x(arrow.target.data));
+	const baseY = yScale(y(arrow.target.data));
 
 	// Add percentage offsets (used for ordinal scales)
 	const offsetX = ((arrow.target?.dx ?? 0) / 100) * width;

package/dist/modules/newAnnotation.js

@@ -15,8 +15,10 @@ export default function newAnnotation(e, id, { xScale, yScale, config }) {
 
 	return {
 		id,
-		[config.x]: xVal[0],
-		[config.y]: yVal[0],
+		data: {
+			[config.x]: xVal[0],
+			[config.y]: yVal[0]
+		},
 		dx: xVal[1],
 		dy: yVal[1],
 		text: 'New note...',

package/dist/types.d.ts

@@ -16,9 +16,8 @@ export interface ArrowSource {
  * Arrow target position (data space coordinates)
  */
 export interface ArrowTarget {
-	/** X data value (key varies based on LayerCake config) */
-	[xKey: string]: unknown;
-	/** Y data value (key varies based on LayerCake config) */
+	/** User data values (x/y keys match LayerCake config) */
+	data: Record<string, unknown>;
 	/** Percentage offset for ordinal X scales (0-100) */
 	dx?: number;
 	/** Percentage offset for ordinal Y scales (0-100) */
@@ -45,9 +44,8 @@ export interface Arrow {
 export interface Annotation {
 	/** Unique identifier */
 	id: number;
-	/** X data value (key varies based on LayerCake config, e.g., 'date' or 'x') */
-	[xKey: string]: unknown;
-	/** Y data value (key varies based on LayerCake config, e.g., 'value' or 'y') */
+	/** User data values (x/y keys match LayerCake config) */
+	data: Record<string, unknown>;
 	/** Percentage offset from data point in X direction */
 	dx: number;
 	/** Percentage offset from data point in Y direction */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhkeller/layercake-annotations",
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm package",