Skip to content

Commit

Permalink
Displacement header button (WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
yoreley777 committed Nov 19, 2024
2 parents 2ec6663 + 96d053e commit 767e000
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 91 deletions.
185 changes: 99 additions & 86 deletions src/app/components/header/header-buttons/header-buttons.component.html
Original file line number Diff line number Diff line change
@@ -1,90 +1,103 @@
<div *ngIf="breakpoint$ | async as breakpoint" class="fx-row">
<div *ngIf="breakpoint$ | async as breakpoint" xmlns="http://www.w3.org/1999/html" class="fx-row">
<ng-container *ngIf="breakpoint > breakpoints.MOBILE">
<button
[matMenuTriggerFor]="onDemandQueue"
class="spacing nav-icon-buttons" color="basic"
matTooltip="{{ 'ON_DEMAND_QUEUE' | translate }}"
mat-button>
<mat-icon
class="large-icon"
aria-hidden="false"
svgIcon="hyp3"
[matBadge]="queuedCustomProducts.length"
[matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
matBadgePosition="above after"
matBadgeOverlap="true"
matBadgeSize="small">
</mat-icon>
<div class="text-under faint-text">{{ 'ON_DEMAND' | translate }}</div>
</button>

<mat-menu #onDemandQueue="matMenu">
<button
(click)="onOpenProcessingQueue()"
mat-menu-item>{{ 'ON_DEMAND_QUEUE' | translate }}</button>

<button mat-menu-item
(click) = "onSetSearchTypeOnDemand()"
[disabled]="!isLoggedIn">{{ 'SUBMITTED_PRODUCTS' | translate }}
</button>

<button mat-menu-item (click)="onOpenOnDemandDocs()">
{{ 'ON_DEMAND_HY_P3_DOCS' | translate }}
</button>
</mat-menu>
<button
(click)="onOpenDownloadQueue()"
class="spacing nav-icon-buttons"
color="basic"
matTooltip="{{ 'DOWNLOADS' | translate }}" mat-button>

<mat-icon
class="large-icon"
aria-hidden="false"
[matBadge]="queuedProducts.length"
[matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
matBadgePosition="above after"
matBadgeOverlap="true"
matBadgeSize="small">
shopping_cart
</mat-icon>
<div class="text-under faint-text">{{ 'DOWNLOADS' | translate }}</div>
</button>

<button
[matMenuTriggerFor]="helpMenu"
matTooltip="{{ 'HELP_AND_INFORMATION' | translate }}"
class="spacing nav-icon-buttons" color="basic" mat-button>
<mat-icon class="large-icon">help_outline</mat-icon>
<div class="text-under faint-text">{{ 'HELP' | translate }}</div>
</button>

<button
[matMenuTriggerFor]="languageMenu"
matTooltip="{{ 'LANGUAGE' | translate }}"
class="spacing nav-icon-buttons" color="basic" mat-button>
<mat-icon class="large-icon">translate</mat-icon>
<div class="text-under faint-text">{{ language.getName()}}</div>
</button>

<button
*ngIf="!isLoggedIn"
(click)="onAccountButtonClicked()"
class="spacing nav-icon-buttons" color="basic"
matTooltip="{{ 'LOGIN' | translate }}" mat-button>
<mat-icon class="large-icon">account_circle</mat-icon>
<div class="text-under faint-text">{{ 'SIGN_IN' | translate }}</div>
</button>

<button
*ngIf="isLoggedIn"
[matMenuTriggerFor]="profileMenu"
class="spacing nav-icon-buttons" color="basic"
matTooltip="{{ 'PROFILE' | translate}}" mat-button>
<mat-icon class="large-icon">account_circle</mat-icon>
<div class="text-under faint-text"> {{ this.userAuth.id }} </div>
</button>

<ng-container *ngIf="searchType$ | async as searchType">
<ng-container *ngIf="searchType !== searchTypes.DISPLACEMENT">
<button
[matMenuTriggerFor]="onDemandQueue"
class="spacing nav-icon-buttons" color="basic"
matTooltip="{{ 'ON_DEMAND_QUEUE' | translate }}"
mat-button>
<mat-icon
class="large-icon"
aria-hidden="false"
svgIcon="hyp3"
[matBadge]="queuedCustomProducts.length"
[matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
matBadgePosition="above after"
matBadgeOverlap="true"
matBadgeSize="small">
</mat-icon>
<div class="text-under faint-text">{{ 'ON_DEMAND' | translate }}</div>
</button>

<mat-menu #onDemandQueue="matMenu">
<button
(click)="onOpenProcessingQueue()"
mat-menu-item>{{ 'ON_DEMAND_QUEUE' | translate }}</button>

<button mat-menu-item
(click) = "onSetSearchTypeOnDemand()"
[disabled]="!isLoggedIn">{{ 'SUBMITTED_PRODUCTS' | translate }}
</button>

<button mat-menu-item (click)="onOpenOnDemandDocs()">
{{ 'ON_DEMAND_HY_P3_DOCS' | translate }}
</button>
</mat-menu>
<button
(click)="onOpenDownloadQueue()"
class="spacing nav-icon-buttons"
color="basic"
matTooltip="{{ 'DOWNLOADS' | translate }}" mat-button>

<mat-icon
class="large-icon"
aria-hidden="false"
[matBadge]="queuedProducts.length"
[matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
matBadgePosition="above after"
matBadgeOverlap="true"
matBadgeSize="small">
shopping_cart
</mat-icon>
<div class="text-under faint-text">{{ 'DOWNLOADS' | translate }}</div>
</button>
</ng-container>

<ng-container *ngIf="searchType === searchTypes.DISPLACEMENT">
<button
class="spacing nav-icon-buttons" color="basic" mat-button>
<mat-icon class="large-icon">
description
</mat-icon>
<div class="text-under faint-text">{{ language.getName()}}</div>
</button>
</ng-container>

<button
[matMenuTriggerFor]="helpMenu"
matTooltip="{{ 'HELP_AND_INFORMATION' | translate }}"
class="spacing nav-icon-buttons" color="basic" mat-button>
<mat-icon class="large-icon">help_outline</mat-icon>
<div class="text-under faint-text">{{ 'HELP' | translate }}</div>
</button>

<button
[matMenuTriggerFor]="languageMenu"
matTooltip="{{ 'LANGUAGE' | translate }}"
class="spacing nav-icon-buttons" color="basic" mat-button>
<mat-icon class="large-icon">translate</mat-icon>
<div class="text-under faint-text">{{ language.getName()}}</div>
</button>

<button
*ngIf="!isLoggedIn"
(click)="onAccountButtonClicked()"
class="spacing nav-icon-buttons" color="basic"
matTooltip="{{ 'LOGIN' | translate }}" mat-button>
<mat-icon class="large-icon">account_circle</mat-icon>
<div class="text-under faint-text">{{ 'SIGN_IN' | translate }}</div>
</button>

<button
*ngIf="isLoggedIn"
[matMenuTriggerFor]="profileMenu"
class="spacing nav-icon-buttons" color="basic"
matTooltip="{{ 'PROFILE' | translate}}" mat-button>
<mat-icon class="large-icon">account_circle</mat-icon>
<div class="text-under faint-text"> {{ this.userAuth.id }} </div>
</button>
</ng-container>
</ng-container>

<ng-container *ngIf="breakpoint === breakpoints.MOBILE">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
<div #tsChartWrapper class="chart-wrapper" (resized)="onResized()">
<div *ngIf="hoveredData" class="chart-details">
Series: {{hoveredData?.seriesNumber}},&nbsp;&nbsp;{{tooltipDateFormat(hoveredDate)}},&nbsp;&nbsp;{{hoveredData?.short_wavelength_displacement.toFixed(2)}} meters<br>
Best Fit: y = ax + b
</div>
<div #timeseriesChart id="timeseriesChart" [contextMenuTriggerFor]="menu" [contextMenuTriggerData]="{'tooltipData': hoveredData}">
</div>
<app-chart-modal class="ts-chart-config-button" (resetReferenceEvent)="resetBasePoint()"></app-chart-modal>
Expand All @@ -16,4 +20,4 @@

</ng-template>
</mat-menu>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@
width: 100%;
}

.chart-details {
position: absolute;
margin-top: 15px;
margin-left: 70px;
padding: 5px;
color: #65665c;
font-size: 14px;
font-style: italic;
background-color: #f5f5f5;
}

::ng-deep .timeseries-base {
@include themify($themes) {
fill: themed('blue-link');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
private thing: d3.Selection<SVGGElement, {}, HTMLElement, any>
private hoveredElement;
public hoveredData;
public hoveredDate;
private data: any;
private lines;
private points;
Expand Down Expand Up @@ -418,15 +419,16 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
.on('mouseover', function (_event: any, p: TimeSeriesData) {
self.hoveredElement = this;
self.hoveredData = p;
const date = new Date(p.date);
self.hoveredDate = new Date(p.date);
toolTip.interrupt();
toolTip
.style('opacity', .9);
toolTip.html(`<div style="text-align: left">${self.tooltipDateFormat(date)}, ${p.short_wavelength_displacement.toFixed(2)} meters<br><b>Series ${p.seriesNumber}</b></div>`);
// toolTip.html(`<div style="text-align: left">${self.tooltipDateFormat(self.hoveredDate)}, ${p.short_wavelength_displacement.toFixed(2)} meters<br><b>Series ${p.seriesNumber}</b></div>`);
self.updateTooltip();
})
.on('mouseleave', function (_) {
self.hoveredData = null;
self.hoveredDate = null;
toolTip.transition()
.duration(500)
.style('opacity', 0);
Expand Down Expand Up @@ -556,7 +558,8 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
this.drawChart();
}

private tooltipDateFormat(date) {
public tooltipDateFormat(_date) {
if (!_date) { return; }
function join(t, a, s) {
function format(m) {
const f = new Intl.DateTimeFormat('en', m);
Expand All @@ -566,7 +569,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
}

const dateFormat = [{ month: 'short' }, { day: 'numeric' }, { year: 'numeric' }];
return join(date, dateFormat, ' ');
return join(_date, dateFormat, ' ');
}

public resetBasePoint() {
Expand All @@ -578,4 +581,5 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
this.subs.unsubscribe();
}

protected readonly Date = Date;
}

0 comments on commit 767e000

Please sign in to comment.