Browse Source

apply yOriented series for line pod

pull/3/head
vargburz 1 year ago
parent
commit
903817cb9c
  1. 11
      examples/demo.html
  2. 20
      src/index.ts
  3. 7
      src/models/line_series.ts
  4. 6
      yarn.lock

11
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

20
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 {

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

6
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

Loading…
Cancel
Save