labelof facets

Author: Fil

src/facet.js

@@ -1,4 +1,4 @@
-import {keyword, isObject, isTypedArray, range, slice, valueof} from "./options.js";
+import {keyword, isObject, isTypedArray, labelof, range, slice, valueof} from "./options.js";
 import {warn} from "./warnings.js";
 
 // facet filter, by mark
@@ -21,9 +21,18 @@ export function maybeFacet(facet, data) {
   // local facets can be defined as facet: {x: accessor, xFilter: "lte"}
   if (!isObject(facet)) throw new Error(`Unsupported facet ${facet}`);
   const {x, xFilter = "eq", y, yFilter = "eq"} = facet;
+  let xv, yv;
+  if (x !== undefined) {
+    xv = valueof(data, x);
+    if (xv != null) xv.label = labelof(x);
+  }
+  if (y !== undefined) {
+    yv = valueof(data, y);
+    if (yv != null) yv.label = labelof(y);
+  }
   return {
-    ...(x !== undefined && {x: valueof(data, x)}),
-    ...(y !== undefined && {y: valueof(data, y)}),
+    ...(xv && {x: xv}),
+    ...(yv && {y: yv}),
     xFilter: maybeFacetFilter(xFilter, "x"),
     yFilter: maybeFacetFilter(yFilter, "y")
   };

test/output/penguinFacetAnnotated.svg

@@ -4,14 +4,13 @@ import * as d3 from "d3";
 const parse = d3.utcParse("%m/%d/%Y");
 
 export default async function () {
-  const walmart = await d3.tsv("data/walmart.tsv", (d) => ({date: parse(d.date)}));
+  const walmart = await d3.tsv("data/walmart.tsv", (d) => ({
+    date: parse(d.date),
+    year: parse(d.date).getUTCFullYear()
+  }));
   return Plot.plot({
     width: 300,
-    facet: {
-      data: walmart,
-      y: (d) => d.date.getUTCFullYear(),
-      inset: 0
-    },
+    facet: {inset: 0, label: null},
     x: {percent: true},
     fy: {tickFormat: "d"},
     marks: [
@@ -20,8 +19,8 @@ export default async function () {
         Plot.groupZ(
           {x: "count"},
           {
-            fill: (d) => d.date.getUTCFullYear(),
-            facet: {y: (d) => d.date.getUTCFullYear(), yFilter: "lte"},
+            fill: "year",
+            facet: {y: "year", yFilter: "lte"},
             stroke: "white",
             offset: "expand"
           }