diff --git a/src/VueChartwerkPodMixin.ts b/src/VueChartwerkPodMixin.ts index 2055738..4d0e75b 100644 --- a/src/VueChartwerkPodMixin.ts +++ b/src/VueChartwerkPodMixin.ts @@ -50,41 +50,45 @@ export default { this.render(); }, appendEvents() { - if(this.options.eventsCallbacks === undefined) { - this.options.eventsCallbacks = {} + if(this.options.events === undefined) { + if(this.options.eventsCallbacks !== undefined) { + this.options.events = this.options.eventsCallbacks + } else { + this.options.events = {}; + } } if(has(this.$listeners, 'zoomIn')) { - this.options.eventsCallbacks.zoomIn = this.zoomIn.bind(this); + this.options.events.zoomIn = this.zoomIn.bind(this); } if(has(this.$listeners, 'zoomOut')) { - this.options.eventsCallbacks.zoomOut = this.zoomOut.bind(this); + this.options.events.zoomOut = this.zoomOut.bind(this); } if(has(this.$listeners, 'mouseMove')) { - this.options.eventsCallbacks.mouseMove = this.mouseMove.bind(this); + this.options.events.mouseMove = this.mouseMove.bind(this); } if(has(this.$listeners, 'mouseOut')) { - this.options.eventsCallbacks.mouseOut = this.mouseOut.bind(this); + this.options.events.mouseOut = this.mouseOut.bind(this); } if(has(this.$listeners, 'onLegendClick')) { - this.options.eventsCallbacks.onLegendClick = this.onLegendClick.bind(this); + this.options.events.onLegendClick = this.onLegendClick.bind(this); } if(has(this.$listeners, 'panningEnd')) { - this.options.eventsCallbacks.panningEnd = this.panningEnd.bind(this); + this.options.events.panningEnd = this.panningEnd.bind(this); } if(has(this.$listeners, 'panning')) { - this.options.eventsCallbacks.panning = this.panning.bind(this); + this.options.events.panning = this.panning.bind(this); } if(has(this.$listeners, 'contextMenu')) { - this.options.eventsCallbacks.contextMenu = this.contextMenu.bind(this); + this.options.events.contextMenu = this.contextMenu.bind(this); } if(has(this.$listeners, 'sharedCrosshairMove')) { - this.options.eventsCallbacks.sharedCrosshairMove = this.sharedCrosshairMove.bind(this); + this.options.events.sharedCrosshairMove = this.sharedCrosshairMove.bind(this); } if(has(this.$listeners, 'renderStart')) { - this.options.eventsCallbacks.renderStart = this.renderStart.bind(this); + this.options.events.renderStart = this.renderStart.bind(this); } if(has(this.$listeners, 'renderEnd')) { - this.options.eventsCallbacks.renderEnd = this.renderEnd.bind(this); + this.options.events.renderEnd = this.renderEnd.bind(this); } }, zoomIn(range) { diff --git a/src/index.ts b/src/index.ts index 5bd7be2..3cdf66a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -34,9 +34,8 @@ import * as d3 from 'd3'; import debounce from 'lodash/debounce'; - const DEFAULT_TICK_SIZE = 2; -const MILISECONDS_IN_MINUTE = 60 * 1000; + abstract class ChartwerkPod { diff --git a/src/models/options.ts b/src/models/options.ts index 9e99799..47814e4 100644 --- a/src/models/options.ts +++ b/src/models/options.ts @@ -90,7 +90,6 @@ export const CORE_DEFAULT_OPTIONS: Options = { crosshair: DEFAULT_CROSSHAIR_OPTIONS, renderLegend: true, margin: DEFAULT_MARGIN, - eventsCallbacks: {}, } export class CoreOptions { @@ -106,6 +105,14 @@ export class CoreOptions { protected setOptions(options: O): void { this._options = lodashDefaultsDeep(lodashCloneDeep(options), this.getDefaults()); + if(this._options.eventsCallbacks !== undefined) { + if(this._options.events !== undefined) { + throw new Error('events and eventsCallbacks are mutually exclusive'); + } + this._options.events = this._options.eventsCallbacks; + } + // also bakward compatibility for clients who use "eventsCallbacks" instead of "events" + this._options.eventsCallbacks = this._options.events; } // this getter can be overrited in Pod @@ -160,80 +167,80 @@ export class CoreOptions { // event callbacks callbackRenderStart(): void { - if(has(this._options.eventsCallbacks, 'renderStart')) { - this._options.eventsCallbacks.renderStart(); + if(has(this._options.events, 'renderStart')) { + this._options.events.renderStart(); } } callbackRenderEnd(): void { - if(has(this._options.eventsCallbacks, 'renderEnd')) { - this._options.eventsCallbacks.renderEnd(); + if(has(this._options.events, 'renderEnd')) { + this._options.events.renderEnd(); } } callbackComponentRenderEnd(part: RenderComponent): void { - if(has(this._options.eventsCallbacks, 'componentRenderEnd')) { - this._options.eventsCallbacks.componentRenderEnd(part); + if(has(this._options.events, 'componentRenderEnd')) { + this._options.events.componentRenderEnd(part); } } callbackLegendClick(idx: number): void { - if(has(this._options.eventsCallbacks, 'onLegendClick')) { - this._options.eventsCallbacks.onLegendClick(idx); + if(has(this._options.events, 'onLegendClick')) { + this._options.events.onLegendClick(idx); } } callbackLegendLabelClick(idx: number): void { - if(has(this._options.eventsCallbacks, 'onLegendLabelClick')) { - this._options.eventsCallbacks.onLegendLabelClick(idx); + if(has(this._options.events, 'onLegendLabelClick')) { + this._options.events.onLegendLabelClick(idx); } } callbackPanning(event: { ranges: AxisRange[], d3Event: any }): void { - if(has(this._options.eventsCallbacks, 'panning')) { - this._options.eventsCallbacks.panning(event); + if(has(this._options.events, 'panning')) { + this._options.events.panning(event); } } callbackPanningEnd(ranges: AxisRange[]): void { - if(has(this._options.eventsCallbacks, 'panningEnd')) { - this._options.eventsCallbacks.panningEnd(ranges); + if(has(this._options.events, 'panningEnd')) { + this._options.events.panningEnd(ranges); } } callbackZoomIn(ranges: AxisRange[]): void { - if(has(this._options.eventsCallbacks, 'zoomIn')) { - this._options.eventsCallbacks.zoomIn(ranges); + if(has(this._options.events, 'zoomIn')) { + this._options.events.zoomIn(ranges); } } callbackZoomOut(centers: { x: number, y: number }): void { - if(has(this._options.eventsCallbacks, 'zoomOut')) { - this._options.eventsCallbacks.zoomOut(centers); + if(has(this._options.events, 'zoomOut')) { + this._options.events.zoomOut(centers); } } callbackSharedCrosshairMove(event: { datapoints, eventX, eventY }): void { - if(has(this._options.eventsCallbacks, 'sharedCrosshairMove')) { - this._options.eventsCallbacks.sharedCrosshairMove(event); + if(has(this._options.events, 'sharedCrosshairMove')) { + this._options.events.sharedCrosshairMove(event); } } callbackMouseMove(event): void { - if(has(this._options.eventsCallbacks, 'mouseMove')) { - this._options.eventsCallbacks.mouseMove(event); + if(has(this._options.events, 'mouseMove')) { + this._options.events.mouseMove(event); } } callbackMouseOut(): void { - if(has(this._options.eventsCallbacks, 'mouseOut')) { - this._options.eventsCallbacks.mouseOut(); + if(has(this._options.events, 'mouseOut')) { + this._options.events.mouseOut(); } } callbackMouseClick(event): void { - if(has(this._options.eventsCallbacks, 'mouseClick')) { - this._options.eventsCallbacks.mouseClick(event); + if(has(this._options.events, 'mouseClick')) { + this._options.events.mouseClick(event); } } } diff --git a/src/types.ts b/src/types.ts index 9353026..193e500 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,24 +14,29 @@ export type Serie = { yOrientation?: yAxisOrientation, }; // TODO: move some options to line-chart + +export type Events = { + zoomIn?: (range: AxisRange[]) => void, + panning?: (event: { ranges: AxisRange[], d3Event: any }) => void, + panningEnd?: (range: AxisRange[]) => void, + zoomOut?: (centers: {x: number, y: number}) => void, + mouseMove?: (evt: any) => void, + mouseClick?: (evt: any) => void, + mouseOut?: () => void, + onLegendClick?: (idx: number) => void, + onLegendLabelClick?: (idx: number) => void, + contextMenu?: (evt: any) => void, // the same name as in d3.events + sharedCrosshairMove?: (event: any) => void, + renderStart?: () => void, + renderEnd?: () => void, + componentRenderEnd?: (part: RenderComponent) => void, +} + export type Options = { margin?: Margin; - eventsCallbacks?: { - zoomIn?: (range: AxisRange[]) => void, - panning?: (event: { ranges: AxisRange[], d3Event: any }) => void, - panningEnd?: (range: AxisRange[]) => void, - zoomOut?: (centers: {x: number, y: number}) => void, - mouseMove?: (evt: any) => void, - mouseClick?: (evt: any) => void, - mouseOut?: () => void, - onLegendClick?: (idx: number) => void, - onLegendLabelClick?: (idx: number) => void, - contextMenu?: (evt: any) => void, // the same name as in d3.events - sharedCrosshairMove?: (event: any) => void, - renderStart?: () => void, - renderEnd?: () => void, - componentRenderEnd?: (part: RenderComponent) => void, - }; + // obsolete property, use events instead + eventsCallbacks?: Events; + events?: Events; axis?: AxesOptions; grid?: GridOptions; crosshair?: CrosshairOptions;