layerchart 1.0.2 → 1.0.4

package/dist/components/Area.svelte

@@ -17,6 +17,7 @@
   import Spline from './Spline.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
+  import { flattenPathData } from '../utils/path.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   const {
@@ -78,24 +79,33 @@
 
   /** Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not reactive (only set on initial mount) */
   function defaultPathData() {
-    const path = $radial
-      ? areaRadial()
-          .angle((d) => $xScale(xAccessor(d)))
-          .innerRadius((d) => Math.min($yScale(0), $yRange[0]))
-          .outerRadius((d) => Math.min($yScale(0), $yRange[0]))
-      : d3Area()
-          .x((d) => $xScale(xAccessor(d)) + xOffset)
-          .y0((d) => Math.min($yScale(0), $yRange[0]))
-          .y1((d) => Math.min($yScale(0), $yRange[0]));
-
-    path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
-
-    if (curve) path.curve(curve);
-
-    return path(data ?? $contextData);
+    if (!tweenedOptions) {
+      // If not tweened, return empty string (faster initial render)
+      return '';
+    } else if (pathData) {
+      // Flatten all `y` coordinates of pre-defined `pathData`
+      return flattenPathData(pathData, Math.min($yScale(0), $yRange[0]));
+    } else if ($config.x) {
+      // Only use default line if `x` accessor is defined (cartesian chart)
+      const path = $radial
+        ? areaRadial()
+            .angle((d) => $xScale(xAccessor(d)))
+            .innerRadius((d) => Math.min($yScale(0), $yRange[0]))
+            .outerRadius((d) => Math.min($yScale(0), $yRange[0]))
+        : d3Area()
+            .x((d) => $xScale(xAccessor(d)) + xOffset)
+            .y0((d) => Math.min($yScale(0), $yRange[0]))
+            .y1((d) => Math.min($yScale(0), $yRange[0]));
+
+      path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
+
+      if (curve) path.curve(curve);
+
+      return path(data ?? $contextData);
+    }
   }
 
-  $: tweenedOptions = tweened
+  const tweenedOptions = tweened
     ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
     : false;
   $: tweened_d = motionStore(defaultPathData(), { tweened: tweenedOptions });

package/dist/components/Link.svelte

@@ -65,8 +65,9 @@
   $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
 
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
-  // @ts-expect-error
-  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  const tweenedOptions = tweened
+    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
+    : false;
   $: tweened_d = motionStore('', { tweened: tweenedOptions });
 
   $: {

package/dist/components/Points.svelte

@@ -143,6 +143,7 @@
           x: xMax + getOffset(xMax, offsetX, $xScale) - ($config.r ? $rGet(d) : r),
           y: y,
         },
+        data: d,
       };
     } else if (Array.isArray(yValue)) {
       /*
@@ -160,6 +161,7 @@
           x: x,
           y: yMax + getOffset(yMax, offsetY, $yScale),
         },
+        data: d,
       };
     }
   });
@@ -170,7 +172,7 @@
     {#each _links as link}
       <Link
         data={link}
-        class="stroke-surface-content/50"
+        stroke={fill ?? ($config.c ? $cGet(link.data) : null)}
         {...typeof links === 'object' ? links : null}
       />
     {/each}

package/dist/components/Spline.svelte

@@ -149,8 +149,9 @@
   }
 
   let d: string | null = '';
-  // @ts-expect-error
-  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  const tweenedOptions = tweened
+    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
+    : false;
   $: tweened_d = motionStore(defaultPathData(), { tweened: tweenedOptions });
   $: {
     const path = $radial

package/dist/components/TransformContext.svelte

@@ -130,15 +130,15 @@
     center: { x: number; y: number },
     rect?: { width: number; height: number }
   ) {
-    // TODO: Improve with geo/projection
+    const newScale = rect ? ($width < $height ? $width / rect.width : $height / rect.height) : 1;
 
     $translate = {
-      x: $width / 2 - center.x,
-      y: $height / 2 - center.y,
+      x: $width / 2 - center.x * newScale,
+      y: $height / 2 - center.y * newScale,
     };
 
     if (rect) {
-      $scale = $width < $height ? $width / rect.width : $height / rect.height;
+      $scale = newScale;
     }
   }
 

package/dist/components/charts/AreaChart.svelte

@@ -433,15 +433,17 @@
               onpointenter={() => (highlightSeriesKey = s.key)}
               onpointleave={() => (highlightSeriesKey = null)}
               {...props.highlight}
-              points={{
-                ...highlightPointsProps,
-                fill: s.color,
-                class: cls(
-                  'transition-opacity',
-                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
-                  highlightPointsProps?.class
-                ),
-              }}
+              points={props.highlight?.points == false
+                ? false
+                : {
+                    ...highlightPointsProps,
+                    fill: s.color,
+                    class: cls(
+                      'transition-opacity',
+                      highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+                      highlightPointsProps?.class
+                    ),
+                  }}
             />
           {/each}
         </slot>

package/dist/components/charts/LineChart.svelte

@@ -363,15 +363,17 @@
               onpointenter={() => (highlightSeriesKey = s.key)}
               onpointleave={() => (highlightSeriesKey = null)}
               {...props.highlight}
-              points={{
-                ...highlightPointsProps,
-                fill: s.color,
-                class: cls(
-                  'transition-opacity',
-                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
-                  highlightPointsProps?.class
-                ),
-              }}
+              points={props.highlight?.points == false
+                ? false
+                : {
+                    ...highlightPointsProps,
+                    fill: s.color,
+                    class: cls(
+                      'transition-opacity',
+                      highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+                      highlightPointsProps?.class
+                    ),
+                  }}
             />
           {/each}
         </slot>

package/dist/components/tooltip/TooltipContext.svelte

@@ -192,7 +192,7 @@
     const point = localPoint(e, containerNode);
 
     if (
-      tooltipData === null && // mode !== 'manual' but support annotations
+      tooltipData == null && // mode !== 'manual' but support annotations
       (point.x < tooltipContextNode.offsetLeft ||
         point.x > tooltipContextNode.offsetLeft + tooltipContextNode.offsetWidth ||
         point.y < tooltipContextNode.offsetTop ||

package/dist/utils/object.js

@@ -0,0 +1,2 @@
+import { memoize } from 'lodash-es';
+export const memoizeObject = memoize((obj) => obj, (obj) => JSON.stringify(obj));

package/package.json

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