Skip to content

Commit

Permalink
Moved create cursor to ChartPlotter
Browse files Browse the repository at this point in the history
  • Loading branch information
@jirkapok
jirkapok committed Apr 2, 2024
1 parent acadb98 commit d6d1bb3
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 52 deletions.
49 changes: 15 additions & 34 deletions projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { ComparedWaypoint } from '../../shared/diff/ComparedWaypoint';
export class ProfileDifferenceChartComponent extends Streamed implements OnInit {
public icon = faChartArea;
private readonly elementName = 'diveplot';
private chartElement: any;
private chartElement: any; // prevent typescript type gymnastic

private options = {
displaylogo: false,
Expand All @@ -33,9 +33,9 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
editable: false
};

private cursor1: Partial<Plotly.Shape> = ProfileDifferenceChartComponent.createCursor(ChartPlotterFactory.depthLineColorA);
private cursor1: Partial<Plotly.Shape> = ChartPlotterFactory.createCursor(ChartPlotterFactory.depthLineColorA);

private layout: any;
private layout: Partial<Plotly.Layout>;
private resampling: ResamplingService;
private profileAChartPlotter: ChartPlotter;
private profileBChartPlotter: ChartPlotter;
Expand Down Expand Up @@ -109,43 +109,24 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
return this.profileComparatorService.profileBResults;
}

private static createCursor(lineColor: string): Partial<Plotly.Shape> {
return {
type: 'line',
// x-reference is assigned to the x-values
xref: 'x',
// y-reference is assigned to the plot paper [0,1]
yref: 'y',
x0: new Date('2001-06-12 12:30'), // dummy values
y0: 0,
x1: new Date('2001-06-12 12:30'),
y1: 1,
fillcolor: '#d3d3d3',
line: {
color: lineColor,
width: 5
}
};
}

public ngOnInit(): void {
void this.profileComparatorService.waitUntilProfilesCalculated().then(() => {
this.plotCharts();
this.hookChartEvents();
});
}

public plotlyHover(data: any): void {
public plotlyHover(data: Plotly.PlotMouseEvent): void {
// first data is the dive profile chart, x value is the timestamp as string
const timeStampValue: string = data.points[0].x;
const timeStampValue: string = data.points[0].x!.toString();
this.selectedWaypoints.selectedTimeStamp = timeStampValue;
}

private plotlyHoverLeave(data: any) {
private plotlyHoverLeave() {
this.selectedWaypoints.selectedTimeStamp = '';
}

private selectWayPoint(selected: ComparedWaypoint | undefined) {
private selectWayPoint(selected: ComparedWaypoint | undefined): void {
if (!selected) {
return;
}
Expand All @@ -159,7 +140,7 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
shapes: [ this.cursor1 ]
};

Plotly.relayout(this.elementName, update);
void Plotly.relayout(this.elementName, update);
}
}

Expand All @@ -185,23 +166,23 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
const profileBCeilings = this.profileBChartPlotter.plotCeilings();
const profileBEvents = this.profileBChartPlotter.plotEvents();

const traces = [
const traces: Plotly.Data[] = [
profileBAverageDepths, profileBDepths, profileBCeilings, profileBEvents,
profileAAverageDepths, profileADepths, profileACeilings, profileAEvents,
];

Plotly.react(this.elementName, traces, this.layout, this.options);
void Plotly.react(this.elementName, traces, this.layout, this.options);
}

private hookChartEvents(): void {
this.chartElement = document.getElementById(this.elementName);
this.chartElement.on('plotly_hover', (e: any) => this.plotlyHover(e));
this.chartElement.on('plotly_click', (e: any) => this.plotlyHover(e));
this.chartElement.on('plotly_unhover', (e: any) => this.plotlyHoverLeave(e));
this.chartElement = document.getElementById(this.elementName)!;
this.chartElement.on('plotly_hover', (e: Plotly.PlotMouseEvent) => this.plotlyHover(e));
this.chartElement.on('plotly_click', (e: Plotly.PlotMouseEvent) => this.plotlyHover(e));
this.chartElement.on('plotly_unhover', () => this.plotlyHoverLeave());
}

private updateLayoutThickFormat(): void {
// setting to string instead expected d3 formtting function causes warning in console = want fix
this.layout.xaxis.tickformat = DateFormats.selectChartTimeFormat(this.profileA.totalDuration);
this.layout.xaxis!.tickformat = DateFormats.selectChartTimeFormat(this.profileA.totalDuration);
}
}
51 changes: 33 additions & 18 deletions projects/planner/src/app/shared/chartPlotter.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {UnitConversion} from './UnitConversion';
import {ResamplingService} from './ResamplingService';
import {DiveResults} from './diveresults';

