layerchart 2.0.0-next.53 → 2.0.0-next.55

package/dist/components/RectClipPath.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
+  import { type RectPropsWithoutHTML } from './Rect.svelte';
   import type { CommonEvents, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
@@ -45,6 +45,13 @@
      */
     disabled?: boolean;
 
+    /**
+     * Invert the clip — content renders *outside* the rect.
+     *
+     * @default false
+     */
+    invert?: boolean;
+
     /**
      * The default children snippet which provides
      * the id and url for the clipPath.
@@ -65,7 +72,6 @@
 <script lang="ts">
   import ClipPath from './ClipPath.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
   import type { MotionProp } from '../utils/motion.svelte.js';
 
   const uid = $props.id();
@@ -77,24 +83,14 @@
     width,
     height,
     disabled = false,
+    invert = false,
     children: childrenProp,
-    ...restProps
   }: RectClipPathProps = $props();
 
-  function canvasClip(ctx: CanvasRenderingContext2D) {
-    ctx.beginPath();
-    ctx.rect(x, y, width, height);
-  }
-
-  function canvasClipDeps() {
-    return [x, y, width, height];
-  }
+  const path = $derived(`M${x},${y} h${width} v${height} h${-width} Z`);
 </script>
 
-<ClipPath {id} {disabled} {canvasClip} {canvasClipDeps}>
-  {#snippet clip()}
-    <Rect {x} {y} {width} {height} {...extractLayerProps(restProps, 'lc-clip-path-rect')} />
-  {/snippet}
+<ClipPath {id} {disabled} {invert} {path}>
   {#snippet children({ url })}
     {@render childrenProp?.({ id, url })}
   {/snippet}

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

@@ -37,6 +37,12 @@ export type BaseRectClipPathPropsWithoutHTML = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the rect.
+     *
+     * @default false
+     */
+    invert?: boolean;
     /**
      * The default children snippet which provides
      * the id and url for the clipPath.

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>
@@ -823,6 +864,9 @@
   {#if dataMode}
     {#each resolvedItems as item (item.key)}
       {@const text = resolveTextValue(item.d)}
+      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
       {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
       {@const translateY =
@@ -840,6 +884,8 @@
         {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
         style:white-space="pre-wrap"
         style:line-height={lineHeight}
+        style:color={resolvedFill}
+        style:opacity={resolvedOpacity ?? resolvedFillOpacity}
         class={['lc-text', resolvedClass]}
       >
         {text}
@@ -862,9 +908,17 @@
       {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
       style:white-space="pre-wrap"
       style:line-height={lineHeight}
+      style:color={staticFill}
+      style:opacity={staticOpacity ?? staticFillOpacity}
       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/Tree.svelte

@@ -49,9 +49,13 @@
   const ctx = getChartContext();
 
   const treeData = $derived.by(() => {
-    const _tree = d3Tree<T>().size(
-      orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height]
-    );
+    const _tree = ctx.radial
+      ? d3Tree<T>()
+          .size([2 * Math.PI, Math.min(ctx.width, ctx.height) / 2])
+          .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth)
+      : d3Tree<T>().size(
+          orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height]
+        );
 
     if (nodeSize) {
       _tree.nodeSize(nodeSize);

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';