layerchart 1.0.3 → 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,21 +79,30 @@
 
   /** 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);
+    }
   }
 
   const tweenedOptions = tweened

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/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/package.json

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