|
|
|
@ -1,11 +1,5 @@
|
|
|
|
|
import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; |
|
|
|
|
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 { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core'; |
|
|
|
|
import { LineTimeSerie, LineOptions, Mode } from './types'; |
|
|
|
|
|
|
|
|
|
import * as d3 from 'd3'; |
|
|
|
|
import * as _ from 'lodash'; |
|
|
|
@ -15,48 +9,49 @@ const CROSSHAIR_CIRCLE_RADIUS = 3;
|
|
|
|
|
const CROSSHAIR_BACKGROUND_RAIDUS = 9; |
|
|
|
|
const CROSSHAIR_BACKGROUND_OPACITY = 0.3; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
|
export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
|
lineGenerator = null; |
|
|
|
|
areaGenerator = null; |
|
|
|
|
lineGeneratorY1 = null; |
|
|
|
|
areaGeneratorY1 = null; |
|
|
|
|
|
|
|
|
|
private _markersLayer: Markers = null; |
|
|
|
|
private _segmentsLayer: Segments = null; |
|
|
|
|
|
|
|
|
|
constructor( |
|
|
|
|
_el: HTMLElement, |
|
|
|
|
_series: LineTimeSerie[] = [], |
|
|
|
|
_options: LineOptions = {}, |
|
|
|
|
private _markersConf?: MarkersConf, |
|
|
|
|
private _segmentSeries: SegmentSerie[] = [], |
|
|
|
|
) { |
|
|
|
|
super(_el, _series, _options); |
|
|
|
|
this.series = new LineSeries(_series); |
|
|
|
|
|
|
|
|
|
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { |
|
|
|
|
super(d3, _el, _series, _options); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
override renderMetrics(): void { |
|
|
|
|
renderMetrics(): void { |
|
|
|
|
this.clearAllMetrics(); |
|
|
|
|
|
|
|
|
|
this.updateCrosshair(); |
|
|
|
|
this.initLineGenerator(); |
|
|
|
|
this.initAreaGenerator(); |
|
|
|
|
|
|
|
|
|
if(!this.series.isSeriesAvailable) { |
|
|
|
|
// TODO: seems that renderMetrics is not correct name
|
|
|
|
|
if(this.series.length === 0) { |
|
|
|
|
this.renderNoDataPointsMessage(); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
for(const serie of this.series.visibleSeries) { |
|
|
|
|
this._renderMetric(serie); |
|
|
|
|
} |
|
|
|
|
if(this._markersConf !== undefined) { |
|
|
|
|
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); |
|
|
|
|
for(let idx = 0; idx < this.series.length; ++idx) { |
|
|
|
|
if(this.series[idx].visible === false) { |
|
|
|
|
continue; |
|
|
|
|
} |
|
|
|
|
// TODO: use _.defaults same as in core
|
|
|
|
|
const confidence = this.series[idx].confidence || 0; |
|
|
|
|
const mode = this.series[idx].mode || Mode.STANDARD; |
|
|
|
|
const target = this.series[idx].target; |
|
|
|
|
const renderDots = this.series[idx].renderDots !== undefined ? this.series[idx].renderDots : false; |
|
|
|
|
const renderLines = this.series[idx].renderLines !== undefined ? this.series[idx].renderLines : true; |
|
|
|
|
|
|
|
|
|
this._renderMetric( |
|
|
|
|
this.series[idx].datapoints, |
|
|
|
|
{ |
|
|
|
|
color: this.getSerieColor(idx), |
|
|
|
|
confidence, |
|
|
|
|
target, |
|
|
|
|
mode, |
|
|
|
|
serieIdx: idx, |
|
|
|
|
renderDots, |
|
|
|
|
renderLines, |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
clearAllMetrics(): void { |
|
|
|
@ -65,70 +60,124 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
initLineGenerator(): void { |
|
|
|
|
this.lineGenerator = d3.line() |
|
|
|
|
.x(d => this.state.xScale(d[0])) |
|
|
|
|
.y(d => this.state.yScale(d[1])); |
|
|
|
|
this.lineGeneratorY1 = d3.line() |
|
|
|
|
.x(d => this.state.xScale(d[0])) |
|
|
|
|
.y(d => this.state.y1Scale(d[1])); |
|
|
|
|
this.lineGenerator = this.d3.line() |
|
|
|
|
.x(d => this.xScale(d[0])) |
|
|
|
|
.y(d => this.yScale(d[1])); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
initAreaGenerator(): void { |
|
|
|
|
this.areaGenerator = d3.area() |
|
|
|
|
.x(d => this.state.xScale(d[0])) |
|
|
|
|
.y1(d => this.state.yScale(d[1])) |
|
|
|
|
.y0(d => this.height); |
|
|
|
|
this.areaGeneratorY1 = d3.area() |
|
|
|
|
.x(d => this.state.xScale(d[0])) |
|
|
|
|
.y1(d => this.state.y1Scale(d[1])) |
|
|
|
|
.y0(d => this.height); |
|
|
|
|
} |
|
|
|
|
public appendData(data: [number, number][], shouldRerender = true): void { |
|
|
|
|
for(let idx = 0; idx < this.series.length; ++idx) { |
|
|
|
|
if(this.series[idx].visible === false) { |
|
|
|
|
continue; |
|
|
|
|
} |
|
|
|
|
this.series[idx].datapoints.push(data[idx]); |
|
|
|
|
const maxLength = this.series[idx].maxLength; |
|
|
|
|
if(maxLength !== undefined && this.series[idx].datapoints.length > maxLength) { |
|
|
|
|
this.series[idx].datapoints.shift(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getRenderGenerator(renderArea: boolean, yOrientation: yAxisOrientation): any { |
|
|
|
|
if(renderArea) { |
|
|
|
|
return yOrientation === yAxisOrientation.LEFT ? this.areaGenerator : this.areaGeneratorY1; |
|
|
|
|
for(let idx = 0; idx < this.series.length; ++idx) { |
|
|
|
|
this.metricContainer.select(`.metric-path-${idx}`) |
|
|
|
|
.datum(this.series[idx].datapoints) |
|
|
|
|
.attr('d', this.lineGenerator); |
|
|
|
|
|
|
|
|
|
if(this.series[idx].renderDots === true) { |
|
|
|
|
this.metricContainer.selectAll(`.metric-circle-${idx}`) |
|
|
|
|
.data(this.series[idx].datapoints) |
|
|
|
|
.attr('cx', d => this.xScale(d[0])) |
|
|
|
|
.attr('cy', d => this.yScale(d[1])); |
|
|
|
|
|
|
|
|
|
this._renderDots([data[idx]], idx); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if(shouldRerender) { |
|
|
|
|
const rightBorder = _.last(data)[0]; |
|
|
|
|
this.state.xValueRange = [this.state.getMinValueX(), rightBorder]; |
|
|
|
|
this.renderXAxis(); |
|
|
|
|
this.renderYAxis(); |
|
|
|
|
this.renderGrid(); |
|
|
|
|
} |
|
|
|
|
return yOrientation === yAxisOrientation.LEFT ? this.lineGenerator : this.areaGeneratorY1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_renderDots(serie: LineTimeSerie): void { |
|
|
|
|
_renderDots(datapoints: number[][], serieIdx: number): void { |
|
|
|
|
const customClass = this.series[serieIdx].class || ''; |
|
|
|
|
|
|
|
|
|
this.metricContainer.selectAll(null) |
|
|
|
|
.data(serie.datapoints) |
|
|
|
|
.data(datapoints) |
|
|
|
|
.enter() |
|
|
|
|
.append('circle') |
|
|
|
|
.attr('class', `metric-circle-${serie.idx} metric-el ${serie.class}`) |
|
|
|
|
.attr('fill', serie.color) |
|
|
|
|
.attr('class', `metric-circle-${serieIdx} metric-el ${customClass}`) |
|
|
|
|
.attr('fill', this.getSerieColor(serieIdx)) |
|
|
|
|
.attr('r', METRIC_CIRCLE_RADIUS) |
|
|
|
|
.style('pointer-events', 'none') |
|
|
|
|
.attr('cx', d => this.state.xScale(d[0])) |
|
|
|
|
.attr('cy', d => this.state.yScale(d[1])); |
|
|
|
|
.attr('cx', d => this.xScale(d[0])) |
|
|
|
|
.attr('cy', d => this.yScale(d[1])); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_renderLines(serie: LineTimeSerie): void { |
|
|
|
|
const fillColor = serie.renderArea ? serie.color : 'none'; |
|
|
|
|
const fillOpacity = serie.renderArea ? 0.5 : 'none'; |
|
|
|
|
_renderLines(datapoints: number[][], serieIdx: number): void { |
|
|
|
|
const dashArray = this.series[serieIdx].dashArray !== undefined ? this.series[serieIdx].dashArray : '0'; |
|
|
|
|
const customClass = this.series[serieIdx].class || '' |
|
|
|
|
|
|
|
|
|
this.metricContainer |
|
|
|
|
.append('path') |
|
|
|
|
.datum(serie.datapoints) |
|
|
|
|
.attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`) |
|
|
|
|
.attr('fill', fillColor) |
|
|
|
|
.attr('fill-opacity', fillOpacity) |
|
|
|
|
.attr('stroke', serie.color) |
|
|
|
|
.datum(datapoints) |
|
|
|
|
.attr('class', `metric-path-${serieIdx} metric-el ${customClass}`) |
|
|
|
|
.attr('fill', 'none') |
|
|
|
|
.attr('stroke', this.getSerieColor(serieIdx)) |
|
|
|
|
.attr('stroke-width', 1) |
|
|
|
|
.attr('stroke-opacity', 0.7) |
|
|
|
|
.attr('pointer-events', 'none') |
|
|
|
|
.style('stroke-dasharray', serie.dashArray) |
|
|
|
|
.attr('d', this.getRenderGenerator(serie.renderArea, serie.yOrientation)); |
|
|
|
|
} |
|
|
|
|
.style('stroke-dasharray', dashArray) |
|
|
|
|
.attr('d', this.lineGenerator); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_renderMetric( |
|
|
|
|
datapoints: number[][], |
|
|
|
|
metricOptions: { |
|
|
|
|
color: string, |
|
|
|
|
confidence: number, |
|
|
|
|
target: string, |
|
|
|
|
mode: Mode, |
|
|
|
|
serieIdx: number, |
|
|
|
|
renderDots: boolean, |
|
|
|
|
renderLines: boolean, |
|
|
|
|
} |
|
|
|
|
): void { |
|
|
|
|
if(_.includes(this.seriesTargetsWithBounds, metricOptions.target)) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(metricOptions.mode === Mode.CHARGE) { |
|
|
|
|
const dataPairs = this.d3.pairs(datapoints); |
|
|
|
|
this.metricContainer.selectAll(null) |
|
|
|
|
.data(dataPairs) |
|
|
|
|
.enter() |
|
|
|
|
.append('line') |
|
|
|
|
.attr('x1', d => this.xScale(d[0][0])) |
|
|
|
|
.attr('x2', d => this.xScale(d[1][0])) |
|
|
|
|
.attr('y1', d => this.yScale(d[0][1])) |
|
|
|
|
.attr('y2', d => this.yScale(d[1][1])) |
|
|
|
|
.attr('stroke-opacity', 0.7) |
|
|
|
|
.style('stroke-width', 1) |
|
|
|
|
.style('stroke', d => { |
|
|
|
|
if(d[1][0] > d[0][0]) { |
|
|
|
|
return 'green'; |
|
|
|
|
} else if (d[1][0] < d[0][0]) { |
|
|
|
|
return 'red'; |
|
|
|
|
} else { |
|
|
|
|
return 'gray'; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_renderMetric(serie: LineTimeSerie): void { |
|
|
|
|
if(serie.renderLines === true) { |
|
|
|
|
this._renderLines(serie); |
|
|
|
|
if(metricOptions.renderLines === true) { |
|
|
|
|
this._renderLines(datapoints, metricOptions.serieIdx); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(serie.renderDots === true) { |
|
|
|
|
this._renderDots(serie); |
|
|
|
|
if(metricOptions.renderDots === true) { |
|
|
|
|
this._renderDots(datapoints, metricOptions.serieIdx); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -140,7 +189,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
|
|
|
|
|
appendCrosshairCircles(): void { |
|
|
|
|
// circle for each serie
|
|
|
|
|
this.series.visibleSeries.forEach((serie: LineTimeSerie, serieIdx: number) => { |
|
|
|
|
this.series.forEach((serie: LineTimeSerie, serieIdx: number) => { |
|
|
|
|
this.appendCrosshairCircle(serieIdx); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
@ -153,7 +202,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
.attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS) |
|
|
|
|
.attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS) |
|
|
|
|
.attr('clip-path', `url(#${this.rectClipId})`) |
|
|
|
|
.attr('fill', this.series.visibleSeries[serieIdx].color) |
|
|
|
|
.attr('fill', this.getSerieColor(serieIdx)) |
|
|
|
|
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY) |
|
|
|
|
.style('pointer-events', 'none'); |
|
|
|
|
|
|
|
|
@ -163,21 +212,33 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
.attr('cy', -CROSSHAIR_CIRCLE_RADIUS) |
|
|
|
|
.attr('class', `crosshair-circle-${serieIdx}`) |
|
|
|
|
.attr('clip-path', `url(#${this.rectClipId})`) |
|
|
|
|
.attr('fill', this.series.visibleSeries[serieIdx].color) |
|
|
|
|
.attr('fill', this.getSerieColor(serieIdx)) |
|
|
|
|
.attr('r', CROSSHAIR_CIRCLE_RADIUS) |
|
|
|
|
.style('pointer-events', 'none'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
public renderSharedCrosshair(values: { x?: number, y?: number }): void { |
|
|
|
|
this.onMouseOver(); // TODO: refactor to use it once
|
|
|
|
|
const eventX = this.xScale(values.x); |
|
|
|
|
const eventY = this.yScale(values.y); |
|
|
|
|
this.moveCrosshairLine(eventX, eventY); |
|
|
|
|
const datapoints = this.findAndHighlightDatapoints(values.x, values.y); |
|
|
|
|
|
|
|
|
|
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.sharedCrosshairMove === undefined) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.options.eventsCallbacks.sharedCrosshairMove({ |
|
|
|
|
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) { |
|
|
|
|
case CrosshairOrientation.VERTICAL: |
|
|
|
|
this.crosshair.select('#crosshair-line-x') |
|
|
|
@ -242,9 +303,9 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
default: |
|
|
|
|
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: d3.bisect is not the best way. Use binary search
|
|
|
|
|
const bisectIndex = d3.bisector((d: [number, number]) => d[columnIdx]).left; |
|
|
|
|
const bisectIndex = this.d3.bisector((d: [number, number]) => d[columnIdx]).left; |
|
|
|
|
let closestIdx = bisectIndex(datapoints, value); |
|
|
|
|
|
|
|
|
|
// TODO: refactor corner cases
|
|
|
|
@ -269,7 +330,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
// columnIdx: 1 for y, 0 for x
|
|
|
|
|
// inverval: x/y value interval between data points
|
|
|
|
|
// TODO: move it to base/state instead of timeInterval
|
|
|
|
|
const intervals = _.map(this.series.visibleSeries, serie => { |
|
|
|
|
const intervals = _.map(this.series, serie => { |
|
|
|
|
if(serie.datapoints.length < 2) { |
|
|
|
|
return undefined; |
|
|
|
|
} |
|
|
|
@ -282,133 +343,119 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
return _.max(intervals); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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); |
|
|
|
|
onMouseMove(): void { |
|
|
|
|
const eventX = this.d3.mouse(this.chartContainer.node())[0]; |
|
|
|
|
const eventY = this.d3.mouse(this.chartContainer.node())[1]; |
|
|
|
|
const xValue = this.xScale.invert(eventX); // mouse x position in xScale
|
|
|
|
|
const yValue = this.yScale.invert(eventY); |
|
|
|
|
// TODO: isOutOfChart is a hack, use clip path correctly
|
|
|
|
|
if(this.isOutOfChart() === true) { |
|
|
|
|
this.crosshair.style('display', 'none'); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.moveCrosshairLine(eventX, eventY); |
|
|
|
|
|
|
|
|
|
const datapoints = this.findAndHighlightDatapoints(xValue, yValue); |
|
|
|
|
|
|
|
|
|
// TODO: is shift key pressed
|
|
|
|
|
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.mouseMove === undefined) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
// TDOO: is shift key pressed
|
|
|
|
|
// TODO: need to refactor this object
|
|
|
|
|
return { |
|
|
|
|
x: d3.event.pageX, |
|
|
|
|
y: d3.event.pageY, |
|
|
|
|
this.options.eventsCallbacks.mouseMove({ |
|
|
|
|
x: this.d3.event.pageX, |
|
|
|
|
y: this.d3.event.pageY, |
|
|
|
|
xVal: xValue, |
|
|
|
|
yVal: yValue, |
|
|
|
|
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) { |
|
|
|
|
if(this.series === undefined || this.series.length === 0) { |
|
|
|
|
return []; |
|
|
|
|
} |
|
|
|
|
let points = []; // datapoints in each metric that is closest to xValue/yValue position
|
|
|
|
|
this.series.visibleSeries.forEach((serie: LineTimeSerie) => { |
|
|
|
|
this.series.forEach((serie: LineTimeSerie, serieIdx: number) => { |
|
|
|
|
if( |
|
|
|
|
serie.visible === false || |
|
|
|
|
_.includes(this.seriesTargetsWithBounds, serie.target) |
|
|
|
|
) { |
|
|
|
|
this.hideCrosshairCircle(serieIdx); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue); |
|
|
|
|
if(_.isNil(closestDatapoint) || _.isNil(closestDatapoint[0])) { |
|
|
|
|
this.hideCrosshairCircle(serie.idx); |
|
|
|
|
} else { |
|
|
|
|
const xPosition = this.state.xScale(closestDatapoint[0]); |
|
|
|
|
let yPosition; |
|
|
|
|
if(serie.yOrientation === yAxisOrientation.RIGHT) { |
|
|
|
|
yPosition = this.state.y1Scale(closestDatapoint[1]); |
|
|
|
|
} else { |
|
|
|
|
yPosition = this.state.yScale(closestDatapoint[1]); |
|
|
|
|
} |
|
|
|
|
this.moveCrosshairCircle(xPosition, yPosition, serie.idx); |
|
|
|
|
if(closestDatapoint === undefined || this.isOutOfRange(closestDatapoint, xValue, yValue, serie.useOutOfRange)) { |
|
|
|
|
this.hideCrosshairCircle(serieIdx); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const xPosition = this.xScale(closestDatapoint[0]); |
|
|
|
|
const yPosition = this.yScale(closestDatapoint[1]); |
|
|
|
|
this.moveCrosshairCircle(xPosition, yPosition, serieIdx); |
|
|
|
|
|
|
|
|
|
points.push({ |
|
|
|
|
value: closestDatapoint, |
|
|
|
|
color: serie.color, |
|
|
|
|
color: this.getSerieColor(serieIdx), |
|
|
|
|
label: serie.alias || serie.target |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
return points; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
showCrosshair() { |
|
|
|
|
isOutOfRange(closestDatapoint: [number, number], xValue: number, yValue: number, useOutOfRange = true): boolean { |
|
|
|
|
// find is mouse position more than xRange/yRange from closest point
|
|
|
|
|
// TODO: refactor getValueInterval to remove this!
|
|
|
|
|
if(useOutOfRange === false) { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
let columnIdx; // 1 for y value, 0 for x value
|
|
|
|
|
let value; // xValue ot y Value
|
|
|
|
|
switch(this.options.crosshair.orientation) { |
|
|
|
|
case CrosshairOrientation.VERTICAL: |
|
|
|
|
columnIdx = 0; |
|
|
|
|
value = xValue; |
|
|
|
|
break; |
|
|
|
|
case CrosshairOrientation.HORIZONTAL: |
|
|
|
|
columnIdx = 1; |
|
|
|
|
value = yValue; |
|
|
|
|
break; |
|
|
|
|
case CrosshairOrientation.BOTH: |
|
|
|
|
// TODO: maybe use voronoi
|
|
|
|
|
columnIdx = 1; |
|
|
|
|
value = yValue; |
|
|
|
|
default: |
|
|
|
|
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); |
|
|
|
|
} |
|
|
|
|
const range = Math.abs(closestDatapoint[columnIdx] - value); |
|
|
|
|
const interval = this.getValueInterval(columnIdx); // interval between points
|
|
|
|
|
// do not move crosshair circles, it mouse to far from closest point
|
|
|
|
|
return interval === undefined || range > interval / 2; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMouseOver(): void { |
|
|
|
|
this.crosshair.style('display', null); |
|
|
|
|
this.crosshair.selectAll('.crosshair-circle') |
|
|
|
|
.style('display', null); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
hideCrosshair() { |
|
|
|
|
onMouseOut(): void { |
|
|
|
|
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) { |
|
|
|
|
this.options.eventsCallbacks.mouseOut(); |
|
|
|
|
} |
|
|
|
|
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 { |
|
|
|
|
return this.options.doubleClickEvent.isActive; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
protected onBrushEnd(): void { |
|
|
|
|
super.onBrushEnd(); |
|
|
|
|
this.onMouseOver(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
updateMarkers(markersConf: MarkersConf): void { |
|
|
|
|
this._markersConf = markersConf; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
updateSegments(segments: SegmentSerie[]): void { |
|
|
|
|
this._segmentSeries = segments; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// methods below rewrite s, (move more methods here)
|
|
|
|
|
// methods below rewrite cores, (move more methods here)
|
|
|
|
|
protected zoomOut(): void { |
|
|
|
|
if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { |
|
|
|
|
// TODO: test to remove, seems its depricated
|
|
|
|
|
if(this.isOutOfChart() === true) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
// TODO: its not clear, why we use this orientation here. Mb its better to use separate option
|
|
|
|
|
const orientation: BrushOrientation = this.options.mouseZoomEvent.orientation; |
|
|
|
|
const orientation: BrushOrientation = this.options.zoomEvents.mouse.zoom.orientation; |
|
|
|
|
const xInterval = this.state.xValueRange[1] - this.state.xValueRange[0]; |
|
|
|
|
const yInterval = this.state.yValueRange[1] - this.state.yValueRange[0]; |
|
|
|
|
switch(orientation) { |
|
|
|
@ -436,28 +483,19 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
this.renderYAxis(); |
|
|
|
|
this.renderGrid(); |
|
|
|
|
this.onMouseOver(); |
|
|
|
|
|
|
|
|
|
let xAxisMiddleValue: number = this.state.xScale.invert(this.width / 2); |
|
|
|
|
let yAxisMiddleValue: number = this.state.yScale.invert(this.height / 2); |
|
|
|
|
const centers = { |
|
|
|
|
x: xAxisMiddleValue, |
|
|
|
|
y: yAxisMiddleValue |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 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] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) { |
|
|
|
|
let xAxisMiddleValue: number = this.xScale.invert(this.width / 2); |
|
|
|
|
let yAxisMiddleValue: number = this.yScale.invert(this.height / 2); |
|
|
|
|
const centers = { |
|
|
|
|
x: xAxisMiddleValue, |
|
|
|
|
y: yAxisMiddleValue |
|
|
|
|
} |
|
|
|
|
this.options.eventsCallbacks.zoomOut(centers); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// TODO: it should be moved to VUE folder
|
|
|
|
|
// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod)
|
|
|
|
|
export const VueChartwerkLinePod = { |
|
|
|
|
// alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'`
|
|
|
|
@ -489,4 +527,4 @@ export const VueChartwerkLinePod = {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export { LineTimeSerie, LineOptions, TimeFormat, LinePod }; |
|
|
|
|
export { LineTimeSerie, LineOptions, Mode, TickOrientation, TimeFormat }; |
|
|
|
|