TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-10-04 00:40:00 +03:00
Code Issues Projects Releases Wiki Activity

Stats page UI updates (#20970)

Browse Source 
[ANAL-79](https://linear.app/tryghost/issue/ANAL-79/stats-page-v10-design-refinements)

- typography is inconsistent in table headings
- chart section headings are not unified
- spacings are off between section and data headings
- inactive KPI tab colors are too light
- tech data numbers are not formatted
This commit is contained in:
Peter Zimon 2024-09-11 12:56:14 +02:00 committed by GitHub
parent 3aaa5d3a70
commit 7c64a7ac09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/stats/charts/kpis.js
View File

@ -190,7 +190,7 @@ export default class KpisComponent extends Component {
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: hexToRgba(LINE_COLOR, 0.3)
offset: 0, color: hexToRgba(LINE_COLOR, 0.15)
}, {
offset: 1, color: hexToRgba(LINE_COLOR, 0.0)
}],

9
ghost/admin/app/components/stats/charts/technical.js
View File

@ -4,6 +4,7 @@ import Component from '@glimmer/component';
import React from 'react';
import moment from 'moment-timezone';
import {DonutChart, useQuery} from '@tinybirdco/charts';
import {formatNumber} from '../../../helpers/format-number';
import {inject} from 'ghost-admin/decorators/inject';
import {statsStaticColors} from 'ghost-admin/utils/stats';
@ -80,8 +81,8 @@ export default class KpisComponent extends Component {
<table>
<thead>
<tr>
<th>{tableHead}</th>
<th>Hits</th>
<th><span className="gh-stats-detail-header">{tableHead}</span></th>
<th><span className="gh-stats-detail-header">Visits</span></th>
</tr>
</thead>
<tbody>
@ -91,7 +92,7 @@ export default class KpisComponent extends Component {
<span style={{backgroundColor: item.color, display: 'inline-block', width: '10px', height: '10px', marginRight: '5px', borderRadius: '2px'}}></span>
{item.name}
</td>
<td>{item.value}</td>
<td>{formatNumber(item.value)}</td>
</tr>
))}
</tbody>
@ -122,7 +123,7 @@ export default class KpisComponent extends Component {
},
extraCssText: 'border: none !important; box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.07), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02);',
formatter: function (fparams) {
return `<span style="background-color: ${fparams.color}; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px;"></span> ${fparams.name}: ${fparams.value}`;
return `<span style="background-color: ${fparams.color}; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px;"></span> ${fparams.name}: ${formatNumber(fparams.value)}`;
}
},
legend: {

2
ghost/admin/app/components/stats/charts/top-locations.hbs
View File

@ -3,7 +3,7 @@
<div {{react-render this.ReactComponent props=(hash chartRange=@chartRange audience=@audience)}}></div>
</div>
<div>
<div class="gh-stats-see-all-container">
<button type="button" class="gh-btn gh-btn-link gh-stats-see-all-btn" {{on "click" (fn this.openSeeAll @chartRange @audience)}}>
<span>See all &rarr;</span>
</button>

2
ghost/admin/app/components/stats/charts/top-locations.js
View File

@ -45,7 +45,7 @@ export default class TopLocations extends Component {
date_from: startDate.format('YYYY-MM-DD'),
date_to: endDate.format('YYYY-MM-DD'),
member_status: audience.length === 0 ? null : audience.join(','),
limit: 8
limit: 7
};
const {data, meta, error, loading} = useQuery({

2
ghost/admin/app/components/stats/charts/top-pages.hbs
View File

@ -21,7 +21,7 @@
<div {{react-render this.ReactComponent props=(hash chartRange=@chartRange audience=@audience)}}></div>
</div>
<div>
<div class="gh-stats-see-all-container">
<button type="button" class="gh-btn gh-btn-link gh-stats-see-all-btn" {{on "click" (fn this.openSeeAll @chartRange @audience)}}>
<span>See all &rarr;</span>
</button>

2
ghost/admin/app/components/stats/charts/top-pages.js
View File

@ -56,7 +56,7 @@ export default class TopPages extends Component {
date_from: startDate.format('YYYY-MM-DD'),
date_to: endDate.format('YYYY-MM-DD'),
member_status: audience.length === 0 ? null : audience.join(','),
limit: 8
limit: 7
};
const {data, meta, error, loading} = useQuery({

2
ghost/admin/app/components/stats/charts/top-sources.hbs
View File

@ -22,7 +22,7 @@
<div {{react-render this.ReactComponent props=(hash chartRange=@chartRange audience=@audience)}}></div>
</div>
<div>
<div class="gh-stats-see-all-container">
<button type="button" class="gh-btn gh-btn-link gh-stats-see-all-btn" {{on "click" (fn this.openSeeAll @chartRange @audience)}}>
<span>See all &rarr;</span>
</button>

2
ghost/admin/app/components/stats/charts/top-sources.js
View File

@ -55,7 +55,7 @@ export default class TopPages extends Component {
date_from: startDate.format('YYYY-MM-DD'),
date_to: endDate.format('YYYY-MM-DD'),
member_status: audience.length === 0 ? null : audience.join(','),
limit: 8
limit: 7
};
const {data, meta, error, loading} = useQuery({

34
ghost/admin/app/styles/layouts/stats.css
View File

@ -71,12 +71,12 @@
.gh-stats-tab {
position: relative;
margin: 0 0 1px 0;
color: var(--midlightgrey);
/* color: var(--darkgrey); */
}
.gh-stats-tab:not(.is-selected) .gh-stats-metric-label {
color: var(--midlightgrey);
}
/* .gh-stats-tab:not(.is-selected) .gh-stats-metric-label {
color: var(--darkgrey);
} */
.gh-stats-tab:hover {
background-color: var(--whitegrey-l2);
@ -111,6 +111,9 @@
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--whitegrey);
margin: -4px -20px 12px;
padding: 0 20px 16px;
}
.gh-stats-metric-data {
@ -141,7 +144,7 @@
}
.gh-stats-piechart-container table {
margin-top: 5px;
margin-top: -15px;
width: 100%;
margin-bottom: 0;
}
@ -192,8 +195,10 @@
}
.gh-stats-detail-header {
font-size: 11px;
font-size: 12px;
font-weight: 500;
text-transform: none;
color: var(--midgrey);
}
.gh-stats-see-all-btn span {
@ -210,4 +215,21 @@
.gh-stats-detail-label,
.gh-stats-detail-value {
font-size: 13.5px;
font-weight: 500;
}
.gh-stats-see-all-container {
position: relative;
}
.gh-stats-see-all-container::before {
position: absolute;
display: block;
content: '';
left: 0;
right: 0;
top: -60px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, #FFF 100%);
height: 60px;
z-index: 9999;
}