Skip to content

Commit

Permalink
#632 - Showing reference imported graph on the detail view
Browse files Browse the repository at this point in the history
  • Loading branch information
@graphefruit
graphefruit committed Dec 19, 2024
1 parent 900082d commit 8d0a3c7
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 11 deletions.
148 changes: 139 additions & 9 deletions src/app/graph-section/graph/graph-detail/graph-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,17 @@ import { UISettingsStorage } from '../../../../services/uiSettingsStorage';
import { IBrew } from '../../../../interfaces/brew/iBrew';
import { GraphHelperService } from '../../../../services/graphHelper/graph-helper.service';
import { PREPARATION_STYLE_TYPE } from '../../../../enums/preparations/preparationStyleTypes';
import { Brew } from '../../../../classes/brew/brew';
import { REFERENCE_GRAPH_TYPE } from '../../../../enums/brews/referenceGraphType';
import { Graph } from '../../../../classes/graph/graph';
import { BREW_GRAPH_TYPE } from '../../../../enums/brews/brewGraphType';
import BeanconquerorFlowTestDataDummySecondDummy from '../../../../assets/BeanconquerorFlowTestDataSecond.json';
import { UIBrewStorage } from '../../../../services/uiBrewStorage';
import { UIGraphStorage } from '../../../../services/uiGraphStorage.service';
import { UIAlert } from '../../../../services/uiAlert';

declare var Plotly;

@Component({
selector: 'app-graph-detail',
templateUrl: './graph-detail.component.html',
Expand All @@ -34,9 +44,12 @@ export class GraphDetailComponent implements OnInit {
public settings: Settings;

public traces: any = {};
public traceReferences: any = {};
public lastChartLayout: any = undefined;
public flowProfileLoading: boolean = true;

public reference_profile_raw: BrewFlow = new BrewFlow();

@ViewChild('canvaContainer', { read: ElementRef, static: true })
public canvaContainer: ElementRef;
@ViewChild('profileDiv', { read: ElementRef, static: true })
Expand All @@ -55,21 +68,26 @@ export class GraphDetailComponent implements OnInit {
private readonly uiFileHelper: UIFileHelper,
private readonly uiSettingsStorage: UISettingsStorage,
private readonly modalController: ModalController,
private readonly graphHelper: GraphHelperService
private readonly graphHelper: GraphHelperService,
private readonly uiBrewStorage: UIBrewStorage,
private readonly uiGraphStorage: UIGraphStorage,
private readonly uiAlert: UIAlert,
) {}

public ngOnInit() {}

public async ionViewWillEnter() {
this.settings = this.uiSettingsStorage.getSettings();

this.uiAnalytics.trackEvent(
GRAPH_TRACKING.TITLE,
GRAPH_TRACKING.ACTIONS.DETAIL
GRAPH_TRACKING.ACTIONS.DETAIL,
);
if (this.graph) {
await this.readFlowProfile(this.graph.flow_profile);
} else if (this.brew) {
await this.readFlowProfile(this.brew.flow_profile);
await this.readReferenceFlowProfile(this.brew);
} else {
this.flow_profile_raw = this.uiHelper.cloneData(this.flowProfileData);
}
Expand All @@ -84,26 +102,55 @@ export class GraphDetailComponent implements OnInit {
}, 300);
}, 50);
}

