refactor formatting logic

Author: mbostock

src/marks/tip.js

@@ -114,40 +114,13 @@ export class Tip extends Mark {
     const widthof = monospace ? monospaceWidth : defaultWidth;
     const ee = widthof(ellipsis);
 
-    // We borrow the scale’s tick format for facet channels; this is safe for
-    // ordinal scales (but not continuous scales where the display value may
-    // need higher precision), and generally better than the default format.
-    const formatFx = fx && inferTickFormat(fx);
-    const formatFy = fy && inferTickFormat(fy);
-
-    function* format(sources, i) {
-      if ("title" in sources) {
-        const text = sources.title.value[i];
-        for (const line of mark.splitLines(formatDefault(text))) {
-          yield {name: "", value: mark.clipLine(line)};
-        }
-        return;
-      }
-      for (const key in sources) {
-        if (key === "x1" && "x2" in sources) continue;
-        if (key === "y1" && "y2" in sources) continue;
-        const channel = sources[key];
-        const value = channel.value[i];
-        if (!defined(value) && channel.scale == null) continue;
-        if (key === "x2" && "x1" in sources) {
-          yield {name: formatPairLabel(scales, sources.x1, channel, "x"), value: formatPair(sources.x1, channel, i)};
-        } else if (key === "y2" && "y1" in sources) {
-          yield {name: formatPairLabel(scales, sources.y1, channel, "y"), value: formatPair(sources.y1, channel, i)};
-        } else {
-          const scale = channel.scale;
-          const line = {name: formatLabel(scales, channel, key), value: formatDefault(value)};
-          if (scale === "color" || scale === "opacity") line[scale] = values[key][i];
-          yield line;
-        }
-      }
-      if (index.fi != null && fx) yield {name: String(fx.label ?? "fx"), value: formatFx(index.fx)};
-      if (index.fi != null && fy) yield {name: String(fy.label ?? "fy"), value: formatFy(index.fy)};
-    }
+    // Determine the appropriate formatter.
+    const format =
+      "title" in sources // if there is a title channel
+        ? formatTitle // display the title as-is
+        : index.fi == null // if this mark is not faceted
+        ? formatChannels // display name-value pairs for channels
+        : formatFacetedChannels(index, scales); // same, plus facets
 
     // We don’t call applyChannelStyles because we only use the channels to
     // derive the content of the tip, not its aesthetics.
@@ -173,8 +146,8 @@ export class Tip extends Mark {
               this.setAttribute("stroke", "none");
               // iteratively render each channel value
               const names = new Set();
-              for (const line of format(sources, i)) {
-                const name = line.name;
+              for (const line of format.call(mark, i, sources, scales, values)) {
+                const {name = ""} = line;
                 if (name && names.has(name)) continue;
                 else names.add(name);
                 renderLine(that, line);
@@ -188,7 +161,7 @@ export class Tip extends Mark {
     // just the initial layout of the text; in postrender we will compute the
     // exact text metrics and translate the text as needed once we know the
     // tip’s orientation (anchor).
-    function renderLine(selection, {name, value, color, opacity}) {
+    function renderLine(selection, {name = "", value = "", color, opacity}) {
       const swatch = color != null || opacity != null;
       let title;
       let w = lineWidth * 100;
@@ -328,6 +301,47 @@ function getSources({channels}) {
   return sources;
 }
 
+function* formatTitle(i, {title}) {
+  const text = title.value[i];
+  for (const line of this.splitLines(formatDefault(text))) {
+    yield {name: "", value: this.clipLine(line)};
+  }
+}
+
+function* formatChannels(i, channels, scales, values) {
+  for (const key in channels) {
+    if (key === "x1" && "x2" in channels) continue;
+    if (key === "y1" && "y2" in channels) continue;
+    const channel = channels[key];
+    const value = channel.value[i];
+    if (!defined(value) && channel.scale == null) continue;
+    if (key === "x2" && "x1" in channels) {
+      yield {name: formatPairLabel(scales, channels.x1, channel, "x"), value: formatPair(channels.x1, channel, i)};
+    } else if (key === "y2" && "y1" in channels) {
+      yield {name: formatPairLabel(scales, channels.y1, channel, "y"), value: formatPair(channels.y1, channel, i)};
+    } else {
+      const scale = channel.scale;
+      const line = {name: formatLabel(scales, channel, key), value: formatDefault(value)};
+      if (scale === "color" || scale === "opacity") line[scale] = values[key][i];
+      yield line;
+    }
+  }
+}
+
+function formatFacetedChannels(index, scales) {
+  const {fx, fy} = scales;
+  // We borrow the scale’s tick format for facet channels; this is safe for
+  // ordinal scales (but not continuous scales where the display value may need
+  // higher precision), and generally better than the default format.
+  const formatFx = fx && inferTickFormat(fx);
+  const formatFy = fy && inferTickFormat(fy);
+  return function* (i, channels, scales, values) {
+    yield* formatChannels(i, channels, scales, values);
+    if (fx) yield {name: String(fx.label ?? "fx"), value: formatFx(index.fx)};
+    if (fy) yield {name: String(fy.label ?? "fy"), value: formatFy(index.fy)};
+  };
+}
+
 function formatPair(c1, c2, i) {
   return c2.hint?.length // e.g., stackY’s y1 and y2
     ? `${formatDefault(c2.value[i] - c1.value[i])}`