|
|
|
@ -1,3 +1,4 @@ |
|
|
|
|
|
|
|
import { AxisRange } from './types'; |
|
|
|
import VueChartwerkPodMixin from './VueChartwerkPodMixin'; |
|
|
|
import VueChartwerkPodMixin from './VueChartwerkPodMixin'; |
|
|
|
import { Grid } from './components/grid'; |
|
|
|
import { Grid } from './components/grid'; |
|
|
|
|
|
|
|
|
|
|
|
@ -30,15 +31,13 @@ import { palette } from './colors'; |
|
|
|
|
|
|
|
|
|
|
|
import * as d3 from 'd3'; |
|
|
|
import * as d3 from 'd3'; |
|
|
|
|
|
|
|
|
|
|
|
import first from 'lodash/first'; |
|
|
|
|
|
|
|
import last from 'lodash/last'; |
|
|
|
|
|
|
|
import debounce from 'lodash/debounce'; |
|
|
|
import debounce from 'lodash/debounce'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const DEFAULT_TICK_SIZE = 2; |
|
|
|
const DEFAULT_TICK_SIZE = 2; |
|
|
|
const MILISECONDS_IN_MINUTE = 60 * 1000; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
|
|
|
|
|
|
|
|
class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
|
|
|
|
|
|
|
|
protected series: CoreSeries<T>; |
|
|
|
protected series: CoreSeries<T>; |
|
|
|
protected options: CoreOptions<O>; |
|
|
|
protected options: CoreOptions<O>; |
|
|
|
@ -80,7 +79,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
_series: T[] = [], |
|
|
|
_series: T[] = [], |
|
|
|
_options: O |
|
|
|
_options: O |
|
|
|
) { |
|
|
|
) { |
|
|
|
// TODO: test if it's necessary
|
|
|
|
// need to call explicitly because option lazyStyleTag
|
|
|
|
|
|
|
|
// in webpack style-loader
|
|
|
|
styles.use(); |
|
|
|
styles.use(); |
|
|
|
|
|
|
|
|
|
|
|
this.options = new CoreOptions(_options); |
|
|
|
this.options = new CoreOptions(_options); |
|
|
|
@ -116,6 +116,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
|
|
|
|
|
|
|
|
this.renderLegend(); |
|
|
|
this.renderLegend(); |
|
|
|
this.renderYLabel(); |
|
|
|
this.renderYLabel(); |
|
|
|
|
|
|
|
this.renderY1Label(); |
|
|
|
this.renderXLabel(); |
|
|
|
this.renderXLabel(); |
|
|
|
|
|
|
|
|
|
|
|
this.options.callbackRenderEnd(); |
|
|
|
this.options.callbackRenderEnd(); |
|
|
|
@ -152,12 +153,13 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
this.series.updateSeries(newSeries); |
|
|
|
this.series.updateSeries(newSeries); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
protected abstract renderMetrics(): void; |
|
|
|
protected renderMetrics(): void {} |
|
|
|
protected abstract onMouseOver(): void; |
|
|
|
protected onMouseOver(): void {} |
|
|
|
protected abstract onMouseOut(): void; |
|
|
|
protected onMouseOut(): void {} |
|
|
|
protected abstract onMouseMove(): void; |
|
|
|
protected onMouseMove(): void {} |
|
|
|
public abstract renderSharedCrosshair(values: { x?: number, y?: number }): void; |
|
|
|
protected onMouseClick(): void {} |
|
|
|
public abstract hideSharedCrosshair(): void; |
|
|
|
public renderSharedCrosshair(values: { x?: number, y?: number }): void {} |
|
|
|
|
|
|
|
public hideSharedCrosshair(): void {} |
|
|
|
|
|
|
|
|
|
|
|
protected initPodState(): void { |
|
|
|
protected initPodState(): void { |
|
|
|
const boxPararms = { |
|
|
|
const boxPararms = { |
|
|
|
@ -327,12 +329,21 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
// TODO: refactor for a new mouse/scroll events
|
|
|
|
// TODO: refactor for a new mouse/scroll events
|
|
|
|
const panKeyEvent = this.options.mousePanEvent.keyEvent; |
|
|
|
const panKeyEvent = this.options.mousePanEvent.keyEvent; |
|
|
|
const isPanActive = this.options.mousePanEvent.isActive; |
|
|
|
const isPanActive = this.options.mousePanEvent.isActive; |
|
|
|
if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) { |
|
|
|
const isBrushActive = this.options.mouseZoomEvent.isActive; |
|
|
|
this.initPan(); |
|
|
|
if(panKeyEvent === KeyEvent.MAIN) { |
|
|
|
this.initBrush(); |
|
|
|
if(isPanActive) { |
|
|
|
|
|
|
|
this.initPan(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(isBrushActive) { |
|
|
|
|
|
|
|
this.initBrush(); |
|
|
|
|
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.initBrush(); |
|
|
|
if(isBrushActive) { |
|
|
|
this.initPan(); |
|
|
|
this.initBrush(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(isPanActive) { |
|
|
|
|
|
|
|
this.initPan(); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
this.ensureOverlayExisting(); |
|
|
|
this.ensureOverlayExisting(); |
|
|
|
|
|
|
|
|
|
|
|
@ -341,6 +352,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
.on('mouseover', this.onMouseOver.bind(this)) |
|
|
|
.on('mouseover', this.onMouseOver.bind(this)) |
|
|
|
.on('mouseout', this.onMouseOut.bind(this)) |
|
|
|
.on('mouseout', this.onMouseOut.bind(this)) |
|
|
|
.on('mousemove', this.onMouseMove.bind(this)) |
|
|
|
.on('mousemove', this.onMouseMove.bind(this)) |
|
|
|
|
|
|
|
.on('click', this.onMouseClick.bind(this)) |
|
|
|
.on('dblclick', () => { |
|
|
|
.on('dblclick', () => { |
|
|
|
d3.event.stopPropagation(); |
|
|
|
d3.event.stopPropagation(); |
|
|
|
// TODO: add the same check as we have in line-pod
|
|
|
|
// TODO: add the same check as we have in line-pod
|
|
|
|
@ -372,10 +384,6 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
protected initBrush(): void { |
|
|
|
protected initBrush(): void { |
|
|
|
const isBrushActive = this.options.mouseZoomEvent.isActive; |
|
|
|
|
|
|
|
if(isBrushActive === false) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
switch(this.options.mouseZoomEvent.orientation) { |
|
|
|
switch(this.options.mouseZoomEvent.orientation) { |
|
|
|
case BrushOrientation.VERTICAL: |
|
|
|
case BrushOrientation.VERTICAL: |
|
|
|
this.brush = d3.brushY(); |
|
|
|
this.brush = d3.brushY(); |
|
|
|
@ -409,9 +417,9 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
// TODO: refactor
|
|
|
|
// TODO: refactor
|
|
|
|
switch(key) { |
|
|
|
switch(key) { |
|
|
|
case KeyEvent.MAIN: |
|
|
|
case KeyEvent.MAIN: |
|
|
|
return () => !d3.event.shiftKey; |
|
|
|
return () => !d3.event.shiftKey && !d3.event.button; |
|
|
|
case KeyEvent.SHIFT: |
|
|
|
case KeyEvent.SHIFT: |
|
|
|
return () => d3.event.shiftKey; |
|
|
|
return () => d3.event.shiftKey && !d3.event.button; |
|
|
|
default: |
|
|
|
default: |
|
|
|
throw new Error(`Unknown type of KeyEvent: ${key}`); |
|
|
|
throw new Error(`Unknown type of KeyEvent: ${key}`); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -502,8 +510,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
this.chartContainer.append('text') |
|
|
|
this.chartContainer.append('text') |
|
|
|
.attr('y', 0 - this.margin.left) |
|
|
|
.attr('y', -this.margin.left) |
|
|
|
.attr('x', 0 - (this.height / 2)) |
|
|
|
.attr('x', -(this.height / 2)) |
|
|
|
.attr('dy', '1em') |
|
|
|
.attr('dy', '1em') |
|
|
|
.attr('class', 'y-axis-label') |
|
|
|
.attr('class', 'y-axis-label') |
|
|
|
.attr('transform', 'rotate(-90)') |
|
|
|
.attr('transform', 'rotate(-90)') |
|
|
|
@ -513,6 +521,22 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
.text(this.options.axis.y.label); |
|
|
|
.text(this.options.axis.y.label); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
protected renderY1Label(): void { |
|
|
|
|
|
|
|
if(this.options.axis.y1?.label === undefined) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.chartContainer.append('text') |
|
|
|
|
|
|
|
.attr('y', -this.width - this.margin.right) |
|
|
|
|
|
|
|
.attr('x', (this.height / 2)) |
|
|
|
|
|
|
|
.attr('dy', '1em') |
|
|
|
|
|
|
|
.attr('class', 'y-axis-label') |
|
|
|
|
|
|
|
.attr('transform', 'rotate(90)') |
|
|
|
|
|
|
|
.style('text-anchor', 'middle') |
|
|
|
|
|
|
|
.style('font-size', '14px') |
|
|
|
|
|
|
|
.style('fill', 'currentColor') |
|
|
|
|
|
|
|
.text(this.options.axis.y1.label); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
protected renderXLabel(): void { |
|
|
|
protected renderXLabel(): void { |
|
|
|
if(this.options.axis.x.label === undefined) { |
|
|
|
if(this.options.axis.x.label === undefined) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
@ -793,8 +817,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
this.state.yValueRange = yRange; |
|
|
|
this.state.yValueRange = yRange; |
|
|
|
this.brushStartSelection = null; |
|
|
|
this.brushStartSelection = null; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.zoomIn([xRange, yRange]); |
|
|
|
this.options.callbackZoomIn([xRange, yRange]); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
protected zoomOut(): void { |
|
|
|
protected zoomOut(): void { |
|
|
|
@ -807,6 +830,10 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> { |
|
|
|
this.options.callbackZoomOut(centers); |
|
|
|
this.options.callbackZoomOut(centers); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
protected zoomIn(ranges: AxisRange[]): void { |
|
|
|
|
|
|
|
this.options.callbackZoomIn(ranges); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getAxisTicksFormatter(axisOptions: AxisOption): (d: any, i: number) => any { |
|
|
|
getAxisTicksFormatter(axisOptions: AxisOption): (d: any, i: number) => any { |
|
|
|
// TODO: ticksCount === 0 -> suspicious option
|
|
|
|
// TODO: ticksCount === 0 -> suspicious option
|
|
|
|
if(axisOptions.ticksCount === 0) { |
|
|
|
if(axisOptions.ticksCount === 0) { |
|
|
|
|
rozetko
Coin de Gamma
glitch4347
vargburz