@redsift/dashboard 8.0.0-alpha.8 → 8.0.1

package/src/components/Dashboard/context.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DashboardContextProps, DashboardReducerState } from './types';
+
+export const initialState: DashboardReducerState = {
+  tableFilters: [],
+};
+
+export const DashboardContext = React.createContext<DashboardContextProps>({
+  state: initialState,
+} as DashboardContextProps);

package/src/components/Dashboard/index.ts

@@ -0,0 +1,4 @@
+export * from './Dashboard';
+export * from './context';
+export * from './reducer';
+export * from './types';

package/src/components/Dashboard/reducer.ts

@@ -0,0 +1,99 @@
+import { GridFilterItem } from '@redsift/table';
+import {
+  DashboardReducerState,
+  DashboardReducerAction,
+  DashboardReducerActionType,
+} from './types';
+
+const areEquals = (
+  tableFilter: GridFilterItem,
+  actionFilter: GridFilterItem
+) => {
+  return (
+    tableFilter.columnField === actionFilter.columnField &&
+    tableFilter.operatorValue === actionFilter.operatorValue
+  );
+};
+
+const addOrUpdateFilter = (
+  oldFilters: GridFilterItem[],
+  newFilter: GridFilterItem
+) => {
+  if (oldFilters.find((f) => areEquals(f, newFilter))) {
+    return oldFilters.map((f) => {
+      if (areEquals(f, newFilter)) {
+        return newFilter;
+      }
+      return f;
+    });
+  } else {
+    return [...oldFilters, newFilter];
+  }
+};
+
+const addOrUpdateFilters = (
+  oldFilters: GridFilterItem[],
+  newFilters: GridFilterItem[]
+) => {
+  let updatedFilters = oldFilters;
+  for (let i = 0; i < newFilters.length; i++) {
+    updatedFilters = addOrUpdateFilter(updatedFilters, newFilters[i]);
+  }
+  return updatedFilters;
+};
+
+const replaceFilters = (newFilters: GridFilterItem | GridFilterItem[]) => {
+  return Array.isArray(newFilters) ? newFilters : [newFilters];
+};
+
+const removeFilter = (
+  oldFilters: GridFilterItem[],
+  newFilter: GridFilterItem
+) => {
+  return oldFilters.filter((f) => !areEquals(f, newFilter));
+};
+
+const removeAllFilters = () => {
+  return [] as GridFilterItem[];
+};
+
+export const DashboardReducer = (
+  state: DashboardReducerState,
+  action: DashboardReducerAction
+): DashboardReducerState => {
+  switch (action.type) {
+    case DashboardReducerActionType.ResetFilter:
+      return {
+        ...state,
+        tableFilters: removeFilter(
+          state.tableFilters,
+          action.filter as GridFilterItem
+        ),
+      };
+    case DashboardReducerActionType.ResetFilters:
+      return { ...state, tableFilters: removeAllFilters() };
+    case DashboardReducerActionType.FilterTable:
+      return {
+        ...state,
+        tableFilters: addOrUpdateFilter(
+          state.tableFilters,
+          action.filter as GridFilterItem
+        ),
+      };
+
+    case DashboardReducerActionType.FilterTableBatch:
+      return {
+        ...state,
+        tableFilters: replaceFilters(action.filter!),
+      };
+
+    case DashboardReducerActionType.AppendFilterTableBatch:
+      return {
+        ...state,
+        tableFilters: addOrUpdateFilters(
+          state.tableFilters,
+          action.filter as GridFilterItem[]
+        ),
+      };
+  }
+};

package/src/components/Dashboard/types.ts

