|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation } from '@chartwerk/core'; |
|
|
|
|
import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core'; |
|
|
|
|
import { LineTimeSerie, LineOptions, Mode } from './types'; |
|
|
|
|
|
|
|
|
|
import * as d3 from 'd3'; |
|
|
|
@ -435,6 +435,52 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
} |
|
|
|
|
this.crosshair.style('display', 'none'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// methods below rewrite cores, (move more methods here)
|
|
|
|
|
protected zoomOut(): void { |
|
|
|
|
// 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.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) { |
|
|
|
|
case BrushOrientation.HORIZONTAL: |
|
|
|
|
this.state.xValueRange = [this.state.xValueRange[0] - xInterval / 2, this.state.xValueRange[1] + xInterval / 2]; |
|
|
|
|
break; |
|
|
|
|
case BrushOrientation.VERTICAL: |
|
|
|
|
this.state.yValueRange = [this.state.yValueRange[0] - yInterval / 2, this.state.yValueRange[1] + yInterval / 2]; |
|
|
|
|
break; |
|
|
|
|
case BrushOrientation.RECTANGLE: |
|
|
|
|
this.state.xValueRange = [this.state.xValueRange[0] - xInterval / 2, this.state.xValueRange[1] + xInterval / 2]; |
|
|
|
|
this.state.yValueRange = [this.state.yValueRange[0] - yInterval / 2, this.state.yValueRange[1] + yInterval / 2]; |
|
|
|
|
break; |
|
|
|
|
case BrushOrientation.SQUARE: |
|
|
|
|
this.state.xValueRange = [this.state.xValueRange[0] - xInterval / 2, this.state.xValueRange[1] + xInterval / 2]; |
|
|
|
|
this.state.yValueRange = [this.state.yValueRange[0] - yInterval / 2, this.state.yValueRange[1] + yInterval / 2]; |
|
|
|
|
break; |
|
|
|
|
default: |
|
|
|
|
throw new Error(`Unknown type of orientation: ${orientation}, path: options.zoomEvents.mouse.zoom.orientation`);; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// TODO: it shouldn't be here. Add smth like vue watchers in core components. Optimize!
|
|
|
|
|
this.renderMetrics(); |
|
|
|
|
this.renderXAxis(); |
|
|
|
|
this.renderYAxis(); |
|
|
|
|
this.renderGrid() |
|
|
|
|
|
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLineChartObject)
|
|
|
|
|