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) {

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<T extends Serie, O extends Options> {
 

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<O extends Options> {
@@ -106,6 +105,14 @@ export class CoreOptions<O extends Options> {
 
   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<O extends Options> {
 
   // 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);
     }
   }
 }

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;