@redsift/dashboard 8.0.0-alpha.8 → 8.0.1

package/src/components/Dashboard/Dashboard.stories.tsx

@@ -0,0 +1,602 @@
+import React, { RefObject, useRef, useState } from 'react';
+import { timeFormat as d3timeFormat } from 'd3';
+
+import mock from '../../../../../.storybook/static/mocks/bakery.json';
+import reportEventsMock from '../../../../../.storybook/static/mocks/oninbox-report-events.json';
+
+import { Flexbox, RedsiftColorOninboxPrimary } from '@redsift/design-system';
+import { TimeSeriesBarChart } from '../TimeSeriesBarChart';
+import { Dashboard } from './Dashboard';
+import { PdfExportButton } from '../PdfExportButton';
+import {
+  GridColumns,
+  CONTAINS_ANY_OF,
+  IS_ANY_OF,
+  IS_BETWEEN,
+  ENDS_WITH_ANY_OF,
+  GridSelectionModel,
+  GridFilterModel,
+  DataGrid,
+} from '@redsift/table';
+import { COUNT, SUM } from '../../utils';
+import { JSONArray } from '../../types';
+import { WithFilters } from '../WithFilters';
+import { NaturallyOrderedValue } from 'crossfilter2';
+import { BarChart, BarDatum, PieChart, ScatterPlot } from '@redsift/charts';
+
+export default {
+  title: 'Dashboard/Provider',
+};
+
+export const WithDataGrid = () => {
+  const data = mock.map((row, index) => ({ id: index, ...row }));
+
+  const columns = [
+    {
+      field: 'TransactionNumber',
+      headerName: 'Transaction Number',
+      filterable: false,
+      width: 250,
+    },
+    {
+      field: 'Items',
+      headerName: 'Items',
+      filterOperators: [IS_ANY_OF],
+      width: 250,
+    },
+    {
+      field: 'Daypart',
+      headerName: 'Daypart',
+      filterOperators: [IS_ANY_OF],
+      width: 250,
+    },
+    {
+      field: 'DayType',
+      headerName: 'DayType',
+      filterOperators: [IS_ANY_OF],
+      width: 250,
+    },
+    {
+      field: 'x',
+      headerName: 'x',
+      type: 'number',
+      filterOperators: [IS_BETWEEN],
+    },
+    {
+      field: 'y',
+      headerName: 'y',
+      type: 'number',
+      filterOperators: [IS_BETWEEN],
+    },
+  ];
+
+  return (
+    <Dashboard data={data}>
+      <Flexbox
+        flexDirection="row"
+        flexWrap="wrap"
+        justifyContent="space-evenly"
+      >
+        <Flexbox flexDirection="column" flexWrap="wrap">
+          <WithFilters
+            dimension={(d) => d.DayType}
+            group={COUNT}
+            datagridCategoryDimFilter={{
+              field: 'DayType',
+              operator: 'isAnyOf',
+            }}
+          >
+            <PieChart
+              title="DayType"
+              size="small"
+              variant="spacedDonut"
+              theme="dark"
+            />
+          </WithFilters>
+          <WithFilters
+            dimension={(d) => d.Daypart}
+            group={COUNT}
+            datagridCategoryDimFilter={{
+              field: 'Daypart',
+              operator: 'isAnyOf',
+            }}
+          >
+            <BarChart title="Daypart" size="small" theme="monochrome" />
+          </WithFilters>
+        </Flexbox>
+        <WithFilters
+          dimension={(d) => [+d.x, +d.y, d.Items]}
+          group={COUNT}
+          datagridCoordinatesCategoryDimFilter={[
+            {
+              field: 'x',
+              operator: 'isBetween',
+            },
+            {
+              field: 'y',
+              operator: 'isBetween',
+            },
+            {
+              field: 'Items',
+              operator: 'isAnyOf',
+            },
+          ]}
+        >
+          <ScatterPlot title="Items" variant="gridded" />
+        </WithFilters>
+      </Flexbox>
+      <WithFilters>
+        <DataGrid columns={columns} />
+      </WithFilters>
+    </Dashboard>
+  );
+};
+
+export const WithDifferentFilteringOperators = () => {
+  const data = [
+    {
+      id: 1,
+      sender: 'pierredupuis@redsift.io',
+      cost: 900,
+      reportedBy: ['Anne', 'Neil'],
+    },
+    {
+      id: 2,
+      sender: 'pierredupuis@redsift.io',
+      cost: 800,
+      reportedBy: ['Jose'],
+    },
+    {
+      id: 3,
+      sender: 'pierredupuis@gmail.com',
+      cost: 700,
+      reportedBy: ['Anne', 'Jose'],
+    },
+    {
+      id: 4,
+      sender: 'pierredupuis@hotmail.fr',
+      cost: 600,
+      reportedBy: ['Kitty'],
+    },
+    {
+      id: 5,
+      sender: 'anotherpierre@redsift.io',
+      cost: 500,
+      reportedBy: ['Miguel', 'Kitty'],
+    },
+    {
+      id: 6,
+      sender: 'pierredupuis@hotmail.fr',
+      cost: 400,
+      reportedBy: ['Anne', 'Neil'],
+    },
+  ];
+
+  const columns = [
+    {
+      field: 'sender',
+      headerName: 'Sender',
+      width: 250,
+      filterOperators: [ENDS_WITH_ANY_OF, IS_ANY_OF],
+    },
+    {
+      field: 'cost',
+      headerName: 'Cost',
+      width: 250,
+      filterable: false,
+    },
+    {
+      field: 'reportedBy',
+      headerName: 'Reported By',
+      width: 250,
+      filterOperators: [CONTAINS_ANY_OF],
+    },
+  ];
+
+  return (
+    <Dashboard data={data}>
+      <Flexbox flexDirection="row" justifyContent="space-evenly">
+        <WithFilters
+          dimension={(d) => d.sender.split('@')[1]}
+          group={COUNT}
+          datagridCategoryDimFilter={{
+            field: 'sender',
+            operator: 'endsWithAnyOf',
+          }}
+        >
+          <BarChart title="Sender domains" />
+        </WithFilters>
+        <WithFilters
+          dimension={(d) => d.sender}
+          group={SUM('cost')}
+          datagridCategoryDimFilter={{
+            field: 'sender',
+            operator: 'isAnyOf',
+          }}
+        >
+          <BarChart title="Cost per sender" />
+        </WithFilters>
+        <WithFilters
+          dimension={(d) => d.reportedBy}
+          group={COUNT}
+          datagridCategoryDimFilter={{
+            field: 'reportedBy',
+            operator: 'containsAnyOf',
+          }}
+          isDimensionArray
+        >
+          <BarChart title="Reporters" />
+        </WithFilters>
+      </Flexbox>
+      <DataGrid columns={columns} />
+    </Dashboard>
+  );
+};
+
+type ReportEvent = {
+  id: number;
+  sender: string;
+  subject: string;
+  userActions: string[];
+  userClassification: 'safe' | 'spam' | 'phishing';
+  userEmail: string;
+  userReasons: string[];
+  reportDateTime: string;
+};
+
+type AggregatedEmail = {
+  id: number;
+  sender: string;
+  subject: string;
+  userActions: string[];
+  userClassifications: Array<'safe' | 'spam' | 'phishing'>;
+  userEmails: string[];
+  userReasons: string[];
+  reportDateTimes: string[];
+  markedAs: string;
+  phishing: number;
+  spam: number;
+  other: number;
+};
+
+const reportEvents: ReportEvent[] = reportEventsMock.map(
+  (reportEvent, index) => {
+    return {
+      id: index,
+      sender: reportEvent.message.sender,
+      subject: reportEvent.message.subject,
+      userActions: reportEvent.userActions
+        .split(',')
+        .filter((element) => element),
+      userClassification:
+        reportEvent.userClassification === 'dangerous'
+          ? 'phishing'
+          : reportEvent.userClassification === 'spam'
+          ? 'spam'
+          : 'safe',
+      userEmail: reportEvent.userEmail,
+      userReasons: reportEvent.userReasons
+        .split(',')
+        .filter((element) => element),
+      reportDateTime: d3timeFormat('%Y-%m-%d %H:%M:%S')(
+        new Date(reportEvent.reportMetadata.dateTime)
+      ),
+    };
+  }
+);
+
+const aggregateReportsPerEmail = (reportEvents: ReportEvent[]) =>
+  reportEvents
+    .reduce((acc: AggregatedEmail[], curr: ReportEvent) => {
+      if (
+        !acc ||
+        acc.length === 0 ||
+        acc.findIndex(
+          (e) => e.sender === curr.sender && e.subject === curr.subject
+        ) === -1
+      ) {
+        acc.push({
+          id: acc.length,
+          sender: curr.sender,
+          subject: curr.subject,
+          userActions: [...curr.userActions],
+          userClassifications: [curr.userClassification],
+          userEmails: [curr.userEmail],
+          userReasons: [...curr.userReasons],
+          reportDateTimes: [curr.reportDateTime],
+          markedAs: '',
+          phishing: 0,
+          spam: 0,
+          other: 0,
+        });
+      } else {
+        const emailIndex = acc.findIndex(
+          (e) => e.sender === curr.sender && e.subject === curr.subject
+        );
+        acc[emailIndex] = {
+          ...acc[emailIndex],
+          userActions: [...acc[emailIndex].userActions, ...curr.userActions],
+          userClassifications: [
+            ...acc[emailIndex].userClassifications,
+            curr.userClassification,
+          ],
+          userEmails: [...acc[emailIndex].userEmails, curr.userEmail],
+          userReasons: [...acc[emailIndex].userReasons, ...curr.userReasons],
+          reportDateTimes: [
+            ...acc[emailIndex].reportDateTimes,
+            curr.reportDateTime,
+          ],
+        };
+      }
+      return acc;
+    }, [])
+    .map((reportEvent) => {
+      const computedReportEvent = reportEvent;
+
+      const phishing = reportEvent.userClassifications.filter(
+        (c: string) => c === 'phishing'
+      )?.length;
+      const spam = reportEvent.userClassifications.filter(
+        (c: string) => c === 'spam'
+      )?.length;
+      const other = reportEvent.userClassifications.length - phishing - spam;
+
+      const max = Math.max(Math.max(phishing, spam), other);
+
+      reportEvent.markedAs =
+        max === phishing ? 'Phishing' : max === spam ? 'Spam' : 'Safe / Other';
+      reportEvent.phishing = phishing;
+      reportEvent.spam = spam;
+      reportEvent.other = other;
+      return computedReportEvent;
+    });
+
+const getDateRange = (timeFilters: Date[][] | undefined) => {
+  if (timeFilters && timeFilters[0] && timeFilters[0][0]) {
+    return `${d3timeFormat('%Y-%m-%d')(timeFilters[0][0])} - ${d3timeFormat(
+      '%Y-%m-%d'
+    )(timeFilters[0][1])}`;
+  }
+};
+
+export const OninboxRemediationPage = () => {
+  const componentRef = useRef<HTMLDivElement>();
+  const [reportEventsAggregatedPerEmail, setReportEventsAggregatedPerEmail] =
+    useState(aggregateReportsPerEmail(reportEvents));
+  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>();
+  const pieFilters = useRef<NaturallyOrderedValue[]>([]);
+  const domainFilters = useRef<NaturallyOrderedValue[]>([]);
+  const actionFilters = useRef<NaturallyOrderedValue[]>([]);
+  const [timeFilters, setTimeFilters] = useState<Date[][]>([]);
+
+  const appliedFilters = [
+    ...pieFilters.current,
+    ...domainFilters.current,
+    ...actionFilters.current,
+  ].join(', ');
+
+  const dateRange = getDateRange(timeFilters);
+  let introduction = 'OnINBOX Report for Cameron\nReport Status: Resolved';
+  if (dateRange) {
+    introduction = `${introduction}\nDate Range: ${dateRange}`;
+  }
+  if (appliedFilters) {
+    introduction = `${introduction}\nApplied Filters: ${appliedFilters}`;
+  }
+
+  const columns: GridColumns = [
+    {
+      field: 'sender',
+      headerName: 'Sender',
+      width: 300,
+      filterOperators: [ENDS_WITH_ANY_OF],
+    },
+    {
+      field: 'subject',
+      headerName: 'Subject',
+      width: 300,
+      filterable: false,
+    },
+    {
+      field: 'markedAs',
+      headerName: 'Marked As',
+      width: 200,
+      filterOperators: [IS_ANY_OF],
+    },
+    {
+      field: 'phishing',
+      headerName: 'Phishing',
+      width: 100,
+      filterable: false,
+    },
+    {
+      field: 'spam',
+      headerName: 'Spam',
+      width: 100,
+      filterable: false,
+    },
+    {
+      field: 'other',
+      headerName: 'Safe / Other',
+      width: 100,
+      filterable: false,
+    },
+    {
+      field: 'userReasons',
+      headerName: 'User Activity',
+      width: 300,
+      filterOperators: [CONTAINS_ANY_OF],
+    },
+  ];
+
+  const debounce = (fn: Function, ms = 300) => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    return function (this: unknown, ...args: unknown[]) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn.apply(this, args), ms);
+    };
+  };
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        background: '#ffffff',
+      }}
+      ref={componentRef as RefObject<HTMLDivElement>}
+    >
+      <TimeSeriesBarChart
+        data={reportEvents}
+        dateTimeFieldName="reportDateTime"
+        dateTimeFormat="%Y-%m-%d %H:%M:%S"
+        dateTimeGroup="day"
+        dimension={(d) => d.reportDateTime as number}
+        onFilter={debounce((filters?: Date[][], allFiltered?: JSONArray) => {
+          if (filters) {
+            setTimeFilters(filters);
+          }
+          setReportEventsAggregatedPerEmail([
+            ...aggregateReportsPerEmail(allFiltered as ReportEvent[]),
+          ]);
+        })}
+        size="large"
+        stackedCategory="userClassification"
+        theme={{
+          success: 'safe',
+          warning: 'spam',
+          danger: 'phishing',
+        }}
+        title="Report Overview"
+        xAxisLabel="ReportedDate"
+        yAxisLabel="Reports"
+      />
+
+      <Dashboard data={reportEventsAggregatedPerEmail}>
+        <div
+          style={{
+            position: 'absolute',
+            top: '-10px',
+            right: '-10px',
+          }}
+        >
+          <PdfExportButton
+            introduction={introduction}
+            variant="secondary"
+            logo="images/oninbox.png"
+            primaryColor={RedsiftColorOninboxPrimary}
+            componentRef={componentRef as RefObject<HTMLDivElement>}
+          >
+            Download full report
+          </PdfExportButton>
+        </div>
+        <Flexbox flexDirection="row" justifyContent="space-evenly">
+          <WithFilters
+            dimension={(d) => d.markedAs}
+            group={COUNT}
+            datagridCategoryDimFilter={{
+              field: 'markedAs',
+              operator: 'isAnyOf',
+            }}
+            onFilter={(filters) => {
+              if (filters) {
+                pieFilters.current = filters;
+              }
+            }}
+          >
+            <PieChart
+              title="Emails Reported As"
+              theme={{
+                success: 'Safe / Other',
+                warning: 'Spam',
+                danger: 'Phishing',
+              }}
+              variant="spaced"
+            />
+          </WithFilters>
+          <WithFilters
+            dimension={(d: AggregatedEmail) => d.sender.split('@')?.[1]}
+            group={COUNT}
+            datagridCategoryDimFilter={{
+              field: 'sender',
+              operator: 'endsWithAnyOf',
+            }}
+            onFilter={(filters) => {
+              if (filters) {
+                domainFilters.current = filters;
+              }
+            }}
+          >
+            <BarChart
+              theme="monochrome"
+              title="Top Reported Domains"
+              caping={3}
+              others={false}
+            />
+          </WithFilters>
+          <WithFilters
+            dimension={(d: AggregatedEmail) => d.userReasons}
+            group={COUNT}
+            datagridCategoryDimFilter={{
+              field: 'userReasons',
+              operator: 'containsAnyOf',
+            }}
+            isDimensionArray
+            onFilter={(filters) => {
+              if (filters) {
+                actionFilters.current = filters;
+              }
+            }}
+          >
+            <BarChart
+              title="User Activity"
+              theme="monochrome"
+              caping={5}
+              others={false}
+              labelDecorator={(datum: BarDatum) =>
+                ({
+                  'clicked-links':
+                    'I clicked one or multiple links within the email',
+                  'opened-attachments': 'I opened one or multiple attachments',
+                  'responded-email': 'I responded to this email',
+                  'prior-emails':
+                    'I have received emails from this sender before',
+                  'trusted-sender': 'I trust this sender',
+                  'trusted-content':
+                    'The contents of this email appear to be trustworthy',
+                  'unsolicited-emails':
+                    'I have never requested to receive emails from this domain',
+                  sender: 'I no longer wish to receive emails from this sender',
+                  'company-or-domain':
+                    'I no longer wish to receive emails from this domain',
+                  'internal-impersonation':
+                    'The sender is impersonating somebody internally',
+                  'external-impersonation':
+                    'The sender is impersonating somebody externally',
+                  'suspicious-attachments':
+                    'The email contains suspicious attachments',
+                  'malicious-links':
+                    'The email is requesting I open on potentially malicious links',
+                  'personal-info':
+                    'The email is asking for personal information such as bank details, password, or other personal information',
+                  money:
+                    'The email is asking to send money or crypto, pay an invoice or requesting gift card',
+                }[datum.data.key]!)
+              }
+            />
+          </WithFilters>
+        </Flexbox>
+        <WithFilters
+          onFilter={(filterModel: GridFilterModel) => console.log(filterModel)}
+        >
+          <DataGrid
+            columns={columns}
+            checkboxSelection
+            onSelectionModelChange={setSelectionModel}
+            selectionModel={selectionModel}
+          />
+        </WithFilters>
+        {JSON.stringify(selectionModel)}
+      </Dashboard>
+    </div>
+  );
+};

