Sanitize labels in Traffic Analytics#22568
Conversation
ref ANAL-148, ANAL-147 - Some of the labels and names should be updated to show a more human readable format
WalkthroughThis pull request refactors how statistical labels are processed and displayed throughout the Ghost Admin. In various chart files (technical.js, top-locations.js, top-sources.js), the code now uses a centralized mapping ( Possibly related PRs
Suggested labels
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ghost/admin/app/components/stats/charts/technical.jsOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
ghost/admin/app/utils/stats.jsOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
ghost/admin/app/components/stats/charts/top-locations.jsOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
ghost/admin/app/utils/stats.js (1)
36-53: Well-structured label mapping systemThe introduction of
STATS_LABEL_MAPPINGScreates a centralized location for human-readable label mappings, organized by category (Countries, Technical, Sources). This facilitates consistent labeling across the application and simplifies future additions.Consider adding more countries to the mapping for more comprehensive coverage, as currently only US and Taiwan are included.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
ghost/admin/app/components/stats/charts/technical.js(3 hunks)ghost/admin/app/components/stats/charts/top-locations.js(2 hunks)ghost/admin/app/components/stats/charts/top-sources.js(2 hunks)ghost/admin/app/controllers/stats.js(2 hunks)ghost/admin/app/styles/layouts/stats.css(1 hunks)ghost/admin/app/templates/stats.hbs(3 hunks)ghost/admin/app/utils/stats.js(2 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
ghost/admin/app/components/stats/charts/technical.js (1)
ghost/admin/app/utils/stats.js (2) (2)
STATS_LABEL_MAPPINGS(36-53)STATS_LABEL_MAPPINGS(36-53)
ghost/admin/app/controllers/stats.js (1)
ghost/admin/app/utils/stats.js (2) (2)
STATS_LABEL_MAPPINGS(36-53)STATS_LABEL_MAPPINGS(36-53)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Admin tests - Chrome
🔇 Additional comments (21)
ghost/admin/app/components/stats/charts/top-locations.js (2)
9-9: Good addition - using centralized label mappingsAdding the import for
STATS_LABEL_MAPPINGSenables the component to leverage a consistent set of human-readable labels across the application.
53-54: Improved country name resolution with fallback mechanismThe updated
getCountryNamemethod now checks for entries in the centralized mapping first before falling back to the ISO country name lookup, enhancing consistency while maintaining backward compatibility for countries not in the mapping.ghost/admin/app/styles/layouts/stats.css (1)
146-148: Adjusted letter spacing for better readabilityThe letter spacing change from
-0.05emto-0.02emprovides slightly more space between characters in metric values, improving readability while maintaining a compact display.ghost/admin/app/components/stats/charts/top-sources.js (2)
8-8: Good addition - using centralized label mappingsAdding the import for
STATS_LABEL_MAPPINGSenables the component to use consistent human-readable labels for sources.
95-95: Improved source label display with fallback mechanismThe updated label rendering now uses the centralized mapping to show more recognizable names for common sources (like "Google" instead of "google.com"), while maintaining the original label as a fallback. This improves user experience by displaying more familiar labels.
ghost/admin/app/components/stats/charts/technical.js (5)
6-6: Import of STATS_LABEL_MAPPINGS looks good.Adding the import for
STATS_LABEL_MAPPINGSsupports the goal of standardizing label transformations across the application.
8-8: LGTM: Helper import for fallback formatting.Importing the
capitalizeFirstLetterhelper is a good approach for providing consistent fallback formatting when a mapping isn't available.
71-71: LGTM: Simplified name assignment.The change simplifies how the name property is derived by directly using the value from
item[indexBy]without manipulation, which allows the centralized formatting to be applied later.
157-157: LGTM: Passing the original name to filter function.Passing the unmodified
item.nameto the filter function ensures consistent filtering behavior based on the original data values.
162-162: LGTM: Improved label display with fallback.Using
STATS_LABEL_MAPPINGSwith a fallback tocapitalizeFirstLetterensures that labels are displayed in a consistent, human-readable format across the application.ghost/admin/app/templates/stats.hbs (5)
39-39: LGTM: Added OS to filter visibility condition.Including
this.osin the condition ensures that OS filters will trigger the display of the filter section, improving consistency in the user interface.
49-49: LGTM: Using formatted source display.Using
this.formattedSourceinstead of the raw source improves readability by displaying human-friendly names for common sources.
55-55: LGTM: Using formatted location display.Using
this.formattedLocationimproves the user experience by displaying full country names instead of country codes.
61-61: LGTM: Using formatted device display.Using
this.formattedDeviceprovides more user-friendly device names, improving overall readability.
71-75: LGTM: Added OS filter display section.Adding a conditional section for OS filters with formatted OS names completes the set of filter options and provides a consistent user experience across all filter types.
ghost/admin/app/controllers/stats.js (6)
5-5: LGTM: Import of centralized label mappings.Importing
STATS_LABEL_MAPPINGSallows for consistent label formatting across the application.
7-7: LGTM: Helper import for fallback formatting.Importing the
capitalizeFirstLetterhelper provides a consistent way to format labels that don't have explicit mappings.
86-88: LGTM: Improved location formatting with multi-layer fallback.The
formattedLocationgetter correctly prioritizes the mapping fromSTATS_LABEL_MAPPINGS, then falls back to the countries library, and finally to 'Unknown' if neither is available.
90-92: LGTM: Device formatting with capitalization fallback.The
formattedDevicegetter properly uses the mapping or falls back to capitalizing the first letter of the device name.
94-96: LGTM: Source formatting with simple fallback.The
formattedSourcegetter correctly uses the mapping or falls back to the original source value.
98-100: LGTM: OS formatting with simple fallback.The
formattedOsgetter properly uses the mapping or falls back to the original OS value.
1 participant
ref ANAL-148, ANAL-147