@@ -0,0 +1,47 @@
+import { ComponentProps, Dispatch, MutableRefObject, RefObject } from 'react';
+import { GridFilterItem } from '@redsift/table';
+import { GridApi } from '@mui/x-data-grid-pro';
+
+import { JSONArray } from '../../types';
+
+/**
+ * Context props.
+ */
+export type DashboardContextProps = {
+  dashboardRef?: RefObject<HTMLDivElement>;
+  data: JSONArray;
+  dataGridApiRef?: MutableRefObject<GridApi>;
+  dispatch: Dispatch<DashboardReducerAction>;
+  state: DashboardReducerState;
+  toggleUpdateContext?: () => void;
+};
+
+/**
+ * Reducer props.
+ */
+export type DashboardReducerState = {
+  tableFilters: GridFilterItem[];
+};
+
+export enum DashboardReducerActionType {
+  ResetFilter = 'reset-filter',
+  ResetFilters = 'reset-filters',
+  FilterTable = 'filter-table',
+  FilterTableBatch = 'filter-table-batch',
+  AppendFilterTableBatch = 'append-filter-table-batch',
+}
+
+export type DashboardReducerAction = {
+  type: DashboardReducerActionType;
+  filter?: GridFilterItem | GridFilterItem[];
+};
+
+/**
+ * Component props.
+ */
+export interface DashboardProps extends ComponentProps<'div'> {
+  /** Dataset that will be share across every components within the dashboard. */
+  data: JSONArray;
+  /** Datagrid API Ref. */
+  dataGridApiRef?: MutableRefObject<GridApi>;
+}

package/src/components/PdfExportButton/PdfDocument.tsx

