layerchart 2.0.0-next.23 → 2.0.0-next.24

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/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.24",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",