ghostfolio/apps/client/src/app/pages/public/public-page.html

<div class="container">
  <div class="row">
    <div class="col">
      <h1 class="h4 mb-3 text-center" i18n>
        Hello, {{ publicPortfolioDetails?.alias ?? 'someone' }} has shared a
        <strong>Portfolio</strong> with you!
      </h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content>
          <gf-value
            i18n
            size="large"
            [colorizeSign]="true"
            [isPercent]="true"
            [precision]="2"
            [value]="
              publicPortfolioDetails?.performance?.['1d']?.relativeChange ??
              undefined
            "
            >Today</gf-value
          >
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4">
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content>
          <gf-value
            i18n
            size="large"
            [colorizeSign]="true"
            [isPercent]="true"
            [precision]="2"
            [value]="
              publicPortfolioDetails?.performance?.['ytd']?.relativeChange ??
              undefined
            "
            >This year</gf-value
          >
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4">
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content>
          <gf-value
            i18n
            size="large"
            [colorizeSign]="true"
            [isPercent]="true"
            [precision]="2"
            [value]="
              publicPortfolioDetails?.performance?.['max']?.relativeChange ??
              undefined
            "
            >From the beginning</gf-value
          >
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div class="proportion-charts row">
    <div class="col-md-12 allocations-by-symbol">
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" i18n>Holdings</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            class="mx-auto"
            [isInPercent]="true"
            [keys]="['symbol']"
            [positions]="symbols"
            [showLabels]="deviceType !== 'mobile'"
          />
        </mat-card-content>
      </mat-card>
    </div>
    @if (publicPortfolioDetails?.hasDetails) {
      <div class="col-md-4">
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-header class="overflow-hidden w-100">
            <mat-card-title class="text-truncate" i18n
              >Currencies</mat-card-title
            >
          </mat-card-header>
          <mat-card-content>
            <gf-portfolio-proportion-chart
              [isInPercent]="true"
              [keys]="['currency']"
              [maxItems]="10"
              [positions]="positions"
            />
          </mat-card-content>
        </mat-card>
      </div>
    }
    @if (publicPortfolioDetails?.hasDetails) {
      <div class="col-md-4">
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-header class="overflow-hidden w-100">
            <mat-card-title class="text-truncate" i18n>Sectors</mat-card-title>
          </mat-card-header>
          <mat-card-content>
            <gf-portfolio-proportion-chart
              [isInPercent]="true"
              [keys]="['name']"
              [maxItems]="10"
              [positions]="sectors"
            />
          </mat-card-content>
        </mat-card>
      </div>
    }
    @if (publicPortfolioDetails?.hasDetails) {
      <div class="col-md-4">
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-header class="overflow-hidden w-100">
            <mat-card-title class="text-truncate" i18n
              >Continents</mat-card-title
            >
          </mat-card-header>
          <mat-card-content>
            <gf-portfolio-proportion-chart
              [isInPercent]="true"
              [keys]="['name']"
              [positions]="continents"
            />
          </mat-card-content>
        </mat-card>
      </div>
    }
  </div>
  @if (publicPortfolioDetails?.hasDetails) {
    <div class="row world-map-chart">
      <div class="col-lg">
        <mat-card appearance="outlined" class="mb-3">
          <mat-card-header class="overflow-hidden w-100">
            <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
          </mat-card-header>
          <mat-card-content>
            <div class="world-map-chart-container">
              <gf-world-map-chart
                format="{0}%"
                [countries]="countries"
                [isInPercent]="true"
              />
            </div>
            <div class="row">
              <div class="col-xs-12 col-md my-2">
                <gf-value
                  i18n
                  size="large"
                  [isPercent]="true"
                  [value]="markets?.developedMarkets?.value"
                  >Developed Markets</gf-value
                >
              </div>
              <div class="col-xs-12 col-md my-2">
                <gf-value
                  i18n
                  size="large"
                  [isPercent]="true"
                  [value]="markets?.emergingMarkets?.value"
                  >Emerging Markets</gf-value
                >
              </div>
              <div class="col-xs-12 col-md my-2">
                <gf-value
                  i18n
                  size="large"
                  [isPercent]="true"
                  [value]="markets?.otherMarkets?.value"
                  >Other Markets</gf-value
                >
              </div>
              @if (markets?.[UNKNOWN_KEY]?.value > 0) {
                <div class="col-xs-12 col-md my-2">
                  <gf-value
                    i18n
                    size="large"
                    [isPercent]="true"
                    [value]="markets?.[UNKNOWN_KEY]?.value"
                    >No data available</gf-value
                  >
                </div>
              }
            </div>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  }
  <div class="row">
    <div class="col-lg">
      <gf-holdings-table
        [deviceType]="deviceType"
        [hasPermissionToOpenDetails]="false"
        [hasPermissionToShowValues]="false"
        [holdings]="holdings"
        [pageSize]="7"
      />
    </div>
  </div>
  <div class="row my-5">
    <div class="col-md-10 offset-md-1">
      <h2 class="h4 mb-1 text-center" i18n>
        Would you like to <strong>refine</strong> your
        <strong>personal investment strategy</strong>?
      </h2>
      <p class="lead mb-3 text-center" i18n>
        Ghostfolio empowers you to keep track of your wealth.
      </p>
      <div class="py-2 text-center">
        <a color="primary" href="https://ghostfol.io" mat-flat-button>
          <ng-container i18n>Get Started</ng-container>
        </a>
      </div>
    </div>
  </div>
</div>