chartwerk
/
core
4
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity
Browse Source

use rest of options

merge-requests/18/head
vargburz 3 years ago
parent
21c8a6c986
commit
935a1dfb5c
2 changed files with 55 additions and 47 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. 76
      src/index.ts
  2. 26
      src/models/options.ts

76
src/index.ts
Unescape View File

@ -330,8 +330,8 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
protected addEvents(): void { protected addEvents(): void {
// TODO: refactor for a new mouse/scroll events // TODO: refactor for a new mouse/scroll events
const panKeyEvent = this.options.zoomEvents.mouse.pan.keyEvent; const panKeyEvent = this.coreOptions.mousePanEvent.keyEvent;
const isPanActive = this.options.zoomEvents.mouse.pan.isActive; const isPanActive = this.coreOptions.mousePanEvent.isActive;
if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) { if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) {
this.initPan(); this.initPan();
this.initBrush(); this.initBrush();
@ -348,11 +348,11 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
protected initBrush(): void { protected initBrush(): void {
const isBrushActive = this.options.zoomEvents.mouse.zoom.isActive; const isBrushActive = this.coreOptions.mouseZoomEvent.isActive;
if(isBrushActive === false) { if(isBrushActive === false) {
return; return;
} }
switch(this.options.zoomEvents.mouse.zoom.orientation) { switch(this.coreOptions.mouseZoomEvent.orientation) {
case BrushOrientation.VERTICAL: case BrushOrientation.VERTICAL:
this.brush = d3.brushY(); this.brush = d3.brushY();
break; break;
@ -366,7 +366,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
default: default:
this.brush = d3.brushX(); this.brush = d3.brushX();
} }
const keyEvent = this.options.zoomEvents.mouse.zoom.keyEvent; const keyEvent = this.coreOptions.mouseZoomEvent.keyEvent;
this.brush.extent([ this.brush.extent([
[0, 0], [0, 0],
[this.width, this.height] [this.width, this.height]
@ -404,13 +404,13 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
protected initPan(): void { protected initPan(): void {
if( if(
this.options.zoomEvents.mouse.pan.isActive === false && this.coreOptions.mousePanEvent.isActive === false &&
this.options.zoomEvents.scroll.pan.isActive === false && this.coreOptions.scrollPanEvent.isActive === false &&
this.options.zoomEvents.scroll.zoom.isActive === false this.coreOptions.scrollZoomEvent.isActive === false
) { ) {
return; return;
} }
if(this.options.zoomEvents.mouse.zoom.isActive === false) { if(this.coreOptions.mouseZoomEvent.isActive === false) {
// init cumstom overlay to handle all events // init cumstom overlay to handle all events
this.customOverlay = this.chartContainer.append('rect') this.customOverlay = this.chartContainer.append('rect')
.attr('class', 'custom-overlay') .attr('class', 'custom-overlay')
@ -446,7 +446,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
protected renderLegend(): void { protected renderLegend(): void {
if(this.options.renderLegend === false) { if(this.coreOptions.allOptions.renderLegend === false) {
return; return;
} }
if(!this.coreSeries.isSeriesAvailable) { if(!this.coreSeries.isSeriesAvailable) {
@ -530,12 +530,12 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
private disableScrollForward(event: any): boolean { private disableScrollForward(event: any): boolean {
return event.sourceEvent.wheelDelta > 0 return event.sourceEvent.wheelDelta > 0
&& this.options.zoomEvents.scroll.pan.direction === ScrollPanDirection.FORWARD; && this.coreOptions.scrollPanEvent.direction === ScrollPanDirection.FORWARD;
} }
private disableScrollBackward(event: any): boolean { private disableScrollBackward(event: any): boolean {
return event.sourceEvent.wheelDelta < 0 return event.sourceEvent.wheelDelta < 0
&& this.options.zoomEvents.scroll.pan.direction === ScrollPanDirection.BACKWARD; && this.coreOptions.scrollPanEvent.direction === ScrollPanDirection.BACKWARD;
} }
protected onPanning(): void { protected onPanning(): void {
@ -549,14 +549,10 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
this.rescaleMetricAndAxis(event); this.rescaleMetricAndAxis(event);
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panning !== undefined) { this.coreOptions.callbackPanning({
this.options.eventsCallbacks.panning({ ranges: [this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange],
ranges: [this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange], d3Event: event
d3Event: event });
});
} else {
console.log('on panning, but there is no callback');
}
} }
public rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void { public rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void {
@ -575,8 +571,8 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void { protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void {
// rescale metrics and axis on mouse and scroll panning // rescale metrics and axis on mouse and scroll panning
const eventType = event.sourceEvent.type; // 'wheel' or 'mousemove' const eventType = event.sourceEvent.type; // 'wheel' or 'mousemove'
const scrollPanOptions = this.options.zoomEvents.scroll.pan; const scrollPanOptions = this.coreOptions.scrollPanEvent;
const scrollZoomOptions = this.options.zoomEvents.scroll.zoom; const scrollZoomOptions = this.coreOptions.scrollZoomEvent;
// TODO: maybe use switch and move it to onPanning // TODO: maybe use switch and move it to onPanning
if(eventType === 'wheel') { if(eventType === 'wheel') {
if(scrollPanOptions.isActive === true && this.isD3EventKeyEqualOption(event, scrollPanOptions.keyEvent)) { if(scrollPanOptions.isActive === true && this.isD3EventKeyEqualOption(event, scrollPanOptions.keyEvent)) {
@ -609,7 +605,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
return; return;
} }
const panOrientation = this.options.zoomEvents.mouse.pan.orientation; const panOrientation = this.coreOptions.mousePanEvent.orientation;
if(panOrientation === PanOrientation.HORIZONTAL || panOrientation === PanOrientation.BOTH) { if(panOrientation === PanOrientation.HORIZONTAL || panOrientation === PanOrientation.BOTH) {
this.rescaleAxisX(event.transform.x); this.rescaleAxisX(event.transform.x);
} }
@ -642,7 +638,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void { protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void {
const scrollPanOptions = this.options.zoomEvents.scroll.pan; const scrollPanOptions = this.coreOptions.scrollPanEvent;
// TODO: event.transform.y / x depends on mouse position, so we use hardcoded const, which should be removed // TODO: event.transform.y / x depends on mouse position, so we use hardcoded const, which should be removed
const transformStep = scrollPanOptions.panStep; const transformStep = scrollPanOptions.panStep;
const scrollPanOrientation = scrollPanOptions.orientation; const scrollPanOrientation = scrollPanOptions.orientation;
@ -659,7 +655,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
case ScrollPanOrientation.VERTICAL: case ScrollPanOrientation.VERTICAL:
// @ts-ignore // @ts-ignore
let signY = Math.sign(event.transform.y); let signY = Math.sign(event.transform.y);
if(this.options.axis.y.invert === true) { if(this.coreOptions.axis.y.invert === true) {
signY = -signY; signY = -signY;
} }
let rangeY = this.state.yValueRange; let rangeY = this.state.yValueRange;
@ -683,16 +679,12 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
this.isPanning = false; this.isPanning = false;
this.deltaYTransform = 0; this.deltaYTransform = 0;
this.onMouseOut(); this.onMouseOut();
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panningEnd !== undefined) { this.coreOptions.callbackPanningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
this.options.eventsCallbacks.panningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
} else {
console.log('on panning end, but there is no callback');
}
} }
protected onBrush(): void { protected onBrush(): void {
const selection = d3.event.selection; const selection = d3.event.selection;
if(this.options.zoomEvents.mouse.zoom.orientation !== BrushOrientation.SQUARE || selection === null) { if(this.coreOptions.mouseZoomEvent.orientation !== BrushOrientation.SQUARE || selection === null) {
return; return;
} }
const selectionAtts = this.getSelectionAttrs(selection); const selectionAtts = this.getSelectionAttrs(selection);
@ -748,7 +740,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
let xRange: [number, number]; let xRange: [number, number];
let yRange: [number, number]; let yRange: [number, number];
switch(this.options.zoomEvents.mouse.zoom.orientation) { switch(this.coreOptions.mouseZoomEvent.orientation) {
case BrushOrientation.HORIZONTAL: case BrushOrientation.HORIZONTAL:
const startTimestamp = this.xScale.invert(extent[0]); const startTimestamp = this.xScale.invert(extent[0]);
const endTimestamp = this.xScale.invert(extent[1]); const endTimestamp = this.xScale.invert(extent[1]);
@ -788,11 +780,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
this.brushStartSelection = null; this.brushStartSelection = null;
} }
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomIn !== undefined) { this.coreOptions.callbackZoomIn([xRange, yRange]);
this.options.eventsCallbacks.zoomIn([xRange, yRange]);
} else {
console.log('zoom in, but there is no callback');
}
} }
protected zoomOut(): void { protected zoomOut(): void {
@ -802,11 +790,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
x: xAxisMiddleValue, x: xAxisMiddleValue,
y: yAxisMiddleValue y: yAxisMiddleValue
} }
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) { this.coreOptions.callbackZoomOut(centers);
this.options.eventsCallbacks.zoomOut(centers);
} else {
console.log('zoom out, but there is no callback');
}
} }
// TODO: move to State // TODO: move to State
@ -837,10 +821,10 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
getd3TimeRangeEvery(count: number): d3.TimeInterval { getd3TimeRangeEvery(count: number): d3.TimeInterval {
if(this.options.timeInterval === undefined || this.options.timeInterval.timeFormat === undefined) { if(this.coreOptions.allOptions.timeInterval.timeFormat === undefined) {
return d3.timeMinute.every(count); return d3.timeMinute.every(count);
} }
switch(this.options.timeInterval.timeFormat) { switch(this.coreOptions.allOptions.timeInterval.timeFormat) {
case TimeFormat.SECOND: case TimeFormat.SECOND:
return d3.utcSecond.every(count); return d3.utcSecond.every(count);
case TimeFormat.MINUTE: case TimeFormat.MINUTE:
@ -902,9 +886,9 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
const interval = this.coreSeries.visibleSeries[0].datapoints[1][0] - this.coreSeries.visibleSeries[0].datapoints[0][0]; const interval = this.coreSeries.visibleSeries[0].datapoints[1][0] - this.coreSeries.visibleSeries[0].datapoints[0][0];
return interval; return interval;
} }
if(this.options.timeInterval !== undefined && this.options.timeInterval.count !== undefined) { if(this.coreOptions.allOptions.timeInterval.count !== undefined) {
//TODO: timeFormat to timestamp //TODO: timeFormat to timestamp
return this.options.timeInterval.count * MILISECONDS_IN_MINUTE; return this.coreOptions.allOptions.timeInterval.count * MILISECONDS_IN_MINUTE;
} }
return MILISECONDS_IN_MINUTE; return MILISECONDS_IN_MINUTE;
} }

26
src/models/options.ts
Unescape View File

@ -4,7 +4,7 @@ import {
CrosshairOptions, CrosshairOrientation, CrosshairOptions, CrosshairOrientation,
ZoomEvents, MouseZoomEvent, MousePanEvent, DoubleClickEvent, ScrollZoomEvent, ScrollPanEvent, ZoomEvents, MouseZoomEvent, MousePanEvent, DoubleClickEvent, ScrollZoomEvent, ScrollPanEvent,
ScrollPanOrientation, ScrollPanDirection, PanOrientation, KeyEvent, BrushOrientation, ScrollPanOrientation, ScrollPanDirection, PanOrientation, KeyEvent, BrushOrientation,
Margin, TimeFormat, Margin, TimeFormat, AxisRange,
} from '../types'; } from '../types';
import lodashDefaultsDeep from 'lodash/defaultsDeep'; import lodashDefaultsDeep from 'lodash/defaultsDeep';
@ -180,4 +180,28 @@ export class CoreOptions<O extends Options> {
this._options.eventsCallbacks.onLegendLabelClick(idx); this._options.eventsCallbacks.onLegendLabelClick(idx);
} }
} }
callbackPanning(event: { ranges: AxisRange[], d3Event: any }): void {
if(has(this._options.eventsCallbacks, 'panning')) {
this._options.eventsCallbacks.panning(event);
}
}
callbackPanningEnd(ranges: AxisRange[]): void {
if(has(this._options.eventsCallbacks, 'panningEnd')) {
this._options.eventsCallbacks.panningEnd(ranges);
}
}
callbackZoomIn(ranges: AxisRange[]): void {
if(has(this._options.eventsCallbacks, 'zoomIn')) {
this._options.eventsCallbacks.zoomIn(ranges);
}
}
callbackZoomOut(centers: { x: number, y: number }): void {
if(has(this._options.eventsCallbacks, 'zoomOut')) {
this._options.eventsCallbacks.zoomOut(centers);
}
}
} }

Write Preview
Loading…
Cancel
Save