[Bar] Fix handling non-0 minimum domain

techniq · May 10, 2024 · f9fb98e · f9fb98e
1 parent 8139afe
commit f9fb98e
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 19 deletions.
diff --git a/.changeset/bright-bugs-teach.md b/.changeset/bright-bugs-teach.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+[Bar] Fix handling non-0 minimum domain
diff --git a/packages/layerchart/src/lib/components/Bar.svelte b/packages/layerchart/src/lib/components/Bar.svelte
@@ -43,6 +43,7 @@
       outer: groupPaddingOuter,
     },
   });
+  $: dimensions = $getDimensions(bar);
 </script>
 
 <Rect
@@ -52,7 +53,7 @@
   {stroke}
   stroke-width={strokeWidth}
   rx={radius}
-  {...$getDimensions(bar)}
+  {...dimensions}
   {...$$restProps}
   on:click
 />
diff --git a/packages/layerchart/src/lib/utils/rect.ts b/packages/layerchart/src/lib/utils/rect.ts
@@ -15,24 +15,18 @@ type DimensionGetterOptions = {
 
 // TOOD: Pass in overrides for `x` and `y` accessors
 export function createDimensionGetter(context, options?: DimensionGetterOptions) {
-  const {
-    flatData,
-    xGet,
-    yGet,
-    xRange,
-    yRange,
-    xScale,
-    yScale,
-    x: xAccessor,
-    y: yAccessor,
-  } = context;
+  const { flatData, xGet, yGet, xScale, yScale, x: xAccessor, y: yAccessor } = context;
 
   const groupBy = options?.groupBy;
   const inset = options?.inset ?? 0;
 
   return derived(
-    [flatData, xGet, yGet, xRange, yRange, xScale, yScale, xAccessor, yAccessor],
-    ([$flatData, $xGet, $yGet, $xRange, $yRange, $xScale, $yScale, $xAccessor, $yAccessor]) => {
+    [flatData, xGet, yGet, xScale, yScale, xAccessor, yAccessor],
+    ([$flatData, $xGet, $yGet, $xScale, $yScale, $xAccessor, $yAccessor]) => {
+      // Use `xscale.domain()` instead of `$xDomain` to include `nice()` being applied
+      const [minXDomain, maxXDomain] = $xScale.domain();
+      const [minYDomain, maxYDomain] = $yScale.domain();
+
       return function getter(item) {
         if (isScaleBand($yScale)) {
           // Horizontal band
@@ -64,12 +58,12 @@ export function createDimensionGetter(context, options?: DimensionGetterOptions)
             right = 0;
           } else if (xValue > 0) {
             // Positive value
-            left = min($xRange); // or `0`?
+            left = max([0, minXDomain]);
             right = xValue;
           } else {
             // Negative value
             left = xValue;
-            right = min($xRange); // or `0`?
+            right = min([0, maxXDomain]);
           }
 
           return {
@@ -110,10 +104,10 @@ export function createDimensionGetter(context, options?: DimensionGetterOptions)
           } else if (yValue > 0) {
             // Positive value
             top = yValue;
-            bottom = min($yRange); // or `0`?
+            bottom = max([0, minYDomain]);
           } else {
             // Negative value
-            top = min($yRange); // or `0`?
+            top = min([0, maxYDomain]);
             bottom = yValue;
           }
 

diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
@@ -93,7 +93,6 @@
     groupBy: transitionChart.groupBy,
     stackBy: transitionChart.stackBy,
   });
-  // $: console.log({ transitionData })
 </script>
 
 <h1>Examples</h1>
@@ -231,6 +230,56 @@
   </div>
 </Preview>
 
+<h2>Calculated value domain (positive)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={createDateSeries({ count: 10, min: 50, max: 100 })}
+      x="value"
+      xNice
+      y="date"
+      yScale={scaleBand().padding(0.4)}
+      padding={{ left: 20, bottom: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" grid rule />
+        <Axis
+          placement="left"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Calculated value domain (negative)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={createDateSeries({ count: 10, min: -100, max: -50 })}
+      x="value"
+      xNice
+      y="date"
+      yScale={scaleBand().padding(0.4)}
+      padding={{ left: 20, bottom: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" grid rule />
+        <Axis
+          placement="left"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>Outside Labels (default)</h2>
 
 <Preview data={negativeData}>

diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
@@ -232,6 +232,56 @@
   </div>
 </Preview>
 
+<h2>Calculated value domain (positive)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={createDateSeries({ count: 30, min: 50, max: 100 })}
+      x="date"
+      xScale={scaleBand().padding(0.4)}
+      y="value"
+      yNice={4}
+      padding={{ left: 16, bottom: 24 }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Calculated value domain (negative)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={createDateSeries({ count: 30, min: -100, max: -50 })}
+      x="date"
+      xScale={scaleBand().padding(0.4)}
+      y="value"
+      yNice={4}
+      padding={{ left: 16, bottom: 24 }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>Outside Labels (default)</h2>
 
 <Preview data={negativeData}>