TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Updated attribution dashboard widget design

Browse Source 
refs https://github.com/TryGhost/Team/issues/1941

Updated attribution dashboard widget design

refs https://github.com/TryGhost/Team/issues/1941
This commit is contained in:
Djordje Vlaisavljevic 2022-09-22 20:27:03 +02:00 committed by Rishabh Garg
parent 7c23e721f1
commit 0be2191726
6 changed files with 52 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/admin/app/components/dashboard/charts/attribution.hbs
View File

@ -4,8 +4,8 @@
<div style="display: grid;grid-template-columns: 1fr 2fr;grid-gap: 24px;">
<div>
<h3 class="gh-dashboard-metric-label">Attribution</h3>
<div style="display: flex;justify-content: center;align-items: center;">
<div style="max-width: 200px; max-height: 200px;">
<div style="display:flex;justify-content:center;align-items: center;height:100%;">
<div style="max-width: 200px; position: relative;">
<MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
</div>
<div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">

2
ghost/admin/app/components/member-attribution/source-attribution-chart.hbs
View File

@ -2,5 +2,5 @@
@type='doughnut'
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{400}}
@height={{300}}
/>

3
ghost/admin/app/components/member-attribution/source-attribution-chart.js
View File

@ -41,7 +41,8 @@ export default class SourceAttributionChart extends Component {
},
tooltips: {
enabled: false
}
},
aspectRatio: 1
};
}

50
ghost/admin/app/components/member-attribution/source-attribution-table.hbs
View File

@ -7,36 +7,38 @@
{{/if}}
</div>
<div class="gh-dashboard-list-body" style="max-height: 230px; overflow-y: clip; justify-content: flex-start;">
{{#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.signups}}
{{format-number sourceData.signups}}
{{else}}
&mdash;
{{/if}}
</span>
</div>
{{#if this.membersUtils.paidMembersEnabled}}
<div class="gh-dashboard-attribution-list-scrollable">
{{#each this.sources as |sourceData|}}
<div class="gh-dashboard-list-item">
<div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-source">
<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.paidConversions}}
{{format-number sourceData.paidConversions}}
{{#if sourceData.signups}}
{{format-number sourceData.signups}}
{{else}}
&mdash;
{{/if}}
</span>
</div>
{{/if}}
</div>
{{else}}
<div class="gh-dashboard-list-empty">
<p>No sources.</p>
</div>
{{/each}}
{{#if this.membersUtils.paidMembersEnabled}}
<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>
{{/if}}
</div>
{{else}}
<div class="gh-dashboard-list-empty">
<p>No sources.</p>
</div>
{{/each}}
</div>
</div>
</div>

27
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -156,6 +156,15 @@ Dashboard Layout */
background: transparent;
}
.gh-dashboard-minicharts-attribution {
flex: 1;
display: flex;
flex-direction: row;
position: relative;
align-items: stretch;
background: transparent;
}
.gh-dashboard-minichart {
flex: 1;
border-left: 1px solid var(--whitegrey);
@ -1003,12 +1012,12 @@ Dashboard Zero */
/* ---------------------------------
Dashboard Attribution */
.gh-dashboard-list-item-source {
.gh-dashboard-list-item-sub-source {
padding-left: 20px;
position: relative;
}
.gh-dashboard-list-item-source::after {
.gh-dashboard-list-item-sub-source::after {
content: "";
width: 9px;
height: 9px;
@ -1020,23 +1029,23 @@ Dashboard Attribution */
background: #E6E9EB;
}
.gh-dashboard-list-item:first-child .gh-dashboard-list-item-source::after {
.gh-dashboard-list-item:first-child .gh-dashboard-list-item-sub-source::after {
background: #8e42ff;
}
.gh-dashboard-list-item:nth-child(2) .gh-dashboard-list-item-source::after {
.gh-dashboard-list-item:nth-child(2) .gh-dashboard-list-item-sub-source::after {
background: #BB4AE5;
}
.gh-dashboard-list-item:nth-child(3) .gh-dashboard-list-item-source::after {
.gh-dashboard-list-item:nth-child(3) .gh-dashboard-list-item-sub-source::after {
background: #DD97C9;
}
.gh-dashboard-list-item:nth-child(4) .gh-dashboard-list-item-source::after {
.gh-dashboard-list-item:nth-child(4) .gh-dashboard-list-item-sub-source::after {
background: #E19A98;
}
.gh-dashboard-list-item:nth-child(5) .gh-dashboard-list-item-source::after {
.gh-dashboard-list-item:nth-child(5) .gh-dashboard-list-item-sub-source::after {
background: #F5C9C2;
}
@ -2187,6 +2196,10 @@ Dashboard Tooltips */
flex-direction: column;
}
.gh-dashboard-minicharts-attribution {
flex-direction: column;
}
.gh-dashboard-minichart {
padding: 16px 0;
border-left: 0 none;

2
ghost/admin/app/templates/dashboard.hbs
View File

@ -25,7 +25,7 @@
{{#if this.hasPaidTiers}}
{{#if (feature 'sourceAttribution')}}
<section class="gh-dashboard-section">
<article class="gh-dashboard-box" style="display:flex; flex:1;flex-direction:row;">
<article class="gh-dashboard-box gh-dashboard-minicharts-attribution">
<Dashboard::Charts::PaidBreakdown />
<Dashboard::Charts::PaidMix />
</article>