mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
More layout and chart adjustments to better improve the design
refs: https://github.com/TryGhost/Team/issues/1462 - added back in the main title to the top chart - brought back the main metric background and centered buttons - adjusted lots of spacing - made the chart ticks for main graph dynamic - improved the look of the breakdown graph
This commit is contained in:
James Morris
parent
3167679b03
commit
df30298651
@ -1,5 +1,10 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-anchor" {{did-insert this.loadCharts}}>
|
||||
<article class="gh-dashboard5-box">
|
||||
{{#if this.hasPaidTiers}}
|
||||
<div class="gh-dashboard5-title">
|
||||
<h4>{{this.chartTitle}}</h4>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="gh-dashboard5-hero {{unless this.hasPaidTiers 'is-solo'}}">
|
||||
{{#unless this.hasPaidTiers}}
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@ -29,6 +34,10 @@
|
||||
@height={{if this.hasPaidTiers this.chartHeight this.chartHeightSmall}} />
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-chart-ticks">
|
||||
<span id="gh-dashboard5-anchor-date-start"> </span>
|
||||
<span id="gh-dashboard5-anchor-date-end"> </span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
@ -38,24 +47,27 @@
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label={{gh-pluralize this.totalMembers "Total member" without-count=true}}
|
||||
@value={{format-number this.totalMembers}}
|
||||
@trends={{this.hasTrends}}
|
||||
@percentage={{this.totalMembersTrend}}
|
||||
{{!-- @trends={{this.hasTrends}} --}}
|
||||
{{!-- @percentage={{this.totalMembersTrend}} --}}
|
||||
@center={{true}}
|
||||
@large={{true}} />
|
||||
</button>
|
||||
<button class="gh-dashboard5-stats-button {{if this.chartShowingPaid 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "paid-total")}}>
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label={{gh-pluralize this.paidMembers "Total paid member" without-count=true}}
|
||||
@value={{format-number this.paidMembers}}
|
||||
@trends={{this.hasTrends}}
|
||||
@percentage={{this.paidMembersTrend}}
|
||||
{{!-- @trends={{this.hasTrends}} --}}
|
||||
{{!-- @percentage={{this.paidMembersTrend}} --}}
|
||||
@center={{true}}
|
||||
@large={{true}} />
|
||||
</button>
|
||||
<button class="gh-dashboard5-stats-button {{if this.chartShowingMrr 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "mrr")}}>
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="MRR"
|
||||
@label="Monthly Revenue (MRR)"
|
||||
@value="${{gh-price-amount this.currentMRR}}"
|
||||
@trends={{this.hasTrends}}
|
||||
@percentage={{this.mrrTrend}}
|
||||
{{!-- @trends={{this.hasTrends}} --}}
|
||||
{{!-- @percentage={{this.mrrTrend}} --}}
|
||||
@center={{true}}
|
||||
@large={{true}} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@ import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const DATE_FORMAT = 'D MMM YYYY';
|
||||
const DATE_FORMAT = 'D MMM';
|
||||
|
||||
const DAYS_OPTIONS = [{
|
||||
name: '7 Days',
|
||||
@ -150,6 +150,15 @@ export default class Anchor extends Component {
|
||||
return this.dashboardStats.siteStatus?.hasPaidTiers;
|
||||
}
|
||||
|
||||
get chartTitle() {
|
||||
if (this.chartDisplay === 'paid-total' || this.chartDisplay === 'paid-breakdown') {
|
||||
return 'Total paid members';
|
||||
} else if (this.chartDisplay === 'mrr') {
|
||||
return 'Monthly revenue (MRR)';
|
||||
}
|
||||
return 'Total members';
|
||||
}
|
||||
|
||||
get chartType() {
|
||||
if (this.chartDisplay === 'paid-breakdown') {
|
||||
return 'bar';
|
||||
@ -170,7 +179,7 @@ export default class Anchor extends Component {
|
||||
labels = stats.map(stat => stat.date);
|
||||
newData = stats.map(stat => stat.paidSubscribed);
|
||||
canceledData = stats.map(stat => -stat.paidCanceled);
|
||||
|
||||
|
||||
return {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
@ -231,16 +240,6 @@ export default class Anchor extends Component {
|
||||
}
|
||||
|
||||
get chartOptions() {
|
||||
let maxNumberOfTicks = 7;
|
||||
|
||||
if (this.selectedDaysOption.value === 30) {
|
||||
maxNumberOfTicks = 15;
|
||||
}
|
||||
|
||||
if (this.selectedDaysOption.value === 90 || this.selectedDaysOption.value === 'all') {
|
||||
maxNumberOfTicks = 20;
|
||||
}
|
||||
|
||||
if (this.chartDisplay === 'paid-breakdown') {
|
||||
return {
|
||||
responsive: true,
|
||||
@ -279,18 +278,18 @@ export default class Anchor extends Component {
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
offset: true,
|
||||
offset: false,
|
||||
gridLines: {
|
||||
drawTicks: false,
|
||||
display: true,
|
||||
drawBorder: false,
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
lineWidth: 0,
|
||||
zeroLineColor: 'rgba(200, 204, 217, 0.75)',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)',
|
||||
zeroLineWidth: 1
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
display: false,
|
||||
maxTicksLimit: 5,
|
||||
fontColor: '#7C8B9A',
|
||||
padding: 8,
|
||||
@ -301,35 +300,25 @@ export default class Anchor extends Component {
|
||||
offset: true,
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
color: 'rgba(200, 204, 217, 0.75)',
|
||||
color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)',
|
||||
borderDash: [4,4],
|
||||
display: true,
|
||||
drawBorder: true,
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
zeroLineWidth: 1,
|
||||
zeroLineColor: 'rgba(200, 204, 217, 0.75)',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)',
|
||||
zeroLineBorderDash: [4,4]
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
padding: 8,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: maxNumberOfTicks
|
||||
},
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
millisecond: 'MMM DD',
|
||||
second: 'MMM DD',
|
||||
minute: 'MMM DD',
|
||||
hour: 'MMM DD',
|
||||
day: 'MMM DD',
|
||||
week: 'MMM DD',
|
||||
month: 'MMM DD',
|
||||
quarter: 'MMM DD',
|
||||
year: 'MMM DD'
|
||||
display: false,
|
||||
callback: function (value, index, values) {
|
||||
if (index === 0) {
|
||||
document.getElementById('gh-dashboard5-anchor-date-start').innerHTML = moment(value).format(DATE_FORMAT);
|
||||
}
|
||||
if (index === values.length - 1) {
|
||||
document.getElementById('gh-dashboard5-anchor-date-end').innerHTML = moment(value).format(DATE_FORMAT);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}]
|
||||
@ -392,12 +381,13 @@ export default class Anchor extends Component {
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
drawTicks: false,
|
||||
display: true,
|
||||
drawBorder: false,
|
||||
color: 'transparent',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)',
|
||||
zeroLineWidth: 1
|
||||
},
|
||||
ticks: {
|
||||
@ -407,46 +397,35 @@ export default class Anchor extends Component {
|
||||
padding: 8,
|
||||
precision: 0,
|
||||
stepSize: 1
|
||||
},
|
||||
display: true
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
align: 'start'
|
||||
},
|
||||
gridLines: {
|
||||
color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)',
|
||||
borderDash: [4,4],
|
||||
display: true,
|
||||
drawBorder: true,
|
||||
drawTicks: false,
|
||||
zeroLineWidth: 1,
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)',
|
||||
zeroLineBorderDash: [4,4]
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
padding: 14,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: maxNumberOfTicks,
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif',
|
||||
fontSize: 11,
|
||||
fontColor: '#ABB4BE'
|
||||
},
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
millisecond: 'MMM DD',
|
||||
second: 'MMM DD',
|
||||
minute: 'MMM DD',
|
||||
hour: 'MMM DD',
|
||||
day: 'MMM DD',
|
||||
week: 'MMM DD',
|
||||
month: 'MMM DD',
|
||||
quarter: 'MMM DD',
|
||||
year: 'MMM DD'
|
||||
display: false,
|
||||
callback: function (value, index, values) {
|
||||
if (index === 0) {
|
||||
document.getElementById('gh-dashboard5-anchor-date-start').innerHTML = moment(value).format(DATE_FORMAT);
|
||||
}
|
||||
if (index === values.length - 1) {
|
||||
document.getElementById('gh-dashboard5-anchor-date-end').innerHTML = moment(value).format(DATE_FORMAT);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
},
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<article class="gh-dashboard5-box">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Email open rate"
|
||||
@value="{{this.currentOpenRate}}%" />
|
||||
@value="{{this.currentOpenRate}}%"
|
||||
/>
|
||||
|
||||
<div class="gh-dashboard5-chart">
|
||||
{{#if this.loading}}
|
||||
|
||||
@ -4,13 +4,15 @@
|
||||
<div class="gh-dashboard5-row">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Newsletter subscribers"
|
||||
@value={{format-number this.dataSubscribers.total}} />
|
||||
@value={{format-number this.dataSubscribers.total}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="gh-dashboard5-row">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Emails sent over last 30 days"
|
||||
@value={{format-number this.dataEmailsSent}} />
|
||||
@value={{format-number this.dataEmailsSent}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -1102,6 +1102,16 @@ kbd {
|
||||
|
||||
|
||||
/* Dashboard v5 */
|
||||
|
||||
.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats {
|
||||
background: transparent;
|
||||
border-top-color: #2b2d31;
|
||||
}
|
||||
|
||||
.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats-button {
|
||||
border-color: #202429;
|
||||
}
|
||||
|
||||
.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected {
|
||||
border-color: #394047;
|
||||
}
|
||||
|
||||
@ -86,7 +86,7 @@ Dashboard v5 Layout */
|
||||
|
||||
.gh-dashboard5-row {
|
||||
flex: 1;
|
||||
padding: 4px 0 16px 0;
|
||||
padding: 0 0 16px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@ -103,15 +103,15 @@ Dashboard v5 Layout */
|
||||
.gh-dashboard5-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-title h4 {
|
||||
margin: 0 16px 0 0;
|
||||
font-size: 1.65rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4em;
|
||||
color: #15171a;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-box {
|
||||
@ -144,15 +144,15 @@ Dashboard v5 Layout */
|
||||
|
||||
.gh-dashboard5-selects {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 4px;
|
||||
top: 14px;
|
||||
right: 2px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gh-dashboard5-select {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
top: 16px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
@ -165,11 +165,11 @@ Dashboard v5 Layout */
|
||||
.gh-dashboard5-select .ember-power-select-selected-item {
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
letter-spacing: .3px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
color: var(--midgrey);
|
||||
color: var(--middarkgrey);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -274,8 +274,13 @@ Dashboard v5 Metric */
|
||||
line-height: 1em;
|
||||
margin: 0 0 12px;
|
||||
padding: 0;
|
||||
color: var(--midgrey);
|
||||
color: var(--middarkgrey);
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric.is-large .gh-dashboard5-metric-label {
|
||||
@ -294,17 +299,17 @@ Dashboard v5 Metric */
|
||||
.gh-dashboard5-metric-value {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 2.6rem;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.1px;
|
||||
line-height: 1em;
|
||||
white-space: nowrap;
|
||||
margin: 0 0 8px;
|
||||
margin: 0 0 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
|
||||
font-size: 3.2rem;
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -314,7 +319,7 @@ Dashboard v5 Metric */
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric.is-reverse.is-large .gh-dashboard5-metric-value {
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric-extra {
|
||||
@ -434,19 +439,18 @@ Dashboard v5 Section Anchor */
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-box {
|
||||
padding: 24px 24px 8px;
|
||||
padding: 20px 24px 8px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: calc(100% + 48px);
|
||||
padding: 0 8px;
|
||||
margin: 12px -24px 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-title {
|
||||
margin-bottom: 24px;
|
||||
padding: 8px;
|
||||
margin: 4px -24px -8px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
background: rgba(253,253,253,1);
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor.is-top .gh-dashboard5-stats {
|
||||
@ -459,19 +463,24 @@ Dashboard v5 Section Anchor */
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 20px 16px 24px 16px;
|
||||
margin: 2px 4px 2px 2px;
|
||||
padding: 16px 24px 20px;
|
||||
margin: 2px 8px 2px 2px;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
color: var(--black);
|
||||
/* border: 1px solid #eff2f4; */
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-stats-button:last-child {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected {
|
||||
color: var(--black);
|
||||
background: var(--white) !important;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 3%);
|
||||
border: 1px solid var(--whitegrey);
|
||||
background: var(--white);
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 2%);
|
||||
border: 1px solid rgb(235 235 235);
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-stats.is-solo .gh-dashboard5-stats-button.is-selected {
|
||||
@ -498,24 +507,13 @@ Dashboard v5 Section Anchor */
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-chart {
|
||||
flex-direction: column;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks {
|
||||
flex-direction: row;
|
||||
padding: 12px 0 4px;
|
||||
padding: 10px 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:first-child,
|
||||
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:last-child {
|
||||
opacity: 1;
|
||||
color: var(--midlightgrey);
|
||||
}
|
||||
|
||||
|
||||
@ -531,10 +529,6 @@ Dashboard v5 Section Engagement */
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-engagement .gh-dashboard5-select {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Email */
|
||||
@ -560,17 +554,13 @@ Dashboard v5 Section Email Open Rate */
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart {
|
||||
margin: 24px 0 0;
|
||||
margin: 28px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
|
||||
padding: 0 16px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-metric-label {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Recent Posts */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user