126 lines
4.9 KiB
Handlebars
126 lines
4.9 KiB
Handlebars
{{! 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> |