TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Dashboard mini charts basic styles

Browse Source
This commit is contained in:
Peter Zimon 2021-02-19 10:39:13 +01:00
parent b7ae1233bf
commit 0fbb1adbdb
6 changed files with 51 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
ghost/admin/app/components/gh-members-chart.hbs
View File

@ -1,68 +1,11 @@
<div class="flex justify-between mb6 items-stretch gh-members-chart-wrapper"
{{did-insert (perform this.fetchStatsTask)}}
>
{{!-- Chart title/filter graph --}}
<div class="gh-members-chart-box">
<div class="gh-members-chart-header">
<h2 class="gh-heading-xs">{{chartHeading}}</h2>
{{#if this.showRange}}
<div class="view-actions">
<div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
<PowerSelect
@selected={{this.selectedRange}}
@options={{this.availableRanges}}
@searchEnabled={{false}}
@onChange={{action "changeDateRange"}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"
@matchTriggerWidth={{false}}
data-test-type-select="true"
as |range|
>
{{range.name}}
</PowerSelect>
</div>
</div>
{{/if}}
</div>
<div class="gh-members-chart-container {{if this.isSmall "gh-members-chart-container-small"}}">
{{#if (not this.stats)}}
<GhLoadingSpinner />
{{else}}
<EmberChart
@type="LineWithLine"
@options={{this.chartOptions}}
@data={{this.chartData}}
@height={{300}} />
{{/if}}
</div>
<div class="gh-members-chart-xlabels">
<span>{{this.startDateLabel}}</span>
<span>Today</span>
</div>
</div>
{{!-- Summary --}}
{{#if this.showSummary}}
<div class="gh-content-box vertical gh-members-chart-summary">
<section>
<h3 class="gh-heading-xs">{{chartHeading}}</h3>
<div class="gh-data-summary">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
</section>
<section>
{{#if (eq this.selectedRange.days "all-time")}}
<h3 class="gh-heading-xs">All time signups</h3>
{{else}}
<h3 class="gh-heading-xs">Signed up in the last {{this.selectedRange.days}} days</h3>
{{/if}}
<div class="gh-data-summary">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
</section>
<section>
<h3 class="gh-heading-xs">Signed up today</h3>
<div class="gh-data-summary">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
</section>
</div>
<div class="gh-members-chart-box {{if this.isSmall "small"}}" {{did-insert (perform this.fetchStatsTask)}}>
{{#if (not this.stats)}}
<GhLoadingSpinner />
{{else}}
<EmberChart
@type="LineWithLine"
@options={{this.chartOptions}}
@data={{this.chartData}}
@height={{300}} />
{{/if}}
</div>

7
ghost/admin/app/components/gh-members-chart.js
View File

@ -24,7 +24,7 @@ export default Component.extend({
showRange: true,
chartType: '',
chartSize: '',
chartHeading: 'Total Members',
chartHeading: 'Total members',
isSmall: computed('chartSize', function () {
if (this.chartSize === 'small') {
@ -166,10 +166,11 @@ export default Component.extend({
cornerRadius: 5,
caretSize: 7,
caretPadding: 5,
bodyFontSize: 13,
bodyFontSize: 11,
titleFontSize: 10,
titleFontStyle: 'normal',
titleFontColor: 'rgba(255, 255, 255, 0.7)',
titleMarginBottom: 4,
titleMarginBottom: 3,
callbacks: {
label: (tooltipItems, data) => {
const labelText = data.datasets[tooltipItems.datasetIndex].label;

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

@ -39,18 +39,6 @@
justify-content: flex-start;
}
.gh-dashboard-chart.nodata {
border: 1px dashed var(--lightgrey);
font-size: 1.3rem;
color: var(--midlightgrey);
height: 100%;
}
.gh-dashboard-chart.nodata {
font-size: 1.3rem;
color: var(--midlightgrey);
}
.gh-dashboard-container {
display: grid;
grid-template-columns: 1fr;
@ -152,48 +140,49 @@
border: 1px solid var(--whitegrey);
border-radius: 3px;
grid-column-gap: var(--dashboard-gap);
height: 18vw;
min-height: 180px;
max-height: 280px;
padding: 0 24px 24px;
height: 300px;
padding: 5px 0 24px;
}
.gh-dashboard-area.charts .gh-dashboard-box {
border: none;
border-radius: 0;
padding: 22px 0 0 24px;
padding: 16px 0 0 24px;
margin: 0;
}
.gh-dashboard-area.charts .gh-dashboard-header {
margin: 0 0 8px;
margin: 0 0 6px;
}
.gh-dashboard-area.charts .mrr {
grid-column: 1 / 2;
grid-row: 1 / 4;
padding-left: 0;
padding-left: 24px;
}
.gh-dashboard-area.charts .total-members {
grid-column: 2 / 3;
grid-row: 1 / 2;
padding-right: 24px;
}
.gh-dashboard-area.charts .paid-members {
grid-column: 2 / 3;
grid-row: 2 / 3;
padding-right: 24px;
}
.gh-dashboard-area.charts .newsletter-open-rate {
grid-column: 2 / 3;
grid-row: 3 / 4;
padding-right: 24px;
}
.gh-dashboard-chart-container {
display: flex;
align-items: flex-start;
justify-content: stretch;
justify-content: space-between;
height: 100%;
}
@ -203,6 +192,7 @@
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: 100%;
}
.gh-dashboard-summary.small {
@ -264,9 +254,25 @@
.gh-dashboard-chart {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.gh-dashboard-chart.nodata {
border: 1px dashed var(--lightgrey);
font-size: 1.3rem;
color: var(--midlightgrey);
}
.gh-dashboard-chart.nodata {
font-size: 1.3rem;
color: var(--midlightgrey);
}
.gh-dashboard-chart.small {
max-width: 180px;
}
/* Total members */

29
ghost/admin/app/styles/layouts/members.css
View File

@ -179,12 +179,20 @@ p.gh-members-list-email {
.gh-members-chart-box {
flex: 1 1 auto;
display: flex;
justify-content: stretch;
min-width: 0;
min-height: 0;
border: 1px solid var(--list-color-divider);
border-left: none;
}
.gh-members-chart-box.small {
border: none;
max-height: 76px;
max-width: 180px;
}
.gh-members-chart-header {
display: flex;
align-items: center;
@ -209,19 +217,6 @@ p.gh-members-list-email {
margin-left: -103px;
}
.gh-members-chart-container {
height: 186px;
margin: 0 0 0 -16px;
padding: 4px 20px 11px 0;
}
.gh-members-chart-container.gh-members-chart-container-small {
height: 90px;
width: 120px;
margin: 0 0 0 -16px;
padding: 4px 20px 11px 0;
}
.gh-members-chart-xlabels {
display: flex;
align-items: center;
@ -325,10 +320,6 @@ p.gh-members-list-email {
font-size: 2.8rem;
line-height: 2.8rem;
}
.gh-members-chart-container {
height: 166px;
}
}
@media (max-width: 1000px) {
@ -336,10 +327,6 @@ p.gh-members-list-email {
display: table-cell;
}
.gh-members-chart-wrapper {
flex-direction: column;
}
.gh-members-chart-box {
margin: 0 0 24px;
}

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

@ -24,7 +24,7 @@
</div>
{{#if this.mrrStats.data}}
<div class="gh-dashboard-chart">
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" style="width:100%" @chartStats={{this.mrrStats.data}} />
<GhMembersChart @nightShift={{feature "nightShift"}} @showSummary={{false}} @showRange={{false}} @chartType="mrr" @chartStats={{this.mrrStats.data}} />
</div>
{{else}}
<div class="gh-dashboard-chart nodata">
@ -43,7 +43,7 @@
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} style="width:100%" @chartStats={{this.memberCountStats.data.all}} />
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.all}} />
</div>
</div>
</div>
@ -57,7 +57,7 @@
</div>
</div>
<div class="gh-dashboard-chart small">
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} style="width:100%" @chartStats={{this.memberCountStats.data.paid}} />
<GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.paid}} />
</div>
</div>
</div>

7
ghost/admin/app/templates/members.hbs
View File

@ -67,13 +67,6 @@
{{#unless this.members.loading}}
<section class="view-container">
{{#if (and this.members this.showingAll)}}
<section class="gh-members-chart">
<GhMembersChart @nightShift={{feature "nightShift"}} />
</section>
{{/if}}
<section class="content-list">
<ol class="members-list gh-list {{unless this.members "no-posts"}}">
{{#if this.members}}