Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Refined ui details for Stats page (#20977)

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

Further UI refinements for Stats page
This commit is contained in:
Peter Zimon 2024-09-11 16:14:05 +02:00 • committed by GitHub
parent 8325fb85b2
commit 8d29479981
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 83 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin/app/components/modal-stats-all.js
View file

@ -4,10 +4,10 @@ import Component from '@glimmer/component';
import React from 'react';
import moment from 'moment-timezone';
import {BarList, useQuery} from '@tinybirdco/charts';
import {barListColor} from '../utils/stats';
import {formatNumber} from 'ghost-admin/helpers/format-number';
import {getCountryFlag} from 'ghost-admin/utils/stats';
import {inject} from 'ghost-admin/decorators/inject';
import {statsStaticColors} from 'ghost-admin/utils/stats';
export default class AllStatsModal extends Component {
@inject config;
@ -99,7 +99,7 @@ export default class AllStatsModal extends Component {
indexConfig={{
label: <span className="gh-stats-detail-header">{labelText}</span>,
renderBarContent: ({label}) => (
<span className="gh-stats-detail-label">{(type === 'top-locations') && getCountryFlag(label)} {label || unknownOption}</span>
<span className={`gh-stats-detail-label ${type === 'top-sources' && 'gh-stats-domain'}`}>{(type === 'top-locations') && getCountryFlag(label)} {type === 'top-sources' && (<img src={`https://www.google.com/s2/favicons?domain=${label || 'direct'}&sz=32`} className="gh-stats-favicon" />)} {label || unknownOption}</span>
)
}}
categories={['hits']}
@ -109,7 +109,7 @@ export default class AllStatsModal extends Component {
renderValue: ({value}) => <span className="gh-stats-detail-value">{formatNumber(value)}</span>
}
}}
colorPalette={[statsStaticColors[4]]}
colorPalette={[barListColor]}
/>
);
};

82
ghost/admin/app/components/stats/charts/kpis.js
View file

@ -47,41 +47,44 @@ export default class KpisComponent extends Component {
});
// Create an array with every second date value
const dateLabels = [];
let currentDate = startDate.clone();
let skipDays;
switch (chartRange) {
case 1:
skipDays = 0; // Show all hours for 1 day
break;
case 7:
skipDays = 0; // Skip every other day for 7 days
break;
case (30 + 1):
skipDays = 2; // Skip every 3rd day for 30 and 90 days
break;
case (90 + 1):
skipDays = 5; // Skip every 3rd day for 30 and 90 days
break;
case (365 + 1):
case (12 * (30 + 1)):
skipDays = 30; // Skip every 7th day for 1 year
break;
case 1000:
skipDays = 29; // Skip every 30th day for all time
break;
default:
skipDays = 1; // Default to skipping every other day
}
const dateLabels = [
startDate.format('YYYY-MM-DD'),
endDate.format('YYYY-MM-DD')
];
// let currentDate = startDate.clone();
// let skipDays;
// switch (chartRange) {
// case 1:
// skipDays = 0; // Show all hours for 1 day
// break;
// case 7:
// skipDays = 0; // Skip every other day for 7 days
// break;
// case (30 + 1):
// skipDays = 2; // Skip every 3rd day for 30 and 90 days
// break;
// case (90 + 1):
// skipDays = 5; // Skip every 3rd day for 30 and 90 days
// break;
// case (365 + 1):
// case (12 * (30 + 1)):
// skipDays = 30; // Skip every 7th day for 1 year
// break;
// case 1000:
// skipDays = 29; // Skip every 30th day for all time
// break;
// default:
// skipDays = 1; // Default to skipping every other day
// }
let dayCounter = 0;
while (currentDate.isSameOrBefore(endDate)) {
if (dayCounter % (skipDays + 1) === 0) {
dateLabels.push(currentDate.format('YYYY-MM-DD'));
}
currentDate.add(1, 'days');
dayCounter = dayCounter + 1;
}
// let dayCounter = 0;
// while (currentDate.isSameOrBefore(endDate)) {
// if (dayCounter % (skipDays + 1) === 0) {
// dateLabels.push(currentDate.format('YYYY-MM-DD'));
// }
// currentDate.add(1, 'days');
// dayCounter = dayCounter + 1;
// }
return (
<AreaChart
@ -133,12 +136,19 @@ export default class KpisComponent extends Component {
}
},
yAxis: {
type: 'value',
splitLine: {
show: true,
show: false,
lineStyle: {
type: 'dashed',
color: '#DDE1E5' // Adjust color as needed
}
},
axisLabel: {
show: true
},
axisTick: {
show: false
}
},
tooltip: {
@ -211,7 +221,7 @@ export default class KpisComponent extends Component {
symbol: 'circle',
symbolSize: 10,
z: 8,
smooth: true,
smooth: false,
smoothMonotone: 'x',
name: CATEGORY,
data: (data ?? []).map(row => [

5
ghost/admin/app/components/stats/charts/top-locations.js
View file

@ -6,8 +6,9 @@ import React from 'react';
import moment from 'moment-timezone';
import {BarList, useQuery} from '@tinybirdco/charts';
import {action} from '@ember/object';
import {barListColor} from '../../../utils/stats';
import {formatNumber} from '../../../helpers/format-number';
import {getCountryFlag, statsStaticColors} from 'ghost-admin/utils/stats';
import {getCountryFlag} from 'ghost-admin/utils/stats';
import {inject} from 'ghost-admin/decorators/inject';
import {inject as service} from '@ember/service';
@ -74,7 +75,7 @@ export default class TopLocations extends Component {
renderValue: ({value}) => <span className="gh-stats-detail-value">{formatNumber(value)}</span>
}
}}
colorPalette={[statsStaticColors[4]]}
colorPalette={[barListColor]}
/>
);
};