package/src/components/Dashboard/Dashboard.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Dashboard } from '.';
+
+describe('Dashboard', () => {
+  it('supports custom className', () => {
+    const tree = render(<Dashboard className="test-class" data={[]} />);
+    const component = tree.asFragment().firstChild;
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining(Dashboard.className!)
+    );
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining('test-class')
+    );
+  });
+});

package/src/components/Dashboard/Dashboard.tsx

@@ -0,0 +1,68 @@
+import React, {
+  forwardRef,
+  RefObject,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+import classNames from 'classnames';
+import { useGridApiRef } from '@mui/x-data-grid-pro';
+
+import { Comp } from '@redsift/design-system';
+import { DashboardContext } from './context';
+import { DashboardContextProps, DashboardProps } from './types';
+import { DashboardReducer } from './reducer';
+import { CrossfilterRegistry } from '../CrossfilterRegistry';
+
+const COMPONENT_NAME = 'Dashboard';
+const CLASSNAME = 'redsift-dashboard-container';
+const DEFAULT_PROPS: Partial<DashboardProps> = {};
+
+export const Dashboard: Comp<DashboardProps, HTMLDivElement> = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      data,
+      dataGridApiRef: propsDataGridApiRef,
+      ...forwardedProps
+    } = props;
+
+    const providerRef = ref || useRef<HTMLDivElement>();
+    const dataGridApiRef = propsDataGridApiRef || useGridApiRef();
+    const [updateContext, setUpdateContext] = useState(false);
+
+    const [state, dispatch] = useReducer(DashboardReducer, {
+      tableFilters: [],
+    });
+
+    const value = useMemo<DashboardContextProps>(
+      () => ({
+        dashboardRef: providerRef as RefObject<HTMLDivElement>,
+        data,
+        dataGridApiRef,
+        dispatch,
+        ndx: CrossfilterRegistry.get(data),
+        state,
+        toggleUpdateContext: () => setUpdateContext(!updateContext),
+      }),
+      [data, state, updateContext]
+    );
+
+    return (
+      <div
+        {...forwardedProps}
+        className={classNames(Dashboard.className, className)}
+        ref={providerRef as RefObject<HTMLDivElement>}
+      >
+        <DashboardContext.Provider value={value as DashboardContextProps}>
+          {children}
+        </DashboardContext.Provider>
+      </div>
+    );
+  }
+);
+Dashboard.className = CLASSNAME;
+Dashboard.defaultProps = DEFAULT_PROPS;
+Dashboard.displayName = COMPONENT_NAME;