|
|
|
|
@ -1,10 +1,11 @@
|
|
|
|
|
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 { Segments } from './components/segments'; |
|
|
|
|
|
|
|
|
|
import { LineSeries } from './models/line_series'; |
|
|
|
|
import { MarkersConf } from './models/marker'; |
|
|
|
|
import { SegmentSerie } from './models/segment'; |
|
|
|
|
|
|
|
|
|
import * as d3 from 'd3'; |
|
|
|
|
import * as _ from 'lodash'; |
|
|
|
|
@ -28,8 +29,8 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
_el: HTMLElement, |
|
|
|
|
_series: LineTimeSerie[] = [], |
|
|
|
|
_options: LineOptions = {}, |
|
|
|
|
private _markersConf?: MarkersConf,
|
|
|
|
|
private _segmentSeries = [],
|
|
|
|
|
private _markersConf?: MarkersConf, |
|
|
|
|
private _segmentSeries: SegmentSerie[] = [], |
|
|
|
|
) { |
|
|
|
|
super(_el, _series, _options); |
|
|
|
|
this.series = new LineSeries(_series); |
|
|
|
|
@ -53,7 +54,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
this._markersLayer = new Markers(this._markersConf, this.state); |
|
|
|
|
this._markersLayer.render(this.metricContainer); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._segmentsLayer = new Segments(this._segmentSeries, this.state); |
|
|
|
|
this._segmentsLayer.render(this.metricContainer); |
|
|
|
|
} |
|
|
|
|
@ -167,23 +168,14 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
.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 { |
|
|
|
|
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 { |
|
|
|
|
this.crosshair.style('display', null); |
|
|
|
|
switch(this.options.crosshair.orientation) { |
|
|
|
|
@ -290,18 +282,17 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
return _.max(intervals); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMouseMove(): void { |
|
|
|
|
getMouseObj(): MouseObj { |
|
|
|
|
const eventX = d3.mouse(this.chartContainer.node())[0]; |
|
|
|
|
const eventY = d3.mouse(this.chartContainer.node())[1]; |
|
|
|
|
const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
|
|
|
|
|
const yValue = this.state.yScale.invert(eventY); |
|
|
|
|
this.moveCrosshairLine(eventX, eventY); |
|
|
|
|
|
|
|
|
|
const datapoints = this.findAndHighlightDatapoints(xValue, yValue); |
|
|
|
|
|
|
|
|
|
// TDOO: is shift key pressed
|
|
|
|
|
// TODO: is shift key pressed
|
|
|
|
|
// TODO: need to refactor this object
|
|
|
|
|
this.options.callbackMouseMove({ |
|
|
|
|
return { |
|
|
|
|
x: d3.event.pageX, |
|
|
|
|
y: d3.event.pageY, |
|
|
|
|
xVal: xValue, |
|
|
|
|
@ -309,9 +300,40 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
series: datapoints, |
|
|
|
|
chartX: eventX, |
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
this.options.callbackMouseClick(this.getMouseObj()); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] { |
|
|
|
|
if(!this.series.isSeriesAvailable) { |
|
|
|
|
return []; |
|
|
|
|
@ -341,16 +363,26 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
return points; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMouseOver(): void { |
|
|
|
|
this.onMouseMove(); |
|
|
|
|
showCrosshair() { |
|
|
|
|
this.crosshair.style('display', null); |
|
|
|
|
this.crosshair.selectAll('.crosshair-circle') |
|
|
|
|
.style('display', null); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMouseOut(): void { |
|
|
|
|
this.options.callbackMouseOut(); |
|
|
|
|
hideCrosshair() { |
|
|
|
|
this.crosshair.style('display', 'none'); |
|
|
|
|
this.crosshair.selectAll('.crosshair-circle') |
|
|
|
|
.style('display', 'none'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
override onMouseOver(): void { |
|
|
|
|
this.showCrosshair(); |
|
|
|
|
this.onMouseMove(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
override onMouseOut(): void { |
|
|
|
|
this.hideCrosshair(); |
|
|
|
|
this.options.callbackMouseOut(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
isDoubleClickActive(): boolean { |
|
|
|
|
@ -362,6 +394,14 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
this.onMouseOver(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
updateMarkers(markersConf: MarkersConf): void { |
|
|
|
|
this._markersConf = markersConf; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
updateSegments(segments: SegmentSerie[]): void { |
|
|
|
|
this._segmentSeries = segments; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// methods below rewrite s, (move more methods here)
|
|
|
|
|
protected zoomOut(): void { |
|
|
|
|
if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { |
|
|
|
|
@ -403,7 +443,17 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
x: xAxisMiddleValue, |
|
|
|
|
y: yAxisMiddleValue |
|
|
|
|
} |
|
|
|
|
this.options.callbackZoomOut(centers); |
|
|
|
|
|
|
|
|
|
// TODO: refactor core not to take _options explicitly
|
|
|
|
|
if( |
|
|
|
|
this.options._options.events !== undefined &&
|
|
|
|
|
this.options._options.events.zoomOut !== undefined |
|
|
|
|
) { |
|
|
|
|
this.options._options.events.zoomOut( |
|
|
|
|
centers, |
|
|
|
|
[this.state.xValueRange, this.state.yValueRange] |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
Coin de Gamma
glitch4347
rozetko
vargburz