fix(#9167): make 1D bars respect orient for stack calculation (#9168)

* docs(example): bar_1d_dimension only * chore: update examples [CI] * fix: make 1D bar respect orientation for stack calculation (#9167) * chore: update examples [CI] --------- Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>
vega · Nov 8, 2023 · 432f354 · 432f354
1 parent 38ca377
commit 432f354
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 2 deletions.
diff --git a/examples/compiled/bar_1d_dimension_only.png b/examples/compiled/bar_1d_dimension_only.png
diff --git a/examples/compiled/bar_1d_dimension_only.svg b/examples/compiled/bar_1d_dimension_only.svg
diff --git a/examples/compiled/bar_1d_dimension_only.vg.json b/examples/compiled/bar_1d_dimension_only.vg.json
@@ -0,0 +1,86 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "A simple bar chart with embedded data.",
+  "background": "white",
+  "padding": 5,
+  "width": 20,
+  "height": 200,
+  "style": "cell",
+  "data": [
+    {
+      "name": "source_0",
+      "values": [
+        {"b": 0},
+        {"b": 10},
+        {"b": 10},
+        {"b": 10},
+        {"b": 10},
+        {"b": 20}
+      ]
+    },
+    {
+      "name": "data_0",
+      "source": "source_0",
+      "transform": [
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "data_0"},
+      "encode": {
+        "update": {
+          "fill": {"value": "#4c78a8"},
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {"signal": "\"b: \" + (format(datum[\"b\"], \"\"))"},
+          "x": {"field": {"group": "width"}},
+          "x2": {"value": 0},
+          "yc": {"scale": "y", "field": "b"},
+          "height": {"value": 5}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "y",
+      "type": "linear",
+      "domain": {"data": "data_0", "field": "b"},
+      "range": [{"signal": "height"}, 0],
+      "nice": true,
+      "zero": false,
+      "padding": 5
+    }
+  ],
+  "axes": [
+    {
+      "scale": "y",
+      "orient": "left",
+      "grid": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "domain": false,
+      "labels": false,
+      "aria": false,
+      "maxExtent": 0,
+      "minExtent": 0,
+      "ticks": false,
+      "zindex": 0
+    },
+    {
+      "scale": "y",
+      "orient": "left",
+      "grid": false,
+      "title": "b",
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "zindex": 0
+    }
+  ]
+}
diff --git a/examples/specs/bar_1d_dimension_only.vl.json b/examples/specs/bar_1d_dimension_only.vl.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "A simple bar chart with embedded data.",
+  "data": {
+    "values": [
+      {"b": 0},
+      {"b": 10},
+      {"b": 10},
+      {"b": 10},
+      {"b": 10},
+      {"b": 20}
+    ]
+  },
+  "mark": {"type": "bar", "orient": "horizontal"},
+  "encoding": {
+    "y": {"field": "b", "type": "quantitative"}
+  }
+}
diff --git a/src/stack.ts b/src/stack.ts
@@ -87,7 +87,7 @@ function potentialStackedChannel(
 ): 'x' | 'y' | 'theta' | 'radius' | undefined {
   const y = x === 'x' ? 'y' : 'radius';
 
-  const isCartesian = x === 'x';
+  const isCartesianBarOrArea = x === 'x' && ['bar', 'area'].includes(mark);
 
   const xDef = encoding[x];
   const yDef = encoding[y];
@@ -106,7 +106,7 @@ function potentialStackedChannel(
         return xAggregate ? x : y;
       }
 
-      if (isCartesian && ['bar', 'area'].includes(mark)) {
+      if (isCartesianBarOrArea) {
         if (orient === 'vertical') {
           return y;
         } else if (orient === 'horizontal') {
@@ -119,8 +119,14 @@ function potentialStackedChannel(
       return y;
     }
   } else if (isUnbinnedQuantitative(xDef)) {
+    if (isCartesianBarOrArea && orient === 'vertical') {
+      return undefined;
+    }
     return x;
   } else if (isUnbinnedQuantitative(yDef)) {
+    if (isCartesianBarOrArea && orient === 'horizontal') {
+      return undefined;
+    }
     return y;
   }
   return undefined;

diff --git a/test/stack.test.ts b/test/stack.test.ts
@@ -56,6 +56,30 @@ describe('stack', () => {
     }
   });
 
+  it("doesn't stacked the dimension field on a 1D vertical bar with dimension only", () => {
+    const spec: TopLevel<NormalizedUnitSpec> = {
+      data: {url: 'data/barley.json'},
+      mark: {type: 'bar', orient: 'vertical'},
+      encoding: {
+        x: {field: 'yield', type: 'quantitative'}
+      }
+    };
+    const stackProps = stack(spec.mark, spec.encoding);
+    expect(stackProps).toBeNull();
+  });
+
+  it("doesn't stacked the dimension field on a 1D horizontal bar with dimension only", () => {
+    const spec: TopLevel<NormalizedUnitSpec> = {
+      data: {url: 'data/barley.json'},
+      mark: {type: 'bar', orient: 'horizontal'},
+      encoding: {
+        y: {field: 'yield', type: 'quantitative'}
+      }
+    };
+    const stackProps = stack(spec.mark, spec.encoding);
+    expect(stackProps).toBeNull();
+  });
+
   it('should be disabled when stack is false', () => {
     for (const mark of STACKABLE_NON_POLAR_MARKS) {
       const spec: TopLevel<NormalizedUnitSpec> = {