layerchart 2.0.0-next.53 → 2.0.0-next.54

package/dist/components/Arc.svelte

@@ -254,7 +254,10 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ??
+      degreesToRadians(
+        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
+      )
   );
 
   const motionEndAngle = createMotion(initialValue, () => value, motion);
@@ -279,13 +282,11 @@
     }
   }
 
-  const outerRadius = $derived(
-    getOuterRadius(outerRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-  );
+  const chartRadius = $derived((Math.min(ctx.width, ctx.height) ?? 0) / 2);
+
+  const outerRadius = $derived(getOuterRadius(outerRadiusProp, chartRadius));
   const trackOuterRadius = $derived(
-    trackOuterRadiusProp
-      ? getOuterRadius(trackOuterRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-      : outerRadius
+    trackOuterRadiusProp ? getOuterRadius(trackOuterRadiusProp, chartRadius) : outerRadius
   );
 
   function getInnerRadius(innerRadius: number | undefined, outerRadius: number) {

package/dist/components/Arc.svelte.test.js

@@ -383,7 +383,7 @@ describe(`Arc`, () => {
             const el = page.getByTestId(componentTestId);
             await expect.element(el).toBeInTheDocument();
             const transform = el.element()?.getAttribute('transform');
-            expect(transform).toContain('translate(-4.539904997395462, 8.91006524188368)');
+            expect(transform).toContain('translate(1.2246467991473533e-15, 10)');
         });
         it('should apply zero offset by default', async () => {
             render(TestHarness, {

package/dist/components/ArcLabel.svelte

@@ -222,7 +222,7 @@
           y: offsetCentroid[1],
           textAnchor: 'middle' as const,
           verticalAnchor: 'middle' as const,
-          transform: `rotate(${centroidRotation}, ${offsetCentroid[0]}, ${offsetCentroid[1]})`,
+          rotate: centroidRotation,
         };
       }
       return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};

package/dist/components/ClipPath.svelte

@@ -84,7 +84,7 @@
             ctx.clip();
           }
         },
-        deps: () => canvasClipDeps?.() ?? [],
+        deps: () => [disabled, ...(canvasClipDeps?.() ?? [])],
       },
     });
   }

package/dist/components/GeoClipPath.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  import type { GeoPermissibleObjects } from 'd3-geo';
+  import type { Snippet } from 'svelte';
+
+  import type { ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+  import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
+  import type { Without } from '../utils/types.js';
+
+  export type BaseGeoClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+
+    /**
+     * GeoJSON data defining the clip boundary.
+     */
+    geojson: GeoPermissibleObjects;
+
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * The children snippet to render content inside the clipPath.
+     */
+    children?: ClipPathPropsWithoutHTML['children'];
+  };
+
+  export type GeoClipPathPropsWithoutHTML = BaseGeoClipPathPropsWithoutHTML &
+    Without<GeoPathPropsWithoutHTML, BaseGeoClipPathPropsWithoutHTML>;
+
+  export type GeoClipPathProps = GeoClipPathPropsWithoutHTML;
+</script>
+
+<script lang="ts">
+  import { geoPath as d3GeoPath } from 'd3-geo';
+
+  import ClipPath from './ClipPath.svelte';
+  import GeoPath from './GeoPath.svelte';
+  import { createId } from '../utils/createId.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { getGeoContext } from '../contexts/geo.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    geojson,
+    disabled = false,
+    children,
+    ...restProps
+  }: GeoClipPathProps = $props();
+
+  const geo = getGeoContext();
+
+  function canvasClip(ctx: CanvasRenderingContext2D) {
+    if (!geo.projection || !geojson) return;
+    const pathGen = d3GeoPath(geo.projection, ctx);
+    pathGen(geojson);
+  }
+
+  function canvasClipDeps() {
+    return [geojson, geo.projection];
+  }
+</script>
+
+<ClipPath {id} {disabled} {children} {canvasClip} {canvasClipDeps}>
+  {#snippet clip()}
+    <GeoPath {geojson} class="stroke-none" {...extractLayerProps(restProps, 'lc-clip-path-geo')} />
+  {/snippet}
+</ClipPath>

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

@@ -0,0 +1,29 @@
+import type { GeoPermissibleObjects } from 'd3-geo';
+import type { ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
+import type { Without } from '../utils/types.js';
+export type BaseGeoClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+    /**
+     * GeoJSON data defining the clip boundary.
+     */
+    geojson: GeoPermissibleObjects;
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The children snippet to render content inside the clipPath.
+     */
+    children?: ClipPathPropsWithoutHTML['children'];
+};
+export type GeoClipPathPropsWithoutHTML = BaseGeoClipPathPropsWithoutHTML & Without<GeoPathPropsWithoutHTML, BaseGeoClipPathPropsWithoutHTML>;
+export type GeoClipPathProps = GeoClipPathPropsWithoutHTML;
+declare const GeoClipPath: import("svelte").Component<GeoClipPathPropsWithoutHTML, {}, "">;
+type GeoClipPath = ReturnType<typeof GeoClipPath>;
+export default GeoClipPath;

package/dist/components/Hull.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Without } from '../utils/types.js';
+  import type { Without, CommonStyleProps } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { ComponentProps } from 'svelte';
 
