Skip to content

Commit

Permalink
feat: support snap property for crosshairs.
Browse files Browse the repository at this point in the history
  • Loading branch information
@simaQ
simaQ committed Nov 14, 2018
1 parent 7ad1900 commit 267e59e
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 15 deletions.
53 changes: 39 additions & 14 deletions src/plugin/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ Global.tooltip = Util.deepMix({
lineWidth: 1,
stroke: '#fff'
},
layout: 'horizontal'
layout: 'horizontal',
snap: false
}, Global.tooltip || {});

function _getTooltipValueScale(geom) {
Expand Down Expand Up @@ -264,16 +265,28 @@ class TooltipController {
const chart = this.chart;
const coord = chart.get('coord');
const yScale = chart.getYScales()[0];
const snap = cfg.snap;

if (yScale.isLinear && !coord.transposed) {
if (snap === false && yScale.isLinear) {
const invertPoint = coord.invertPoint(point);
const yTip = yScale.invert(invertPoint.y);
const yTipPosY = point.y;
const plot = chart.get('plotRange');

let tip;
let pos;
if (Helper.isPointInPlot(point, plot)) {
tooltip.setYTipContent(yTip);
tooltip.setYTipPosition(yTipPosY);
tooltip.setXCrosshairPosition(yTipPosY);
if (coord.transposed) {
tip = yScale.invert(invertPoint.x);
pos = point.x;
tooltip.setXTipContent(tip);
tooltip.setXTipPosition(pos);
tooltip.setYCrosshairPosition(pos);
} else {
tip = yScale.invert(invertPoint.y);
pos = point.y;
tooltip.setYTipContent(tip);
tooltip.setYTipPosition(pos);
tooltip.setXCrosshairPosition(pos);
}
}
}

Expand All @@ -288,7 +301,7 @@ class TooltipController {
});
}
if (isEqual(lastActive, items)) {
if (cfg.crosshairsType === 'y' || cfg.crosshairsType === 'xy' || cfg.showYTip) {
if (snap === false && (Util.directionEnabled(cfg.crosshairsType, 'y') || cfg.showYTip)) {
const canvas = this.chart.get('canvas');
canvas.draw();
}
Expand All @@ -313,22 +326,34 @@ class TooltipController {
if (items.length > 1) {
xTipPosX = (items[0].x + items[items.length - 1].x) / 2;
}
const xTip = coord.transposed ? first.value : title;
tooltip.setContent(title, items, coord.transposed);
tooltip.setPosition(items, point);
tooltip.setXTipContent(xTip);
tooltip.setXTipPosition(xTipPosX);
tooltip.setYCrosshairPosition(first.x);

if (coord.transposed) {
let yTipPosY = first.y;
if (items.length > 1) {
yTipPosY = (items[0].y + items[items.length - 1].y) / 2;
}
const yTip = coord.transposed ? title : first.value;
tooltip.setYTipContent(yTip);
tooltip.setYTipContent(title);
tooltip.setYTipPosition(yTipPosY);
tooltip.setXCrosshairPosition(yTipPosY);

if (snap) {
tooltip.setXTipContent(first.value);
tooltip.setXTipPosition(xTipPosX);
tooltip.setYCrosshairPosition(xTipPosX);
}

} else {
tooltip.setXTipContent(title);
tooltip.setXTipPosition(xTipPosX);
tooltip.setYCrosshairPosition(xTipPosX);

if (snap) {
tooltip.setYTipContent(first.value);
tooltip.setYTipPosition(first.y);
tooltip.setXCrosshairPosition(first.y);
}
}

const markerItems = tooltipMarkerCfg.items;
Expand Down
113 changes: 112 additions & 1 deletion test/unit/plugin/tooltip-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,7 @@ describe('Tooltip crosshairs', function() {
expect(tooltip.yTipBox.content).to.equal(8363);
});

it('show xTip and yTip', () => {
it('show xTip and yTip, snap = false', () => {
chart.destroy();
chart = new F2.Chart({
id: 'chart-tooltip',
Expand Down Expand Up @@ -478,6 +478,52 @@ describe('Tooltip crosshairs', function() {
expect(tooltip.yTipBox.container.get('visible')).to.be.false;
});

it('show xTip and yTip, snap = true', () => {
chart.destroy();
chart = new F2.Chart({
id: 'chart-tooltip',
width: 400,
height: 300,
plugins: Tooltip,
pixelRatio: 2
});
chart.source(data, {
date: {
tickCount: 3,
range: [ 0, 1 ]
}
});
chart.line().position('date*steps');
chart.tooltip({
showXTip: true,
showYTip: true,
showTooltipMarker: false,
snap: true,
crosshairsType: 'xy',
yTip(val) {
return {
text: Math.round(val)
};
}
});
chart.render();
const point = chart.getPosition({ date: '2018-04-21', steps: 59 });
chart.showTooltip({
x: point.x,
y: point.y - 230
});

const tooltipController = chart.get('tooltipController');
const tooltip = tooltipController.tooltip;
const { xTipBox: xTip, yTipBox: yTip, crosshairsShapeX } = tooltip;

expect(xTip).not.to.be.undefined;
expect(yTip).not.to.be.undefined;
expect(xTip.content).to.equal('2018-04-21');
expect(yTip.content).to.equal(59);
expect(crosshairsShapeX.get('y')).to.equal(point.y);
});

it('show yTip in transposed coordinate', () => {
chart.destroy();
chart = new F2.Chart({
Expand Down Expand Up @@ -508,6 +554,71 @@ describe('Tooltip crosshairs', function() {
expect(yTip.content).to.equal('2018-04-22');
// expect(snapEqual(yTip.x, 39.068572998046875)).to.be.true;
expect(snapEqual(yTip.y, 227.91666666666669)).to.be.true;
});

it('show xTip, yTip in transposed coordinate, snap = false', () => {
chart.destroy();
chart = new F2.Chart({
id: 'chart-tooltip',
width: 400,
height: 300,
plugins: Tooltip,
pixelRatio: 2
});
chart.source(data);
chart.coord({
transposed: true
});
chart.interval().position('date*steps');
chart.tooltip({
showYTip: true,
showXTip: true,
xTip(val) {
return parseInt(val);
}
});
chart.render();
const point = chart.getPosition({ date: '2018-04-22', steps: 2515 });
chart.showTooltip(point);

const tooltipController = chart.get('tooltipController');
const tooltip = tooltipController.tooltip;
const { xTipBox: xTip, yTipBox: yTip } = tooltip;

expect(yTip).not.to.be.undefined;
expect(yTip.content).to.equal('2018-04-22');
expect(snapEqual(yTip.y, 227.91666666666669)).to.be.true;
expect(xTip.content).to.equal(4999);
});

it('show xTip in transposed coordinate, snap = true', () => {
chart.destroy();
chart = new F2.Chart({
id: 'chart-tooltip',
width: 400,
height: 300,
plugins: Tooltip,
pixelRatio: 2
});
chart.source(data);
chart.coord({
transposed: true
});
chart.interval().position('date*steps');
chart.tooltip({
showXTip: true,
snap: true
});
chart.render();
const point = chart.getPosition({ date: '2018-04-22', steps: 2515 });
chart.showTooltip(point);

const tooltipController = chart.get('tooltipController');
const tooltip = tooltipController.tooltip;
const { xTipBox: xTip } = tooltip;

expect(xTip.content).to.equal('2515');

chart.destroy();
document.body.removeChild(canvas);
});
Expand Down

0 comments on commit 267e59e

Please sign in to comment.