Browse Source

fix

pull/43/head
glitch4347 11 months ago
parent
commit
0dac1c390e
  1. 49
      src/index.ts

49
src/index.ts

@ -167,23 +167,14 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.style('pointer-events', 'none'); .style('pointer-events', 'none');
} }
public renderSharedCrosshair(values: { x?: number, y?: number }): void {
this.onMouseOver(); // TODO: refactor to use it once
const eventX = this.state.xScale(values.x);
const eventY = this.state.yScale(values.y);
this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
this.options.callbackSharedCrosshairMove({
datapoints: datapoints,
eventX, eventY
});
}
public hideSharedCrosshair(): void { public hideSharedCrosshair(): void {
this.crosshair.style('display', 'none'); this.crosshair.style('display', 'none');
} }
// TODO: refactor to make xPosition and yPosition optional
// and trough error if they are provided for wrong orientation
moveCrosshairLine(xPosition: number, yPosition: number): void { moveCrosshairLine(xPosition: number, yPosition: number): void {
this.crosshair.style('display', null); this.crosshair.style('display', null);
switch(this.options.crosshair.orientation) { switch(this.options.crosshair.orientation) {
@ -291,12 +282,10 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
getMouseObj(): MouseObj { getMouseObj(): MouseObj {
const eventX = d3.mouse(this.chartContainer.node())[0]; const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1]; const eventY = d3.mouse(this.chartContainer.node())[1];
const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
const yValue = this.state.yScale.invert(eventY); const yValue = this.state.yScale.invert(eventY);
this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(xValue, yValue); const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
@ -311,19 +300,35 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
chartX: eventX, chartX: eventX,
chartWidth: this.width chartWidth: this.width
}; };
} }
override onMouseMove(): void { override onMouseMove(): void {
const obj = this.getMouseObj(); const obj = this.getMouseObj();
const eventX = d3.mouse(this.chartContainer.node())[0]; const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1]; const eventY = d3.mouse(this.chartContainer.node())[1];
this.moveCrosshairLine(eventX, eventY); this.moveCrosshairLine(eventX, eventY);
// TODO: is shift key pressed // TODO: is shift key pressed
// TODO: need to refactor this object // TODO: need to refactor this object
this.options.callbackMouseMove(obj); this.options.callbackMouseMove(obj);
} }
public renderSharedCrosshair(values: { x?: number, y?: number }): void {
this.showCrosshair();
this.moveCrosshairLine(
values.x ? this.state.xScale(values.x) : 0,
values.y ? this.state.yScale(values.y) : 0
);
const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
this.options.callbackSharedCrosshairMove({
datapoints: datapoints,
eventX: values.x ? this.state.xScale(values.x) : 0,
eventY: values.y ? this.state.yScale(values.y) : 0
});
}
override onMouseClick(): void { override onMouseClick(): void {
this.options.callbackMouseClick(this.getMouseObj()); this.options.callbackMouseClick(this.getMouseObj());
} }
@ -357,16 +362,26 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
return points; return points;
} }
override onMouseOver(): void { showCrosshair() {
this.onMouseMove();
this.crosshair.style('display', null); this.crosshair.style('display', null);
this.crosshair.selectAll('.crosshair-circle') this.crosshair.selectAll('.crosshair-circle')
.style('display', null); .style('display', null);
} }
hideCrosshair() {
this.crosshair.style('display', 'none');
this.crosshair.selectAll('.crosshair-circle')
.style('display', 'none');
}
override onMouseOver(): void {
this.showCrosshair();
this.onMouseMove();
}
override onMouseOut(): void { override onMouseOut(): void {
this.hideCrosshair();
this.options.callbackMouseOut(); this.options.callbackMouseOut();
this.crosshair.style('display', 'none');
} }
isDoubleClickActive(): boolean { isDoubleClickActive(): boolean {

Loading…
Cancel
Save