feat(BalanceSheet|ProfitLoss): comparions feature.

src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import 'style/pages/FinancialStatements/BalanceSheet.scss';
 
 import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
 import { FinancialStatement } from 'components';

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -1,14 +1,13 @@
-import React, { useMemo, useCallback } from 'react';
+import React from 'react';
+import styled from 'styled-components';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import { CellTextSpan } from 'components/Datatable/Cells';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
 
-import { defaultExpanderReducer, getColumnWidth } from 'utils';
-
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+import { TableStyle } from 'common';
 import { useBalanceSheetColumns } from './components';
 
 /**
@@ -20,54 +19,17 @@ export default function BalanceSheetTable({
 }) {
   // Balance sheet context.
   const {
-    balanceSheet: { tableRows, columns, query },
-    isLoading,
+    balanceSheet: { table, query },
   } = useBalanceSheetContext();
 
+  // Retrieve the database columns.
   const tableColumns = useBalanceSheetColumns();
 
-  // const tableColumns = useMemo(
-  //   () => [
-  //     {
-  //       Header: intl.get('account_name'),
-  //       accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
-  //       className: 'account_name',
-  //       textOverview: true,
-  //       width: 240,
-  //     },
-  //     ...(query.display_columns_type === 'total'
-  //       ? [
-  //           {
-  //             Header: intl.get('total'),
-  //             accessor: 'total.formatted_amount',
-  //             Cell: CellTextSpan,
-  //             className: 'total',
-  //             width: 140,
-  //           },
-  //         ]
-  //       : []),
-  //     ...(query.display_columns_type === 'date_periods'
-  //       ? columns.map((column, index) => ({
-  //           id: `date_period_${index}`,
-  //           Header: column,
-  //           Cell: CellTextSpan,
-  //           accessor: `total_periods[${index}].formatted_amount`,
-  //           className: classNames('total-period', `total-periods-${index}`),
-  //           width: getColumnWidth(
-  //             tableRows,
-  //             `total_periods.${index}.formatted_amount`,
-  //             { minWidth: 100 },
-  //           ),
-  //         }))
-  //       : []),
-  //   ],
-  //   [query, columns, tableRows],
-  // );
-
-  // Calculates the default expanded rows of balance sheet table.
-  // const expandedRows = useMemo(() => {
-  //   return defaultExpanderReducer(tableRows, 4);
-  // }, [tableRows]);
+  // Retrieve default expanded rows of balance sheet.
+  const expandedRows = React.useMemo(
+    () => defaultExpanderReducer(table?.rows || [], 3),
+    [table],
+  );
 
   return (
     <FinancialSheet
@@ -79,17 +41,44 @@ export default function BalanceSheetTable({
       // basis={query.basis}
       // loading={isLoading}
     >
-      <DataTable
-        className="bigcapital-datatable--financial-report"
+      <BalanceSheetDataTable
         columns={tableColumns}
-        data={[]}
-        // rowClassNames={rowClassNames}
+        data={table?.rows || []}
+        rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         expandable={true}
-        // expanded={expandedRows}
+        expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const BalanceSheetDataTable = styled(DataTable)`
+  .table {
+    .tbody .tr {
+      .td {
+        border-bottom: 0;
+        padding-top: 0.36rem;
+        padding-bottom: 0.36rem;
+      }
+      &.is-expanded {
+        .td:not(.name) .cell-inner {
+          opacity: 0;
+        }
+      }
+      &.row_type--TOTAL {
+        .td {
+          font-weight: 500;
+          border-top: 1px solid #bbb;
+        }
+      }
+
+      &:last-of-type .td{
+        border-bottom: 1px solid #bbb;
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/BalanceSheet/components.js

@@ -18,15 +18,14 @@ export function BalanceSheetAlerts() {
     refetchBalanceSheet();
   };
   // Can't display any error if the report is loading.
-  if (isLoading) {
-    return null;
-  }
+  if (isLoading) return null;
 
   return (
     <If condition={balanceSheet.meta.is_cost_compute_running}>
       <div class="alert-compute-running">
         <Icon icon="info-block" iconSize={12} />{' '}
         <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+
         <Button onClick={handleRecalcReport} minimal={true} small={true}>
           <T id={'report.compute_running.refresh'} />
         </Button>
@@ -52,12 +51,13 @@ export function BalanceSheetLoadingBar() {
  * Retrieve balance sheet columns.
  */
 export const useBalanceSheetColumns = () => {
+  // Balance sheet context.
   const {
-    balanceSheet: { columns, tableRows },
+    balanceSheet: { table },
   } = useBalanceSheetContext();
 
   return React.useMemo(
-    () => dynamicColumns(columns, tableRows),
-    [columns, tableRows],
+    () => dynamicColumns(table?.columns || [], table?.rows || []),
+    [table],
   );
 };

