Skip to content

Commit 53b4bdf

Browse files
sanne-sansanne-san
committed
Show percentages permanently in custom props detailed view
1 parent 99fb33f commit 53b4bdf

6 files changed

Lines changed: 28 additions & 31 deletions

File tree

‎assets/js/dashboard/stats/devices/index.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,7 @@ function Browsers({ afterFetchData }) {
7878
metrics.createVisitors({ meta: { plot: true } }),
7979
!hasConversionGoalFilter(query) &&
8080
metrics.createPercentage({ meta: { showOnHover: true } }),
81-
hasConversionGoalFilter(query) &&
82-
metrics.createConversionRate()
81+
hasConversionGoalFilter(query) && metrics.createConversionRate()
8382
].filter((metric) => !!metric)
8483
}
8584

@@ -125,8 +124,7 @@ function BrowserVersions({ afterFetchData }) {
125124
metrics.createVisitors({ meta: { plot: true } }),
126125
!hasConversionGoalFilter(query) &&
127126
metrics.createPercentage({ meta: { showOnHover: true } }),
128-
hasConversionGoalFilter(query) &&
129-
metrics.createConversionRate()
127+
hasConversionGoalFilter(query) && metrics.createConversionRate()
130128
].filter((metric) => !!metric)
131129
}
132130

@@ -195,8 +193,7 @@ function OperatingSystems({ afterFetchData }) {
195193
metrics.createPercentage({
196194
meta: { showOnHover: true, hiddenOnMobile: true }
197195
}),
198-
hasConversionGoalFilter(query) &&
199-
metrics.createConversionRate()
196+
hasConversionGoalFilter(query) && metrics.createConversionRate()
200197
].filter((metric) => !!metric)
201198
}
202199

@@ -247,8 +244,7 @@ function OperatingSystemVersions({ afterFetchData }) {
247244
metrics.createVisitors({ meta: { plot: true } }),
248245
!hasConversionGoalFilter(query) &&
249246
metrics.createPercentage({ meta: { showOnHover: true } }),
250-
hasConversionGoalFilter(query) &&
251-
metrics.createConversionRate()
247+
hasConversionGoalFilter(query) && metrics.createConversionRate()
252248
].filter((metric) => !!metric)
253249
}
254250

@@ -292,8 +288,7 @@ function ScreenSizes({ afterFetchData }) {
292288
metrics.createVisitors({ meta: { plot: true } }),
293289
!hasConversionGoalFilter(query) &&
294290
metrics.createPercentage({ meta: { showOnHover: true } }),
295-
hasConversionGoalFilter(query) &&
296-
metrics.createConversionRate()
291+
hasConversionGoalFilter(query) && metrics.createConversionRate()
297292
].filter((metric) => !!metric)
298293
}
299294

‎assets/js/dashboard/stats/locations/index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ function Countries({ query, site, onClick, afterFetchData }) {
3939
metrics.createVisitors({ meta: { plot: true } }),
4040
!hasConversionGoalFilter(query) &&
4141
metrics.createPercentage({ meta: { showOnHover: true } }),
42-
hasConversionGoalFilter(query) &&
43-
metrics.createConversionRate()
42+
hasConversionGoalFilter(query) && metrics.createConversionRate()
4443
].filter((metric) => !!metric)
4544
}
4645

@@ -84,8 +83,7 @@ function Regions({ query, site, onClick, afterFetchData }) {
8483
metrics.createVisitors({ meta: { plot: true } }),
8584
!hasConversionGoalFilter(query) &&
8685
metrics.createPercentage({ meta: { showOnHover: true } }),
87-
hasConversionGoalFilter(query) &&
88-
metrics.createConversionRate()
86+
hasConversionGoalFilter(query) && metrics.createConversionRate()
8987
].filter((metric) => !!metric)
9088
}
9189

@@ -126,8 +124,7 @@ function Cities({ query, site, afterFetchData }) {
126124
metrics.createVisitors({ meta: { plot: true } }),
127125
!hasConversionGoalFilter(query) &&
128126
metrics.createPercentage({ meta: { showOnHover: true } }),
129-
hasConversionGoalFilter(query) &&
130-
metrics.createConversionRate()
127+
hasConversionGoalFilter(query) && metrics.createConversionRate()
131128
].filter((metric) => !!metric)
132129
}
133130

‎assets/js/dashboard/stats/modals/breakdown-modal.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ type BreakdownModalProps = {
3737
/** Function that must return a new query that contains appropriate search filter for searchValue param. */
3838
addSearchFilter?: (q: DashboardQuery, searchValue: string) => DashboardQuery
3939
searchEnabled?: boolean
40+
/** When true, keep the percentage metric as a permanently visible, sortable column. */
41+
showPercentageColumn?: boolean
4042
}
4143

