|
|
@ -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 = { |
|
|
|