ghostfolio/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

<gf-dialog-header
  mat-dialog-title
  position="center"
  [deviceType]="data.deviceType"
  [title]="SymbolProfile?.name ?? SymbolProfile?.symbol"
  (closeButtonClicked)="onClose()"
></gf-dialog-header>

<div class="flex-grow-1" mat-dialog-content>
  <div class="container p-0">
    <div class="row">
      <div class="col-12 d-flex justify-content-center mb-3">
        <gf-value
          size="large"
          [currency]="data.baseCurrency"
          [locale]="data.locale"
          [value]="value"
        ></gf-value>
      </div>
    </div>

    <gf-line-chart
      class="mb-4"
      benchmarkLabel="Average Unit Price"
      [benchmarkDataItems]="benchmarkDataItems"
      [historicalDataItems]="historicalDataItems"
      [showGradient]="true"
      [showXAxis]="true"
      [showYAxis]="true"
      [symbol]="data.symbol"
    ></gf-line-chart>

    <div class="row">
      <div class="col-6 mb-3">
        <gf-value
          label="Change"
          size="medium"
          [colorizeSign]="true"
          [currency]="data.baseCurrency"
          [locale]="data.locale"
          [value]="netPerformance"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Performance"
          size="medium"
          [colorizeSign]="true"
          [isPercent]="true"
          [locale]="data.locale"
          [value]="netPerformancePercent"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Average Unit Price"
          size="medium"
          [currency]="SymbolProfile?.currency"
          [locale]="data.locale"
          [value]="averagePrice"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Market Price"
          size="medium"
          [currency]="SymbolProfile?.currency"
          [locale]="data.locale"
          [value]="marketPrice"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Minimum Price"
          size="medium"
          [currency]="SymbolProfile?.currency"
          [locale]="data.locale"
          [ngClass]="{ 'text-danger': minPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
          [value]="minPrice"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Maximum Price"
          size="medium"
          [currency]="SymbolProfile?.currency"
          [locale]="data.locale"
          [ngClass]="{ 'text-success': maxPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
          [value]="maxPrice"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Quantity"
          size="medium"
          [locale]="data.locale"
          [precision]="quantityPrecision"
          [value]="quantity"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Investment"
          size="medium"
          [currency]="data.baseCurrency"
          [locale]="data.locale"
          [value]="investment"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="First Buy Date"
          size="medium"
          [value]="firstBuyDate"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          size="medium"
          [label]="transactionCount === 1 ? 'Transaction' : 'Transactions'"
          [locale]="data.locale"
          [value]="transactionCount"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Asset Class"
          size="medium"
          [hidden]="!SymbolProfile?.assetClass"
          [value]="SymbolProfile?.assetClass"
        ></gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value
          label="Asset Sub Class"
          size="medium"
          [hidden]="!SymbolProfile?.assetSubClass"
          [value]="SymbolProfile?.assetSubClass"
        ></gf-value>
      </div>
      <ng-container
        *ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
      >
        <ng-container
          *ngIf="SymbolProfile?.countries?.length === 1 && SymbolProfile?.sectors?.length === 1; else charts"
        >
          <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
            <gf-value
              label="Sector"
              size="medium"
              [locale]="data.locale"
              [value]="SymbolProfile.sectors[0].name"
            ></gf-value>
          </div>
          <div
            *ngIf="SymbolProfile?.countries?.length === 1"
            class="col-6 mb-3"
          >
            <gf-value
              label="Country"
              size="medium"
              [locale]="data.locale"
              [value]="SymbolProfile.countries[0].name"
            ></gf-value>
          </div>
        </ng-container>
        <ng-template #charts>
          <div class="col-md-6 mb-3">
            <div class="h4" i18n>Sectors</div>
            <gf-portfolio-proportion-chart
              [baseCurrency]="user?.settings?.baseCurrency"
              [isInPercent]="true"
              [keys]="['name']"
              [locale]="user?.settings?.locale"
              [maxItems]="10"
              [positions]="sectors"
            ></gf-portfolio-proportion-chart>
          </div>
          <div class="col-md-6 mb-3">
            <div class="h4" i18n>Countries</div>
            <gf-portfolio-proportion-chart
              [baseCurrency]="user?.settings?.baseCurrency"
              [isInPercent]="true"
              [keys]="['name']"
              [locale]="user?.settings?.locale"
              [maxItems]="10"
              [positions]="countries"
            ></gf-portfolio-proportion-chart>
          </div>
        </ng-template>
      </ng-container>
    </div>
  </div>

  <gf-activities-table
    *ngIf="orders?.length > 0"
    [activities]="orders"
    [baseCurrency]="data.baseCurrency"
    [deviceType]="data.deviceType"
    [hasPermissionToCreateActivity]="false"
    [hasPermissionToExportActivities]="!hasImpersonationId"
    [hasPermissionToFilter]="false"
    [hasPermissionToImportActivities]="false"
    [hasPermissionToOpenDetails]="false"
    [locale]="data.locale"
    [showActions]="false"
    [showSymbolColumn]="false"
    (export)="onExport()"
  ></gf-activities-table>
</div>

<gf-dialog-footer
  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
></gf-dialog-footer>