From 41f815ac2a68827e616b9c4c859c0f55b297b79a Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Fri, 9 May 2025 12:55:00 -0400 Subject: [PATCH] breaking(AnnotationLine|AnnotationPoint): Change `labelOffset` into explicit `labelXOffset` and `labelYOffset` for greater control (aligns with AnnotationRange) --- .changeset/blue-doodles-chew.md | 5 ++ .../src/lib/components/AnnotationLine.svelte | 46 +++++++------------ .../src/lib/components/AnnotationPoint.svelte | 24 +++++----- .../components/AnnotationLine/+page.svelte | 19 +++++--- .../components/AnnotationPoint/+page.svelte | 15 +++--- .../docs/components/AreaChart/+page.svelte | 5 +- .../docs/components/BarChart/+page.svelte | 2 +- .../docs/components/LineChart/+page.svelte | 5 +- .../docs/components/ScatterChart/+page.svelte | 8 ++-- 9 files changed, 66 insertions(+), 63 deletions(-) create mode 100644 .changeset/blue-doodles-chew.md diff --git a/.changeset/blue-doodles-chew.md b/.changeset/blue-doodles-chew.md new file mode 100644 index 000000000..430f02acf --- /dev/null +++ b/.changeset/blue-doodles-chew.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +breaking(AnnotationLine|AnnotationPoint): Change `labelOffset` into explicit `labelXOffset` and `labelYOffset` for greater control (aligns with AnnotationRange) diff --git a/packages/layerchart/src/lib/components/AnnotationLine.svelte b/packages/layerchart/src/lib/components/AnnotationLine.svelte index ef9f8d22d..e2d35c73c 100644 --- a/packages/layerchart/src/lib/components/AnnotationLine.svelte +++ b/packages/layerchart/src/lib/components/AnnotationLine.svelte @@ -17,8 +17,11 @@ /** Placement of the label */ labelPlacement?: Placement; - /** Offset of the label */ - labelOffset?: number; + /** X offset of the label */ + labelXOffset?: number; + + /** Y offset of the label */ + labelYOffset?: number; /** Classes for inner elements */ props?: { @@ -44,7 +47,8 @@ y, label, labelPlacement = 'top-right', - labelOffset = 0, + labelXOffset = 0, + labelYOffset = 0, props, }: AnnotationLineProps = $props(); @@ -62,25 +66,17 @@ const labelProps = $derived>( isVertical ? { - x: - line.x1 + - (['top', 'bottom'].includes(labelPlacement) - ? 0 // Offset applies to `y` - : labelPlacement.includes('left') - ? -labelOffset - : labelOffset), + x: line.x1 + (labelPlacement.includes('left') ? -labelXOffset : labelXOffset), y: (labelPlacement.includes('top') ? line.y2 : labelPlacement.includes('bottom') ? line.y1 : (line.y1 - line.y2) / 2) + - (labelPlacement === 'top' - ? -labelOffset - : labelPlacement === 'bottom' - ? labelOffset - : 0), - dy: -2, // adjust for smaler font size + (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement) + ? -labelYOffset + : labelYOffset), + dy: -2, // adjust for smaller font size textAnchor: labelPlacement.includes('left') ? 'end' : labelPlacement.includes('right') @@ -104,19 +100,11 @@ : labelPlacement.includes('right') ? line.x2 : (line.x2 - line.x1) / 2) + - (labelPlacement === 'left' - ? -labelOffset - : labelPlacement === 'right' - ? labelOffset - : 0), - y: - line.y1 + - (['left', 'right'].includes(labelPlacement) - ? 0 // Offset applies to `x` - : labelPlacement.includes('top') - ? -labelOffset - : labelOffset), - dy: -2, // adjust for smaler font size + (['left', 'top-right', 'bottom-right'].includes(labelPlacement) + ? -labelXOffset + : labelXOffset), + y: line.y1 + (labelPlacement.includes('top') ? -labelYOffset : labelYOffset), + dy: -2, // adjust for smaller font size textAnchor: labelPlacement === 'left' ? 'end' // place beside line diff --git a/packages/layerchart/src/lib/components/AnnotationPoint.svelte b/packages/layerchart/src/lib/components/AnnotationPoint.svelte index 37f568f2e..64ecb37a1 100644 --- a/packages/layerchart/src/lib/components/AnnotationPoint.svelte +++ b/packages/layerchart/src/lib/components/AnnotationPoint.svelte @@ -20,8 +20,11 @@ /** Placement of the label */ labelPlacement?: Placement; - /** Offset of the label */ - labelOffset?: number; + /** X offset of the label */ + labelXOffset?: number; + + /** Y offset of the label */ + labelYOffset?: number; /** Details (description, etc) useful to display in tooltip */ details?: any; @@ -51,7 +54,8 @@ r = 4, label, labelPlacement = 'center', - labelOffset = 0, + labelXOffset = 0, + labelYOffset = 0, details, props, }: AnnotationPointProps = $props(); @@ -66,18 +70,12 @@ const labelProps = $derived>({ x: point.x + - (labelPlacement.includes('left') - ? -(r + labelOffset) - : labelPlacement.includes('right') - ? r + labelOffset - : 0), + ((['top', 'center', 'bottom'].includes(labelPlacement) ? 0 : r) + labelXOffset) * + (labelPlacement.includes('left') ? -1 : 1), y: point.y + - (labelPlacement.includes('top') - ? -(r + labelOffset) - : labelPlacement.includes('bottom') - ? r + labelOffset - : 0), + ((['left', 'center', 'right'].includes(labelPlacement) ? 0 : r) + labelYOffset) * + (labelPlacement.includes('top') ? -1 : 1), dy: -2, // adjust for smaler font size textAnchor: labelPlacement.includes('left') ? 'end' diff --git a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte index 41f7aceda..7ef51b8c2 100644 --- a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte @@ -58,7 +58,8 @@ 'bottom-right', ] as const; let placement: Placement = $state('top-right'); - let offset = $state(0); + let xOffset = $state(0); + let yOffset = $state(0); let renderContext: 'svg' | 'canvas' = $state('svg'); let debug = $state(false); @@ -97,7 +98,7 @@ - + + @@ -181,7 +183,8 @@ y={500} label={placement} labelPlacement={placement} - labelOffset={offset} + labelXOffset={xOffset} + labelYOffset={yOffset} props={{ line: { class: '[stroke-dasharray:2,2] stroke-danger' }, label: { class: 'fill-danger' }, @@ -217,7 +220,8 @@ - + + @@ -237,7 +241,8 @@ x={new Date('2010-03-30')} label={placement} labelPlacement={placement} - labelOffset={offset} + labelXOffset={xOffset} + labelYOffset={yOffset} props={{ line: { class: '[stroke-dasharray:2,2] stroke-danger' }, label: { class: 'fill-danger' }, @@ -317,7 +322,7 @@ y={500} label="Max" labelPlacement="bottom-right" - labelOffset={2} + labelYOffset={2} props={{ line: { class: '[stroke-dasharray:2,2] _stroke-danger' }, }} diff --git a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte index 9ddb630cd..c2e1b8a5a 100644 --- a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte @@ -61,7 +61,8 @@ 'bottom-right', ] as const; let placement: Placement = $state('top'); - let offset = $state(0); + let xOffset = $state(0); + let yOffset = $state(0); let radius = $state(4); let renderContext: 'svg' | 'canvas' = $state('svg'); @@ -276,7 +277,7 @@ y={lastPoint.value} label="Apple" labelPlacement="right" - labelOffset={4} + labelXOffset={4} props={{ circle: { class: 'fill-primary' }, label: { class: 'fill-primary font-bold' }, @@ -289,7 +290,7 @@

Label placement

-
+
@@ -312,8 +313,9 @@ - + +
@@ -336,7 +338,8 @@ r={radius} label={placement} labelPlacement={placement} - labelOffset={offset} + labelXOffset={xOffset} + labelYOffset={yOffset} props={{ circle: { class: 'fill-secondary' }, label: { class: 'fill-secondary font-bold' }, @@ -359,7 +362,7 @@ r={4} label="Featured" labelPlacement="bottom" - labelOffset={16} + labelYOffset={16} props={{ circle: { class: 'fill-secondary' }, label: { class: 'text-xs fill-secondary font-bold' }, diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte index 31c485612..e6113fc48 100644 --- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte @@ -1151,7 +1151,8 @@ type: 'line', y: 500, label: 'Max', - labelOffset: 4, + labelXOffset: 4, + labelYOffset: 2, props: { label: { class: 'fill-danger' }, line: { class: '[stroke-dasharray:2,2] stroke-danger' }, @@ -1240,7 +1241,7 @@ seriesKey: s.key, label: s.key, labelPlacement: 'right', - labelOffset: 4, + labelXOffset: 4, x: lastDataPoint.date, y: lastDataPoint.value, props: { diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte index d4135ee08..a8954fe70 100644 --- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte @@ -1463,7 +1463,7 @@ r: 4, label: 'Today', labelPlacement: 'bottom', - labelOffset: 16, + labelYOffset: 16, props: { circle: { class: 'fill-secondary' }, label: { class: 'text-xs fill-secondary font-bold' }, diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte index d90cb3cb2..ee00edee8 100644 --- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte @@ -915,7 +915,8 @@ type: 'line', y: 500, label: 'Max', - labelOffset: 4, + labelXOffset: 4, + labelYOffset: 2, props: { label: { class: 'fill-danger' }, line: { class: '[stroke-dasharray:2,2] stroke-danger' }, @@ -1005,7 +1006,7 @@ seriesKey: s.key, label: s.key, labelPlacement: 'right', - labelOffset: 4, + labelXOffset: 4, x: lastDataPoint.date, y: lastDataPoint.value, props: { diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte index 09f54aa50..2c995917b 100644 --- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte @@ -377,7 +377,7 @@ layer: 'below', label: 'First point', labelPlacement: 'top', - labelOffset: 4, + labelYOffset: 4, x: spiralData[0].x, y: spiralData[0].y, r: 10, @@ -391,7 +391,7 @@ layer: 'below', label: 'Last point', labelPlacement: 'top', - labelOffset: 4, + labelYOffset: 4, x: spiralData[spiralData.length - 1].x, y: spiralData[spiralData.length - 1].y, r: 10, @@ -423,6 +423,8 @@ { type: 'line', label: 'Max', + labelXOffset: 4, + labelYOffset: 2, y: 320, props: { label: { class: 'fill-danger' }, @@ -490,7 +492,7 @@ y: [230, 270], label: 'Range', labelPlacement: 'bottom', - labelYOffset: 4, + labelYOffset: -16, pattern: { size: 8, lines: {