Added graph to stats page for os (#22291)

ref https://linear.app/ghost/issue/ANAL-128/ - added a chart for OS to the technical section on the stats page
TryGhost · Feb 26, 2025 · 41ccf1e · 41ccf1e
1 parent b0cb64b
commit 41ccf1e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 14 deletions.
diff --git a/ghost/admin/app/components/stats/charts/technical.js b/ghost/admin/app/components/stats/charts/technical.js
@@ -22,12 +22,17 @@ export default class TechnicalComponent extends Component {
     updateQueryParams(params) {
         const currentRoute = this.router.currentRoute;
         const newQueryParams = {...currentRoute.queryParams, ...params};
-
         this.router.transitionTo({queryParams: newQueryParams});
     }
 
     ReactComponent = (props) => {
-        const {selected} = props;
+        const {selected, apiVersion} = props;
+
+        // If OS is selected but not available, switch to devices
+        let effectiveSelected = selected;
+        if (selected === 'os' && (!apiVersion || apiVersion < 1)) {
+            effectiveSelected = 'devices';
+        }
 
         const colorPalette = statsStaticColors.slice(0, 5);
 
@@ -41,14 +46,19 @@ export default class TechnicalComponent extends Component {
         let indexBy;
         let tableHead;
 
-        switch (selected) {
+        switch (effectiveSelected) {
         case 'browsers':
-            endpoint = `${this.config.stats.endpoint}/v0/pipes/top_browsers__v${props.apiVersion || TB_VERSION}.json`;
+            endpoint = `${this.config.stats.endpoint}/v0/pipes/top_browsers__v${apiVersion || TB_VERSION}.json`;
             indexBy = 'browser';
             tableHead = 'Browser';
             break;
+        case 'os':
+            endpoint = `${this.config.stats.endpoint}/v0/pipes/top_os__v${apiVersion || TB_VERSION}.json`;
+            indexBy = 'os';
+            tableHead = 'OS';
+            break;
         default:
-            endpoint = `${this.config.stats.endpoint}/v0/pipes/top_devices__v${props.apiVersion || TB_VERSION}.json`;
+            endpoint = `${this.config.stats.endpoint}/v0/pipes/top_devices__v${apiVersion || TB_VERSION}.json`;
             indexBy = 'device';
             tableHead = 'Device';
         }

diff --git a/ghost/admin/app/components/stats/technical-overview.hbs b/ghost/admin/app/components/stats/technical-overview.hbs
@@ -11,10 +11,12 @@
                     @label="Browsers" />
             </button>
 
-            {{!-- <button type="button" class="gh-stats-tab {{if this.osTabSelected 'is-selected'}}" {{on "click" this.changeTabToOSs}}>
-                <Stats::Parts::Metric
-                    @label="Operating systems" />
-            </button> --}}
+            {{#if (gt @apiVersion 0)}}
+                <button type="button" class="gh-stats-tab {{if this.osTabSelected 'is-selected'}}" {{on "click" this.changeTabToOSs}}>
+                    <Stats::Parts::Metric
+                        @label="OS" />
+                </button>
+            {{/if}}
         </div>
     </div>
 

diff --git a/ghost/admin/app/components/stats/technical-overview.js b/ghost/admin/app/components/stats/technical-overview.js
@@ -30,14 +30,14 @@ export default class TechnicalOverview extends Component {
     }
 
     get devicesTabSelected() {
-        return (this.selected === 'devices');
+        return this.selected === 'devices';
     }
 
     get browsersTabSelected() {
-        return (this.selected === 'browsers');
+        return this.selected === 'browsers';
     }
 
     get osTabSelected() {
-        return (this.selected === 'os');
+        return this.selected === 'os';
     }
 }
diff --git a/ghost/admin/app/controllers/stats.js b/ghost/admin/app/controllers/stats.js
@@ -8,13 +8,14 @@ import {tracked} from '@glimmer/tracking';
 countries.registerLocale(enLocale);
 
 export default class StatsController extends Controller {
-    queryParams = ['device', 'browser', 'location', 'source', 'pathname', 'apiVersion'];
+    queryParams = ['device', 'browser', 'location', 'source', 'pathname', 'os'];
 
     @tracked device = null;
     @tracked browser = null;
     @tracked location = null;
     @tracked source = null;
     @tracked pathname = null;
+    @tracked os = null;
     @tracked apiVersion = 0;
 
     rangeOptions = RANGE_OPTIONS;
@@ -74,6 +75,7 @@ export default class StatsController extends Controller {
         this.location = null;
         this.source = null;
         this.pathname = null;
+        this.os = null;
     }
 
     get selectedRangeOption() {

diff --git a/ghost/admin/app/templates/stats.hbs b/ghost/admin/app/templates/stats.hbs
@@ -87,6 +87,7 @@
                 @location={{this.location}}
                 @source={{this.source}}
                 @pathname={{this.pathname}}
+                @os={{this.os}}
                 @apiVersion={{this.apiVersion}}
             />
         </section>
@@ -101,6 +102,7 @@
                     @location={{this.location}}
                     @source={{this.source}}
                     @pathname={{this.pathname}}
+                    @os={{this.os}}
                     @apiVersion={{this.apiVersion}}
                 />
             </div>
@@ -113,6 +115,7 @@
                     @location={{this.location}}
                     @source={{this.source}}
                     @pathname={{this.pathname}}
+                    @os={{this.os}}
                     @apiVersion={{this.apiVersion}}
                 />
             </div>
@@ -128,6 +131,7 @@
                     @location={{this.location}}
                     @source={{this.source}}
                     @pathname={{this.pathname}}
+                    @os={{this.os}}
                     @apiVersion={{this.apiVersion}}
                 />
             </div>
@@ -140,6 +144,7 @@
                         @location={{this.location}}
                         @source={{this.source}}
                         @pathname={{this.pathname}}
+                        @os={{this.os}}
                         @apiVersion={{this.apiVersion}}
                     />
             </div>

diff --git a/ghost/admin/app/utils/stats.js b/ghost/admin/app/utils/stats.js
@@ -145,7 +145,7 @@ export function getDateRange(chartRange) {
 }
 
 export function getStatsParams(config, props, additionalParams = {}) {
-    const {chartRange, audience, device, browser, location, source, pathname} = props;
+    const {chartRange, audience, device, browser, location, source, pathname, os} = props;
     const {startDate, endDate} = getDateRange(chartRange);
 
     const params = {
@@ -179,5 +179,9 @@ export function getStatsParams(config, props, additionalParams = {}) {
         params.pathname = pathname;
     }
 
+    if (os) {
+        params.os = os;
+    }
+
     return params;
 }