layerchart 0.93.2 → 0.93.4

package/dist/components/Circle.svelte

@@ -7,8 +7,7 @@
 
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { circlePath } from '../utils/path.js';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { renderCircle, type ComputedStylesOptions } from '../utils/canvas.js';
 
   export let cx: number = 0;
   export let initialCx = cx;
@@ -53,10 +52,9 @@
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
   ) {
-    const pathData = circlePath({ cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r });
-    renderPathData(
+    renderCircle(
       ctx,
-      pathData,
+      { cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r },
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {

package/dist/components/Highlight.svelte

@@ -368,13 +368,8 @@
     <slot name="bar" {bar}>
       <Bar
         spring={motion}
-        x={typeof bar === 'object' ? bar.x : undefined}
-        y={typeof bar === 'object' ? bar.y : undefined}
-        insets={typeof bar === 'object' ? bar.insets : undefined}
-        stroke={typeof bar === 'object' ? bar.stroke : undefined}
-        strokeWidth={typeof bar === 'object' ? bar.strokeWidth : undefined}
-        radius={typeof bar === 'object' ? bar.radius : undefined}
         bar={highlightData}
+        {...typeof bar === 'object' ? bar : null}
         class={cls(
           // @ts-expect-error
           !bar.fill && 'fill-primary',

package/dist/components/charts/AreaChart.svelte

@@ -346,15 +346,15 @@
         {/if}
       </slot>
 
-      <slot name="belowMarks" {...slotProps} />
+      <ChartClipPath disabled={!brush}>
+        <slot name="belowMarks" {...slotProps} />
 
-      <slot name="marks" {...slotProps}>
-        <ChartClipPath disabled={!brush}>
+        <slot name="marks" {...slotProps}>
           {#each visibleSeries as s, i (s.key)}
             <Area {...getAreaProps(s, i)} />
           {/each}
-        </ChartClipPath>
-      </slot>
+        </slot>
+      </ChartClipPath>
 
       <slot name="aboveMarks" {...slotProps} />
 
@@ -390,43 +390,46 @@
         {/if}
       </slot>
 
-      {#if points}
-        {#each visibleSeries as s, i (s.key)}
-          <Points {...getPointsProps(s, i)} />
-        {/each}
-      {/if}
+      <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
+      <ChartClipPath disabled={!brush} full>
+        {#if points}
+          {#each visibleSeries as s, i (s.key)}
+            <Points {...getPointsProps(s, i)} />
+          {/each}
+        {/if}
 
-      <slot name="highlight" {...slotProps}>
-        {#each visibleSeries as s, i (s.key)}
-          {@const seriesTooltipData =
-            s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
-
-          <Highlight
-            data={seriesTooltipData}
-            y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? (s.data ? undefined : s.key))}
-            points={{
-              fill: s.color,
-              class: cls(
-                'transition-opacity',
-                highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
-              ),
-            }}
-            lines={i == 0}
-            onpointclick={onpointclick
-              ? (e, detail) => onpointclick(e, { ...detail, series: s })
-              : undefined}
-            onpointenter={() => (highlightSeriesKey = s.key)}
-            onpointleave={() => (highlightSeriesKey = null)}
-            {...props.highlight}
-          />
-        {/each}
-      </slot>
+        <slot name="highlight" {...slotProps}>
+          {#each visibleSeries as s, i (s.key)}
+            {@const seriesTooltipData =
+              s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
+
+            <Highlight
+              data={seriesTooltipData}
+              y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? (s.data ? undefined : s.key))}
+              points={{
+                fill: s.color,
+                class: cls(
+                  'transition-opacity',
+                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+                ),
+              }}
+              lines={i == 0}
+              onpointclick={onpointclick
+                ? (e, detail) => onpointclick(e, { ...detail, series: s })
+                : undefined}
+              onpointenter={() => (highlightSeriesKey = s.key)}
+              onpointleave={() => (highlightSeriesKey = null)}
+              {...props.highlight}
+            />
+          {/each}
+        </slot>
 
-      {#if labels}
-        {#each visibleSeries as s, i (s.key)}
-          <Labels {...getLabelsProps(s, i)} />
-        {/each}
-      {/if}
+        {#if labels}
+          {#each visibleSeries as s, i (s.key)}
+            <Labels {...getLabelsProps(s, i)} />
+          {/each}
+        {/if}
+      </ChartClipPath>
     </svelte:component>
 
     <slot name="legend" {...slotProps}>

package/dist/components/charts/LineChart.svelte

@@ -276,17 +276,17 @@
         {/if}
       </slot>
 
-      <slot name="belowMarks" {...slotProps} />
+      <ChartClipPath disabled={!brush}>
+        <slot name="belowMarks" {...slotProps} />
 
-      <slot name="marks" {...slotProps}>
-        <ChartClipPath disabled={!brush}>
+        <slot name="marks" {...slotProps}>
           {#each visibleSeries as s, i (s.key)}
             <Spline {...getSplineProps(s, i)} />
           {/each}
-        </ChartClipPath>
-      </slot>
+        </slot>
 
-      <slot name="aboveMarks" {...slotProps} />
+        <slot name="aboveMarks" {...slotProps} />
+      </ChartClipPath>
 
       <slot name="axis" {...slotProps}>
         {#if axis}
@@ -314,42 +314,45 @@
         {/if}
       </slot>
 
-      {#if points}
-        {#each visibleSeries as s, i (s.key)}
-          <Points {...getPointsProps(s, i)} />
-        {/each}
-      {/if}
+      <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
+      <ChartClipPath disabled={!brush} full>
+        {#if points}
+          {#each visibleSeries as s, i (s.key)}
+            <Points {...getPointsProps(s, i)} />
+          {/each}
+        {/if}
 
-      {#if labels}
-        {#each visibleSeries as s, i (s.key)}
-          <Labels {...getLabelsProps(s, i)} />
-        {/each}
-      {/if}
+        {#if labels}
+          {#each visibleSeries as s, i (s.key)}
+            <Labels {...getLabelsProps(s, i)} />
+          {/each}
+        {/if}
 
-      <slot name="highlight" {...slotProps}>
-        {#each visibleSeries as s, i (s.key)}
-          {@const seriesTooltipData =
-            s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
-          <Highlight
-            data={seriesTooltipData}
-            y={s.value ?? (s.data ? undefined : s.key)}
-            points={{
-              fill: s.color,
-              class: cls(
-                'transition-opacity',
-                highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
-              ),
-            }}
-            lines={i === 0}
-            onpointclick={onpointclick
-              ? (e, detail) => onpointclick(e, { ...detail, series: s })
-              : undefined}
-            onpointenter={() => (highlightSeriesKey = s.key)}
-            onpointleave={() => (highlightSeriesKey = null)}
-            {...props.highlight}
-          />
-        {/each}
-      </slot>
+        <slot name="highlight" {...slotProps}>
+          {#each visibleSeries as s, i (s.key)}
+            {@const seriesTooltipData =
+              s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
+            <Highlight
+              data={seriesTooltipData}
+              y={s.value ?? (s.data ? undefined : s.key)}
+              points={{
+                fill: s.color,
+                class: cls(
+                  'transition-opacity',
+                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+                ),
+              }}
+              lines={i === 0}
+              onpointclick={onpointclick
+                ? (e, detail) => onpointclick(e, { ...detail, series: s })
+                : undefined}
+              onpointenter={() => (highlightSeriesKey = s.key)}
+              onpointleave={() => (highlightSeriesKey = null)}
+              {...props.highlight}
+            />
+          {/each}
+        </slot>
+      </ChartClipPath>
     </svelte:component>
 
     <slot name="legend" {...slotProps}>

package/dist/components/charts/ScatterChart.svelte

@@ -242,17 +242,17 @@
         {/if}
       </slot>
 
-      <slot name="belowMarks" {...slotProps} />
+      <ChartClipPath disabled={!brush}>
+        <slot name="belowMarks" {...slotProps} />
 
-      <slot name="marks" {...slotProps}>
-        <ChartClipPath disabled={!brush}>
+        <slot name="marks" {...slotProps}>
           {#each visibleSeries as s, i (s.key)}
             <Points {...getPointsProps(s, i)} />
           {/each}
-        </ChartClipPath>
-      </slot>
+        </slot>
 
-      <slot name="aboveMarks" {...slotProps} />
+        <slot name="aboveMarks" {...slotProps} />
+      </ChartClipPath>
 
       <slot name="axis" {...slotProps}>
         {#if axis}
@@ -280,15 +280,23 @@
         {/if}
       </slot>
 
-      <slot name="highlight" {...slotProps}>
-        <Highlight points={{ fill: activeSeries?.color }} lines axis="both" {...props.highlight} />
-      </slot>
+      <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
+      <ChartClipPath disabled={!brush} full>
+        <slot name="highlight" {...slotProps}>
+          <Highlight
+            points={{ fill: activeSeries?.color }}
+            lines
+            axis="both"
+            {...props.highlight}
+          />
+        </slot>
 
-      {#if labels}
-        {#each visibleSeries as s, i (s.key)}
-          <Labels {...getLabelsProps(s, i)} />
-        {/each}
-      {/if}
+        {#if labels}
+          {#each visibleSeries as s, i (s.key)}
+            <Labels {...getLabelsProps(s, i)} />
+          {/each}
+        {/if}
+      </ChartClipPath>
     </svelte:component>
 
     <slot name="legend" {...slotProps}>

package/dist/components/layout/Canvas.svelte

@@ -38,6 +38,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { cls } from '@layerstack/tailwind';
+  import { Logger } from '@layerstack/utils';
 
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
@@ -85,6 +86,8 @@
   /** Show hit canvas for debugging */
   export let debug = false;
 
+  const logger = new Logger('Canvas');
+
   let components = new Map<Symbol, ComponentRender>();
   let pendingInvalidation = false;
   let frameId: number | undefined;
@@ -106,7 +109,9 @@
     const { x, y } = localPoint(e.target as HTMLCanvasElement, e) ?? { x: 0, y: 0 };
     const color = getPixelColor(hitCanvasContext!, x, y);
     const colorKey = getColorStr(color);
-    return componentByColor.get(colorKey);
+    const component = componentByColor.get(colorKey);
+    logger.debug({ colorKey, component, componentByColor });
+    return component;
   }
 
   function onPointerMove(e: PointerEvent) {

package/dist/utils/canvas.js

@@ -76,8 +76,10 @@ function render(ctx, render, styleOptions = {}) {
     }
     paintOrder.forEach((attr) => {
         if (attr === 'fill') {
-            const fill = styleOptions.styles?.fill instanceof CanvasGradient
-                ? styleOptions.styles?.fill
+            const fill = styleOptions.styles?.fill &&
+                (styleOptions.styles?.fill instanceof CanvasGradient ||
+                    !styleOptions.styles?.fill?.includes('var'))
+                ? styleOptions.styles.fill
                 : ['none', DEFAULT_FILL].includes(computedStyles?.fill)
                     ? null
                     : computedStyles?.fill;
@@ -93,7 +95,9 @@ function render(ctx, render, styleOptions = {}) {
             }
         }
         else if (attr === 'stroke') {
-            const stroke = styleOptions.styles?.stroke instanceof CanvasGradient
+            const stroke = styleOptions.styles?.stroke &&
+                (styleOptions.styles?.stroke instanceof CanvasGradient ||
+                    !styleOptions.styles?.stroke?.includes('var'))
                 ? styleOptions.styles?.stroke
                 : computedStyles?.stroke === 'none'
                     ? null
@@ -131,6 +135,19 @@ export function renderRect(ctx, coords, styleOptions = {}) {
         stroke: (ctx) => ctx.strokeRect(coords.x, coords.y, coords.width, coords.height),
     }, styleOptions);
 }
+export function renderCircle(ctx, coords, styleOptions = {}) {
+    ctx.beginPath();
+    ctx.arc(coords.cx, coords.cy, coords.r, 0, 2 * Math.PI);
+    render(ctx, {
+        fill: (ctx) => {
+            ctx.fill();
+        },
+        stroke: (ctx) => {
+            ctx.stroke();
+        },
+    }, styleOptions);
+    ctx.closePath();
+}
 /** Clear canvas accounting for Canvas `context.translate(...)` */
 export function clearCanvasContext(ctx, options) {
     // Clear with negative offset due to Canvas `context.translate(...)`

package/dist/utils/color.d.ts

@@ -3,13 +3,18 @@ export declare function rgbColorGenerator(step?: number): Generator<{
     r: number;
     g: number;
     b: number;
+    a: number;
 }, {
     r: number;
     g: number;
     b: number;
+    a: number;
 }, unknown>;
-export declare function getColorStr(color: {
+type RGBColor = {
     r: number;
     g: number;
     b: number;
-}): string;
+    a?: number;
+};
+export declare function getColorStr(color: RGBColor): string;
+export {};

package/dist/utils/color.js

@@ -1,15 +1,20 @@
 /** Generator to create a new color on each call */
 export function* rgbColorGenerator(step = 500) {
-    let nextColor = 1;
+    let nextColor = 0;
     while (nextColor < 16777216) {
         const r = nextColor & 0xff;
         const g = (nextColor & 0xff00) >> 8;
         const b = (nextColor & 0xff0000) >> 16;
         nextColor += step;
-        yield { r, g, b };
+        yield { r, g, b, a: 255 };
     }
-    return { r: 0, g: 0, b: 0 };
+    return { r: 0, g: 0, b: 0, a: 255 };
 }
 export function getColorStr(color) {
-    return `rgb(${color.r},${color.g},${color.b})`;
+    if (color.a !== undefined) {
+        return `rgba(${color.r},${color.g},${color.b},${color.a})`;
+    }
+    else {
+        return `rgb(${color.r},${color.g},${color.b})`;
+    }
 }

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.93.2",
+  "version": "0.93.4",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",