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

Minichart refinements

Browse Source
This commit is contained in:
Peter Zimon 2022-05-12 13:20:44 +02:00
parent dd551acf91
commit 8a3a5dd217
7 changed files with 158 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs
View File

@ -1,42 +1,43 @@
<div class="gh-dashboard5-minichart gh-dashboard5-breakdown">
<div class="gh-dashboard5-chart" {{did-insert this.loadCharts}}>
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
<div class="gh-dashboard5-content">
<div class="gh-dashboard5-data">
<Dashboard::v5::Parts::Metric
@label={{this.chartTitle}} />
<div class="gh-dashboard5-legend">
<div class="gh-dashboard5-legend-item">New</div>
<div class="gh-dashboard5-legend-item">Canceled</div>
</div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{110}} />
</div>
<div class="gh-dashboard5-chart" {{did-insert this.loadCharts}}>
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
<div id="gh-dashboard5-breakdown-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{110}} />
</div>
<div class="gh-dashboard5-tooltip-value">
<div class="gh-dashboard5-tooltip-value-1"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-1"><span class="metric">New</span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="metric">Canceled</span></div>
<div class="gh-dashboard5-tooltip-value-3"></div>
</div>
</div>
</div>
{{/if}}
</div>
<div class="gh-dashboard5-data">
<Dashboard::v5::Parts::Metric
@label={{this.chartTitle}} />
<div class="gh-dashboard5-legend">
<div class="gh-dashboard5-legend-item">New</div>
<div class="gh-dashboard5-legend-item">Canceled</div>
<div id="gh-dashboard5-breakdown-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
<div class="gh-dashboard5-tooltip-value-1"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-1"><span class="metric">New</span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="metric">Canceled</span></div>
<div class="gh-dashboard5-tooltip-value-3"></div>
</div>
</div>
</div>
{{/if}}
</div>
</div>
</div>

8
ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
View File

