fix: Make bars with one axis thicker (#8894)

Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com> Co-authored-by: Kanit Wongsuphasawat <kanitw@gmail.com>
vega · May 11, 2023 · 309af9a · 309af9a
1 parent 726c97c
commit 309af9a
Show file tree

Hide file tree

Showing 17 changed files with 157 additions and 13 deletions.
diff --git a/examples/compiled/bar_1d.vg.json b/examples/compiled/bar_1d.vg.json
@@ -42,7 +42,7 @@
           "x": {"scale": "x", "field": "sum_people"},
           "x2": {"scale": "x", "value": 0},
           "yc": {"signal": "height", "mult": 0.5},
-          "height": {"value": 18}
+          "height": {"signal": "0.9 * height"}
         }
       }
     }

diff --git a/examples/compiled/bar_1d_default_size.png b/examples/compiled/bar_1d_default_size.png
diff --git a/examples/compiled/bar_1d_default_size.svg b/examples/compiled/bar_1d_default_size.svg
diff --git a/examples/compiled/bar_1d_default_size.vg.json b/examples/compiled/bar_1d_default_size.vg.json
@@ -0,0 +1,85 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "background": "white",
+  "padding": 5,
+  "width": 200,
+  "height": 200,
+  "style": "cell",
+  "data": [
+    {
+      "name": "source_0",
+      "url": "data/population.json",
+      "format": {"type": "json"},
+      "transform": [
+        {"type": "filter", "expr": "datum.year == 2000"},
+        {
+          "type": "aggregate",
+          "groupby": [],
+          "ops": ["sum"],
+          "fields": ["people"],
+          "as": ["sum_people"]
+        },
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"sum_people\"]) && isFinite(+datum[\"sum_people\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "source_0"},
+      "encode": {
+        "update": {
+          "fill": {"value": "#4c78a8"},
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {
+            "signal": "\"population: \" + (format(datum[\"sum_people\"], \"\"))"
+          },
+          "x": {"scale": "x", "field": "sum_people"},
+          "x2": {"scale": "x", "value": 0},
+          "yc": {"signal": "height", "mult": 0.5},
+          "height": {"signal": "0.9 * height"}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "linear",
+      "domain": {"data": "source_0", "field": "sum_people"},
+      "range": [0, {"signal": "width"}],
+      "nice": true,
+      "zero": true
+    }
+  ],
+  "axes": [
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "domain": false,
+      "labels": false,
+      "aria": false,
+      "maxExtent": 0,
+      "minExtent": 0,
+      "ticks": false,
+      "zindex": 0
+    },
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": false,
+      "title": "population",
+      "labelFlush": true,
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "zindex": 0
+    }
+  ]
+}
diff --git a/examples/compiled/bar_1d_step_config.png b/examples/compiled/bar_1d_step_config.png
diff --git a/examples/compiled/bar_1d_step_config.svg b/examples/compiled/bar_1d_step_config.svg
diff --git a/examples/compiled/bar_1d_step_config.vg.json b/examples/compiled/bar_1d_step_config.vg.json
@@ -42,7 +42,7 @@
           "x": {"scale": "x", "field": "sum_people"},
           "x2": {"scale": "x", "value": 0},
           "yc": {"signal": "height", "mult": 0.5},
-          "height": {"value": 13}
+          "height": {"signal": "0.9 * height"}
         }
       }
     }

diff --git a/examples/compiled/facet_bullet.png b/examples/compiled/facet_bullet.png
diff --git a/examples/compiled/facet_bullet.svg b/examples/compiled/facet_bullet.svg
diff --git a/examples/compiled/facet_bullet.vg.json b/examples/compiled/facet_bullet.vg.json
@@ -344,7 +344,7 @@
               "x": {"scale": "child_x", "field": "ranges\\.2\\._end"},
               "x2": {"scale": "child_x", "field": "ranges\\.2\\._start"},
               "yc": {"signal": "child_height", "mult": 0.5},
-              "height": {"value": 18}
+              "height": {"signal": "1 * height"}
             }
           }
         },
@@ -363,7 +363,7 @@
               "x": {"scale": "child_x", "field": "ranges\\.1\\._end"},
               "x2": {"scale": "child_x", "field": "ranges\\.1\\._start"},
               "yc": {"signal": "child_height", "mult": 0.5},
-              "height": {"value": 18}
+              "height": {"signal": "1 * height"}
             }
           }
         },
@@ -382,7 +382,7 @@
               "x": {"scale": "child_x", "field": "ranges\\.0\\._end"},
               "x2": {"scale": "child_x", "field": "ranges\\.0\\._start"},
               "yc": {"signal": "child_height", "mult": 0.5},
