Ghost/ghost/admin/app/components/dashboard/charts/attribution.hbs
Djordje Vlaisavljevic 99f119a1f4
Source attribution design (#15431)
- Updated subscription box design
- Added Source attribution widget to the dashboard

Co-authored-by: Rishabh <zrishabhgarg@gmail.com>
2022-09-19 10:48:24 +02:00

60 lines
2.8 KiB
Handlebars

<section class="gh-dashboard-section gh-dashboard-recents">
<article class="gh-dashboard-box" {{did-insert this.loadData}}>
<h3 class="gh-dashboard-metric-label">Source attribution</h3>
<div style="display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 64px;
">
<div class="gh-dashboard-recents-posts gh-dashboard-list">
<div class="gh-dashboard-list-header">
<div class="gh-dashboard-list-title">Sources</div>
<div class="gh-dashboard-list-title">Free Signups</div>
<div class="gh-dashboard-list-title">Paid Conversions</div>
</div>
<div class="gh-dashboard-list-body">
{{#each this.sources as |sourceData|}}
<div class="gh-dashboard-list-item">
<div class="gh-dashboard-list-item-sub">
<span class="gh-dashboard-list-text">{{sourceData.source}}</span>
</div>
<div class="gh-dashboard-list-item-sub">
<span class="gh-dashboard-metric-minivalue">
{{#if sourceData.freeSignups}}
{{format-number sourceData.freeSignups}}
{{else}}
&mdash;
{{/if}}
</span>
</div>
<div class="gh-dashboard-list-item-sub">
<span class="gh-dashboard-metric-minivalue">
{{#if sourceData.paidConversions}}
{{format-number sourceData.paidConversions}}
{{else}}
&mdash;
{{/if}}
</span>
</div>
</div>
{{else}}
<div class="gh-dashboard-list-empty">
<p>No sources.</p>
</div>
{{/each}}
</div>
</div>
<div style="border-left: 1px solid #eceef0; padding-left: 48px;display: flex;justify-content: center;align-items: center;">
<div style="max-width: 200px;">
<EmberChart
@type='doughnut'
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{400}}
/>
</div>
</div>
</div>
</article>
</section>