import * as Plotly from 'plotly.js-basic-dist';

// TODO merge with profileChart component drawing methods
export class ChartPlotterFactory {
Expand All @@ -17,6 +17,25 @@ export class ChartPlotterFactory {
constructor(private resampling: ResamplingService, private units: UnitConversion) {
}

public static createCursor(lineColor: string): Partial<Plotly.Shape> {
return {
type: 'line',
// x-reference is assigned to the x-values
xref: 'x',
// y-reference is assigned to the plot paper [0,1]
yref: 'y',
x0: new Date('2001-06-12 12:30'), // dummy values
y0: 0,
x1: new Date('2001-06-12 12:30'),
y1: 1,
fillcolor: '#d3d3d3',
line: {
color: lineColor,
width: 5
}
};
}

public wthNamePrefix(prefix: string): ChartPlotterFactory {
this.namePrefix = prefix;
return this;
Expand Down Expand Up @@ -89,50 +108,46 @@ export class ChartPlotter {
this.eventFillColor = eventFillColor;
}

public plotAverageDepth(): any {
public plotAverageDepth(): Partial<Plotly.PlotData> {
const resampleAverageDepth = this.resampling.resampleAverageDepth(this.dive.wayPoints);

const dataAverageDepths = {
return {
x: resampleAverageDepth.xValues,
y: resampleAverageDepth.yValues,
type: 'scatter',
type: <Plotly.PlotType>'scatter',
line: {
dash: 'dot'
dash: <Plotly.Dash>'dot'
},
name: this.namePrefix + 'Avg. depth',
marker: {
color: this.averageDepthLineColor
},
hovertemplate: `%{y:.2f} ${this.units.length}`
};

return dataAverageDepths;
}

public plotDepths(): any {
public plotDepths(): Partial<Plotly.PlotData> {
const resampled = this.resampling.resampleWaypoints(this.dive.wayPoints);

const data = {
return {
x: resampled.xValues,
y: resampled.yValues,
type: 'scatter',
type: <Plotly.PlotType>'scatter',
name: this.namePrefix + 'Depth',
marker: {
color: this.depthLineColor
},
hovertemplate: `%{y:.2f} ${this.units.length}`
};

return data;
}

public plotCeilings(): any {
public plotCeilings(): Partial<Plotly.PlotData> {
const resampled = this.resampling.resampleCeilings(this.dive.ceilings);

const dataCeilings = {
x: resampled.xValues,
y: resampled.yValues,
type: 'scatter',
type: <Plotly.PlotType>'scatter',
fill: 'tozeroy',
name: this.namePrefix + 'Ceiling',
marker: {
Expand All @@ -141,18 +156,18 @@ export class ChartPlotter {
hovertemplate: `%{y:.2f} ${this.units.length}`
};

return dataCeilings;
return <Partial<Plotly.PlotData>>dataCeilings;
}

public plotEvents(): any {
public plotEvents(): Partial<Plotly.PlotData> {
const resampled = this.resampling.convertEvents(this.dive.events);

const dataEvents = {
x: resampled.xValues,
y: resampled.yValues,
labels: resampled.labels,
text: resampled.labels,
type: 'scatter',
type: <Plotly.PlotType>'scatter',
mode: 'text+markers',
fill: 'tozeroy',
name: this.namePrefix + 'Event',
Expand All @@ -172,6 +187,6 @@ export class ChartPlotter {
showlegend: false
};

return dataEvents;
return <Partial<Plotly.PlotData>>dataEvents;
}
}

0 comments on commit d6d1bb3

Please sign in to comment.