src/containers/FinancialStatements/BalanceSheet/utils.js

@@ -1,10 +1,19 @@
 import * as Yup from 'yup';
 import * as R from 'ramda';
+import { isEmpty } from 'lodash';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { getColumnWidth } from 'utils';
 
+const getTableCellValueAccessor = (index) => `cells[${index}].value`;
+
+const Align = { Left: 'left', Right: 'right', Center: 'center' };
+
+/**
+ *
+ * @returns
+ */
 export const getBalanceSheetHeaderDefaultValues = () => {
   return {
     basic: 'cash',
@@ -15,6 +24,10 @@ export const getBalanceSheetHeaderDefaultValues = () => {
   };
 };
 
+/**
+ *
+ * @returns
+ */
 export const getBalanceSheetHeaderValidationSchema = () =>
   Yup.object().shape({
     dateRange: Yup.string().optional(),
@@ -30,80 +43,303 @@ export const getBalanceSheetHeaderValidationSchema = () =>
 /**
  * Account name column mapper.
  */
-const accountNameMapper = (data, index, column) => {
+const accountNameMapper = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
   return {
-    id: column.key,
     key: column.key,
     Header: column.label,
-    accessor: `cells[${index}].value`,
+    accessor,
     className: column.key,
     textOverview: true,
-    Cell: CellTextSpan,
-    width: getColumnWidth(data, `cells[${index}].value`, {
-      magicSpacing: 10,
-      minWidth: 240,
-    }),
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 240 }),
+  };
+});
+
+/**
+ * Assoc columns to total column.
+ */
+const assocColumnsToTotalColumn = R.curry((data, column, columnAccessor) => {
+  const columns = totalColumnsComposer(data, column);
+
+  return R.assoc('columns', columns, columnAccessor);
+});
+
+/**
+ * Detarmines whether the given column has children columns.
+ * @returns {boolean}
+ */
+const isColumnHasColumns = (column) => !isEmpty(column.children);
+
+/**
+ *
+ * @param {*} data
+ * @param {*} column
+ * @returns
+ */
+const dateRangeSoloColumnAttrs = (data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
   };
 };
 
 /**
  * Date range columns mapper.
  */
