chartwerk
/
line-pod
4
0
Fork 0
Code Issues 33 Pull Requests 2 Projects Releases 1 Wiki Activity
Labels Milestones
New Pull Request

click-event #39

Merged
vargburz merged 2 commits from click-event into main 11 months ago
Conversation 1 Commits 2 Files Changed 4
4 changed files with 66 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      examples/mouse_click.html
  2. 0
      examples/mouse_move.html
  3. 30
      src/index.ts
  4. 10
      src/types.ts

33
examples/mouse_click.html
Unescape View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
const startTime = 1590590148;
const data = Array.from(
{ length: 20 },
(el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
);
let options = {
renderLegend: false, usePanning: false,
axis: { y: { range: [0, 50] } },
zoomEvents: { mouse: {
zoom: { isActive: false },
pan: { isActive: false },
} },
eventsCallbacks: { mouseClick: console.log }
}
var pod = new LinePod(
document.getElementById('chart'),
[{ datapoints: data }],
options
);
pod.render();
</script>
</body>
</html>

0
examples/mouse.html → examples/mouse_move.html
Unescape View File

30
src/index.ts
Unescape View File

@ -1,5 +1,5 @@
import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core';
import { LineTimeSerie, LineOptions } from './types'; import { LineTimeSerie, LineOptions, MouseObj } from './types';
import { Markers } from './components/markers'; import { Markers } from './components/markers';
import { Segments } from './components/segments'; import { Segments } from './components/segments';
@ -290,7 +290,8 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
return _.max(intervals); return _.max(intervals);
} }
onMouseMove(): void { 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
@ -299,9 +300,9 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
const datapoints = this.findAndHighlightDatapoints(xValue, yValue); const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
// TDOO: is shift key pressed // TODO: is shift key pressed
// TODO: need to refactor this object // TODO: need to refactor this object
this.options.callbackMouseMove({ return {
x: d3.event.pageX, x: d3.event.pageX,
y: d3.event.pageY, y: d3.event.pageY,
xVal: xValue, xVal: xValue,
@ -309,7 +310,22 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
series: datapoints, series: datapoints,
chartX: eventX, chartX: eventX,
chartWidth: this.width chartWidth: this.width
}); };
}
override onMouseMove(): void {
const obj = this.getMouseObj();
const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1];
this.moveCrosshairLine(eventX, eventY);
// TODO: is shift key pressed
// TODO: need to refactor this object
this.options.callbackMouseMove(obj);
}
override onMouseClick(): void {
this.options.callbackMouseClick(this.getMouseObj());
} }
findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] { findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {
@ -341,14 +357,14 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
return points; return points;
} }
onMouseOver(): void { override onMouseOver(): void {
this.onMouseMove(); 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);
} }
onMouseOut(): void { override onMouseOut(): void {
this.options.callbackMouseOut(); this.options.callbackMouseOut();
this.crosshair.style('display', 'none'); this.crosshair.style('display', 'none');
} }

10
src/types.ts
Unescape View File

@ -11,3 +11,13 @@ type LineTimeSerieParams = {
export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>; export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;
export type LineOptions = Options; export type LineOptions = Options;
export type MouseObj = {
x: number,
y: number,
xVal: number,
yVal: number,
series: { value: [number, number], color: string, label: string }[],
chartX: number,
chartWidth: number
}
Write Preview
Loading…
Cancel
Save