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