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

{{! only show side-by-side horizontal bar charts if data is from a single, historical month }}
<div
  class={{concat "chart-wrapper" (if @isHistoricalMonth " dual-chart-grid" " 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 this.hasCsvData}}
        <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}}
    {{#if @isHistoricalMonth}}
      <div class="chart-container-left" data-test-chart-container="new-clients">
        <h2 class="chart-title">New clients</h2>
        <p class="chart-description">{{this.chartText.newCopy}}</p>
        <Clients::HorizontalBarChart
          @dataset={{this.barChartNewClients}}
          @chartLegend={{@chartLegend}}
          @totalCounts={{@newUsageCounts}}
          @noDataMessage="There are no new clients for this namespace during this time period."
        />
      </div>

      <div class="chart-container-right" data-test-chart-container="total-clients">
        <h2 class="chart-title">Total clients</h2>
        <p class="chart-description">{{this.chartText.totalCopy}}</p>
        <Clients::HorizontalBarChart
          @dataset={{this.barChartTotalClients}}
          @chartLegend={{@chartLegend}}
          @totalCounts={{@totalUsageCounts}}
        />
      </div>
    {{else}}
      <div
        class={{concat (unless this.barChartTotalClients "chart-empty-state ") "chart-container-wide"}}
        data-test-chart-container="single-chart"
      >
        <Clients::HorizontalBarChart
          @dataset={{this.barChartTotalClients}}
          @chartLegend={{@chartLegend}}
          @totalCounts={{@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-attribution-clients>
        <h3 class="data-details">Clients in {{this.attributionBreakdown}}</h3>
        <p class="data-details">{{format-number this.topClientCounts.clients}}</p>
      </div>
    {{/if}}
    <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 @responseTimestamp}}
      Updated
      {{date-format @responseTimestamp "MMM d yyyy, h:mm:ss aaa" withTimeZone=true}}
    {{/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 total, entity, and
      non-entity clients for the below
      {{if this.formattedEndDate "date range" "month"}}.
    </p>
    <p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if this.formattedEndDate " RANGE"}}</p>
    <p class="has-bottom-margin-s">{{this.formattedStartDate}} {{if this.formattedEndDate "-"}} {{this.formattedEndDate}}</p>
  </section>
  <footer class="modal-card-foot modal-card-foot-outlined">
    <button type="button" class="button is-primary" {{on "click" (fn this.exportChartData this.formattedCsvFileName)}}>
      Export
    </button>
    <button type="button" class="button is-secondary" onclick={{action (mut this.showCSVDownloadModal) false}}>
      Cancel
    </button>
    {{#if @upgradeExplanation}}
      <div class="has-text-grey is-size-8">
        <AlertInline @type="warning" @isMarginless={{true}}>
          Your data contains an upgrade.
          <DocLink
            @path="/vault/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
          >
            Learn more here.
          </DocLink>
        </AlertInline>
        <p class="has-left-padding-l">{{@upgradeExplanation}}</p>
      </div>
    {{/if}}
  </footer>
</Modal>