diff --git a/examples/demo.html b/examples/demo.html
index 5ed3107..d75b7ea 100755
--- a/examples/demo.html
+++ b/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
diff --git a/src/index.ts b/src/index.ts
index 8380f35..abbb71e 100644
--- a/src/index.ts
+++ b/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 {
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 {
this.renderNoDataPointsMessage();
return;
}
-
for(const serie of this.series.visibleSeries) {
this._renderMetric(serie);
}
@@ -46,6 +47,9 @@ export class LinePod extends ChartwerkPod {
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 {
.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 {
.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 {
diff --git a/src/models/line_series.ts b/src/models/line_series.ts
index 4a2b326..dd9039e 100644
--- a/src/models/line_series.ts
+++ b/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 {
constructor(series: LineTimeSerie[]) {
- super(series, LINE_SERIE_DEFAULTS);
+ super(series, _.clone(LINE_SERIE_DEFAULTS));
}
}
diff --git a/yarn.lock b/yarn.lock
index 20b51bd..9433898 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6,12 +6,12 @@ __metadata:
cacheKey: 8
"@chartwerk/core@npm:latest":
- version: 0.6.6
- resolution: "@chartwerk/core@npm:0.6.6"
+ version: 0.6.12
+ resolution: "@chartwerk/core@npm:0.6.12"
dependencies:
d3: ^5.7.2
lodash: ^4.14.149
- checksum: 2f07c389c7af34dfb79a47a2e47c6c19540df6a85bad21606e28297eaaad6849b2fd1f62710882729274b38448578d2cc2985a3ec01159bb600dfcf2818fe71d
+ checksum: 75e15add9ed8fa92e422b83e9c7373e4dddc0bc7c62bb93d6b66358f76f7bca31c7a4a6dbb4f7d8ad2cc5b664d6b69f5204110ebc972ad8aef273c1aa0c32d31
languageName: node
linkType: hard