Reducer implementations are confused with reducer scale overrides

[Fil]

This should display a chart in greyscale, by opting in the scale.

Note that it works when reduce is a string (reduce: "mode").

(Seen in #1360)

export async function reducerGroupScaleFunction() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  return Plot.plot({
    color: {scheme: "greys"},
    marks: [
      Plot.barY(
        penguins,
        Plot.groupX(
          {
            y: "count",
            fill: {
              reduce: (index: number[], values: any[]) => d3.mode(index, (i) => values[i]),
              scale: true // 🌶
            }
          },
          {x: "species", fill: (d) => (d.island === "Biscoe" ? "orange" : "green"), fy: "sex"}
        )
      )
    ]
  });
}

[mbostock]

This is a bug that was introduced by #1310 to fix #1309. The problem is that we are confusing a ReducerImplementation with a reducer scale override declaration here, since both are objects that define reduce properties that are functions:

plot/src/transforms/group.js

Line 181 in 2ac08e2

if (isObject(reduce) && typeof reduce.reduce !== "function") (scale = reduce.scale), (reduce = reduce.reduce);

[mbostock]

Uh, actually, the bug description is wrong. (Same confusion as in #1360.) If you want to declare a scale override with a reducer implementation, you need another level of nesting:

Plot.plot({
  color: {scheme: "greys"},
  marks: [
    Plot.barY(
      penguins,
      Plot.groupX(
        {
          y: "count",
          fill: {
            reduce: {
              reduce: (index, values) => d3.mode(index, (i) => values[i])
            },
            scale: true // 🌶
          }
        },
        {
          x: "species",
          fill: (d) => (d.island === "Biscoe" ? "orange" : "green"),
          fy: "sex"
        }
      )
    )
  ]
})

If you want to declare a scale override in conjunction with a reducer function, then reduce only takes values, not an index.

Plot.plot({
  color: {scheme: "greys"},
  marks: [
    Plot.barY(
      penguins,
      Plot.groupX(
        {
          y: "count",
          fill: {
            reduce: (values) => d3.mode(values[i]),
            scale: true // 🌶
          }
        },
        {
          x: "species",
          fill: (d) => (d.island === "Biscoe" ? "orange" : "green"),
          fy: "sex"
        }
      )
    )
  ]
})