fix: Respect tickMinStep for binned scale (#3904)

Currently, we do not pass in the `count` (calculated based on
`tickMinStep`) while generating tick values for binned scale.

This causes performance issues especially when there exist a huge amount
of bins. Attempting to render too many ticks will sometimes even crash
the browser tab.

Before:
<img width="914" alt="Screenshot 2024-04-19 at 3 39 57 PM"
src="https://github.com/vega/vega/assets/134452031/407659a6-b173-4661-a422-c2df6ebbc926">

After:
<img width="919" alt="Screenshot 2024-04-19 at 3 39 26 PM"
src="https://github.com/vega/vega/assets/134452031/07fba47d-791c-4423-90b9-8fec8f41be4d">

(`tickMinStep` both set to `0.1`)

packages/vega-scale/src/ticks.js

@@ -101,7 +101,7 @@ export function validTicks(scale, ticks, count) {
  * @return {Array<*>} - The generated tick values.
  */
 export function tickValues(scale, count) {
-  return scale.bins ? validTicks(scale, scale.bins)
+  return scale.bins ? validTicks(scale, scale.bins, count)
     : scale.ticks ? scale.ticks(count)
     : scale.domain();
 }

packages/vega-scale/test/ticks-test.js

@@ -1,5 +1,6 @@
 var tape = require('tape'),
     validTicks = require('../').validTicks,
+    tickValues = require('../').tickValues,
     timeInterval = require('vega-time').timeInterval;
 
 tape('validTicks uses count correctly', t => {
@@ -29,3 +30,37 @@ tape('validTicks uses count correctly', t => {
 
   t.end();
 });
+
+tape('tickValues uses scale and count correctly', t => {
+  const data = [0, 1, 2, 3, 4, 5, 6, 7];
+
+  const scaleWithBins = function(x) { return x; };
+  scaleWithBins.range = function() { return [0, 10]; };
+  scaleWithBins.bins = [0, 2, 4, 6, 8];
+
+  // Use all bins if within specified count
+  const t1 = tickValues(scaleWithBins, 5);
+  t.deepEqual(t1, [0, 2, 4, 6, 8]);
+
+  // Filter bins if too many
+  const t2 = tickValues(scaleWithBins, 4);
+  t.deepEqual(t2, [0, 4, 8]);
+
+  const scaleWithTicks = function(x) { return x; };
+  scaleWithTicks.range = function() { return [0, 10]; };
+  scaleWithTicks.ticks = function(count) { return Array.from(Array(count).keys()); };
+
+  // Use scale.ticks with specified count if available
+  const t3 = tickValues(scaleWithTicks, 3);
+  t.deepEqual(t3, [0, 1, 2]);
+
+  const scale = function(x) { return x; };
+  scale.range = function() { return [0, 10]; };
+  scale.domain = function() { return data; };
+
+  // Use full domain if no bins or ticks
+  const t4 = tickValues(scale, 5);
+  t.deepEqual(t4, data);
+
+  t.end();
+});