From 194e1f46fa432d8666c4f05099f1a7c534dd911d Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Tue, 1 Aug 2023 07:32:11 -0700 Subject: [PATCH] fix paired tip label (#1769) --- src/marks/tip.js | 10 ++++-- test/output/tipAreaBand.svg | 66 +++++++++++++++++++++++++++++++++++++ test/plots/tip.ts | 5 +++ 3 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 test/output/tipAreaBand.svg diff --git a/src/marks/tip.js b/src/marks/tip.js index 10ce7f8973..b745084d65 100644 --- a/src/marks/tip.js +++ b/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); } diff --git a/test/output/tipAreaBand.svg b/test/output/tipAreaBand.svg new file mode 100644 index 0000000000..9ad11da81c --- /dev/null +++ b/test/output/tipAreaBand.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + 60 + 70 + 80 + 90 + 100 + 110 + 120 + 130 + 140 + 150 + 160 + 170 + 180 + 190 + + + + + + + + + + 2014 + 2015 + 2016 + 2017 + 2018 + + + + + + \ No newline at end of file diff --git a/test/plots/tip.ts b/test/plots/tip.ts index 9b49f06b2a..d2b1b78c0d 100644 --- a/test/plots/tip.ts +++ b/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("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("data/bls-industry-unemployment.csv", d3.autoType); return Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry", tip: true}).plot({marginLeft: 50});