fix(Bars): Fix inverted rect when rendered top-to-bottom or right-to-left. Fixes #540 (#613)

Author: techniq

.changeset/better-eagles-scream.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Bars): Fix inverted rect when rendered top-to-bottom or right-to-left. Fixes #540

packages/layerchart/src/lib/components/Bar.svelte

@@ -136,10 +136,10 @@
   const rounded = $derived(
     roundedProp === 'edge'
       ? isVertical
-        ? resolvedValue >= 0
+        ? resolvedValue >= 0 && ctx.yRange[0] > ctx.yRange[1] // not inverted (bottom to top)
           ? 'top'
           : 'bottom'
-        : resolvedValue >= 0
+        : resolvedValue >= 0 && ctx.xRange[0] < ctx.xRange[1] // not inverted (left to right)
           ? 'right'
           : 'left'
       : roundedProp

packages/layerchart/src/lib/utils/rect.svelte.ts

@@ -152,6 +152,11 @@ export function createDimensionGetter<TData>(
         bottom = yValue;
       }
 
+      // If yRange is inverted (drawing from top), swap top and bottom
+      if (ctx.yRange[0] < ctx.yRange[1]) {
+        [top, bottom] = [bottom, top];
+      }
+
       const y = ctx.yScale(top) + insets.top;
       const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
 

packages/layerchart/src/routes/docs/examples/Compound/+page.svelte

@@ -247,9 +247,8 @@
       padding={{ left: 32, right: 32, bottom: 20 }}
       props={{
         bars: {
-          // TODO: Determine why non-rounded Rect within Bar is not working for inverted range
-          // rounded: 'none',
-          class: 'stroke-none fill-blue-500',
+          rounded: 'none',
+          class: '_stroke-none fill-blue-500',
         },
       }}
       {renderContext}