Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Dashboard chart refinements

Browse source
This commit is contained in:
Peter Zimon 2021-02-19 16:17:49 +01:00
parent 0d99ffbf29
commit 44df9d4dbe
5 changed files with 71 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-members-chart.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-members-chart-box {{if this.isSmall "small"}}" {{did-insert (perform this.fetchStatsTask)}}>
<div class="gh-dashboard-chart-box {{if this.isSmall "small"}}" {{did-insert (perform this.fetchStatsTask)}}>
{{#if (not this.stats)}}
<GhLoadingSpinner />
{{else}}

25
ghost/admin/app/components/gh-members-chart.js
View file

@ -72,10 +72,6 @@ export default Component.extend({
},
didReceiveAttrs() {
if (this._lastNightShift !== undefined && this.nightShift !== this._lastNightShift) {
this.setChartOptions();
}
if (this.chartStats) {
const {options, data, title, stats} = this.chartStats;
@ -84,6 +80,10 @@ export default Component.extend({
this.setChartOptions(options);
this.setChartData(data);
}
if (this._lastNightShift !== undefined && this.nightShift !== this._lastNightShift) {
this.setChartOptions();
}
this._lastNightShift = this.nightShift;
},
@ -140,7 +140,7 @@ export default Component.extend({
},
setChartOptions({rangeInDays}) {
let maxTicksAllowed = this.getTicksForRange(rangeInDays);
let maxTicksAllowed = this.isSmall ? 3 : this.getTicksForRange(rangeInDays);
this.setChartJSDefaults();
let options = {
@ -168,8 +168,8 @@ export default Component.extend({
cornerRadius: 5,
caretSize: 7,
caretPadding: 5,
bodyFontSize: 11,
titleFontSize: 10,
bodyFontSize: 12.5,
titleFontSize: 12,
titleFontStyle: 'normal',
titleFontColor: 'rgba(255, 255, 255, 0.7)',
titleMarginBottom: 3,
@ -245,7 +245,14 @@ export default Component.extend({
precision: 0,
suggestedMin: 0,
callback: function (value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// const currency = getSymbol(this.stats.currency);
const currency = '$';
if (parseInt(value) >= 1000){
return currency + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
} else {
return currency + value;
}
// return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
}
}]
@ -253,7 +260,7 @@ export default Component.extend({
};
if (this.isSmall) {
options.scales.yAxes[0].ticks.display = false;
options.scales.xAxes[0].gridLines.display = false;
options.scales.xAxes[0].gridLines.display = true;
}
this.set('chartOptions', options);
},

51
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -140,8 +140,8 @@
border: 1px solid var(--whitegrey);
border-radius: 3px;
grid-column-gap: var(--dashboard-gap);
height: 300px;
padding: 5px 0 24px;
align-items: stretch;
padding: 20px 0;
}
.gh-dashboard-area.charts .gh-dashboard-box {
@ -158,32 +158,34 @@
.gh-dashboard-area.charts .mrr {
grid-column: 1 / 2;
grid-row: 1 / 4;
padding-left: 24px;
padding: 0 0 0 24px;
}
.gh-dashboard-area.charts .total-members {
grid-column: 2 / 3;
grid-row: 1 / 2;
padding-right: 24px;
padding: 0 24px 0 24px;
height: 75px;
}
.gh-dashboard-area.charts .paid-members {
grid-column: 2 / 3;
grid-row: 2 / 3;
padding-right: 24px;
padding: 0 24px 0 24px;
height: 75px;
}
.gh-dashboard-area.charts .newsletter-open-rate {
grid-column: 2 / 3;
grid-row: 3 / 4;
padding-right: 24px;
padding: 0 24px 0 24px;
height: 75px;
}
.gh-dashboard-chart-container {
display: flex;
align-items: flex-start;
justify-content: space-between;
height: 100%;
}
.gh-dashboard-summary {
@ -191,7 +193,6 @@
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: 100%;
margin-top: 8px;
}
@ -240,7 +241,7 @@
font-size: 1.2rem;
letter-spacing: 0;
padding: 2px 4px;
margin: 6px 0 0;
margin: 0 0 1px 11px;
}
.gh-dashboard-summary .growth.positive {
@ -258,7 +259,6 @@
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
height: 100%;
}
.gh-dashboard-chart.nodata {
@ -274,6 +274,33 @@
.gh-dashboard-chart.small {
max-width: 180px;
margin-bottom: -6px;
}
.gh-dashboard-chart-box {
position: relative;
display: flex;
justify-content: stretch;
height: 208px;
width: 35.5vw;
padding-top: 12px;
margin-right: -10px;
}
.gh-dashboard-chart-box.small {
position: relative;
width: 12vw;
height: 70px;
padding-top: 0;
margin-right: -6px;
transform: scale(0.9);
transform-origin: top right;
}
@media (max-width: 1500px) {
.gh-dashboard-chart-box.small {
width: 10vw;
}
}
/* Total members */
@ -485,4 +512,8 @@
.gh-dashboard-area.charts {
min-height: 240px;
}
.gh-dashboard-chart-box {
margin: 0 0 24px;
}
}

39
ghost/admin/app/styles/layouts/members.css
View file

@ -177,41 +177,6 @@ p.gh-members-list-email {
margin-right: 32px;
}
.gh-members-chart-box {
position: relative;
/* flex: 1 1 auto; */
display: flex;
justify-content: stretch;
height: 240px;
width: 35vw;
padding-top: 12px;
}
.gh-members-chart-box.small {
position: relative;
width: 12vw;
height: 70px;
padding-top: 0;
margin-right: -6px;
}
@media (max-width: 1500px) {
.gh-members-chart-box.small {
width: 10vw;
}
}
.gh-members-chart-box.small::before {
position: absolute;
content: "";
display: block;
height: 1px;
bottom: 1px;
left: 10px;
right: 6px;
background: var(--list-color-divider);
}
.gh-members-chart-header {
display: flex;
align-items: center;
@ -345,10 +310,6 @@ p.gh-members-list-email {
.members-list .gh-list-header, .gh-list-hidecell-m {
display: table-cell;
}
.gh-members-chart-box {
margin: 0 0 24px;
}
}
@media (min-width: 440px) and (max-width: 1000px) {

22
ghost/admin/app/templates/dashboard.hbs
View file

@ -37,8 +37,10 @@
<div class="gh-dashboard-chart-container">
<div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Total members</h4>
<div class="data">{{this.memberCountStats.data.all.total}}</div>
<div class="growth">0.0%</div>
<div class="data-container">
<div class="data">{{this.memberCountStats.data.all.total}}</div>
<div class="growth">0.0%</div>
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.all}} />
@ -49,8 +51,10 @@
<div class="gh-dashboard-chart-container">
<div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Paid members</h4>
<div class="data">{{this.memberCountStats.data.paid.total}}</div>
<div class="growth">0.0%</div>
<div class="data-container">
<div class="data">{{this.memberCountStats.data.paid.total}}</div>
<div class="growth">0.0%</div>
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.paid}} />
@ -61,12 +65,12 @@
<div class="gh-dashboard-chart-container">
<div class="gh-dashboard-summary small">
<h4 class="gh-dashboard-header">Newsletter open rate</h4>
<div class="data">0%</div>
<div class="growth">0.0%</div>
</div>
<div class="gh-dashboard-chart small">
No data
<div class="data-container">
<div class="data">0%</div>
<div class="growth">0.0%</div>
</div>
</div>
<div class="gh-dashboard-chart small"></div>
</div>
</div>
</section>