@if (chartOnly) {
  <ng-container *ngTemplateOutlet="pieChart"></ng-container>
} @else {
<table>
  <tbody>
    <tr>
      <td class="td-width field-label" [class]="chartPositionLeft ? 'chart-left' : ''" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
      <td class="pie-chart" rowspan="2" *ngIf="chartPositionLeft">
        <ng-container *ngTemplateOutlet="pieChart"></ng-container>
      </td>
      <td class="field-value" [class]="chartPositionLeft ? 'chart-left' : ''">
        <div class="effective-fee-container">
          @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
            <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
          } @else {
            <app-fee-rate [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
          }
        </div>
      </td>
      <td class="pie-chart" rowspan="2" *ngIf="!chartPositionLeft">
        <ng-container *ngTemplateOutlet="pieChart"></ng-container>
      </td>
    </tr>
    <tr>
      <td class="td-width field-label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
      <td class="field-value" *ngIf="acceleratedByPercentage">
        <ng-container i18n="accelerator.x-of-hash-rate">{{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span></ng-container>
      </td>
    </tr>
  </tbody>
</table>
}

<ng-template #pieChart>
  <div class="chart-container">
    @if (chartOptions && miningStats) {
      <div
        echarts
        *browserOnly
        class="chart"
        [initOpts]="chartInitOptions"
        [options]="chartOptions"
        style="height: 72px; width: 72px;"
        (chartInit)="onChartInit($event)"
      ></div>
    } @else {
      <div class="chart-loading">
        <div class="spinner-border text-light"></div>
      </div>
    }
  </div>
</ng-template>