-const dateRangeMapper = (data, index, column) => ({
-  id: column.key,
-  Header: column.label,
-  key: column.key,
-  accessor: `cells[${index}].value`,
-  width: getColumnWidth(data, `cells.${index}.value`, {
-    magicSpacing: 10,
-    minWidth: 100,
-  }),
-  className: `date-period ${column.key}`,
-  disableSortBy: true,
-  textOverview: true,
+const dateRangeMapper = R.curry((data, column) => {
+  const isDateColumnHasColumns = isColumnHasColumns(column);
+
+  const columnAccessor = {
+    Header: column.label,
+    key: column.key,
+    disableSortBy: true,
+    textOverview: true,
+    align: Align.Center,
+  };
+  return R.compose(
+    R.when(
+      R.always(isDateColumnHasColumns),
+      assocColumnsToTotalColumn(data, column),
+    ),
+    R.when(
+      R.always(!isDateColumnHasColumns),
+      R.mergeLeft(dateRangeSoloColumnAttrs(data, column)),
+    ),
+  )(columnAccessor);
 });
 
 /**
  * Total column mapper.
  */
-const totalMapper = (data, index, column) => {
-  return {
-    id: column.key,
+const totalMapper = R.curry((data, column) => {
+  const hasChildren = !isEmpty(column.children);
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  const columnAccessor = {
     key: column.key,
     Header: column.label,
-    accessor: `cells[${index}].value`,
-    className: 'total',
+    accessor,
     textOverview: true,
     Cell: CellTextSpan,
-    width: getColumnWidth(data, `cells[${index}].value`, {
-      magicSpacing: 10,
-      minWidth: 200,
-    }),
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }),
     disableSortBy: true,
+    align: hasChildren ? 'center' : 'right',
   };
-};
+  return R.compose(
+    R.when(R.always(hasChildren), assocColumnsToTotalColumn(data, column)),
+  )(columnAccessor);
+});
+
+/**
+ * `Percentage of column` column accessor.
+ */
+const percentageOfColumnAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * `Percentage of row` column accessor.
+ */
+const percentageOfRowAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous year column accessor.
+ */
+const previousYearAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Pervious year change column accessor.
+ */
+const previousYearChangeAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous year percentage column accessor.
+ */
+const previousYearPercentageAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous period column accessor.
+ */
+const previousPeriodAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous period change column accessor.
+ */
+const previousPeriodChangeAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous period percentage column accessor.
+ */
+const previousPeriodPercentageAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ *
+ * @param {*} column
+ * @param {*} index
+ * @returns
+ */
+const totalColumnsMapper = R.curry((data, column) => {
+  return R.compose(
+    R.when(R.pathEq(['key'], 'total'), totalMapper(data)),
+    // Percetage of column/row.
+    R.when(
+      R.pathEq(['key'], 'percentage_of_column'),
+      percentageOfColumnAccessor(data),
+    ),
+    R.when(
+      R.pathEq(['key'], 'percentage_of_row'),
+      percentageOfRowAccessor(data),
+    ),
+    // Previous year.
+    R.when(R.pathEq(['key'], 'previous_year'), previousYearAccessor(data)),
+    R.when(
+      R.pathEq(['key'], 'previous_year_change'),
+      previousYearChangeAccessor(data),
+    ),
+    R.when(
+      R.pathEq(['key'], 'previous_year_percentage'),
+      previousYearPercentageAccessor(data),
+    ),
+    // Pervious period.
+    R.when(R.pathEq(['key'], 'previous_period'), previousPeriodAccessor(data)),
+    R.when(
+      R.pathEq(['key'], 'previous_period_change'),
+      previousPeriodChangeAccessor(data),
+    ),
+    R.when(
+      R.pathEq(['key'], 'previous_period_percentage'),
+      previousPeriodPercentageAccessor(data),
+    ),
+  )(column);
+});
+
+/**
+ * Total sub-columns composer.
+ */
+const totalColumnsComposer = R.curry((data, column) => {
+  return R.map(totalColumnsMapper(data), column.children);
+});
 
 /**
  * Detarmines the given string starts with `date-range` string.
  */
 const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
 
+/**
+ * Dynamic column mapper.
+ */
+const dynamicColumnMapper = R.curry((data, column) => {
+  const indexTotalMapper = totalMapper(data);
+  const indexAccountNameMapper = accountNameMapper(data);
+  const indexDatePeriodMapper = dateRangeMapper(data);
+
+  return R.compose(
+    R.when(R.pathSatisfies(isMatchesDateRange, ['key']), indexDatePeriodMapper),
+    R.when(R.pathEq(['key'], 'name'), indexAccountNameMapper),
+    R.when(R.pathEq(['key'], 'total'), indexTotalMapper),
+  )(column);
+});
+
 /**
  * Cash flow dynamic columns.
  */
 export const dynamicColumns = (columns, data) => {
-  const mapper = (column, index) => {
-    return R.compose(
-      R.when(
-        R.pathSatisfies(isMatchesDateRange, ['key']),
-        R.curry(dateRangeMapper)(data, index),
-      ),
-      R.when(
-        R.pathEq(['key'], 'name'),
-        R.curry(accountNameMapper)(data, index),
-      ),
-      R.when(R.pathEq(['key'], 'total'), R.curry(totalMapper)(data, index)),
-    )(column);
-  };
-  return columns.map(mapper);
+  return R.map(dynamicColumnMapper(data), columns);
 };