layerchart 0.58.4 → 0.59.1

package/dist/components/Bar.svelte

@@ -6,9 +6,11 @@
   import Spline from './Spline.svelte';
 
   import { createDimensionGetter } from '../utils/rect.js';
-  import type { Accessor } from '../utils/common.js';
+  import { isScaleBand } from '../utils/scales.js';
+  import { accessor, type Accessor } from '../utils/common.js';
+  import { greatestAbs } from '@layerstack/utils/array';
 
-  const { x: xContext, y: yContext } = chartContext();
+  const { x: xContext, y: yContext, xScale } = chartContext();
 
   export let bar: Object;
 
@@ -40,6 +42,8 @@
   /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
   export let rounded:
     | 'all'
+    | 'none'
+    | 'edge'
     | 'top'
     | 'bottom'
     | 'left'
@@ -65,10 +69,27 @@
   });
   $: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
 
-  $: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
-  $: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
-  $: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
-  $: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
+  $: isVertical = isScaleBand($xScale);
+  $: valueAccessor = accessor(isVertical ? y : x);
+  $: value = valueAccessor(bar);
+  $: resolvedValue = Array.isArray(value) ? greatestAbs(value) : value;
+
+  // Resolved `rounded="edge"` based on orientation and value
+  $: _rounded =
+    rounded === 'edge'
+      ? isVertical
+        ? resolvedValue >= 0
+          ? 'top'
+          : 'bottom'
+        : resolvedValue >= 0
+          ? 'right'
+          : 'left'
+      : rounded;
+
+  $: topLeft = ['all', 'top', 'left', 'top-left'].includes(_rounded);
+  $: topRight = ['all', 'top', 'right', 'top-right'].includes(_rounded);
+  $: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(_rounded);
+  $: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(_rounded);
 
   $: width = dimensions.width;
   $: height = dimensions.height;
@@ -87,7 +108,7 @@
     .join('');
 </script>
 
-{#if rounded === 'all'}
+{#if _rounded === 'all' || radius === 0}
   <Rect
     {fill}
     {spring}

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Rect from './Rect.svelte';
-import type { Accessor } from '../utils/common.js';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -14,7 +14,7 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
-        rounded?: ("all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        rounded?: ("all" | "none" | "edge" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         inset?: number | undefined;
         spring?: ComponentProps<Rect>["spring"];
         tweened?: ComponentProps<Rect>["tweened"];

package/dist/components/Bars.svelte

@@ -43,18 +43,20 @@
 
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
+
+  $: _data = chartDataArray(data ?? $contextData);
 </script>
 
 <g class="Bars">
   <slot>
-    {#each chartDataArray(data ?? $contextData) as item}
+    {#each _data as d, i}
       <Bar
-        bar={item}
+        bar={d}
         {x}
         {y}
         {x1}
         {y1}
-        fill={fill ?? ($config.c ? $cGet(item) : null)}
+        fill={fill ?? ($config.c ? $cGet(d) : null)}
         {stroke}
         {strokeWidth}
         {radius}

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

@@ -47,7 +47,7 @@ declare const __propDef: {
                 stroke?: string | undefined;
                 strokeWidth?: number | undefined;
                 radius?: number | undefined;
-                rounded?: ("all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+                rounded?: ("all" | "none" | "edge" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
                 inset?: number | undefined;
                 spring?: ComponentProps<Rect>["spring"];
                 tweened?: ComponentProps<Rect>["tweened"];

package/dist/components/Spline.svelte

@@ -20,6 +20,7 @@
   import { motionStore } from '../stores/motionStore.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
+  import { flattenPathData } from '../utils/path.js';
 
   const {
     data: contextData,
@@ -29,6 +30,7 @@
     y: contextY,
     yRange,
     radial,
+    config,
   } = chartContext();
 
   /** Override data instead of using context */
@@ -100,19 +102,27 @@
 
   /** Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not reactive (only set on initial mount) */
   function defaultPathData() {
-    const path = $radial
-      ? lineRadial()
-          .angle((d) => $xScale(xAccessor(d)))
-          .radius((d) => Math.min($yScale(0), $yRange[0]))
-      : d3Line()
-          .x((d) => $xScale(xAccessor(d)) + xOffset)
-          .y((d) => Math.min($yScale(0), $yRange[0]));
-
-    path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
-
-    if (curve) path.curve(curve);
-
-    return path(data ?? $contextData);
+    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
+        ? lineRadial()
+            .angle((d) => $xScale(xAccessor(d)))
+            .radius((d) => Math.min($yScale(0), $yRange[0]))
+        : d3Line()
+            .x((d) => $xScale(xAccessor(d)) + xOffset)
+            .y((d) => Math.min($yScale(0), $yRange[0]));
+
+      path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
+
+      if (curve) path.curve(curve);
+
+      return path(data ?? $contextData);
+    } else {
+      return '';
+    }
   }
 
   let d: string | null = '';

package/dist/components/charts/BarChart.svelte

@@ -150,20 +150,16 @@
   }
 
   function getBarsProps(s: (typeof series)[number], i: number) {
+    const valueAccesor = stackSeries
+      ? (d: any) => d.stackData[i]
+      : (s.value ?? (s.data ? undefined : s.key));
     const barsProps: ComponentProps<Bars> = {
       data: s.data,
-      x: !isVertical
-        ? stackSeries
-          ? (d) => d.stackData[i]
-          : (s.value ?? (s.data ? undefined : s.key))
-        : undefined,
-      y: isVertical
-        ? stackSeries
-          ? (d) => d.stackData[i]
-          : (s.value ?? (s.data ? undefined : s.key))
-        : undefined,
+      x: !isVertical ? valueAccesor : undefined,
+      y: isVertical ? valueAccesor : undefined,
       x1: isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
       y1: !isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
+      rounded: seriesLayout.startsWith('stack') && i !== series.length - 1 ? 'none' : 'edge',
       radius: 4,
       strokeWidth: 1,
       fill: s.color,

package/dist/utils/path.d.ts

@@ -10,3 +10,5 @@ export declare function circlePath(dimensions: {
     r: number;
     sweep?: 'inside' | 'outside';
 }): string;
+/** Flatten all `y` coordinates to `0` */
+export declare function flattenPathData(pathData: string, yOverride?: number): string;

package/dist/utils/path.js

@@ -22,3 +22,23 @@ export function circlePath(dimensions) {
     a ${r},${r} 0 1,${sweep} -${r * 2},0
   `;
 }
+/** Flatten all `y` coordinates to `0` */
+export function flattenPathData(pathData, yOverride = 0) {
+    let result = pathData;
+    // Match commands with y-coordinates, and replace `y` coordinate with `0` (or override such as `yScale(0)`)
+    result = result.replace(/([MLTQCSAZ])(-?\d*\.?\d+),(-?\d*\.?\d+)/g, (match, command, x, y) => {
+        return `${command}${x},${yOverride}`;
+    });
+    // Replace all vertical line commands (ex. `v123`) with `0` height
+    result = result.replace(/([v])(-?\d*\.?\d+)/g, (match, command, l) => {
+        return `${command}${0}`;
+    });
+    // TODO: Flatten all elliptical arc commands (ex. `a4,4 0 0 1 4,4`) with `0` height
+    // result = result.replace(
+    //   /a(\d+),(\d+) (\d+) (\d+) (\d+) (\d+),(\d+)/g,
+    //   (match, rx, ry, rot, large, sweep, x, y) => {
+    //     return `a${rx},0 ${rot} ${large} ${sweep} ${x},0`;
+    //   }
+    // );
+    return result;
+}

package/package.json

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