layerchart 2.0.0-next.23 → 2.0.0-next.25

package/dist/components/Axis.svelte

@@ -207,7 +207,16 @@
         : undefined
   );
   const tickVals = $derived(resolveTickVals(scale, ticks, tickCount));
-  const tickFormat = $derived(resolveTickFormat(scale, ticks, tickCount, format, tickMultiline));
+  const tickFormat = $derived(
+    resolveTickFormat({
+      scale,
+      ticks,
+      count: tickCount,
+      formatType: format,
+      multiline: tickMultiline,
+      placement,
+    })
+  );
 
   function getCoords(tick: any) {
     switch (placement) {
@@ -255,14 +264,14 @@
         return {
           textAnchor: 'middle',
           verticalAnchor: 'end',
-          dy: -tickLength - 2, // manually adjusted until Text supports custom styles
+          dy: -tickLength,
         };
 
       case 'bottom':
         return {
           textAnchor: 'middle',
           verticalAnchor: 'start',
-          dy: tickLength, // manually adjusted until Text supports custom styles
+          dy: tickLength,
         };
 
       case 'left':
@@ -270,7 +279,6 @@
           textAnchor: 'end',
           verticalAnchor: 'middle',
           dx: -tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'right':
@@ -278,7 +286,6 @@
           textAnchor: 'start',
           verticalAnchor: 'middle',
           dx: tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'angle':
@@ -293,7 +300,7 @@
                 ? 'end'
                 : 'start',
           verticalAnchor: 'middle',
-          dx: Math.sin(xValue) * (tickLength + 2),
+          dx: Math.sin(xValue) * tickLength,
           dy: -Math.cos(xValue) * (tickLength + 4), // manually adjusted until Text supports custom styles
         };
 
@@ -302,7 +309,6 @@
           textAnchor: 'middle',
           verticalAnchor: 'middle',
           dx: 2,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
     }
   }
@@ -407,6 +413,9 @@
       value: tickFormat(tick, index),
       ...getDefaultTickLabelProps(tick),
       motion,
