diff --git a/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts b/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts index 0f495bd2..9a3e43b2 100644 --- a/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts +++ b/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts @@ -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, @@ -33,9 +33,9 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit editable: false }; - private cursor1: Partial = ProfileDifferenceChartComponent.createCursor(ChartPlotterFactory.depthLineColorA); + private cursor1: Partial = ChartPlotterFactory.createCursor(ChartPlotterFactory.depthLineColorA); - private layout: any; + private layout: Partial; private resampling: ResamplingService; private profileAChartPlotter: ChartPlotter; private profileBChartPlotter: ChartPlotter; @@ -109,25 +109,6 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit return this.profileComparatorService.profileBResults; } - private static createCursor(lineColor: string): Partial { - 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(); @@ -135,17 +116,17 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit }); } - 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; } @@ -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); } } @@ -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); } } diff --git a/projects/planner/src/app/shared/chartPlotter.ts b/projects/planner/src/app/shared/chartPlotter.ts index 3edc3b85..92870474 100644 --- a/projects/planner/src/app/shared/chartPlotter.ts +++ b/projects/planner/src/app/shared/chartPlotter.ts @@ -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 { @@ -17,6 +17,25 @@ export class ChartPlotterFactory { constructor(private resampling: ResamplingService, private units: UnitConversion) { } + public static createCursor(lineColor: string): Partial { + 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; @@ -89,15 +108,15 @@ export class ChartPlotter { this.eventFillColor = eventFillColor; } - public plotAverageDepth(): any { + public plotAverageDepth(): Partial { const resampleAverageDepth = this.resampling.resampleAverageDepth(this.dive.wayPoints); - const dataAverageDepths = { + return { x: resampleAverageDepth.xValues, y: resampleAverageDepth.yValues, - type: 'scatter', + type: 'scatter', line: { - dash: 'dot' + dash: 'dot' }, name: this.namePrefix + 'Avg. depth', marker: { @@ -105,34 +124,30 @@ export class ChartPlotter { }, hovertemplate: `%{y:.2f} ${this.units.length}` }; - - return dataAverageDepths; } - public plotDepths(): any { + public plotDepths(): Partial { const resampled = this.resampling.resampleWaypoints(this.dive.wayPoints); - const data = { + return { x: resampled.xValues, y: resampled.yValues, - type: 'scatter', + type: 'scatter', name: this.namePrefix + 'Depth', marker: { color: this.depthLineColor }, hovertemplate: `%{y:.2f} ${this.units.length}` }; - - return data; } - public plotCeilings(): any { + public plotCeilings(): Partial { const resampled = this.resampling.resampleCeilings(this.dive.ceilings); const dataCeilings = { x: resampled.xValues, y: resampled.yValues, - type: 'scatter', + type: 'scatter', fill: 'tozeroy', name: this.namePrefix + 'Ceiling', marker: { @@ -141,10 +156,10 @@ export class ChartPlotter { hovertemplate: `%{y:.2f} ${this.units.length}` }; - return dataCeilings; + return >dataCeilings; } - public plotEvents(): any { + public plotEvents(): Partial { const resampled = this.resampling.convertEvents(this.dive.events); const dataEvents = { @@ -152,7 +167,7 @@ export class ChartPlotter { y: resampled.yValues, labels: resampled.labels, text: resampled.labels, - type: 'scatter', + type: 'scatter', mode: 'text+markers', fill: 'tozeroy', name: this.namePrefix + 'Event', @@ -172,6 +187,6 @@ export class ChartPlotter { showlegend: false }; - return dataEvents; + return >dataEvents; } }