Browse Source

fix non-existing metrics being highlighted on hover

pull/1/head^2
rozetko 2 years ago
parent
commit
49c5c3d462
  1. 12
      src/index.ts

12
src/index.ts

@ -221,7 +221,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
default:
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);
}
// TODO: d3.bisect is not the best way. Use binary search
const bisectIndex = d3.bisector((d: [number, number]) => d[columnIdx]).left;
let closestIdx = bisectIndex(datapoints, value);
@ -290,14 +290,18 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
let points = []; // datapoints in each metric that is closest to xValue/yValue position
this.series.visibleSeries.forEach((serie: LineTimeSerie) => {
const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue);
if(closestDatapoint === undefined) {
if(_.isNil(closestDatapoint)) {
this.hideCrosshairCircle(serie.idx);
return;
}
const xPosition = this.state.xScale(closestDatapoint[0]);
const yPosition = this.state.yScale(closestDatapoint[1]);
this.moveCrosshairCircle(xPosition, yPosition, serie.idx);
if(!_.isNil(closestDatapoint[0])) {
this.moveCrosshairCircle(xPosition, yPosition, serie.idx);
} else {
this.hideCrosshairCircle(serie.idx);
}
points.push({
value: closestDatapoint,
@ -357,7 +361,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.renderYAxis();
this.renderGrid();
this.onMouseOver();
let xAxisMiddleValue: number = this.state.xScale.invert(this.width / 2);
let yAxisMiddleValue: number = this.state.yScale.invert(this.height / 2);
const centers = {

Loading…
Cancel
Save