f6dac0158f
* distinguish between single month and range attribution views, add export csv modal and action * adds activity handler for mirage testing with client count work against new API * adds class for grey subtitle in modal * akes data detail titles dynamic * fix passing of glyph type * clarify mirage responses * cleanup todos
83 lines
3.2 KiB
Handlebars
83 lines
3.2 KiB
Handlebars
<div class={{concat "chart-wrapper" (if @isDateRange " single-chart-grid") (unless @isDateRange " dual-chart-grid")}}>
|
|
<div class="chart-header has-export has-bottom-margin-m">
|
|
<div class="header-left">
|
|
<h2 class="chart-title">Attribution</h2>
|
|
<p class="chart-description">{{this.chartText.description}}</p>
|
|
</div>
|
|
<div class="header-right">
|
|
{{#if @totalClientsData}}
|
|
<button type="button" class="button is-secondary" {{on "click" (fn (mut this.showCSVDownloadModal) true)}}>
|
|
Export attribution data
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
|
|
{{! show single chart if data is from a range, show two charts if from a single month}}
|
|
{{#if (eq @isDateRange true)}}
|
|
<div class="chart-container-wide">
|
|
<Clients::HorizontalBarChart @dataset={{@totalClientsData}} @chartLegend={{@chartLegend}} />
|
|
</div>
|
|
|
|
<div class="chart-subTitle">
|
|
<p class="chart-subtext">{{this.chartText.totalCopy}}</p>
|
|
</div>
|
|
|
|
<div class="data-details-top">
|
|
<h3 class="data-details">Top {{lowercase this.clientCountBreakdown}}</h3>
|
|
<p class="data-details">ns/1</p>
|
|
</div>
|
|
|
|
<div class="data-details-bottom">
|
|
<h3 class="data-details">Clients in {{lowercase this.clientCountBreakdown}}</h3>
|
|
<p class="data-details">1,512</p>
|
|
</div>
|
|
{{else if (and @newClientsData (not @isDateRange))}}
|
|
<div class="chart-container-left">
|
|
<h2 class="chart-title">New clients</h2>
|
|
<p class="chart-description">{{this.chartText.newCopy}}</p>
|
|
<Clients::HorizontalBarChart @dataset={{@newClientsData}} @chartLegend={{@chartLegend}} />
|
|
</div>
|
|
|
|
<div class="chart-container-right">
|
|
<h2 class="chart-title">Total clients</h2>
|
|
<p class="chart-description">{{this.chartText.totalCopy}}</p>
|
|
<Clients::HorizontalBarChart @dataset={{@totalClientsData}} @chartLegend={{@chartLegend}} />
|
|
</div>
|
|
{{else}}
|
|
<EmptyState />
|
|
{{/if}}
|
|
|
|
<div class="timestamp">
|
|
Updated Nov 15 2021, 4:07:32 pm
|
|
</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>
|
|
</div>
|
|
|
|
{{! MODAL FOR CSV DOWNLOAD BUTTON }}
|
|
<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 RANGE</p>
|
|
<p class="has-bottom-margin-s">{{@activityDateRange}}</p>
|
|
</section>
|
|
<footer class="modal-card-foot modal-card-foot-outlined">
|
|
<DownloadCsv @label="Export" @csvData={{this.getCsvData}} @fileName={{this.getCsvFileName}} />
|
|
<button type="button" class="button is-secondary" onclick={{action (mut this.showCSVDownloadModal) false}}>
|
|
Cancel
|
|
</button>
|
|
</footer>
|
|
</Modal> |