public toggleChartLines(_type: string) {
if (_type === 'weight') {
this.traces.weightTrace.visible = !this.traces.weightTrace.visible;
if (this.traceReferences.weightTrace) {
this.traceReferences.weightTrace.visible =
!this.traceReferences.weightTrace.visible;
}
} else if (_type === 'calc_flow') {
this.traces.flowPerSecondTrace.visible =
!this.traces.flowPerSecondTrace.visible;
if (this.traceReferences.flowPerSecondTrace) {
this.traceReferences.flowPerSecondTrace.visible =
!this.traceReferences.flowPerSecondTrace.visible;
}
} else if (_type === 'realtime_flow') {
this.traces.realtimeFlowTrace.visible =
!this.traces.realtimeFlowTrace.visible;
if (this.traceReferences.realtimeFlowTrace) {
this.traceReferences.realtimeFlowTrace.visible =
!this.traceReferences.realtimeFlowTrace.visible;
}
} else if (_type === 'pressure') {
this.traces.pressureTrace.visible = !this.traces.pressureTrace.visible;
if (this.traceReferences.pressureTrace) {
this.traceReferences.pressureTrace.visible =
!this.traceReferences.pressureTrace.visible;
}
} else if (_type === 'temperature') {
this.traces.temperatureTrace.visible =
!this.traces.temperatureTrace.visible;
if (this.traceReferences.temperatureTrace) {
this.traceReferences.temperatureTrace.visible =
!this.traceReferences.temperatureTrace.visible;
}
} else if (_type === 'weightSecond') {
this.traces.weightTraceSecond.visible =
!this.traces.weightTraceSecond.visible;
if (this.traceReferences.weightTraceSecond) {
this.traceReferences.weightTraceSecond.visible =
!this.traceReferences.weightTraceSecond.visible;
}
} else if (_type === 'realtimeFlowSecond') {
this.traces.realtimeFlowTraceSecond.visible =
!this.traces.realtimeFlowTraceSecond.visible;
if (this.traceReferences.realtimeFlowTraceSecond) {
this.traceReferences.realtimeFlowTraceSecond.visible =
!this.traceReferences.realtimeFlowTraceSecond.visible;
}
}

Plotly.relayout(this.profileDiv.nativeElement, this.lastChartLayout);
Expand All @@ -124,6 +171,7 @@ export class GraphDetailComponent implements OnInit {
};
return config;
}

