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

Provide better tooltip offset in relation to points. #2045

Closed
wants to merge 4 commits into from
Closed

Provide better tooltip offset in relation to points. #2045

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8faab41
Update cargo lock
brochington Dec 12, 2022
11bc1ce
Merge branch 'finos_master'
brochington Dec 12, 2022
a315d5c
Calculate better point area offset so that text does not overlap.
brochington Dec 12, 2022
d01e298
Prefer const over let if not mutating
brochington Dec 12, 2022
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
Prev Previous commit
Next Next commit
Calculate better point area offset so that text does not overlap.
  • Loading branch information
@brochington
brochington committed Dec 12, 2022
commit a315d5ca2d1c4f4c98c8a4cc167c4104d673e0c4
23 changes: 19 additions & 4 deletions packages/perspective-viewer-d3fc/src/js/series/pointSeriesCanvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { groupFromKey } from "./seriesKey";
import { fromDomain } from "./seriesSymbols";
import { toValue } from "../tooltip/selectionData";

const PADDING_FACTOR = 100;

export function pointSeriesCanvas(
settings,
seriesKey,
Expand Down Expand Up @@ -43,11 +45,24 @@ export function pointSeriesCanvas(
context.font = settings.textStyles.font;
const { type } = settings.mainValues.find((x) => x.name === label);
const value = toValue(type, d.row[label]);
const offset = size
? Math.round(scale_factor * size(d.size)) * (15 / 1000) + 10
: 10;

context.fillText(value, offset, 4);
let offset = 10;

if (size) {
// `size(d.size)` is area (A) of circle.
// A = pi * r^2
// r = sqrt(A / pi)
let r = Math.sqrt((scale_factor * size(d.size)) / Math.PI);

// Determine point on circle at 45 degrees using Pythagorean theorem.
let c = Math.sqrt(2 * r * r) / 2;

// Add padding to offset.
const padding = PADDING_FACTOR / c;
offset = c + padding;
}

context.fillText(value, offset, -offset);
}

context.strokeStyle = withoutOpacity(colorValue);
Expand Down