diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index 7f8e23ebb..b368bcf9b 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -34,6 +34,7 @@ import SlowestDomains
import SpeedIndexByLocationExample
from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample';
import HeatmapsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample';
+import ByReferrer from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer';
export const CARD_CATEGORY = {
PRODUCT_ANALYTICS: 'product-analytics',
@@ -417,6 +418,15 @@ export const CARD_LIST: CardType[] = [
example: ByUrl
},
+ {
+ title: 'Sessions by Referrer',
+ key: FilterKey.REFERRER,
+ cardType: TABLE,
+ metricOf: FilterKey.REFERRER,
+ category: CARD_CATEGORIES[2].key,
+ example: ByReferrer
+ },
+
// Errors Tracking
{
title: 'Sessions Impacted by JS Errors',
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer.tsx
new file mode 100644
index 000000000..75aa43cb1
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import ByComponent from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component';
+import { Icon } from 'UI';
+
+function ByReferrer(props: any) {
+ const rows = [
+ {
+ label: 'https://www.google.com',
+ ptitle: 'Dresses',
+ value: '500',
+ progress: 75,
+ icon:
+ },
+ {
+ label: 'https://www.reddit.com',
+ ptitle: 'Search: summer dresses',
+ value: '306',
+ progress: 60,
+ icon:
+ },
+ {
+ label: 'https://www.company.com/account/orders',
+ ptitle: 'Account: Orders',
+ value: '198',
+ progress: 30,
+ icon:
+ },
+ {
+ label: 'android-app://com.slack/',
+ ptitle: 'Checkout: Confirmation',
+ value: '47',
+ progress: 15,
+ icon:
+ }
+ ];
+
+ const lineWidth = 240;
+ return (
+
+ );
+}
+
+export default ByReferrer;
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 1b67e2609..5e3eb4d6a 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -190,11 +190,6 @@ function WidgetChart(props: Props) {
onClick={onChartClick}
isTemplate={isTemplate}
/>
- //
);
} else if (viewType === 'pieChart') {
return (
diff --git a/frontend/app/mstore/types/sessionsCardData.ts b/frontend/app/mstore/types/sessionsCardData.ts
index a3984e1c9..cf0cf7b3e 100644
--- a/frontend/app/mstore/types/sessionsCardData.ts
+++ b/frontend/app/mstore/types/sessionsCardData.ts
@@ -61,8 +61,8 @@ export class SessionsByRow {
const { nameFormatter, iconProvider } = this.getFormatters(metricType);
this.name = json.name;
this.displayName = nameFormatter.format(json.name) || 'Unidentified';
- this.sessionCount = numberWithCommas(json.sessionCount);
- this.progress = Math.round((json.sessionCount / totalSessions) * 100);
+ this.sessionCount = numberWithCommas(json.total);
+ this.progress = Math.round((json.total / totalSessions) * 100);
this.icon = iconProvider.getIcon(json);
return this;
}
@@ -83,6 +83,8 @@ export class SessionsByRow {
return { nameFormatter: new BaseFormatter(), iconProvider: new OsIconProvider() };
case 'userId':
return { nameFormatter: new UserNameFormatter(), iconProvider: new UserIconProvider() };
+ case 'referrer':
+ return { nameFormatter: new BaseFormatter(), iconProvider: new UrlIconProvider() };
default:
return { nameFormatter: new BaseFormatter(), iconProvider: new DefaultIconProvider() };
}
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index 6c92a8348..b8929ac43 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -303,7 +303,7 @@ export default class Widget {
} else if (this.metricType === INSIGHTS) {
_data['issues'] = data
.filter((i: any) => i.change > 0 || i.change < 0)
- .map(
+x .map(
(i: any) =>
new InsightIssue(i.category, i.name, i.ratio, i.oldValue, i.value, i.change, i.isNew)
);