@@ -0,0 +1,203 @@
+// istanbul ignore file
+
+import React from 'react';
+import { Document, Image, Page, Text, View } from '@react-pdf/renderer';
+import { GridValidRowModel } from '@mui/x-data-grid-pro';
+import {
+  PdfTableColumn,
+  PdfTableRowProps,
+  PdfTableProps,
+  PdfDocumentProps,
+  PdfStyles,
+} from './types';
+import { getPdfStyles } from './styles';
+
+const DEFAULT_COLUMN_WIDTH = 100;
+
+const getWidthColumn = (width: number, totalW: number, nrColumns: number) => {
+  // calculation width column where the 7px margin between the columns is included
+  return `${Math.round((width * 100) / (totalW - 7 * (nrColumns - 1)))}%`;
+};
+
+const PdfTableRow = ({
+  rowIndex,
+  rowData,
+  columns,
+  styles,
+  totalWidth,
+}: PdfTableRowProps) => {
+  return (
+    <View style={styles.tableRowContainer} key={`row-${rowIndex}`}>
+      {columns.map((column: PdfTableColumn, index: number) => {
+        const { field, width } = column;
+        let totalW = totalWidth;
+        let nrColumns = columns.length;
+
+        // The checkbox in the table will not be printed
+        if (field === '__check__') {
+          totalW = totalW - (width || 50);
+          nrColumns = nrColumns - 1;
+          return;
+        }
+        const widthColumn = getWidthColumn(
+          width || DEFAULT_COLUMN_WIDTH,
+          totalW,
+          nrColumns
+        );
+
+        // Empty value will print '-'
+        if (!rowData[field]) {
+          return (
+            <View
+              style={{
+                width: widthColumn,
+                paddingVertical: 2,
+                marginRight: 7,
+              }}
+              key={`cell-${rowIndex}-${index}`}
+            >
+              <Text style={styles.tableCellText}>{'-'}</Text>
+            </View>
+          );
+        }
+        return (
+          <View
+            style={{
+              width: widthColumn,
+              paddingVertical: 2,
+              marginRight: 7,
+            }}
+            key={`cell-${rowIndex}-${index}`}
+          >
+            <Text style={styles.tableCellText}>
+              {Array.isArray(rowData[field])
+                ? rowData[field].join(', ')
+                : rowData[field]}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const PdfTable = ({ dataTable, styles, localeText }: PdfTableProps) => {
+  const { data, columns, totalWidth } = dataTable;
+
+  return (
+    <>
+      <View style={styles.tableHeaderContainer}>
+        {columns.map((column: PdfTableColumn) => {
+          let totalW = totalWidth;
+          let nrColumns = columns.length;
+          const { field, headerName, width } = column;
+
+          // The checkbox in the table will not be printed
+          if (field === '__check__') {
+            totalW = totalW - (width || 50);
+            nrColumns = nrColumns - 1;
+            return;
+          }
+          const widthColumn = getWidthColumn(
+            width || DEFAULT_COLUMN_WIDTH,
+            totalW,
+            nrColumns
+          );
+
+          return (
+            <View
+              style={{
+                width: widthColumn,
+                paddingVertical: 2,
+                marginRight: 7,
+              }}
+              key={`heading-${field}`}
+            >
+              <Text style={styles.tableCellHeaderText}>{headerName}</Text>
+            </View>
+          );
+        })}
+      </View>
+      <View>
+        {data.map((row: GridValidRowModel, index: number) => {
+          if (index < 1000) {
+            return (
+              <PdfTableRow
+                key={index}
+                rowIndex={index}
+                rowData={data[index]}
+                columns={columns}
+                styles={styles}
+                totalWidth={totalWidth}
+              />
+            );
+          }
+        })}
+      </View>
+      {data.length >= 1000 ? (
+        <View style={styles.constraintsContainer}>
+          <Text style={styles.constraints}>
+            {localeText?.maxSizeDisclaimer ||
+              'Due to processing constraints this pdf is limited to the first 1000 rows of data.'}
+          </Text>
+        </View>
+      ) : null}
+    </>
+  );
+};
+
+const Pagination = ({ styles }: { styles: PdfStyles }) => {
+  return (
+    <Text
+      style={styles.pageNumber}
+      render={({ pageNumber, totalPages }) => `${pageNumber}/${totalPages}`}
+      fixed
+    />
+  );
+};
+
+export const PdfDocument = ({
+  dashboardImage,
+  introduction,
+  localeText,
+  logo,
+  dataTable,
+  primaryColor,
+}: PdfDocumentProps) => {
+  const styles = getPdfStyles(primaryColor);
+
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        <>
+          {logo ? (
+            <View style={styles.logoContainer}>
+              <Image src={logo} style={styles.logo} />
+            </View>
+          ) : null}
+          {introduction ? (
+            <View style={styles.introductionContainer}>
+              <Text style={styles.introductionText}>{introduction}</Text>
+            </View>
+          ) : null}
+          {dashboardImage ? (
+            <View style={styles.dashboardImageContainer}>
+              <Image src={dashboardImage as unknown as string} />
+            </View>
+          ) : null}
+          {dataTable ? (
+            <View style={styles.tableContainer}>
+              <PdfTable
+                dataTable={dataTable}
+                styles={styles}
+                localeText={localeText}
+              />
+            </View>
+          ) : null}
+
+          <Pagination styles={styles} />
+        </>
+      </Page>
+    </Document>
+  );
+};

package/src/components/PdfExportButton/PdfExportButton.tsx

@@ -0,0 +1,168 @@
+// istanbul ignore file
+
+import React, {
+  forwardRef,
+  JSXElementConstructor,
+  ReactElement,
+  RefObject,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  gridFilteredSortedRowEntriesSelector,
+  gridVisibleColumnDefinitionsSelector,
+  gridColumnsTotalWidthSelector,
+} from '@mui/x-data-grid-pro';
+import classNames from 'classnames';
+import { saveAs } from 'file-saver';
+import { pdf } from '@react-pdf/renderer';
+import domToImage from 'dom-to-image';
+
+import {
+  Comp,
+  Button,
+  RedsiftColorDefaultPrimary,
+  Spinner,
+} from '@redsift/design-system';
+
+import { PdfExportButtonProps } from './types';
+import { PdfDocument } from './PdfDocument';
+import { DashboardContext } from '../Dashboard';
+
+const COMPONENT_NAME = 'PdfExportButton';
+const CLASSNAME = 'redsift-pdf-export-button';
+
+const getDashboardImage = async (
+  componentRef: RefObject<HTMLElement>
+): Promise<string> => {
+  const filter = (el: Node) => {
+    const classList = (el as HTMLElement).classList;
+    return !(
+      classList?.contains('redsift-data-grid') ||
+      classList?.contains('redsift-button')
+    );
+  };
+
+  const dashboardHeight = (
+    componentRef.current as HTMLElement
+  ).getBoundingClientRect().height;
+  const datagridHeight =
+    (componentRef.current as HTMLElement)
+      ?.getElementsByClassName('redsift-data-grid')?.[0]
+      ?.getBoundingClientRect()?.height || 0;
+
+  return new Promise((resolve) => {
+    domToImage
+      .toPng(componentRef.current as HTMLElement, {
+        filter,
+        height: dashboardHeight - datagridHeight,
+      })
+      .then(function (dataUrl: string) {
+        resolve(dataUrl);
+      })
+      .catch(() => {
+        resolve('');
+      });
+  });
+};
+
+export const PdfExportButton: Comp<PdfExportButtonProps, HTMLButtonElement> =
+  forwardRef((props, ref) => {
+    const {
+      children,
+      className,
+      componentRef: propComponentRef,
+      fileName,
+      introduction,
+      localeText,
+      logo,
+      onClick,
+      primaryColor,
+      ...forwardedProps
+    } = props;
+    const [componentRef, setComponentRef] = useState(propComponentRef);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const { dashboardRef, dataGridApiRef } = useContext(DashboardContext);
+
+    useEffect(() => {
+      if (!componentRef || !componentRef.current) {
+        setComponentRef(dashboardRef);
+      }
+    }, [dashboardRef]);
+
+    const exportPdf = async () => {
+      if (onClick) {
+        onClick();
+      }
+      setIsLoading(true);
+      try {
+        const dashboardImage = await getDashboardImage(
+          componentRef || dashboardRef!
+        );
+
+        let dataTable;
+        if (
+          dataGridApiRef &&
+          dataGridApiRef.current &&
+          Object.keys(dataGridApiRef.current).length
+        ) {
+          dataTable = {
+            data: gridFilteredSortedRowEntriesSelector(
+              dataGridApiRef.current.state,
+              dataGridApiRef.current.instanceId
+            )
+              .slice(0, 1000)
+              .map(({ model }) => model),
+            columns: gridVisibleColumnDefinitionsSelector(
+              dataGridApiRef.current.state,
+              dataGridApiRef.current.instanceId
+            ),
+            totalWidth: gridColumnsTotalWidthSelector(
+              dataGridApiRef.current.state,
+              dataGridApiRef.current.instanceId
+            ),
+          };
+        }
+
+        const doc = (
+          <PdfDocument
+            localeText={localeText}
+            dashboardImage={dashboardImage}
+            introduction={introduction}
+            logo={logo}
+            primaryColor={primaryColor || RedsiftColorDefaultPrimary}
+            dataTable={dataTable}
+          />
+        );
+        const asPdf = pdf(
+          [] as unknown as ReactElement<
+            any,
+            string | JSXElementConstructor<any>
+          >
+        );
+        asPdf.updateContainer(doc);
+        const blob = await asPdf.toBlob();
+        saveAs(blob, fileName || 'redsift-dashboard.pdf');
+      } catch (e) {
+        console.log('error:', e);
+      }
+      setIsLoading(false);
+    };
+
+    return (
+      <Button
+        className={classNames(PdfExportButton.className, className)}
+        onClick={exportPdf}
+        isDisabled={isLoading}
+        {...forwardedProps}
+        ref={ref as RefObject<HTMLButtonElement>}
+      >
+        {isLoading ? <Spinner size="xsmall" color="no-data" /> : null}{' '}
+        {children}
+      </Button>
+    );
+  });
+PdfExportButton.className = CLASSNAME;
+PdfExportButton.displayName = COMPONENT_NAME;

package/src/components/PdfExportButton/index.ts

@@ -0,0 +1,3 @@
+// istanbul ignore file
+
+export * from './PdfExportButton';

package/src/components/PdfExportButton/styles.ts

@@ -0,0 +1,151 @@
+// istanbul ignore file
+
+import { Font, StyleSheet } from '@react-pdf/renderer';
+const BACKGROUND_COLOR = '#F8F8F8';
+const GREY_1 = '#E2E6EA';
+const GREY_2 = '#bff0fd';
+
+export const getPdfStyles = (primaryColor: string) => {
+  Font.register({
+    family: 'Source Code Pro',
+    fonts: [
+      {
+        src: 'https://fonts.gstatic.com/s/sourcecodepro/v7/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vT.ttf',
+      },
+    ],
+  });
+
+  Font.register({
+    family: 'Roboto',
+    fonts: [
+      {
+        fontWeight: 700,
+        src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/fonts/roboto/Roboto-Regular.ttf',
+      },
+      {
+        fontWeight: 400,
+        src: 'https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf',
+      },
+    ],
+  });
+
+  return StyleSheet.create({
+    page: {
+      borderTopStyle: 'solid',
+      borderTopWidth: 32,
+      borderTopColor: primaryColor,
+      borderBottomStyle: 'solid',
+      borderBottomWidth: 6,
+      borderBottomColor: primaryColor,
+      backgroundColor: BACKGROUND_COLOR,
+      paddingTop: 20,
+      paddingBottom: 40,
+    },
+    logoContainer: {
+      margin: 0,
+      paddingBottom: 10,
+      alignItems: 'center',
+      width: '100%',
+    },
+    logo: {
+      width: 'auto',
+      height: 30,
+    },
+    introductionContainer: {
+      lineHeight: 1.4,
+      textAlign: 'center',
+      marginHorizontal: 40,
+      marginVertical: 10,
+    },
+    introductionText: {
+      fontSize: 8,
+      fontFamily: 'Roboto',
+      fontWeight: 400,
+      color: 'black',
+    },
+    pageNumber: {
+      fontFamily: 'Source Code Pro',
+      position: 'absolute',
+      fontSize: 6,
+      bottom: 5,
+      right: 20,
+      left: 0,
+      textAlign: 'right',
+      color: 'black',
+    },
+    pageContinue: {
+      fontSize: 8,
+      fontFamily: 'Roboto',
+      fontWeight: 400,
+      top: -10,
+      left: 20,
+    },
+    tableContainer: {
+      backgroundColor: 'white',
+      marginHorizontal: 20,
+      marginVertical: 10,
+      paddingTop: 10,
+      paddingLeft: 10,
+      borderRightWidth: 1,
+      borderBottomWidth: 1,
+      borderRightColor: BACKGROUND_COLOR,
+      borderBottomColor: GREY_1,
+      width: 'auto',
+    },
+    tableRowContainer: {
+      flexDirection: 'row',
+      borderBottomColor: GREY_2,
+      alignItems: 'flex-start',
+      fontSize: 8,
+      marginLeft: 16,
+      marginRight: 24,
+      height: 'auto',
+    },
+    tableHeaderContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      fontSize: 7,
+      fontFamily: 'Roboto',
+      fontWeight: 700,
+      marginLeft: 16,
+      marginRight: 24,
+      marginBottom: 12,
+      paddingTop: 12,
+      paddingBottom: 12,
+      borderBottomWidth: 2,
+      borderBottomColor: primaryColor,
+    },
+    tableCellHeaderText: {
+      fontSize: 7,
+      fontFamily: 'Roboto',
+      fontWeight: 700,
+      color: 'black',
+      overflow: 'hidden',
+    },
+    tableCellText: {
+      fontSize: 6,
+      lineHeight: 1.5,
+      fontFamily: 'Roboto',
+      fontWeight: 400,
+      color: 'black',
+      overflow: 'hidden',
+    },
+    dashboardImageContainer: {
+      marginHorizontal: 20,
+      marginTop: 0,
+      marginBottom: 10,
+    },
+    constraintsContainer: {
+      width: 'auto',
+      height: 'auto',
+      paddingVertical: 30,
+      textAlign: 'center',
+    },
+    constraints: {
+      fontSize: 6,
+      fontFamily: 'Roboto',
+      fontWeight: 700,
+      color: 'black',
+    },
+  });
+};