diff --git a/docs/community.md b/docs/community.md index 75d20a1aea..4923b1e9e1 100644 --- a/docs/community.md +++ b/docs/community.md @@ -10,8 +10,6 @@ Please star ⭐️ our [GitHub repo](https://github.com/observablehq/plot) to sh Plot is getting better all the time; catch up on [recent releases](https://github.com/observablehq/plot/releases) by reading our [CHANGELOG](https://github.com/observablehq/plot/blob/main/CHANGELOG.md). -For email updates, sign up for the [Observable Plot Twist](https://observablehq.com/@observablehq/plot-twist-newsletter-signup) newsletter. (See our [back issues](https://observablehq.com/collection/@observablehq/newsletters/2) and [blog](https://observablehq.com/blog), too.) This monthly newsletter will let you know about new features in Plot, inspiring work by the community, upcoming workshops and community events, and more. - And of course, follow us on [Observable](https://observablehq.com/@observablehq?tab=profile), [Mastodon](https://vis.social/@observablehq), [Twitter](https://twitter.com/observablehq), and [LinkedIn](https://www.linkedin.com/company/observable)! ## Getting help diff --git a/docs/marks/tip.md b/docs/marks/tip.md index 69e950fb26..d4221e6d30 100644 --- a/docs/marks/tip.md +++ b/docs/marks/tip.md @@ -182,7 +182,7 @@ Plot.plot({ ``` ::: -If you don’t specify an **anchor**, the tip mark will choose one automatically. It will prefer *top-left* if the tip fits; otherwise it will switch sides to try to contain the tip within the plot’s frame. When dynamically rendering the tip mark, say with the [pointer interaction](../interactions/pointer.md), the tip will also attempt to use the anchor it chose previously, making the tip more stable as you move the pointer and improving readability. In some cases, it may not be possible to fit the tip within the plot’s frame; consider setting the plot’s **style** to `overflow: visible;` to prevent the tip from being truncated. +If you don’t specify an explicit **anchor**, the tip mark will choose one automatically, using the **preferredAnchor** if it fits. The preferred anchor defaults to *bottom*, except when using the **tip** option and the [pointerY pointing mode](../interactions/pointer.md), in which case it defaults to *left*. In some cases, it may not be possible to fit the tip within the plot’s frame; consider setting the plot’s **style** to `overflow: visible;` to prevent the tip from being truncated. The tip mark is compatible with transforms that derive **x** and **y** dynamically from data, such as the [centroid transform](../transforms/centroid.md) which computes polygon centroids. Below, a map of the United States shows state names. We reduce the size of the tips by setting the **textPadding** option to 3 pixels instead of the default 8. diff --git a/package.json b/package.json index efb33b6b36..d202787411 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "scripts": { "test": "yarn test:mocha && yarn test:tsc && yarn test:lint && yarn test:prettier", "test:coverage": "npx c8 yarn test:mocha", - "test:mocha": "mkdir -p test/output && mocha 'test/**/*-test.*' 'test/plot.js'", + "test:mocha": "mkdir -p test/output && TZ=America/Los_Angeles mocha 'test/**/*-test.*' 'test/plot.js'", "test:lint": "eslint src test", "test:prettier": "prettier --check src test", "test:tsc": "tsc", diff --git a/src/marks/axis.js b/src/marks/axis.js index 9e090db33e..1a59ef5501 100644 --- a/src/marks/axis.js +++ b/src/marks/axis.js @@ -638,7 +638,7 @@ export function inferTickFormat(scale, data, ticks, tickFormat, anchor) { return typeof tickFormat === "function" ? tickFormat : tickFormat === undefined && data && isTemporal(data) - ? inferTimeFormat(data, anchor) ?? formatDefault + ? inferTimeFormat(scale.type, data, anchor) ?? formatDefault : scale.tickFormat ? scale.tickFormat(typeof ticks === "number" ? ticks : null, tickFormat) : tickFormat === undefined diff --git a/src/marks/tip.d.ts b/src/marks/tip.d.ts index 81cac9b1e8..e115e9db32 100644 --- a/src/marks/tip.d.ts +++ b/src/marks/tip.d.ts @@ -62,12 +62,28 @@ export interface TipOptions extends MarkOptions, TextStyles { */ anchor?: FrameAnchor; + /** + * If an explicit tip anchor is not specified, an anchor is chosen + * automatically such that the tip fits within the plot’s frame; if the + * preferred anchor fits, it is chosen. + */ + preferredAnchor?: FrameAnchor | null; + /** * How channel values are formatted for display. If a format is a string, it * is interpreted as a (UTC) time format for temporal channels, and otherwise * a number format. */ format?: {[name in ChannelName]?: boolean | string | ((d: any, i: number) => string)}; + + /** The image filter for the tip’s box; defaults to a drop shadow. */ + pathFilter?: string; + + /** The size of the tip’s pointer in pixels; defaults to 12. */ + pointerSize?: number; + + /** The padding around the text in pixels; defaults to 8. */ + textPadding?: number; } /** diff --git a/src/marks/tip.js b/src/marks/tip.js index 75f06e45d1..e23942c69e 100644 --- a/src/marks/tip.js +++ b/src/marks/tip.js @@ -33,6 +33,7 @@ export class Tip extends Mark { y1, y2, anchor, + preferredAnchor = "bottom", monospace, fontFamily = monospace ? "ui-monospace, monospace" : undefined, fontSize, @@ -65,7 +66,7 @@ export class Tip extends Mark { defaults ); this.anchor = maybeAnchor(anchor, "anchor"); - this.previousAnchor = this.anchor ?? "top-left"; + this.preferredAnchor = maybeAnchor(preferredAnchor, "preferredAnchor"); this.frameAnchor = maybeFrameAnchor(frameAnchor); this.textAnchor = impliedString(textAnchor, "middle"); this.textPadding = +textPadding; @@ -208,16 +209,26 @@ export class Tip extends Mark { (w = Math.round(w)), (h = Math.round(h)); // crisp edges let a = anchor; // use the specified anchor, if any if (a === undefined) { - a = mark.previousAnchor; // favor the previous anchor, if it fits const x = px(i) + ox; const y = py(i) + oy; - const fitLeft = x + w + r * 2 < width; - const fitRight = x - w - r * 2 > 0; - const fitTop = y + h + m + r * 2 + 7 < height; + const fitLeft = x + w + m + r * 2 < width; + const fitRight = x - w - m - r * 2 > 0; + const fitTop = y + h + m + r * 2 < height; const fitBottom = y - h - m - r * 2 > 0; - const ax = (/-left$/.test(a) ? fitLeft || !fitRight : fitLeft && !fitRight) ? "left" : "right"; - const ay = (/^top-/.test(a) ? fitTop || !fitBottom : fitTop && !fitBottom) ? "top" : "bottom"; - a = mark.previousAnchor = `${ay}-${ax}`; + a = + fitLeft && fitRight + ? fitTop && fitBottom + ? mark.preferredAnchor + : fitBottom + ? "bottom" + : "top" + : fitTop && fitBottom + ? fitLeft + ? "left" + : "right" + : (fitLeft || fitRight) && (fitTop || fitBottom) + ? `${fitBottom ? "bottom" : "top"}-${fitLeft ? "left" : "right"}` + : mark.preferredAnchor; } const path = this.firstChild; // note: assumes exactly two children! const text = this.lastChild; // note: assumes exactly two children! diff --git a/src/plot.js b/src/plot.js index 039a269ada..32824f3153 100644 --- a/src/plot.js +++ b/src/plot.js @@ -527,10 +527,11 @@ function inferTips(marks) { if (tipOptions) { if (tipOptions === true) tipOptions = {}; else if (typeof tipOptions === "string") tipOptions = {pointer: tipOptions}; - let {pointer: p} = tipOptions; + let {pointer: p, preferredAnchor: a} = tipOptions; p = /^x$/i.test(p) ? pointerX : /^y$/i.test(p) ? pointerY : pointer; // TODO validate? tipOptions = p(derive(mark, tipOptions)); tipOptions.title = null; // prevent implicit title for primitive data + if (a === undefined) tipOptions.preferredAnchor = p === pointerY ? "left" : "bottom"; const t = tip(mark.data, tipOptions); t.facet = mark.facet; // inherit facet settings t.facetAnchor = mark.facetAnchor; // inherit facet settings diff --git a/src/time.js b/src/time.js index 5197a09f52..58314ec0d6 100644 --- a/src/time.js +++ b/src/time.js @@ -123,23 +123,39 @@ for (const [name, interval] of utcIntervals) { interval[intervalType] = "utc"; } +const utcFormatIntervals = [ + ["year", utcYear, "utc"], + ["month", utcMonth, "utc"], + ["day", unixDay, "utc", 6 * durationMonth], + ["hour", utcHour, "utc", 3 * durationDay], + ["minute", utcMinute, "utc", 6 * durationHour], + ["second", utcSecond, "utc", 30 * durationMinute] +]; + +const timeFormatIntervals = [ + ["year", timeYear, "time"], + ["month", timeMonth, "time"], + ["day", timeDay, "time", 6 * durationMonth], + ["hour", timeHour, "time", 3 * durationDay], + ["minute", timeMinute, "time", 6 * durationHour], + ["second", timeSecond, "time", 30 * durationMinute] +]; + // An interleaved array of UTC and local time intervals, in descending order // from largest to smallest, used to determine the most specific standard time // format for a given array of dates. This is a subset of the tick intervals // listed above; we only need the breakpoints where the format changes. const formatIntervals = [ - ["year", utcYear, "utc"], - ["year", timeYear, "time"], - ["month", utcMonth, "utc"], - ["month", timeMonth, "time"], - ["day", unixDay, "utc", 6 * durationMonth], - ["day", timeDay, "time", 6 * durationMonth], + utcFormatIntervals[0], + timeFormatIntervals[0], + utcFormatIntervals[1], + timeFormatIntervals[1], + utcFormatIntervals[2], + timeFormatIntervals[2], // Below day, local time typically has an hourly offset from UTC and hence the // two are aligned and indistinguishable; therefore, we only consider UTC, and // we don’t consider these if the domain only has a single value. - ["hour", utcHour, "utc", 3 * durationDay], - ["minute", utcMinute, "utc", 6 * durationHour], - ["second", utcSecond, "utc", 30 * durationMinute] + ...utcFormatIntervals.slice(3) ]; function parseInterval(input, intervals, type) { @@ -238,16 +254,20 @@ function getTimeTemplate(anchor) { : (f1, f2) => `${f1}\n${f2}`; } +function getFormatIntervals(type) { + return type === "time" ? timeFormatIntervals : type === "utc" ? utcFormatIntervals : formatIntervals; +} + // Given an array of dates, returns the largest compatible standard time // interval. If no standard interval is compatible (other than milliseconds, // which is universally compatible), returns undefined. -export function inferTimeFormat(dates, anchor) { +export function inferTimeFormat(type, dates, anchor) { const step = max(pairs(dates, (a, b) => Math.abs(b - a))); // maybe undefined! if (step < 1000) return formatTimeInterval("millisecond", "utc", anchor); - for (const [name, interval, type, maxStep] of formatIntervals) { + for (const [name, interval, intervalType, maxStep] of getFormatIntervals(type)) { if (step > maxStep) break; // e.g., 52 weeks if (name === "hour" && !step) break; // e.g., domain with a single date - if (dates.every((d) => interval.floor(d) >= d)) return formatTimeInterval(name, type, anchor); + if (dates.every((d) => interval.floor(d) >= d)) return formatTimeInterval(name, intervalType, anchor); } } diff --git a/test/output/timeAxisLocal.svg b/test/output/timeAxisLocal.svg new file mode 100644 index 0000000000..94dbd567b1 --- /dev/null +++ b/test/output/timeAxisLocal.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + 8:30AM + 9:00 + 9:30 + 10:00 + 10:30 + 11:00 + 11:30 + 12:00PM + + + + + + + + + \ No newline at end of file diff --git a/test/output/tipLineX.svg b/test/output/tipLineX.svg new file mode 100644 index 0000000000..9db6df7f4b --- /dev/null +++ b/test/output/tipLineX.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + 2014 + 2015 + 2016 + 2017 + 2018 + + + + + + + + + + + + 60 + 80 + 100 + 120 + 140 + 160 + 180 + + + Close → + + + + + + \ No newline at end of file diff --git a/test/output/tipLine.svg b/test/output/tipLineY.svg similarity index 100% rename from test/output/tipLine.svg rename to test/output/tipLineY.svg diff --git a/test/plots/time-axis.ts b/test/plots/time-axis.ts index 803d113b0d..38e6c2123a 100644 --- a/test/plots/time-axis.ts +++ b/test/plots/time-axis.ts @@ -148,3 +148,14 @@ export async function warnTimeAxisOrdinalExplicitIncompatibleTicks() { marks: [Plot.barY(aapl, Plot.groupX({y: "median", title: "min"}, {title: "Date", x: "Date", y: "Close"}))] }); } + +export async function timeAxisLocal() { + const dates = [ + "2023-09-30T15:05:48.452Z", + "2023-09-30T16:05:48.452Z", + "2023-09-30T17:05:48.452Z", + "2023-09-30T18:05:48.452Z", + "2023-09-30T19:05:48.452Z" + ].map((d) => new Date(d)); + return Plot.dotX(dates).plot({x: {type: "time"}}); +} diff --git a/test/plots/tip.ts b/test/plots/tip.ts index 41bcaf5105..bd7103545a 100644 --- a/test/plots/tip.ts +++ b/test/plots/tip.ts @@ -171,7 +171,12 @@ export async function tipHexbinExplicit() { }); } -export async function tipLine() { +export async function tipLineX() { + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.lineX(aapl, {y: "Date", x: "Close", tip: true}).plot(); +} + +export async function tipLineY() { const aapl = await d3.csv("data/aapl.csv", d3.autoType); return Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot(); }