chartwerk
/
line-pod
4
0
Fork 0
Code Issues 33 Pull Requests 2 Projects Releases 1 Wiki Activity
Browse Source

use core 060

merge-requests/24/head
vargburz 3 years ago
parent
70966b323f
commit
b65b04c574
2 changed files with 23 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      src/index.ts
  2. 6
      yarn.lock

40
src/index.ts
Unescape View File

@ -17,7 +17,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
super(_el, _series, _options); super(_el, _series, _options);
this.coreSeries = new LineSeries(_series); this.series = new LineSeries(_series);
} }
renderMetrics(): void { renderMetrics(): void {
@ -27,12 +27,12 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.initLineGenerator(); this.initLineGenerator();
this.initAreaGenerator(); this.initAreaGenerator();
if(!this.coreSeries.isSeriesAvailable) { if(!this.series.isSeriesAvailable) {
this.renderNoDataPointsMessage(); this.renderNoDataPointsMessage();
return; return;
} }
for(const serie of this.coreSeries.visibleSeries) { for(const serie of this.series.visibleSeries) {
this._renderMetric(serie); this._renderMetric(serie);
} }
} }
@ -111,7 +111,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
appendCrosshairCircles(): void { appendCrosshairCircles(): void {
// circle for each serie // circle for each serie
this.coreSeries.visibleSeries.forEach((serie: LineTimeSerie, serieIdx: number) => { this.series.visibleSeries.forEach((serie: LineTimeSerie, serieIdx: number) => {
this.appendCrosshairCircle(serieIdx); this.appendCrosshairCircle(serieIdx);
}); });
} }
@ -124,7 +124,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS) .attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS)
.attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS) .attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS)
.attr('clip-path', `url(#${this.rectClipId})`) .attr('clip-path', `url(#${this.rectClipId})`)
.attr('fill', this.coreSeries.visibleSeries[serieIdx].color) .attr('fill', this.series.visibleSeries[serieIdx].color)
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY) .style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
.style('pointer-events', 'none'); .style('pointer-events', 'none');
@ -134,7 +134,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('cy', -CROSSHAIR_CIRCLE_RADIUS) .attr('cy', -CROSSHAIR_CIRCLE_RADIUS)
.attr('class', `crosshair-circle-${serieIdx}`) .attr('class', `crosshair-circle-${serieIdx}`)
.attr('clip-path', `url(#${this.rectClipId})`) .attr('clip-path', `url(#${this.rectClipId})`)
.attr('fill', this.coreSeries.visibleSeries[serieIdx].color) .attr('fill', this.series.visibleSeries[serieIdx].color)
.attr('r', CROSSHAIR_CIRCLE_RADIUS) .attr('r', CROSSHAIR_CIRCLE_RADIUS)
.style('pointer-events', 'none'); .style('pointer-events', 'none');
} }
@ -146,7 +146,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.moveCrosshairLine(eventX, eventY); this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(values.x, values.y); const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
this.coreOptions.callbackSharedCrosshairMove({ this.options.callbackSharedCrosshairMove({
datapoints: datapoints, datapoints: datapoints,
eventX, eventY eventX, eventY
}); });
@ -157,7 +157,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
moveCrosshairLine(xPosition: number, yPosition: number): void { moveCrosshairLine(xPosition: number, yPosition: number): void {
switch(this.coreOptions.crosshair.orientation) { switch(this.options.crosshair.orientation) {
case CrosshairOrientation.VERTICAL: case CrosshairOrientation.VERTICAL:
this.crosshair.select('#crosshair-line-x') this.crosshair.select('#crosshair-line-x')
.attr('x1', xPosition) .attr('x1', xPosition)
@ -177,7 +177,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('y2', yPosition); .attr('y2', yPosition);
return; return;
default: default:
throw new Error(`Unknown type of crosshair orientaion: ${this.coreOptions.crosshair.orientation}`); throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);
} }
} }
@ -205,7 +205,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number { getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number {
let columnIdx; // 0 for x value, 1 for y value, let columnIdx; // 0 for x value, 1 for y value,
let value; // xValue to y Value let value; // xValue to y Value
switch(this.coreOptions.crosshair.orientation) { switch(this.options.crosshair.orientation) {
case CrosshairOrientation.VERTICAL: case CrosshairOrientation.VERTICAL:
columnIdx = 0; columnIdx = 0;
value = xValue; value = xValue;
@ -219,7 +219,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
columnIdx = 1; columnIdx = 1;
value = yValue; value = yValue;
default: default:
throw new Error(`Unknown type of crosshair orientaion: ${this.coreOptions.crosshair.orientation}`); throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);
} }
// TODO: d3.bisect is not the best way. Use binary search // TODO: d3.bisect is not the best way. Use binary search
@ -248,7 +248,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
// columnIdx: 1 for y, 0 for x // columnIdx: 1 for y, 0 for x
// inverval: x/y value interval between data points // inverval: x/y value interval between data points
// TODO: move it to base/state instead of timeInterval // TODO: move it to base/state instead of timeInterval
const intervals = _.map(this.coreSeries.visibleSeries, serie => { const intervals = _.map(this.series.visibleSeries, serie => {
if(serie.datapoints.length < 2) { if(serie.datapoints.length < 2) {
return undefined; return undefined;
} }
@ -272,7 +272,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
// TDOO: is shift key pressed // TDOO: is shift key pressed
// TODO: need to refactor this object // TODO: need to refactor this object
this.coreOptions.callbackMouseMove({ this.options.callbackMouseMove({
x: d3.event.pageX, x: d3.event.pageX,
y: d3.event.pageY, y: d3.event.pageY,
xVal: xValue, xVal: xValue,
@ -284,11 +284,11 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] { findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {
if(!this.coreSeries.isSeriesAvailable) { if(!this.series.isSeriesAvailable) {
return []; return [];
} }
let points = []; // datapoints in each metric that is closest to xValue/yValue position let points = []; // datapoints in each metric that is closest to xValue/yValue position
this.coreSeries.visibleSeries.forEach((serie: LineTimeSerie) => { this.series.visibleSeries.forEach((serie: LineTimeSerie) => {
const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue); const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue);
if(closestDatapoint === undefined) { if(closestDatapoint === undefined) {
this.hideCrosshairCircle(serie.idx); this.hideCrosshairCircle(serie.idx);
@ -315,21 +315,21 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
onMouseOut(): void { onMouseOut(): void {
this.coreOptions.callbackMouseOut(); this.options.callbackMouseOut();
this.crosshair.style('display', 'none'); this.crosshair.style('display', 'none');
} }
isDoubleClickActive(): boolean { isDoubleClickActive(): boolean {
return this.coreOptions.doubleClickEvent.isActive; return this.options.doubleClickEvent.isActive;
} }
// methods below rewrite cores, (move more methods here) // methods below rewrite s, (move more methods here)
protected zoomOut(): void { protected zoomOut(): void {
if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
return; return;
} }
// TODO: its not clear, why we use this orientation here. Mb its better to use separate option // TODO: its not clear, why we use this orientation here. Mb its better to use separate option
const orientation: BrushOrientation = this.coreOptions.mouseZoomEvent.orientation; const orientation: BrushOrientation = this.options.mouseZoomEvent.orientation;
const xInterval = this.state.xValueRange[1] - this.state.xValueRange[0]; const xInterval = this.state.xValueRange[1] - this.state.xValueRange[0];
const yInterval = this.state.yValueRange[1] - this.state.yValueRange[0]; const yInterval = this.state.yValueRange[1] - this.state.yValueRange[0];
switch(orientation) { switch(orientation) {
@ -364,7 +364,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
x: xAxisMiddleValue, x: xAxisMiddleValue,
y: yAxisMiddleValue y: yAxisMiddleValue
} }
this.coreOptions.callbackZoomOut(centers); this.options.callbackZoomOut(centers);
} }
} }

6
yarn.lock
Unescape View File

@ -6,12 +6,12 @@ __metadata:
cacheKey: 8 cacheKey: 8
"@chartwerk/core@npm:latest": "@chartwerk/core@npm:latest":
version: 0.5.8 version: 0.6.0
resolution: "@chartwerk/core@npm:0.5.8" resolution: "@chartwerk/core@npm:0.6.0"
dependencies: dependencies:
d3: ^5.7.2 d3: ^5.7.2
lodash: ^4.14.149 lodash: ^4.14.149
checksum: 24b403af2703cc99ef3dee4793318ed71f4b02ed50bee6940774ccb392b8fbb53bb5353e91903b2c1ec815a8d2b830f2a2a2925d8e4380c64895ee2002b2baed checksum: db368ea1ba1f9b48583c3da953998206329ea552eaff4e9f13cb02b25e0289464eca268baa86f045d62552a0859fc3ee2ccf70e7df95b58327bba217f9888169
languageName: node languageName: node
linkType: hard linkType: hard

Write Preview
Loading…
Cancel
Save