Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ignoreChannels option for tip mark #1822

Closed
wants to merge 2 commits into from
Closed

Add ignoreChannels option for tip mark #1822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1763853
Add ignoreChannels option for tip mark
mkfreeman Aug 22, 2023
ca3def3
Prettier
mkfreeman Aug 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/marks/tip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ const defaults = {
stroke: "currentColor"
};

// These channels are not displayed in the tip; TODO allow customization.
const ignoreChannels = new Set(["geometry", "href", "src", "ariaLabel"]);
// These channels are not displayed in the tip
const defaultIgnoreChannels = new Set(["geometry", "href", "src", "ariaLabel"]);

export class Tip extends Mark {
constructor(data, options = {}) {
if (options.tip) options = {...options, tip: false};
if (options.title === undefined && isIterable(data) && isTextual(data)) options = {...options, title: identity};
if (options.ignoreChannels)
options = {...options, ignoreChannels: new Set([...defaultIgnoreChannels, ...options.ignoreChannels])};
const {
x,
y,
Expand All @@ -47,7 +49,8 @@ export class Tip extends Mark {
textPadding = 8,
title,
pointerSize = 12,
pathFilter = "drop-shadow(0 3px 4px rgba(0,0,0,0.2))"
pathFilter = "drop-shadow(0 3px 4px rgba(0,0,0,0.2))",
ignoreChannels = defaultIgnoreChannels
} = options;
super(
data,
Expand Down Expand Up @@ -82,6 +85,7 @@ export class Tip extends Mark {
for (const key in defaults) if (key in this.channels) this[key] = defaults[key]; // apply default even if channel
this.splitLines = splitter(this);
this.clipLine = clipper(this);
this.ignoreChannels = ignoreChannels;
}
render(index, scales, values, dimensions, context) {
const mark = this;
Expand All @@ -90,7 +94,7 @@ export class Tip extends Mark {
const {anchor, monospace, lineHeight, lineWidth} = this;
const {textPadding: r, pointerSize: m, pathFilter} = this;
const {marginTop, marginLeft} = dimensions;
const sources = getSources(values);
const sources = getSources(values, this.ignoreChannels);

// The anchor position is the middle of x1 & y1 and x2 & y2, if available,
// or x & y; the former is considered more specific because it’s how we
Expand Down Expand Up @@ -318,10 +322,10 @@ function getPath(anchor, m, r, width, height) {
}
}

function getSources({channels}) {
function getSources({channels}, ignore) {
const sources = {};
for (const key in channels) {
if (ignoreChannels.has(key)) continue;
if (ignore.has(key)) continue;
const source = getSource(channels, key);
if (source) sources[key] = source;
}
Expand Down
18 changes: 18 additions & 0 deletions test/plots/tip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,24 @@ export async function tipLine() {
return Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot();
}

export async function tipIgnoreChannels() {
const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
return Plot.plot({
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.tip(
aapl,
Plot.pointerX({
x: "Date",
y: "Close",
channels: {custom: (d) => d.Close},
ignoreChannels: "x"
})
)
]
});
}

export async function tipNewLines() {
return Plot.plot({
height: 40,
Expand Down