Merge pull request 'Right y-axis fixes' (#51) from right-y-axis-fixes into main

Reviewed-on: #51

demo/demo_pod.ts

@@ -51,12 +51,6 @@ class DemoPod extends ChartwerkPod<Serie, Options> {
       .attr('d', this.lineGenerator);
   }
 
-  onMouseMove(): void {}
-  onMouseOver(): void {}
-  onMouseOut(): void {}
-  onMouseClick(): void {}
-  renderSharedCrosshair(values): void {}
-  hideSharedCrosshair(): void {}
 }
 
 export { DemoPod };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/core",
-  "version": "0.6.21",
+  "version": "0.6.26",
   "description": "Chartwerk core",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/VueChartwerkPodMixin.ts

@@ -39,9 +39,9 @@ export default {
   },
   methods: {
     // it's "abstract" method. "children" components should override it
-    render() { },
-    renderSharedCrosshair(values: { x?: number, y?: number }) { },
-    hideSharedCrosshair() { },
+    render() {},
+    renderSharedCrosshair(values: { x?: number, y?: number }) {},
+    hideSharedCrosshair() {},
     onPanningRescale(event) {
       this.pod.rescaleMetricAndAxis(event);
     },
@@ -50,41 +50,48 @@ 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, 'mouseOver')) {
+        this.options.events.mouseOver = this.mouseOver.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) {
@@ -93,6 +100,9 @@ export default {
     zoomOut(centers) {
       this.$emit('zoomOut', centers);
     },
+    mouseOver() {
+      this.$emit('mouseOver');
+    },
     mouseMove(evt) {
       this.$emit('mouseMove', evt);
     },

src/index.ts

@@ -1,3 +1,4 @@
+import { AxisRange } from './types';
 import VueChartwerkPodMixin from './VueChartwerkPodMixin';
 import { Grid } from './components/grid';
 
@@ -34,9 +35,9 @@ 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> {
+
+class ChartwerkPod<T extends Serie, O extends Options> {
 
   protected series: CoreSeries<T>;
   protected options: CoreOptions<O>;
@@ -78,7 +79,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     _series: T[] = [],
     _options: O
   ) {
-    // TODO: test if it's necessary
+    // need to call explicitly because option lazyStyleTag
+    // in webpack style-loader
     styles.use();
 
     this.options = new CoreOptions(_options);
@@ -114,6 +116,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
 
     this.renderLegend();
     this.renderYLabel();
+    this.renderY1Label();
     this.renderXLabel();
 
     this.options.callbackRenderEnd();
@@ -150,13 +153,13 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     this.series.updateSeries(newSeries);
   }
 
-  protected abstract renderMetrics(): void;
-  protected abstract onMouseOver(): void;
-  protected abstract onMouseOut(): void;
-  protected abstract onMouseMove(): void;
-  protected abstract onMouseClick(): void;
-  public abstract renderSharedCrosshair(values: { x?: number, y?: number }): void;
-  public abstract hideSharedCrosshair(): void;
+  protected renderMetrics(): void {}
+  protected onMouseOver(): void {}
+  protected onMouseOut(): void {}
+  protected onMouseMove(): void {}
+  protected onMouseClick(): void {}
+  public renderSharedCrosshair(values: { x?: number, y?: number }): void {}
+  public hideSharedCrosshair(): void {}
 
   protected initPodState(): void {
     const boxPararms = {
@@ -507,8 +510,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
       return;
     }
     this.chartContainer.append('text')
-      .attr('y', 0 - this.margin.left)
-      .attr('x', 0 - (this.height / 2))
+      .attr('y', -this.margin.left)
+      .attr('x', -(this.height / 2))
       .attr('dy', '1em')
       .attr('class', 'y-axis-label')
       .attr('transform', 'rotate(-90)')
@@ -518,6 +521,22 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
       .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 {
     if(this.options.axis.x.label === undefined) {
       return;
@@ -798,8 +817,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
         this.state.yValueRange = yRange;
         this.brushStartSelection = null;
     }
-
-    this.options.callbackZoomIn([xRange, yRange]);
+    this.zoomIn([xRange, yRange]);
   }
 
   protected zoomOut(): void {
@@ -812,6 +830,10 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     this.options.callbackZoomOut(centers);
   }
 
+  protected zoomIn(ranges: AxisRange[]): void {
+    this.options.callbackZoomIn(ranges);
+  }
+
   getAxisTicksFormatter(axisOptions: AxisOption): (d: any, i: number) => any {
     // TODO: ticksCount === 0 -> suspicious option
     if(axisOptions.ticksCount === 0) {

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,86 @@ 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);
+    }
+  }
+
+  callbackMouseOver(): void {
+    if(has(this._options.events, 'mouseOver')) {
+      this._options.events.mouseOver();
     }
   }
 
   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/models/series.ts

@@ -35,6 +35,7 @@ export class CoreSeries<T extends Serie> {
   _series: Array<T> = [];
 
   constructor(series: T[], private _podDefaults?: Partial<T>) {
+    // TODO: create separate Serie class, and store instances in this._series
     this.setSeries(series);
   }
 
@@ -83,7 +84,7 @@ export class CoreSeries<T extends Serie> {
   get isSeriesAvailable(): boolean {
     if(this.visibleSeries.length > 0) {
       const seriesEmptiness = lodashMap(this.visibleSeries, this._isSerieEmpty.bind(this));
-      
+
       return lodashIncludes(seriesEmptiness, false);
     }
     return false;

src/models/state.ts

@@ -1,4 +1,4 @@
-import { Serie, Options } from '../types';
+import { Serie, Options, yAxisOrientation } from '../types';
 import { CoreSeries } from './series';
 import { CoreOptions } from './options';
 
@@ -89,6 +89,15 @@ export class PodState<T extends Serie, O extends Options> {
     this._transform = { x: 0, y: 0, k: 1 };
   }
 
+  getYScaleByOrientation(orientation?: yAxisOrientation): d3.ScaleLinear<number, number> {
+    // TODO: we set defaults in Series class, so we don't expect `undefined` here
+    // we can remove this check when we implement Serie class (see TODO in `series.ts`)
+    if(orientation === undefined) {
+      return this._yScale;
+    }
+    return orientation === yAxisOrientation.LEFT ? this._yScale : this._y1Scale;
+  }
+
   get yScale(): d3.ScaleLinear<number, number> {
     return this._yScale;
   }
@@ -187,7 +196,7 @@ export class PodState<T extends Serie, O extends Options> {
     if(this.coreOptions.axis.y1.range !== undefined) {
       return min(this.coreOptions.axis.y1.range);
     }
-    return this.coreSeries.minValueY;
+    return this.coreSeries.minValueY1;
   }
 
   public getMaxValueY1(): number {
@@ -197,7 +206,7 @@ export class PodState<T extends Serie, O extends Options> {
     if(this.coreOptions.axis.y1.range !== undefined) {
       return max(this.coreOptions.axis.y1.range);
     }
-    return this.coreSeries.maxValueY;
+    return this.coreSeries.maxValueY1;
   }
 
   // getters for correct transform

src/types.ts

@@ -20,6 +20,7 @@ export type Events = {
   panning?: (event: { ranges: AxisRange[], d3Event: any }) => void,
   panningEnd?: (range: AxisRange[]) => void,
   zoomOut?: (centers: {x: number, y: number}) => void,
+  mouseOver?: () => void,
   mouseMove?: (evt: any) => void,
   mouseClick?: (evt: any) => void,
   mouseOut?: () => void,
@@ -34,6 +35,7 @@ export type Events = {
 
 export type Options = {
   margin?: Margin;
+   // obsolete property, use events instead
   eventsCallbacks?: Events;
   events?: Events;
   axis?: AxesOptions;

tsconfig.json

@@ -15,6 +15,11 @@
     "noImplicitUseStrict": false,
     "noImplicitAny": false,
     "noUnusedLocals": false,
-    "moduleResolution": "node"
-  }
+    "moduleResolution": "node",
+  },
+  "exclude": [
+    "node_modules",
+    "dist",
+    "demo"
+  ]
 }