fix paired tip label (#1769)

Author: mbostock

src/marks/tip.js

@@ -135,9 +135,9 @@ export class Tip extends Mark {
         const value = channel.value[i];
         if (!defined(value) && channel.scale == null) continue;
         if (key === "x2" && "x1" in sources) {
-          yield {name: formatLabel(scales, channel, "x"), value: formatPair(sources.x1, channel, i)};
+          yield {name: formatPairLabel(scales, sources.x1, channel, "x"), value: formatPair(sources.x1, channel, i)};
         } else if (key === "y2" && "y1" in sources) {
-          yield {name: formatLabel(scales, channel, "y"), value: formatPair(sources.y1, channel, i)};
+          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)};
@@ -334,6 +334,12 @@ function formatPair(c1, c2, i) {
     : `${formatDefault(c1.value[i])}–${formatDefault(c2.value[i])}`;
 }
 
+function formatPairLabel(scales, c1, c2, defaultLabel) {
+  const l1 = formatLabel(scales, c1, defaultLabel);
+  const l2 = formatLabel(scales, c2, defaultLabel);
+  return l1 === l2 ? l1 : `${l1}–${l2}`;
+}
+
 function formatLabel(scales, c, defaultLabel) {
   return String(scales[c.scale]?.label ?? c?.label ?? defaultLabel);
 }

test/output/tipAreaBand.svg

@@ -2,6 +2,11 @@ import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 import {feature, mesh} from "topojson-client";
 
+export async function tipAreaBand() {
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.areaY(aapl, {x: "Date", y1: "Low", y2: "High", tip: true, curve: "step", stroke: "currentColor"}).plot();
+}
+
 export async function tipAreaStack() {
   const industries = await d3.csv<any>("data/bls-industry-unemployment.csv", d3.autoType);
   return Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry", tip: true}).plot({marginLeft: 50});