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 style="display: grid;grid-template-columns: 1fr 2fr;grid-gap: 24px;">
<div> <div>
<h3 class="gh-dashboard-metric-label">Attribution</h3> <h3 class="gh-dashboard-metric-label">Attribution</h3>
<div style="display: flex;justify-content: center;align-items: center;"> <div style="display:flex;justify-content:center;align-items: center;height:100%;">
<div style="max-width: 200px; max-height: 200px;"> <div style="max-width: 200px; position: relative;">
<MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} /> <MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
</div> </div>
<div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip"> <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' @type='doughnut'
@data={{this.chartData}} @data={{this.chartData}}
@options={{this.chartOptions}} @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: { tooltips: {
enabled: false enabled: false
} },
aspectRatio: 1
}; };
} }

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

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

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

@ -156,6 +156,15 @@ Dashboard Layout */
background: transparent; background: transparent;
} }
.gh-dashboard-minicharts-attribution {
flex: 1;
display: flex;
flex-direction: row;
position: relative;
align-items: stretch;
background: transparent;
}
.gh-dashboard-minichart { .gh-dashboard-minichart {
flex: 1; flex: 1;
border-left: 1px solid var(--whitegrey); border-left: 1px solid var(--whitegrey);
@ -1003,12 +1012,12 @@ Dashboard Zero */
/* --------------------------------- /* ---------------------------------
Dashboard Attribution */ Dashboard Attribution */
.gh-dashboard-list-item-source { .gh-dashboard-list-item-sub-source {
padding-left: 20px; padding-left: 20px;
position: relative; position: relative;
} }
.gh-dashboard-list-item-source::after { .gh-dashboard-list-item-sub-source::after {
content: ""; content: "";
width: 9px; width: 9px;
height: 9px; height: 9px;
@ -1020,23 +1029,23 @@ Dashboard Attribution */
background: #E6E9EB; 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; 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; 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; 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; 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; background: #F5C9C2;
} }
@ -2187,6 +2196,10 @@ Dashboard Tooltips */
flex-direction: column; flex-direction: column;
} }
.gh-dashboard-minicharts-attribution {
flex-direction: column;
}
.gh-dashboard-minichart { .gh-dashboard-minichart {
padding: 16px 0; padding: 16px 0;
border-left: 0 none; border-left: 0 none;

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

@ -25,7 +25,7 @@
{{#if this.hasPaidTiers}} {{#if this.hasPaidTiers}}
{{#if (feature 'sourceAttribution')}} {{#if (feature 'sourceAttribution')}}
<section class="gh-dashboard-section"> <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::PaidBreakdown />
<Dashboard::Charts::PaidMix /> <Dashboard::Charts::PaidMix />
</article> </article>