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

Loading…
Cancel
Save