-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #86 from redbearsam/feature/tooltip_refactor
Refactored tooltips into cartesian-chart component
- Loading branch information
Showing
8 changed files
with
279 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /****************************************************************************** | ||
| * | ||
| * Copyright (c) 2017, the Perspective Authors. | ||
| * | ||
| * This file is part of the Perspective library, distributed under the terms of | ||
| * the Apache License 2.0. The full license can be found in the LICENSE file. | ||
| * | ||
| */ | ||
|
|
||
| export const findBestFromData = (array, valueFn, compareFn = Math.min) => { | ||
| const findBestFromArray = array => { | ||
| return array.reduce((best, v) => { | ||
| const thisValue = findBestFromItem(v, valueFn); | ||
| return thisValue && (!best || compareFn(best.value, thisValue.value) === thisValue.value) ? thisValue : best; | ||
| }, null); | ||
| }; | ||
| const findBestFromItem = item => { | ||
| if (Array.isArray(item)) { | ||
| return findBestFromArray(item, valueFn); | ||
| } | ||
| const value = valueFn(item); | ||
| return value !== null | ||
| ? { | ||
| item, | ||
| value | ||
| } | ||
| : null; | ||
| }; | ||
|
|
||
| const bestItem = findBestFromArray(array, valueFn); | ||
| return bestItem ? bestItem.item : null; | ||
| }; |
158 changes: 158 additions & 0 deletions
158
packages/perspective-viewer-d3fc/src/js/tooltip/nearbyTip.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| /****************************************************************************** | ||
| * | ||
| * Copyright (c) 2017, the Perspective Authors. | ||
| * | ||
| * This file is part of the Perspective library, distributed under the terms of | ||
| * the Apache License 2.0. The full license can be found in the LICENSE file. | ||
| * | ||
| */ | ||
|
|
||
| import * as d3 from "d3"; | ||
| import * as fc from "d3fc"; | ||
| import {chainCallback} from "../utils/utils"; | ||
| import {tooltip} from "./tooltip"; | ||
| import {withOpacity} from "../series/seriesColours.js"; | ||
| import {findBestFromData} from "../data/findBest"; | ||
|
|
||
| export default () => { | ||
| let chart = null; | ||
| let settings = null; | ||
| let xScale = null; | ||
| let xCopy = null; | ||
| let yScale = null; | ||
| let yCopy = null; | ||
| let colour = null; | ||
| let canvas = false; | ||
| let data = null; | ||
| let xValueName = "crossValue"; | ||
| let yValueName = "mainValue"; | ||
|
|
||
| const showTooltip = tooltip().alwaysShow(true); | ||
|
|
||
| function nearbyTip(selection) { | ||
| const chartPlotArea = `d3fc-${canvas ? "canvas" : "svg"}.plot-area`; | ||
| if (xScale || yScale) { | ||
| const pointer = fc.pointer().on("point", event => { | ||
| const tooltipData = event.length ? [getClosestDataPoint(event[0])] : []; | ||
|
|
||
| renderTip(selection, tooltipData); | ||
| }); | ||
|
|
||
| chainCallback(chart.decorate, sel => { | ||
| sel.select(chartPlotArea) | ||
| .on("measure.nearby-tip", () => { | ||
| if (xCopy) xCopy.range([0, d3.event.detail.width]); | ||
| if (yCopy) yCopy.range([0, d3.event.detail.height]); | ||
| }) | ||
| .call(pointer); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| const renderTip = (selection, tipData) => { | ||
| const tips = selection | ||
| .select("d3fc-svg.plot-area svg") | ||
| .selectAll("circle.nearbyTip") | ||
| .data(tipData); | ||
| tips.exit().remove(); | ||
|
|
||
| tips.enter() | ||
| .append("circle") | ||
| .attr("class", "nearbyTip") | ||
| .attr("r", 10) | ||
| .merge(tips) | ||
| .attr("transform", d => `translate(${xScale(d[xValueName])},${yScale(d[yValueName])})`) | ||
| .style("stroke", "none") | ||
| .style("fill", d => colour && withOpacity(colour(d.key))); | ||
|
|
||
| showTooltip(tips, settings); | ||
| }; | ||
|
|
||
| const getClosestDataPoint = pos => { | ||
| return findBestFromData( | ||
| data, | ||
| v => { | ||
| if (v[yValueName] === undefined || v[yValueName] === null || v[xValueName] === undefined || v[xValueName] === null) return null; | ||
|
|
||
| return Math.sqrt(Math.pow(xScale(v[xValueName]) - pos.x, 2) + Math.pow(yScale(v[yValueName]) - pos.y, 2)); | ||
| }, | ||
| Math.min | ||
| ); | ||
| }; | ||
|
|
||
| nearbyTip.chart = (...args) => { | ||
| if (!args.length) { | ||
| return chart; | ||
| } | ||
| chart = args[0]; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.settings = (...args) => { | ||
| if (!args.length) { | ||
| return settings; | ||
| } | ||
| settings = args[0]; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.xScale = (...args) => { | ||
| if (!args.length) { | ||
| return xScale; | ||
| } | ||
| xScale = args[0]; | ||
| xCopy = xScale ? xScale.copy() : null; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.yScale = (...args) => { | ||
| if (!args.length) { | ||
| return yScale; | ||
| } | ||
| yScale = args[0]; | ||
| yCopy = yScale ? yScale.copy() : null; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.colour = (...args) => { | ||
| if (!args.length) { | ||
| return colour; | ||
| } | ||
| colour = args[0]; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.canvas = (...args) => { | ||
| if (!args.length) { | ||
| return canvas; | ||
| } | ||
| canvas = args[0]; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.data = (...args) => { | ||
| if (!args.length) { | ||
| return data; | ||
| } | ||
| data = args[0]; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.xValueName = (...args) => { | ||
| if (!args.length) { | ||
| return xValueName; | ||
| } | ||
| xValueName = args[0]; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| nearbyTip.yValueName = (...args) => { | ||
| if (!args.length) { | ||
| return yValueName; | ||
| } | ||
| yValueName = args[0]; | ||
| return nearbyTip; | ||
| }; | ||
|
|
||
| return nearbyTip; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.