@ -202,9 +202,9 @@ export default class PaidBreakdown extends Component {
const canceledData = stats.map(stat => -stat.negativeDelta);
let barThickness = 5;
if (newData.length > 30 + 1) {
barThickness = 2;
} else if (newData.length > 90 + 1) {
if (newData.length >= 30 + 1) {
barThickness = 3.5;
} else if (newData.length >= 90 + 1) {
barThickness = 1;
}
@ -243,7 +243,7 @@ export default class PaidBreakdown extends Component {
},
layout: {
padding: {
top: 24,
top: 0,
bottom: 0,
left: 0,
right: 0

63
ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs
View File

@ -1,38 +1,39 @@
<div class="gh-dashboard5-minichart gh-dashboard5-mix {{if this.isChartTiers 'is-tiers'}}">
<div class="gh-dashboard5-chart" {{did-insert this.loadCharts}}>
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{110}} />
<div class="gh-dashboard5-content">
<div class="gh-dashboard5-data">
<Dashboard::v5::Parts::Metric
@label="Paid mix" />
{{#if this.isChartCadence}}
<div class="gh-dashboard5-legend">
<div class="gh-dashboard5-legend-item">Monthly</div>
<div class="gh-dashboard5-legend-item">Annual</div>
</div>
<div id="gh-dashboard5-mix-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-value">
-
{{/if}}
</div>
<div class="gh-dashboard5-chart {{if this.isChartCadence "narrow"}}" {{did-insert this.loadCharts}}>
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{110}} />
</div>
</div>
</div>
{{/if}}
</div>
<div class="gh-dashboard5-data">
<Dashboard::v5::Parts::Metric
@label="Paid mix" />
{{#if this.isChartCadence}}
<div class="gh-dashboard5-legend">
<div class="gh-dashboard5-legend-item">Monthly</div>
<div class="gh-dashboard5-legend-item">Annual</div>
</div>
{{/if}}
<div id="gh-dashboard5-mix-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-value">
-
</div>
</div>
</div>
{{/if}}
</div>
</div>
{{#if this.hasMultipleTiers }}

69
ghost/admin/app/components/dashboard/v5/charts/paid-mrr.hbs
View File

@ -1,40 +1,39 @@
<div class="gh-dashboard5-minichart gh-dashboard5-mrr">
<div class="gh-dashboard5-chart">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{110}} />
<div class="gh-dashboard5-content">
<div class="gh-dashboard5-data">
<Dashboard::v5::Parts::Metric
@label={{this.chartTitle}}
@value="{{this.currentMRRFormatted}}"
@trends={{this.hasTrends}}
@percentage={{this.mrrTrend}} />
</div>
<div class="gh-dashboard5-chart">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
<div class="gh-dashboard5-chart-gradient"></div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{110}} />
</div>
<div id="gh-dashboard5-mrr-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
<span class="indicator line"></span>
<span class="value">-</span>
<span class="metric">MRR</span>
</div>
</div>
</div>
{{/if}}
</div>
<div class="gh-dashboard5-data">
<Dashboard::v5::Parts::Metric
@label={{this.chartTitle}}
@value="{{this.currentMRRFormatted}}"
@trends={{this.hasTrends}}
@percentage={{this.mrrTrend}} />
<div id="gh-dashboard5-mrr-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
<span class="indicator line"></span>
<span class="value">-</span>
<span class="metric">MRR</span>
</div>
</div>
</div>
{{/if}}
</div>
</div>
</div>

2
ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js
View File

@ -120,7 +120,7 @@ export default class PaidMrr extends Component {
data: data,
tension: 0,
cubicInterpolationMode: 'monotone',
fill: true,
fill: false,
fillColor: gradient,
backgroundColor: gradient,
pointRadius: 0,

6
ghost/admin/app/components/dashboard/v5/parts/metric.hbs
View File

@ -3,7 +3,7 @@
{{#if @secondary}}
{{#if @value}}
<div class="gh-dashboard5-metric-value {{if @secondary 'is-secondary'}}">
{{@value}}
<span class="value">{{@value}}</span>
{{#if @trends}}
<Dashboard::v5::Parts::Percentage @percentage={{@percentage}}/>
{{/if}}
@ -16,7 +16,7 @@
{{#if @reverse}}
{{#if @value}}
<div class="gh-dashboard5-metric-value">
{{@value}}
<span class="value">{{@value}}</span>
{{#if @trends}}
<Dashboard::v5::Parts::Percentage @percentage={{@percentage}}/>
{{/if}}
@ -31,7 +31,7 @@
</h5>
{{#if @value}}
<div class="gh-dashboard5-metric-value">
{{@value}}
<span class="value">{{@value}}</span>
{{#if @trends}}
<Dashboard::v5::Parts::Percentage @percentage={{@percentage}}/>
{{/if}}

80
ghost/admin/app/styles/layouts/dashboard-v5.css
View File

@ -238,21 +238,19 @@ Dashboard v5 Layout */
.gh-dashboard5-minichart {
flex: 1;
border-left: 1px solid var(--whitegrey);
padding: 4px 24px 0;
padding: 4px 16px 0;
position: relative;
}
.gh-dashboard5-minichart .gh-dashboard5-data {
pointer-events: none;
position: absolute;
top: 0;
left: 24px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-right: 16px;
min-height: 88px;
}
.gh-dashboard5-minichart:first-child .gh-dashboard5-data {
@ -277,7 +275,7 @@ Dashboard v5 Layout */
}
.gh-dashboard5-minichart .gh-dashboard5-chart-box {
height: 94px;
height: 88px;
}
.gh-dashboard5-legend {
@ -505,13 +503,37 @@ Dashboard v5 Chart */
}
.gh-dashboard5-minicharts .gh-dashboard5-chart {
flex: auto;
padding: 0;
width: 100%;
height: 94px;
padding: 0 0 0 30%;
height: 88px;
padding: 0;
}
.gh-dashboard5-mrr .gh-dashboard5-chart {
padding-left: 35%;
.gh-dashboard5-minichart .gh-dashboard5-content {
display: flex;
}
.gh-dashboard5-mrr .gh-dashboard5-metric-value {
flex-direction: column;
align-items: flex-start;
margin-bottom: 0;
}
.gh-dashboard5-mrr .gh-dashboard5-percentage {
margin-top: 15px;
}
.gh-dashboard5-mix .gh-dashboard5-data {
position: absolute;
top: 4px;
bottom: 0;
left: 24px;
}
.gh-dashboard5-mix .gh-dashboard5-chart.narrow {
/* margin-left: -80px; */
padding-left: 30%;
}
@ -520,25 +542,22 @@ Dashboard v5 Percentage */
.gh-dashboard5-percentage {
flex: 0;
background: var(--whitegrey-d1);
border-radius: 3px;
font-size: 1.2rem;
font-size: 1.5rem;
line-height: 1;
font-weight: 500;
letter-spacing: 0;
color: var(--midgrey);
padding: 2px 4px;
padding: 0;
margin: 5px 0 3px 0;
}
.gh-dashboard5-percentage.is-positive {
background: color-mod(var(--green) a(13%));
color: color-mod(var(--green) l(-5%));
color: var(--green);
}
.gh-dashboard5-percentage.is-negative {
background: color-mod(var(--yellow) a(20%));
color: color-mod(var(--yellow) l(-8%));
color: var(--pink);
}
@ -601,10 +620,13 @@ Dashboard v5 Metric */
line-height: 1em;
white-space: nowrap;
margin: 0 0 12px;
gap: 10px;
color: var(--black);
}
.gh-dashboard5-metric-value .value {
margin-right: 8px;
}
.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
font-size: 3.2rem;
letter-spacing: -0.8px;
@ -899,7 +921,7 @@ Dashboard v5 Anchor */
}
.gh-dashboard5-mix .gh-dashboard5-select {
top: -11px;
top: -7px;
right: -18px;
}
@ -1886,17 +1908,7 @@ Dashboard v5 Tooltips */
margin-right: -10px; /* fix 99% width ChartJS hack */
}
@media screen and (max-width: 1320px) {
.gh-dashboard5-minicharts .gh-dashboard5-minichart:not(.gh-dashboard5-mrr) .gh-dashboard5-chart {
padding-left: 0;
}
.gh-dashboard5-minicharts .gh-dashboard5-legend {
display: none;
}
}
@media screen and (max-width: 1000px) {
@media screen and (max-width: 1120px) {
.gh-dashboard5-minicharts {
flex-direction: column;
}
@ -1917,10 +1929,16 @@ Dashboard v5 Tooltips */
}
.gh-dashboard5-minichart .gh-dashboard5-data {
top: 16px;
position: relative;
width: 50%;
top: 0;
left: 0;
}
.gh-dashboard5-mix .gh-dashboard5-chart.narrow {
padding: 0;
}
.gh-dashboard5-minichart .gh-dashboard5-select {
top: 4px;
}