Merge branch 'make-y-oriented-series-work' into 'main'

make y oriented series work

See merge request chartwerk/line-pod!26

examples/demo.html

@@ -13,12 +13,17 @@
       const startTime = 1590590148;
       const arrayLength = 20;
       const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
-      const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
+      const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 10)]);
       const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
       const zoomIn = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); }
       const panningEnd = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); }
       let options = {
-        renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } },
+        renderLegend: false, usePanning: false,
+        axis: {
+          y: { invert: false, range: [0, 350] },
+          y1: { isActive: true, range: [0, 10],  ticksCount: 8 },
+          x: { format: 'time' }
+        },
         zoomEvents: {
           mouse: { zoom: { isActive: true, orientation: 'horizontal' } },
           scroll: { zoom: { isActive: true, orientation: 'horizontal' } }
@@ -29,7 +34,7 @@
         document.getElementById('chart'),
         [
           { target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
-          { target: 'test2', datapoints: data2, color: 'blue' },
+          { target: 'test2', datapoints: data2, color: 'blue', yOrientation: 'right' },
           { target: 'test3', datapoints: data3, color: 'orange' },
         ],
         options

src/index.ts

@@ -1,4 +1,4 @@
-import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core';
+import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core';
 import { LineTimeSerie, LineOptions } from './types';
 
 import { LineSeries } from './models/line_series';
@@ -14,6 +14,8 @@ const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
 export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   lineGenerator = null;
   areaGenerator = null;
+  lineGeneratorY1 = null;
+  areaGeneratorY1 = null;
 
   constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
     super(_el, _series, _options);
@@ -31,7 +33,6 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       this.renderNoDataPointsMessage();
       return;
     }
-
     for(const serie of this.series.visibleSeries) {
       this._renderMetric(serie);
     }
@@ -46,6 +47,9 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     this.lineGenerator = d3.line()
       .x(d => this.state.xScale(d[0]))
       .y(d => this.state.yScale(d[1]));
+    this.lineGeneratorY1 = d3.line()
+      .x(d => this.state.xScale(d[0]))
+      .y(d => this.state.y1Scale(d[1]));
   }
 
   initAreaGenerator(): void {
@@ -53,13 +57,17 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       .x(d => this.state.xScale(d[0]))
       .y1(d => this.state.yScale(d[1]))
       .y0(d => this.height);
+    this.areaGeneratorY1 = d3.area()
+      .x(d => this.state.xScale(d[0]))
+      .y1(d => this.state.y1Scale(d[1]))
+      .y0(d => this.height);
   }
 
-  getRenderGenerator(renderArea: boolean): any {
+  getRenderGenerator(renderArea: boolean, yOrientation: yAxisOrientation): any {
     if(renderArea) {
-      return this.areaGenerator;
+      return yOrientation === yAxisOrientation.LEFT ? this.areaGenerator : this.areaGeneratorY1;
     }
-    return this.lineGenerator;
+    return yOrientation === yAxisOrientation.LEFT ? this.lineGenerator : this.areaGeneratorY1;
   }
 
   _renderDots(serie: LineTimeSerie): void {
@@ -90,7 +98,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       .attr('stroke-opacity', 0.7)
       .attr('pointer-events', 'none')
       .style('stroke-dasharray', serie.dashArray)
-      .attr('d', this.getRenderGenerator(serie.renderArea));
+      .attr('d', this.getRenderGenerator(serie.renderArea, serie.yOrientation));
   }
 
   _renderMetric(serie: LineTimeSerie): void {

src/models/line_series.ts

@@ -1,6 +1,8 @@
-import { CoreSeries } from '@chartwerk/core';
+import { CoreSeries, yAxisOrientation } from '@chartwerk/core';
 import { LineTimeSerie } from '../types';
 
+import * as _ from 'lodash';
+
 
 const LINE_SERIE_DEFAULTS = {
   maxLength: undefined,
@@ -9,11 +11,12 @@ const LINE_SERIE_DEFAULTS = {
   dashArray: '0',
   class: '',
   renderArea: false,
+  yOrientation: yAxisOrientation.LEFT,
 };
 
 export class LineSeries extends CoreSeries<LineTimeSerie> {
 
   constructor(series: LineTimeSerie[]) {
-    super(series, LINE_SERIE_DEFAULTS);
+    super(series, _.clone(LINE_SERIE_DEFAULTS));
   }
 }

yarn.lock

@@ -6,12 +6,12 @@ __metadata:
   cacheKey: 8
 
 "@chartwerk/core@npm:latest":
-  version: 0.6.6
+  version: 0.6.12
-  resolution: "@chartwerk/core@npm:0.6.6"
+  resolution: "@chartwerk/core@npm:0.6.12"
   dependencies:
     d3: ^5.7.2
     lodash: ^4.14.149
-  checksum: 2f07c389c7af34dfb79a47a2e47c6c19540df6a85bad21606e28297eaaad6849b2fd1f62710882729274b38448578d2cc2985a3ec01159bb600dfcf2818fe71d
+  checksum: 75e15add9ed8fa92e422b83e9c7373e4dddc0bc7c62bb93d6b66358f76f7bca31c7a4a6dbb4f7d8ad2cc5b664d6b69f5204110ebc972ad8aef273c1aa0c32d31
   languageName: node
   linkType: hard