-              "height": {"value": 18}
+              "height": {"signal": "1 * height"}
             }
           }
         },

diff --git a/examples/compiled/stacked_bar_1d.vg.json b/examples/compiled/stacked_bar_1d.vg.json
@@ -49,7 +49,7 @@
           "x": {"scale": "x", "field": "sum_Acceleration_end"},
           "x2": {"scale": "x", "field": "sum_Acceleration_start"},
           "yc": {"signal": "height", "mult": 0.5},
-          "height": {"value": 18}
+          "height": {"signal": "0.9 * height"}
         }
       }
     }

diff --git a/examples/specs/bar_1d_default_size.vl.json b/examples/specs/bar_1d_default_size.vl.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": { "url": "data/population.json"},
+  "transform": [{
+    "filter": "datum.year == 2000"
+  }],
+  "mark": "bar",
+  "encoding": {
+    "x": {
+      "aggregate": "sum", "field": "people",
+      "title": "population"
+    }
+  },
+  "height": 200
+}
diff --git a/examples/specs/facet_bullet.vl.json b/examples/specs/facet_bullet.vl.json
@@ -45,5 +45,5 @@
     }]
   },
   "resolve": {"scale": {"x": "independent"}},
-  "config": {"tick": {"thickness": 2}}
+  "config": {"tick": {"thickness": 2}, "scale": {"barBandPaddingInner": 0}}
 }
diff --git a/examples/specs/normalized/facet_bullet_normalized.vl.json b/examples/specs/normalized/facet_bullet_normalized.vl.json
@@ -118,5 +118,5 @@
     ]
   },
   "resolve": {"scale": {"x": "independent"}},
-  "config": {"tick": {"thickness": 2}}
+  "config": {"tick": {"thickness": 2}, "scale": {"barBandPaddingInner": 0}}
 }
diff --git a/src/compile/mark/encode/position-rect.ts b/src/compile/mark/encode/position-rect.ts
@@ -28,6 +28,9 @@ import {pointPositionDefaultRef} from './position-point';
 import {rangePosition} from './position-range';
 import * as ref from './valueref';
 import {getOffsetScaleChannel} from '../../../channel';
+import {getFirstDefined} from '../../../util';
+import {Mark} from '../../../mark';
+import {isExprRef} from '../../../expr';
 
 export function rectPosition(model: UnitModel, channel: 'x' | 'y' | 'theta' | 'radius'): VgEncodeEntry {
   const {config, encoding, markDef} = model;
@@ -75,7 +78,9 @@ function defaultSizeRef(
   scaleName: string,
   scale: ScaleComponent,
   config: Config,
-  bandSize: BandSize
+  bandSize: BandSize,
+  hasFieldDef: boolean,
+  mark: Mark
 ): VgValueRef {
   if (isRelativeBandSize(bandSize)) {
     if (scale) {
@@ -110,6 +115,17 @@ function defaultSizeRef(
       return {value: scaleRange.step - 2};
     }
   }
+  if (!hasFieldDef) {
+    const {bandPaddingInner, barBandPaddingInner, rectBandPaddingInner} = config.scale;
+    const padding = getFirstDefined(bandPaddingInner, mark === 'bar' ? barBandPaddingInner : rectBandPaddingInner); // this part is like paddingInner in scale.ts
+    if (isSignalRef(padding)) {
+      return {signal: `(1 - (${padding.signal})) * ${sizeChannel}`};
+    } else if (isNumber(padding)) {
+      return {signal: `${1 - padding} * ${sizeChannel}`};
+    } else if (isExprRef(padding)) {
+      return {signal: `(1 - (${padding.expr})) * ${sizeChannel}`};
+    }
+  }
   const defaultStep = getViewConfigDiscreteStep(config.view, sizeChannel);
   return {value: defaultStep - 2};
 }
@@ -155,7 +171,15 @@ function positionAndSize(
   const bandSize = getBandSize({channel, fieldDef, markDef, config, scaleType: scale?.get('type'), useVlSizeChannel});
 
   sizeMixins = sizeMixins || {
-    [vgSizeChannel]: defaultSizeRef(vgSizeChannel, offsetScaleName || scaleName, offsetScale || scale, config, bandSize)
+    [vgSizeChannel]: defaultSizeRef(
+      vgSizeChannel,
+      offsetScaleName || scaleName,
+      offsetScale || scale,
+      config,
+      bandSize,
+      !!fieldDef,
+      markDef.type
+    )
   };
 
   /*