+      // complement 10px text (until Text supports custom styles)
+      capHeight: '7px',
+      lineHeight: '11px',
       ...tickLabelProps,
       class: cls(
         layerClass('axis-tick-label'),

package/dist/components/Legend.svelte

@@ -86,9 +86,9 @@
       title?: string;
       label?: string;
       tick?: string;
-      swatches?: string;
+      items?: string;
       swatch?: string;
-      item?: (item: LegendItem) => string;
+      item?: string | ((item: LegendItem) => string);
     };
 
     /**
@@ -383,7 +383,7 @@
         layerClass('legend-swatch-group'),
         'flex gap-x-4 gap-y-1',
         orientation === 'vertical' && 'flex-col',
-        classes.swatches
+        classes.items
       )}
     >
       {#each scaleConfig.tickValues ?? scaleConfig.xScale?.ticks?.(ticks) ?? [] as tick}
@@ -392,22 +392,26 @@
         <button
           class={cls(
             layerClass('legend-swatch-button'),
-            'flex gap-1',
+            'flex items-center gap-1 truncate',
             !onclick && 'cursor-auto',
-            classes.item?.(item)
+            typeof classes.item === 'function' ? classes.item(item) : classes.item
           )}
           onclick={(e) => onclick?.(e, item)}
           onpointerenter={(e) => onpointerenter?.(e, item)}
           onpointerleave={(e) => onpointerleave?.(e, item)}
         >
           <div
-            class={cls(layerClass('legend-swatch'), 'h-4 w-4 rounded-full', classes.swatch)}
+            class={cls(
+              layerClass('legend-swatch'),
+              'h-4 w-4 shrink-0 rounded-full',
+              classes.swatch
+            )}
             style:background-color={color}
           ></div>
           <div
             class={cls(
               layerClass('legend-swatch-label'),
-              'text-xs text-surface-content whitespace-nowrap',
+              'text-xs text-surface-content truncate whitespace-nowrap',
               classes.label
             )}
           >

package/dist/components/Legend.svelte.d.ts

@@ -73,9 +73,9 @@ export type LegendPropsWithoutHTML = {
         title?: string;
         label?: string;
         tick?: string;
-        swatches?: string;
+        items?: string;
         swatch?: string;
-        item?: (item: LegendItem) => string;
+        item?: string | ((item: LegendItem) => string);
     };
     /**
      * A bindable reference to the wrapping `<div>` element.

package/dist/components/Text.svelte

@@ -337,21 +337,11 @@
 
   const startDy = $derived.by(() => {
     if (verticalAnchor === 'start') {
-      return getPixelValue(capHeight);
+      return getPixelValue(lineHeight);
     } else if (verticalAnchor === 'middle') {
       return ((lineCount - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
     } else {
-      return (lineCount - 1) * -getPixelValue(lineHeight);
-    }
-  });
-
-  const pathStartDy = $derived.by(() => {
-    if (verticalAnchor === 'start') {
-      return getPixelValue(capHeight);
-    } else if (verticalAnchor === 'middle') {
-      return (0 / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
-    } else {
-      return 0 * -getPixelValue(lineHeight);
+      return (lineCount - 1) * -getPixelValue(lineHeight) - getPixelValue(capHeight) / 2;
     }
   });
 
@@ -537,7 +527,7 @@
         {#each wordsByLines as line, index}
           <tspan
             x={motionX.current}
-            dy={index === 0 ? startDy : lineHeight}
+            dy={index === 0 ? startDy : getPixelValue(lineHeight)}
             class={layerClass('text-tspan')}
           >
             {line.words.join(' ')}

package/dist/components/charts/ArcChart.svelte

@@ -384,7 +384,9 @@
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...restProps}
-  tooltip={tooltip === false ? false : props.tooltip?.context}
+  tooltip={tooltip === false
+    ? false
+    : { ...props.tooltip?.context, ...(typeof tooltip === 'object' ? tooltip : null) }}
 >
   {#snippet children({ context })}
     {@const snippetProps = {

package/dist/components/charts/AreaChart.svelte

@@ -443,10 +443,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/components/charts/BarChart.svelte

@@ -455,6 +455,7 @@
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/components/charts/LineChart.svelte

@@ -343,10 +343,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/components/charts/PieChart.svelte

@@ -409,7 +409,9 @@
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...restProps}
-  tooltip={tooltip === false ? false : props.tooltip?.context}
+  tooltip={tooltip === false
+    ? false
+    : { ...props.tooltip?.context, ...(typeof tooltip === 'object' ? tooltip : null) }}
 >
   {#snippet children({ context })}
     {@const snippetProps = {

package/dist/components/charts/ScatterChart.svelte

@@ -253,10 +253,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'voronoi',
+        mode: 'quadtree',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

package/dist/components/tooltip/TooltipContext.svelte

@@ -6,13 +6,15 @@
   const _TooltipContext = new Context<TooltipContextValue>('TooltipContext');
 
   type TooltipMode =
-    | 'bisect-x'
-    | 'bisect-y'
+    | 'bisect-x' // requires values to be sorted
+    | 'bisect-y' // requires values to be sorted
     | 'band'
-    | 'bisect-band'
+    | 'bisect-band' // requires values to be sorted
     | 'bounds'
     | 'voronoi'
     | 'quadtree'
+    | 'quadtree-x' // ignores y values (constant 0)
+    | 'quadtree-y' // ignores x values (constant 0)
     | 'manual';
 
   export type TooltipContextValue<T = any> = {
@@ -298,7 +300,6 @@
     }
 
     // If tooltipData not provided already (voronoi, etc), attempt to find it
-    // TODO: When using bisect-x/y/band, values should be sorted.  Typically they are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
       switch (mode) {
         case 'bisect-x': {
@@ -311,6 +312,7 @@
             xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
           }
 
+          // Requires values to be sorted
           const index = bisectX(ctx.flatData, xValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -322,6 +324,7 @@
           // `y` value at pointer coordinate
           const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
+          // Requires values to be sorted
           const index = bisectY(ctx.flatData, yValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -339,6 +342,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.x(d) === xValueAtPoint)
               .sort(sortFunc(ctx.y as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectY(bandData, yValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -348,6 +352,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.y(d) === yValueAtPoint)
               .sort(sortFunc(ctx.x as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectX(bandData, xValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -358,6 +363,8 @@
           break;
         }
 
+        case 'quadtree-x':
+        case 'quadtree-y':
         case 'quadtree': {
           tooltipData = quadtree?.find(
             point.x - ctx.padding.left,
@@ -406,9 +413,13 @@
   }
 
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
-    if (mode === 'quadtree') {
+    if (['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
       return d3Quadtree()
         .x((d) => {
+          if (mode === 'quadtree-y') {
+            return 0;
+          }
+
           if (geoCtx.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -429,6 +440,10 @@
           }
         })
         .y((d) => {
+          if (mode === 'quadtree-x') {
+            return 0;
+          }
+
           if (geoCtx.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -509,7 +524,7 @@
     });
 
   const triggerPointerEvents = $derived(
-    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)
+    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)
   );
 
   function onPointerEnter(e: PointerEvent | MouseEvent | TouchEvent) {
@@ -646,7 +661,7 @@
           {/each}
         </g>
       </Svg>
-    {:else if mode === 'quadtree' && debug}
+    {:else if ['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode) && debug}
       <Svg pointerEvents={false}>
         <ChartClipPath>
           <g class={layerClass('tooltip-quadtree-g')}>

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
-type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
+type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
 export type TooltipContextValue<T = any> = {
     x: number;
     y: number;

package/dist/utils/ticks.d.ts

@@ -1,9 +1,20 @@
 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 getDurationFormat(duration: Duration, multiline?: boolean): (date: Date, i: number) => string;
+import type { AxisProps } from '../components/Axis.svelte';
+export declare function getDurationFormat(duration: Duration, options?: {
+    multiline?: boolean;
+    placement?: AxisProps['placement'];
+}): (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, count?: number): any[];
-export declare function resolveTickFormat(scale: AnyScale, ticks?: TicksConfig, count?: number, formatType?: FormatType | FormatConfig, multiline?: boolean): (date: Date, i: number) => string;
+export declare function resolveTickFormat(options: {
+    scale: AnyScale;
+    ticks?: TicksConfig;
+    count?: number;
+    formatType?: FormatType | FormatConfig;
+    multiline?: boolean;
+    placement?: AxisProps['placement'];
+}): (date: Date, i: number) => string;

package/dist/utils/ticks.js

@@ -1,43 +1,52 @@
 import { timeYear, timeMonth, timeDay, timeTicks } from 'd3-time';
 import { format, Duration, isLiteralObject, DateToken, } from '@layerstack/utils';
 import { isScaleBand, isScaleTime } from './scales.svelte.js';
-export function getDurationFormat(duration, multiline = false) {
+export function getDurationFormat(duration, options = {
+    multiline: false,
+}) {
+    const { multiline = false, placement = 'bottom' } = options;
     return function (date, i) {
+        let result = '';
         if (+duration >= +new Duration({ duration: { years: 1 } })) {
             // Year
-            return format(date, 'year');
+            result = format(date, 'year');
         }
         else if (+duration >= +new Duration({ duration: { days: 28 } })) {
             // Month
             const isFirst = i === 0 || +timeYear.floor(date) === +date;
             if (multiline) {
-                return (format(date, 'month', { variant: 'short' }) + (isFirst ? `\n${format(date, 'year')}` : ''));
+                result = [format(date, 'month', { variant: 'short' }), isFirst && format(date, 'year')];
             }
             else {
-                return (format(date, 'month', { variant: 'short' }) +
-                    (isFirst ? ` '${format(date, 'year', { variant: 'short' })}` : ''));
+                result =
+                    format(date, 'month', { variant: 'short' }) +
+                        (isFirst ? ` '${format(date, 'year', { variant: 'short' })}` : '');
             }
         }
         else if (+duration >= +new Duration({ duration: { days: 1 } })) {
             // Day
             const isFirst = i === 0 || date.getDate() <= duration.days;
             if (multiline) {
-                return (format(date, 'custom', { custom: DateToken.DayOfMonth_numeric }) +
-                    (isFirst ? `\n${format(date, 'month', { variant: 'short' })}` : ''));
+                result = [
+                    format(date, 'custom', { custom: DateToken.DayOfMonth_numeric }),
+                    isFirst && format(date, 'month', { variant: 'short' }),
+                ];
             }
             else {
-                return format(date, 'day', { variant: 'short' });
+                result = format(date, 'day', { variant: 'short' });
             }
         }
         else if (+duration >= +new Duration({ duration: { hours: 1 } })) {
             // Hours
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
             if (multiline) {
-                return (format(date, 'custom', { custom: DateToken.Hour_numeric }) +
-                    (isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
+                result = [
+                    format(date, 'custom', { custom: DateToken.Hour_numeric }),
+                    isFirst && format(date, 'day', { variant: 'short' }),
+                ];
             }
             else {
-                return isFirst
+                result = isFirst
                     ? format(date, 'day', { variant: 'short' })
                     : format(date, 'custom', { custom: DateToken.Hour_numeric });
             }
@@ -46,34 +55,58 @@ export function getDurationFormat(duration, multiline = false) {
             // Minutes
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
             if (multiline) {
-                return (format(date, 'time', { variant: 'short' }) +
-                    (isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
+                result = [
+                    format(date, 'time', { variant: 'short' }),
+                    isFirst && format(date, 'day', { variant: 'short' }),
+                ];
             }
             else {
-                return format(date, 'time', { variant: 'short' });
+                result = format(date, 'time', { variant: 'short' });
             }
         }
         else if (+duration >= +new Duration({ duration: { seconds: 1 } })) {
             // Seconds
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
-            return (format(date, 'time') +
-                (multiline && isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
+            result = [
+                format(date, 'time'),
+                multiline && isFirst && format(date, 'day', { variant: 'short' }),
+            ];
         }
         else if (+duration >= +new Duration({ duration: { milliseconds: 1 } })) {
             // Milliseconds
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
-            return (format(date, 'custom', {
-                custom: [
-                    DateToken.Hour_2Digit,
-                    DateToken.Minute_2Digit,
-                    DateToken.Second_2Digit,
-                    DateToken.MiliSecond_3,
-                    DateToken.Hour_woAMPM,
-                ],
-            }) + (multiline && isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
+            result = [
+                format(date, 'custom', {
+                    custom: [
+                        DateToken.Hour_2Digit,
+                        DateToken.Minute_2Digit,
+                        DateToken.Second_2Digit,
+                        DateToken.MiliSecond_3,
+                        DateToken.Hour_woAMPM,
+                    ],
+                }),
+                multiline && isFirst && format(date, 'day', { variant: 'short' }),
+            ];
         }
         else {
-            return date.toString();
+            result = date.toString();
+        }
+        if (Array.isArray(result)) {
+            switch (placement) {
+                case 'top':
+                    return result.filter(Boolean).reverse().join('\n');
+                case 'bottom':
+                    return result.filter(Boolean).join('\n');
+                case 'left':
+                    return result.filter(Boolean).reverse().join(' ');
+                case 'right':
+                    return result.filter(Boolean).join(' ');
+                default:
+                    return result.filter(Boolean).join('\n');
+            }
+        }
+        else {
+            return result;
         }
     };
 }
@@ -103,7 +136,8 @@ export function resolveTickVals(scale, ticks, count) {
     }
     return [];
 }
-export function resolveTickFormat(scale, ticks, count, formatType, multiline = false) {
+export function resolveTickFormat(options) {
+    const { scale, ticks, count, formatType, multiline, placement } = options;
     // Explicit format
     if (formatType) {
         // @ts-expect-error - improve types
@@ -114,12 +148,12 @@ export function resolveTickFormat(scale, ticks, count, formatType, multiline = f
         if (isLiteralObject(ticks) && 'interval' in ticks && ticks.interval != null) {
             const start = ticks.interval.floor(new Date());
             const end = ticks.interval.ceil(new Date());
-            return getDurationFormat(new Duration({ start, end }), multiline);
+            return getDurationFormat(new Duration({ start, end }), { multiline, placement });
         }
         else {
             // Compare first 2 ticks to determine duration between ticks for formatting
             const [start, end] = timeTicks(scale.domain()[0], scale.domain()[1], count);
-            return getDurationFormat(new Duration({ start, end }), multiline);
+            return getDurationFormat(new Duration({ start, end }), { multiline, placement });
         }
     }
     // Format from scale

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.23",
+  "version": "2.0.0-next.25",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",