@@ -47,7 +47,7 @@
      * @bindable
      */
     ref?: SVGGElement;
-  };
+  } & CommonStyleProps;
 
   export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 </script>
@@ -79,6 +79,12 @@
     onpointermove,
     onclick,
     onpointerleave,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeOpacity,
+    strokeWidth,
+    opacity,
     class: className,
     ref: refProp = $bindable(),
     ...restProps
@@ -112,6 +118,12 @@
     <GeoPath
       geojson={polygon}
       {curve}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
       class={['lc-hull-path', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
@@ -125,6 +137,12 @@
       x={(d) => d[0]}
       y={(d) => d[1]}
       {curve}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
       class={['lc-hull-class', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}

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

@@ -1,4 +1,4 @@
-import type { Without } from '../utils/types.js';
+import type { Without, CommonStyleProps } from '../utils/types.js';
 import type { ComponentProps } from 'svelte';
 export type HullPropsWithoutHTML = {
     /**
@@ -32,7 +32,7 @@ export type HullPropsWithoutHTML = {
      * @bindable
      */
     ref?: SVGGElement;
-};
+} & CommonStyleProps;
 export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 import { Delaunay } from 'd3-delaunay';
 import { type GroupProps } from './Group.svelte';

package/dist/components/Pie.svelte

@@ -108,7 +108,10 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.config.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ??
+      degreesToRadians(
+        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
+      )
   );
 
   const motionEndAngle = createMotion(0, () => endAngle, motion);
@@ -116,7 +119,10 @@
   const pie = $derived.by(() => {
     let _pie = d3pie<any>()
       .startAngle(
-        startAngleProp ?? degreesToRadians(ctx.config.xRange ? min(ctx.xRange) : min(range))
+        startAngleProp ??
+          degreesToRadians(
+            (ctx.config.xRange ? min(ctx.config.xRange as number[]) : min(range))!
+          )
       )
       .endAngle(motionEndAngle.current)
       .padAngle(padAngle)

package/dist/components/Text.svelte

@@ -24,6 +24,11 @@
     return false;
   }
 
+  export type TextSegment = {
+    value: string | number;
+    class?: string;
+  };
+
   export type TextPropsWithoutHTML = {
     /**
      * Text value to render.
@@ -36,6 +41,13 @@
      */
     value?: string | number | ((d: any) => string | number);
 
+    /**
+     * Array of styled text segments for inline mixed styling.
+     * Each segment has its own value and optional class.
+     * Mutually exclusive with `value`.
+     */
+    segments?: TextSegment[];
+
     /**
      * Maximum width to occupy (approximate as words are not split)
      */
@@ -256,6 +268,7 @@
 
   let {
     value,
+    segments,
     x = 0,
     initialX,
     y = 0,
@@ -670,14 +683,30 @@
       const textAlign = textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
       ctx.textAlign = textAlign;
 
-      for (let index = 0; index < wordsByLines.length; index++) {
-        const line = wordsByLines[index];
-        const text = line.words.join(' ');
+      if (segments) {
+        let xOffset = baseX;
+        for (const segment of segments) {
+          const segStyles = getTextStyles(undefined, undefined, undefined, undefined, undefined, segment.class);
+          const text = String(segment.value);
+          // Set font before rendering and measuring so width is accurate
+          const segComputedStyles = getComputedStyles(ctx.canvas, segStyles);
+          const fontWeight = segComputedStyles.fontWeight || '';
+          const fontSize = segComputedStyles.fontSize || '10px';
+          const fontFamily = segComputedStyles.fontFamily || 'sans-serif';
+          ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`.trim();
+          renderText(ctx, text, { x: xOffset, y: baseY }, segStyles);
+          xOffset += ctx.measureText(text).width;
+        }
+      } else {
+        for (let index = 0; index < wordsByLines.length; index++) {
+          const line = wordsByLines[index];
+          const text = line.words.join(' ');
 
-        const xPos = baseX;
-        const yPos = baseY + index * effectiveLineHeight;
+          const xPos = baseX;
+          const yPos = baseY + index * effectiveLineHeight;
 
-        renderText(ctx, text, { x: xPos, y: yPos }, styles);
+          renderText(ctx, text, { x: xPos, y: yPos }, styles);
+        }
       }
 
       ctx.restore();
@@ -708,6 +737,7 @@
               dataMode,
               dataMode ? resolvedItems : null,
               value,
+              segments,
               motionX.current,
               motionY.current,
               fillKey!.current,
@@ -806,15 +836,26 @@
           opacity={staticOpacity}
           class={['lc-text', staticClassName]}
         >
-          {#each wordsByLines as line, index}
-            <tspan
-              x={motionX.current}
-              dy={index === 0 ? startDy : getPixelValue(lineHeight)}
-              class="lc-text-tspan"
-            >
-              {line.words.join(' ')}
-            </tspan>
-          {/each}
+          {#if segments}
+            {#each segments as segment, index (index)}
+              <tspan
+                dy={index === 0 ? startDy : 0}
+                class={['lc-text-tspan', segment.class]}
+              >
+                {segment.value}
+              </tspan>
+            {/each}
+          {:else}
+            {#each wordsByLines as line, index (index)}
+              <tspan
+                x={motionX.current}
+                dy={index === 0 ? startDy : getPixelValue(lineHeight)}
+                class="lc-text-tspan"
+              >
+                {line.words.join(' ')}
+              </tspan>
+            {/each}
+          {/if}
         </text>
       {/if}
     </svg>
@@ -864,7 +905,13 @@
       style:line-height={lineHeight}
       class={['lc-text', staticClassName]}
     >
-      {textValue}
+      {#if segments}
+        {#each segments as segment}
+          <span class={segment.class}>{segment.value}</span>
+        {/each}
+      {:else}
+        {textValue}
+      {/if}
     </div>
   {/if}
 {/if}

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

@@ -9,6 +9,10 @@ import type { FormatType, FormatConfig } from '@layerstack/utils';
  * Strings are data props unless they look like CSS values (e.g. "50%", "1em").
  */
 export declare function isTextDataProp(value: any): boolean;
+export type TextSegment = {
+    value: string | number;
+    class?: string;
+};
 export type TextPropsWithoutHTML = {
     /**
      * Text value to render.
@@ -20,6 +24,12 @@ export type TextPropsWithoutHTML = {
      * @default 0
      */
     value?: string | number | ((d: any) => string | number);
+    /**
+     * Array of styled text segments for inline mixed styling.
+     * Each segment has its own value and optional class.
+     * Mutually exclusive with `value`.
+     */
+    segments?: TextSegment[];
     /**
      * Maximum width to occupy (approximate as words are not split)
      */

package/dist/components/charts/BarChart.svelte.test.js

@@ -254,7 +254,7 @@ describe('BarChart', () => {
             tooltipRect.dispatchEvent(new PointerEvent('pointerenter', eventInit));
             tooltipRect.dispatchEvent(new PointerEvent('pointermove', eventInit));
             await vi.waitFor(() => {
-                const colorDots = container.querySelectorAll('.lc-tooltip-item-color');
+                const colorDots = document.querySelectorAll('.lc-tooltip-item-color');
                 expect(colorDots.length).toBe(4);
                 const colors = Array.from(colorDots).map((dot) => dot.style.getPropertyValue('--color'));
                 expect(colors).toEqual([

package/dist/components/charts/DefaultTooltip.svelte.test.js

@@ -50,14 +50,14 @@ describe('DefaultTooltip', () => {
             await expect.element(tooltipCtx).toBeInTheDocument();
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
-                // Should have a header
-                const header = container.querySelector('.lc-tooltip-header');
+                // Should have a header (portaled to body)
+                const header = document.querySelector('.lc-tooltip-header');
                 expect(header).not.toBeNull();
                 // Should have 4 tooltip items (3 series + 1 total)
-                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
                 expect(items.length).toBe(4);
                 // Labels should match series keys + total
-                const labels = container.querySelectorAll('.lc-tooltip-item-label');
+                const labels = document.querySelectorAll('.lc-tooltip-item-label');
                 expect(labels.length).toBe(4);
                 const labelTexts = Array.from(labels).map((l) => l.textContent?.trim());
                 expect(labelTexts).toEqual(['apples', 'bananas', 'oranges', 'total']);
@@ -75,7 +75,7 @@ describe('DefaultTooltip', () => {
             await expect.element(tooltipCtx).toBeInTheDocument();
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
-                const colorDots = container.querySelectorAll('.lc-tooltip-item-color');
+                const colorDots = document.querySelectorAll('.lc-tooltip-item-color');
                 expect(colorDots.length).toBe(3);
                 const colors = Array.from(colorDots).map((dot) => dot.style.getPropertyValue('--color'));
                 expect(colors).toEqual(['rgb(255, 0, 0)', 'rgb(0, 128, 0)', 'rgb(255, 165, 0)']);
@@ -93,11 +93,11 @@ describe('DefaultTooltip', () => {
             await expect.element(tooltipCtx).toBeInTheDocument();
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
-                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
                 expect(items.length).toBe(4);
             });
-            const items = Array.from(container.querySelectorAll('.lc-tooltip-item-root'));
-            const labels = Array.from(container.querySelectorAll('.lc-tooltip-item-label'));
+            const items = Array.from(document.querySelectorAll('.lc-tooltip-item-root'));
+            const labels = Array.from(document.querySelectorAll('.lc-tooltip-item-label'));
             triggerPointerEvent(items[0], 'pointerenter');
             await vi.waitFor(() => {
                 expect(items[0].dataset.highlighted).toBe('true');
@@ -133,7 +133,7 @@ describe('DefaultTooltip', () => {
             await expect.element(tooltipCtx).toBeInTheDocument();
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
-                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
                 // 1 series item, no total
                 expect(items.length).toBe(1);
             });
@@ -152,12 +152,12 @@ describe('DefaultTooltip', () => {
             await expect.element(tooltipCtx).toBeInTheDocument();
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
-                const header = container.querySelector('.lc-tooltip-header');
+                const header = document.querySelector('.lc-tooltip-header');
                 expect(header).not.toBeNull();
                 // 3 series + 1 total = 4 items
-                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
                 expect(items.length).toBe(4);
-                const labels = container.querySelectorAll('.lc-tooltip-item-label');
+                const labels = document.querySelectorAll('.lc-tooltip-item-label');
                 const labelTexts = Array.from(labels).map((l) => l.textContent?.trim());
                 expect(labelTexts).toEqual(['apples', 'bananas', 'oranges', 'total']);
             });
@@ -176,10 +176,10 @@ describe('DefaultTooltip', () => {
             await expect.element(tooltipCtx).toBeInTheDocument();
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
-                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
                 // Should show x and y items
                 expect(items.length).toBe(2);
-                const labels = Array.from(container.querySelectorAll('.lc-tooltip-item-label')).map((l) => l.textContent?.trim());
+                const labels = Array.from(document.querySelectorAll('.lc-tooltip-item-label')).map((l) => l.textContent?.trim());
                 expect(labels).toEqual(['x', 'y']);
             });
         });
@@ -196,10 +196,10 @@ describe('DefaultTooltip', () => {
             await expect.element(tooltipCtx).toBeInTheDocument();
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
-                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
                 // Should show x, y, and r items
                 expect(items.length).toBe(3);
-                const labels = Array.from(container.querySelectorAll('.lc-tooltip-item-label')).map((l) => l.textContent?.trim());
+                const labels = Array.from(document.querySelectorAll('.lc-tooltip-item-label')).map((l) => l.textContent?.trim());
                 expect(labels).toEqual(['x', 'y', 'size']);
             });
         });
@@ -219,11 +219,11 @@ describe('DefaultTooltip', () => {
             triggerTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 // Should show a header with the series name
-                const header = container.querySelector('.lc-tooltip-header');
+                const header = document.querySelector('.lc-tooltip-header');
                 expect(header).not.toBeNull();
                 expect(header.textContent).not.toBe('');
                 // Should show x and y items
-                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
                 expect(items.length).toBe(2);
             });
         });

package/dist/components/charts/LineChart.svelte.test.js

@@ -33,7 +33,7 @@ describe('LineChart', () => {
         tooltipRect.dispatchEvent(new PointerEvent('pointerenter', eventInit));
         tooltipRect.dispatchEvent(new PointerEvent('pointermove', eventInit));
         await vi.waitFor(() => {
-            const colorDot = container.querySelector('.lc-tooltip-item-color');
+            const colorDot = document.querySelector('.lc-tooltip-item-color');
             expect(colorDot).not.toBeNull();
             const color = colorDot.style.getPropertyValue('--color');
             // Should NOT be the default series color

package/dist/components/charts/PieChart.svelte.test.js

@@ -27,8 +27,8 @@ describe('PieChart', () => {
         arc.dispatchEvent(new PointerEvent('pointerenter', eventInit));
         arc.dispatchEvent(new PointerEvent('pointermove', eventInit));
         await vi.waitFor(() => {
-            const tooltipLabel = container.querySelector('.lc-tooltip-item-label');
-            const tooltipValue = container.querySelector('.lc-tooltip-item-value');
+            const tooltipLabel = document.querySelector('.lc-tooltip-item-label');
+            const tooltipValue = document.querySelector('.lc-tooltip-item-value');
             expect(tooltipLabel?.textContent).toContain('chrome');
             expect(tooltipValue?.textContent).toContain('275');
         });

package/dist/components/index.d.ts

@@ -66,6 +66,8 @@ export { default as GeoProjection } from './GeoProjection.svelte';
 export * from './GeoProjection.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export * from './GeoEdgeFade.svelte';
+export { default as GeoClipPath } from './GeoClipPath.svelte';
+export * from './GeoClipPath.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';

package/dist/components/index.js

@@ -66,6 +66,8 @@ export { default as GeoProjection } from './GeoProjection.svelte';
 export * from './GeoProjection.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export * from './GeoEdgeFade.svelte';
+export { default as GeoClipPath } from './GeoClipPath.svelte';
+export * from './GeoClipPath.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';