feat(ui) - table of referrer card (#2484)

* feat(ui): table of referrer

* change(ui): click filter with selector options

* change(ui): total property

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',

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: <Icon name='link-45deg' size={24} />
+    },
+    {
+      label: 'https://www.reddit.com',
+      ptitle: 'Search: summer dresses',
+      value: '306',
+      progress: 60,
+      icon: <Icon name='link-45deg' size={24} />
+    },
+    {
+      label: 'https://www.company.com/account/orders',
+      ptitle: 'Account: Orders',
+      value: '198',
+      progress: 30,
+      icon: <Icon name='link-45deg' size={24} />
+    },
+    {
+      label: 'android-app://com.slack/',
+      ptitle: 'Checkout: Confirmation',
+      value: '47',
+      progress: 15,
+      icon: <Icon name='link-45deg' size={24} />
+    }
+  ];
+
+  const lineWidth = 240;
+  return (
+    <ByComponent
+      {...props}
+      rows={rows}
+      lineWidth={lineWidth}
+    />
+  );
+}
+
+export default ByReferrer;

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -190,11 +190,6 @@ function WidgetChart(props: Props) {
                         onClick={onChartClick}
                         isTemplate={isTemplate}
                     />
-                    // <CustomMetricTable
-                    //     metric={metric} data={data[0]}
-                    //     onClick={onChartClick}
-                    //     isTemplate={isTemplate}
-                    // />
                 );
             } else if (viewType === 'pieChart') {
                 return (

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

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