chartwerk
/
line-pod
4
0
Fork 0
Code Issues 33 Pull Requests 1 Projects Releases 1 Wiki Activity
Browse Source

some commit

pull/39/head
glitch4347 1 year ago
parent
ee7a57685f
commit
e46c7bdfb6
3 changed files with 60 additions and 8 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. 29
      examples/mouse_move.html
  2. 29
      src/index.ts
  3. 10
      src/types.ts

29
examples/mouse_move.html
Unescape View File

@ -0,0 +1,29 @@
<!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] } },
eventsCallbacks: { mouseMove: console.log }
}
var pod = new LinePod(
document.getElementById('chart'),
[{ datapoints: data }],
options
);
pod.render();
</script>
</body>
</html>

29
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,18 +290,17 @@ 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
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);
// 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 +308,21 @@ 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();
this.moveCrosshairLine(obj.x, obj.y);
// TODO: is shift key pressed
// TODO: need to refactor this object
this.options.callbackMouseMove(obj);
}
// TODO: add override
onMouseClick(): void {
const obj = this.getMouseObj();
console.log(obj);
} }
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 +354,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