4244
/**
@@ -64,6 +66,7 @@ export default function BreakdownModal<TListItem extends { name: string }>({
6466
renderIcon,
6567
getExternalLinkUrl,
6668
searchEnabled = true,
69+
showPercentageColumn = false,
6770
afterFetchData,
6871
afterFetchNextPage,
6972
addSearchFilter,
@@ -147,7 +150,7 @@ export default function BreakdownModal<TListItem extends { name: string }>({
147150
)
148151
},
149152
...breakdownMetrics
150-
.filter((m) => m.key !== 'percentage')
153+
.filter((m) => showPercentageColumn || m.key !== 'percentage')
151154
.map(
152155
(m): ColumnConfiguraton<TListItem> => ({
153156
label: m.renderLabel(query),
@@ -156,7 +159,13 @@ export default function BreakdownModal<TListItem extends { name: string }>({
156159
align: 'right',
157160
metricWarning: getMetricWarning(m, meta),
158161
renderValue: (item, isRowHovered) =>
159-
m.renderValue(item, meta, { detailedView: true, isRowHovered }),
162+
m.renderValue(
163+
showPercentageColumn && m.key === 'visitors'
164+
? { ...item, percentage: null }
165+
: item,
166+
meta,
167+
{ detailedView: true, isRowHovered }
168+
),
160169
onSort: m.sortable ? () => toggleSortByMetric(m) : undefined,
161170
sortDirection: orderByDictionary[m.key]
162171
})
@@ -171,7 +180,8 @@ export default function BreakdownModal<TListItem extends { name: string }>({
171180
toggleSortByMetric,
172181
renderIcon,
173182
getExternalLinkUrl,
174-
meta
183+
meta,
184+
showPercentageColumn
175185
]
176186
)
177187

‎assets/js/dashboard/stats/modals/props.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ function PropsModal() {
7171
metrics={chooseMetrics()}
7272
getFilterInfo={getFilterInfo}
7373
addSearchFilter={addSearchFilter}
74+
showPercentageColumn
7475
/>
7576
</Modal>
7677
)

‎assets/js/dashboard/stats/pages/index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ function EntryPages({ afterFetchData }) {
3939
}),
4040
!hasConversionGoalFilter(query) &&
4141
metrics.createPercentage({ meta: { showOnHover: true } }),
42-
hasConversionGoalFilter(query) &&
43-
metrics.createConversionRate()
42+
hasConversionGoalFilter(query) && metrics.createConversionRate()
4443
].filter((metric) => !!metric)
4544
}
4645

@@ -88,8 +87,7 @@ function ExitPages({ afterFetchData }) {
8887
}),
8988
!hasConversionGoalFilter(query) &&
9089
metrics.createPercentage({ meta: { showOnHover: true } }),
91-
hasConversionGoalFilter(query) &&
92-
metrics.createConversionRate()
90+
hasConversionGoalFilter(query) && metrics.createConversionRate()
9391
].filter((metric) => !!metric)
9492
}
9593

@@ -133,8 +131,7 @@ function TopPages({ afterFetchData }) {
133131
metrics.createVisitors({ meta: { plot: true } }),
134132
!hasConversionGoalFilter(query) &&
135133
metrics.createPercentage({ meta: { showOnHover: true } }),
136-
hasConversionGoalFilter(query) &&
137-
metrics.createConversionRate()
134+
hasConversionGoalFilter(query) && metrics.createConversionRate()
138135
].filter((metric) => !!metric)
139136
}
140137

‎assets/js/dashboard/stats/sources/source-list.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,7 @@ function AllSources({ afterFetchData }) {
7272
metrics.createVisitors({ meta: { plot: true } }),
7373
!hasConversionGoalFilter(query) &&
7474
metrics.createPercentage({ meta: { showOnHover: true } }),
75-
hasConversionGoalFilter(query) &&
76-
metrics.createConversionRate()
75+
hasConversionGoalFilter(query) && metrics.createConversionRate()
7776
].filter((metric) => !!metric)
7877
}
7978

@@ -111,8 +110,7 @@ function Channels({ onClick, afterFetchData }) {
111110
metrics.createVisitors({ meta: { plot: true } }),
112111
!hasConversionGoalFilter(query) &&
113112
metrics.createPercentage({ meta: { showOnHover: true } }),
114-
hasConversionGoalFilter(query) &&
115-
metrics.createConversionRate()
113+
hasConversionGoalFilter(query) && metrics.createConversionRate()
116114
].filter((metric) => !!metric)
117115
}
118116

@@ -162,8 +160,7 @@ function UTMSources({ tab, afterFetchData }) {
162160
metrics.createVisitors({ meta: { plot: true } }),
163161
!hasConversionGoalFilter(query) &&
164162
metrics.createPercentage({ meta: { showOnHover: true } }),
165-
hasConversionGoalFilter(query) &&
166-
metrics.createConversionRate()
163+
hasConversionGoalFilter(query) && metrics.createConversionRate()
167164
].filter((metric) => !!metric)
168165
}
169166

0 commit comments

Comments
 (0)