private getChartLayout() {
/* Important - we use scatter instead of scattergl, because we can't have many openGL contexts
* - https://github.com/plotly/plotly.js/issues/2333 -
Expand All @@ -139,11 +187,12 @@ export class GraphDetailComponent implements OnInit {
false,
true,
chartWidth,
chartHeight
chartHeight,
);
this.lastChartLayout = layout;
return layout;
}

public initializeFlowChart(): void {
setTimeout(() => {
try {
Expand All @@ -155,7 +204,19 @@ export class GraphDetailComponent implements OnInit {
this.traces = this.graphHelper.fillTraces(
this.traces,
graphSettings,
true
true,
);

this.traceReferences = this.graphHelper.initializeTraces();
this.traceReferences = this.graphHelper.fillTraces(
this.traceReferences,
graphSettings,
true,
);

this.graphHelper.fillDataIntoTraces(
this.reference_profile_raw,
this.traceReferences,
);

this.graphHelper.fillDataIntoTraces(this.flow_profile_raw, this.traces);
Expand All @@ -173,11 +234,33 @@ export class GraphDetailComponent implements OnInit {
chartData.push(this.traces.weightTraceSecond);
chartData.push(this.traces.realtimeFlowTraceSecond);

if (
this.traceReferences.weightTrace &&
this.traceReferences.weightTrace.x?.length > 0
) {
chartData.push(this.traceReferences.weightTrace);
chartData.push(this.traceReferences.flowPerSecondTrace);
chartData.push(this.traceReferences.realtimeFlowTrace);
}

if (
this.traceReferences.pressureTrace &&
this.traceReferences.pressureTrace.x?.length > 0
) {
chartData.push(this.traceReferences.pressureTrace);
}
if (
this.traceReferences.temperatureTrace &&
this.traceReferences.temperatureTrace.x?.length > 0
) {
chartData.push(this.traceReferences.temperatureTrace);
}

Plotly.newPlot(
this.profileDiv.nativeElement,
chartData,
layout,
this.getChartConfig()
this.getChartConfig(),
);
this.flowProfileLoading = false;
}, 100);
Expand All @@ -187,28 +270,75 @@ export class GraphDetailComponent implements OnInit {
if (this.platform.is('capacitor')) {
if (_path !== '') {
try {
const jsonParsed = await this.uiFileHelper.readInternalJSONFile(
_path
);
const jsonParsed =
await this.uiFileHelper.readInternalJSONFile(_path);
this.flow_profile_raw = jsonParsed;
} catch (ex) {}
}
} else {
this.flow_profile_raw = BeanconquerorFlowTestDataDummy as any;
}
}

private async readReferenceFlowProfile(_iBrew: IBrew) {
if (this.platform.is('capacitor')) {
const _brew: Brew = this.uiBrewStorage.getEntryByUUID(_iBrew.config.uuid);
if (_brew.reference_flow_profile.type !== REFERENCE_GRAPH_TYPE.NONE) {
let referencePath: string = '';
const uuid = _brew.reference_flow_profile.uuid;
let referenceObj: Brew | Graph = null;
if (
_brew.reference_flow_profile.type === REFERENCE_GRAPH_TYPE.BREW ||
_brew.reference_flow_profile.type ===
REFERENCE_GRAPH_TYPE.IMPORTED_GRAPH
) {
referenceObj = this.uiBrewStorage.getEntryByUUID(uuid);

if (
_brew.reference_flow_profile.type ===
REFERENCE_GRAPH_TYPE.IMPORTED_GRAPH
) {
referencePath = referenceObj.getGraphPath(
BREW_GRAPH_TYPE.IMPORTED_GRAPH,
);
} else {
referencePath = referenceObj.getGraphPath(BREW_GRAPH_TYPE.BREW);
}
} else {
referenceObj = this.uiGraphStorage.getEntryByUUID(uuid);
referencePath = referenceObj.getGraphPath();
}
if (referenceObj) {
await this.uiAlert.showLoadingSpinner();
try {
const jsonParsed =
await this.uiFileHelper.readInternalJSONFile(referencePath);
this.reference_profile_raw = jsonParsed;
} catch (ex) {
// Maybe the reference flow has been deleted.
}
}
}
await this.uiAlert.hideLoadingSpinner();
} else {
this.reference_profile_raw =
BeanconquerorFlowTestDataDummySecondDummy as any;
}
}

public ngOnDestroy() {
try {
Plotly.purge(this.profileDiv.nativeElement);
} catch (ex) {}
}

public dismiss(): void {
this.modalController.dismiss(
{
dismissed: true,
},
undefined,
GraphDetailComponent.COMPONENT_ID
GraphDetailComponent.COMPONENT_ID,
);
}
}
15 changes: 13 additions & 2 deletions src/components/brews/brew-brewing-graph/brew-brewing-graph.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ import { SanremoYOUDevice } from '../../../classes/preparationDevice/sanremo/san
import { SanremoYOUMode } from '../../../enums/preparationDevice/sanremo/sanremoYOUMode';
import { GraphHelperService } from '../../../services/graphHelper/graph-helper.service';
import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
import { BREW_GRAPH_TYPE } from '../../../enums/brews/brewGraphType';

declare var Plotly;

Expand Down Expand Up @@ -340,12 +341,22 @@ export class BrewBrewingGraphComponent implements OnInit {
REFERENCE_GRAPH_TYPE.IMPORTED_GRAPH
) {
referenceObj = this.uiBrewStorage.getEntryByUUID(uuid);

if (
_brew.reference_flow_profile.type ===
REFERENCE_GRAPH_TYPE.IMPORTED_GRAPH
) {
referencePath = referenceObj.getGraphPath(
BREW_GRAPH_TYPE.IMPORTED_GRAPH,
);
} else {
referencePath = referenceObj.getGraphPath(BREW_GRAPH_TYPE.BREW);
}
} else {
referenceObj = this.uiGraphStorage.getEntryByUUID(uuid);
referencePath = referenceObj.getGraphPath();
}
if (referenceObj) {
referencePath = referenceObj.getGraphPath();

await this.uiAlert.showLoadingSpinner();
try {
const jsonParsed =
Expand Down

0 comments on commit 8d0a3c7

Please sign in to comment.