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) );