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

Reviewed-on: #51

package.json

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

src/index.ts

@@ -116,6 +116,7 @@ class ChartwerkPod<T extends Serie, O extends Options> {
 
     this.renderLegend();
     this.renderYLabel();
+    this.renderY1Label();
     this.renderXLabel();
 
     this.options.callbackRenderEnd();
@@ -509,8 +510,8 @@ 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)')
@@ -520,6 +521,22 @@ 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;

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;
   }