open-vault/ui/app/templates/components/clients/attribution.hbs

<div class="chart-wrapper single-chart-grid" data-test-clients-attribution>
  <div class="chart-header has-header-link has-bottom-margin-m">
    <div class="header-left">
      <h2 class="chart-title">Attribution</h2>
      <p class="chart-description" data-test-attribution-description>{{this.chartText.description}}</p>
    </div>
    <div class="header-right">
      {{#if @totalClientsData}}
        <button
          data-test-attribution-export-button
          type="button"
          class="button is-secondary"
          {{on "click" (fn (mut this.showCSVDownloadModal) true)}}
        >
          Export attribution data
        </button>
      {{/if}}
    </div>
  </div>
  {{#if this.barChartTotalClients}}
    <div class="chart-container-wide">
      <Clients::HorizontalBarChart
        @dataset={{this.barChartTotalClients}}
        @chartLegend={{@chartLegend}}
        @totalUsageCounts={{@totalUsageCounts}}
      />
    </div>
    <div class="chart-subTitle">
      <p class="chart-subtext" data-test-attribution-subtext>{{this.chartText.totalCopy}}</p>
    </div>

    <div class="data-details-top" data-test-top-attribution>
      <h3 class="data-details">Top {{this.attributionBreakdown}}</h3>
      <p class="data-details">{{this.topClientCounts.label}}</p>
    </div>

    <div class="data-details-bottom" data-test-top-counts>
      <h3 class="data-details">Clients in {{this.attributionBreakdown}}</h3>
      <p class="data-details">{{format-number this.topClientCounts.clients}}</p>
    </div>

    <div class="legend-center">
      <span class="light-dot"></span><span class="legend-label">{{capitalize @chartLegend.0.label}}</span>
      <span class="dark-dot"></span><span class="legend-label">{{capitalize @chartLegend.1.label}}</span>
    </div>
  {{else}}
    <div class="chart-empty-state">
      <EmptyState @icon="skip" @title="No data found" @bottomBorder={{true}} />
    </div>
  {{/if}}
  <div class="timestamp" data-test-attribution-timestamp>
    {{#if @timestamp}}
      Updated
      {{date-format @timestamp "MMM d yyyy, h:mm:ss aaa"}}
    {{/if}}
  </div>
</div>

{{! MODAL FOR CSV DOWNLOAD }}
<Modal
  @title="Export attribution data"
  @type="info"
  @isActive={{this.showCSVDownloadModal}}
  @showCloseButton={{true}}
  @onClose={{action (mut this.showCSVDownloadModal) false}}
>
  <section class="modal-card-body">
    <p class="has-bottom-margin-s">
      This export will include the namespace path, authentication method path, and the associated clients, unique entities,
      and non-entity tokens for the below date range.
    </p>
    <p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if @endTimeDisplay " RANGE"}}</p>
    <p class="has-bottom-margin-s">{{@startTimeDisplay}} {{if @endTimeDisplay "-"}} {{@endTimeDisplay}}</p>
  </section>
  <footer class="modal-card-foot modal-card-foot-outlined">
    <button
      type="button"
      class="button is-primary"
      {{on "click" (fn this.exportChartData this.getCsvFileName this.getCsvData)}}
    >
      Export
    </button>
    <button type="button" class="button is-secondary" onclick={{action (mut this.showCSVDownloadModal) false}}>
      Cancel
    </button>
  </footer>
</Modal>