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

fix(scatter): multi-tooltip doesn't show on hover for overlapping data points #652

Merged
merged 18 commits into from
Jun 12, 2020
Merged

fix(scatter): multi-tooltip doesn't show on hover for overlapping data points #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f0d4aa7
Merge pull request #1 from carbon-design-system/master
navjeets Jun 2, 2020
94d2dbc
fix(scatter): multi-tooltip doesn't show on hover over data points
Jun 2, 2020
e7496c1
fix(scatter): multi-tooltip doesn't show on hover over data points
Jun 2, 2020
6338b5f
Merge branch 'master' into master
navjeets Jun 3, 2020
19382f5
Merge branch 'master' of https://github.com/carbon-design-system/carb…
Jun 3, 2020
882bbe6
Merge branch 'master' of https://github.com/navjeets/carbon-charts
Jun 3, 2020
cb83c39
fix(scatter): multi-tooltip doesn't show on hover over data points
Jun 3, 2020
0eb8572
Changelog
Jun 3, 2020
f14d35f
fix(scatter): multi-tooltip doesn't show on hover over data points
Jun 4, 2020
6c71834
Update scatter.ts
Jun 4, 2020
52b22a2
fix(scatter): multi-tooltip doesn't show on hover over data points
Jun 4, 2020
880cb0b
fix(scatter): multi-tooltip doesn't show on hover over data points
Jun 5, 2020
181ec07
Update scatter.ts
Jun 5, 2020
2c8613b
fix(scatter): multi-tooltip doesn't show on hover over data points
Jun 5, 2020
d8f0ad4
Update scatter.ts
Jun 5, 2020
c12bb6e
Merge branch 'master' into master
theiliad Jun 10, 2020
14194fb
resolved conflicts with master
Jun 11, 2020
a8db097
Merge pull request #2 from carbon-design-system/master
navjeets Jun 11, 2020
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
4 changes: 2 additions & 2 deletions packages/core/demo/data/line.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { timeFormat } from "d3";

export const lineData = [
{ group: "Dataset 1", key: "Qty", value: 32100 },
{ group: "Dataset 1", key: "Qty", value: 34200 },
{ group: "Dataset 1", key: "More", value: 23500 },
{ group: "Dataset 1", key: "Sold", value: 53100 },
{ group: "Dataset 1", key: "Restocking", value: 42300 },
Expand Down Expand Up @@ -44,7 +44,7 @@ export const lineOptions = {
};

export const lineTimeSeriesData = [
{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 10000 },
{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 50000 },
{ group: "Dataset 1", date: new Date(2019, 0, 5), value: 65000 },
{ group: "Dataset 1", date: new Date(2019, 0, 8), value: null },
{ group: "Dataset 1", date: new Date(2019, 0, 13), value: 49213 },
Expand Down
3 changes: 2 additions & 1 deletion packages/core/demo/data/scatter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const doubleLinearScatterData = [
{ group: "Dataset 1", employees: 3000, sales: 25100 },
{ group: "Dataset 1", employees: 8000, sales: 12100 },
{ group: "Dataset 1", employees: 4000, sales: 53100 },
{ group: "Dataset 2", employees: 5000, sales: 32100 },
{ group: "Dataset 2", employees: 2000, sales: 34100 },
{ group: "Dataset 2", employees: 4000, sales: 23100 },
{ group: "Dataset 2", employees: 7000, sales: 14100 },
Expand All @@ -28,7 +29,7 @@ export const doubleLinearScatterOptions = {
};

export const scatterDiscreteData = [
{ group: "Dataset 1", key: "Qty", value: 32100 },
{ group: "Dataset 1", key: "Qty", value: 34200 },
{ group: "Dataset 1", key: "More", value: 23500 },
{ group: "Dataset 1", key: "Sold", value: 53100 },
{ group: "Dataset 1", key: "Restocking", value: 42300 },
Expand Down
33 changes: 27 additions & 6 deletions packages/core/src/components/graphs/scatter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,33 @@ export class Scatter extends Component {
)
);

const hoveredX = self.services.cartesianScales.getDomainValue(
datum
);
const hoveredY = self.services.cartesianScales.getRangeValue(
datum
);
const overlappingData = self.model
.getDisplayData()
.filter((d) => {
return (
hoveredX ===
self.services.cartesianScales.getDomainValue(
d
) &&
hoveredY ===
self.services.cartesianScales.getRangeValue(d)
);
});

// Show tooltip
self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
hoveredElement,
multidata:
overlappingData.length > 1 ? overlappingData : null,
type: TooltipTypes.DATAPOINT,
});

navjeets marked this conversation as resolved.
Show resolved Hide resolved
const eventNameToDispatch =
d3Event.type === "mouseover"
? Events.Scatter.SCATTER_MOUSEOVER
Expand All @@ -304,12 +331,6 @@ export class Scatter extends Component {
element: hoveredElement,
datum,
});

// Show tooltip
self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
hoveredElement,
type: TooltipTypes.DATAPOINT,
});
})
.on("click", function (datum) {
// Dispatch mouse event
Expand Down