4
ghost/admin/app/components/stats/charts/top-pages.js
View file

@ -7,10 +7,10 @@ import moment from 'moment-timezone';
import {BarList, useQuery} from '@tinybirdco/charts';
import {CONTENT_OPTIONS} from 'ghost-admin/utils/stats';
import {action} from '@ember/object';
import {barListColor} from '../../../utils/stats';
import {formatNumber} from '../../../helpers/format-number';
import {inject} from 'ghost-admin/decorators/inject';
import {inject as service} from '@ember/service';
import {statsStaticColors} from 'ghost-admin/utils/stats';
import {tracked} from '@glimmer/tracking';
export default class TopPages extends Component {
@ -85,7 +85,7 @@ export default class TopPages extends Component {
renderValue: ({value}) => <span className="gh-stats-detail-value">{formatNumber(value)}</span>
}
}}
colorPalette={[statsStaticColors[4]]}
colorPalette={[barListColor]}
/>
);
};

7
ghost/admin/app/components/stats/charts/top-sources.js
View file

@ -7,10 +7,10 @@ import moment from 'moment-timezone';
import {BarList, useQuery} from '@tinybirdco/charts';
import {CAMPAIGN_OPTIONS} from 'ghost-admin/utils/stats';
import {action} from '@ember/object';
import {barListColor} from '../../../utils/stats';
import {formatNumber} from '../../../helpers/format-number';
import {inject} from 'ghost-admin/decorators/inject';
import {inject as service} from '@ember/service';
import {statsStaticColors} from 'ghost-admin/utils/stats';
import {tracked} from '@glimmer/tracking';
export default class TopPages extends Component {
@ -74,7 +74,7 @@ export default class TopPages extends Component {
indexConfig={{
label: <span className="gh-stats-detail-header">Source</span>,
renderBarContent: ({label}) => (
<span className="gh-stats-detail-label">{label || 'Direct'}</span>
<span className="gh-stats-detail-label"><span className="gh-stats-domain"><img src={`https://www.google.com/s2/favicons?domain=${label || 'direct'}&sz=32`} className="gh-stats-favicon" />{label || 'Direct'}</span></span>
)
}}
categories={['hits']}
@ -84,8 +84,7 @@ export default class TopPages extends Component {
renderValue: ({value}) => <span className="gh-stats-detail-value">{formatNumber(value)}</span>
}
}}
colorPalette={[statsStaticColors[4]]}
// height="300px"
colorPalette={[barListColor]}
/>
);
};

6
ghost/admin/app/components/stats/kpis-overview.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-stats-tabs-header">
<div class="gh-stats-tabs-header ">
<div class="gh-stats-tabs">
<button type="button" class="gh-stats-tab min-width {{if this.uniqueVisitorsTabSelected 'is-selected'}}" {{on "click" this.changeTabToUniqueVisitors}}>
<Stats::Parts::Metric
@ -49,4 +49,6 @@
{{/if}}
</div>
</div>
<Stats::Charts::Kpis @chartRange={{@chartRange}} @audience={{@audience}} @selected={{this.selected}} />
<div class="gh-stats-kpis-chart-container">
<Stats::Charts::Kpis @chartRange={{@chartRange}} @audience={{@audience}} @selected={{this.selected}} />
</div>

19
ghost/admin/app/styles/layouts/stats.css
View file

@ -34,6 +34,10 @@
transition: all ease-in-out 0.3s;
}
.gh-stats-container.no-gap {
gap: 0;
}
.gh-stats-container > .gh-stats-metric-label,
.gh-stats-metric-header {
margin-bottom: 12px;
@ -232,4 +236,19 @@
background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, #FFF 100%);
height: 60px;
z-index: 9999;
}
.gh-stats-kpis-chart-container {
margin-top: -20px;
}
.gh-stats-domain {
display: flex;
align-items: center;
gap: 6px;
}
.gh-stats-favicon {
width: 16px;
height: 16px;
}

2
ghost/admin/app/templates/stats.hbs
View file

@ -25,7 +25,7 @@
</GhCanvasHeader>
<section class="view-container">
<section class="gh-stats-container">
<section class="gh-stats-container no-gap">
<Stats::KpisOverview @chartRange={{this.chartRange}} @audience={{this.audience}} />
</section>

2
ghost/admin/app/utils/stats.js
View file

@ -106,6 +106,8 @@ export function generateMonochromePalette(baseColor, count = 10) {
return palette;
}
export const barListColor = '#F1F3F4';
export const statsStaticColors = [
'#8E42FF', '#B07BFF', '#C7A0FF', '#DDC6FF', '#EBDDFF', '#F7EDFF'
];