fix paired tip label (#1769)

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/plots/tip.ts

@@ -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});